Partie III : JavaScript Djamel Seriai seriai@ensm-douai.fr csl.ensm-douia.fr/seriai

Partie III : JavaScript Djamel Seriai seriai@ensm-douai.fr http://csl.ensm-douia.fr/seriai

Plan • Plan • Introduction • HTML et JavaScript • Entrée et sortie de données avec JavaScript • La structure • Les variables • Expressions et opérateurs • Les expressions régulières • Les instructions • Les fonctions • Les objets • Les événements • Les cookies

Introduction (1) • Introduction • Les programmes Javascript permettent de rendre dynamique un site internet développé par le langage HTML. • Le langage Javascript permet de développer de véritables applications fonctionnant exclusivement dans le cadre d'Internet. • Le Javascript est un langage de script simplifié orienté objet dont la syntaxe est basée sur celle du Java. • Le langage Javascript a été initialement élaboré par Netscape en association avec Sun Microsystem. • Plus tard, Microsoft développera son propre langage Javascript officiellement connu sous le nom de JScript.

Introduction (2) • Introduction • Contrairement à un applet Java qui est un programme compilé, les scripts écrits en Javascript sont interprétés • Le Java, représenté par un ou plusieurs fichiers autonomes dont l'extension sera *.class ou *.jar, est invoqué par une balise HTML spécifique • Le JavaScript est écrit directement au sein du document HTML sous forme d'un script encadré par des balises HTML spéciales. • Tout comme, le langage HTML ou les feuilles de style, le Javascript est standardisé par un comité spécialisé, en l'occurrence l'ECMA (European Computer Manufactures Association).

HTML et JavaScript (1) • HTML et JavaScript • Quel que soit le mode d'insertion utilisé, la page HTML devra TOUJOURS contenir les deux balises spécifiques et indispensables • Le code JavaScript s’intègre de deux manière avec le code HTML • Insertion directe avec le code HTML • Le code JavaScript s'insère le plus souvent dans la page HTML elle même. • C'est la méthode la plus simple et la plus fréquemment utilisée par les développeurs de sites Internet. • Insertion comme un module externe <script language="JavaScript">............</script>

HTML et JavaScript (2) • HTML et JavaScript • Insertion dans la page HTML • Il existe trois manières d'insérer du code JavaScript dans une page HTML • Insertion pour exécution directe • Insertion pour exécution différée • Insertion à l'intérieur d'une balise HTML • On peut utiliser l'une ou l'autre de ces trois manières d'insérer du code JavaScript dans une page HTML, ou bien les trois en même temps dans la même page.

HTML et JavaScript (3) • HTML et JavaScript • Insertion dans la page HTML • Exécution directe • Le code s'exécute automatiquement lors du chargement de la page HTML dans le navigateur avant même que le contenu de la page HTML ne s'affiche à l'écran. • Le code JavaScript est placé dans le corps même de la page HTML, entre les balises <body> .......... et ......... </body> • VoirUnExemple <html> <head><title> .......... </title></head> <body> <script language="JavaScript">place du code JavaScript</script> </body></html>

HTML et JavaScript (4) • HTML et JavaScript • Insertion dans la page HTML • Exécution différée • Le code javascript est d'abord lu par le navigateur, stocké en mémoire, pour ne s'exécuter que sur demande. • Le code JavaScript est placé dans le corps même de la page HTML, entre les balises <head> .......... et ......... </head> • Le code s'exécutera seulement lors d'un événement généré par intervention de l'utilisateur. • Il faut écrire le code correspondant à cet événement dans le corps du document HTML. • Voir Un Exemple <html> <head> <title> .......... </title> <script language="JavaScript">place du code JavaScript</script> </head> <body> place du code événement</body> </html>

HTML et JavaScript (5) • HTML et JavaScript • Insertion dans la page HTML • Insertion de code JavaScript à l'intérieur d'une balise HTML • Le code JavaScript peut être inséré directement au niveau de balises HTML qui acceptent de réagir à des événements, comme : • Le chargement de la page HTML (événement onLoad) • la fermeture de la page HTML en cours (événement onUnload). • Voir Un Exemple <html> <head> <title> .......... </title> <script language="JavaScript">(cet emplacement peut être vide, le code est dans la balise. Mais il est indispensable, car il indique au navigateur qu'il va devoir interpréter du code JavaScript.)</script> </head> <body> <balise html événement=javascript:place du code événement </body> </html>

HTML et JavaScript (6) • HTML et JavaScript • Insertion du code JavaScript par appel de module externe • On peut insérer du code JavaScript en faisant appel à un module externe se trouvant à n’importe quelle adresse (URI). • Les deux balises de Javascript doivent être placés entre les Tags <body> et </body> dans le cas d'une exécution directe ou entre les Tags <head> et </head> de la page HTML pour une exécution différée. • Permet de simplifier la maintenance des sites faisant appel à des modules JavaScript communs à plusieurs pages HTML. • L'inconvénient, est que l'appel au code externe génère une requête supplémentaire vers le serveur, et encombre le réseau. Alors que l'utilisation de JavaScript permet justement de soulager le réseau en remplaçant les appels aux programmes CGI. <script src="URL du module externe">............</script>

HTML et JavaScript (7) • HTML et JavaScript • Insertion du code JavaScript par appel de module externe • Rédaction du module externe • Un module externe contenant un script JavaScript doit être écrit selon les mêmes contraintes que lorsqu'on l'insère directement dans la page HTML. • En particulier, il est écrit et surtout stocké à son adresse d'appel sous forme de TEXTE SIMPLE portant l'extension .txt ou .js

HTML et JavaScript (8) • HTML et JavaScript • Insertion du code JavaScript par appel de module externe • Appel de module externe à exécution directe. • Les Tags <script> et </script>, sont placés entre les balises <body> .......... et ......... </body> • Le code du module externe s'exécute automatiquement lors du chargement de la page HTML dans le navigateur. • Voir un exemple <html> <head><title> .......... </title></head> <body> <script src="URL_du_module_externe">(il n'y a alors plus besoin d'écrire de commandes ici, elles sont dans le module externe)</script> </body></html>

HTML et JavaScript (9) • HTML et JavaScript • Insertion du code JavaScript par appel de module externe • Exécution différée par appel d'un module externe. • Les Tags <script> et </script>, sont placés entre les balises <head> .......... et ......... </head> • Voir un exemple <html> <head> <title> .......... </title> <script src="URL_du_module_externe">(il n'y a alors plus besoin d'écrire de commandes ici, elles sont dans le module externe)</script> </head> <body> place du code événement</body> </html>

Entrée et sortie de données avec JavaScript (1) • Entrée et sortie de données avec JavaScript • Trois types de boites de messages peuvent être affichés en utilisant Javascript : Alerte, Confirmation et Invite • Méthode alert() • La méthode alert() sert à afficher à l’utilisateur des informations simples de type texte. Une fois que ce dernier a lu le message, il doit cliquer sur OK pour faire disparaître la boîte • Voir un exemple <html><head> <title> une page simple </title> <script language =" javascript "> alert (" une alerte déclenchée par le script ! "); alert (" un second message apparaît ! "); </script> </head> <body> </body>/html>

Entrée et sortie de données avec JavaScript (2) • Entrée et sortie de données avec JavaScript • Méthode confirm() • La méthode confirm() permet à l’utilisateur de choisir entre les boutons OK et Annuler. • Voir un exemple <html> <head> <title> une page simple </title> <script language =" javascript "> confirm( (" quel bouton allez-vous choisir ? "); </script> </head> <body> </body> /html>

Entrée et sortie de données avec JavaScript (3) • Entrée et sortie de données avec JavaScript • Méthode prompt() • La méthode prompt() permet à l’utilisateur de taper son propre message en réponse à la question posée • Voir un exemple <html> <head> <title> une page simple </title> <script language =" javascript "> prompt( (" quel est votre nom ? " , " Indiquer votre nom ici" ); </script> </head> <body> </body> /html>

La structure d’un script en JavaScript (1) • La structure • Origine • La syntaxe du langage Javascript s'appuie sur le modèle de Basic, Java et C • Règles générales • L'insertion des espaces peut s'effectué n'importe où dans le script //Dans ce cas les deux méthodes sont correctes var identificateur="Valeur"; var identificateur = "Valeur"; var initialisation = i + 1; //Par contre ici le mot-clé var. var initialisation=i+1; //ne peut être accroché à l'identificateur. document.write (" Chapitre"); //Cette méthode est correct. document.write ( "Chapitre" ); //Celle-ci l'est également. document . write ( "Chapitre" ); //Ici ce n'est pas bon !

La structure d’un script en JavaScript (2) • La structure • Règles générales • Chaque commande doit être terminée par un point-virgule (;). • Un nombre à virgule flottante est séparé par un point (.) et non pas par une virgule var increment = i+1; var jour = "Lundi"; if (choix == "non"){ document.write('Votre choix est l\'abandon'); } var PI = 3.141592654; var prix = 2.50; nb = 5.3 * 14.025;

La structure d’un script en JavaScript (3) • La structure • Règles générales • Le langage Javascript y est sensible à la casse • Il existe deux méthodes permettant d'intégrer des commentaires à vos scripts. • Placer un double slash (//) devant le texte • Encadrer le texte par un slash suivi d'une étoile (/*) et la même séquence inversée (*/) var START = "début"; var Start = "un"; var start = 0; var log = LOG10E; var racine = SQRT2; var image = "fond.gif"; //image de fond if (x=2) //redirection vers la seconde page{ url = ("page2.html");} else{ //sinon retourne à la page d'accueil url = ("accueil.html");}

Les variables (1) • Les variables • Déclaration et affectation • Le mot-clé var permet de déclarer une ou plusieurs variables. • Après la déclaration de la variable, il est possible de lui affecter une valeur par l'intermédiaire du signe d'égalité (=). • Si une valeur est affectée à une variable sans que cette dernière ne soit déclarée, alors Javascript la déclare automatiquement. //Déclaration de i, de j et de k. var i, j, k; //Affectation de i. i = 1; //Déclaration et affectation de prix. var prix = 0; //Déclaration et affectation de caractere var caractere = ["a", "b", "c"];

Les variables (2) • Les variables • Déclaration et affectation • La lecture d'une variable non déclarée provoque une erreur • Une variable correctement déclarée mais dont aucune valeur n'est affectée, est indéfinie (undefined). • La portée • Dans le langage Javascript, les variables peuvent être globales ou locales. • Une variable globale est déclarée en début de script et est accessible à n'importe quel endroit du programme. • Une variable locale est déclarée à l'intérieur d'une fonction et n'est utilisable que dans la fonction elle-même. var int = 0 //Variable globale. function(){ var i = 1; //Variable locale. ...}

Les variables (3) • Les variables • Contraintes concernant les noms de variables • Les noms de variables ne peuvent contenir que des lettres, chiffres, ou le caractère "_" (underscore) • Mon_Prenom est un nom valide • Les caractères spéciaux et accentués sont interdits (é, à, ç, ï, etc..) • Mon_Prénom n'est pas un nom valide. Il y a un caractère accentué. • Les majuscules et les minuscules ont leur importance. • MonPrenom est différent de Monprenom. • Un nom de variable ne peut contenir d'espaces. • Mon Prenom n'est pas un nom de variable correct. Il y a un espace. • Les mots réservés JavaScript ne peuvent être utilisés comme noms de variable. • var, ne peut être un nom de variable par exemple.

Les variables (4) • Les variables • Remarques • On peut afficher la valeur d’une variable en utilisant la méthode alert() • On assigner une valeur à une variable en utilisant la méthode prompt() • Voir un exemple <html><head> <title> une page simple </title> <script language =" javascript "> nom_visiteur = prompt( (" quel est votre nom ? " , " Indiquer votre nom ici" ); alert(nom_visiteur); </script> </head> <body></body>/html>

Les variables (5) • Types de valeurs (de variables) • Le type d’une variable dépend de la valeur stockée dans cette variable. Pas de déclaration de type. • Exemple : • La valeur "Philippe" étant mise entre guillemets, indique à l'interpréteur JavaScript que la valeur "Philippe" est de type "String" (chaîne de caractères). • La variable MonPrenom, tant qu'elle contiendra la valeur "Philippe" aura le type "String" (chaîne de caractères). Et ceci jusqu'à ce qu'on décide de lui donner une valeur différente. • Javascript distingue trois principaux types de valeurs : • String • Number • Deux types de Number : 10^-308 >nombre < 10^308 • Les nombres entiers • les nombres décimaux en virgule flottante (00.5 : génère une erreur) • Boolean

Les variables (6) • Types de valeurs (de variables) • Le type Number possède aussi cinq valeurs spéciales • Positive Infinity ou +Infinity (valeur infini positive) • Negative Infinity ou –Infinity (valeur infinie négative) • Positive zero ou +0 (valeur nulle positive) • Negative zero ou –0 (valeur nulle négative) • Nan (Not a Number) habituellement générée comme résultat d’une opération mathamatique incohérente, comme la division d’un nombre par zéro • JavaScript inclut aussi deux types de données spéciaux : • Null : possède une seule valeur, null, qui signifie l’absence e données dans une variable • Undefined : possède une seule valeur, undifined. Une variable dont le contenu n’est pas clair car elle n’a jamais stocké de valeur, pas même null est dite non définie (undifined).

Les variables (7) • Les littéraux • Les littéraux sont employés pour représenter des valeurs dans JavaScript. • Les tableaux de littéraux • Un littéral de tableau est une liste de zéro ou plusieurs expressions, dont chacune représente un élément du tableau • Lors de la création d'un tableau employant un littéral de tableau, il est initialisé avec les valeurs indiquées comme ses éléments et sa longueur est calculé selon le nombre d'arguments indiqués. "une chaîne de caractères" true 2.789 'une autre chaîne de caractères' 0x26 semaine ["lundi","mardi","mercredi","jeudi", "vendredi","samedi","dimanche"] nom ['Marc','Ludovic',,,'Angélique']

Les variables (8) • Les littéraux • Les littéraux booléens • Le type booléen a deux valeurs littérales : true (vrai) et false (faux). • Ne confondez pas les valeurs primitives booléennes true et false avec les valeurs de l'objet Boolean(). • Les littéraux à virgule flottante • Un littéral de virgule flottante doit avoir au moins un chiffre et/ou bien un point décimal et/ou bien un e ou E. var ouverte = true; var fermee = false; porte [ouverte, fermee]; var on = true; var off = false;lumiere [on, off] 1.2165 -3.5E9 2e-14 125.245E12

Les variables (9) • Les littéraux • Les littéraux entiers • Les entiers peuvent être exprimés en décimal (base 10), hexadécimal (base 16) et octal (base 8). • Un littéral entier décimal consiste en une séquence de chiffres situé entre 0 et 9. • Des entiers hexadécimaux peuvent inclure des chiffres de 0 à 9 et les lettres a-f et A-F. • Des entiers octaux peuvent inclure seulement les chiffres 0-7.

Littéraux décimaux Littéraux hexadécimaux Littéraux octaux 0x0 00 0 0x1 01 1 0x2 02 2 0x3 03 3 0x4 04 4 0x5 05 5 0x6 06 6 0x7 07 7 0x8 010 8 0x9 011 9 0xA 012 10 0xB 013 11 0xC 014 12 0xD 015 13 0xE 016 14 0xF 017 15

Les variables (11) • Les littéraux • Les littéraux objets • Un littéral objet est une liste de zéro ou plusieurs de couples de noms de propriété et les valeurs associées d'un objet, entouré par des accolades ({}). var monnaie = "deutschmark"; function numeraire(nom) { if(nom == "euro") return nom; else return "Désolé, la monnaie euopéenne n'est pas " + nom + ".";} nouveau = { france: "franc", europe: numeraire("euro"), allemagne: monnaie, angleterre: "livre" }; document.write(nouveau.france); // franc document.write(nouveau.allemagne); // deutschmark document.write(nouveau.europe); // euro document.write(nouveau.angleterre); // livre

Les variables (12) • Les littéraux • Les littéraux chaînes de caractères • Un littéral chaîne de caractères est composé de zéro à plusieurs caractères entourés de guillemets doubles (") ou simples ('). • Une chaîne de caractères doit être délimitée par les guillemets du même type, c'est-à-dire soit deux guillemets simples, soit deux guillemets doubles. "Obtenir \"une récompense\" pour l\'originalité de votre site" "Décompactage dans : \n\t C:\\temp\\" 'Attention ! \r Un problème est survenu ! \r Relancez votre navigateur !' "Disque de platine " "Retour vers la page d'accueil" 'Disquette 3.5"'

Caractère Description Un caractère en arrière \b Saut de page \f Saut de ligne \n Retour chariot \r Tabulation \t Apostrophe ou guillemet simple \' Guillemet double \" Backslash (\) \\ Séquence octale \XXX Séquence hexadécimale \xXX Séquence Unicode. \uXXXX • Ss

Les variables (13) • Les littéraux • Les opérations sur les chaînes • La concaténation • Var chaine = « bonjour » + « FI3/FCD1 »; • Déterminer la longueur d’une chaîne • Var ch1 = « bonjour »; • Var longueur = ch1.length; • Identifier le nième caractère d’une chaîne • Var ch1 =« Rebonjour ! »; • Var carac = ch1.charAt(2); • Extraction d’une partie de la chaîne • Var dateDuJour = « 04/04/03 » • Var mois = datteDuJour.substring(3, 5); • 3: est l’indice du premier caractère de la sou-chaîne à extraire • 5 : indice du dernier caractère à prendre en considération ; ce caractère ne fera pas partie de la sous-chaîne à extraire

abstractbooleanbreakbytecasecatchcharclassconstcontinuedebuggerdefaultdeletedodoubleabstractbooleanbreakbytecasecatchcharclassconstcontinuedebuggerdefaultdeletedodouble elseenumexportextendsfalsefinalfinallyfloatforfunctiongotoifimplementsimportin instanceofintinterfacelongnativenewnullpackageprivateprotectedpublicreturnshortstaticsuper switchsynchronizedthisthrowthrowstransienttruetrytypeofvarvoidvolatilewhilewith Les variables (14) • Les mots réservés • Plusieurs mots sont réservés à un emploi bien précis dans Javascript. • ces mots clés ne peuvent être utilisés pour dénommer un identificateur. Mots réservés /*Formules à éviter impérativement !*/ var true = "vrai"; var goto = "Retour à la page d'accueil"; var final = dernier - 1;

Type d'expression Description Exemple Correspond à un nombre réel ou entier Arithmétique i + 1;prix = 20.50; Correspond aux valeurs logiques true et false Logique choix = true;faux = false; Correspond à une séquence de lettres ou de chiffres. Chaîne de caractères adresse = "1 av. Raspail";cp = "75000"; Expressions et opérateurs (1) • Expressions et opérateurs • Les expressions • Permettent d'évaluer, par l'intermédiaire des opérateurs Javascript, différentes valeurs ou variables littérales.

Expressions et opérateurs (2) • Expressions et opérateurs • Les opérateurs • Les opérateurs d'affectation • Un opérateur d'affectation assigne la valeur de l'opérande gauche basé sur la valeur de l'opérande droite. • Les opérateurs arithmétiques • Les opérateurs arithmétiques prennent des valeurs numériques (des littéraux ou des variables) comme opérandes et renvoient une valeur numérique. • Les opérateurs arithmétiques standards sont l'addition (+), la soustraction (-), la multiplication (*), et la division (/). • Les opérateurs de comparaisons • Les opérandes peuvent être des valeurs numériques ou des chaînes de caractères.

Raccourci Opération Description y est affecté à x x = y y est additionné à x x += y x = x + y y est soustrait de x x -= y x = x - y x est multiplié par y x *= y x = x * y x est divisé par y x /= y x = x / y le reste de x/y est affecté à x x %= y x = x % y x est décalé de y bits vers la gauche x <<= y x = x << y x est décalé de y bits vers la droite x >>= y x = x >> y x est décalé de y bits vers la droite avec extension de zéros x >>>= y x = x >>> y Opération logique ET sur des entiers au niveau du bit x &= y x = x & y Opération logique OU EXCLUSIF sur des entiers au niveau du bit x ^= y x = x ^ y Opération logique OU sur des entiers au niveau du bit x |= y x = x | y

Opérateur Description Exemple L'opérateur modulo retourne le reste de la division x/y x % y 20 % 3 //retourne 2 Cet opérateur unaire permet l'incrémentation de la valeur x x ++* i++ //équivaut à i=i+1 Cet opérateur unaire permet la décrémentation de la valeur x x --* i-- //équivaut à i=i-1 Cet opérateur unaire retourne la valeur inverse à x - x i = 1-i //renvoie donc -1i = -5-i // renvoie donc 5 * Si l'un de ses opérateurs est placé avant la variable, alors la valeur de la variable sera incrémentée (++) ou décrémentée (--) avant son utilisation. Par exemple pour i=0, i++ donnera 0 et ++i donnera 1 de même que i-- donnera 0 et --i donnera -1. La structure

Opérateur Description Exemples Si la valeur y est égale à x, l'opérateur retourne true. Dans ce cas, si le type de donnée ne correspond pas alors Javascript tentera de convertir les opérandes dans le type approprié afin d'effectuer la comparaison. if (choix == 1)...; x == y Si la valeur y est différente de x, l'opérateur retourne true if (valeur != prix) x != y Si la valeur de y est strictement égale (valeur et type) à x, alors l'opérateur retourne true if (paragraphe = texte) x === y Si la valeur de y est strictement différente à x, l'opérateur retourne true if (ref !== "A000000") x !== y Si la valeur de y est supérieure à x, l'opérateur retourne true if (montant > 1500) x > y Si la valeur de y est supérieure ou égale à x, l'opérateur retourne true if (hab >= pop) x >= y Si la valeur de y est inférieure à x, l'opérateur retourne true if (numero < page) x < y Si la valeur de y est inférieure ou égale à x, l'opérateur retourne if (fin <= premier) x <= y

Expressions et opérateurs (6) • Expressions et opérateurs • Les opérateurs • Les opérateurs au niveau du bit • Au niveau du bit les opérateurs traitent leurs opérandes comme ensemble de 32 bits, plutôt qu'en tant que nombres décimaux, hexadécimaux, ou octals. • Par exemple, le numéro décimal neuf a une représentation binaire de 1001.

Opérateur Usage Description Exemple Chaque position binaire de l'opérande x est comparée avec la position correspondante de l'opérande y. Dans ce cas, si un 1 est trouvé dans l'une ou l'autre des opérandes, alors l'opérateur retourne un 1, sinon il renvoie un 0. AND x & y 1101 & 0111 //retourne 01010001 & 1000 //retourne 00001001 & 0001 //retourne 0001 Chaque position binaire de l'opérande x est comparée avec la position correspondante de l'opérande y. Dans ce cas, si un 1 est trouvé dans les deux opérandes soit dans l'une, soit dans l'autre, alors l'opérateur retourne un 1, sinon il renvoie un 0. OR x | y 1101 | 0111 //retourne 11110001 | 1000 //retourne 10011001 | 0001 //retourne 1001 Cette opérateur OU EXCLUSIF fonctionne comme le précédent à la seule exception que le 1 ne doit se trouver que dans l'une ou l'autre des opérandes pour produire le résultat 1 sinon il renvoie un 0. XOR x ^ y 1101 ^ 0111 //retourne 10100001 ^ 1000 //retourne 10011001 ^ 0001 //retourne 1000 L'opérateur unaire NOT retourne un 0 lorsque l'opérande contient un 1 et un 1 pour un 0. NOT ~ a ~1101 //retourne 0010~0001 //retourne 1110~1001 //retourne 0110

Opérateur Usage Description Exemple Cet opérateur déplace la représentation binaire de x de n bits à gauche. La valeur de ces n bits est de zéro. Décalage à gauche x << n 15 << 2 //0000 1111 décalé de 2 bits produit 0011 1100 et donc retourne 60 Cet opérateur déplace la représentation binaire de x de n bits à droite et conserve le signe. Décalage à droiteavec préservation du signe x >> n 15 >> 2 //0000 1111 décalé de 2 bits produit 0000 0011 et donc retourne 3-15 >> 2 //1111 0001 décalé de 2 bits produit 1111 1100 et donc retourne -4 Cet opérateur décale la première opérande du nombre n indiqué de bits vers la droite. Des bits excédents décalés en dehors vers la droite sont rejetés. Les bits à zéro sont décalés vers la gauche. En fait, cet opérateur donne les mêmes résultats que le précédent (>>). Décalage à droiteavec extension de zéros x >>> n 11 >>> 2 //0000 1011 décalé de 2 bits produit 0000 0010 et donc retourne 2

Expressions et opérateurs (9) • Expressions et opérateurs • Les opérateurs • Les opérateurs booléens • Les opérateurs logiques sont typiquement utilisés avec des valeurs booléennes; quand elles le sont, ils renvoient une valeur booléenne. • Cependant, les opérateurs && et || renvoient réellement la valeur de l'une des opérandes indiquées, ainsi si ces opérateurs sont utilisés avec des valeurs non-booléennes, ils peuvent renvoyer une valeur non-booléenne.

Opérateur Usage Description Exemple L'opérateur renvoie x, s' il peut être converti en false; autrement, retourne y. Ainsi, une fois utilisé avec des valeurs booléennes, le && renvoie true si les deux opérandes sont vraies; autrement, il retourne false. AND x && y (a < 10) && (b > 10)//Si a et b sont inférieures à 10, l'opérateur retourne true L'opérateur renvoie x s' il peut être converti en true; sinon il retourne y. Ainsi, une fois utilisé avec des valeurs booléennes, l'opérateur || renvoie true si l'une ou l'autre des opérandes est vraie ou si toutes les deux sont fausses, sinon il retourne false. OU x || y (a >= 1) || (b == "fin")//Si a est supérieur ou égal à 1 ou/et si b est égal à finalors l'opérateur renvoie true, sinon il retourne false L'opérateur renvoie false si son unique opérande peut être convertie en true, sinon il retourne false. NOT !x !(a <= 100)//Si a est inférieur ou égal à 100 alors l'opérateur retourne false, sinon il renvoie true.

Expressions et opérateurs (11) • Expressions et opérateurs • Les opérateurs • Les opérateurs de concaténations • L'opérateur d'enchaînement + permet d'enchaîner deux valeurs de chaînes de caractères ensemble, en renvoyant une autre qui est le résultat de la concaténation des deux opérandes. • L'opérateur d'affectation + = peut également être utilisé pour enchaîner des chaînes de caractères. • Le contenu de la variable est concaténé à l'opérande de droite. "mon" + "programme"; //retourne "mon programme " texte = "Un programme"; texte_2 = "Javascript " ; texte += texte_2; //retourne "Un programme Javascript"

Expressions et opérateurs (12) • Expressions et opérateurs • Les opérateurs • L'opérateur conditionnel • L'opérateur conditionnel est le seul opérateur du langage JavaScript qui utilise trois opérandes. • L'opérateur ternaire fonctionne comme une instruction if... else. Si la condition initiale renvoie true, alors la première instruction est exécutée sinon la deuxième est activée. Condition ? Instruction_1 : Instruction_2; (i < 10)?v = true:v = false; (jour == "Lundi") ? (document.write("Bonne reprise du travail !")) : (document.write("Bon courage !")) (Prix >= 100) ? (Diff_pos = Prix - 100) : (Diff_neg = 100 - Prix);

Expressions et opérateurs (13) • Expressions et opérateurs • Les opérateurs • L’opérateur In • La propriété in retourne true si la propriété indiquée est dans l'objet donnée, sinon elle retourne false. • L’opérateur Instanceof • Cette propriété retourne true si l'objet spécifié est du même type que l'opérande de droite: objet instanceof objet_type Tab = ["un", "deux", "trois", "quatre", "cinq"]; 3 in Tab //retourne true car la propriété 3 est bien dans l'objet Tab acos(x) in Math //retourne true car la propriété acos(x) est bien dans l'objet Math 6 in Tab//retourne false car le tableau ne contient pas plus de cinq cellules /*anniversaire est du type date (année, mois, jour, heure, minute)*/ var anniversaire = new date(2000, 1, 1, 0, 0) //retourne true puisque anniversaire est du type date anniversaire instanceof date

Expressions et opérateurs (14) • Expressions et opérateurs • Les opérateurs • L’opérateur New • L'opérateur new est utilisé pour créer une nouvelle instance ou un nouveau type d'objet défini par l'utilisateur ou de l'un des types d'objets prédéfinis, Array, Boolean, Date, Function, Image, Number, Object, Option, RegExp, ou String. • nouvel_objet = new type_objet(litteral_1,...) • L’opérateur This • Cette propriété est utilisé pour faire référence à un objet courant. • Ceci permet d'accéder à un objet sans passer par son identificateur. • this.nom_propriete texte = new String("Une chaîne de caractère"); window.document.forms[0].elements[1] nom //dénomination complète de l'objet nom this.nom//raccourci vers l'élément nom

Expressions et opérateurs (15) • Expressions et opérateurs • Les opérateurs • L’opérateur Typeof • typeof (opérande); • L'opérateur typeof renvoie une chaîne de caractères indiquant quel est le type de l'opérande. • Les parenthèses sont optionnels. var i = 1; typeof i; //retourne number var titre="Les raisins de la colère"; typeof titre; //retourne string var jour = new Date(); typeof jour; //retourne object var choix = true; typeof choix; //retourne boolean var cas = null; typeof cas; //retourne object typeof parseFloat; //retourne function typeof Math; //retourne object (IE 5.*, NS 6.*, NS 4.78, Opera 6.*, Opera 5.* typeof Math;//retourne function NS 3.*, Opera 3.*

Expressions et opérateurs (16) • Expressions et opérateurs • Les opérateurs • L’opérateur virgule • L'opérateur virgule, évalue ses deux opérandes et renvoie la valeur de la deuxième. • Cet opérateur est principalement utilisé à l'intérieur d'une boucle for, pour permettre à des variables multiples d'être mises à jour chaque fois par l'intermédiaire de la boucle. • Exemple : si "Tab" est un tableau à deux dimensions avec 10 éléments de chaque côté, le code sur le transparent suivant utilise l'opérateur virgule pour incrémenter deux variables en même temps. Le code imprime les valeurs des éléments diagonaux dans le tableau.

Partie III : JavaScript Djamel Seriai seriai@ensm-douai.fr csl.ensm-douia.fr/seriai