420-B63 Programmation Web Avancée Auteur : Frédéric Thériault 1.

Présentation au sujet: "420-B63 Programmation Web Avancée Auteur : Frédéric Thériault 1."— Transcription de la présentation:

1 420-B63 Programmation Web Avancée Auteur : Frédéric Thériault 1

2 Les variables Déclaration : var maVariable = 63; var maVariable = "cvm"; var maVariable = cvm; Les variables disparaissent avec la page. Pour conserver la valeur dune variable, utiliser un cookie. 2

3 Chaînes de caractères "double guillemet " Utilisé surtout pour les attributs des balises XHTML 'simple guillemet' Le plus fréquemment utilisé "" ou '': chaîne vide Exemple var vA = "L'homme " ; var vA = 'Citation: " il était… " ; 3

4 Les conditions Un peu comme Java: =, ==, ++, +=, ||, … var result = 55; if (result > 55) { alert(Pas mal !); } else if (result < 40) { alert(Oh non !); } else { alert(Ouf !); } 4

5 Comparaison chaîne de car. Comparativement à Java, on peut utiliser == Exemple: var nom = Roger"; if(nom == " Roger ") { document.write(Bonjour lami"); } else { document.write(Bonjour, + nom); } Pour faire une recherche insensible à la casse, utiliser : Nom.toLowerCase() == "Roger".toLowerCase() 5

6 Concaténation Opérateur « + » permet de : Additionner les nombres Concaténer les chaînes de caractères Exemple : 3 + 3 = w; 3 + 1 + "4" = x; 3 + "3" = y; var tmp = "3"; 3 + tmp = z; 6

7 Conversion Tous les champs dun formulaire sont des chaines! String à numérique parseInt (string) parseFloat (string) Exemple: var x = parseInt('42'); var x = parseInt(vNoCivique); var x = parseInt('42.33'); var x = parseFloat('42.33'); 7

8 Erreur de conversion Si la conversion ne peut être faite, les fonctions retournent 'NaN' NaN : not a number Ex.: var tmp = parseInt(myIntVar'); if( isNaN(tmp) ) { //erreur… } 8

9 Conversion (suite) Numérique à String toString() Exemple: var nombre = 2345; var chaine = nombre.toString(); 9

10 La fonction typeof Pour connaître le type dune entité string, number, boolean, undifined, object, function typeof(entité) Exemple: typeof(Bonjour) Retourne string var Nombre = 53 typeof(Nombre) Retourne number 10

11 Les fonctions Exemple : function message(msg1,msg2) { alert(msg1 + " " + msg2) } message ('alors', 'bonjour') 11

12 Les fonctions (suite) Appel des fonctions Lors dun événement : onclick="message(hey,bonjour)"; Dans une balise message ('alors', 'bonjour'); Dans une balise Pseudo-protocole Java- Script Bonjour 12

13 Les boucles Exemples : Boucle « while » : var valeur = 100; while (valeur > 0) { document.write(valeur + " "); valeur--; } Boucle « for » : for (var i = 0; i < 100; i++) { document.write(i + " "); } 13

14 Lelément « this » Référence sur lélément HTML appelant la fonction JavaScript Exemple: function modifier(elem) { elem.style.color = "blue"; } Un jour, je serai bleu 14

15 La gestion derreurs Permet de ne pas arrêter lexécution dun bloc Javascript lorsquil y a une erreur dans lexécution du script. try { fonctionInexistante(…); // déclenche une erreur. } catch(err) { alert(err); // affiche la description de lerreur } 15

16 Les « popups » JavaScript alert(message); alert(hey); prompt(message, valeurParDéfaut); Une zone de texte Deux boutons (ok et annuler) Retourne une chaîne de texte ou null si Annuler var resultat = prompt(Entrez votre âge, 30); confirm(message) if (confirm(Êtes-vous certain de vouloir supprimer cet élément) { … } 16

17 Autres fonctions JavaScript focus() Donne le focus à lélément de la page blur() Retire le focus dun élément de la page 17

18 Autres fonctions JavaScript (suite) open() Permet de créer une nouvelle fenêtre. var wndMaFenetre = open('URL', 'nom' [,options]) Retourne l'objet fenêtre créé ou null si n'a pas fonctionné. De moins en moins utilisé puisque les navigateurs les bloques close() Ferme une fenêtre ouverte. 18

19 Autres fonctions JavaScript (suite) setInterval() var idInterval = setInterval('fonction ou instructions', miliSecondes) Permet d'appeler une fonction ou d'exécuter une série d'instructions à toutes les miliSecondes. clearInterval() Terminer les appels clearInterval(idInterval) 19

20 Autres fonctions JavaScript (suite) setTimeout() var idTimeout = setTimeout('fonction ou instructions', miliSecondes) L'appel à la méthode déclanche un minuteur. Après miliSecondes la foncton ou à l'instructions est exécutée une fois (non cyclique). clearTimeout() Pour désactiver le minuteur s'il n'est pas arrivé à terme. clearTimeout(idTimeout); 20

21 Opérations sur les chaînes de caractères Pour avoir la longueur dune variable : Var tmp = test; alert(tmp.length); // 4 Pour avoir le caractère à une position x : Var tmp = test; alert(tmp.charAt(1)); // e Pour avoir le code ASCII dun caractère à la position x Var tmp = test; alert(tmp.charCodeAt(0)); // 116 21

22 Opérations sur les chaînes de caractères (suite) Pour faire une expression régulière : var pattern = /[a-zA-Z]/g;// sous la forme de /pattern/flags var strToCompare = "Roger Rabbit"; alert (strToCompare.match(pattern)); Si le pattern nest pas trouvé, alors la valeur retournée est null. Autrement, le premier « match » du pattern est retourné (ou un tableau, si /g est utilisé). 22

23 Les cookies Permet de laisser une information sur lordinateur de lusager. Ainsi, si on revient dans la même page Web ultérieurement, on peut avoir accès à cette information. Un cookie contient : Une date dexpiration Si aucune date nest spécifié, alors le cookie sera détruit lorsque le navigateur sera fermé Une paire nom/valeur contenant linformation Le cookie est accessible pour quel serveur/domaine Si rien nest spécifié, alors cest pour la page actuelle 23

24 Création dun cookie function createCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else { var expires = ""; } document.cookie = name+"="+value+expires+"; path=/"; } Donc : createCookie(nomVariable, valeur, nbJours) donnerait le résultat document.cookie = cookieNomUsager=Roger; expires=Fri, 3 Aug 2008 20:47:11 UTC; path=/' 24

25 Lecture dun cookie function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } 25

26 Suppression dun cookie function eraseCookie(name) { createCookie(name,"",-1); } - La suppression est tout simplement la création dun cookie dont la date est expiré. - Merci au site suivant pour les fonctions de manipulation de cookies : http://www.quirksmode.org/js/cookies.html 26

27 Les tableaux – création Exemple : var monTableau =new Array(); monTableau[0]=Marty"; monTableau[1]=Mc"; monTableau[2]=Fly";OU var monTableau = new Array(Marty",Mc",Fly"); 27

28 Les tableaux – ajouter un élément Push() Sajoute à la fin du tableau monTableau.push(monElement1, …); Splice() Permet, entre autre, dajouter un élément à une endroit spécifique du tableau monTableau.splice(2,0,"Elément à la position 3") Unshift() Ajoute un ou des éléments au début du tableau monTableau.unshift("Ajout au début") 28

29 Tableaux - suppression Shift() Supprime le premier élément dun tableau alert(monTableau.shift()); Pop() Supprime le dernier élément dun tableau alert(monTableau.pop()); Splice() Supprimer à partir dun index et pour x éléments monTableau.splice(2, 5); 29

30 Tableaux – Itération Il ny a pas déquivalent « foreach », mais pour voici un équivalent var monTableau = new Array(Marty,Mc,Fly); for ( var i in monTableau ) { alert( monTableau[i] ); } Autrement, il est toujours possible de faire les boucles « for » ou « while » pour parcourir un tableau 30