Détails

Mis à jour : 5 Juin 2023

Clics : 111658

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 

Détails

Mis à jour : 27 Mars 2020

Clics : 40160

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 

Détails

Mis à jour : 27 Février 2023

Clics : 111812

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 

Détails

Mis à jour : 18 Février 2023

Clics : 96154

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