Classes de Première
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!"

Sur votre ordinateur , le dossier Document créer un dossier NSI-VotreNom comme NSI-Courtois
Recopiez le code suivant dans NotePad++ dans un fichier html nommé 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');
        document.write('<h1>On peut écrire du HTML</h1>');
        var nom,prenom;
        prenom = prompt('Donnez votre prénom');
        nom= prompt('Donnez votre nom :');
        document.write('<p>Bonjour '+prenom+' '+nom+'</p>');
        console.log('On peut aussi écrire dans la console : Bonjour '+prenom+' '+nom);
    </script>

</body>
</html>

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

Remarquez que vous pouvez retrouver le code en faisant un clic droit puis Code source de la page.

Instructions et point virgule

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

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()

Exercice 0 : Le débuggage

Le JavaScript n'est pas aussi souple que le python pour le débugage. Nous allons apprendre une méthode de base pour débugguer.

Recopiez le code suivant, truffé d'erreurs, sur une page html nommée Debug.html sur NotePad++ et ouvrez-le avec votre navigateur. Corrigez les erreurs en utilisant la console Ctrl+shift+I.

En donnant les mots "Charles" puis "Baudelaire", le résultat doit donner

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

<body>
<h1>Débuggage</h1>
<p></p>
    <script>
        alerte("J'ai fait une erreur");
        document.write("Guillemets mal choisis');
        document.write('<h1>On peut écrire du HTML</h1>';
        var a,b,c,;
        a = promt('Donnez un mot');
        b= prompt{'Donnez un autre mot :');
        c=a++b;
        document.write('<p> La concatenation donne '+c+'</p>'+);
    </script>

<script>

        document.write('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,<br>\
sed do eiusmod tempor incididunt ut labore et dolore magna<br>\
aliqua. Ut enim ad minim veniam, quis nostrud exercitation<br>\
ullamco laboris nisi ut aliquip ex ea commodo consequat.<br>\
Duis aute irure dolor in reprehenderit in voluptate velit<br>\
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint<br>\
occaecat cupidatatnon proident, sunt in culpa qui officia<br>\
deserunt mollit anim id est laborum.</p>');

<script>

</body>
</html>

2b. Le JavaScript externe

Pour l'entrainement et les exercices suivants,

Pour pouvoir debbuguer facilement Ecrire le code JavaScipt sur basthon pour javaScript

Puis recopier le code sur CAPYTALE pour conserver votre travail.

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 sur CAPYTALE

- 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 sur CAPYTALE

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 : "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="Exercice2.html"> lien sur l'exercice 2</a> </li>
	<li>Exercice 3 : <a href="Exercice3.html"> lien sur l'exercice 3</a> </li>
	<li>Exercice 4 : <a href="Exercice4.html"> lien sur l'exercice 4</a> </li>
   </ol>

</body>
</html>

3. Programmer en Javascript

3a. Les variables

Résumé du cours

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;
document.write('Le produit est '+ produit+', et la somme est '+ somme);
</script>

On obtient le résultat suivant : Exemple 3 .

Exercice 2 sur basthon pour javaScript

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 : "Exercice2.html" et devez faire figurer le lien vers ce fichier sur votre page web .

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 : &&
- le OU logique par : ||
- la négation par le point d'exclamation : ! .
La condition else if 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 sur basthon pour javaScript

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 : "Exercice3.html" et devez faire figure le lien vers ce fichier sur votre page web.
Vous devrez tester votre script avec :

ABC tel que AB = 3, AC = 4 et BC = 5 qui drevrait afficher : "ABC est rectangle en A" ;

ABC tel que AB = 50, AC = 30 et BC = 40 qui drevrait afficher : "ABC est rectangle en C" ;

ABC tel que AB = 6, AC = 10 et BC = 8 qui drevrait afficher : "ABC est rectangle en B" ;

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 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 sur basthon pour javaScript

Ecrire un script Javascript qui fait la somme des nombres inférieurs à 100 qui sont des multiples de 7.
Commencer par fixer votre nombre à deviner puis essayer de le générer aléatoirement dans un deuxième temps.
votre fichier : "Exercice4.html" et devez faire figure le lien vers ce fichier sur votre page web : exercices JavaScript.

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

Exercice 5 sur basthon pour javaScript

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.
votre fichier : "Exercice5.html" et devez faire figure le lien vers ce fichier sur votre page web : exercices JavaScript.

Exemple attendu en vidéo :

Vous serez ammené à utiliser une boucle while . Je vous invite fortement à rajouter un compteur dans votre boucle pour éviter les boucles infinies. De la maniére suivante:

<script>
var i = 0;
// Du code…
while (... && i < 20) 
{
  // Du code…
  ...

 i=i+1;

}

</script>

Vous pouvez enlever les lignes de code inutiles quand vous avez réussi votre programmme.

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 6 sur basthon pour javaScript

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 : "Exercice6.html" et devez faire figure le lien vers ce fichier sur votre page web :

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>

Voici la correction des exercices 2, 3, 4 et 5

CORRECTIONS DES EXERCICES

4. Les évènements en HTML et JavaScipt

le cours commence sur Capytale JavaScript et Evénement mais n'hésitez pas à revenir ici pour plus d'information.

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 :

EventHandler : Gestionnaire d'évènement (avec exemple)	Evènement
onclick	Clic de la souris sur l'élément sur l'élément
ondblclick	Double-clic de la souris sur l'élément sur l'élément
onkeypress	Frapper (appuyer puis relâcher) une touche de clavier sur l'élément
onkeydown	Appuyer (sans relâcher) sur une touche de clavier sur l'élément
onmouseover	Faire entrer le curseur sur l'élément
onsubmit	Envoi d'un formulaire
input	Taper un caractère dans un champ de texte
`select`	Sélectionner le contenu d'un champ de texte (input,textarea, etc.)

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

Copier les codes des exemples suivants sur Notepad++ pour voir le résultat

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>


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

<!--un premier bouton-->
<button  type="button"   onclick="madate()" >
Cliquez sur le bouton 1 </button>
<!--  -->

<script>
function madate()
{
document.getElementById('demo').innerHTML=Date();
}
</script>

<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="change()" >
Cliquez sur le bouton 2</button>
<script>
function change()
{
document.getElementById('ICI').innerHTML= 'On change' ;
}
</script>
<!--  -->
</body>

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

<body>
	<p id="montexte">Dans cet autre exemple, la couleur du fond d'écran change quand on clique sur un bouton et la couleur du texte sur un autre bouton<p>
	<input type ="button" value="Changer de couleur Fond" onclick="ChangementCouleurFond()"/>
	<input type ="button" value="Changer de couleur Texte" onclick="ChangementCouleurTexte()"/>

	<script>
	function ChangementCouleurFond()
	{
	   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';}

	}
	function ChangementCouleurTexte()
	{
	   const couleur=document.getElementById('montexte').style.color; // on charge la couleur du exte, const pour déclarer variables (avec let) remplace var
	   alert("Vous m'avez cliqué ! On change de couleur = " + couleur);
	   if (couleur=='red')
	      {document.getElementById('montexte').style.color= 'green';}
	   else
	      {document.getElementById('montexte').style.color = 'red';}

	}
	</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").
selecteur=document.getElementById("choix") est une liste contenant les éléments de la liste déroulante
Puis on accède au choix effectué à l'aide de selecteur.selectedIndex qui est l'indice de l'élément sélectionné dans la liste.
Enfin on affiche ici la valeur et le texte de l'option choisie.

<body>
<select id="choix" name="lang" onchange="selection()">
<option value=""> Choisir une langue </option>

<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];
if  (monChoix.value!=""){
    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.3.

4.4 Boutons Radios

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 : Boutons Radios</h2>
<!------------------------------------------------->

<!------------------------------------------------->
<center>
Choisir un mot:


<FORM>
 <input type="radio" name="drone" id="choix1" value="toto"   checked />
 <label for="choix1" >toto  </label>

 <input type="radio" name="drone" id="choix2" value="tata" />
 <label for="choix2" >tata  </label>

 <input type="radio" name="drone" id="choix3" value="titi" />
 <label for="choix3" >titi  </label>

</FORM>
<input type="button" value="Valider" onclick="MaFonction()" />


<!--------On affichera le réslutat ici------------->
<p id='resultat'>Vous avez choisi</p>
<!------------------------------------------------->
</center>
<script>
function MaFonction()
{
	  var radios =  document.getElementsByName('drone');
   var valeur;
  for(var i = 0; i < radios.length; i++){
     if(radios[i].checked){
        valeur = radios[i].value;

         document.getElementById('resultat').innerHTML="Vous avez choisi "+valeur;
     }
   }

}
</script>
<!------------------------------------------------->
</body>

Lien vers l'exemple 4.4.

Correction sur capytale du cours sur le JavaScipt et évènements

5. Exercices supplémentaires

Exercice 7 :Exercices Supplémentaires

Exercice 1 : JavaScript pur :
Entrainement JavaScript pur / correction

Exercice 2 : JavaScript et évènements sur
JavaScipt et evenements / Correction .

Exercice 8 : Un devoir type

Exercice 1 : JavaScript pur :
Entrainement JavaScript pur / correction

Exercice 2 : JavaScript et évènements
Entrainement Javascript et évènements / correction

Révision avec QCM et questions didactiques

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 .

Exercice 9.1 : Un exemple d'évènement chez un collégue.

Événements en JavaScript: Exercice 9.1 / Correction JavaScript

Exercice 9.2 : Un exemple d'évènement chez un collégue. Cela fait tout réviser : Html, CSS et JavaScript .

Événements en JavaScript: Exercice 9.2

Exercice 10 à rajouter au projet HTML

Concevoir une page avec un Quiz avec au moins 3 questions qui portent sur votre Site Web :

1 questions Vrai/Faux ou QCm avec boutons radios ;

1 question avec une liste déroulante (QCM) ;

1 question ouverte avec un texte ou une valeur à donner. Attention il faut indiquer dans la question le format d'écriture de la donnée.

Contraintes :

Vous devez aussi afficher le score final.

Vous devez personnaliser votre page (nom, thème, couleur, page CSS ...)

Vous nommerez votre fichier : "QCM_JavaScript.html".

Vous nous donnerez le lien vers le QCM sur la micropage Web sur Capytale.

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 :

Javascript sur Pixees : https://pixees.fr
HTML, CSS et javascript. Pour se familiariser avec ces notions.
Openclassroom : https://openclassrooms.com
Les premiers pas en javascipt.
Lyceum : https://lyceum.fr
Gestion des évènements en Javascript.
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.