Mise à jour d'une variable

Les variables let et const pas d’affectation

// mais cela n'a rien à voir avec le moteur JavaScript qui ne lèvera aucune erreur.
 Objet dans objet

Faire des calculs avec des variables (modulo) Incrémentatation Décrémentation

Faire des calculs avec des variables Incrémentatation Décrémentation

Manipulation d’une constante Calcul avec une constante Alert

Attention au typage des variables Opérateur de comparaison

Ne fonctionne pas Ok, fonctionne et

indique : 100 Ok : est différent avec
Pas ok  différent de 100 Pas ok : caractère et entier
strict égalité

Cibler un élément html par son id (Ajouter du texte dans une div)  .innerText
Envoyer du HTML (Mettre des propriétés HTML)  .innerHTML

Cibler un élément html par son nom

Le premier "p" est pris en compte.

Cibler un élément html par sa classe

Le deuxième SPAN [1] avec la class "toto" , on y écrit avec le JS : "coucou"

Ajouter un bouton ou un texte selon une instruction

Les ternaires

On lit : si a ==1 (c’est la condition)  "A vaut 1" ; Après le point " ? " = condition vrai
Sinon après les " : " = condition fausse  "A ne vaut pas 1"
Comme a vaut 10 (photo de gauche)  "A ne vaut pas 1"

Le switch
 Le switch (bis)

Les fonctions (3 Catégories de fonction)

Fonction sans paramètres

Fonction avec paramètres

S’il manque un argument dans l’appel de la fonction, on peut

définir une valeur dans le paramètre.
Expression de fonction (Fonction anonyme) Expression de fonction (avec paramètres)  Expression de fonction : Récupération d’une fonction dans Let ou const

On déclare dans une const ou un Let, une fonction.

Fonction fléchée
Fonction fléchée (avec paramètres) Aberration des fonctions (Le code est fonctionnel alors que la fonction est déclaré après)
Ce n’est pas le cas avec les variables, même si on lui affecte une fonction

Portée des variables

La variable locale : ${adresseEmail} reste à "", car elle est déclaré dans
une fonction. Sa portée est opérationnelle uniquement dans son bloc.
Cela fonctionne en appelant la fonction

La variable globale "adresseEmail" est déclaré avant la fonction et il

faut impérativement lui donner une valeur pour que ça fonctionne.
On doit impérativement déclarer et donner une valeur d’une
variable ou d’une constante avant de rentrer dans une fonction
pour que le return fonctionne
Petit exercise

La boucle FOR
Incrémentation Décrémentation Exercice
La boucle While Incrémentation et décrémentation

Exercice avec boucle While

Boucle do while (Faire tant que)

Boucle avec for..in (Affichage de toutes les clés) Boucle avec for..in (Affichage de toutes les valeurs) Boucle avec for..of (Affichage de toutes les valeurs)

Instruction Break Exercice avec le Break

Instruction Continue
Exercice
Grand Exercice

Les Evènements
Deuxième argument  Fonction de callback : dépend toujours de
l’évènement.

Même propriété que celui du dessus, mais va engendrer un

problème avec la syntaxe "this"  Donc, si possible, na pas l’utiliser.
Le mot clé this
Le mot clé "this" fait référence à la constante : BOX . Il est donc inutile de
répéter "BOX", mais cela fonctionnerait quand même, comme vu avec le
précèdent exemple.

Vu de la console avec le mot clé "this"

La méthode constructor
Evénements liés à la souris Evènements liés au formulaire

Ajout de la classe jaune lors du passage de la souris

sur l’élément : BOX ou il y a écrit : "Passez ici".

Résultat de l’évènement.

En mettant un paramètre dans la fonction (ex : "e ", et la méthode

"preventDefault", cela bloque le comportement par défaut du formulaire.
On peut l’appliquer à tous les éléments.
Evènements liés au formulaire (2)

Evénement lié aux touches du clavier

La méthode querySelector (Permet de sélectionner un élément HTML avec précision)

La méthode querySelectorAll (Permet de sélectionner les élément sélectionnés HTML avec précision, mais traduction du CSS en tableau)

Exercice (écriture en rouge de tous les paragraphes "P")

Exercice (Evènements du clic sur paragraphes "P"  Change de couleur)

On sélectionne tous les paragraphes "P".
On fait une boucle sur tous ces paragraphes.
Dans cette boucle, on ajoute l’évènement "click" en sélectionnant
la classe "red" déjà créé dans le css.
La propriété "toggle" permet de déclarer et de supprimer la classe
red une fois/2. (Bouton on/off)
Exercice (passage de la souris sur "je suis la box" : en rouge et si la souris disparait : plus rien)

Avec le toogle (même résultat)

Classe du JS

toggle  1 fois add, 1 fois remove (commutateur)

Exercice (Demander à l’utilisateur de rentrer un pseudo avec minimum 5 caractères)

Formulaire (Case à cocher)

Formulaire (Menu select)

Le DOM (Document Object Model).
L’objet" Window" est hiérarchiquement le plus haut. Il représente la fenêtre alors que le "DOM" représente tout ce qu’il y a de présent dans le navigateur.

Les différentes fenêtres

Exercice avec fenêtre

Exercice fenêtre confirm (Même exercice que le précédent) Exercice fenêtre confirm (avec une condition)

Créer une fenêtre

(index.html) (fenetre.html) (CSS)
2 fichiers JS ont été
nécessaires, car dans les 2
fichiers html, les 2 "div"
ont le même nom : "box".
Cela permet donc d’éviter
les conflits avec le JS

(script.js)
script2.js
Tester la longueur de l'historique de navigation

Historique de navigation (Revenir à la page précédente) (Revenir 2 pages en arrière)

Capter la position du pointeur de la souris

Détecter le positionnement du scroll (Ascenseur) console.log(window.scrollY)

Exercice(Au dessus de 500px de scroll, le fond de l’écran est en rouge) Exercice (Tableau avec les colonnes centrées et surlignées si pair)

"tr:nthchild(even)":
Tous les éléments
pair.

Rappel de la syntaxe bien utilisé

(Récupère le nom de la balise)

(Récupère les balises)

passage de la
souris
Renvoie un tableau (dans console)
para = variable de tableau

(Dans console)

QuerySelector
selctionne
toujours le
premier
élément Si clic sur Google.fr,
maintenant site de
Sélection du Carl Brison.
septième élément
qui est "Section 2"
sans identifiant.
Exercice (Destruction d'un tableau en JS)
Exercice menu accordéon
Exercice Onglet de navigateur
FROM SCRATCH (Exercises)

Détecter l’appui d’une touche sur le clavier

Jouer le fichier z.mp3 existant lors de l’appui de la touche z du clavier

load event (se déclenche une fois que toute la page a été chargé)
Valider un formulaire après contrôle de saisie et envoyer un message après la validation

 Le JS écrira les infos du form dans cette balise

Si la case CGV est cochée alors on créé les balises h3 et h4 avec la

méthode du JS : ".innerHTML" qui injecte les infos du formulaire
Evite l’envoi des infos pour le back-end (php etc…) via l’URL
contenues dans le variables "pseudo" et "language", tout cela dans
la balise "div" vide de l’HTML.