JavaScript M. Debacker et E. Leconte. Philosophie du JavaScript.

Présentation au sujet: "JavaScript M. Debacker et E. Leconte. Philosophie du JavaScript."— Transcription de la présentation:

1 JavaScript M. Debacker et E. Leconte

2 Philosophie du JavaScript

3 Unobtrusive JavaScript Pour réaliser du Javascript "discret", il faut : séparer le JavaScript du HTML : fichiers.js extérieurs gestion des événements dans les.js pas dans le html que le contenu de la page reste disponible même si JavaScript n'est pas supporté ou désactivé. que le JavaScript ne réduise pas l'accessibilité (par exemple pour des handicapés) à la page voir http://www.webstandards.org/action/dstf/manifesto/ http://www.webstandards.org/action/dstf/manifesto/

4 Le JavaScript coté client

5 Interaction avec le browser JavaScript vous permet datteindre aisément les divers éléments de votre page. Lobjet window désigne la fenêtre ou le frame courant dans le browser. Ses propriétés principales sont document : la page contenue location : ladresse affichée history : lhistorique des pages visitées navigator : opener : la fenêtre qui a ouvert celle-ci status : la barre de statut frames[] : les frames la composant parent : la fenêtre parent si window est un frame … Utilisez. pour y accéder : window.document window est le défaut : document

6

7 Accès aux éléments Nom : Prénom : <input name="prenom" type="text"> document.forms.client.nom.value; // read/write document.forms.client.prenom.disabled=true; document.forms.client.nom.style.fontStyle="italic"; Utilisez des indices pour les éléments de même nom : document.forms.client.choix[0] si plusieurs radio boutons dont le name est choix

8 Deux syntaxes Deux syntaxes sont possibles : La notation "tableau associatif" la notation "propriété d'un objet" Exemple décriture : document.forms[0] // indexé par la position document.forms["client"] // indexé par le nom document.forms.client // notation objet (.) ou même document.client ! La dernière écriture n'est valable que pour les forms, applets et images.

9 with Facilité : utilisez with : with (document.forms.client) { alert(nom.value); prenom.disabled=true; nom.style.fontStyle="italic"; } Remarque : CSS : font-style JavaScript : fontStyle

10 Evénements - 1 AttributSe produit si Objets onabortChargement interrompu image onblurPerte de focus tout élément onchangeModification de contenu sélection ou texte onclickClick simplelien, bouton, radio, checkbox ondblclickDouble-clicklien, bouton, image, document onerrorErreur lors du chargement document, image onfocusObtention du focus tout élément

11 Evénements - 2 Attribut Se produit siObjets onkeydown Une touche est enfoncéedocument, image, lien, texte onkeypress Une touche est enfoncée/relâchéeidem onkeyup Une touche est relâchéeidem onload Fin du chargementdocument, image onmousedown Un bouton de souris enfoncé document, image, lien, bouton onmouseup Un bouton de la souris est relâchéidem

12 Evénements – 3 Attribut Se produit si Objet onmouseout La souris sort de l'élément lien, image, div onmouseover La souris se déplace sur l'élémentidem onreset Click sur le bouton reset form onresize Modification de taille window onselect Du texte est sélectionnétext, textarea onsubmit Click sur le bouton submit form onunload L'utilisateur quitte la pagewindow voir http://www.w3schools.com/jsref/jsref_events.asphttp://www.w3schools.com/jsref/jsref_events.asp

13 Handler d'événement – version classique On place une fonction comme handler d'événement comme suit : window.onload = handler; function handler() { alert("la page est chargée"); } Jamais comme ceci : Rappel : Unobtrusive JavaScript Si lévénement provoque une action par défaut, renvoyer false dans le handler annule cette action exemple : onsubmit

14 Quelques classes prédéfinies

15 La classe Window l'objet window en est une instance toutes ses propriétés sont valables pour les autres objets de cette classe création : var maFenetre = new Window(); ouverture : maFenetre.open(); maFenetre.open("URL", "nom");... fermeture : maFenetre.close();

16 opérations de timer Sur une fenêtre, on dispose des méthodes setTimeout et setInterval t = setTimeout(code, délai) code contient du code JavaScript (nom de fonction ou string) : il est exécuté à l'expiration du délai délai en millisecondes t = setInterval(code, intervalle) l'exécution de code est répétée toutes les intervalle millisecondes Aussi clearTimeout(t) et clearInterval(t) pour les arrêter ne s'exécutent que sur la page en cours

17 Object Classe de base de toutes les autres classes deux propriétés prototype constructor diverses méthodes dont toString valueOf (utile pour les types primitifs)

18 typeof et instanceof Lopérateur typeof renvoie "number", "string", "boolean, "object", "array", "function", "null" ou "undefined. L'opérateur instanceof indique si un objet est une instance de la classe renvoie toujours false si typeof ne renvoie pas "object".

19 la classe String var chaine = "coucou"; typeof string ; instanceof String false var string = String("coucou"); typeof string ; instanceof String false var str = new String("coucou"); typeof object ; instanceof String true définit tout une série de méthode "core" de manipulation des strings. définit aussi des méthodes "html" de présentation des strings.

20 Les classes Boolean, Number, Date voir à ce sujet http://www.w3schools.com/jsref/http://www.w3schools.com/jsref/ Number définit les constantes NaN, MIN_VALUE, MAX_VALUE, POSITIVE_INFINITY, NEGATIVE_INFINITY et des méthodes pour préciser le format du nombre (exp, précision, fixe) Date propose de nombreuses méthodes (get/set, …) Les méthodes to…String : toLocaleString, toLocaleDateString toLocaleTimeString, … La méthode parse convertit une chaîne en date mais n'est pas portable. le constructeur Date() : new Date(); new Date(millisecondes); new Date(chaîne); // non portable new Date(an, mois[, jour, heures, mins, secs, ms]);

21 la classe Array créer un tableau : var t = new Array(); aussi : var t = new Array("aa", ""bb", "cc"); longueur du tableau : t.length méthodes : shift(), unshift(), pop(), push(); reverse(), toString(), slice(), splice() concat() : renvoie un nouveau tableau var t3 = t1.concat(t2); join(séparateur) : concatène les éléments sous forme de string avec le séparateur indiqué (, par défaut).

22 la classe RegExp var re = new RegExp("expr", "g"); équivaut à var re = /expr/g; ex : /^\s+(\d)$/ équivaut à new RegExp("^\\s+(\\d)$"); while (true) { var res = re.exec("expr est une expression régulière"); if (res == null) break; document.write(res + " "); }; sans g, exec recommence chaque fois au début (=>pas boucler) exec() renvoie la chaîne trouvée en retenant la position afin de continuer la recherche. S'il y a des parenthèses capturantes, exec renvoie un tableau. Si elle ne trouve rien, renvoie null. test() renvoie vrai ou faux. Avec g on bouclera aussi. compile() précise une nouvelle expression régulière : re.compile("u+");

23 la classe Math Est préinstanciée Pas de constructeur Définit les constantes et les fonctions mathématiques usuelles Math.PI; Math.max(x, y); Math.random(); Exemple : un nombre entre 0 et 10 : Math.floor(Math.random()*11); un nombre entre 1 et 10 : Math.ceil(Math.random()*10); Référence : http://www.w3schools.com/jsref/jsref_obj_math.asp

24 La classe Global préinstantiée pas de constructeur utilisée implicitement méthodes : eval("chaîne contenant du code javascript"); parseInt, parseFloat is… (isArray, isBoolean, isEmpty, isFinite, isFunction, isNaN, isNull, isNumber, isObject, isString, isUndefined) escape, unescape : deprecated, remplacé par encodeURI et decodeURI var s = "http://une chaîne"; var se = encodeURI(e); // se est "http://une%20cha%EEne"

25 La classe Function ses objets sont les fonctions propriétés arguments la propriété callee d'arguments permet d'appeler une fonction anonyme récursivement var factorielle : function(n) { if (n <= 1) return 1; return n * arguments.callee(n-1); } length = nombre de paramètres déclarés prototype : voir séance prochaine méthodes call : fonction.call(objet, parm1, parm2, …) apply : fonction.apply(objet, params) elles sont utilisées dans la mise en œuvre de l'héritage