Nous allons maintenant apprendre à intégrer le javascript dans une page HTML. Les éléments HTML sont presque tous manipulables par javascript, ce qui permet de modifier dynamiquement tous les éléments d'une page.
Javascript utilise une synthaxe orientée objet avec les éléments de programmation et les éléments du browser.
Les objets javascript sont des variables auxquelles on adjoint des propriétés et des méthodes. Les propriétés sont des valeurs, les méthodes sont des fonctions en relation avec les propriétés.
Il existe trois classes d'objets javascript: les objets intrinsèques (Array, Date, Math, String), les objets du browser (window, document, forms, ...) et les objets créés par script.
Pour définir une classe d'objets, il faut la construire, avec le mot-clé function. On appelle une classe d'objet, la description générale de cet objet, et une instance d'un objet, un objet en particulier. Par exemple, dans le monde réel, une classe d'objet est "les voitures", et un objet en particulier est "ma voiture". La classe d'objet a des propriétés, comme "la couleur", et l'instance d'un objet a une valeur de propriété, comme "rouge".
Dans javascript on appelle les propriétés et les méthodes avec le symbole-clé "." (point), de la manière suivante: objet.propriété ou objet.méthode().
Par exemple, définissons la classe car, avec les propriétés color et speed et la méthode accelerate(). La méthode accelerate() fait varier speed.
| // construction de la classe car function car(color, speed) { this.color = color; this.speed = speed; this.accelerate = accelerate } // construction de la méthode accelerate() |
Pour utiliser cette classe d'objets il faut ensuite créer une nouvelle instance de cet objet avec le mot-clé new.
|
Javascript
|
Résultat
|
|---|---|
| // création d'une instance de car // myCar est rouge et //a une vitesse de 100km/h var myCar; myCar = new car ("red", 100); // affichage de la couleur |
|
| // acceleration de 20 km/h myCar.accelerate(20); // affichage de la vitesse finale document.write(myCar.speed); |
Quatre classes d'objets sont déjà intégrée au javascript, avec leurs propriétés et de multiples méthodes: les chaînes de caractères String, les tableaux Array, les objets mathématiques Math, les dates Date. Pour chacune de ces classes intégrées, voici la déclaration et les plus importantes méthodes et propriétés. Pour plus de détails, rendez-vous aux références.
L'objet String permet de déclarer une chaîne de caractère quelconque.
| // déclaration d'une chaîne de caractère s = "bonjour mon ami!"; // équivalente |
|
Propriété
|
Description
|
|---|---|
| length | Longueur de la chaîne de caractères |
|
Méthode
|
Description
|
|---|---|
| big() | Formate la chaîne avec <b></b> |
| charAt() | Retourne le caractère situé à une certaine position, attention le premier caractère est à la position 0 |
| concat() | Concatène deux chaînes, équivalent de "+" |
| indexOf() | Retourne la position d'un caractère dans une chaîne |
| lastIndexOf() | Retourne la dernière position d'un caractère dans une chaîne |
| substr() | Retourne une portion de chaîne |
|
Javascript
|
Résultat
|
|---|---|
| // déclaration d'un string s = new String("bonjour !"); |
|
|
// affichage de s |
|
| // caractère à la 5ème position c5 = s.charAt(5); document.write(c5); |
L'objet Array permet de déclarer un tableau. Un tableau est un ensemble de valeurs dans une même variable.
| // déclaration d'un tableau a = new Array(); a[0] = "bonjour"; a[1] = "au-revoir"; // équivalente |
|
Propriété
|
Description
|
|---|---|
| length | Nombre d'éléments du tableau |
|
Méthode
|
Description
|
|---|---|
| concat() | Concatène deux tableaux |
| join() | Converti un tableau en chaîne de caractères |
| reverse() | Inverse le classement des éléments du tableau |
| slice() | Retourne une portion du tableau |
|
Javascript
|
Résultat
|
|---|---|
| // déclaration d'un tableau t = new Array("bonjour", "au-revoir", "salut"); |
|
|
// affichage du 1er élément |
|
| // inversion t = t.reverse(); document.write(t[0]); |
L'objet Math permet d'accéder aux principales fonctions et constantes mathématiques.
Un objet Math ne s'instancie jamais. On accède simplement à ses propriétés via Math.propriété et Math.objet().
|
Propriété
|
Description
|
|---|---|
| E | Constante d'Euler (~2.718...) |
| LN2 | Logarithme de 2 |
| PI | Pi (3.14159...) |
|
Méthode
|
Description
|
|---|---|
| abs() | Retourne la valeur absolue d'un nombre |
| ceil() | Retourne le plus petit entier supérieur à un nombre |
| sin(), cos(), tan() | Retourne les sinus, cosinus, tangente d'un nombre |
| pow() | Retourne un nombre à une certaine puissance |
| random() | Retourne un nombre aléatoire entre 0 et 1 |
| round() | Arrondi un nombre à l'entier le plus proche. |
| sqrt() | Retourne la racine carrée d'un nombre |
|
Javascript
|
Résultat
|
|---|---|
| // Pi document.write(Math.PI); |
|
|
// 2 puissance 3 |
|
| // nombre aléatoire document.write(Math.random()); |
| // déclaration d'une date d = new Date(); d = new Date(2004, 03, 01); |
L'objet Date ne possède pas de propriétés particulières.
|
Méthode
|
Description
|
|---|---|
| getDate() | Retourne le jour du mois stocké dans la date |
| getDay() | Retourne le jour de la semaine stocké dans la date |
| getFullYear() | Retourne l'année stocké dans la date |
| getMonth() | Retourne le mois stocké dans la date |
| setDate() | Remplace le jour stocké dans la date |
| setFullYear() | Remplace l'année stocké dans la date |
| setMonth() | Remplace le mois stocké dans la date |
| toGMTString() | Transforme la date avec la convention GMT |
|
Javascript
|
Résultat
|
|---|---|
| // déclaration d'une date d = new Date(2004, 03, 01); document.write(d); |
|
|
// autre mise en forme |
On peut appliquer la fonction toString() à n'importe quel objet.
Le DHTML (Dynamic HTML) est un nom donné au documents mélangeant le HTML, le Javascript et les feuilles de style CSS (Cascading Style Sheets, que nous verrons plus tard).
Tous les éléments du browser sont susceptibles d'être modifiés visuellement aux travers de Javascript. Malheureusement, le résultat n'est pas le même pour tous les browsers, il faut donc coder les script rigoureusement, et tester les scripts avec les différents browsers.
Le modèle objet de Javascript permet d'utiliser les objets du browser au travers de leurs propriétés et de leurs méthodes associées.
L'objet window est le plus haut dans la hiérarchie du modèle objets. Il correspond à la fenêtre du browser.
Pour faire référence au document affiché dans la fenêtre, on utilise la notation window.document
Etant donné que window est le plus haut dans la hierarchie, on peut ne pas y faire référence pour appeler une de ses propriétés, par exemple window.document peut être noté document
|
Propriété
|
Description
|
|---|---|
| defaultStatus | Message par défaut affiché dans la barre de statut |
| status | Message affiché dans la barre de statut |
| document | Document affiché dans la fenêtre |
| frames | Collection de cadres présents dans la fenêtre |
| history | Historique des pages visitées précédemment |
| location | Adresse de la page affichée |
| name | Nomd e la fenêtre |
| navigator | Référence au browser utilisé |
| parent | Fenêtre supérieure dans la hiérarchie |
| self | Fenêtre en cours |
|
Méthode
|
Description
|
|---|---|
| alert() | Affiche une fenêtre d'alerte Javascript |
| close() | Ferme la fenêtre |
| confirm() | Affiche une fenêtre de confirmation |
| moveBy() | Déplace la fenêtre d'une certaine distance |
| moveTo() | Déplace la fenêtre à un certain endroit |
| open() | Ouvre une nouvelle fenêtre |
| print() | Imprime le contenu de la fenêtre |
| resizeBy() | Redimensionne la fenêtre d'un certain facteur |
| resizeTo() | Redimensionne la fenêtre à une nouvelle taille |
| setTimeout() | Effectue une action après un lapse de temps |
|
Javascript
|
Résultat
|
|---|---|
| // Ouvre une nouvelle fenêtre // lors du click de souris <a href="javascript:window.open('js/test1.html')"> Ouvrir test1.html</a> |
Ouvrir test1.html |
|
// ouvre une fenêtre de confirmation |
Confirmer |
| // Ouvre une nouvelle fenêtre // lors du click de souris // à la taille 700x200 function openSized() { w=window.open("js/test2.html","", "width=700,height=550,top=100,left=100"); } <a href="javascript:openSized()"> |
L'objet document (window.document) se réfère au document affiché dans la fenêtre.
Les méthodes associées à l'objet document, comme open() et write() permettent de produire des pages hautement dynamiques. En effet, il n'est plus nécessaire d'ouvrir une page HTML pré-écrite, mais on peut la produire complétement par un javascript!
|
Propriété
|
Description
|
|---|---|
| cookie | Stockage d'information sous forme de cookies |
| domain | Nom de domaine du serveur |
| forms | Référence à la liste des formulaires dans le document |
| images | Référence à la liste des images dans le document |
| layers | Référence aux calques (<div></div>) du document. Attention cette propriété n'est pas active dans certains anciens browsers, comme Netscape 4. |
| links | Référence à la liste des liens dans le document |
| referrer | Référence à l'adresse de la page précédente |
| title | Titre du document |
Pour faire référence à une image précise dans un document, il faut d'abord attribuer un nom à cette image, avec l'option name du tag HTML <img>:
| <img src="image-source" name="image-name"> |
ensuite on peut se référer à cette image avec
| window.document.images["image-name"] |
|
Méthode
|
Description
|
|---|---|
| close() | Ferme le document en écriture |
| open() | Ouvre le document en écriture |
| write() | Ecris dans le document |
| writeIn() | Ecris dans le document et retour à la ligne |
|
Javascript
|
Résultat
|
|---|---|
| // Ouvre une nouvelle fenêtre // lors du click de souris // à la taille 700x200 function openWrite() { specs = "width=300, height=900, top=0, left=400"; head = "<html><head><link href=\"styles.css\" rel=\"stylesheet\" media=\"screen\"></head>" start = "<body><h1>Page dynamique</h1>"; footer = "</body></html>"; w = window.open("", "", specs); w.document.write(head); w.document.write(start); for (i = 1; i <= 100; i++) { w.document.write("<hr width=\""+i+"%\">"); } w.document.write(footer); w.document.close(); } <a href="javascript:openWrite()">Lancer le script</a> |
Le modèle objet de Javascript permet de gérer différents évènements associé à de l'utilisateur, comme le clic sur un élément, le déplacement du pointeur, la pression d'une touche du clavier, la modification d'une valeur de saisie...
Les évènements peuvent être directement déclarés dans les tags HTML, par exemple:
| <a href=" ", onMouseOver="function()"> |
ou alors dans un script Javascript, par exemple:
| document.images["image-name"].onmouseover = function() |
|
Gestionnaire
|
Description
|
|---|---|
| onClick | Déclenchement d'un clic de souris |
| onMouseDown | Déclenchement sur une pression de la souris |
| onMouseUp | Déclenchement sur le relâchement de la souris |
| onMouseMove | Déclenchement au déplacement de la souris |
| onMouseOver | Déclenchement au passage de la souris |
| onKeyPress | Déclenchement sur pression d'une touche |
|
Javascript
|
Résultat
|
|---|---|
| // Ouvre une nouvelle fenêtre // lors du click de souris function openImage(newSource) { document.images["anchor"].src = "images/" + newSource; } // --> </script> <a href="#" onmouseover="openImage('anchor1.jpg')" onmouseout="openImage('anchor.jpg')"> |
|
Ecrivez un script avec des fonctions qui fassent se déplacer une fenêtre selon différents mouvements, en cliquant sur des liens, comme ici ou ici
Ecrivez un script qui ouvre une nouvelle fenêtre et écrit dynamiquement un tableau des 1000 premiers carrés dedans, comme ici.
Pour bien assimiler les bases de Javascript voivi quelques mini-projets à chox pour les prochaines semaines:
