javascript m. debacker et e. leconte. philosophie du javascript
TRANSCRIPT
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/
Le JavaScript coté client
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
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
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.
with
Facilité : utilisez with : with (document.forms.client) {
alert(nom.value);
prenom.disabled=true;
nom.style.fontStyle="italic";
} Remarque :
CSS : font-style JavaScript : fontStyle
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
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
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
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
Quelques classes prédéfinies
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();
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
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)
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".
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.
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]);
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).
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+");
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
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"
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