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

25
JavaScript M. Debacker et E. Leconte

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

Page 1: JavaScript M. Debacker et E. Leconte. Philosophie du JavaScript.

JavaScript

M. Debacker et E. Leconte

Page 2: JavaScript M. Debacker et E. Leconte. Philosophie du JavaScript.

Philosophie du JavaScript

Page 3: 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 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/

Page 4: JavaScript M. Debacker et E. Leconte. Philosophie du JavaScript.

Le JavaScript coté client

Page 5: JavaScript M. Debacker et E. Leconte. Philosophie du JavaScript.

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

Page 6: JavaScript M. Debacker et E. Leconte. Philosophie du JavaScript.
Page 7: JavaScript M. Debacker et E. Leconte. Philosophie du JavaScript.

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

Page 8: JavaScript M. Debacker et E. Leconte. Philosophie du JavaScript.

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.

Page 9: JavaScript M. Debacker et E. Leconte. Philosophie du JavaScript.

with

Facilité : utilisez with : with (document.forms.client) {

alert(nom.value);

prenom.disabled=true;

nom.style.fontStyle="italic";

} Remarque :

CSS : font-style JavaScript : fontStyle

Page 10: JavaScript M. Debacker et E. Leconte. Philosophie du JavaScript.

Evénements - 1

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 onfocusObtention du focus tout élément

Page 11: JavaScript M. Debacker et E. Leconte. Philosophie du JavaScript.

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

Page 12: JavaScript M. Debacker et E. Leconte. Philosophie du JavaScript.

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

Page 13: JavaScript M. Debacker et E. Leconte. Philosophie du JavaScript.

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

Page 14: JavaScript M. Debacker et E. Leconte. Philosophie du JavaScript.

Quelques classes prédéfinies

Page 15: JavaScript M. Debacker et E. Leconte. Philosophie du JavaScript.

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

Page 16: JavaScript M. Debacker et E. Leconte. Philosophie du JavaScript.

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

Page 17: JavaScript M. Debacker et E. Leconte. Philosophie du JavaScript.

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)

Page 18: JavaScript M. Debacker et E. Leconte. Philosophie du JavaScript.

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

Page 19: JavaScript M. Debacker et E. Leconte. Philosophie du JavaScript.

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.

Page 20: JavaScript M. Debacker et E. Leconte. Philosophie du JavaScript.

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]);

Page 21: JavaScript M. Debacker et E. Leconte. Philosophie du JavaScript.

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

Page 22: JavaScript M. Debacker et E. Leconte. Philosophie du JavaScript.

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+");

Page 23: JavaScript M. Debacker et E. Leconte. Philosophie du JavaScript.

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

Page 24: JavaScript M. Debacker et E. Leconte. Philosophie du JavaScript.

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 decodeURIvar s = "http://une chaîne"; var se = encodeURI(e);// se est "http://une%20cha%EEne"

Page 25: JavaScript M. Debacker et E. Leconte. Philosophie du JavaScript.

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