1 / 25

JavaScript

JavaScript. M. Debacker et E. Leconte. Philosophie du JavaScript. 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

hiroko
Download Presentation

JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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/

  4. Le JavaScript coté client

  5. Interaction avec le browser • JavaScript vous permet d’atteindre aisément les divers éléments de votre page. • L’objet window désigne la fenêtre ou le frame courant dans le browser. • Ses propriétés principales sont • document : la page contenue • location : l’adresse affichée • history : l’historique 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. Accès aux éléments • <form name="client" action="..." > Nom : <input name="nom" type="text"> Prénom : <input name="prenom" type="text"> <input type="submit" value="Enregistrer"> </form> • 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

  7. 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.

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

  9. Attribut Se produit si Objets onabort Chargement interrompu image onblur Perte de focus tout élément onchange Modification de contenu sélection ou texte onclick Click simple lien, bouton, radio, checkbox ondblclick Double-click lien, bouton, image, document onerror Erreur lors du chargement document, image onfocus Obtention du focus tout élément Evénements - 1

  10. Evénements - 2 • Attribut Se produit si Objets • onkeydown Une touche est enfoncée document, image, lien, texte • onkeypress Une touche est enfoncée/relâchée idem • onkeyup Une touche est relâchée idem • onload Fin du chargement document, image • onmousedown Un bouton de souris enfoncé document, image, lien, bouton • onmouseup Un bouton de la souris est relâché idem

  11. 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ément idem • 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 page window voir http://www.w3schools.com/jsref/jsref_events.asp

  12. 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 : • <body onload="handler();"> • Rappel : Unobtrusive JavaScript • Si l’événement provoque une action par défaut, renvoyer false dans le handler annule cette action • exemple : onsubmit

  13. Quelques classes prédéfinies

  14. 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();

  15. 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

  16. 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)

  17. typeof et instanceof • L’opé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".

  18. 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.

  19. Les classes Boolean , Number, Date • voir à ce sujet 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]);

  20. 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).

  21. 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 + "<br>"); }; • 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+");

  22. 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

  23. 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"

  24. 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

More Related