Details

Last Updated: 03 May 2020

NSI - Numérique et Sciences Informatiques
Méthode des k plus proches voisins

Prérequis au TD

• Il est conseillé d'avoir traité le TD d' Algorithmique - Projet 2 : GPS et distances.
• Python : Notion de distance euclidienne, liste, parcours de listes et surtout le TD sur les dictionnaires (disponible ici ) .
• Fichiers CSV : avoir traité le TD sur la gestion des fichiers CSV sous Python pour le projet d'application.
  Disponible ici avec la correction.

Présentation de la méthode des k plus proches voisins

• En intelligence artificielle, la méthode des k plus proches voisins est une méthode d’apprentissage supervisé. En abrégé k-NN ou KNN, de l'anglais k-nearest neighbors.
• Dans une méthode d'apprentisssage supervisé, on a des exemples que l'on sait classer et qui sont déjà classés. L'ordinateur apprend avec les exemples et leur réponse, puis teste.
• Par exemple pour distinguer si l'on a une photo de chat ou de chien, l'ordinateur va analyser des centaines de photos dont il a la réponse, et apprendre.
• Le terme machine learning vient de l’informaticien américain Arthur Samuel en 1959.

Notre problème est assez simple
 

• On relève sur des objets de différentes classes (chien ou chat ... ) des paramètres (longueur, largeur, couleur, poids, qualité 1, qualité 2 ..) qui vont permettre de les distinguer.
• On sait donc que pour tel objet de telle classe, on a tels paramètres.
  
  • Par exemple la classe chat (taille, poids, couleur)
  • et la classe chien (taille, poids, couleur)
• L'objectif est de pouvoir prévoir à quelle classe appartient un nouvel objet uniquement à l'aide de ses paramètres.
  Il s'agit clairement d'un apprentissage supervisé.
   
• L'algorithme des k plus proches voisine - Idée générale
  
  1. On considère une population dont on connait la classe et les caractéristiques.
  2. On introduit un nouvel élément dont on ne connait que les caractèristiques et on cherche à lui attribuer une classe.
  3. Ayant choisi une distance adaptée, on compte les k voisins les plus proches de l'élément à classer.
     On verra que le choix de k est crucial.
  4. On lui attribue alors la classe des voisins majoritaires.
     

La méthode des k plus proche voisins - (k nearest neighbors)

{youtube} https://youtu.be/t9LHdng2Kzk {/youtube}

Algorithme des k plus proche voisins - k nearest neighbors

 Soit un ensemble E contenant \(n\) données labellisées.

• Soit une donnée C qui n’appartient pas à E et qui est uniquement caractérisée par des caractéristiques (taille, poids, couleur, caractéristique 1, ...).
• Soit \(d\) une fonction qui renvoie la distance entre la donnée C et une donnée quelconque appartenant à E.
• Soit un entier \(k\) inférieur ou égal à \(n\) : le choix du paramètre \(k\)est crucial.

Voici le principe de l’algorithme de k plus proches voisins  :

1. On calcule les distances entre la donnée C et chaque donnée appartenant à E à l’aide de la fonction \(d\).
2. On retient les \(k\) éléments de E les plus proches de C.
3. On attribue à C la classe qui est la plus fréquente parmi les \(k\) données les plus proches (selon la distance choisie).
4. Il étant entendu que tout dépend du paramètre \(k\) qui est choisi.

Algorithme des k plus proche voisins - Etude d'un exemple

Description : Iris de Fisher

Nous allons ici appliquer l'algorithme des k plus proches voisins sur un exemple concret.

Ce  jeu de données Iris  connu aussi sous le nom de Iris de Fisher  est un jeu de données multivariées présenté en 1936 par Ronald Fisher dans son papier "The use of multiple measurements in taxonomic problems".

Le jeu de données comprend 50 échantillons de chacune des trois espèces d'iris (Iris setosa, Iris virginica et Iris versicolor).

Quatre caractéristiques ont été mesurées à partir de chaque échantillon : la longueur et la largeur des sépales et des pétales, en centimètres.

Sur la base de la combinaison de ces quatre variables, Fisher a élaboré un modèle d'analyse permettant de distinguer les espèces les unes des autres.

Il est possible de télécharger ces données au format csv : Iris_de_Fisher.csv.

• Voici le TD qui comporte 6 exercices : TD - K plus proches voisins.

Articles Connexes 

Details

Last Updated: 05 June 2023

Classes de Première / Terminale
NSI - Numérique et Sciences Informatiques

• Pourquoi prendre la spécialité NSI ?
• 1. Le programme de la spécialité NSI.
• 2. Cours et documents de Math93.com
  1. Cours et TD de NSI en première ;
  2. Cours et TD de NSI en terminale.
• 3. L'épreuve du Bac de NSI en première.
• 4. L'épreuve du Bac de NSI en terminale.
• 5. Les sujets du Bac NSI en 1re et terminale.
• 6. Les ressources pédagogiques.

Pourquoi prendre la spécialité NSI : Numérique et Sciences Informatiques ?

La spécialité NSI est ouverte aux lycéennes et lycéens qui veulent s’approprier des concepts et des méthodes qui fondent l’informatique. Cet enseignement prolonge l’enseignement commun de 2de en sciences numériques et technologie (SNT) et s’appuie sur les cours d'algorithmique de mathématiques en 2de.

Au programme

• L'horaire hebdomadaire est de 4h en 1re et 6 h en terminale.
• Quatre grands domaines sont abordés : les données, les algorithmes, les langages, les machines (dont les objets connectés et les réseaux), et leurs systèmes d’exploitation.
• Cet enseignement favorise les travaux pratiques et la réalisation de projets.

Des projets variés

• Une partie des cours (au moins un quart de l'horaire) est consacrée aux projets des élèves.
• En première comme en terminale, par petits groupes, ils doivent imaginer des solutions pour répondre à un besoin.
• Les sujets sont variés. Les élèves peuvent travailler autour d’un objet connecté ou d’un robot, du traitement d’image ou de son, d’une application mobile (par exemple de réalité virtuelle ou augmentée), du développement d’un site Web associé à l’utilisation d’une base de données, de la réalisation d’un interprète d’un mini-langage ou encore d’un programme de jeu de stratégie, etc.

Plusieurs parcours d’études supérieures recrutent NSI :

• Licences en informatique (informatique générale + maths) ;
• Doubles licences :
  • Informatique et Mathématiques ;
  • Informatique et Biologie ;
  • Informatique et Japonais (Paris Diderot) ;
    
    Sources : https://www.onisep.fr / http://www.informatique.univ-paris-diderot.fr
• Les écoles d’ingénieur post-bac ;
• Les classes prépa, avec une nouvelle section MP2I (Maths-Physique-Informatique) ;
• Les IUT.

Les classes préparatoires MP2I

Lors de la rentrée 2021, il y aura 27 classes préparatoires MP2I en France :

Et après ... quels métiers ?

• Quels métiers après NSI ?  

Orientation avec la spécialité NSI

• Voici un simulateur de l'Onisep : http://www.horizons21.fr/

Compléments

• Pourquoi choisir NSI : eduscol.education.fr

1. Le programme de la spécialité NSI

 Le programme de l'enseignement NSI (Numérique et Sciences Informatiques) de s’appuie sur l’universalité de concepts fondamentaux et la variété de leurs interactions :

• les données, les algorithmes, les langages, les machines (dont les objets connectés et les réseaux), et leurs systèmes d’exploitation.

Programmes officiels :

1. programme de NSI en première ;
2. programme de NSI en terminale.

Complément : utilisation de Python par les développeurs

On peut voir sur ce site les différents langages utilisés par les programmeurs :

• Developpez.com
• Spectrum
   

 Top

2. Les cours et documents de Math93.com

1. Spécialité NSI première
   Cours, TD et documents ressources
    
2. Spécialité NSI terminale
   Cours, TD et documents ressources
    

 Top

3. Evaluation en fin de première

Les élèves qui ne conserveront pas cette spécialité en terminale, verront la note du contrôle continu compter coefficient 8 (Coefficients du Bac).
Initialement, les élèves devaient passer une épreuve, sous forme de QCM, tirée d'une banque de sujets.

  Top

4. Evaluation en terminale

• Page officielle : BO de février 2020.

Nature de l'épreuve de NSI au bac en terminale

• Durée : 3 heures 30 + 1 heure
• Coefficient : 16
• Format : L'épreuve terminale obligatoire de spécialité est composée de deux parties :
  • une partie écrite, comptant pour 12 points sur 20,
  • et une partie pratique comptant pour 8 points sur 20.

La note globale de l'épreuve est donnée sur 20 points.

Partie écrite de l'épreuve  de NSI au bac en terminale

• Durée : 3 heures 30
• Modalités
  • La partie écrite consiste en la résolution de trois exercices permettant d'évaluer les connaissances et les capacités attendues conformément aux programmes de première et de terminale de la spécialité.
  • Chaque exercice est noté sur 4 points.
  • Le sujet propose cinq exercices, parmi lesquels le candidat choisit les trois qu'il traitera.
    Depuis 2023, le sujet ne comporte que 3 exercices et ils sont tous à traiter.
  • Ces cinq exercices permettent d'aborder les différentes rubriques du programme, sans obligation d'exhaustivité. Le sujet comprend obligatoirement au moins un exercice relatif à chacune des trois rubriques suivantes : traitement de données en tables et bases de données ; architectures matérielles, systèmes d'exploitation et réseaux ; algorithmique, langages et programmation.

Partie pratique de l'épreuve  de NSI au bac en terminale

• Durée : 1 heure
• Modalités
  • La partie pratique consiste en la résolution de deux exercices sur ordinateur, chacun étant noté sur 4 points.
  • Le candidat est évalué sur la base d'un dialogue avec un professeur-examinateur.
  • Un examinateur évalue au maximum quatre élèves. L'examinateur ne peut pas évaluer un élève qu'il a eu en classe durant l'année en cours.
  • L'évaluation de cette partie se déroule au cours du deuxième trimestre pendant la période de l'épreuve écrite de spécialité.
• Premier exercice
  • Le premier exercice consiste à programmer un algorithme figurant explicitement au programme, ne présentant pas de difficulté particulière, dont on fournit une spécification.
  • Il s'agit donc de restituer un algorithme rencontré et travaillé à plusieurs reprises en cours de formation.
  • Le sujet peut proposer un jeu de test avec les réponses attendues pour permettre au candidat de vérifier son travail.
• Deuxième exercice
  • Pour le second exercice, un programme est fourni au candidat.
  • Cet exercice ne demande pas l'écriture complète d'un programme, mais permet de valider des compétences de programmation suivant des modalités variées : le candidat doit, par exemple, compléter un programme « à trous » afin de répondre à une spécification donnée, ou encore compléter un programme pour le documenter, ou encore compléter un programme en ajoutant des assertions, etc.

 Top

5. Les sujets de premières et de terminales en NSI

Les sujets d'épreuves du BAC de NSI (première)

• Tous les sujets de la BDD de première (des QCM) : 
  • NSI sujets QCM de première : sujetdebac.fr
  • NSI sujets QCM de première 2020 : https://ccbac.fr
  • NSI sujets QCM de première 2021 : https://ccbac.fr
     
    
• Générateur de QCM : https://genumsi.inria.fr/

Les sujets d'épreuves du BAC de NSI (terminale)

• Epreuve pratique NSI : Tous les sujets de l'épreuve pratique de 1h :
  • Math93 : annales de NSI
  • Eduscol : sujets des épreuves pratiques de NSI.
  • Epreuves pratiques (autre source).
  • Pixees : Epreuves pratiques (et corrigés).
  • https://fabricenativel.github.io/NSITerminale/Annales/2022/EP/
  • https://kxs.fr/sujets/terminale-pratique
      
• Annales de l'épreuve écrite NSI : les sujets de l'épreuve écrite de 3h30
  • https://www.sujetdebac.fr
  • Math93.com (avec corrigés).
  • Pixees : épreuves écrites (avec corrigés).
• Générateur de QCM : https://genumsi.inria.fr/

6. Ressources par thèmes

 6.1. Données, structures et programmation

• Pages HTML/CSS : https://codepen.io/pen/
• HTML/CSS : http://www.csszengarden.com/
• HTML/CSS : https://fvsch.com/gabarits-html/html/liste.html
  Gabarits de page HTML avec CSS
    
• Cours UIP6 : http://www-licence.ufr-info-p6.jussieu.fr/...
  => Programmation, Html, CCS, traitement de données en tables
  

6.2. Algorithmique

• Cours UIP6 : http://www-licence.ufr-info-p6.jussieu.fr/...
  => Algorithmes itératifs, récursifs, compléxité et invariants
• Programmer en jouant
  On peut aussi programmer en jouant CheckIO propose de petits challenges à programmer. On peut demander la traduction en Français des problèmes.
  https://py.checkio.org/

6.3. Architectures

• Localisation IP : iplocation.net / en.dnstools.ch / www.geodatatool.com /
• Logisim : http://www.cburch.com/logisim/
  Logisim est un simulateur de circuits logiques.
• Wireshark : https://www.wireshark.org/
  Pour analyser les trames
• Simulation de réseaux
  • Packet Tracer Cisco : Windows et Linux
    Pour simuler un réseau, nécessite l'inscription à un cours avant de pouvoir télécharger la dernière version
  • GNS3 : https://www.gns3.com/
  • Filius  : http://www.lernsoftware-filius.de/Herunterladen
    • Un TP en anglais (lien) / Un TP en français (lien)
• Visualisation des registres et portes : http://balance3e.com/source.html
  A Balanced Introduction to Computer Science 3rd ed. represents a unique but proven approach to introductory computer science courses.
• Assembleur : MARS (MIPS Assembler and Runtime Simulator)
  MARS is a lightweight interactive development environment (IDE) for programming in MIPS assembly language
• Cours UIP6 : http://www-licence.ufr-info-p6.jussieu.fr/...

6.4. Bases de données, SQL(Structured Query Language)

• Des solutions pour les serveurs locaux : EasyPHP, Wamp ou XAMPP ...  
  
  • Tutoriel d'installation : http://oseox.fr/...
  • Des comparatifs : https://fr.wikipedia.org, ou  https://www.numelion.com , ou  http://f4b1.com
      
  • XAMPP : https://www.apachefriends.org/fr/index.html   
  • UWAMP : http://www.uwamp.com/fr/
    Gros avantage, il est portable
      
    
  • EasyPHP : https://www.easyphp.org/download.php
    EasyPHP est une plate-forme de développement Web permettant de faire fonctionner localement (sans se connecter à un serveur externe) des scripts PHP. Ce n'est pas en soi un logiciel mais un environnement comprenant deux serveurs (un serveur web Apache et un serveur de bases de données MySQL), un interpréteur de script (PHP), ainsi qu'une administration SQL phpMyAdmin.
     
• Générateur de BDD : http://generatedata.com/
    
• Pour effectuer des requêtes SQL :
   
• Toutes les requêtes SQL :
  • https://sql.sh/cours
     
• Cours UIP6  : http://www-bd.lip6.fr/...

6.5. Arbres et Python (terminale)

• Arbe Binaire : lien
  Un Arbre Binaire de Recherche en Python
• Arbres, Tris et Graphes : www.xavierdupre.fr/
• Arbres : christinaboura.github.io
  Notion de classe et arbres
   

 Top

7. Ressources du web

• Ressources Eduscool : https://eduscol.education.fr/cid144156/nsi-bac-2021.html
• Pixees.fr : h ttps://pixees.fr/informatiquelycee/n_site/nsi_prem.html
  De nombreuses activités et des cours liées au programme.
• Programmer en jouant
  On peut aussi programmer en jouant CheckIO propose de petits challenges à programmer. On peut demander la traduction en Français des problèmes.
  https://py.checkio.org/

8. Page officielle des formations DIU - NSI

• http://www-licence.ufr-info-p6.jussieu.fr/lmd/licence/2018/ue/DIU-EIL-2019jun/index.php
• Formation du CNAM (Paris) : http://deptmedia.cnam.fr/diu-eil/
• https://www.sciences-info.net/
• Le livre référence : https://www.epi.asso.fr/revue/sites/s1112a.htm 
  Introduction à la science informatique pour les enseignants de la discipline en lycée, édité par le CNDP-CRDP de Paris

{module [104]}

Articles Connexes 

Details

Last Updated: 27 March 2020

NSI - Numérique et Sciences Informatiques

HTML (HyperText Markup Language) ,
PHP Hypertext Preprocessor
et Interation Client-Serveur : Présentation

1. Qu'est ce que PHP ?

Le PHP, acronyme récursif pour PHP Hypertext Preprocessor est un langage de scripts spécialement conçu pour le développement d'applications web.
Il peut être intégré facilement au HTML.

Le langage PHP a été créé en 1994 par Rasmus Lerdorf, un programmeur groenlandais et canadien pour son site web personnel.

Un exemple de code PHP

On petit exemple en PHP qui

• Calcule la somme de deux varariables, $var1=5 et  $var2=7 ;
• Affiche la somme avec la fonction avec la fonction echo ;
• Calcule et affiche la somme de deux entiers choisis aléatoirement entre 1 et 100, avec la fonction rand(1 , 100).

<!doctype html>
<html>
 <head>
  <title>
   Exemple de variables
  </title>
  <meta charset="utf-8"/>
 </head>
 <body>
 <h1> Un premier programme en PHP : pour les tests</h1>
 
 <?php
  // Commentaires en php	
  // Utilisation de variables, avec le dollard $
        $var1=5;
        $var2=7;
	$somme=$var1+$var2;
		
	// echo permet d'afficher sur la page
	// On peut méler du texte et des variables 
	echo "<p>La somme de $var1 et $var2 est $somme.</p>";		
		
	$nombre1=rand(1,100); // rand(a,b) génère un entier aléatoire entre a et b (inclus)
		
	echo "<p>Le 1er nombre choisi au hasard est $nombre1.</p>";
	$nombre2=rand(1,100);
	echo "<p>Le 2e nombre choisi au hasard est $nombre2.</p>";
		
	$somme=$nombre1+$nombre2;
	// On affiche la somme
	echo "<p>La somme de $nombre1 et $nombre2 est $somme.</p>";	
 ?>
</body>
</html>

• Visualiser le résultat
  Un lien vers le fichier hébergé sur un serveur distant : PHP-Exemple1.php.
   

Premières remarques sur le PHP

• L'affichage en PHP utilise la fonction echo " texte et $variables ".
  On peut afficher du texte et des variables $var simultanément très simplement.
• Les lignes se terminent par un point virgule  ;.
• Les variables se définissent avec le dollard $var1  et peuvent s'intégrer facilement au texte.

Petit exercice important

1. Affichez le code source (Click droit) de la page PHP-Exemple1.php.
2. Vous remarquez que le code source propose juste l'affichage, sans les lignes de code PHP.
3. Actualisez la page, on voit que le contenu change car la fonction rand(1 , 100) est appelée.
4. C'est magique, le client, c'est à dire notre ordinateur ne s'aperçoit pas qu'il y a un calcul d'effectué.

Un fonctionnement distant

• Le PHP fonctionne en fait sur serveur distant.
  On ne peut pas avoir un fonctionnement immédiat sur notre disque comme avec le HTML, le CSS ou le JavaScript.
    
• Ce qui distingue PHP des langages de script comme le Javascript, est que le code est exécuté sur le serveur, générant ainsi le HTML, qui sera ensuite envoyé au client. Le client ne reçoit que le résultat du script, sans aucun moyen d'avoir accès au code qui a produit ce résultat. Vous pouvez configurer votre serveur web afin qu'il analyse tous vos fichiers HTML comme des fichiers PHP. Ainsi, il n'y a aucun moyen de distinguer les pages qui sont produites dynamiquement des pages statiques.
   
• le serveur doit donc être capable de repérer les parties de codes PHP, cela se fera grâce à des balises.
  Le code PHP est donc inclus entre une balise de début <?php et une balise de fin ?> qui permettent au serveur web de passer en mode PHP, ce que ne fait pas votre navigateur sur votre disque dur.

Le fonctionnement du PHP

Vous pouvez maintenant tranquillement lire cette page qui expose le fonctionnement du PHP.

• Openclassrooms : Fonctionnement d'un site écrit en PHP
  

2. Préparez votre environnement de travail

Il va donc nous falloir préparer un environement de travail afin de pouvoir lire les fichiers PHP.

Plusieurs solutions sont possibles, si vous avez déjà un site en ligne, tout sera plus facile, sinon, vous allez devoir installer plusieurs émulateurs de serveurs distants.

Cas 1 : j'ai un site en ligne

• Si vous avez un site en ligne, tout est très simple, il vous suffit d'envoyer vos fichiers sur votre espace et de les ouvrir via votre navigateur. Chaque site à un interpréteur PHP.
• Pour télécharger facilement vos fichiers, vous pouvez : 
  • Soit vous connecter chez votre hébergeur ;
  • Soit utiliser un client FTP. Je vous conseil d'installer FileZilla, gratuit et très simple d'utilisation. 
    Il vous faudra cependant récuprérer chez votre hébergeur vos identifiants de connexion. C'est un peu long la première fois mais ensuite c'est très rapide.

Cas 2 : je veux installer un serveur en local

Deux principaux serveurs sont utilisés : 

• WAMP Server ; 
• et XAMPP Serveur.

Vous pouvez consulter le tutoriel d'Openclassrooms.

• Openclassrooms : Préparez votre environnement de travail.
  On vous décrit les étapes afin de préparer votre environement de travail.
  
  

Quelques remarques post Installation

•  Il ne suffit pas d'ouvrir un fichier avec son navigateur pour que cela fonctionne, on doit généralement lancer l'émulateur puis tapper dans son navigateur :

http://localhost/MonFichier.php

• WampServeur
  • Création automatique d’un répertoire « www » lors de l’installation (typiquement c:\wamp\www).
  • Créez un sous répertoire pour votre projet et déposez-y vos fichiers PHP
  • Cliquez sur le lien « Localhost » du menu de WampServer ou ouvrez votre navigateur à l’adresse :

http://localhost/MonFichier.php

• • Bases de données.
    Au lancement de PhpMyAdmin, il vous sera demandé un nom utilisateur et un mot de passe.
    Après installation de Wampserver 3,
    • le nom utilisateur par défaut est "root" (Sans les guillemets)
    • et il n'y a pas de mot de passe, ce qui veut dire que vous devez laisser la case Mot de passe du formulaire d'accès vide.
       
• Xampp
  • Placer les projets dans le dossier htdocs qui est dans C:\xampp\htdocs
  • Pour ouvrir un fichier nommé MonFichier.php qui est dans le répertoire htdocs, tapper dans votre navigateur :

http://localhost/MonFichier.php

• • Bases de données.
    Pour accéder à la base de données
    => Admin Mysql

3. Un test puis les exercices et travaux dirigés

Nous sommes prêts pour un petit test.

• Recopier le code source de l'exemple 1, enregistrez-le sur votre disque dur avec l'extension .php et ouvrez-le dans votre navigateur .... suspens !

4. Les travaux dirigés

Si tout fonctionne, on est prêt pour les premiers exercices.  Suivez le td sur la page :

• TD : HTML, PHP et Interation Client-Serveur : exercices et applications aux formulaires.

Articles Connexes 

Details

Last Updated: 27 February 2023

NSI - Numérique et Sciences Informatiques

HTML (HyperText Markup Language) et
CSS (Cascading Style Sheets )

Menu

1. Présentation du HTML : HyperText Markup Language
   • Étape 1 : Lire le cours
2. Résumé du cours HTML
   • Étape 2 - Exercice 1 : Une première page.
3. CSS : Cascading Style Sheets
   • Etape 3
   • Etape 4 : Exercice 2
4. Le projet

1. Présentation du HTML : HyperText Markup Language

Le HyperText Markup Language ou HTML est le langage de balisage conçu pour représenter les pages web.
C’est un langage permettant d’écrire de l’hypertexte, c'est à dire est un document contenant des unités d'information liées entre elles par des hyperliens.

HTML permet également de structurer et de mettre en forme le contenu des pages, d’inclure des ressources multimédias dont des images, des formulaires de saisie et des programmes informatiques.

Il est souvent utilisé conjointement avec le langage de programmation JavaScript et des feuilles de style en cascade (CSS).

Quelques outils

• Aide notepad++ pour avoir les balises ouvrantes et fermantes automatiquement :
  - plugin manager -> textFx
  - TextFx -> settings -> autoclose html tags.
   
• Sur Mac on peut utiliser : BBEdit / editra / Gedit / .
    
• On peut aussi utiliser Sublime text : https://www.sublimetext.com/
   

Etape 1

1. A lire (même rapidement) Le cours en PDF : PowerPoint / Pdf.
   Une vue d'ensemble d'une page HTML.
2. Optionnel : Lire et faire les exemple du cours sur : Les_bases_HTML . 
   (Voir aussi le cours openclassrooms.com si besoin)
   

2. Résumé du cours HTML : page exemple.html

• On utilise l'éditeur de texte (Sublime Text, Notepad++, jEdit, vim…) pour créer un fichier ayant l'extension .html (par exemple : test.html).
• Ce fichier peut être ouvert dans le navigateur web simplement en faisant un double-clic dessus.
• À l'intérieur du fichier, nous écrirons le contenu de notre page, accompagné de balises HTML.
   
• Les balises peuvent avoir plusieurs formes :
  • < balise> et </balise > : elles s'ouvrent et se ferment pour délimiter le contenu (début et fin d'un titre, par exemple).
  • <balise/> : balises orphelines (on ne les insère qu'en un seul exemplaire), elles permettent d'insérer un élément à un endroit précis (par exemple une image).
     
• Les balises sont parfois accompagnées d'attributs pour donner des indications supplémentaires :
  - exemple : <img alt="image.jpg" /> .
   
• Une page web est constituée de deux sections principales :
  • un en-tête < head >
  • et un corps <body>.
     
• On peut afficher le code source de n'importe quelle page web en faisant un clic droit puis en sélectionnant Afficher le code source de la page.
   
• La structure d'une page web :

<!DOCTYPE html>
<html>
    <head>
        <!-- En-tête de la page -->
        <meta charset="utf-8" />
        <title>Titre</title>
    </head>

    <body>
        <!-- Corps de la page -->
    </body>
</html>

•  Baliser le texte
  
  • Les titres et sous-titres : h1, h2, h3, h4 ...
    

    <!-- Titre h1 -->
    <h1>Les principaux éléments d'une page HTML</h1>
       <!-- Sous-Titre h2 -->
       <h2>Les titres</h1>

  •  Les paragraphes 
    

    <p> p est la balise d'un paragraphe</p>
    

  •  Le texte  
    En gras avec l'attribut strong, en italique avec l'attribut em, souligné avec l'attribut u ...
    

    En <strong>gras</strong> avec l'attribut <code>strong</code>, en <em>italique</em> avec l'attribut <code>em</code>, <u>souligné</u> avec l'attribut <code>u</code>
    

• Les listes : ordonnées (ol : orderd list), par exemple :
  1. 1er item
  2. 2e item
  3. 3e item 
     

     <!-- Les listes ordonnées ol (Ordered Lists)   -->
         <ol> 
     	<li>1er item</li>
     	<li>2e item</li>
     	<li>3e item</li>
        </ol>	
     
     

• Les listes : non ordonnées (ul : unordered list) par exemple :
  • point A
  • point B
  • point C 
    

    	
    <!-- Les listes non ordonnées ul (Unordered Lists) -->
       <ul> 
    	<li>point A</li>
    	<li>point B</li>
    	<li>point C </li>
       </ul>
    

• Les images
  L'image utilisée est définie via l'attribut src (pour source) qui contient le chemin vers le fichier de l'image.
  On peut redéfinir la taille avec les attributs width , eight et un texte alternatif (pour les aveugles) avec alt
  • Attention : il faut donner le chemin relatif de votre image, par rapport à l'endroit où se situe votre fichier .html.
    Pour rappel :
    • • ../ : pour remonter au dossier parent.
      • ./  : pour le répertoire courant

<!-- Attention il faut bien définir le chemin précis de l'image et son extension (png ici)-->
<img src="images/html-logo.png" alt="Texte de remplacement." width=90>

• Les liens
  • Lien externe : avec l'attribut href et le lien absolu vers la page.

    <a href="https://www.math93.com">www.math93.com</a>
    

  
  
  •  Lien sur une page du site : avec l'attribut href et le lien relatif vers la page.

    <a href="autrepage.html"> lien sur le site</a>
    

  
  
  • Lien ancre
    Vers en endroit sur la page avec le croisillon #ref et un label qui fait référence à un autre endroit de la page repéré par id="ref"

    <p id="lien_ancre_1">Voici les principaux éléments d'une page HTML.</p>
    <a href="#lien_ancre_1"> haut de la page</a>
    

• Les tableaux avec par exemple
  Avec les attributs :  table pour le tableau, tr pour les lignes (table rows), th pour les cellules titres (table header), td pour les cellules (table data).
  cellspacing pour l'espace entre les cellules, cellpading pour l'espace entre texte et bord, widht pour la taille du tableau sur la page ...
  Des compléments ici : lien.
  

  <center> <!-- pour centrer le tableau-->
  <table border="4" cellspacing="1" cellpadding="1" width="50%"  text-align:center>
  <!-- cellspacing : espace entre les cellules-->
  <!-- cellpading  : espace entre le texte et les bords des cellules -->
  <!-- width="50%  : le tableau est sur 50% de la page -->
  <tr>
      <th>Titre Ligne 1 Col. 1</th> <!-- th  : l'entête ou header -->
      <th>Titre L1 C2</th>
      <th>Titre L1 C3</th>
  </tr>
  
  <tr> 
      <td>Ligne 2 Col. 1</td> <!-- td  : pour data (dans les cellules) -->
      <td>L2 C2</td>
      <td>L2 C3</td>
  </tr>	
  				
  </table>
  </center>
  

• La barre horizontale <hr />
  

p>Barre horizontale simple, </p>  
<hr />    
<p>avec une longeur relative limitée,</p>  
<hr style="width:50%;" />    
<p>avec une longueur absolue,  
<hr style="width:100%;" />   
<p>avec d'autres positions dans la page,  
<h1>HTML</h1>
<p>HTML is a language for describing web pages.....</p>
<hr style="width:10%;size:10px;" />

Etape 2

Exercice 1 : Une première page.
Suivez les indications pour créer votre première page.

3. CSS : Cascading Style Sheets

Le CSS (Cascading Style Sheets) est un langage de feuille de style utilisé pour décrire la présentation d'un document écrit en HTML ou en XML.
Le CSS décrit la façon dont les éléments doivent être affichés à l'écran, sur du papier, en vocalisation, ou sur d'autres supports.

Etape 3

• Lire et faire les exemples du cours sur ce site 
  1. https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics
  2. Les éléments importants :
     
     • CSS (color, background, text, font ... ), voir la liste sur la page https://www.w3schools.com
     • des CSS id selector et class selector : https://www.w3schools.com
     • Aide sur les priorités de style : https://openweb.eu.org/articles/cascade_css
• Pour avoir toutes les fonctions disponibles
  • Cascading Style Sheets (CSS) :  https://www.w3schools.com/css/default.asp
      
    
• ATTENTION
  Pour lier page Html et une feuille de style nommée feuille.css il faut écrire dans le <head> de votre page html un lien vers la feuille de style (voir la syntaxe ci-dessous).  

<link type="text/css" rel="stylesheet" href="feuille.css">

Etape 4

Exercice 2 :
Vous devez utiliser une feuille de style CSS et modifier des éléments de votre page de l'exercice 1.
 

4. Un petit projet

Objectif

Vous allez devoir :

1. créer un mini-site avec au moins 3 pages et une feuille de style CSS ;
2. le mettre en ligne.

Utilisez un hébergeur gratuit ou un site comme https://repl.it qui permet de gérer un petit espace Web avec les fichiers .CSS et .SCRIPT.
Votre fournissur d'acces domicile (comme FREE) peut vous proposer un petit espace Web totalement gratuit. Il vous suffit chez FREE d'ouvrir un compte e-mail chez eux.

Les contraintes

• Créer votre mini site sur le thème de votre choix, par exemple sur un thème du programme de NSI.
• Les contraintes sont les suivantes (chaque élément sera évalué) :
  • Votre site devra comporter une feuille de style CSS avec au moins 10 items :
    
    • 10 CSS parmi  : color, background, text, font ... , voir la liste sur la page https://www.w3schools.com
    • des CSS id selector et class selector : https://www.w3schools.com
    • Aide sur les priorités de style : https://openweb.eu.org/articles/cascade_css
  • Il devra comporter au moins 3 pages distinctes et des liens vers chacune d'elles.
  • Sur chaque page il faudra :
    • un titre ;
    • une image liée au thème de la page ;
    • Des listes ordonnées (ol) et non ordonnées (ul) ;
    • Des tableaux ;
    • des liens internes et externes ;
    • un lien à partir d'une image ;
    • du contenu avec indication de la source de référence ;
    • Attention : tout copier/coller d'une autre page web sera sanctionné d'un zéro !
  • Une au moins des pages devra présenter un lien "ancre", c'est à dire un lien vers un élément de la même page
    • Lien ancre : quelques éléments d'explication.
• Aide : création site pas à pas.   

Articles Connexes 

Details

Last Updated: 18 February 2023

NSI - Numérique et Sciences Informatiques

Javascript et HTML

1. Présentation de Javascript

JavaScript est un langage de programmation de scripts principalement employé dans les pages web interactives mais aussi pour les serveurs.

JavaScript a été créé en 1995 par l'américain Brendan Eich. Il a été standardisé sous le nom d'ECMAScript en juin 1997 par Ecma International dans le standard ECMA-262.

Brendan Eich, né en 1961 à Pittsburgh en Pennsylvanie

2. Fonctionnement de Javascript

Avec les technologies HTML et CSS, JavaScript est parfois considéré comme l'une des technologies cœur du World Wide Web.
Le langage JavaScript permet des pages web interactives, et à ce titre est une partie essentielle des applications web. Une grande majorité des sites web l'utilisent, et la majorité des navigateurs web disposent d'un moteur JavaScript dédié pour l'interpréter, on peut donc se passer des serveur pour le faire fonctionner.

• Les balises
  Les navigateurs décryptant le HTML, vont identifier le code encapsulé entre les deux balises, l'une ouvrante, l'autre fermante :

<script> </script> 

•  Place des balises
  Cette balise peut se placer n'importe où sur la page HTML mais il est d'usage de placer les scripts en fin de page, juste avant la balise </body>.
  On peut aussi faire figurer le code dans un fichier externe comme nous le verrons.
  
  

2a. Un premier exemple, le fameux "Hello, World!"

Recopiez le code suivant sur une page html nommée index.html et ouvrez-le avec votre navigateur.

<!DOCTYPE html>
<html>
<head>
    <title>TD Javascipt</title>
</head>

<body>
<h1>Mes premiers exemples</h1>
<p></p>
    <script>
        alert('Hello world! Dans une nouvelle fenêtre');
        document.write('Hello world! sur la page');
    </script>

</body>
</html>

On obtient le résultat suivant : exemple_javascipt-1.html

Instructions et point virgule

• Les instructions Javascript doivente être suivies d'un point virgule ;
   

Les fonctions et méthodes : exemple, la boîte de dialogue alert(), et document.write("texte")

• alert() est une instruction simple, appelée fonction, qui permet d'afficher une boîte de dialogue contenant un message. Ce message est placé entre apostrophes, elles-mêmes placées entre les parenthèses de la fonction alert().
   
• document.write() est une méthode (et une fonction) , qui permet d'afficher une un texte ou une variable sur le document. Ce message est placé entre apostrophes, elles-mêmes placées entre les parenthèses de la fonction document.write().
    
• Une fonction se compose de deux choses :
  • son nom ;
  • suivi d'un couple de parenthèses (une ouvrante et une fermante).
     
• Comme en Python, entre les parenthèses se trouvent les arguments, que l'on appelle aussi paramètres de la fonction. Ceux-ci contiennent des valeurs qui sont transmises à la fonction. Dans le cas de la fonction alert() ici, ce sont les mots « Hello world! » qui sont passés en paramètre.

alert('Hello world!'); // c'est une première fonction en Javascript

document.write('Hello world!'); // c'est une autre fonction (méthode) en Javascript

Les commentaires

• Comme dans tout langage, il est important de commenter ses scripts.
  Les commentaires s'écrivent :
  • derrière  le symbole // et sur une seule ligne ;
  • ou alors précédé de /* et se terminant par */ s'ils sont sur plusieurs lignes.

Les Erreurs

En cas d'erreurs sur le Javascipt on peut regarder s'il y a un message d'erreurs dans la console qui est accessible via Ctrl+shift+I

.

On peut écrire dans la console avec la fonction console.log()

2b. Le JavaScript externe

Il est possible, d'écrire le code JavaScript dans un fichier externe, portant l'extension .js. Ce fichier est ensuite appelé depuis la page Web au moyen de l'élément <script> et de son attribut src qui contient l'URL du fichier .js.

Exercice 1A

- Créer dans le même répertoire, un fichier exemple1.js et un fichier index.html.
- Dans le fichier exemple1.js  on écrit le script :

alert('Hello world!');

 - dans le fichier index.html., recopiez le code suivant et testez-le.

<!DOCTYPE html>
<html>
<head>
    <title>Mes programmes en Javascript</title>
</head>

<body>

    <script src="exemple1.js"></script>

</body>
</html>

 On obtient le résultat suivant : exemple_javascript-2.html
 

Exercice 1B

Pour tous les exercices suivants, vous allez compléter la page index.html, en créant des liens vers les différents exercices JavaScript de ce TD.
Vous nommerez chaque fichier exercice sous la forme : "VotreNom-Javascript-Exercice2.html".
Cela va par exemple donner :

<!DOCTYPE html>
<html>
<head>
    <title>TD javascript</title>
</head>

<body>
<h1>Mes premiers exemples</h1>
 <script src="exemple1.js"></script>

<p></p>
<ol> 
	<li>Exercice 2 : <a href="VotreNom-Javascript-Exercice2.html"> lien sur l'exercice 2</a> </li>
	<li>Exercice 3 : <a href="VotreNom-Javascript-Exercice3.html"> lien sur l'exercice 3</a> </li>
	<li>Exercice 4 : <a href="VotreNom-Javascript-Exercice4.html"> lien sur l'exercice 4</a> </li>
   </ol>	

</body>
</html>

 

3. Programmer en Javascript

3a. Les variables

Résumé du cours

• Une variable est un moyen pour stocker une valeur.
• Mot clé var
  On utilise les mots clés :  var , const et let pour déclarer une variable, et on utilise = pour affecter une valeur à la variable.
  Pour appréhender les différences entre var, const et let.
• Variables typées dynamiquement
  Les variables sont typées dynamiquement, ce qui veut dire que l'on n'a pas besoin de spécifier le type de contenu que la variable va contenir.
• Opérations
  Grâce à différents opérateurs, on peut faire des opérations entre les variables.
  Voici le liste des principaux opérateurs avec les compattibilités des navigateurs : les opérateurs Javascript.
• Concaténation
  L'opérateur + permet de concaténer des chaînes de caractères, c'est-à-dire de les mettre bout à bout.
• Intéraction avec prompt()
  La fonction prompt() permet d'interagir avec l'utilisateur.
  Tout ce qui est écrit dans le champ de texte de prompt() est récupéré sous forme d'une chaîne de caractères, que ce soit un chiffre ou non.
  Si vous utilisez l'opérateur +, vous ne ferez pas une addition mais une concaténation !
  Pour convertir la chaîne de caractères en nombre entier on utilise la fonction parseInt(), et en flottant, la fonction parseFloat()

Un exemple

<script>
var a, b, produit,somme;
a = prompt('Donnez un nombre');
b= prompt('Donnez un autre nombre :');
a=parseFloat(a) ; // On convertit la chaîne de caractère a en flottant
b=parseFloat(b); // On convertit la chaîne de caractère b en flottant
produit = a*b;
somme=a+b;
alert('Le produit est '+ produit+', et la somme est '+ somme);
</script>

 On obtient le résultat suivant : Exemple 3 .

Exercice 2

Ecrire un script Javascript qui pour un triangle ABC rectangle en A, demande la longueur AB, la longueur AC et affiche une valeur approchée de l'hypoténuse BC.
Vous nommerez votre fichier : "VotreNom-Javascript-Exercice2.html" et devez faire figurer le lien vers ce fichier sur votre page web : exercices JavaScript (avec votre nom).

Aide : 

<script>
a = Math.sqrt(2) // a =  la racine carrée de 2 (enfin une valeur approchée)
</script>

Programmer en Javascript

3b. Les conditions

Résumé du cours

• Une condition retourne une valeur booléenne : true ou false.

• En JavaScript on utilise les accolades pour délimiter les blocs d'instructions :

if ( /* condition */ ) 
{
    // Du code…
} else {
    // Du code…
}

•  Les opérateurs logiques en javaScript
  De nombreux opérateurs existent afin de tester des conditions et ils peuvent être combinés entre eux.

  • test d'égalité == , supérieur à : > , supérieur ou égal à : >=,  et  différent de !=
  • contenu et type égal à : ===  , et contenu et type différent de : !==
  • le ET logique se traduit par supérieur à : &&
  • le OU logique par : ||
  • la négation par le point d'exclamation : ! .
      

• La condition if else permet de combiner les conditions.
    

• Quand il s'agit de tester une égalité entre une multitude de valeurs, la condition switch est préférable.

Exercice 3

Ecrire un script Javascript qui pour un triangle ABC, demande la longueur AB, la longueur AC et la longueur BC et affiche si ce triangle est rectangle (et en quel sommet) ou si il ne l'est pas.
Vous nommerez votre fichier : "VotreNom-Javascript-Exercice3.html" et devez faire figure le lien vers ce fichier sur votre page web : exercices JavaScript (avec votre nom).
Vous devrez tester votre script avec :

1. ABC tel que AB = 3, AC = 4 et BC = 5 qui drevrait afficher : "ABC est rectangle en A" ;
2. ABC tel que AB = 50, AC = 30 et BC = 40 qui drevrait afficher : "ABC est rectangle en C" ;
3. ABC tel que AB = 6, AC = 10 et BC = 8 qui drevrait afficher : "ABC est rectangle en B" ;
4. ABC tel que AB = 3, AC = 4 et BC = 6 qui drevrait afficher : "ABC n'est pas rectangle".

 

3. Programmer en Javascript

3c. Les structures itératives (boucles)

Résumé du cours

• L'incrémentation est importante au sein des boucles.
  Incrémenter ou décrémenter signifie ajouter ou soustraire une unité à une variable.

var x = 0;

x = x+1 ; // on ajoute 1 à x
alert(x); // Affiche : « 1 »

x++;      // on ajoute 1 à x
alert(x); // Affiche : « 2 »

x--;     // on enlève 1 à x
alert(number); // Affiche : « 1 »

• La boucle while permet de répéter une liste d'instructions tant que la condition est vérifiée.

<script>
var N = 0,somme=0;

while (N < 5) 
{
    N=N+1; // ou N++
    somme=somme+N
}

alert('somme= ' + somme + ' et N=' + N ); // Affiche « somme = 15 et N = 5 »
</script>

Un test avec ce script : exemple 1

• La boucle for est une boucle utilisée pour répéter une liste d'instructions un certain nombre de fois.

<script>
var somme=0;

for (var N=1 ; N<=5 ; N=N+1 ) // syntaxe (var compteur=valeur départ ; compteur<= valeur fin ; incrément)
{   
    somme=somme+N
}

alert('somme= ' + somme + ' et N=' + N ); // Affiche « somme = 15 et N = 6 » , la dernière valeur de N est 6 ce qui invalide la condition
</script>

 Un test avec ce script : exemple 2.

Exercice 4

Ecrire un script Javascript qui tente de faire deviner un entier de votre choix et affiche, plus petit, ou plus grand jusqu'à la victoire.
Commencer par fixer votre nombre à deviner puis essayer de le générer aléatoirement dans un deuxième temps.
Vous nommerez votre fichier : "VotreNom-Javascript-Exercice4.html" et devez faire figure le lien vers ce fichier sur votre page web : exercices JavaScript (avec votre nom).

Exemple attendu en vidéo :

{youtube} https://youtu.be/pMMvuSCB7WA {/youtube}

3. Programmer en Javascript

3d. Les fonctions

Résumé du cours

• Il existe des fonctions natives en JavaScript dont voici une liste des fonctions JavaScript.
  On a par exemple :
  alert() , prompt() , confirm() , parseInt() , parseFloat() , ...
  
  
• Il est aussi possible d'en créer, avec le mot-clé function. Par exemple ici avec ce code on obtient : exemple 1

<script>
function DireBonjour(x)
{
    return ('Bonjour  ' + x); // L'instruction « return » suivie de la concaténation de 'Bonjour' et de la variable chaîne x
}
nom=prompt('Quel est votre prénom svp ?'); // On demande le prénom à l'utilisateur
alert(DireBonjour(nom)); // Ici on affiche la valeur retournée par la fonction DireBonjour()
</script>

• Les variables déclarées avec var au sein d'une fonction ne sont accessibles que dans cette fonction.
• Il faut éviter le plus possible d'avoir recours aux variables globales.
• Une fonction peut recevoir un nombre défini ou indéfini de paramètres. Elle peut aussi retourner une valeur ou ne rien retourner du tout.
• Des fonctions qui ne portent pas de nom sont des fonctions anonymes et servent à isoler une partie du code.

Exercice 5

Ecrire une fonction Javascript qui teste la présence de la lettre "e" minuscule dans une chaîne de caractères passée en paramètre. Cette fonction doit renvoyer vrai ou faux. Utilisez votre fonction après avoir demandé une chaîne de caractères via la fonction prompt().
Vous nommerez votre fichier : "VotreNom-Javascript-Exercice5.html" et devez faire figure le lien vers ce fichier sur votre page web : exercices JavaScript (avec votre nom).

Aide : La fonction .length renvoie la longueur d'une chaine C et la fonction .charAt(position) le caractère à la position précisée dans la chaîne C.
Voici un exemple d'utilisation : lien exemple 2.

<script>
var C='abcdefg'; // C est une chaine de caracteres
long=C.length;   // long est la longueur de la chaine, ici 7 
lettre=C.charAt(0); // lettre est le caractere de la chaine en position 0 (le 1er caractere)
alert('Chaine=' + C + ' , longueur = '+ long + ', premier caractere = ' + lettre );

</script>

Avant de poursuivre vers le chapitre 4

• Sur les variables. Faire le QCM et le QCM didactiques et les deux petits exercices :
  • exercice 1 :  Déclarer et initialiser une variable ;
  • exercice 2 :  Déclarer et initialiser deux variables.
• Sur les conditions. Faire le QCM et la Question ouverte et l'exercice :
  • exercice 3 :  Écrire une condition.
• Sur les boucles. Faire le QCM et le questionnaire didactique et les deux petits exercices :
  • exercice 4 :  écrire une boucle while  ;
  • exercice 5 :  écrire une boucle while qui exécute un prompt() .
• Sur les fonctions. Faire le QCM et le questionnaire didactique et les deux petits exercices :
  • exercice 6 :  Déclarer une fonction   ;
  • exercice 7 :  Écrire une fonction pour comparer deux nombres .

4. Les évènements en HTML

JavaScript permet de réagir à un évènement lié à la page HTM :

• clic , utilisation du clavier, focus sur une zone ...

Pour réagir à un évènement de ce type, il faut commencer par agir au niveau HTML en ajoutant un attribut à la balise à laquelle on souhaite ajouter une interaction. La syntaxe est toujours la même :

onEvénement = "Fonction"

Les événements permettent de déclencher une fonction selon qu'une action s'est produite ou non.
Par exemple, on peut faire apparaître une fenêtre alert() lorsque l'utilisateur survole une zone d'une page Web, clique sur un texte...

 Voici une liste de quelques évènements :

On trouve de nombreux exemples sur cette page : https://www.w3schools.com/js/js_htmldom_events.asp

4.1. Réponse à un click sur un élément en HTML

• Il s'agit de l'intéraction la plus simple. Un élément avec l'attribut onclick déclenche une fonction javaScript
• Dans cet exemple le clique sur le bouton avec le texte défini par value= "Ouvrir une fenêtre alerte", déclenche la fonction fenetre() qui a été définie dans les scripts et qui affiche un message.
• Les évènements 'onclick' peuvent se programmer en HTML ou en JavaScript dans le script lui-même avec une syntaxe un peu différente : syntaxe onclick.

Déclencher une fonction javaScriptau click - Ouvrir une fenêtre alert() au click

Voici un premier exemple : évènements exemple 1.

<!DOCTYPE html>
<html lang="fr">
<meta charset="utf-8">

<html>
<head>
    <title>Les évènements en javaScript : Exemple 1</title>
</head>
<body>
<input type ="button" value="Ouvrir une fenêtre alerte" onclick="fenetre('Bonjour')"/>
<script>
function fenetre(x)
{
alert(x + ' Madame ou Monsieur');
}
</script>
</body>

Créer un affichage dans à un endroit précis de la page au click

• Dans cet autre exemple, deux boutons, avec l'un on affiche la date et avec l'autre on modifie un paragraphe.
  Lien vers : évènements exemple 1bis.

<body>
<h2> Des  boutons </h2>
<h3>1. Un premier bouton qui affiche la date</h3>

<!--un premier bouton--> 
<button  type="button"   onclick="document.getElementById('demo').innerHTML=Date()" >
Cliquez sur le bouton 1 </button>
<!--  --> 

<!--La balise id="demo" permet d'identifier un élément de la page--> 
<p id="demo">C'est ici</p>
<!--  --> 

<h3>2. Un autre bouton qui modifie du contenu HTML</h3>

<p> On va modifier le contenu de la balise HTML de paragraphe nommée "ICI" (grâce à l'identifiant id="ICI"). Il change sous vos yeux. 
</p>

<!--La balise id="ICI" permet d'identifier un autre élément de la page-->
<p id="ICI" >  Ici la balise HTML nommée ICI : On va changer ce texte. </p>
<!--  -->

<!--un autre bouton--> 
<button  type="button"   onclick="document.getElementById('ICI').innerHTML= 'On change' " >
Cliquez sur le bouton 2</button>
<!--  --> 
</body>

• Dans cet autre exemple, la couleur du fond d'écran change quand on clique sur le bouton.
  Lien vers : évènements exemple 2.

<body>
<input type ="button" value="Changer de couleur" onclick="ChangementCouleur()"/>
<script>
function ChangementCouleur()
{  
   const couleur=document.body.style.backgroundColor; // on charge la couleur du fond, const pour déclarer variables (avec let) remplace var
   alert("Vous m'avez cliqué ! On change de couleur = " + couleur);
   if (couleur=='ivory')
      {document.body.style.backgroundColor = 'orange';}
   else 
      {document.body.style.backgroundColor = 'ivory';}
   
}
</script>
</body>

4.2. Choix dans une liste déroulante 

On va décrire l'exemple 3 qui suit.

• On détecte un changement sur l'élément select via la méthode indiquée par l'attribut onchange, ici la méthodeselection().
• Dans la fonction selection(), on cible l'élément select par son identifiant (id="choix").
• Puis on accède au choix effectué à l'aide de selecteur.selecteurIndex.
• Enfin on affiche ici la valeur et le texte de l'option choisie.

<!DOCTYPE html>
<html lang="fr">
<meta charset="utf-8">

<html>
<head>
    <title>Les évènements en javaScript : Exemple 3</title>
</head>
<body>
<select id="choix" name="lang" onchange="selection()">
<option value="fr"> Français </option>
<option value="zh"> Chinois </option>
<option value="it"> Italien </option>
</select>

<script>
 function selection()
 {
    const selecteur = document.getElementById("choix");
    const monChoix=selecteur[selecteur.selectedIndex];
    alert('Vous avez choisi la valeur = ' + monChoix.value + ' , soit le choix = ' + monChoix.text);	
  }
</script>
</body>

4.3. Un petit formulaire

On présente ici comment récupérer une valeur entrée dans une case à l'aide d'un formulaire après validation d'un bouton.

<body>
<!------------------------------------------------->
<h2> Les évènement en HTML/JavaScript : Un petit formulaire</h2> 
<!------------------------------------------------->
 
<!------------------------------------------------->
Donnez un entier entre 1 et 4, je vais vous le traduire en anglais : 
<FORM>
 <input type="text" name="Valeur_Reponse" id="Id_Reponse" value="" />
 <input type="button" value="Valider" onclick="MaFonction();" />
</FORM>

<!--------On affichera le réslutat ici------------->
<p id='resultat'>S'écrit en anglais :</p>
<!------------------------------------------------->

<script>
function MaFonction()
{
    var reponse = document.getElementById("Id_Reponse").value; // Pour récupérer la valeur entrée
    
    if (reponse=='1')
            {document.getElementById('resultat').innerHTML= 'one';}
    else if  (reponse=='2')
	    {document.getElementById('resultat').innerHTML= 'two';}
    else if  (reponse=='3')
	    {document.getElementById('resultat').innerHTML= 'three';}
    else if  (reponse=='4')
	    {document.getElementById('resultat').innerHTML= 'four';}	
    else 
	    {document.getElementById('resultat').innerHTML= 'Je ne comprend pas';}
 
}
</script>
<!------------------------------------------------->
</body>

 Lien vers l'exemple 4.

Exercice 6

Concevoir une page avec un Quiz avec au moins 3 questions qui portent sur le programme de NSI :
- 1 questions Vrai/Faux avec avec deux boutons ou un QCM ;
- 1 question avec une liste déroulante (QCM) ;
- 1 question ouverte avec un texte ou une valeur à donner.
Contraintes :
- Vous devez aussi afficher le score final. 
- Vous devez personnaliser votre page (nom, thème, couleur, page CSS ...)
- Vous nommerez votre fichier : "VotreNom-Javascript-Exercice6.html". 
- Vous nous donnerez le lien sur Capytale.

{youtube} https://youtu.be/rbXg9w29Vps {/youtube}

Compléments

• Lire le cours sur Openclassroom : les évènements en Javascript.
  
  

Compléments : Des cours progressifs à suivre

Voici quelques cours que vous pouvez suivre en compléments :

1. Javascript sur Pixees : https://pixees.fr
   HTML, CSS et javascript. Pour se familiariser avec ces notions.
    
2. Openclassroom : https://openclassrooms.com
   Les premiers pas en javascipt.
    
3. Lyceum : https://lyceum.fr
   Gestion des évènements en Javascript.
    
4. Un cours de référence de l'université paris Sorbone est ici disponible  : débuter en JavaScript.
   Peu être lu en diagonale une première fois pour servir de source par la suite.

Articles Connexes 

Details

Last Updated: 27 December 2019

NSI - Numérique et Sciences Informatiques

Mémoire et langage machine

En son coeur, la machine effectue des calculs à partir d'instructions simples en binaire qui peuvent être directement traduites dans un langage, l'assembleur.
L'assembleur prend, traite et remplit des cases mémoires.

Avant de consultez cette page, il est conseillé de lire celle consacrée à l'architecture de von Neumann.

I. Organisation de la mémoire

I.1. Les différents types de mémoire

Il existe de nombreux mécaniques de mémoires qui se distinguent par leur durabilité (volatile ou permanente), leur mode d'accès (par adresse ou dans l'ordre de rangement).

Mémoire vive RAM (Random Acces Memory)

• La mémoire vive (RAM) est une mémoire volatile (qui perd ses données lorsqu'on coupe son alimentation électrique).
• Il s'agit des registres, des mémoires cache, de la mémoire centrale.

• Il y a deux types principaux de mémoire vive :

  • la mémoire vive dynamique (DRAM) qui, même sous alimentation électrique, doit être réactualisé périodiquement pour éviter la perte d'information ;
  • la mémoire vive statique (SRAM) qui n'a pas besoin d'un tel processus lorsque sous alimentation électrique.

Deux barrettes de mémoire de 512 Mio chacune

Mémoire morte ROM (Read-Only Memory )

• La mémoire morte (ROM) est une mémoire non volatile (mémoire rémanente qui conserve ses données même lorsqu'on coupe son alimentation électrique).
• Par exemple les disque SSD (Solid State Drive), les disques magnétiques.

• Les mémoires mortes sont utilisées, entre autres, pour stocker :

  • les informations nécessaires au démarrage d’un ordinateur (BIOS, instructions de démarrage, microcode);
  • des tables de constantes ou des tables de facteurs de conversion ;
  • Elle fait aussi partie des microprogrammes présents dans les ordinateurs et la plupart des appareils électroniques (smartphone, baladeur et autres lecteurs de CD/DVD) mais aussi la plupart des appareils programmables (TV, réveil, machine à laver, lave vaisselle, etc.).
      

  Le temps d’accès à la mémoire morte est de l’ordre de grandeur de 150 nanosecondes comparativement à un temps d’accès d’environ 10 nanosecondes pour la mémoire vive. Pour accélérer le traitement des informations, les données stockées dans la mémoire morte sont généralement copiées dans une mémoire vive avant d’être traitées.
  On appelle cette opération le shadowing.

ROM (Read-Only Memory)

I.2. Les registres

• Un registre est un emplacement de mémoire interne à un processeur. Les registres se situent au sommet de la hiérarchie mémoire : il s'agit de la mémoire la plus rapide d'un ordinateur, mais dont le coût de fabrication est le plus élevé car la place dans un microprocesseur est limitée.
    
• L'accès par le processeur à une information située dans la DDR SDRAM de la mémoire centrale est 100 fois plus lente qu'un accès à une information contenue dans un registre.
    
• Les registres sont utilisés pour stocker des opérandes et des résultats intermédiaires lors des opérations effectuées dans l'UAL (Unité Arithmétique et Logique) du processeur.
    
• La plupart des PC actuels ont des registres de tailles 64 bits.

Noms de registres

• Dans le premier cas, chaque registre se voit attribuer une référence, une sorte d'identifiant qui permettra de le sélectionner parmi tous les autres. C'est un peu la même chose que pour la mémoire RAM : chaque byte de la mémoire RAM se voit attribuer une adresse bien précise. Et bien pour les registres, c'est un peu la même chose : ils se voient attribuer quelque chose d'équivalent à une adresse, une sorte d'identifiant qui permettra de sélectionner un registre pour y accéder.
   
•  Cet identifiant est ce qu'on appelle un nom de registre.
     
• Ce nom n'est rien d'autre qu'une suite de bits attribuée à chaque registre, chaque registre se voyant attribuer une suite de bits différente. Celle-ci sera intégrée à toutes les instructions devant manipuler ce registre, afin de sélectionner celui-ci.
  Ce numéro, ou nom de registre, permet d'identifier le registre que l'on veut, mais ne sort jamais du processeur : ce nom de registre, ce numéro, ne se retrouve jamais sur le bus d'adresse. Les registres ne sont donc pas identifiés par une adresse mémoire. 

I.3. Mémoires centrales et mémoire cache

La mémoire centrale : RAM (Random Acces Memory)

• La mémoire centrale est une mémoire vive qui contient les programmes en cours et les données qu'il utilise. Elle est de taille importante (plusieurs Go).
• Elle est organisée en céllules qui contiennent chacune une donnée ou une instruction repérée par un entier : un adresse mémoire.
• Le temps d'accès à chaque cellule est identique, on parle improprement de mémoire à accès aléatoire ou RAM (Random Acces Memory) mais on devrait plutôt parler de mémoire à accès direct.

La mémoire cache

• Pour pouvoir adapter la très grande vitesse du processeur à celle bien plus faible de la RAM, on place entre les deux une mémoire très rapide, la mémoire cache.
   
• Il existe souvent plusieurs niveaux de mémoire cache : L1, L2 ...
• Généralement la mémoire cache de niveau L1 et celle de niveau L2 sont regroupées dans la même puce que le processeur (cache interne).

II. Assembleur et jeu d'instructions

II.1. L'assembleur

• Un programme écrit dans un langage de haut niveau (comme Python) éloigné du langage machine (dit de bas niveau) dépend le moins possible du processeur et du système d'exploitation.
  
  
• Si on ouvre un fichier exécutable avec un éditeur (hexadécimal), on obtient :

01ebe814063727473747566662e6305f5f43544f525f4c
5f05f5f44544f525f4c4953545f5f05f5f4a43525f4c49
53545f5f05f5f646f5f676c6f62616c5f64746f72735f6
75780636f6d706c657465642e36353331064746f725f69

• C’est une suite d’instructions comme 01ebe814, que l’on peut traduire directement de façon plus lisible :

add $t7, $t3 , $sp

• C’est ce qu’on appelle l’assembleur.
  L’assembleur est donc une représentation du langage machine.
  
  
• Il y a autant d’assembleurs que de type de processeurs différents.

II.2. Instructions et assembleur

Il y a trois types d’instructions

1. instructions de transfert entre registres et mémoire
   • chargement
   • sauvegarde
2. instructions de calcul
   • additions, multiplications
   • opérations logiques
   • comparaisons, sauvegarde
3. instructions de saut
   • sauts inconditionnels
   • sauts conditionnels
   • sauvegarde
4. appels système

II.3. Exemples d'assembleurs

 Il existe plusieurs logiciels premattant de programmer en assembleur, citons :

• MARS (téléchargeable ici)
• et un simulateur de registre http://www.peterhigginson.co.uk/AQA/.

De nombreux assembleurs coexistent et les instructions diffèrent donc de l'un à l'autre mais beaucoup de fonctions sont communes.

II.3.1. Sur l'émulateur MARS par exemple

Exemple 1 : avec MARS (téléchargeable ici)

Ecrire ces ligne puis cliquer sur RUN / Assemble

la  $t1,3   
addi $t2,$t1,5

Cela revient à :

• la $t1,3  : charger (la = LOAD) 3 dans le registre $t1
• addi $t2,$t1,5 : Affecter au registre $t2 l'addition de 5 et de la valeur de $t1

Mars nous donne le conversion de ces instructions :

II.3.2. Sur l'émulateur  de CPU :  http://www.peterhigginson.co.uk/AQA/.

Dans ce simulateur :

• à droite, on trouve la mémoire vive ("main memory")
• au centre, on trouve le microprocesseur (CPU)
• à gauche on trouve la zone d'édition ("Assembly Language"), c'est dans cette zone que nous allons saisir nos programmes en assembleur.

 Le CPU

Dans la partie centrale du simulateur, nous allons trouver en allant du haut vers le bas :

• le bloc "registre" ("Registers") : nous avons 13 registres (R0 à R12) + 1 registre (PC) qui contient l'adresse mémoire de l'instruction en court d'exécution
• le bloc "unité de commande" ("Control Unit") qui contient l'instruction machine en cours d'exécution (au format hexadécimal)
• le bloc "unité arithmétique et logique" ("Arithmetic and Logic Unit")

Exemple 2

•  1. Dans la partie "éditeur" ("Assembly Language") saisissez les lignes de codes suivantes

MOV R0,#42
STR R0,150
HALT

Ses instructions signifient :

• MOV R0,#42  : Place le nombre 42 dans le registre R0
• STR R0,150   : Stocke le contenu de R0 dans la mémoire 150
  
• HALT              : on arrête le processus
  

• 2. Une fois la saisie terminée, cliquez sur le bouton "submit". Vous devriez voir apparaitre des nombres "étranges" dans les cellules mémoires 000, 001 et 002 :

L'assembleur a converti les 3 lignes de notre programme en instructions machines,

• MOV R0,#42 : la première instruction machine -476053462 est stockée à l'adresse mémoire 000 (elle correspond à "MOV R0,#42" en assembleur),
• STR R0,150  : la deuxième à l'adresse 001 (elle correspond à "STR R0,150" en assembleur)
• HALT : et la troisième à l'adresse 002 (elle correspond à "HALT" en assembleur)

Pour avoir une idée des véritables instructions machines, vous devez repasser à un affichage en binaire (bouton "OPTION"->"binary"). Vous devriez obtenir ceci :

On remarque que l'octet de droite de l'instruction machine "11100011 10100000 00000000 00101010", soit, (00101010)₂, est bien égale à (42)₁₀

• 3. Simulation
  Pour exécuter notre programme, il suffit maintenant de cliquer sur le bouton "RUN".
  Vous allez voir le CPU "travailler" en direct grâce à de petites animations.
  Si cela va trop vite (ou trop doucement), vous pouvez régler la vitesse de simulation à l'aide des boutons "<<" et ">>".
  Un appui sur le bouton "STOP" met en pause la simulation, si vous rappuyez une deuxième fois sur ce même bouton "STOP", la simulation reprend là où elle s'était arrêtée.

Une fois la simulation terminée, vous pouvez constater que la cellule mémoire d'adresse 150, contient bien le nombre 42 (en base 10). Vous pouvez aussi constater que le registre R0 a bien stocké le nombre 42.

Exemple 3

Effectuer les instructions suivantes et commentez-les :

MOV R0,#10
MOV R1,#20
ADD R2,R1,R0
ADD R2,R2,#5

Remarque : L'instruction pour effectuer une addition est : ADD R2,R0,R1 (place dans R2 le résultat de R0+R1)

II.3. Exercices

Pour faire d'autres exercices 

• TP Assembleur
  Avec le simulateur : http://www.peterhigginson.co.uk/AQA/.

Compléments

• https://www.commentcamarche.net/contents/763-processeur
  L'essentiel sur l'architecture.
• Assembleur MIPS.
  Un document pdf ressource sur l'assembleur.

{module [104]}

Articles Connexes 

Details

Last Updated: 18 January 2021

NSI - Numérique et Sciences Informatiques

Architecture von Neumann

L'architecture de tous les ordinateurs actuels est conforme à un schéma qui a assez peu évolué depuis les premiers ordinateurs électronique à tubes à vide de 1945 (Colossus et ENIAC). Voir la page Histoire de l'informatique.
Ce modèle est dit de von Neumann.

John von Neumann (1903, Budapest - 1957,Washington)

1. L'architecture de von Neumann

1.1 Les principales structures

Dans l'architecture de von Neumann, un ordinateur est constitué de quatre parties distinctes :

1. Le  CPU : Central Processing Unit (unité centrale de traitement) appelé aussi processeur ;
2. La  mémoire  où sont stockés les données et les programmes ;
   • La mémoire se divise entre mémoire volatile (RAM ou mémoire vive) qui gère les programmes et données en cours de fonctionnement
   • et mémoire permanente qui gère les programmes et données de base de la machine.
3. des bus qui sont des fils conduisant des impulsions électriques et qui relient les différents composants ;
4.  des entrées-sorties (E/S ou I/O input/Output) pour échanger avec l'extérieur.

1.2 Les sous-structures

• Les échanges entre la mémoire et les registres du CPU (Central Processing Unit) se font  via des bus  selon une chronologie organisée par l'horloge et suivant la nature des échanges : données ou adresses.
• Un programme est enregistré dans la mémoire.
• L'adresse  (un entier)  de l'instruction  en cours de traitement est stockée dans une mémoire interne au processeur, le cp ou pc :  registre compteur de programme
• La valeur de cette instruction  (un entier) est stockée dans une autre mémoire interne, le ri : registre d'instruction .
   

• L’architecture d’un processeur (CPU) séquentiel,  comporte 2 parties :

  • 1 - une unité de commande qui analyse les instructions à exécuter et qui séquence les actions élémentaires permettant leur réalisation,
  • 2 - une partie opérative qui comprend les outils permettant de réaliser les actions élémentaires (ordonnées par l’unité de commande).
    • Elle comprend une unité arithmétique et logique (UAL ou encore ALU) permettant de réaliser des opérations arithmétiques sur des entiers et des opérations logiques sur des vecteurs de bits en interprétant les impulsions électriques.
    • Elle comprend également des registres internes (bancs de registres) permettant de stocker de façon très temporaire des opérandes ou résultats intermédiaires de calcul.

2. Le rôle de l'horloge

Les traitements réalisés par l’ordinateur sont faits sur des représentations binaires des données et des traitements à réaliser, et ce en calculant des fonctions logiques.

2.1 Cadence d'un processeur

• Le CPU dispose d'une horloge qui cadence l'accomplissement des instructions et dont l'unité est appelée cycle.
• La fréquence s'exprime en GigaHertz (GHz), elle signifie le nombre d'opérations que fait le processeur en une seconde.
• 3GHz : 3 milliards d'opération à la seconde. En clair, elle influe sur la vitesse de fonctionnement du processeur.
   
• En 2020, les processeurs tournent entre 1,5 et 3 GHz. Certains atteignent 3.6 GHz mais la course à la fréquence à pris fin depuis 2005 environ car au-delà d'un certain cap, la chaleur dégagée est trop importante et perturbe la lecture des tensions.

2.2 Cycle d'instructions

Le pipeline d'instruction

• Dans un processeur, 5 étapes sont nécessaires pour traiter une instruction. Chacune de ces 5 instructions est exécuté lors d'un cycle.
  • LI (ou IF -  Instruction Fetch) : charge l'instruction à exécuter dans le pipeline (fetch = aller chercher).
  • ID : décoder l'instruction  ;
  • EX : exécuter l'opération dans l'UAL  ;
  • MEM : accéder à la mémoire en lecture ou en écriture  ;
  • ER (ou WB, Write Back) : écrire le résultat dans un registre.
     
• Pour gagner du temps, le processeur n'exécute pas les instruction de façon séquentielle mais il exécute simultanément plusieurs instructions qui sont à des étapes différentes de leur traitement.
  C'est le pipeline d'instruction.
   
• Grâce au pipeline, le traitement des instructions nécessite au maximum les cinq étapes précédentes. Dans la mesure où l'ordre de ces étapes est invariable (LI, DI, EX, MEM et WB), il est possible de créer dans le processeur un certain nombre de circuits spécialisés pour chacune de ces phases.

Analogie avec une chaine de production

Le pipeline est un concept s'inspirant du fonctionnement d'une ligne de montage. Considérons que l'assemblage d'un véhicule se compose de trois étapes (avec éventuellement des étapes intermédiaires) :

• 1. Installation du moteur. 2. Installation du capot. 3. Pose des pneus.

• Un véhicule dans cette ligne de montage ne peut se trouver que dans une seule position à la fois.

• Une fois le moteur installé, le véhicule V1 continue pour une installation du capot, laissant le poste « installation moteur » disponible pour un prochain véhicule V2.
  Le véhicule V1 se fait installer ses pneumatiques (roues) tandis que le second V2 est à l'étape d'installation du capot. Dans le même temps un véhicule V3 commence l'étape d'installation du moteur.

• Si l'installation du moteur, du capot et des roues prennent respectivement 20, 5 et 10 minutes, la réalisation de trois véhicules prendra, s'ils occupent un à un toute la chaîne de production, 105 minutes = (20 + 5 + 10) × 3. Si on place un véhicule dans la chaîne de production dès que l'étage auquel le véhicule doit accéder est libre (principe du pipelining), le temps total pour réaliser les trois véhicules est de 75 minutes.

Exemple d'un pileline

• En supposant que chaque étape met 1 cycle d'horloge pour s'exécuter, il faut normalement 5 cycles pour exécuter une instruction, 15 pour 3 instructions :

• En utilisant la technique du pipeline, notre processeur peut alors contenir plusieurs instructions, chacune à une étape différente.
  Il faut 9 cycles pour exécuter 5 instructions. À t = 5, tous les étages du pipeline sont sollicités, et les 5 opérations ont lieu en même temps.

Un gain de cycles

• Il faut compter en général 1 à 2 cycles d'horloge (rarement plus) pour chaque phase du pipeline, soit 10 cycles d'horloge maximum par instruction.
• Le premier ordinateur à utiliser cette technique est l'IBM Stretch, conçu en 1961.

Compléments

• https://www.commentcamarche.net/contents/763-processeur

{module [104]}

Articles Connexes 

Details

Last Updated: 26 March 2026

Classes de Terminale
NSI - Numérique et Sciences Informatiques

Le programme de l'enseignement NSI (numérique et sciences informatiques) de terminale s’appuie sur l’universalité de quatre concepts fondamentaux et la variété de leurs interactions : les données, les algorithmes, les langages, les machines, les interfaces.

• Les cours et TD de terminale sont aussi disponibles ici :  NSI Terminale
• Nous travaillerons sur la plateforme de l'éducation nationnale :
  • Capytale pour les utilisateurs sans ENT
• Vous pouvez aussi utiliser Basthon pour gérer les nootebook ou GoogleColab.
• 📜 Tous les programmes officiels de Mathématiques

Cours et TD NSI terminale

Histoire de l'informatique

• Une histoire de l'informatique.
• http://www.frisechronos.fr/DojoMain.htm
  Outil pour réaliser une frise
      

1. Programmation Orientée Objet : POO
   

   • Présentation : Diaporama de M. Courtois
   • Cours et TD 1 NSI sur la POO
     
     • Cours et activités sur la POO via Capytale
       Nécessite une inscription
     • Cours et activités sur la POO en PDF
       Cours, TD  sur la notion de classe et de POO avec corrigés des exercices.
       => Fichier source LaTex.
         
   • TD 2 sur les Classes
     • TD POO - Classes
          TD composé de 3 exercices relativement simples sur la POO après avoir vu le cours
          
   • Projet 1 - NSI POO : les fractions
     
     • les fractions (capytale)les fractions (capytale) ;
   • Projets 2 - NSI POO : le case briques
     
     • le case briques sur Pygame.
       => A faire sur repl.it ou un autre environnement qui supporte pygame
   • Projet 3 - NSI POO : un jeu de carte (optionnel)
     
     • Version pdf : Un jeu de cartes  ;
          
   • La POO au Bac
     
     • TP 3 : des exercices tirés du  Bac à faire sur Capytale
         
     • Epreuves écrites 2023 / 2022
       
       • Par exemple Métropole écrit 2023 : exercice 3 (avec corrigé)
       • Par exemple BAC 2021 (POO et Pile) - Exercice 2 / Le corrigé
          
     • Epreuves pratiques 2023 / 2022
       
       • Par exemple Sujet N°32 de 2023 / Correction
       • ou Sujet n°32 de 2023 (énoncé et rédaction directe sur Basthon)
       • Sujet n°37 de 2023 (énoncé et rédaction directe sur Basthon)
          

2. Révisions dictionnaires et listes

   • Dictionnaires :
     1. TP de révision Dictionnaires et Listes / Correction
        TP avec auto correction
     2. TP de première sur les dictionnaire
           

3. Les Bases de données et SQL
   

   • Cours : la partie théorique
     • Théorie sur les bases de données
        
   • TD sur les BDD
     • Le TP sous Capytale.
     • Le TP en notebook - (enregistrer le fichier et ouvrez-le sous JupyterLab puis faites-le sur SQLite)
       La base de données (format .db )  
     • (Old version pdf )
          
   • Entrainement :
     
     • Le site de la CNAM pour s'entrainer aux requétes :
       • Films et SQL 
       • La base de données (format .db )  / schéma E/A (Entité/Association) / schéma sans les relations
     • QCM d'Entrainement (Genumsi) 
     • Des jeux avec des requetes SQL
       • SQL Murder Mystery 
         • ERC (schéma E/A) du jeu
       • https://sql-island.informatik.uni-kl.de/
            
   • Les Bases de données au Bac
     
     • Epreuves écrites 2023 / 2022
       
       • Par exemple Métropole écrit 2023 : exercice 1(BDD et SQL) (avec corrigé)
       • Un exercice Type BAC (BDD et SQL) / Le corrigé
       • Un autre exercice Type BAC (BDD et SQL) /Le corrigé
     • Epreuves pratiques 2023 / 2022
       
       • Pas de (BDD et SQL) lors de l'épreuve pratique (Epreuves pratiques 2023 / 2022)

4. La récursivité

   • Cours et TD NSI 
     • Cours et activités sur la récursivité 
       • Version PDF (plus complet sur la théorie)
       • Version Capytale
         • Pour visualiser les stackes des appels :
           • https://pythontutor.com/render.html#mode=display
   • Exercices et TP
      
     • Un TP sur le flocon de Von Koch / Sur Capytale
     • Les tours de Hanoi : Sur Capytale / le Notebook
   • Préparation au BAC
     • Un exercice Type BAC, voir Exercice 1 / Le corrigé
     • Un exercice Type BAC un peu plus difficile, voir Exercice 2 / Le corrigé
     • Un QCM d'entrainement (Genumsi)

      

5. Structures de Données
   

   • Piles :
     • le TD en pdf  / Le TD sur capytale 
       (version notebook)
        
   • Files :
     • Cours et activités html /notebook sur capytale 
       (version notebook)
         
   • Listes Chainées 
     • Cours et activité html /notebook sur capytale
       ( version notebook)
     • Ressources :
       • https://info.blaisepascal.fr/nsi-listes-chainees/   
       • Le Quick Sort (exercice sur les listes de la fin du td)
           
   • Dictionnaires :
     • Cours et activité (la gestion du temps d'accès dans un dictionnaire)
       
       • Les dictionnaires,listes et temps d'accès
     • Création d'une rainbow table sur Capytale
       A faire ! 
     • Exercice type BAC :
       • Centres Etrangers (J1) - exercice 2   
            
   • Bilan piles, Files et dictionnaires :
     • QCM d'entrainement: Pile, File, Liste, dictionnaire et activités  
          
       
   • Arbres :
     • Cours et activités sur les arbres (pdf)  / corrigé
        
             
       
   • Arbres Binaires :
     • Cours et TD Arbres Binaires :
       • Cours et activités sur les arbres binaires (pdf) /  version Capytale / version notebook
         => Correction du TD Arbres Binaires
            
     • Parcours des arbres : prefixe, postfixe et infixe 
       • Un cours IREM Lyon   
         • parcours préfixe, on liste le noeud la première fois qu’on le rencontre.
         • parcours infixe, on liste le noeud la seconde fois qu’on le rencontre.
         • parcours suffixe ou postfixe, on note le noeud la dernière fois qu’on le rencontre.
       • Parcours prefixe, postfixe et infixe
         • Vidéo 1
              

   • Compléments (projet) : Codage de Huffmann et Compression
     
     • html / notebook / Notebook Sur Capytal
     • Ressources :
       • Vidéo 1 
         Une explication très claire du processus de construction de l'arbre
       • https://cmps-people.ok.ubc.ca/ylucet/DS/Huffman.html
         Un site proposant la visualisation de divers algorithmes dont Huffmann
   • Point Bac 
     • Epreuve écrite : annales 2025 
       • Piles/Files
         • Centre Etrangers Groupe 1 Sujet 1 - Exercice 2
         • Correction PDF
       • Arbres binaires, récursivité, POO  :
         • Amérique Nord - Sujet 1 - Exercice 1
         • Corrigé de Math93.com
     • Epreuve pratique : annales 2025
       • Piles
         • Sujet N°21 - ex2 / Correction NSI 2025 sujet 21
       • Arbre binaire, Parcours Largeur 
         • Sujet N°11 - ex1 / Correction NSI 2025 sujet 11

6. Protocoles de routage : 

   • Les réseaux : rappels
     
     • Rappel sur le modele TCP/IP  
     • Le cours de première.
     • TP Adresses IP
       Adresses IP, masque de sous réseau, adresse réseau et adresse de brodcast
         
   • Protocoles de routages
     • Cours et activités
       • correction  : Exercice bac.
           
   • Algorithme de Dijkstra :
     • Le noteBook sur Capytale   
     • Une Vidéo
       • Un exemple en vidéo  : Méthode par l'exemple .
       • Le td associé à l'exemple en vidéo : TD et méthode .
     • Compléments :
       • ancien cours de Terminale ES
             
   • Pour le Bac
     • Entrainement Type BAC (2 exercices)
       • correction 22-NSIJ1ME1
       • correction NSI Sujet 0a - 2023 - Ex 2
          
   • TP filius  :
     • Modelisation et Routage
     • Si besoin telecharger le logiciel de simulation reseau : Filius
         

7. Processus : 

   • Cours
     • Le Diaporama du cours 
     • Le cours complet de Pixee
     • Equivalent sous Powershell : https://devops-collective-inc.gitbook.io/a-unix-person-s-guide-to-powershell/commands-detail-p
     • L'ordonnancement des processus
       • Un cours 
       • Pour s’entrainer : un Simulateur sur Android ou sur Simulateur sur PC (FCFS et JSF seulement) 
           
   • Processus au BAC
     • Exercice Sujet Polynésie 2023 Exercice 2 / Correction.
     • Sujet 0 - B 2024  - exercice 2 / Corrigé de math93
            
   • TP Processus sous Linux
     • LINUX qu'est-ce-que c'est ?
       Linux ou GNU/Linux est une famille de systèmes d'exploitation open source de type Unix fondés sur le noyau Linux créé en 1991 par Linus Torvalds.
          
     • TP Processus sur console UNIX
       • si besoin aller réviser les commandes UNIX vues en premiere.
     • Emulateur LINUX : https://bellard.org/jslinux/
             
   • Exercices Bilan
     • Exercices / Correction
     • Bash et Linux
       • Un petit QCM de rappel sur bash et linux  
           
   • Un TP sous Python
     • Simulation d'ordonnancement 

8. Algorithmique et diviser pour régner : 

   • Rappel sur la dichotomie :
     • Le TP sur Capytale / Cours et activités / Correction
   • Rappel sur les tris.
     • Cours et activités
     • La complexité des algorithmes de tri (Wikipedia)
   • Diviser pour régner : Exercices sur les tris et Méthode « diviser pour régner » :
     
     • Une définition :
       Le paradigme de programmation « diviser pour régner » consiste à décomposer un problème général en petits sous-problèmes plus simples à résoudre, permettant par recomposition d'aboutir à la résolution du problème général.
       Cette méthode est appelée ainsi en référence à sa désignation anglaise : divide and conquer.
     • TP1 Diviser pour Régner  : exemples de base (Tri Fusion, par selection et insertion)
       • Notebook sur Capytale / Correction
     • TP2 Diviser pour Régner  : les deux points les plus proches
       
       • Points raprochés (Capytale) / Le Notebook
       • Help Spoiler : Une aide
     • Un autre Projet sur capytale L'algorithme de Karatsuba
     • 2 sujets de Bac :
       • Métropole (J2) 2022 - Exercice 5  / Correction
       • Amérique du Sud (J2) 2022 - exercice 4 / Correction

9. Composants intégrés d’un système sur puce : 

   • Cours :
     • Présentation sur Capytale
     • Cours et activités Format Notebook
   • Exercice type Bac
     • Polynésie 2021 : Au coeur des machines / Corrrection    
         

10. Structures de données (Suites) : Les Graphes

    • Une chaine Youtube qui aborde les graphes de façon trés complète.
    • Le cours.
    • Graphes et dictionnaires
      • Représentation d'un graphe sous forme de dictionnaire sous capytale . / Correction
    • Représentation avec la bibliothéque networkx sous capytale.
    • Recherche en largeur sur un graphe :
      • TD de Recherche en largeur (BFS) / Correction
    • Recherche en profondeur sur un graphe :
      • TP de recherche dans un graphe en profondeur (DFS) / Correction .
    • Un Labyrinthe :
      • TP de Génération de labyrinthe   / Correction .
    • TP Word Ladder Puzzle : 
      • Recherche dans un graphe : Word Ladder Puzzle / Correction .
    • TP Coloration d'un graphe : 
      • Coloration d'un graphe / Correction .

11. Machine de Turing, Calculabilité et Décidabilité

    • Les cours 
      • Le cours en diaporama
      • Une page complete sur : Machine de Turing, Calculabilité et Décidabilité
        Avec toutes les définitions
    • Exemples :
      • Une machine à 2 états.
    • Le TD sur Capytale / Le TD en pdf (moins complet)

12. Programmation dynamique.

    • Le cours avec l'exemple de la suite de Fibonnacci :
      • Notebook Cours et activités sur capytale
      • Complément sur la compléxité des algorithmes :
        • Complexité et Fibonacci (Niveau Universitaire)
    • Un TP autour du rendu de monnaie :
      • TP Notebook sur capytale
    • Une analyse complete, le decoupage d'une barre :
      • TP Notebook sur capytale

13. Sécurisation des communications.

    • Le cours : Diaporama
    • Consultez la page dédiée de Math93.com
      • NSI – Sécurisation des communications : cryptographie, chiffre de César, RSA, AES, HTTPS 
           
    • Bilan du cours
    • • Chiffrement Symétrique : clé unique pour chiffrer et déchiffrer 
        • La cryptographie symétrique, également dite à clé secrète (par opposition à la cryptographie asymétrique), est la plus ancienne forme de chiffrement. Elle permet à la fois de chiffrer et de déchiffrer des messages à l'aide d'un même mot clé.
        • Exemple : le code de César par décalage des lettres
      • Chiffement Asymétrique : couple (clé privée , clé publique)
        • Le chiffrement asymétrique est une méthode de cryptographie qui utilise deux clés différentes :
          • une clé publique, utilisée pour chiffrer les messages,
          • une clé privée, gardée secrète et utilisée pour déchiffrer.
            Cela permet d'échanger des informations de manière sécurisée sans avoir à partager une clé secrète au préalable.
        • Exemple : le systéme RSA, acronyme du noms de ses inventeurs : Rivest, Shamir et Adleman, trois chercheurs du MIT en 1977.
      • Chiffrement Hybride (comme HTTPS)
        • Bien que le système RSA à clé publique soit a priori sûr et pratique puisqu’il n’est pas nécessaire d’échanger la clé de chiffrement comme dans le cas du chiffrement symétrique.
          On utilise en pratique plutôt un système hybride, car le système à clé asymétrique est assez lourd à exécuter et prend du temps.
        • Regardons par exemple le cas d’échange d’informations sécurisées grâce au protocole HTTPS.
          
          • Voici comment fonctionne un échange sécurisé via le protocole HTTPS, qui utilise à la fois :
            
            • Le chiffrement asymétrique (comme RSA) pour établir la connexion de manière sécurisée,
            • Puis le chiffrement symétrique (comme AES) pour échanger rapidement les données une fois la connexion établie.

            🔐 Détail du processus :

            1. Le navigateur (client) demande une connexion sécurisée.
            2. Le serveur (ex : Wikipédia) envoie un certificat contenant :
               • Son identité (vérifiée par une autorité de certification),
               • Sa clé publique.
            3. Le navigateur :
               • Vérifie le certificat,
               • Génère une clé symétrique aléatoire,
               • La chiffre avec la clé publique du serveur (grâce à RSA, par exemple),
               • Et l’envoie au serveur.
            4. Le serveur déchiffre la clé symétrique avec sa clé privée.
            5. Ensuite, tous les échanges sont chiffrés symétriquement (plus rapide et plus efficace pour des gros volumes de données).

            🔁 C’est donc une combinaison intelligente :

            • Asymétrique pour l’échange initial de la clé,
            • Symétrique pour la suite des communications.

             

    • Vidéo de Sciences étonnantes :
      • Le chiffrement RSA et les modulos
      • Les codes secrets (8mn10)
      • Comment déchiffrer (presque) n'importe quel message codé ? (13mn24)
    • Cours complet :
      • Sécurisation des communications
          
    • Les TD :
      • TP Chiffrement Symétrique : TP Notebook
      • TP Chiffrement Asymétrique, RSA : TP Notebook
      • Quelques énigmes à décrypter. C'est un peu un DS type.
      • TP sur le masque jetable avec un codage sur 2 chiffres : XOR et masque jetable
    • Pour aller plus loin : 
      •  Le puzzle de Merkle
      • Pour les plus curieux : Entrainez vous au Hacking éthique sur https://www.root-me.org/

14. Préparation au bac :
    • Devoir type Bac / Correction .
        
15. Paradigmes de programmation.

    • Cours sur les paradigmes de programation. 
        

16. Recherche d'un motif dans un texte : Algorithme de Boyer-Moor-Horspool

    • Cours et TD NSI : Cours et activités.
      Cours, TD sur la recherche d'un motif dans un texte de différentes façons. On insistera sur le traitement du motif.
       Extrait de roman à tester : "La Disparition" de G. Perec.
    • Des animations avec présentation de la méthode et du traitement du motif :
      • La recherche naîve : pdf / opd.
      • Boyer-Moore-Horspool : pdf / opd.
      • Boyer-Moore : vidéo.

    • Proposition de projet
      Concevoir un code permettant de visualiser les différentes étapes de l'algorithme.
      Animation sous Python avec Tkinter : https://repl.it/@fduffaud/Boyer-Moore-animation1.
      Animation sous de la recherche naive, Boyer-Moore une table et mulkti tables : https://repl.it/@fduffaud/Boyer-Moore-animation2 .

Activités complémentaires et projets

Vous devez choisir en binôme un projet sur lequel vous travaillerez 2 h par semaine au lycée. Evidemment ce projet doit évoluer aussi chez vous.
La liste de projets est une indication, vous pouvez proposer d'autres choix si vous ne trouvez pas ce qui vous correspond.

• 1ère étape : travail préparatoire avec un journal de bord :
  • idées, problèmes, solutions ou échec ...
• 2ème étape : Faire une partie du projet pour en faire une présentation avec un diaporama pour la fin du mois de mars.
• 3ème étape : Finalisez du projet pour en faire une présentation technique vers le moi de mai.
• Projet le lien sur Capytale

• Gestion d'images
  • TP 1 : modifications d'une image
• Projet Boyer-Moore
  
  • Projet proposition
• Sites proposant des projets
  • • Projet du lycée de Balagne
    • Des jeux simples à realiser
    • Des idees tirées du lycée Blaise Pascal
    • maths-code.fr.
• Concours Prologin
  • Prologin 2025 - level 1 et 2
  • Prologin 2025 - level 3

Documents ressources

• La recherche dichotomique : Document des IREM
  La recherche dichotomique, complexité et terminaison
  
  

Evaluations NSI

• Evaluations NSI terminale : toutes les évaluations de NSI terminale avec les corrigés

Compléments NSI

LaTeX : produire des documents scientifiques

1. NSI : LaTex
   Un outil permettant de produire des documents de qualité.
2. NSI : Documents Python
   Pour produire des documents intégrants du code Python

{module [104]}

Articles Connexes 

Details

Last Updated: 27 December 2019

Classes de Première et terminale
NSI - Numérique et Sciences Informatiques

Une brève histoire de l'informatique

Cette rubrique transversale se décline dans chacune des parties du programme de NSI.

I. Introduction

Comme toute connaissance scientifique et technique, les concepts de l’informatique ont une histoire et ont été forgés par des personnes.

Les algorithmes sont présents dès l’Antiquité, les machines à calculer apparaissent progressivement au XVIIe siècle, les sciences de l’information sont fondées au XIXe siècle, mais c’est en 1936 qu’apparaît le concept de machine universelle, capable d’exécuter tous les algorithmes, et que les notions de machine, algorithme, langage et information sont pensées comme un tout cohérent.

Les premiers ordinateurs ont été construits en 1938 et leur puissance a ensuite évolué exponentiellement. Parallèlement, les ordinateurs se sont diversifiés dans leur taille, leur forme et leur emploi : téléphones, tablettes, montres connectées, ordinateurs personnels, serveurs, fermes de calcul, méga-ordinateurs.

Le réseau internet, développé depuis 1969, relie aujourd’hui ordinateurs et objets connectés.

II - Histoire des ordinateurs

1. Machines à programmes externes

1.1 Machines électromécaniques

• L'allemand Konrad Zuse achève le Z1 en 1938, un ordinateur mécanique en binaire, puis le Z3 en 1941 qui lisait son programme sur une bande perforée.
• Le Z3 utilisait le calcul en virgule flottante et réalisait 3 ou 4 additions à la seconde.
• En 1944, L'américain Howard H . Aiken construit l'ordinateur électromécanique Mark I qui pesait 5 tonnes.

1.2  Machines électroniques

• L'apparition des tubes à vides marque le début de l'électronique.
• John Vincent Atanasoff en 1942 construit la première machine électronique sans l'achever complètement.
• Entre 1943 et 1945 les Britaniques Max Newmann et Tomy Flowers utilisent les premiers ordinateurs à tubes à vides nommés Colossus pour déchiffrer le code de Lorenz employé par les Allemands.
• Le premier, Colossus Mark 1, est construit en l’espace de onze mois et opérationnel en décembre 1943, par une équipe dirigée par Thomas “Tommy” Flowers et installé près de Londres, à Bletchley Park : constitué de 1 500, puis 2 400 tubes à vide, il accomplissait 5 000 opérations par seconde. 
• Plus rapide, le Colossus Mark II servit notamment pour le lancement surprise du Débarquement.
• Le célèbre ENIAC de John W. Mauchly et J. presper Eckert est achevé en 1945 et permet avec ses 18 000 tubes à vide d'effectuer des calculs balistiques.
• L'ENIAC (acronyme de l'expression anglaise Electronic Numerical Integrator And Computer) est  construit pour être Turing-complet. Il peut être reprogrammé pour résoudre, en principe, tous les problèmes calculatoires.

ENIAC (Electronic Numerical Integrator And Computer) à Philadelphia, Pennsylvania.
Glen Beck (au fond) et Betty Snyder (premier plan) programment l'ENIAC au building 328 dans le "Ballistic Research Laboratory (BRL).

2. Machines à programmes enregistrés

• En 1948 apparaissent les premières machines à programmes enregistrés, ancêtres directs des ordinateurs actuels. Les données et programmes résident en mémoire.
• Ces machines sont basés sur les travaux de Mauchly, Eckert et von Neumann.
• Au début des années 1950 apparaisent les premiers ordinateurs commerciaux avec IBM, DEC et Bull (en France depuis 1931).

3. Du mini-ordibateur à la micro-informatique

3.1. Miniaturisation

• Le transistor apparaît en 1947 à la place des tubes à vide et on commence à le fabriquer à faible coût au milieu des années 1950.
   
• Le circuit intégré apparaît en 1958.
   
• En 1971 le premier microprocesseur voit le jour, c'est l'Intel 4001. L'informatique s'ouvre alors aux particuliers.
   
• De multiples machines sont commercialisées : l'Altair 8008, l'Apple II (1977), l'IBM PC (1981), le ZX 81 (1981), le commodore 64 (1982), le Macintosh (1984) ...
   
• Le ZX 81 est considéré à son époque comme le premier ordinateur familial en kit en France, sa résolution et sa capacité mémoire (1 ko) ne permettait pas énormément de prouesses au niveau des jeux.

II.  Histoire du langage informatique et des systèmes d'exploitation

II.1. Langages

• Après le premier compilateur conçu en 1951 par Grace Hopper, le langage Fortran (FORmula TRANslator) est spécifié en 1954 et achevé en 1956 par John Backus. C'est le premier langage dit de haut niveau. Il est utilisé pour le calcul scientifique, encore de nos fours.
   
• Suivent ensuite : le Lisp, le Cobol et le Basic en 1964.
   
• Puis de 1970 à 1980 : le C (1972), le ML (1973) dont est issu Caml, Ada (1983) et C++ (1986).
   
• La première version de Python date de 1991 (Guido van Rossum) et JavaScript a été publié en 1995.
    
• On peut observer sur ces sites les différents langages utilisés par les programmeurs. Les trois premiers sont en 2019 : JavaScript, Python et Java.
  
  • Developpez.com
  • Spectrum
     

II.2. Et les systèmes d'exploitation

• Au milieu des années 1960, chaque constructeur développe son propre système d'exploitation : OS/360, puis MSV chez IBM, système Unix (1970) chez AT&T (Bell ...)
   
• MS-DOS écrit par Microsoft pour IBM s'impose. Il est suivi par Windows en 1985.
   
• En 1984 Richard Stallman (ancien au MIT) débute la création du système GNU et promeut le mouvement du logiciel libre.
   
• Le 27 septembre 1983, Richard Stallman dévoile son projet de développer un système d’exploitation compatible UNIX appelé GNU — acronyme récursif (la forme développée du sigle contient sa forme réduite) qui signifie en anglais « GNU’s Not UNIX » (littéralement, « GNU n’est pas UNIX ») , en invitant la communauté hacker à le rejoindre et participer à son développement.

II.3. Compléments

Voici quelques dates importantes dont vous trouverez des développement sur la page : http://www.histoire-cigref.org/blog/langage-informatique-savoir-coder-une-longue-histoire/

3. Une frise

Je vous propose de compléter une frise chronologique, tout au long de l'année en utilisant par exemple l'outil suivant :

• http://www.frisechronos.fr/DojoMain.htm

{module [104]}

Articles Connexes 

Details

Last Updated: 02 February 2026

Classes de Première — NSI

Classes de Première
NSI - Numérique et Sciences Informatiques

• Le programme de l'enseignement NSI (numérique et sciences informatiques) de première générale s’appuie sur l’universalité de quatre concepts fondamentaux et la variété de leurs interactions : les données, les algorithmes, les langages, les machines, les interfaces.
• Evaluations NSI première : toutes les évaluations de NSI première avec les corrigés.
• Tous les sujets de la BDD : Sujets des ECC de NSI.
• Tous les TD sont aussi disponibles ici : https://prolifaxe.github.io/coursdecourtois/NSI_1ere.html

Cours et TD NSI première

1. Histoire de l'informatique

   • Une histoire de l'informatique.
   • http://www.frisechronos.fr/DojoMain.htm
     Outil pour réaliser une frise

2. Python ... les premiers pas

   • Le TD de découverte :
     • Débuter Python (TD 1 à 4)
       Des exercices avec quelques rappels de cours afin de maitriser l'essentiel de Python.
         
     • Pour s'entrainer sur les fonctions vues en cours.
       Seriez vous capable de les refaire sans la correction ? :
       Revision des basiques sur Capytale , avec correction automatique.

3. Python : Les Listes

   • TD 5 — Découverte de Python - partie 2
     Découverte des Listes (1^re maths et NSI)
     • Version Capytale / Version PDF
            
   • TD 6 — Recherche des occurrences sur des valeurs de type quelconque / Correction.
     Introduction des listes, parcours séquentiel sur une liste, fonction .append
      
   • Compléments sur les listes
     • TD 7A : Les listes, version Capytale (version PDF) / Correction partie 1
     • TD 7B : TD Listes : Exercices d'entrainement sur les listes (avec correction automatique) 
   • Premier Bilan
     • Pour vous auto-évaluer sur Genumsi, votre identifiant n'est pas important ici.
       Les listes, tuples et fonctions de base (avec corrigé).
       • QCM 1A : 41 questions
       • QCM 1B : 36 questions
       • QCM 1 : regroupe les 77 questions
         
   • ⊕ Avant de passer à la suite il faut bien maitriser les bases, si ce n'est pas le cas il faut S'entrainer sur les bases de hackingScience.

4. Les dictionnaires

   • Cours et TD sur les dictionnaires
     • Les dictionnaires, version Notebook
          
   • TP Dictionnaires et listes
     • TP de révision Dictionnaires et Listes
          
   • QCM : Dictionnaires et listes de niveau 2.
     49 questions
        

5. Liste de projets 1 : PROJETS

    
   

   • Liste de projets 2023 Niveau 1
     D'après le concours prologin, une liste de nombreux projets.
     • Réaliser les 8 projets du TD :
       • Version notebook sur Capytale.
       • Version pdf
             
   • Liste de projets Niveau 2
     D'après le concours prologin, une liste de nombreux projets.
     • Réaliser les 8 projets du TD :
       • Version notebook sur Capytale.
       • Version pdf (A faire) 
             
   • Liste de projets quelconques :
     • Vérification du numero de carte bleue d'aprés l'algorithme de Lhun.
     • ASCII Art Challenge
       Consigne : pour chaque défi, écrire une fonction qui permet d'afficher la forme demandée sous forme de caractères ASCII, puis un exemple d'appel de cette fonction.
          

   
       
6. Représentation des données : types et valeurs de base

   • • Introduction : Comment comptent les Shadoks ?
     • Cours NSI : Cours NSI types et valeurs de base / Cours avec corrigé des exercices.
       Représentation des entiers, décimaux, approximation des réels et représentation du texte.
       
         
     • TD 1 NSI : représentation binaire d'un entier relatif / Correction du td.
       => Une astuce en vidéo (une petite confusion droite <-> gauche mais c'est assez clair)
          
     • TD 2 NSI : représentation des nombres
       Exercices divers dont certains tirés du sujet 0
       => TD 2 sur Capytale : Exercices 1 et 2 sur Capytale
          
     • TD 3 NSI : TD python sur le changement de base quelconque sur Capytale (Trés guidé)
     • TD 3 bis NSI : TD python changement de base 2, 10 ou 16 (Peu guidé)
       • Correction : https://capytale2.ac-paris.fr/web/c/fa30-8071435
             
     • Entrainement : 
       •   QCM pour vous tester (71 questions) / Correction
     • Entrainement Sur les flottants
       • QCM pour vous tester / Correction (14 questions)

7. Circuits et logique booléeenne

   •  
   • Cours : Cours circuits et logique booléenne
     Logique booléenne, propriétés, Transistors, portes logiques et fonctions booléennes
       
   • TD NSI 1 : Variables booléennes.
     Variables booléennes et fonctions booléennes
         
   • TD 2 NSI  : Circuits logiques et logisim / Correction.
     => A faire sur Capytale
     • Exercice 3.1 et 3.2
     • Exercice 3.3
     • Exercice 3.4 et 3.5 :multiplexeur
     • Exercice 3.6 et 3.7
     • Exercice 3.8
     • Exercice 3.9
     • Exercice 3.10
   • Le meilleur logiciel pour faire les exercices c'est Logisim
     Il ne s'utilise qu'en local. Vous devez utiliser Logisim si vous voulez faire l'exercice 3.5 rapidement.
     • Télécharger Logisim.
     • Cependant Logisim nécessite l'installation de Java
            
   • Projets sur circuits logiques : Enoncés des projets
       
     Liens Vers Capytale
     • Décoration de Noël
     • Affichage Digitale de 0 à 3
     • Comparateur
     • Fonction majorité et fonction carré
     • Un dé
     • Additionneur

   
   

   •  => QCM pour vous tester. (32 questions)
       
   • => Exercices sur l'algèbre de Boole avec des propriétés supplémentaires ou avec correction
       
   • Pour vous entrainer sur un devoir type. :
     • Sujet A: un devoir type sur Capytale / l'énoncé à compléter. / le même en .circ pour Logisim
     • Sujet B: un devoir type sur Capytale

   
            
8. Traitement de données en tables

   • TD 1 NSI : Gestion de Fichiers / Correction : https://repl.it/.
     Gestion de fichiers, repertoires sous Python
   • Suite du TD1 sur Capytale : Chapitre IV et V.
     • Extrait de roman à tester : "La Disparition" de G. Perec.
     • Fichier à importer : Demi.txt.
          
   • Entrainement NSI : Un devoir type sur la gestion de fichier / Correction

   • • TD 2 Compléments :
       • Manipulation des fichiers csv (PDF) / correction : Sur Capytale
       • Version Capytale (Partie II et III)
         Gestion des fichiers csv via un tableur ou via Python. Création de tables.
            

   
   

   • TD 3 NSI :
     • Opérations sur les Tables / Sur Capytale:
     • Exercices 1, 2, 3, 4 et 5 / correction dans Capytale (sans le projet)
       Recherche dans une table. Rechercher les lignes d’une table vérifiant des critères exprimés en logique propositionnelle. Tri d'une table. Trier une table suivant une colonne.
       Jointures ou fusions de tables. Construire une nouvelle table en combinant les données de deux tables.
          
   • DS type opération sur les tables et fichiers CSV
   • OU
     Projet sur les prénoms
     • Dépot du projet sur Capytale
     • Table des prénoms 2003 : Prenoms2003.csv.
     • Table des prénoms 2004 : Prenoms2004.csv.
     • Compléments - tous les prénoms 1900-2018 : nom_naissance2018.csv.
     • Source : https://www.data.gouv.fr/fr/datasets/ficher-des-prenoms-de-1900-a-2019/
     • Site US avec les prénoms par état : https://www.ssa.gov/cgi-bin/namesbystate.cgi

9. Architecture Matérielles et systèmes d'exploitation

   • Histoire des ordinateurs
     • Cours en ligne / Cours version pdf.
   • Architecture von neumann
     • Cours en ligne / Cours version pdf.
   • Mémoire et langage machine
     • Cours en ligne / Cours version pdf.
     • Assembleur : émulateur MARS.
     • Assembleur : émulateur et visualiseur CPU.
     • TP Assembleur : TP et émulateur CPU.
   • Linux et Bash
     • Cours version pdf.
   • Un QCM pour vous tester.

10. Algorithmes de tri

    • • TD NSI : Algorithmes de tri
        Notion de tri, tri par insertion, tri par sélection.
        • Correction du TD sur les TRIS

    • TP NSI : Programmation sur Capytale / Correction.
    • Entrainement Devoir Type sur les Tris : Programmation sur Capytale / Correction.

11. Algorithmique - Projet 2 : PROJET 2 / Version Capytale du projet

    • C'est une adaptation et un prolongement du projet GPS de niveau 2.
    • On va manipuler des listes, générer des listes de tuples d'entiers aléatoires, calculer des distances dans un repère orthonomé et utiliser matplotlib pour les graphiques. On va aussi utiliser les algorithmes de tri en les adaptant.
    • Consultez la page matplotlib pour obtenir de l'aide.

12. HTML (HyperText Markup Language) et CSS (Cascading Style Sheets )

    • Le HyperText Markup ou HTML est le langage de balisage conçu pour représenter les pages web.
      Il est souvent utilisé conjointement avec le langage de programmation JavaScript et des feuilles de style en cascade (CSS).
    • Cours et exercices sur la page dédiée : HTML et CSS.

13. HTML (HyperText Markup Language) et Javascript

    • Le JavaScript est un langage de programmation de scripts principalement employé dans les pages web interactives.
    • Cours et exercices sur la page dédiée : Javascript et HTML.

14. PHP et Interaction Client-serveur

    • Le PHP — PHP: Hypertext Preprocessor — est un langage de programmation libre, principalement utilisé pour produire des pages Web dynamiques via un serveur HTTP.
    • Cours et exercices sur les pages dédiées :
      • PHP et interaction client-serveur : présentation et installation du serveur.
        A consulter impérativement avant de vous lancer dans le TD.
      • PHP et interaction client-serveur : exercices et apllications.

15. La recherche dichotomique

    • Vidéo : La recherche dichotomique
    • Le TP sur Capytale : Recherche Dichotomique
    • Cours et TD NSI : La recherche dichotomique.

16. Une premiére approche de l'Intelligence Artificielle (AI) : Les k plus proches voisins

    • Cours et TD NSI : les k plus proches voisins.
    • Le TP sur Capytale : les k plus proches voisins

    • Un TP sur la reconnaisssance de caractères : classification de chiffres 2 et 7
    • ressources sur la reconnaisssance de caractère classification de chiffres 2 et 7

17. Les algorithmes gloutons

    • Cours et TD NSI : les algorithmes gloutons.
    • Le TD CAPYTALE sur : Le rendu de monnaie.
    • Le probleme du sac à dos : TP en pdf à faire sur Capytale

18. Reseaux

    • Cours et TD NSI : les réseaux.

19. PROJETS

    • Projets Logissim
      De nombreux petits projets de niveau identifié
    • Projet France/USA
      • Le jeu de la taupe sur processing.
        Format notebook .ipynb
      • Quelques tutos processing :
        • https://www.redohm.fr/2017/06/le-langage-pour-processing/

Evaluations NSI

• Evaluations NSI première : toutes les évaluations de NSI première avec les corrigés.
• Les sujets d'épreuves du BAC de NSI (première)
  • Tous les sujets de la BDD : Sujets des ECC de NSI.
  • générateur de QCM : https://genumsi.inria.fr/

Compléments NSI

LaTeX : produire des documents scientifiques

• NSI : LaTex
  Un outil permettant de produire des documents de qualité.
• NSI : Documents Python
  Pour produire des documents intégrants du code Python
• Programmer en jouant
  • Révisons avec un pirate : PYRATES
  • CheckIO propose de petits challenges à programmer. On peut demander la traduction en Français des problèmes.
    https://py.checkio.org/

{module [104]}

Articles Connexes