UA 8 : PROGRAMMATION EN JAVASCRIPT - Exécu on côté client : Le code source est visible, ce qui pose des risques de sécurité (ex.
:
injec ons).
Objec f général
- Dépend du navigateur : Des incompa bilités peuvent survenir entre navigateurs.
Face à un environnement informa que, l’apprenant doit être capable de créer des pages
web dynamiques en u lisant le langage JavaScript. - Pas adapté pour des tâches lourdes (ex. : calculs intensifs) sans frameworks.
JavaScript permet d’ajouter de l’interac vité aux pages web créées en HTML et CSS. - Sensible aux erreurs : Une pe te faute peut bloquer toute la page.
4. Écriture de la syntaxe d’inser on d’un script dans un document HTML
Leçon 31 : Introduc on au JavaScript
Il existe trois façons d'insérer du JS dans un fichier HTML :
1. Défini ons
- Dans l'en-tête (head) : Pour des scripts globaux.
JavaScript (souvent abrégé JS) est un langage de programma on u lisé pour rendre les pages
web interac ves. Il permet d'ajouter du dynamisme aux sites sta ques créés en HTML et CSS, ```html
comme des anima ons, des valida ons de formulaires ou des mises à jour en temps réel <head>
<script>
sans recharger la page.
alert("Bonjour depuis l'en-tête !");
2. Les caractéris ques du JavaScript </script>
</head>
- Interprété : Le code JS est exécuté ligne par ligne par le navigateur sans compila on ```
préalable. - Dans le corps (body) : Pour des scripts liés à des éléments spécifiques.
- Exécu on côté client : Le script s'exécute sur l'ordinateur de l'u lisateur (dans le ```html
navigateur), ce qui rend les pages plus rapides et interac ves. <body>
<script>
- Interac vité : JS permet de réagir aux ac ons de l'u lisateur (clics, saisies, etc.) et de [Link]("Bonjour depuis le corps !");
modifier le contenu HTML en temps réel. </script>
</body>
- Autres : Orienté objet, sensible à la casse (majuscules/minuscules), et compa ble avec la ```
plupart des navigateurs modernes. - À par r d’un fichier externe : Meilleure pra que pour la maintenance (fichier .js séparé).
```html
3. Avantages et limites du JavaScript <head>
<script src="[Link]"></script>
Avantages : </head>
- Facile à apprendre et à intégrer à HTML. ```
(Dans [Link] : `alert("Bonjour depuis un fichier externe !");`)
- Améliore l'expérience u lisateur avec de l'interac vité sans serveur.
- Large communauté et bibliothèques (ex. : jQuery, React).
Exercice : Créez un fichier HTML simple et insérez un script qui affiche "Bienvenue en JS !" de
- Gratuit et open-source. trois façons différentes.
Limites :
1 2
Leçon 32 : Les éléments des langages JavaScript Leçon 33 : U lisa on des instruc ons d’entrée/sor e et des fonc ons
1. Les types de base prédéfinies en JavaScript
JS est un langage faiblement typé. Les types principaux sont :
- Number : Nombres en ers ou décimaux (ex. : 42, 3.14). 1. Les instruc ons simples dans un script (affecta on, entrée et sor e)
- String : Chaînes de caractères (ex. : "Bonjour"). - Affecta on : `let x = 10;`
- Boolean : Vrai ou faux (true/false).
- Undefined : Variable non ini alisée. - Entrée : `prompt("Entrez un nombre :");` (affiche une boîte de dialogue).
- Null : Valeur inten onnellement vide. - Sor e : `alert("Message");` (boîte d'alerte), `[Link]("Message");` (console du
- Object : Structures complexes (tableaux, fonc ons, etc.). navigateur), ou `[Link]("Message");` (écrit dans le HTML).
2. La déclara on des variables et des constantes dans un script
Exemple :
- Variables : U lisez `let` (portée locale) ou `var` (portée globale, déconseillé).
```javascript
let age = 17; // Variable modifiable
let nom = prompt("Votre nom ?");
var nom = "Jean"; // Ancienne syntaxe
alert("Bonjour " + nom);
- Constantes : U lisez `const` pour des valeurs fixes. ```
const PI = 3.14159; // Ne peut pas être modifiée 2. U lisa ons des fonc ons de conversion
- `parseInt()` : Conver t une chaîne en en er.
3. Les opérateurs
Ex. : `parseInt("42") // 42`
- Arithmé ques : `+` (addi on), `-` (soustrac on), `*` (mul plica on), `/` (division), `%`
(modulo), `++` (incrément), `--` (décrément). - `parseFloat()` : Conver t une chaîne en décimal.
Ex. : `let somme = 5 + 3; // 8` Ex. : `parseFloat("3.14") // 3.14`
- De comparaison : `==` (égal), `===` (égal strict, type inclus), `!=` (différent), `>` (supérieur),
`<` (inférieur), `>=`, `<=`. Exemple :
Ex. : `5 === "5"` retourne false (types différents). ```javascript
- Logiques : `&&` (ET), `||` (OU), `!` (NON).
let input = prompt("Entrez un nombre :");
Ex. : `true && false` retourne false.
let nombre = parseInt(input);
- D'assigna on : `=` (assigner), `+=` (ajouter et assigner), `-=`, `*=`, etc.
Ex. : `let x = 10; x += 5; // x = 15` [Link](nombre + 10);
```
- De concaténa on : `+` pour chaînes.
Ex. : `"Bonjour " + "monde" // "Bonjour monde"`
Exercice : Créez un script qui demande deux nombres via prompt, les conver t, les
Exercice : Écrivez un script qui déclare une variable âge, une constante nom, et u lise des addi onne et affiche le résultat via alert.
opérateurs pour calculer et afficher "Jean a 17 ans".
3 4
Leçon 34 : Les structures de contrôle en JavaScript Leçon 35 : Les tableaux en JavaScript
1. Les structures alterna ves
- if : Exécute si condi on vraie. 1. Déclara on d’un tableau en JavaScript
```javascript - Déclara on simple : `let fruits = ["pomme", "banane"];`
if (age > 18) {
- Avec new : `let notes = new Array(10, 15, 20);`
alert("Adulte");
}
2. Opéra ons sur les tableaux (accès, parcours, ajout et suppression d’élément…)
- if...else : Alterna ve si faux.
- Accès : `fruits[0] // "pomme"`
if (age > 18) {
alert("Adulte"); - Parcours : U lisez for ou forEach.
} else { for (let i = 0; i < [Link]; i++) {
alert("Mineur");
} [Link](fruits[i]);
}
2. Les structures itéra ves (for, while, do…while)
- Ajout : `[Link]("orange");`
- for : Boucle avec compteur.
- Suppression : `[Link]();` (dernier), `[Link](1, 1);` (à l'index 1).
for (let i = 0; i < 5; i++) {
[Link](i); - Recherche : `[Link]("banane"); // 1`
}
- while : Boucle tant que condi on vraie.
Exercice : Créez un tableau de 5 notes, parcourez-le pour calculer la moyenne, et ajoutez une
let i = 0; nouvelle note.
while (i < 5) {
[Link](i);
i++;
}
- do...while : Exécute au moins une fois.
let i = 0;
do {
[Link](i);
i++;
} while (i < 5);
Exercice : Écrivez un script qui u lise if-else pour vérifier si un nombre est pair/impair, et une
boucle for pour afficher les nombres de 1 à 10.
5 6
Leçon 36 : Les fonc ons et les évènements en JavaScript
1. Les types de fonc ons
- Sans retour :
func on saluer() {
alert("Bonjour");
}
- Avec retour :
func on addi on(a, b) {
return a + b;
}
2. Appel des fonc ons
`saluer();` ou `let res = addi on(5, 3);`
3. Accès aux éléments du script
U lisez `[Link]("id")` pour accéder à un élément HTML.
Ex. : `let elem = [Link]("monPara");
4. Contrôle de saisie des champs d’un formulaire dans un script
- Événements :
Evènement Descrip on
onclick clic
onmouseover passage souris
onchange changement
onfocus champ ac f
onload chargement page
Exemple avec formulaire :
```html
<input type="text" id="nom" onChange="verifier()">
```
func on verifier() {