INTRODUCTION
ET R A P P E L
J AVA S C R I P T
INTRODUCTION
JavaScript est un langage de programmation qui ajoute de l'interactivité à votre site web (par exemple : jeux,
réponses quand on clique sur un bouton ou des données entrées dans des formulaires, composition dynamique,
animations).
JavaScript (« JS » en abrégé) est un langage de programmation dynamique complet qui, appliqué à un document
HTML, peut fournir une interactivité dynamique sur les sites Web.
FONCTION EN JS
• Il y a les fonctions/variables natives (déjà existante). On peut aussi en créer.
• Syntaxe
• Exemple
VARIABLES LOCALES/GLOBALES
• Toute variable déclaré dans une fonction n’est utilisable que dans cette même fonction :
variable locale.
• Déclaré en dehors des fonctions : variables globales.
• Exemple :
• Eviter de déclarer des variables locales et globales qui portent le même nom
LET/VAR
L'instruction let permet de déclarer une variable dont la portée est celle du bloc courant,
éventuellement en initialisant sa valeur.
Le mot-clé let permet de définir des variables au sein d'un bloc et des blocs
qu'il contient. var permet quant à lui de définir une variable dont la portée
est celle de la fonction englobante.
• Let dans for:
ARGUMENTS
• Exemples avec un/multiples arguments :
• Avec valeur de retour
LES ERREURS LIES A LET
• Lorsqu'on redéclare une même variable au sein d'une même portée de bloc, cela entraîne une
exception SyntaxError.
CONSTANTES
• Syntaxe : const CONSTANT_NAME = value;
Exemple
TAMPLATE LITTERAL
backticks (`)
PARAMETRES PAR DEFAUT
Exemple Utilisation de l’objet ‘arguments’
PARAMETRE D’APPUI
Avec l’operateur spread
Exemple :
DESTRUCTURATION DES TABLEAUX Exemple
DESTRUCTURATION D’OBJET • Exemple :
DESTRUCTURATION DES ARGUMENTS D’UNE FONCTION • Exemple :
TABLEAUX ET
METHODES
CONSTRUIRE UN TABLEAU
• La première lettre de la
fonction du constructeur doit-être en Majuscule • On utilise new pour construire
• On peut ensuite ajouter ou remplacer des variables
LES METHODES : TOSTRING, JOIN, DELETE
• toString() joint tous les éléments du tableau dans une chaîne (séparateur virgule).
• join() joint également tous les éléments du tableau dans une chaîne
• delete supprimer un élément du tableau
LES METHODES : SPLICE
• splice() peut être utilisée pour ajouter de nouveaux éléments à un tableau ou supprimer
des éléments sans laisser de "trous" dans le tableau
LES METHODES : CONCAT, SLICE
• concat() crée un nouveau tableau en concaténant des tableaux existants
• slice() extraire une partie du tableau
LES METHODES : SORT, REVERSE
• sort() ordonner alphabétiquement et numériquement
Croissant
Décroissant
• reverse() inverser un tableau
LES METHODES : SORT, RANDOM • sort() exemple
• Ordre random
LES METHODES : FOREACH , FILTER
• forEach() appelle une fonction (une fonction de rappel) une fois pour chaque élément du
tableau
(La valeur de l'article ,L'index des articles , Le tableau lui-même) • filter() filtre un tableau
LES METHODES : MAP, EVERY
map() crée un nouveau tableau en exécutant une fonction sur chaque élément du
tableau.
map() n'exécute pas la fonction pour les éléments de tableau sans
valeurs. map() ne modifie pas le tableau d'origine.
every() vérifie si toutes les valeurs du tableau réussissent un
test
LES METHODES : REDUCE, REDUCERIGHT
reduce() exécute une fonction sur chaque élément du tableau pour produire (le réduire à) une
valeur unique.
reduce() fonctionne de gauche à droite dans le tableau.
reduce() ne réduit pas le tableau d'origine.
total : la valeur initiale / la valeur précédemment renvoyée
Elle peut accepter une valeur initiale
LES METHODES : SOME, INDEXOF
some() vérifie si certaines valeurs du tableau réussissent un test.
• indexOf() recherche dans un tableau une valeur d'élément et renvoie sa position.
• Remarque : Le premier élément a la position 0, le deuxième élément a la position 1, et ainsi
de suite
Syntaxe : [Link](item, start)
item : obligatoire
start : optionnel
LES METHODES : INDEXOF
Valeur de retour
Le premier index de l'élément dans le tableau ou -1 si la valeur n'est pas trouvée. Exemple : on peut utiliser
indexOf afin de trouver l'emplacement d'un élément dans un tableau.
LES METHODES : FIND, FINDINDEX
find() renvoie la valeur du premier élément du tableau qui réussit une fonction de
test.
GESTION DES CHAINES DE CARACTÈRES
AUTRES METHODES :
• trim() : supprime les espaces d’une chaine
• split() : coupe une chaine en un tableau
EVENEMENTS
FORMUL AIRES
LES ÉVÈNEMENTS
•
LES ÉVÈNEMENTS
• Les deux événements spécifiques à <form>
• Utilisation click
• Utilisation focus et blur
FORMUL AIRES
• Utilisation de la propriété value
• Pour désactiver un champ de text
FORMUL AIRES
• Utilisation checked pour les boutons radio
FORMUL AIRES
• Utilisation selectedIndex pour la liste déroulante
FORMUL AIRES
• Utilisation submit() et reset()
FORMUL AIRES
• Utilisation focus() blur() et select()
EXERCICES
EXERCICES
• Exercice 1 :
•Soit le tableau suivant : [ 'Mangue', 'Raisin', 'Figue', 'Kiwi’ ];
•Écrire un programme qui :
Affiche la liste de fruits disponibles ;
Demande au client quel fruit il désire acheter :
•s’il est présent dans le tableau fruits: le retirer du tableau, et afficher
‘ok!’, •sinon, afficher ‘indisponible…’.
Affiche à nouveau la liste de fruits disponibles.
Exercice 2 :
▪ Ecrire un programme qui demande à l’utilisateur de saisir 5 nombres entiers comprises entre 9
et 99, puis une fois la saisie terminée, les affiche.
▪ Le programme doit redemander la saisie en cas d’erreur sans compter cette étape
Le programme affiche les nombres des entiers pairs, le nombre des entiers impairs saisis et le
•
nombre des itérations fausses
Le programme affiche le tableau des nombres pairs et le tableau des nombres impairs saisis
•
• Le schéma suivant représente le résultat souhaitait