Le DOM et JavaScript 49. Retour sur le LANGAGE JavaScript

Transcription

1 Le DOM et JavaScript 49 Retour sur le LANGAGE JavaScript

2 Les variables JavaScript 50 Définition : Une variable est une zone de la mémoire dans laquelle on enregistre tout types de données, des valeurs numériques, des chaines de caractères ou des structures de données plus particulières. Pour pouvoir utiliser une variable il faut la nommée et la déclarée. Règle sur les noms de variables : ne peut contenir que des caractères alphanumériques, c-à-d les lettres de A à Z et les chiffres de 0 à 9. peut également contenir l'underscore _ et le dollar $. ne peut pas commencer par un chiffre. Ne peut pas utiliser de mots-clés utilisé par JavaScript. Attention JavaScript est un langage sensible à la casse, il faut faire attention aux majuscules et minuscules utilisées. Mavariable ou MAVARIABLE ou mavariable sont trois variables différentes.

3 Les variables JavaScript 51 Déclaration d'une variable : Pour déclarer une variable on utilise le mot-clé var. Exemple : var MaVariable; var Variable; Initialisation des variables : On peut initialiser une variable lors de sa déclaration en utilisant le signe =. var MaVariable = 5; // on déclare la variable MaVariable et on lui affect le valeur 5 On peut déclarer et initialiser plusieurs variables sur une seule ligne en les séparant par des virgules, : var V1, V2, V3 = 5.5, V4 = 0, V5 = 10 ; Initialisation de deux variables avec la même valeur : Initialisation de deux variables avec la même valeur : var V1,V2; V1 = V2 = 3;

4 Les Types de variables 52 Contrairement à d'autres langages, JavaScript est un langage typé dynamiquement. Toute déclaration de variables se fait avec le mot-clé var qui n'indique pas le type de la variable, contrairement par exemple au langage C qui lui indique le type de la variable lors de sa déclaration. Avec JavaScript le contenu d'une variable peut changer de type au cours de l'exécution du programme. Trois type de variables : Le type numérique (number) Le type chaîne de caractères (string) Le type booleen (boolean)

5 Les Types de variables 53 Le type numérique (number) Ce type représente tout nombre entier ou réel, positif ou négatif. Pour assigner un type à une variable, il suffit de lui affecter un nombre. Exemple : var VariableNombre = 5; // on assigne un entier var VariableNombre = 3.14; var VariableNombre = 5.45 e+3; var VariableNombre = 0xFA15; // on assigne un nombre décimal // on assigne un réel en notation scientifique // on assigne un entier au format hexadécimal

6 Les Types de variables 54 Le type chaine de caractères (string) Ce type représente une chaine de caractères (succession de caractères). Deux méthodes d'assignation : var Texte = "Une chaine de caractère"; var Texte ='Une chaine de caractère'; // avec des guillemets // avec des apostrophes Attention : var mavariable = '125'; // on assigne le caractère 125 à la variable et pas la valeur // numérique 125 Problème des ' et " dans les chaines de caractères var Texte = 'C'est une chaine à problème' // cette variable contient seulement 'C' Solution : il faut échapper l'apostrophe var Texte = 'C\'est une chaine à problème'

7 Les Types de variables 55 Le type booléen (boolean) Un booléen est un type à deux états : vrai ou faux (true, false) Exemple : var Vrai = true; var Faux = false; L'instruction typeof : Cette instruction nous permet de déterminer le type d'une variable. var Nombre = 2; Chaine = typeof Nombre var UnTexte = "un texte exemple"; Chaine = typeof UnTexte var UnBooleen = true; Chaine = typeof UnBooleen Chaine = typeof UneVariable // chaine contient "number" // chaine contient "string" // chaine contient "boolean" // la variable UneVariable n'est pas initialisée la chaine // contient "undefined"

8 Les opérateurs arithmétiques 56 Nous pouvons manipuler les contenus des variables en appliquant des opérateurs arithmétiques. Opérateurs disponibles : Addition + Soustraction - Multiplication * Division / Modulo % reste de la division entière Exemple : var Resultat = 5 + 8: // Résultat contient 13 Var V1=2, V2 = 4, V3 = 2; Resultat = ( V1 + V2 ) * V3; // Résultat contient 12

9 Les opérateurs arithmétiques 57 Simplification de l'écriture des calculs. Exemple : var Nombre = 2; Nombre = Nombre + 5; Ecriture équivalente : Nombre += 5; S'applique sur tous les opérateurs ; += // ajoute une valeur à une variable -= // soustrait une valeur à une variable *= // multiplie une variable par une valeur /= // divise une variable par une valeur %= // affect à une variable le modulo de cette variable avec un nombre Attention, ce raccourci d écriture est à utiliser avec précaution, il peut parfois rendre la lecture du code plus difficile.

10 Les opérateurs arithmétiques 58 Priorité des Opérateurs Arithmétiques En JavaScript, les opérateurs ont plusieurs niveaux de priorités. Les expressions sont évaluées de la gauche vers la droite tant que les opérateurs ont le même niveau. S il y a des opérateurs de priorités différentes, les opérateurs ayant la priorité laplusélevéesont évalués en premier. La multiplication et la division ont un niveau de priorité plus élevé que l addition et la soustraction. Donc attention à l écriture des expressions arithmétiques. Pour contrôler leseffetsde priorité, utilisez toujours les parenthèses afin de contrôler l'ordre d'exécution des opérations.

11 Les opérateurs unaires 59 Il existe également des opérateurs utilisant une seule opérande, se sont les opérateurs unaires : Exemples : ++ incrémentation d une valeur -- décrémentation d une valeur - inversion du signe d une valeur var Somme = 34; // la variable somme contient 34 Somme++; // la variable somme contient 35 Somme--; // la variable somme contient 34 Somme = -Somme; // la variable somme contient t -34

12 Concaténation Conversion de type 60 Particularité de l'opérateur + : En plus de faire des additions, cet opérateur permet de faire des opérations sur les chaines de caractères : la concaténation. Elle consiste à ajouter une chaine de caractères à la fin d'une autre. Exemple : var Chaine1 = 'bonjour', Chaine2 = 'le monde'; var Chaine3 = Chaine1 + " " + Chaine2; // Chaine3 contient "bonjour le monde" On peut évidement utiliser également l'opérateur += sur les chaines de caractères Exemple : var Chaine = 'Bonjour '; Chaine += 'le monde'; // Chaine contient "Bonjour le monde"

13 Conversion de type 61 Attention au type des variables lorsque vous utilisez l'opérateur + Exemple 1 : var Chaine = "Voici le résultat de 2x4 : ", Res; Res = Chaine + 2*4; Alert(Res); Exemple 2 : var V1, V2, resultat; V1 = prompt('entrez le premier nombre :'); // Saisie d'une chaine de caractères dans V1 V2 = prompt('entrez p le second nombre :'); // Saisie d'une chaine de caractères dans V2 resultat = V1 + V2; // Addition des deux variables dans resultat alert(resultat); // Affichage du résultat

14 Conversion de type 62 Attention au type des variables lorsque vous utilisez l'opérateur + Exemple 3 : var V1, V2, resultat; V1 = prompt(entrez prompt('entrez le premier nombre :'); :); V2 = prompt('entrez le second nombre :'); resultat = V1 * V2; alert(resultat);

15 Conversion de type 63 Afin de lever l'ambiguïté nous devons convertir les chaines de caractères en nombre. Nous avons à notre disposition les fonctions suivantes: parseint() Chaine entier parsefloat() Chaine flottant Exemple 2 : var V1, V2, resultat; V1 = prompt('entrez le premier nombre :'); // Saisie d'une chaine de caractères dans V1 V2 = prompt('entrez le second nombre :'); // Saisie d'une chaine de caractères dans V2 resultat = parseint(v1) + parseint(v2); // Addition des deux variables dans resultat // avec la conversion des chaines en entiers alert(resultat); // Affichage du résultat

16 Conversion de type 64 Conversion d'un nombre en chaine de caractères est généralement pris en charge naturellement par JavaScript lors d'affichage avec par exemple la fonction alert. Dans certains cas il peut être nécessaire de placer un nombre dans une chaine de caractère. L'objet number possède plusieurs méthodes permettant la conversion des nombres en chaines de caractères (plus loin dans ce cours) Une astuce simple permet de forcer la conversion d'un nombre dans une chaine : Exemple var Chaine, N1 = 10, N2 = 5; Chaine = '' + N1 + N2; alert(chaine); Chaine = N1 + N2; alert(chaine); // la chaine vide '' force la concaténation // Il n'y a pas de chaine à droite du = l'addition est // arithmétique

17 Les constantes 65 Il est parfois nécessaire de définir une valeur une seule fois pour l'utiliser en lecture sans jamais la modifier. JavaScript propose pour cela le mot-clé const. Exemple : const PI = ; On ne peut affecter une valeur à une constante que lors de sa déclaration. Le code suivant ne fonctionnera pas : const Chaine; Chaine = "Bonjour"; alert(chaine); La boite de dialogue d'alerte affichera : undefined car la deuxième ligne n'a aucun effet.

18 Les conditions 66 Les conditions sont basées sur les booléens. Une condition sera vraie ou fausse (true, false). Une condition est le résultat d'une comparaison. Si la comparaison est vrai la condition recevra true sinon false. var Condition = false, A = 2, B = 2, C = 5; Condition = (A == B); alert(condition); Condition = (A == C); alert(condition); // affichage de true // affichage de false Opérateurs de comparaison == égal à Signification!= différent de === contenu et type égal à!== contenu et type différent de > supérieur à >= supérieur ou égal à < inférieur à <= Inférieur ou égal à

19 Les conditions 67 Nous avons également des opérateurs permettant de combiner les conditions. Les opérateurs logiques : Exemples : var C1, C2 = true, C3 = true, C4 = false; Opérateurs logiques Type logique && ET OU! NON C1 = C2 && C3; C1 = C2 && C4; C1 = C2 C4; C1 =!C2; C1 =!(C2 && C4); // C1 true // C1 false // C1 true // C1 false // C1 true Combinaisons des opérateurs : var A = 2, B = 4, C = 4; C1 = (A == B) && (B == 4); C1 = (A == B) (B == C); // C1 false // C1 true

20 Structure de contrôle if 68 Première structure de contrôle : if On exécute des instructions si une condition est vrai. Syntaxe : if ( condition ) {... Bloc d'instructions si condition = true Condition est un booléen. Ce booléen peut être une variable ou une expression composée de variables et d'opérateurs de comparaisons ou d'opérateurs logiques. Exemple : if (A >= 2) { alert ( "La variable A est plus grande ou égale à 2 ");

21 Structure de contrôle if else 69 Seconde structure de contrôle : if else Si la condition est vrai on exécute un bloc d'instructions sinon on exécute un autre bloc d'instructions. Syntaxe : if ( expression ) {... Instructions exécutées si expression = Vrai else {... Instructions exécutées si expression = faux Exemple : if ( A==0 ) { alert ( " La variable A est égale à zéro "); else { alert ( " La variable A est différente de zéro ");

22 Structure de contrôle if else if 70 Seconde structure de contrôle : if else if Si la condition est vrai on exécute un bloc d'instruction sinon on exécute un autre bloc d'instructions. Syntaxe : if ( expression ) {... Instructions exécutées si expression = vrai else if ( expression2 ){... Instructions exécutées si expression2 = vrai et expression = faux else {... Instructions exécutées si expression2 = faux et expression = faux Exemple : if ( A==0 ) { alert ( " La variable A est égale à zéro "); else if ( A > 0 ) { alert ( " La variable A est supérieur à zéro"); else { alert ( " La variable A est inférieur à zéro ");

23 Structure de contrôle switch 71 Lorsque l'on doit choisir plusieurs traitements en fonction de différentes valeurs contenues dans une variable la structure de contrôle switch est plus adaptée que le if else if Syntaxe du switch : Exemple : switch ( variable ) { switch (choix) { case Première_valeur(s) : case 1 :... Instruction; function_un(); [break;] break; case Seconde_valeur(s) : case 2 5 :... Instruction; function_ Deux_ ou_ Cinq(); [break;] break; defaut: case Derniére_valeur(s) : function_autre();... Instruction; [break;] default:... Instructions;

24 Boucle while (...) Les boucles Elles utilisent un test conditionnel comme l instruction if else Toutefois, il n'y à qu'un seul bloc de code, qui est exécuté aussi longtemps que la condition est vraie. La plus simple des boucles commence par tester une condition. Si la condition est vraie le bloc est exécuté, puis la condition est testée de nouveau. On quitte la boucle lorsque la condition n'est plus vrai. Exemple: Cette boucle sera exécutée 10 fois. Nb = 0; // initialisation de la variable Nb while( Nb < 10) { // Test si Nb est inférieur à 10 Nb++; // exécution du bloc, ici on incrémente la // variable

25 Boucle do... while (...) 73 La boucle do while Dans l exemple précédent, si la condition est immédiatement fausse, le code à l intérieur de la boucle n est jamais exécuté. Lorsqu il est nécessaire que la boucle soit exécutée au moins une fois on utilise la boucle do while. Dans ce cas la condition est évaluée à la fin de la boucle, donc la première évaluation de la condition est réalisée après la première itération de la boucle. Exemple: Nb = 0; do { Nb++; while( Nb < 10);

26 Boucle for 74 La boucle for Plutôt que de tester une condition, la boucle for exécute un bloc de code un nombre de fois déterminé. Sa structure : for ( valeur_initiale ; condition ; modification_valeur_courante) { Généralement on associe à une boucle for au moins une variable de boucle, initialisé avec une valeur de début. Cette variable est alors testée dans la condition de poursuitedela boucle. Afin de progresser dans la boucle cette variable et modifiée à chaque itération (modification valeur courante). Exemple: for ( var i=0 ; i < 10 ; i++) { document.writeln( I= + i + Bonjour <br> );

27 Les ternaires 75 L unique Opérateurs ternaire de JavaScript Les opérateurs vus précédemment avaient une ou deux opérandes. Il existe un opérateur avec trois opérandes qui est parfois nommé opérateur condition. Exemple: var Nb = 1.0; var resultat = ( Nb > 0.5 )? " Valeur supérieure à 0,5 " : " Valeur inférieur ou égale à 0,5 " ; Si la condition est vrai l opérateur retourne la deuxième opérande sinon il retourne la troisième opérande. C est un raccourci par rapport à l utilisation d un bloc if else

28 Les Fonctions 76 Une fonction est un objet contenant une suite d'instructions assurant une tâche à laquelle on fourni éventuellement des paramètres ou arguments. A l'issue de son exécution elle retournera éventuellement un résultat. On utilise généralement les fonctions pour des traitements répétitifs. Pour pouvoir utiliser une fonction il faut avant tout la déclarer. Syntaxe : function Nom_ De_ La_ Fonction (p param1,,p param2,...,p paramx) ){... Instructions... return ( résultat ); // optionnel

29 Les Fonctions 77 Attention lors de l'utilisation des variables dans les fonctions. Exemples : var Texte = "Bonjour le monde"; function Affiche () { alert( Texte); Affiche(); function Affiche () { () { var Texte = "Bonjour le monde"; Affiche(); alert ( Texte );

30 Les Fonctions 78 Portée des variables : Dans le premier code la variable Texte est globale, elle est accessible dans tous le code JavaScript de la page. Dans le second code la variable Texte est déclarée dans la fonction, elle appartient à la fonction. C'est une variable locale, seul le code de la fonction peut accéder à cette variable. Une variable locale dans une fonction sera prioritaire sur une variable globale de même nom ATTENTION : l'utilisation des variables globales peut apporter des disfonctionnements dans vos programmes si vous ne faire pas attention au risque de confusion de variables. En règle générale on évitera d'utiliser des variables globales. Si vous utiliser une variable globale, rester vigilant et nommez vos variables de manière à éviter toutes ambiguïtés. Par exemple, appliquer la règle simple : préfixez toute les variables globales avec G_ var G_Texte = "bonjour le monde";

31 Les Fonctions 79 Les arguments : Ils ne sont pas obligatoires. Exemple : Remarque function : Test il est () possible { de remplacer le test if (typeof argumentoptionnel === 'undefined') Si plusieurs arguments : ils sont séparés par des virgules, Exemple : par function Test ( parametre1, parametre2 ) { if ( agumentoptionnel ) { On peut ajouter des // arguments traitement si optionnel l'argument fin existe de liste de paramètre, mais attention le code de la fonction doit else{ tester la validité des arguments optionnels : // traitement si l'argument n'existe pas Exemple : function Test (argument1, argumentoptionnel ){ if (typeof argumentoptionnel === 'undefined' ) { // traitement pour le cas de l'argument optionnel vide else { // traitement de l'argument optionnel

32 Les Fonctions 80 Les arguments : Différentes formes d'appel de la fonction test Avec tous les arguments : Exemple : function Test (10,15) ; Avec seulement le premier argument : Exemple : function Test (10) ; Avec seulement le second argument : Exemple : function Test (undefined,15) ; Attention la fonction Test doit évidement vérifier la présence de chaque argument. Solution souvent utilisée pour gérer plusieurs fonctionnalités différentes en fonction des arguments présent ou absent. Permet souvent de limiter le nombre de fonctions dans un projet, mais demande une grande rigueur sur la gestion de la présence des arguments.

33 Les Fonctions 81 La porté des arguments : Les arguments sont des variables locales aux fonctions. On déclare les arguments lors de la déclaration de la fonction, ils appartiennent à la fonction et sont des variables locales. Ces variables ne sont accessibles que dans la fonction. Exemple : function Affiche_somme ( N1, N2){ alert ( N1 + N2 ); var N1 = 0, N2 = 1; Affiche_somme ( N1, N2); Affiche_somme (5,4);

34 Les Fonctions 82 Les valeurs de retour : Une fonction ne peut retourner d'une seule et unique valeur ou variable. Si on doit retourner plusieurs valeurs, il faut retourner un tableau ou une structure de donnée telle qu'un objet. Pour retourner une valeur ou une variable on utilise le mot-clé return(); Attention : on quitte la fonction juste après l'exécution de l'instruction return(); Exemple : function Demo()[ return("démo"); // on quitte la fonction en retournant le texte "Démo" alert ("Fin de la fonction"); // cette instruction ne sera jamais exécutée alert ( Demo() ); // on affiche le texte "Démo"