v Outils pour développer en JavaScript
- NotePad++
-> Extension TextFX => Auto-fermeture ; nettoyer un document importé de Word ;…
- Les EDI : Dreamweaver ; Aptana Studio ;…
v Tester la compatibilité
-> FireFox; Google Chrome; Safari; Opera; IE;…
v Outils de débogage
IE: ‘Outils de développement’ (F12)
Chrome : ‘Outils de développement’ (Ctrl+Maj+I ou J)
FireFox : ‘Outils de développement’ (Ctrl+Maj+I ou J)
-> Ajouter des Extensions de développement Web à Firefox : ‘Outils’ –> ‘Modules complémentaires’
-> ‘Catalogue’ -> ‘Parcourir tous les modules complémentaires ‘ -> ‘Développement Web’ ->
Par exemple : Firebug ; Live HTTP Headers (voir les échanges avec le serveur) ;
CodeBurner for Firebug ; JSView ; Phoenix (voir les scripts et les CSS chargés)
v Firebug (F12 ou Ctrl+F12)
‘Console’ => tester du code ;
‘Réseau’ => Voir le temps de chargement des éléments de la page entre-autre
Bouton-droit sur un élément de la page -> ‘inspecter un élément’
v Tester du Code JS
Enregistrer sous Html et l’ouvrir dans un navigateur ;
Test dans l’IDE
Créer soi-même une page web qui permet de faire des tests
En mode ligne de commande :
-> ‘Outils de développement’ des navigateurs
-> Firebug (pour FireFox) : ‘Console’ -> ‘Afficher l’éditeur de commande’
v Références :
W3Scools
MDN
help.dottoro.com
v Variables
Les fonctions, Tableaux, expressions régulières sont de type Object
=> On peut écrire par exemple : var F1 = function() { Instructions ;… } ; F1.Propriété1 = valeur ;
n Déclaration litérale
Var i = 5 ; => Number
Var txt1 = ‘Nom’ ; =>String
Var bool1 = true ; =>Boolean
Var Tab1 = [] ; ou var Tab1 = [2, ‘prenom’, function() {}] ; =>Tableau indicé
Var Obj1 = {} ; ou var Obj1= {Prop1 : 5, Prop3 : {}, Prop2 :’Texte’ } => Object
Var Reg1 = // ; => Expression régulière
n Déclaration des variables avec les constructeurs
Un constructeur est une fonction membre de la classe -de même nom- qui permet de l’instancier .
Exemple : var N1 = new Number() ; (N est un objet, Instance de type Number)
var txt1 = new String() ;
var F1 = new Function() ;
var B1 = new Boolean() ;
var Tab1 = new Array() ;
var Obj1 = new Object() ;
var Reg1 = new RegExp() ;
n Portée des variables
Une variable en JavaScript peut être locale -déclarée à l’intérieur d’une fonction- ou globale -déclarée à l’extérieur des fonctions-
n Déclarer une fonction et l’exécuter au moment de son interprétation
-> On entoure la déclaration de la fonction de parenthèses et on ajoute (paramètres)
ou () à la fin :
( Function Fct1() { Instructions ;… } ) () ;
n Nommer des variables dynamiquement
F On utilise l’objet Window qui correspond au contexte global de la page web
Exemple : var i=1 ;
window[‘x’+i] = 5 ; => vas créer une variable x1 de valeur initiale 5.
On peut déclarer ou accéder à une variable globale à l’aide de l’objet window ; exemple :
Window.txt1 = ‘texte’ crée une variable globale txt1
v Les Opérateurs
n Les Opérateurs d’affectations
F = , + , - , * , %
+ sert à additionner des nombre mais aussi des chaines de caractères (concaténation).
% : Modulo => reste de la division ; exemple :
5 % 2 -> 1 ; 4 % 2 -> 0
Il peut servir par exemple à déterminer si un nombre est pair ou impair.
i += a est équivalente à i = i + a ; de même pour -= , *= et %=
Incrémentation : ++i et i++ équivaut à i = i + 1
n Les Opérateurs de comparaison
F == , === , > , < , <= , >=, != , !==
== et != ne prend pas en compte le type de la variable alors que === et !== oui ; exemple :
5 == ‘5’ renvoie true alors que 5 === ‘5’ renvoie false
n Les Opérateurs logiques
F && (ET logique) , ǀǀ (OU logique) , ! (NON)
0 , ‘ ’ , NaN , Undefined , Null sont considérés comme valeur False dans des expressions logiques.
n Les Opérateurs binaires
F << , >> , & , ǀ ,…
Il s’agit de comparaison bit à bit. En développement web, ils sont très peu utilisés
n Les Opérateurs spéciaux
F Function , New , Typeof , This , Instanceof , in
L’opérateur in permet de tester si une propriété est définie dans un objet
v Les structures de contrôle
n If/else
if( condition ) {
...
} else {
...
}
L’opérateur ternaire ?
C’est une sorte de raccourcie de if-else ; exemple :
Var i = 5 ;
i == 5 ? alert(‘oui’) : alert(‘non’) ;
n Switch / case
var chaine = (...);
switch( chaine ) {
case "une chaine":
alert("La variable chaine est égale à 'une chaine'");
break;
case "une autre chaine":
alert("La variable chaine est égale à 'une autre chaine'");
break;
default:
alert("La variable chaine est différente de"
+ " 'une chaine' et 'une autre chaine'");
}
n La boocle For
for( var cpt=0; cpt<10; cpt++ ) {
alert("Valeur du compteur: "+cpt);
}
For – In
Exemple :
var tableauIndexe = {
"cle1": "valeur1",
"cle2": "valeur2"
};
for( var cle in tableau ) {
alert("Valeur pour la clé "+cle+": "+tableau[cle]);
}
n La boocle While
while( condition de fin ) {
(...)
}
Exemple :
var nombre = 0;
while( nombre < 10 ) {
nombre++;
}
Do - While
C’est une variante de la précédente, qui permet d’exécuter le bloc avant
la première condition.
do {
(...)
} while( condition de fin );
Exemple :
var nombre = 0;
do {
nombre++;
} while( nombre < 10 );
Break / Continue
Break offre la possibilité d’arrêter l’itération d’une boucle et de sortir de son bloc d’exécution, et Continue de forcer le passage à l’itération suivante.
n Try – Catch
Dans l’exemple suivant nous faisons volontairement appel à une méthode testException inexistante afin
de déclencher une exception:
try {
testException(); //Cette méthode est inexistante!
} catch(error) {
alert("Une exception a été levée");
alert("Nom de l’exception levée : "+error.name);
alert("Message de l’exception levée : "+error.message);
} finally {
alert("Passage dans finally");
}
n Throw
Throw est utilisée pour lancer une exception afin de signaler une erreur. Exemple :
try {
throw new Error("test");
} catch(error) {
alert("Une exception a été levée");
alert("Nom de l’exception levée : "+error.name);
alert("Message de l’exception levée : "+error.message);
}
n Les labels
Ce sont des étiquettes qui aident à se repérer ou renvoyer à des emplacements particuliers du code.
v Les objets
n Boolean
n Number
Attention aux nombres flottants!
Exemples : - 0.2+0.3 == 0.5 donne false !
- 66*0.5 = 33 : juste mais 66*0.05 ne donne pas exactement 3.3 alors que 66*5/100 oui
Arrondir un nombre
F La méthode toFixed:
x.toFixed(ncs) ; x : nombre à arrondir ; ncs : nombre de chiffres significatifs
Convertir un nombre en chaine de caractères
F La méthode toString :
x.toString(base) ; x : nombre à convertir ; base : 2 -> binaire, 16 -> hexadécimale, …
=> Convertisseur de bases
n String
Déclaration d’une chaine de caractères
On peut déclarer un chaine de caractères de 2 manières qui sont équivalentes :
Var txt1 = new String('texte1') ;
Var txt2 = "texte2 " ;
" comme caractère
F on utilise \"
Retour chariot
F on utilise \n ou \r ou les deux
Nombre de caractères d’une chaine
F propriété .length
Le caractère à une position i d’une chaine
F La méthode .charAt ( i ) ; !Ø L’indice i commence à 0
F La méthode charCodeAt ( i ) renvoie la représentation Unicode du caractère
Position d’une sous-chaine
F La méthode .indexOf( texte, j ) ; texte : la sous-chaine à chercher,
(Facultatif) j : la position à partir de laquelle on va chercher
!Ø Elle renvoie le rang de la 1ère sous-chaine trouvée
Exemple : Var txt = 'Bonjour' ;
Txt.indexOf ('o') ; => renvoie 1. ('B' est à la position 0)
Si le texte n’est pas trouvé, la méthode renvoie -1.
F La méthode .lastIndexOf( texte) ; => renvoie la position de la dernière occurrence.
Transformer un code en caractère
F La méthode String.fromCharCode ( code1,code2,…)
Concaténer plusieurs caractères
F La méthode String.concat(c1,c2,…) Ø On obtient le même résultat avec c1+c2+…
Extraire une sous-chaine
F Les méthodes .slice (debut,fin) , .substring (debut,fin) , et substr(debut,nc)
Ø .slice (-n) renvoie les n derniers caractères
La méthode match
La méthode match retourne les différentes sous-chaînes de caractères correspondant à l’expression régulière dans la chaîne de caractères initiale. Le code suivant illustre l’utilisation de cette méthode :
var chaine = "Bonjour le monde";
chaine.match(/o/g); => renvoie le tableau o,o,o
Ø g (global) est un commutateur pour faire la recherche sur toute la chaine
chaine.match(/[a-z]/g); => renvoie le tableau de toutes les lettres miniscules
La méthode search
La méthode search retourne la position de la première occurrence correspondant à
l’expression régulière. Elle s’utilise comme dans le code suivant :
var chaine = "Bonjour le monde";
chaine.search(/\w/g); => renvoie 0
La méthode replace
La méthode replace permet de remplacer le premier élément correspondant à l’expression
régulière spécifiée. Le code suivant illustre son utilisation :
var chaine = "Bonjour le monde";
chaine.replace('Bonjour', 'Hello'); => renvoie Hello le monde
Ø Le 2ème paramètre de replace peut être une fonction !
n Array
2 façons de déclarer un tableau :
Var tab1 = new Array() ;
Var tab2 = [] ; (ou [5, true, function(){}, [1, 2, 'a' ] ] )
!Ø Le paramètre de Array est interprété selon son type :
Var tab3 = new Array(5) ; => renvoie un tableau de 5 éléments
Var tab4 = new Array('5') ; => renvoie un tableau de 1 élément qui est le caractère '5'
Modifier ou ajouter un élément au tableau à une position donnée
tab1 [i] = valeur ;
Supprimer le dernier élément du tableau
F La méthode.pop ()
Ø Cette méthode renvoie l’élément supprimé
Supprimer le premier élément du tableau
F La méthode.shift ()
Ajouter des éléments à la fin du tableau
F La méthode .push(vi+1,vi+2,…)
Ø Cette méthode renvoie la dimension du tableau après ajout .
Ajouter des éléments au début du tableau
F La méthode .unshift(v-1,v-2,…)
Inverser l’ordre d’un tableau
F La méthode .reverse()
Trier un tableau
F La méthode .sort ()
!Ø Sans paramètre, le tri se fait dans l’ordre alphabétique, pour affiner le tri, on peut utiliser une fonction comme paramètre et qui fixe les conditions de tri.
Supprimer des éléments et insérer d’autres à leur place
F La méthode .splice(p,nes,e1,e2,…)
P : position du 1er élément à supprimer, nes :nombre d’éléments à supprimer, e1,e2,… : éléments à insérer.
n Object
2 façons de créer un objet :
Var obj1 = new Object() ;
Var obj2 = {} ;
Savoir si une propriété est propre à l’objet ou elle est hérité d’un objet global
F La méthode .hasOwnProperty('propriété')
Savoir la fonction constructeur d’un objet
F La méthode .constructor
Ajouter des méthodes et propriétés à un objet
F Classe.prototype.
Exemple : Array.prototype.Shift_Pop = function() {
This.pop() ;
This.shift() ;
}
n Date
Créer un objet date :
Var d = new Date(param) ; param peut être le nombre de millisecondes écoulés depuis 01-01-1970 à 00:00 ou la date en format string
Sans paramètre, la valeur initiale de d est la date et heure courante.
Afficher la date en format string
F La méthode .toLocaleString() ;
L’année en cours
F La méthode .getFullYear()
Le mois en cours
F La méthode . getMonth()
Le jours du mois en cours
F La méthode . getDate()
Le jours de la semaine en cours
F La méthode . getDay()
La date en millisecondes (écoulés depuis 01-01-1970 à 00:00)
F La méthode . getTime()
Décalage horaire par rapport à l’heure GMT
F La méthode getTimezoneOffset()
Date sous forme de chaînes de caractères en utilisant les paramètres
régionaux
F La méthode toLocaleString ()
L’Heure dans le format locale
F La méthode toLocaleTimeString ()
Fixer une date
F On remplace get par set dans les méthodes précédentes,
n Math
Ø La classe Math (comme Global) est préinstanciée
La valeur absolue
F La méthode . Abs(x)
Les fonctions trigonométriques
F Les méthodes . cos(x), sin(x), tan(x), acos(x), asin(x), atan(x)
x : en radian
L’exponentiel et logarithme
F La méthode . exp(x) et log(x)
Arrondir un nombre
F Les méthodes .
ceil(x) => renvoie le nombre immédiatement supérieur
floor(x) => renvoie le nombre immédiatement inférieur
round(x) => renvoie le nombre le plus proche
var nombre = 34.567;
alert("Ceil : "+Math.ceil(nombre)); // Affiche 35
alert("Floor : "+Math.floor(nombre)); // Affiche 34
alert("Round : "+Math.round(nombre)); // Affiche 35
Maximum et minimum d’un ensemble de nombre
F La méthode . Max(x1,x2,…) et Min(x1,x2,…)
La constante e
F Math.E
La constante p
F Math.PI
n Global
Ø La classe Global (comme Math) est préinstanciée
Les fonctions d’encodage
F Les méthodes escape, unescape
Exemple : escape('éà') renvoie %E9%E0
Et unescape('%E9%E0') renvoie éà
La méthode eval
Permet d’interpréter une chaîne de caractères contenant du JavaScript
Extraire un nombre d’une chaine de caractère
F Les méthodes parseInt, parseFloat
Vérifier si une valeur est numérique
F Les méthodes isNaN (v) et isFinite (v);
n Les objets du DOM (Model objet de document)
Tous les éléments d’une page web sont structurés en un ensemble d’objets sous forme d’une arborescence qu’on appelle DOM (Model objet de document). Le DOM est créé au moment de l’interprétation de la page web par le navigateur. Une fois créé, on peut manipuler les objets du DOM à l’aide de JavaScript.
Exemples :
Modifier le contenu des valises
Supposant qu’on a dans une page les balises suivantes :
<div id="div1"> </div>
<textarea id="txt1"> </textarea>
document.getElementById('div1').innerHTML += ' balise div ' ;
document.getElementById('txt1').value = ' balise textarea ';
Modifier les propriétés CSS d’un élément de la page
Exemples :
document.getElementById('ID de l’élément').style.width = ' 100px '
document.getElementById('ID de l’élément').style.height= ' 52px '
document.getElementById('ID de l’élément').style.backgroundColor= ' blue '
…
Associer une fonction à un événement
Exemples :
document.getElementById('ID de l’élément').onclick = maFonction1 (référence)
!Ø Si on ajoute () à maFonction1 :
document.getElementById('ID de l’élément').onclick = maFonction1 ()
c’est la valeur retournée par maFonction1 qui sera affecté à onclick et non pas la fonction.
Ajouter une balise script dynamiquement
function addJS(){
if(document.getElementById('ajout')) { document.getElementById('ajout').parentNode.removeChild(document.getElementById('ajout'));
}
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.text = ' le contenu du script '; //
newScript.id = 'ajout';
document.getElementsByTagName('head')[0].appendChild(newScript);
}
Ø Visiualiser le DOM
F Firebug et son module complémentaire DOM Inspector
site.remarques@gmail.com