Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

JAVASCRIPT Javascript # Langage de programmation # Améliorer l’interactivité du

JAVASCRIPT Javascript # Langage de programmation # Améliorer l’interactivité du site web # Exécution en réponse à des événements # Extension du fichier .js # Langage orienté objet # Il est exécuté par le navigateur => dans le contexte d’une page web =>coté client Navigateur Page web Javascript Insérer du javascript # Code javascript dans un fichier externe # Code javascript dans le fichier html Insérer du javascript # Code javascript dans le fichier html <!DOCTYPE html> <html> <head> <script> // code javascript </script> </head> <body> … </body> </html> <!DOCTYPE html> <html> <head> </head> <body> … <script> // code javascript </script> </body> </html> <!DOCTYPE html> <html> <body> <div onclick="code javascript"></div> </body> </html> Insérer du javascript # Code javascript dans un fichier externe <!DOCTYPE html> <html> <head> <script src="chemin vers le fichier/nom_du_fichier.js "></script> </head> <body> … </body> </html> <!DOCTYPE html> <html> <head> </head> <body> … <script src="chemin vers le fichier/nom_du_fichier.js"></script> </body> </html> Placer le code JS dans la page # Où insérer le script js ? # Son emplacement a des conséquences sur l’exécution de la page. # Le code HTML, JS, CSS est lu de haut en bas par le navigateur # Si on vaut agir sur un élément, il faut que le navigateur connaisse la structure du HTML # Plus les scripts sont longs plus la page mettra du temps à s’afficher # => Placer le script en fin de document HTML ( généralement avant la fin de la balise body) LE LANGAGE JAVASCRIPT Instruction # On sépare les instructions par des ; ou des sauts de lignes # Exemple d’instruction # Declarer une variable # Affecter une valeur à une variable # Déclarer et affecter une valeur à une variable instruction; instruction instruction; instruction; instruction; Commentaire # // si le commentaire est sur une ligne # /* commentaire */ si le commentaire est sur plusieurs lignes LES VARIABLES Variable # Un espace de stockage sur l’ordinateur # Déclarer une variable : réserver un espace de stockage # Affecter une valeur à une variable : stocker des données dans la variable Variable # Nom d’une variable # Caractères alphanumériques ( A-Z, a-z, 0-9) # _ # $ # Ne peut pas commencer par un chiffre # Ne peut pas être des mots clés utilisés par Javascript ( let, function …) Variable # Déclarer une variable let ma_variable; let ma_variable2 let ma_variable3, mavariable4 let a ; let nom, prenom; Variable # Javascript sensible à la casse let maVariable ; let mavariable ; let MAVARIABLE ; 3 variables diﬀérentes Variable # Affectation d’une variable (donner une valeur à une variable) let $nom_variable = VALEUR; let nom_variable2; nom_variable2 = VALEUR; let nom = ‘Dupond’, prenom = ‘Jean’, adresse; let age_majeur = age = 18; let majeur = true; Exemple # let nom; # let prenom = ‘’dasha’’ ; # let age = 25 LES TYPES DE VARIABLES Javascript langage faiblement typé Connaitre le type de la variable # typeof Les types de variables # Numérique (number) : nombre # Chaine de caractères (string) : texte # Booléens ( boolean): true ou false # Tableau (array) # … Numérique # Écriture entier : number = 5; # Ecriture décimal : number = 5.5; # Ecriture hexadécimal : number = 0x391; # Ecriture scientifique : number = 3.65e+5; Opérateur arithmétiques Chaine de caractères # Entre guillemet double : texte = "mon texte" ; # Si la chaine de caractère contient " on le préfixe avec \ # texte = " \"ceci est un guillemet " # Entre guillemet simple : texte = ‘mon texte’; # Si la chaine de caractère contient ‘ on le préfixe avec \ # texte = ‘ \’ceci est une apostrophe ‘ let texte = ‘ c\’est mon premier … ’ Concaténation # Chaînes de caractères mises bout à bout # let mavariable = ‘He’ + ‘L’+’Lo’; => ‘HeLLo’ Let nom = «Bernard» Let prenom = «jean pierre» Let nom_prenom = nom + « » + prenom ===> «Bernard jean pierre» Conversion de type # parseInt() # La fonction parseInt() analyse une chaîne de caractère fournie en argument et renvoie un entier Tableau # Déclarer et affecter un tableau Let mon_tableau =[12,15,7]; mon_tableau_2 =[12,’hello’,157, true]; 12 ‘hello’ 157 true 0 1 2 3 ìndice Donnée Tableau # Accéder à un élément du tableau mon_tableau[indice]; Les indices commencent à 0 jusqu’a la taille -1 du tableau Indice 0 1 2 3 … N (= taille -1) Taille d’un tableau = nombre d’élément dans le tableau mon_tableau_2[0] => 12 mon_tableau_2[2] => 157 mon_tableau_2[3] => true Tableau # Parcourir un tableau let mon_tableau =[12,15,7]; for(i=0;i<mon_tableau.lenght; i++){ mon_tableau[i] } • ++ : ajouter 1 : incrémentation • - - : soustraire 1 : décrémentation Objet # Objet est une collection de propriétés et de méthodes # Propriété = caractéristique # Méthode = fonction voiture.marque Objet # Pour accéder à une propriété d’un objet # Pour appeler une méthode d’un objet objet.propriete objet.methode(argument) LES CONDITIONS Condition # Sorte de test permettant de vérifier ou non une expression Opérateurs de comparaison # Comparer des valeurs La condition if if(condition){ // si la condition est vraie alors j’exécute les instructions entre accolades instruction_1; instruction_2; } instruction_3 var age = 18; if(age == 18){ // instructions } 1. instruction_0; 2. if(2 != 2){ 3. // si la condition est vraie alors j’exécute les instructions entre accolades 4. instruction_1; 5. instruction_2; 6. } 7. instruction_3 ; condition == true 1 2 ( 2==2 => vrai) 4 5 7 condition == false 1 2 ( 2 !=2 ==> false) 7 let a = 2 let b = 5 let c let d = 2 a==b ==> non a==d ==> oui 1. let a = 2, b = 2 2. if(a == b){ 3. // si la condition est vraie alors j’exécute les instructions entre accolades 4. instruction_1; 5. instruction_2; 6. } 7. instruction_3 ; 1 La condition if else if(condition){ // si la condition est vraie alors j’exécute les instructions entre accolades instruction_1; instruction_2; }else{ // si la condition est fausse alors j’exécute les instructions entre accolades instruction_3 } instruction_4 var age = 18; if(age == 18){ // instructions }else if(age<18){ // instructions }else{ // instructions } 1. instruction_0; 2. if(condition){ 3. // si la condition est vraie alors j’exécute les instructions entre accolades 4. instruction_1; 5. instruction_2; 6. } 7. instruction_3 ; 1. instruction_0; 2. if(condition){ 3. // si la condition est vraie alors j’exécute les instructions entre accolades 4. instruction_1; 5. instruction_2; 6. }else{ 7. instruction_3 8. instruction_4 9. } 10. instruction_5 ; # Let age_utilisateur => demander âge a l’utilisateur # if(age_utilisateur < 18){ # Afficher (« tu es mineur) # }else{ # Afficher (« tu es majeur) # } # Let age_utilisateur => demander âge a l’utilisateur # // age_utilisateur = 35 # if( age_utilisateur < 18){ # Affiche ( mineur) # }else if(age_utilisateur == 18){ # Affiche (Tu as 18 ans) # }else{ # Affiche(« majeur) # } # Let age_utilisateur => demander âge a l’utilisateur # if( age_utilisateur < 18){ # Affiche ( mineur) # } # if(age_utilisateur == 18){ # Affiche (Tu as 18 ans) # } # if(age_utilisteur > 18) { # Affiche(« majeur) # } LES BOUCLES Une boucle # Une boucle est une structure conditionnelle qui se répète jusqu’à un point d’arrêt # Itération = à chaque fois que la boucle se répète La boucle while while(condition){ // tant que la condition est vraie, on exécute les instructions instruction_1; instruction_2; } instruction_3; 1. instruction_0 2. let mavariable = 2 3. while(mavariable > 0){ 4. // tant que la condition est vraie, on exécute les instructions 5. instruction_1; 6. instruction_2; 7. mavariable = mavariable + 1 8. } 9. instruction_3; 1. instruction_0 2. let mavariable = 2 3. while(mavariable > 4){ 4. // tant que la condition est vraie, on exécute les instructions 5. instruction_1; 6. instruction_2; 7. mavariable = mavariable + 1 8. } 9. instruction_3; 1. instruction_0 2. let mavariable = 2 3. while(mavariable < 4){ 4. // tant que la condition est vraie, on exécute les instructions 5. instruction_1; 6. instruction_2; 7. mavariable = mavariable + 1 8. } 9. instruction_3; Boucle for for(initialisation;condition; incrémentation){ // code } for(i=0; i<10;i=i+1){ //instructions } 1.let mon_tableau =[12,15,7]; 2.for(i=0;i<3; i=i+1){ 3. afficher(mon_tableau[i]) 4. } 5. instruction_2 12 15 7 0 1 2 ìndice Donnée LES FONCTIONS Fonction # Une fonction est un sous-programme qui effectue une tâche ou un calcul et qui permet de renvoyer un résultat. Dans la plupart des cas, elle contient des paramètres. Des paramètres sont des informations qui seront récupéré par la fonction et qui serviront à l'exécution de la tâche ou du calcul. # Bloc de code qui aura un nom et qui pourra être appelé plusieurs fois Fonction sans argument # Déclaration d’une fonction sans argument # Appeler une fonction function nom_fonction(){ // instructions; } function saluer(){ console.log("Bonjour") ; } Exemple nom_fonction(); saluer(); Fonction avec argument # Déclaration d’une fonction avec argument # Appeler une fonction function nom_fonction(arg1, ,argN){ // instructions; } function saluer(prenom){ // uploads/S4/ javascript 1 .pdf