Chapitre 4 - Javascript

DAWEB/Javascript DAWEB/Javascript
+Le DOM (Document Object Model) : objet global représentant l'ensemble de la page HTML
Javascript actuellement affiché par le navigateur sous forme d'un arbre dont la racine est l'objet « document ».
Dans cette partie du cours, on s'intéresse à un langage qui permet de programmer dans le
navigateur ! En effet, le langage javascript est un langage coté client, ie il s'exécute dans le client 3. Le DOM
Web pas sur le serveur. Le DOM est une API qui permet d'accéder aux éléments HTML,
-d'en sélectionner des portions, de les modifier
-de modifier les propriétés CSS
1. Introduction -d'accéder au contenu texte des éléments HTML
En pratique c'est un arbre dont la racine est l'objet document, et les noeuds sont les balises de la
Le javascript est un langage interprété, qui ne donne pas lieu au processus habituel de page HTML représentée. Chaque balise de la page HTML est représentée par un noeud dans le
compilation/Edition de lien. L'avantage est qu'il n'est pas nécessaire de compiler/distribuer pour DOM. La balise fille 'BFille' contenue dans une la balise parente 'Bparent' dans la page HTML sera
chaque navigateur/système d'exploitation/processeur client. A la place, on a besoin juste d'un représentée dans le DOM par un objet OBFille dont le parent est l'objet OBParent qui représente la
interpréteur. Ce rôle est rempli par un composant du client HTTP, appelé moteur Javascript. balise Bparent. Les attributs HTML d'une balise deviennent de fait des attributs membres de l'objet
Les moteurs Javascript les plus connus sont (Carakan utilisé par Opéra), V8 de Google (utilisé par la représentant dans le DOM. Ainsi, l'objet head devient un objet fils de l'objet document ainsi que
Opéra 15+ et Google Chrome), Chakra (utilisé dans Internet Explorer), SpiderMonkey (utilisé dans l'objet body.
Firefox et toutes les applications Mozilla basée sur Geko) et JavaScriptCore (utilisé dans Safari). On peut parcourir les enfants de tout objet dans le DOM par des méthodes JS prédéfénie : firstChild
renvoie la référence du premier enfant d'un noeud, lastChild renvoie quant à elle la référence du
Javascript est un langage qui a été crée en 1995 par Brandan Eich de Netscape Communications et dernier objet fils. La liste des enfants directs est disponible dans une table/liste childNodes[i] où i
utilisé dans le navigateur « Netscape Navigator » puis dans Firefox (le successeur de Netscape dans [0..n] et n = childNodes.length()-1. On peut aussi connaître la référence du parent d'un noeud
Navigator). Aujourd'hui c'est le nom de l'implémentation d'un standard international appelé ECMA- avec la propriété spéciale parentNode.
62. D'autres implémentations de ce standard sont le langage Jscript de Microsoft dans IE et Ainsi document.body.firtChild.parentNode=document.body !
ActionScript, implémentation d'Adobe dans Flash.
Mais cette façon de parcourir le DOM n'est pas très aisée pour chercher et référencer un objet. D'où
l'intérêt des fonctions getElementById, getElementByTagNames, getElementsByClassName et
Javascript est un langage côté client, interprété (de script), orienté objet et à typage implicite (la autres qui permettent d'obtenir la référence d'un objet en connaissant seulement une de ses
première déclaration/affectation détermine le type d'une variable). caractéristiques (son id, son nom d'élément , sa classe, etc...).
Les balises <script> </script> peuvent être utilisées soit dans le <head> soit partout dans le 3.1. Accéder à un élément HTML ou chercher sa référence
document HTML pour y insérer du code J.S. Lorsque un fichier J.S. est importé, l'attribut src='URL
du fichier.js' est utilisé.
Le mot clé var permet de déclarer des variables simples ou objet. Le type est implicite à la première Pour pouvoir manipuler les objets du DOM, il faut d'abord savoir comment chercher les références
affectation d'une valeur à une variable. Le mot clé function, lui permet de définir des fonctions J.S. d'un ou de plusieurs objets. J.S. offre un ensemble de méthodes membre de l'objet document qui
permettent de résoudre ce problème.
2. Notion de Contexte Global A- En connaissant son attribut 'id'
C'est l'ensemble des objets existants et pouvant être accédés et utilisés dans du code J.S. var reference=document.getElementById('nomdidentificateur') permet d'obtenir une référence sur
Exemples : une balise HTML en utilisant sont attribut id.
+L'objet prédéfini window qui contient tous les objets et fonctions globaux de J.S.
+L'objet location, qui est un attribut de window permet d'accéder à toutes les informations possibles Exemple
sur l'URL actuellement visitée. window.location.reload() : est un appel pour recharger la page HTML : <input type='password' id='pwd1'>
actuelle. J.S. : var adresse_pwd1 = document.getElementById('pwd1') ;
+L'objet history, membre de window contient l'ensemble de l'historique de navigation. if( adresse_pwd1.value == '')
window.history.forward() permet d'avancer dans l'historique, window.history.go(1) permet d'aller à alert('Veillez saisir votre mot de passe') ;
la première page de l'historique de navigation, etc. N.B : Remarquez dans cet exemple la valeur de l'attribut id de la balise input. Remarquez aussi
+Les fenêtres modales alert('Message') reponse=confirm('Message') et msg=Prompt('Question') sont comment on a utilisé l'attribut membre 'value' de l'adresse, car il existe un attribut de la balise
globales <input> qui s'appelle value.
1/8 2/8
//élément d'une liste, lastChild renvoie le dernier

B- Chercher toutes les balises d'un type donné //élément de la liste.
Se fait grace à la méthode getElementByTagNames qui prend comme paramètre le nom d'un
élément HTML comme div, p, span ,...etc. ReferenceScore.textContent= 12 ; //On modifie le conteu du span !
Exemple :
var divs = document.getElementByTagNames('div') ; B-Modifier les éléments HTML
divs sera une liste de references sur tous les objets du DOM qui représentent une balise <div> dans On peut modifier leur contenu (attribut innerHTML), styles, propriétés et attributs.
le document HTML. La longueur de toutes listes en J.S. peut être calculée grace à la fonction
membre pré-définie length().
Exemple : var nombreDeDivs= divs.length() ;
3.3. Fonctions membres J.S. prédéfinies
On peut ensuite accéder à topus les élements de la liste comme suit variable.hasAttribute('nomAttribut') retourne true si la varable variable possède un attribut membre
for (i=0 ; i< nombreDeDivs ; i++){ qui s'appelle 'nomAttribut', false sinon.
divs[i].nodeName, divs[i].innerHTML= ….
} variable.getAttribute('nomAttribut') retourne la valeur de l'attribut 'nomAttribut'.
C-Chercher toutes les balises d'une classe donnée variable.setAttribute('nomAttribut','NouveauContenuAttribut') modifie l'attribut 'nomAttribut' de
grace à la méthode getElementsByClassName('NomDeClasse') qui retourne toutes les références la balise représentée par variable pour y mettre la valeur 'NouveauContenuAttribut'.
des objets qui ont un attribut class (qui est attribut de toutes les balises HTML) qui contient la class
variable.removeAttribute('nomAttribut') supprime un attribut
'NomDeClasse'. Rappelz-vous que l'attribut class prend une liste de classes comme class
= 'classTexteRouge classTextePenche classTexteSouligne', ie un ensemble de nom de classe CSS. Exemple récapitulatif :
document.getElementsByClassName('NomDeClasse') retrourne une liste qu'on peut parcourrir if (divs[i].hasAttribute('class')){

comme dans B-.
divs[i].setAttribute('class', 'TexteRouge') ;//Change la classe
D-Chercher toutes les balises qui satisfont un selecteur CSS divs[i].setAttribute('style', 'font-size:15px ;') ;//Change la police dans l'attribut style !
var listeBalises=document.querySelectorAll('SelecteurCSS') ; retourne la liste des objets qui
satosfont le selecteur CSS en paramètre. Liste parcourable comme dans B-. divs[i].innerHTML='<p>Ceci est un code HTML inséré dans ce div </p>' ;
E-Chercher la première balise qui satisfait un sélecteur CSS }

var adresseBalise=document.querySelector('SelecteurCSS') retourne la première reference qui
possède le sélecteur indiqué. 3.4. Pour créer un noeud dans le DOM
La méthode prédéfinie createElement('nomDeBalise') permet de créer un élément HTML de
3.2. Modifier/ Editer un noeud n'importe quel type (<div>,<p>,<article>,<header>....<audio>....etc. Après sa création, il faut le
placer dans le DOM en renseignant sa propriété parentNode. Ensuite, on pourra lui affecter, un
contenu, un style, etc.
Une fois la référence d'un objet trouvée, on peut accéder à ses attributs/méthodes et les modifier à
Exemple : On crée un élément audio, on vérifie qu'il accepte un format, on charge un fichier audio
volonté.
adapté et on lance l'audio.
A-Modifier le contenu texte : attribut textContent
var audio=document.createElement('audio') ;
Exemple audio.parentNode=document.body ;
HTML : <span class='LeScore'> </span> if (audio.canPlayType('audio/mp3')){
Accès et Modification avec J.S. : audio.setAttribute('src','/sounds/alert1.mp3') ;
var scoreElmt=document.getElementByClassName('LeScore') ; }else{
var referenceScore= scoreElmt.firstChild ; //Fonction memebre d'une liste qui retourne le premier if (audio.canPlayType('audio/ogg')){
3/8 4/8
audio.setAttribute('src','/sounds/alert1.ogg') ; Les données échangées entre le client et le serveur HTTP dans une application web AJAX sont
} formatées soit en XML (eXtended Markup Language) soit en JSON (JavaScript Object Notation).
Le format JSON est devenu de plus en plus populaire à cause de ses avantages. En effet des
}
données au format JSON peuvent facilement être utilisées pour créer des objets J.S. là où en format
audio.play() ; XML, il faut parcourir le DOM des données, créer des variables J.S. et leur assigner les valeurs lues
dans le DOM.
Exemple utilisation JSON
4. Applications AJAX <!DOCTYPE html>
Ajax : Asynchronous Javascript And XML (eXtended Markup Language) <html>
<body>
Si au début de son existence, le langage JS a surtout permis d'implanter les contrôles d'erreur des
champs de formulaires saisis par les utilisateurs (comme dans Exercice 1 de TP N°4) et de faire des <h2>JSON Object Creation in JavaScript</h2>
animations (HTML dynamique), son existence a permis pour la première fois d'envisager d'effectuer <p id="demo"></p>
une partie des traitements faits sur le serveur dans le navigateur. Ceci a pour grand avantage de
nécessiter moins de ressources côté serveur, en termes de machines/énergie electrique/ressources <script>
var texte = '{"name":"John Johnson","street":"Oslo West 16","phone":"555
humaines ; 1234567"}';
Pour l'utilisateur, les avantages sont que sa bande passante, généralement déjà restreinte, n'est pas var obj = JSON.parse(texte);
utilisée pour télécharger du HTML/CSS pour chaque page, mais uniquement les données. Regardez
l'exemple suivant pour avoir une idée sur l'utilisation de l'objet XMLHttpRequest afin de créer une document.getElementById("demo").innerHTML =
obj.name + "<br>" +
page HTML rien qu'avec du J.S. (http://help.dottoro.com/ljspgwvf.php). obj.street + "<br>" +
obj.phone;
</script>
Interface Traitements Données </body>

Utilisateur </html>
Dans l'exemple ci-dessus, la variables text est une chaine de caractère qui a était transformée en un
objet grâce à la ligne JSON.parse(texte) (JSON.parse est offerte par tous les moteurs JS). En
1-Requête HTTP PHP pratique, on utilise un objet XMLHttpRequest pour demander des données formatées comme la
/Jsp variable 'texte' puis avec du code J.S. on crée un objet et on utilise ses attributs comme données. En
2-HTML/CSS/JS
/Asp
HTML utilisant XML, réaliser le même travail requiert beaucoup plus de code, d'où l'avantage du format
CSS/JS 3-Requête HTTP SGBD
JSON.
4-HTML/CSS/JS
Client Serveur
Application web 2-tiers (C/S). Le dialogue HTTP concerne

des ressources HTML/CSS/J.S.
5/8 6/8
Traitements
else{
Interface Traitements Données
Utilisateur password2.setCustomValidity('');
};//fin de la fonction. Notez le ; à la fin car la fonction est une variable
password2.addEventListener('change', checkPasswordValidity, false);

1-Requête HTTP
</script>
Application J.S.
2-HTML/CSS/JS PHP
HTML /Jsp
CSS/JS 3-Requête HTTP /Asp SGBD
Notez la foncion addEventListener. Elle reçoit en premier paramètre le nom d'un événement parmi
4-XML/JSON les événements pré-définis possibles ; en second argument le nom de la fonction qu'il faut exécuter
lorsque l'événement arrive, le troisième paramètre peut être true ou false comme il peut être omis
(on passe sur son utilité ici).
Serveur Les événement dépendent de l'élément HTML considérés et on peut associer plusieurs fonctions à
Client
un élément pour plusieurs événements. par exemple :
Application web AJAX 2-tiers. Le dialogue HTTP concerne
des ressources HTML/CSS/J.S. seulement lors de la phase document.getElementById("myBtn").addEventListener("mouseover", myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction);
de l'accès à l'application. Par la suite, uniquement des
document.getElementById("myBtn").addEventListener("mouseout", someOtherFunction);
données (au format XML ou JSON) sont échangées. Une
partie des traitements se fait dans le client HTTP Le nom de l'événement utilisé correspond au nom de l'attribut HTML dédié à l'événement considéré
sans le préfixe 'on'. Par exemple, un élément HTML possède les attributs événementiels :
onmouseover, onclick, onmouseout, onfocus, etc. En enregistrant des fonctions pour ses
événements, on utilisera 'mouseover', 'click', 'mouseout', 'focus' comme paramètre à
addEventListner !
5. Evénements Javascript
Dans le navigateur, on peut associer des fonctions JS à certains événements qui concernent tout
objet du DOM. 6. Conclusion
En effet, à chaque action de l'utilisateur/réseau, un événement est généré. On peut associer une
fonction à exécuter lorsque l'événement se réalise. Dans ce chapitre, nous avons abordé le langage de script javascript utilisé dans le navigateur (côté
client). Avec les bibliothèques J.S. comme JQuerry, Angular etc. aujourd'hui on peut créer de
Exemple : Exercice de TP N°4 revisité. nouvelles applications web appelée Ajax qui s'appuient sur ces framework pour faciliter le
développement et le déploiement des applications web, en particulier dans leur partie exécutée dans
<script> le navigateur.
var password1= document.getElementById('pwd1');
var password2= document.getElementById('pwd2');
var checkPasswordValidity=function(){
if(password1.value != password2.value){
password2.setCustomValidity('Les mots de passe ne concordent pas');
7/8 8/8

Chapitre 4 - Javascript

Transféré par

Droits d'auteur :

Formats disponibles

Chapitre 4 - Javascript

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Chapitre 4 - Javascript

Transféré par

Droits d'auteur :

Formats disponibles

DAWEB/Javascript DAWEB/Javascript

//élément d'une liste, lastChild renvoie le dernier

document.getElementsByClassName('NomDeClasse') retrourne une liste qu'on peut parcourrir if (divs[i].hasAttribute('class')){

E-Chercher la première balise qui satisfait un sélecteur CSS }

Accès et Modification avec J.S. : audio.setAttribute('src','/sounds/alert1.mp3') ;

var scoreElmt=document.getElementByClassName('LeScore') ; }else{

Interface Traitements Données </body>

Application web 2-tiers (C/S). Le dialogue HTTP concerne

};//fin de la fonction. Notez le ; à la fin car la fonction est une variable

password2.addEventListener('change', checkPasswordValidity, false);

var password2= document.getElementById('pwd2');

password2.setCustomValidity('Les mots de passe ne concordent pas');

Vous aimerez peut-être aussi