Le langage Javascript
Javascript C'est quoi? Objet String: Chaines de caractères
Comment intégrer du code Javascript? Objet Math
Les bases du Javascript Objet Date
Structures de contrôle Objet RegExp: les expressions régulières
Les fonctions Objet Window
Les évènements Objet Screen
Objets, méthodes et attributs Objet Document
Objet Array: Les tableaux Objet Event
Gestion des exceptions
Qu'est ce que Javascript?
Javascript est un langage de script côté client, c'est à dire qu'il est exécuté sur le navigateur. Il a été
créé en 1995 par Netscape Communication Corporation. A l'époque il s'appelait LiveScript. Fin 1995,
et suite à une association entre Netscape et SUN (créateur du fameux langage Java), LiveScript
s'est fait rebaptiser Javascript.
Puisque Javascript est un langage côté client alors il a un principal avantage et un principal
inconvénient:
- Avantage: Le code source Javascript est chargé avec la page (en même temps que HTLM et
CSS). A la fin du chargement, tous les codes sont présents chez le client. Par conséquent,
l’exécution de Javascript est extrêmement rapide puisque tout est disponible sur place.
Inversement aux langages côté serveur comme PHP, qui nécessitent à chaque fois l'interrogation
du serveur, ce qui rend l’exécution plus lente.
- Inconvénient: La même raison qui a procuré à Javascript son principal avantage, cause cette fois-
ci son ultime inconvénient. En effet, le fait que les codes soient disponibles sur le navigateur rend
ceux ci visibles par tous. Le code Javascript est par conséquent non confidentiel.
Comment intégrer du code Javascript?
Pour écrire du code Javascript il faut le séparer des codes HTML et CSS en le plaçant entre les
balises <script> et </script>. Pour faire simple, imaginons que je veux afficher le message "Bonjour"
dans une boite de dialogue à l'aide de Javascript. Le code de notre page ressemblerait à ceci:
Comment intégrer du code Javascript?
Cependant, comme vous allez le découvrir dans ce cours, les codes Javascript ont tendance à
être plus ou moins longs (en fonction du traitement souhaité). Notre document HTML sera donc
plus ou moins volumineux si on y met directement nos scripts. La solution consiste alors à
déclarer le Javascript dans un fichier à part (comme on l'a fait pour le CSS).
Imaginons que nous voulons déclarer nos scripts dans un fichier nommé [Link] (vous avez
remarqué l'extension? js signifie Javascript). Pour simplifier, on va supposer que le
fichier [Link] est placé dans le même dossier que notre fichier HTML.
Comment intégrer du code Javascript?
Où placer nos scripts?
Il n'y a pas de restriction sur l'endroit où on peut placer nos scripts.
Nous pouvons les placer n’importe où (avant <html>, dans <head>, dans <body> ou après </html>).
Cependant, les développeurs ont pour coutume de placer les scripts Javascript dans la
balise <head>
Le code HTML précédent devrait donc ressembler à cela:
Les bases du Javascript?
Les commentaires
•Un commentaire est un texte qui est ignoré lors de l’exécution du programme. Il est visible dans le
code source mais n'est pas pris en compte par l'interpréteur Javascript.
Comme en langage C, il existe deux façons d'insérer un commentaire:
- Commentaire de fin de ligne: Il est inséré grâce au double slash (//). Tout le texte qui vient après est
considéré comme commentaire jusqu'à la fin de la ligne.
- Commentaire sur plusieurs lignes: Il est inséré grâce à la séquence /* */. Tout le texte
entre /* et */ est considéré comme commentaire même s'il est déclaré sur plusieurs lignes.
Les bases du Javascript?
Les variables
Dans un langage de programmation, une variable sert à stocker une valeur (ou plusieurs) qui peut
changer au cours de l’exécution du programme. En Javascript aussi, la variable sert à la même finalité.
La déclaration des variables en Javascript ne demande pas de préciser le type. En effet, le typage est
géré dynamiquement, contrairement à la plupart des langages de programmation qui exigent de
préciser le type de données qu'accueillera la variable au cours du programme.
Les deux valeurs affectées aux variables sont de
type chaîne de caractères (ou string).
Les bases du Javascript?
Les variables
Nom des variables
Pour identifier une variable on lui donne un nom unique (qui ne doit pas être attribué à une autre
variable dans le même programme). Le nom de la variable peut être composé de lettres
(minuscules, majuscules ou les deux), de chiffres (de 0 à 9) et les caractères _ et &. En plus, il doit
impérativement commencer par une lettre ou le caractère _.
Les bases du Javascript?
Les variables
Portée des variables
- On appelle portée d'une variable, l'étendu de celle ci, c'est à dire jusqu'à quel niveau elle sera
reconnue dans un programme. Selon la portée, il existe deux types de variables:
• Variable globale: Cette variable est accessible de partout dans le programme, à l'intérieur des
fonctions comme à l'extérieur.
• Variable locale: On parle plus précisément d'une variable locale à une fonction. C'est une variable
qui est accessible de l'intérieur de la fonction dans laquelle elle est déclarée, mais pas de l'extérieur.
- si la variable est déclarée sans le mot clé var, alors elle est automatiquement globale qu'elle soit
déclarée à l'intérieur d'une fonction ou à l’extérieur.
- Par contre si elle est déclarée avec le mot clé var alors deux cas sont envisageables:
• Si la variable est déclarée dans une fonction, alors elle est locale à cette fonction.
• Si la variable est déclarée en dehors de toute fonction, alors elle est globale à tout le programme.
Les bases du Javascript?
Les variables
Changement de type d'une variable (CAST)
Le fait d’affecter une valeur à une variable, renseigne automatiquement au moteur Javascript
(l'interpréteur) son type. Mais pour avoir une idée sur les types disponibles en Javascript voilà un
résumé:
• Les nombres: Ce sont les nombres avec ou sans virgule, positifs ou négatifs.
• Les chaines de caractères: (ou string), ce sont des suites de caractères quelconques.
• Les booléens: Ce sont les nombres booléens qui peuvent avoir deux valeurs, soit 1 ou 0 exprimés
de préférence par vrai (true) ou faux (false).
• Les variables vides: Ce sont des variables qui ne contiennent aucune valeur, ils ont la valeur
implicite null.
Les bases du Javascript?
Les variables
Changement de type d'une variable (CAST)
Si on exécute ce bout de code, il n'y aura aucun
problème. La variable a a été initialisée en tant
que nombre, puis a changé de type deux fois
(Chaîne de caractères puis booléen).
Les bases du Javascript?
Les opérateurs
Les opérateurs sont des symboles qui permettent de faire des opérations (arithmétiques,
logiques...) sur les variables. Généralement, on retrouve les même opérateurs dans la plupart des
langages de programmation avec des symboles, dans la plupart des cas, similaires.
En Javascript (et en d'autres langages d'ailleurs) on distingue 5 familles d'opérateurs:
Opérateurs arithmétiques: l'addition (+), la soustraction (-), la multiplication (*), la division (/)
et le modulo (qui signifie le reste de la division)(%).
Opérateurs d'incrémentation: incrémentation (++) et décrémentation (--)
Opérateurs assignement: : l'affectation directe (=), l'affectation avec addition (+=),
l’affectation avec soustraction (-=), l'affectation avec multiplication (*=), l'affectation avec
division (/=) et l'affectation avec modulo (%=).
Opérateurs de comparaison: égal (==), strictement inférieur (<), inférieur ou égal (<=), strictement
supérieur (>), supérieur ou égal (>=), différent (!=)
Opérateurs logiques: ET logique (&&), OU logique (||) et NON logique (!)
Les bases du Javascript?
Structures de contrôle
- Possibilité d’imbriquer.
Structures de contrôles en Javascript
- If elseif else
Structures de contrôle
Structures de contrôles en Javascript
Arrêt prématuré: instruction break Saut d'une itération: instruction continue
Les fonctions
Les fonctions
Une fonction est un sous-programme qui contient un ensemble d’instructions. Ces
instructions ne seront exécutées suite à l'appel de la fonction.
Les fonctions ont de nombreux avantages qu'on va résumer dans les points suivants:
• Réutilisation du code
• Réduction de la taille du code
• Organisation du code
Les fonctions
Où placer nos fonctions?
Javascript est un langage interprété. Par conséquent, on ne peut pas appeler une fonction
qu'après l'avoir créée (ou déclarée). Cependant la quasi totalité des appels se font à partir
de la balise <body>, il faut donc monter un peu plus haut dans le code HTML pour déclarer
nos fonctions Javascript. Y'a pas mieux que le <head>!
Déclaration d'une fonction
Dans le cas général la déclaration d'une fonction se fait comme ceci:
Les événements en Javascript
Javascript: un langage événementiel
Javascript est un langage événementiel. Donc les scripts déclarés dans la page ne sont pas destinés à
s’exécuter séquentiellement, linge après ligne, du début à la fin. Mais ils attendent jusqu'à ce qu'un
événement soit détecté pour qu'une partie du code s’exécute.
Un événement est une action de l'utilisateur qui peut se produire sur le navigateur. Le plus célèbre est
sans doute le clic qui peut survenir sur un objet quelconque (hyperlien, image, bouton...). Le
navigateur écoute les événements qui se produisent sur la page Web puis les transmet au script par le
biais de ce que l'on appelle le gestionnaire d' événements.
Les événements en Javascript
Javascript: un langage événementiel
Le fait de cliquer sur le bouton donne naissance à l’événement click qui appellera (grâce au
gestionnaire d'événements) la fonction f() définie dans le <head>. On aura donc le message "Vous
avez bien cliqué sur le bouton!" qui s'affichera dans une boite de dialogue alert().
Les événements en Javascript
Javascript: un langage événementiel
Liste des événements Javascript
click (onClick)
Cet événement est capturé sur un objet quand on clique dessus. Idéal pour les boutons,
images, hyperliens, vidéos...
dblClick (onDblClick)
Quand on clique sur un objet deux fois de suite (double clic).
mouseOver (onMouseOver)
Quand on survole un objet avec le curseur de la sourie.
submit (onSubmit)
Quand l'internaute clique sur n'importe quel bouton de type submit présent dans la page
(ou dans le formulaire).
Les événements en Javascript
Javascript: un langage événementiel
Liste des événements Javascript
mouseOut (onMouseOut)
Quand on quitte l'objet avec la sourie après l'avoir survolé.
focus (onFocus)
Quand on active un élément (quand on place le curseur dans un champ de formulaire, par
click ou par tabulation, pour commencer la saisie par exemple).
blur (onBlur)
Quand un élément perd le focus (quitter un champ de formulaire après être activé par
exemple).
keyDown (onKeyDown)
Quand une touche du clavier est enfoncée.
keyUp (onKeyUp)
Quand une touche du clavier est relâchée.
Les événements en Javascript
mouseDown (onMouseDown)
Quand l’internaute appuie sur n'importe quel bouton de la souris.
mouseUp (onMouseUP)
Quand le bouton de la souris et relâché.
mouseMove (onMouseMove)
Quand l’internaute fait bouger le curseur de la souris dans la zone accueillant l'événement.
dragStart (onDragStart)
Se produit quand l'internaute commence le déplacement d'un élément par "glisser-déposer" (Drag &
Drop).
dragEnter (onDragEnter)
Se produit quand l'internaute entre dans la zone où sera déposé l'élément glissé.
dragOver (onDragOver)
Se produit quand l'internaute survole la zone où sera déposé l'élément glissé (même si le concept est
proche de celui de onDragEnter, ils sont des événements légèrement différents).
drop (onDrop)
Se produit quand l'internaute dépose l'élément glissé dans la zone prévue à cet effet.
Les événements en Javascript
Les événements en Javascript
Javascript: langage de programmation orienté prototype
Javascript est un langage de programmation orienté prototype.
Il renferme une panoplie d'objets prédéfinies (appelés prototypes) qui peuvent donner naissance à
d'autres objets que l'on souhaite créer.
Puisque Javascript est considéré comme une extension du langage HTML, alors la plupart de ses
objets sont en réalité des objets HTML présents dans le document, comme les images, les champs
de formulaire... Par contre, il existe des objets propres au Javascript qui permettent d’exécuter des
traitement comme le calcul, la manipulation de la date, le traitement des chaines de caractères...
Les événements en Javascript
Hiérarchie des objets
Les objets Javascript qui dépendent du contenu d'un document HTML sont structurés
hiérarchiquement. C'est à dire que des objets s’emboîtent dans d'autres jusqu'à atteindre l'objet le
plus élevé à l’échelle de la hiérarchie.
L'objet le plus élevé est la fenêtre du navigateur, il est identifié par le nom window. Cet objet peut
être manipulé directement à travers des fonctions qui lui sont prédéfinies. On appelle ces fonctions
des méthodes. A titre d'exemple alert() qui affiche les messages des exemples précédents est une
méthode de l'objet window, on aurait pu donc l'écrire comme ceci: [Link]().
Le point (.) permet:
- de passer d'un objet à une de ces méthodes
- d'un objet parent à un autre objet enfant
- d'un objet à une variable qui lui est propre. On appelle cette variable un attribut.
Les événements en Javascript
- Un objet peut représenter un élément HTML (image, texte, formulaire...) ou un élément
propre au Javascript qui sert à exécuter des traitements spéciaux.
- Une méthode est une fonction prédéfinie appartenant à l'objet et qui permet de faire les
traitement sur celui-ci (on peut dire qu'elle décrit le comportement de l'objet).
- Un attribut est une variable qui appartient à l'objet . il représente une propriétés ou
caractéristique de celui-ci. On peut le manipuler grâce aux méthodes ou directement.
L'objet window contient un sous-objet (ou un objet subalterne), c'est le document HTML lui
même. Cet objet est identifié par le nom document. Cet objet peut contenir les éléments HTML
conventionnels comme du texte, les images, les formulaires... Tous ces éléments constituent des
sous-objets de l'objet document. Par exemple l'objet forms désigne les formulaires contenus dans
le document, et l'objet images englobe toutes les images intégrées...
Objet Array: les tableaux
L'objet Array
Les tableaux sont un type spécial de variables qui permettent de contenir plusieurs valeurs à la
fois. Si une variable classique peut avoir une seule valeur, les tableaux, quant à eux, peuvent en
contenir autant que l'on souhaite.
En Javascript, un tableau est un objet. Il peut contenir des entrées du même type et de types
différents. Il peut même contenir d'autres tableaux. On parle alors d'un tableau à 2 dimensions
ou à 3 dimensions etc...
Objet Array: les tableaux
Tableau à plusieurs dimensions
Objet Array: les tableaux
L'objet Array
Parcourir un tableau
Pour parcourir tous les éléments d'un tableau, la méthode la plus connue et l'utilisation de la
boucle for ou la boucle while.
Objet Array: les tableaux
Attributs et méthodes de l'objet Array
- L'objet Array dispose d'un ensemble d'attributs et méthodes qui permettent de manipuler les
tableaux. En voici les plus utilisés:
• length: Cet attribut retourne la taille du tableau, c'est à dire le nombre d'élément que celui ci
contient.
• sort(): Cette méthode retourne le tableau dont les éléments sont triés dans l'ordre
alphanumérique croissant.
• reverse(): Cette méthode retourne le tableau dont l'ordre des éléments a été inversé.
• join(): Cette méthode retourne une chaîne de caractères constituée des éléments du tableau
séparés par l’occurrence passée en paramètres (entre les parenthèses).
Objet Array: les tableaux
Attributs et méthodes de l'objet Array
Objet String: chaines de caractère
L'objet String
Normalement, une chaîne de caractère représente un type pour les variables. C'est le cas en
Javascript mais on parle plutôt d'un objet au lieu d'une variable.
Pour déclarer un objet String nous n'avons pas vraiment besoin de faire appel au mot
clé new comme on a fait pour l'objet Array. Il suffit d'affecter la chaîne voulue à l'objet comme si
on affecte une valeur à une variable.
str dans ce cas n'est pas une variable proprement dite, mais il s'agit en fait d'un objet. Afin de
manipuler les chaînes de caractères (objets String) nous avons à notre disposition un
ensemble d'attributs et de méthodes.
Objet String: chaines de caractère
En fait, [Link]("o") découpe la chaîne de caractères au niveau
des lettres "o". Puisqu'il y'en a deux dans "Bonjour", alors on
obtient trois fragments"B", "nj" et "ur". Chaque portions
constitue une entrée du tableau tab (tab[0]="B", tab[1]="nj" et
tab[2]="ur").
Vous avez donc compris que la méthode join() qui s'applique aux
tableaux et la méthode split() qui s'appliquent aux chaînes de
caractères sont complémentaire. Par conséquent si on avait
déclaré [Link]("o") à la place de la dernière instruction du code,
on aurait obtenu "Bonjour".
Objet String: chaines de caractère
Attributs et méthodes agissant sur les chaînes de caractères
• length: Cet attribut retourne le nombre de caractères contenus dans la chaîne. Notez que si on
applique le même attribut à un tableau, il retourne la taille de celui-ci.
• charAt(): La méthode charAt(x) (avec A majuscule) permet de retourner le caractères qui se
trouve à la position x passé en paramètre. Le paramètre est un entier qui commence de 0. La
valeur 0 indexe le premier caractère de la chaîne.
• indexOf(): La méthode indexOf(car) (avec O en majuscule) permet de retourner la position du
caractères car passé en paramètre. Si le caractère existe dans la chaîne, alors sa position
(comprise entre 0 et la longueur de la chaîne - 1) est retournée, sinon (le caractère ne figure pas
dans la chaîne) alors la valeur -1 est retournée.
• La méthode indexOf() peut accueillir un deuxième paramètre qui est un entier qui indique à
partir de quel position de la chaîne on commencera la recherche du caractère passé en
premier paramètre.
Objet String: chaines de caractère
Attributs et méthodes agissant sur les chaînes de caractères
• substring(): La méthode substring(début,fin) permet d'extraire une partie de la chaîne de
caractères commençant de la position début et finissant à la position fin-1.
• split(): La méthode split(occurence) permet de retourner un tableau à partir des fractions de la
chaîne de caractères obtenues en divisant celle-ci au niveau de l'occurence.
• toLowerCase(): La méthode toLowerCase() permet de retourner la chaîne de caractère
entièrement en minuscules.
• toUpperCase(): La méthode toUpperCase() permet de retourner la chaîne de caractère
entièrement en majuscules.
Objet Math
Objet Math pour manipuler les fonctions mathématiques
L'objet Math de Javascript permet d’exécuter des fonctions mathématiques par le biais de ses
nombreux attributs et méthodes.
Fonctions mathématiques à usage standard
•[Link](x): calcule la valeur absolue de x.
•[Link](x): retourne l'arrondi supérieur de x. Il s'agit du nombre entier immédiatement supérieur
ou égal à x.
•[Link](x): retourne l'arrondi inférieur de x. Il s'agit du nombre entier immédiatement inférieur
ou égal à x.
•[Link](x): retourne l'arrondi le plus proche (supérieur ou inférieur) de x.
•[Link](x,y): retourne le nombre plus grand parmi x et y.
•[Link](x,y): retourne le nombre plus petit parmi x et y.
•[Link](x,y): retourne x à la puissance y.
•[Link](x): retourne la racine carré de x.
Objet Math
Objet Math pour manipuler les fonctions mathématiques
Fonctions mathématiques spéciales
•[Link]: il s'agit d'un attribut qui retourne la valeur de PI de la trigonométrie (le fameux 3.14 avec
quelques chiffres en plus à droite).
•Math.E: cet attribut retourne la valeur du nombre d'Euler (arrondi à 2.72).
•[Link](x): calcule l’exponentiel de x.
•[Link](x): calcule le sinus de x.
•[Link](x): calcule l'arcsinus de x (x doit être compris entre -1 et 1).
•[Link](x): retourne le cosinus de x.
•[Link](x): retourne l'arccosius de x (x doit être compris entre -1 et 1).
•[Link](x): calcule la tangente de x.
•[Link](x): calcule l'arctangente de x.
Objet Math
Objet Math pour manipuler les fonctions mathématiques
Nombres aléatoires
En Javascript (comme en d'autres langages de programmation), il est parfois utile de générer des
nombres aléatoires. La méthode random() (pour [Link]()) permet de retourner un nombre
aléatoire compris entre 0 et 1. Ce nombre généré contient plusieurs chiffres après la virgule. Pour
générer un nombre aléatoire entier une technique très simple est utilisée.
Supposons que nous voulons générer un nombre aléatoire compris entre 0 et 10 que l'on va affecter
à la variable nbrAltr. Dans ce cas le code sera:
Objet Date
Manipuler les dates en Javascript
Il est parfois nécessaire de manipuler les dates et les heures au sein d'une application Web. Par
exemple, créer un calendrier pour pouvoir sélectionner la date de départ d'un train plus
facilement, ou afficher l'horloge sur sa page Web, ou encore calculer la durée de séjour d'un client
qui compte réserver une chambre d'hôtel sur un site d'hébergement.
Cependant, il ne faut pas trop se fier à la date du client, car celle-ci peut ne pas être précise. Mais,
il est utile de savoir comment manipuler les dates en Javascript.
Objet Date
Manipuler les dates en Javascript
Si les parenthèses de Date() sont vides, cela signifie qu'on veut créer l'objet date à partir de la date
courante du système. Par contre on peut toujours faire référence à une date différente en la
précisant entre les parenthèses comme ceci:
Objet Date
Méthodes de l'objet Date
- getFullYear(): permet de retourner l'année sur 4 chiffres.
- getDay(): retourne un indice numérique qui représente le jour de la semaine. 0 pour dimanche, 1
pour lundi, ... , 6 pour samedi.
- getMonth(): retourne un indice numérique qui représente le mois. 0 pour janvier, 1 pour février, ... , 11
pour décembre.
-getHours(): retourne l'heure (sans zéro initial). Si la date crée fait référence à 9h du matin, alors cette
méthode retournera 9 et non pas 09.
- getMinutes(): retourne les minutes (sans zéro initial).
- getSeconds(): retourne les secondes (sans zéro initial).
- getMilliSeconds(): retourne les millisecondes (rarement utilisé).
- getTime(): retourne ce que l'on appelle le Timestamp UNIX (ou Timestamp POSIX) en millisecondes.
C'est à dire le nombre de millisecondes écoulées depuis 01/01/1970 00:00:00. C'est la date où le
premier système UNIX a été lancé.
Objet RegExp: Les expressions régulières
Expressions régulières
Les expressions régulières sont des techniques qui permettent de chercher des modèles (ou des
occurrences) de formes qui peuvent être complexes, au sein des chaînes de caractères.
Pour simplifier, imaginez qu'on invite un client à saisir une adresse email dans une zone de texte.
Afin de s'assurer si ce qu'il a entré respecte la forme usuelle d'un email, on peu vérifier certains
points:
- Y a-t-il un arobas dans l'email?
- Y a-t-il un point?
- Est ce qu'il y a au moins un caractère avant l'arobas?
- Le nom de domaine est-il valide?
- Est ce que l'email ne contient pas de caractères non autorisés comme les espaces?
Objet RegExp: Les expressions régulières
Expressions régulières
Objet RegExp
C'est grâce à l'objet RegExp que l'on peut créer un model (ou occurrence). La syntaxe ressemble à
ceci:
expression est l'objet qui contient le model qu'on a créé à l'aide de l'objet RegExp. En paramètres
de celui ci, nous déclarons une chaîne de caractères qui représente l'expression régulière elle
même.
Expressions régulières
Chapitre 3: Le langage Javascript Objet RegExp: Les expressions régulières
Objet RegExp: Les expressions régulières
Expressions régulières
il faut déspécialiser les caractères spéciaux si on souhaite les chercher en tant que motif (ou
occurrence).
Méthodes de l'objet RegExp
La méthode la plus utilisée pour l'objet RegExp s'appelle test(). La méthode test() permet de tester
si la chaîne de caractères passée en paramètre (dans les parenthèses) correspond à l'expression
régulière. Si oui, elle retourne la valeur booléenne true, sinon elle retourne false. On peut donc la
manipuler grâce à la structure de contrôle if else.
Objet RegExp: Les expressions régulières
Expressions régulières Début de la chaine
Méthodes de l'objet RegExp Un caractère
Répéter
Eliminer la signification
spéciale du point
Objet window
L'objet window: le parent de tous les objets de la page
Redirection: attribut location
Le fait que les liens hypertextes représentent le moyen le plus évident pour rediriger le navigateur
vers une autre page relève de l’unanimité. Or, pour changer de page, il faut absolument que
l'internaute clique sur le lien. Mais imaginons un instant qu'on veut rediriger le navigateur vers une
nouvelle page sans cliquer sur aucun lien (suite à un événement ou un traitement spécial par
exemple). Il nous faut donc une autre solution.
En Javascript l'attribut location permet de rediriger le navigateur vers la page dont le nom lui est
affecté en tant que chaîne de caractères. Pour faire simple, imaginons que nous voulons allez vers
la page nommée "[Link]" via Javascript. Le code ressemblera à ceci:
Objet window
L'objet window: le parent de tous les objets de la page
Ecrire dans la barre d'état: attribut status
La barre d'état est la petite barre qui se trouve (d'une manière permanente ou temporaire) en
bas du navigateur et qui affiche souvent des informations comme la cible d'un lien hypertexte
survolé ou l'état de chargement des éléments de la page.
Javascript permet de personnaliser le message à afficher sur la barre d'état grâce à
l'attribut status. Le message souhaité lui est affecté en tant que chaîne de caractères.
Objet window
Méthodes de boites de dialogue: alert(), confirm() et prompt()
Les méthodes de boites de dialogue figent le navigateur. En effet, le fait d'afficher un message
dans une boite de dialogue n'est qu'une tâche complémentaire de ces méthodes. Leur rôle principal
c'est de figer le navigateur et l'empêcher de poursuivre l’exécution du reste du code (que ce soit
HTML, CSS ou Javascript lui même). Cependant, il faut dire à l'internaute pourquoi son navigateur
est figé. C'est à cela que sert le message affiché.
Le navigateur sera de nouveau libéré si le client clique sur le bouton (ou les boutons) qui se
présente sur la boite de dialogue.
Objet window
Méthodes de boites de dialogue: alert(), confirm() et prompt()
- alert(): Cette méthode permet d'afficher un message dans une boite de dialogue en figeant le
navigateur. Elle affiche aussi un bouton "OK". En cliquant dessus, la boite disparaît et le
navigateur est libéré.
-confirm(): Cette méthode permet d'afficher un message dans une boite de dialogue menue de
deux boutons: "OK" et "Annuler". En cliquant sur "OK", la méthode confirm() retourne la valeur
booléenne true. Le bouton "Annuler" retourne false. Cette méthode sert principalement à faire
confirmer une action par le visiteur.
-prompt(): La méthode prompt() permet d'afficher un message dans une boite de dialogue.
Cette boite contient aussi une zone de texte et deux boutons "Ok" et "Annuler". Si on clique sur
"OK" la chaîne de caractères saisie dans la zone de texte est retournée par la méthode. En
cliquant sur "Annuler" la valeur "null" (qui signifie "variable vide") est retournée. La méthode
prompt() peut accueillir deux paramètres. Le premier est affiché dans la boite de dialogue et le
deuxième constitue le texte par défaut de la zone de texte.
Chapitre 3: Le langage Javascript Objet window
Objet window
Pop-Up: méthodes open() et close()
Les pop-up sont des fenêtres qui s'ouvrent indépendamment de la fenêtre principale. Elle contiennent
généralement de la publicité ou des informations complémentaires à la page principale. De nombreux
navigateurs ont tendance à bloquer l'ouverture par défaut des pop-up car, parfois, leur ouverture
intempestive importune l'internaute.
Pour ouvrir une fenêtre on utilise la méthode open() et pour la fermer, en plus du bouton de
fermeture de la fenêtre par défaut, on peut faire appel à la méthode close().
La méthode open(URL, Nom de la fenêtre, Options) reçoit trois paramètres:
- URL: Il s'agit du chemin de la page à ouvrir dans la fenêtre. Il peut être absolu ou relatif.
-Nom de la fenêtre: Il s'agit d'un nom optionnel que l'on donne à la fenêtre. Il est utile quand
plusieurs fenêtres sont ouvertes. S'ils disposent de noms différents, alors on se retrouvera avec
autant de fenêtre que d'appels. S'ils ont le même nom, alors un nouvelle fenêtre ouverte écrase
l'ancienne.
- Options: Les options permettent de personnaliser l’apparence de la fenêtre. Les options possibles
sont:
Objet window
• width: spécifie la largeur de la fenêtre en pixel (l'unité n'est pas spécifiée).
• height: hauteur de la fenêtre.
• location: peut avoir yes ou no pour autoriser ou non l’apparition de la barre d'adresse.
• resizable: peut avoir yes ou no pour autoriser ou non le redimensionnement de la fenêtre.
• menubar: peut avoir yes ou no pour autoriser ou non l’apparition du menu du haut de la fenêtre.
• scrollbar: peut avoir yes ou no pour autoriser ou non l’apparition des barres de défilement
• toolbar: peut avoir yes ou no pour autoriser ou non l'affichage de la barre d'outils.
• status: peut avoir yes ou no pour autoriser ou non l’apparition de la barre d'état.
Les options doivent être séparées d'une virgule (sans espaces). Selon le navigateur, toute option non
déclarée reçoit implicitement la valeur no.
Objet window
Objet window
Temporisateur: méthodes setTimeout() et clearTimeout()
Il faut dire que la méthode setTimeout() est largement utilisée en Javascript.
Objet event
Objet DOM
L'objet Document est hiérarchiquement placé sous l'objet window. Il permet de manipuler
tous les objets qui sont inclus dans le documents HTML (images, textes, formulaires...).
Quand on parle de l'objet document il y a un autre terme qui surgit automatiquement, c'est
le DOM.
Document Object Model: DOM
DOM qui signifie Document objet Model est un outil qui permet d'accéder au document. Il s'agit
plus précisément d'une interface qui standardise la manière d'accès aux document structurés en
balises comme HTML ou XML. D'ailleurs, chaque élément du document fait partie du model DOM.
Objet DOM
Document Objet Model: DOM
Arborescence et nœuds
Nous avons déjà parlé de la hiérarchie des objets en Javascript. Il s'agit en fait de la manière dont
sont présentés les différents éléments constituant le contenu (un objet parent qui contient des
objets enfants qui, à leurs tours, contiennent d'autres objets et ainsi de suite).
L'ensemble des ces objets constitue une arborescence (connue aussi sous le nom arbre HTML, si le
document en question est HTML). Cet arbre est en fait une structure d'éléments qui représentent
des nœuds.
Il existe deux types de nœuds, nœuds éléments et nœuds texte. Les nœuds éléments sont tout
simplement les balises et les nœuds textes sont les textes contenus dans un document HTML.
Objet DOM
Document Objet Model: DOM
Méthodes et sous-objets
Méthodes de base de l'objet document
Il existe de nombreux méthodes (et attributs) qui s'appliquent sur l'objet document.
• write(): La méthode write() permet d'écrire la chaîne de caractères passée en paramètre
directement dans le document.
Objet DOM
Sous objets de document
Trois sous-objets sont fréquemment utilisés:
• images: Cet objet retourne un tableau qui contient tous les objets de type image (c'est à dire
les balises <img>). La première image du document est indexée par 0, la deuxième par 1 et ainsi
de suite. L'attribut le plus utilisé de cet objet est src qui permet de changer la source de l'image
dynamiquement.
• forms: Cet objet retourne un tableau qui contient tous les formulaires du document (les
balises <form>).
• body: Cet objet fait référence à la balise <body>.
Objet DOM
Sous objets de document
Objet DOM
Autres façons pour accéder aux sous objets de document
Jusqu'ici nous avons vu comment écrire directement dans le document et comment accéder
aux images et formulaires déclarés. Cependant, il existe d'autres méthodes qui permettent
d'accéder plus facilement aux différents objets de tout type d'un document. Il s'agit d'ailleurs
des méthodes les plus utilisés par les développeurs:
• getElementById(): Cette méthode permet d'accéder à un objet quelconque en l'identifiant
par la valeur de son attribut id. Nous avons déjà eu l'occasion de voir cet attribut en CSS. Sa
valeur est unique dans tout le document. C'est cette valeur qui sera déclarée dans les
parenthèses de la méthode en tant que chaîne de caractères.
• getElementsByTagName(): Cette méthode permet d'accéder tous les objets correspondant
à la balise (tag) déclarée entre les parenthèses en tant que chaîne de caractères. Elle
retourne un tableau qui renferme tous les nœuds du type désigné.
Objet DOM
Autres façons pour accéder aux sous objets de document
Le premier objet image a été désigné par son identifiant "im1". Les deux derniers ont été
désignés par leur nom de balise (TagName) qui correspond évidemment à "img". Puisqu'il s'agit
d'un tableau, alors on a précisé les indexes des objets à cibler entre les crochets.
Objet DOM
Autres façons pour accéder aux sous objets de document
Après avoir ciblé nos objets, que pouvons nous faire à part changer la source des images et
désigner une zone de texte?
Attribut innerHTML
Jusqu'ici, nous avons pu écrire des textes dans des champs de formulaire et des boites de dialogue.
Mais si on veut écrire n'importe où dans la balise <body> alors on peut le faire grâce à
l'attribut innerHTML.
Objet DOM
Autres façons pour accéder aux sous objets de document
Attribut innerHTML
Au chargement de la page, la balise <div> identifiée par contenu contient le texte "Bonjour". Une
fois le script Javascript exécuté, le nœud texte "Bonjour" est remplacé par "Bonsoir" grâce à
l'attribut innerHTML.
Objet DOM
Autres façons pour accéder aux sous objets de document
Objet DOM
Autres façons pour accéder aux sous objets de document
Objet DOM
Autres façons pour accéder aux sous objets de document
Objet DOM
Autres façons pour accéder aux sous objets de document
Objet DOM
Autres façons pour accéder aux sous objets de document
Objet DOM
Création, intégration et suppression des éléments
Chapitre 3: Le langage Javascript Objet DOM
Objet DOM
Méthode insertBefore()
La méthode insertBefore() ajoute un nouveau nœud enfant dans l'élément parent sur lequel elle
est appelé. Si appendChild() ajoute le nœud à la fin, insertBefore quant à elle permet de spécifier
avant quel élément on veut insérer le notre.
Chapitre 3: Le langage Javascript Objet DOM
Objet DOM
Objet DOM
Mot-clé this
Le mot clé this fait référence à l'objet sur lequel il est déclaré. Il permet de simplifier la désignation des
objets à travers le DOM. Au lieux de cibler un élément à travers son ID ou son
tagName, this raccourcie visiblement la syntaxe.
Supposons que nous disposons d'une image en noir et blanc qui, une fois survolé, laisse place à
l'image en couleur. On peut écrire le code comme ceci:
Le mot clé this fait référence à l'image, car c'est sur celle-ci qu'il est déclaré et passé en paramètre de
la fonction changerImage(). Une autre astuce consiste à placer les chemins des images dans un
tableau, ce qui rend le code plus lisible et facilement modifiable.