Cours/TD Les bases de JavaScript NSI

Objectif :
Initiation au langage JavaScript.

Présentation :
Apparu en 1995, JavaScript, à ne pas confondre avec java, est un langage de programmation de scripts employé dans les
pages web afin de les rendre plus attractives pour l’utilisateur. Ce langage permet de modifier des contenus HTML ou des styles
CSS sans changer le code, en fonction de différents facteurs externes, (clic utilisateur ou bien contenu d'une boîte de saisie).
Généralement, on utilise JavaScript pour contrôler les données saisies dans des formulaires HTML. On l'utilise aussi pour
modifier l'esthétique ou le comportement du document HTM, Il sert aussi à créer des animations (pop-up, menu dynamique,
petits jeux, diaporama, montrer ou cacher des objets ….)
Au même titre que le langage html, les navigateurs interprètent le JavaScript localement sur l’ordinateur, ce qui ne
nécessite donc pas d'installation supplémentaire. Cependant, il faut quand même cocher l'option pour autoriser l’utilisation de
JavaScript dans les paramètres du navigateur.

Insérer du code JavaScript dans la page HTML

Le programme, appelé script, peut être directement inséré dans le code html via la balise <script> </script>.

1. Surligner en rouge la partie exécutée par l'interpréteur JavaScript

2. Exécuter ce code et indiquer l'instruction permettant d'afficher un message texte dans une fenêtre Pop-up?
3. Comment se comporte la page HTML, si on place " " après le script ? Conclure.

Insérer du code JavaScript à partir d'un fichier externe

Il est toutefois recommandé de placer le code dans un fichier annexe, et d'ajouter dans l'entête HTML, la balise
<script src = javascript.js"></script> sans contenu. Cette ligne, permettra d’associer le fichier à la page web.

4. Retrouver le nom du fichier JavaScript ?

5. Surligner les deux méthodes pour placer un commentaire en JavaScript ?
6. Identifier le caractère est placé à la fin d'une instruction ?

S08-TD-JS-Formulaire-l3.docx page 1 / 8 Ouchtal/Blot/Thomas : Livet

 7. Sans recopier les commentaires, exécuter ce code, puis indiquer l'ordre d'exécution des instructions.
8. Entourer en rouge la déclaration de fonction JavaScript, et indiquer l'avantage d'utiliser une fonction ?
9. Que représente "texte" dans la ligne "function Affiche(texte)" ?
10. Que réalise l'instruction document.write( texte ) ?

Réagir au clic sur un objet HTML

HTML peut associer un script ou une fonction spécifique à exécuter lorsqu'un évènement (action clavier, action souris,
chargement d'une image, …) se produit. Les balises HTML interceptent quelques évènements simples :

Nom de l'événement Action pour le déclencher

onClick Cliquer sur l'élément
onDblclick Double-cliquer sur l'élément
onMouseOver Faire entrer le curseur dans l'élément
onMouseOut Faire sortir le curseur de l'élément
onMouseDown Appuyer sur le bouton gauche de la souris tout en étant à l'intérieure de l'élément
onMouseUp Relâcher le bouton gauche de la souris tout en étant à l'intérieure de l'élément
onMouseMove Faire déplacer le curseur tout en étant à l'intérieure de l'élément
onKeyDown Appuyer sur une touche de clavier tout en étant à l'intérieure de l'élément
onKeyUp Relâcher une touche de clavier tout en étant à l'intérieure de l'élément
onKeyPress Frapper une touche de clavier tout en étant à l'intérieure de l'élément
onFocus Lorsque l'on utilise l'élément
onBlur Lorsque l'on quitte l'utilisation l'élément
onChange Changer la valeur d'un élément
onInput Taper un caractère dans un champ de texte
onLoad Lors du chargement de la page

Utilisation d'un évènement dans une page HTML

Un gestionnaire d'événement est associé à une balise en spécifiant le code ou la fonction JavaScript à exécuter.

11. Remplacer la ligne 2 par le code suivant et noter le changement de comportement.

12. Exécuter ce code et noter comment réagissent les éléments

S08-TD-JS-Formulaire-l3.docx page 2 / 8 Ouchtal/Blot/Thomas : Livet

 ligne Comment réagit l'élément ?

onLoad

onKeyPress

onMouseUp

onmouseover

onclick

Les variables
Une variable est un conteneur servant à stocker des informations de manière temporaire. Le contenu d'une variable peut
être modifié lors de l'exécution du programme. On associe un nom à la variable, pour lequel, il faut respecter quelques règles :
 Le nom d’une variable commence par une lettre ou un underscore (_) mais jamais par un chiffre.
 Le nom d’une variable ne contient que des lettres, des chiffres et des underscores mais pas de caractères spéciaux.
 Le nom d’une variable ne contient pas d’espace.
Pour déclarer une variable en JavaScript, on utilise le mot-clef var ou let suivi du nom de la variable et éventuellement sa
valeur initiale. Quel que soit le langage, pour éviter les erreurs, clarifier et structurer le code, il est recommandé de déclarer les
variables en début de programme ou début de fonction.

Exemples :

Les instructions conditionnelles de base

L'instruction if permet d'exécuter un bloc d'instructions lorsque la condition est réalisée, le bloc else (facultatif) s'exécute si
la condition est fausse. La condition doit être entre deux parenthèses.

Exemples :

La fonction "confirm" permet d'ouvrir une boîte de dialogue, d'afficher un message et attendre une réponse binaire.
En cliquant, sur
 OK, la fonction "confirm" renvoie la valeur true, la ligne alert("Bravo, bonne réponse."); s'exécute.
 Annuler, "confirm" renvoie la false, la ligne alert("Désolé, il faut revoir votre cours."); s'exécute.

S08-TD-JS-Formulaire-l3.docx page 3 / 8 Ouchtal/Blot/Thomas : Livet

 Il est possible de définir plusieurs conditions à remplir avec les opérateurs && (ET) et || (OU)

Les structures conditionnelles pouvant être imbriquées les unes dans les autres, il est donc conseillé d'indenter le code pour
le rendre plus de lisible. Pour cela, on décale chaque bloc d'instructions pour pouvoir rapidement visualiser l'imbrication des
structures.

Les opérateurs de comparaison

Exercices :

13. Indiquer les valeurs de z et w après l'exécution du code

Les boucles
Les boucles sont des structures qui permettent d'exécuter plusieurs fois la même série d'instructions jusqu'à ce qu'une
condition ne soit plus réalisée.

La boucle for
L'instruction for répète plusieurs fois une ou plusieurs instructions. Lorsqu'il y a plusieurs instructions, elles sont délimitées
par les accolages ouvrantes { et fermantes }
La syntaxe est:

S08-TD-JS-Formulaire-l3.docx page 4 / 8 Ouchtal/Blot/Thomas : Livet

 Exemple :

Cette boucle for exécute 4 fois l'instruction texte = "*"+texte +"*";

i prend successivement les valeurs 0, 1, 2, 3. I++ augmente le contenu de la variable i de 1 à chaque itération.
I==4 est la condition d'arrêt. Le programme quitte la boucle et exécute l'instruction alert(texte);

Exercice :
14. Retrouver le code associé à son affichage :

 

 

 

 

La boucle while
L'instruction while répète plusieurs fois une ou plusieurs instructions tant qu'une condition de test est vérifiée. La
condition est évaluée avant d'exécuter la ou les instructions contenues dans la boucle. Lorsqu'il y a plusieurs instructions, elles
sont délimitées par les accolages ouvrantes { et fermantes }
La syntaxe est:

Il est possible de définir plusieurs conditions à remplir avec les opérateurs && (ET) et || (OU). La condition de sortie
pouvant être n'importe quelle structure conditionnelle, les risques de boucle infinie (boucle dont la condition est toujours vraie)
sont grands, c'est-à-dire qu'elle risque de provoquer un plantage du navigateur!

Exemple :

S08-TD-JS-Formulaire-l3.docx page 5 / 8 Ouchtal/Blot/Thomas : Livet

 Cette boucle while exécute 4 fois les instructions prenom = "." + prenom; et i -= 1;
i prend successivement les valeurs 4, 5, 6, 7.
I  8 est la condition d'arrêt. Le programme quitte la boucle et exécute l'instruction alert( prenom );
Exercice :

15. Noter les valeurs prises par n et en déduire combien de fois s'exécute la boucle while ?

Variants de la boucle while : do … while

L'instruction do...while crée une boucle qui exécute une ou plusieurs instructions jusqu'à ce qu'une condition de test
ne soit plus vérifiée. La condition est testée après que le bloc d'instruction soit exécuté, Ce bloc défini dans la boucle est donc
exécuté au moins une fois.

Modifier les caractéristiques d'un élément de la page HTML

Le DHTML (Dynamic HTML) permet la manipulation dynamique des composants d'un document, tant sur son apparence
que sur son contenu. L'accès se fait par un Modèle de Document Objet (appelé couramment DOM).
En Javascript, la méthode la plus connue est getElementById, elle permet d'accéder aux éléments HTML ou CSS d’un
document.
La syntaxe générale est :

La variable élément correspond à l'élément HTML dont la balise est identifiée par l'attribut ID="id". Ainsi, on pourra
accéder à tous les attributs définis, pour cet élément.

Exemple :

Lorsque la souris survole l'image identifiée id="img1", la fonction reSize(1.5) s'exécute. Elle affecte des nouvelles valeurs à
la largeur et la longueur. En sortant la souris de l'image, la fonction reSize(0.25) s'exécute. Elle affecte les valeurs initiales à la
largeur et la longueur.
Remarque : lorsqu'une propriété CSS possède un tiret dans son nom, il faudra utiliser à la place une majuscule sur la lettre
suivante. Par exempe background-color deviendra en Javascript backgroundColor.

S08-TD-JS-Formulaire-l3.docx page 6 / 8 Ouchtal/Blot/Thomas : Livet

 Exercice1 : "mystere.js",

16. Indiquer quelle instruction ou ligne permet de lire une valeur saisie au clavier ?
………………………………………………………………………………….
17. Indiquer comment obtenir un nombre aléatoire réel compris 0 et 49 inclus ?
………………………………………………………………………………….
18. D'après le code, indiquer comment obtenir la partie entière d'un nombre réel ?
………………………………………………………………………………….
19. Indiquer quelle est la condition d'arrêt de la boucle?
………………………………………………………………………………….
20. Indiquer si l'expression , modifie-t-elle la valeur de la variable choix ?
………………………………………………………………………………….

Exercice2 : Vérification de Formulaire,

21. Repérer le code HTML, CSS et Javascript

22. Exécuter ce code et indiquer le rôle de l'attribut required.
23. Modifier le code pour surligner en vert un champ vide.
24. Indiquer le nom de la fonction vérifiant le formulaire.
25. Personnaliser le formulaire et son traitement.

Ressources :
 www.w3schools.com/
 https://openclassrooms.com/fr/courses/1916641-dynamisez-vos-sites-web-avec-javascript

S08-TD-JS-Formulaire-l3.docx page 7 / 8 Ouchtal/Blot/Thomas : Livet

Notes personnelles :

S08-TD-JS-Formulaire-l3.docx page 8 / 8 Ouchtal/Blot/Thomas : Livet