Javascript

1
Javascript
Chapitre 1 HTML et Javascript
2
Chapitre 1 HTML et Javascript

• Javascript ou la programmation pour le web
• HTMLCSSJavascriptDOMDHTML
• Les objets du navigateur
• Les événements
• Insertion d'un script dans une page HTML

3
Javascript ou la programmation pour le web

• Javascript langage de script qui permet
  d'effectuer des opérations sur les éléments de la
  page HTML qui le contient
• Avantage de ce langage il est interprété sur la
  machine cliente, qui affiche la page par
  l'intermédiaire du navigateur
• gt pas de rechargement de la page en cours
  d'exécution
• gt effet dynamique rapide
• Langage basé sur un Modèle Orienté Objet

4
2) HTMLCSSJavascriptDOMDHTML

• Le modèle objet de document (DOM) est simplement
  l'interface permettant de lier le langage de
  script utilisé et le code HTML de la page
• Comme pour le HTML, le DOM a une spécification
  proposée par le W3C. La version actuelle permet
  au langage de script d'accéder à l'intégralité
  des éléments de la page, à la fenêtre du
  navigateur et à l'intégralité du document contenu
  dans cette fenêtre
• Il est ainsi possible, par le langage de script,
  de modifier les attributs de la fenêtre ou de
  n'importe quel élément de la page, et ce, de
  manière dynamique

5

• Malheureusement, tous les navigateurs utilisés
  actuellement ne disposent pas de ce modèle objet.
  
• Internet Explorer dispose de son propre DOM qui
  est très proche de la norme W3C. Netscape dispose
  aussi d'un DOM propre et l'accès à certains
  objets de la page est différent.
• Grâce à cette interface, nous accédons par
  Javascript à tous les éléments d'une page comme
  s'ils étaient des objets intrinsèques du langage.
  En modifiant leur propriétés, nous allons pouvoir
  les faire bouger, les redimmensionner, les faire
  apparaître, disparaître,
• En bref, cela permet de dynamiser les pages HTML.
  C'est pourquoi la combinaison du HTML avec
  Javascript et le DOM est appelée Dynamic HTML.

6
3) Les objets du navigateur

• L'objet le plus haut dans la hiérarchie est
  l'objet window qui correspond à la fenêtre même
  du navigateur.
• L'objet document fait, quant à lui, référence à
  l'intégralité du document contenu dans la
  fenêtre.
• Ces objets disposent à leur tour de propriétés
  qui peuvent aussi être des objets, et de méthodes
  qui leur sont propres.
• Ainsi l'objet document regroupe au sein de
  propriétés l'ensemble des éléments HTML présents
  sur la page. Pour atteindre ces différents
  éléments, nous utiliserons
• soit des méthodes propres à l'objet document,
  comme la méthode getElementById( ), qui permet de
  trouver l'élément en fonction de son identifiant
  (ID)
• soit des collections d'objets qui regroupent sous
  forme de tableaux Javascript tous les éléments de
  type déterminé.

7

• Par l'intermédiaire des collections d'objets, il
  est possible d'accéder facilement aux différents
  éléments de la page
• pour référencer au premier formulaire présent
  dans le document (la numérotation commence à 0)
• document.forms0
• ou si ce formulaire dispose de l'attribut NAME
  valant form1
• document.forms"form1"
• Il est ensuite possible d'atteindre les
  propriétés et méthodes de cet élément. Ainsi pour
  effectuer la validation du premier formulaire de
  la page
• document.forms0.submit( )

8

• L'objet window
• Pour accéder au document courrant,
• window.document
• Propriétés (accessibles avec IE et N)
• closed indique que la fenêtre a été fermée
• defaultStatus indique le message par défaut
  dans la barre de status
• document retourne l'objet document de la
  fenêtre
• frames retourne la collection de cadres dans la
  fenêtre
• history retourne l'historique de la session de
  navigation
• location retourne l'adresse actuellement
  visitée
• name indique le nom de la fenêtre

9

• navigator retourne le navigateur utilisé
• opener retourne l'objet window qui a créé la
  fenêtre en cours
• parent retourne l'objet window immédiatemment
  supérieur dans la hiérarchie
• self retourne l'objet window correspondant à la
  fenêtre en cours
• status indique le message affiché dans la barre
  de status
• top retourne l'objet window le plus haut dans
  la hiérarchie.

10

• Méthodes
• alert( ) permet de faire surgir une fenêtre
  d'alerte
• blur( ) enlève le focus de la fenêtre
• close( ) ferme la fenêtre
• confirm( ) fait surgir une boîte de dialogue de
  confirmation
• focus( ) place le focus sur la fenêtre
• moveBy( ) déplace la fenêtre d'une certaine
  distance
• moveTo( ) déplace la fenêtre vers un point
  spécifié
• open( ) ouvre une nouvelle fenêtre
• print( ) imprime le contenu de la fenêtre
• resizeBy( ) redimensionne la fenêtre d'un
  certain rapport
• resizeTo( ) redimensionne la fenêtre
• setTimeout( ) évalue une chaîne de caractère
  après un certain laps de temps.

11

• L'objet document
• Propriétés
• applets retourne la collection d'applets java
  présente dans le document
• cookie permet de stocker de l'information sous
  forme de cookie
• domain indique le nom de domaine du serveur
  ayant apporté le document
• forms retourne la collection de formulaires
  présents dans le document
• images retourne la collection d'images
  présentes dans le document
• links retourne la collection de liens présents
  dans le document
• referrer indique l'adresse de la page
  précédente
• title indique le titre du document.

12

• Méthodes
• close( ) ferme le document en écriture
• open( ) ouvre le document en écriture
• write( ) écrit dans le document
• writeln( ) écrit dans le document et effectue
  un retour à la ligne.

13
4) Les événements

• Le DOM permet également d'utiliser des
  gestionnaires d'événements qui permettent de
  déclencher des actions lorsqu'un événement
  surgit.
• Ces gestionnaires peuvent être utilisés
  principalement de 2 manières
• ils peuvent être directement déclarés dans la
  balise de l'élément qui devra le prendre en
  compte
• ltA HREF" " onmouseover"changeImage( )"
  ID"lien1"gt
• ils peuvent aussi être déclarés directement dans
  le code Javascript.
• document.links"lien1".onmouseoverchangeImag
  e( )
• Dans l'exemple, lorsque le pointeur survolera le
  lien, la fonction
• changeImage( ) sera exécutée.

14

• Quelques gestionnaires d'événements classiques
  applicables à tous les éléments HTML
• onclick, ondblclick déclenché sur un clic, sur
  un double clic de la souris sur l'élément
• onmousedown, onmouseup déclenché sur une
  pression, sur un relâchement, d'un bouton de la
  souris sur l'élémént
• onmouseover, onmouseout déclenché sur
  l'arrivée, sur le départ du pointeur de la zone
  de l'élément
• onkeypress, onkeydown déclenché sur une
  pression, sur un relâchement d'une touche clavier
  sur l'élément
• Pour qu'une fonction soit exécutée dès
  l'ouverture d'un document
• ltBODY onload "fonction( )"gt ou
  document.onloadfonction( )

15
5) Insertion d'un script dans une page HTML

• On peut insérer le code Javascript directement
  dans la page
• ltHTMLgt
• ltHEADgt
• ltTITLEgt
• lt/TITLEgt
• ltSCRIPT LANGUAGE"Javascript"gt
• function bonjour
• window.alert("Bonjour !")
• document.onloadbonjour
• lt/SCRIPTgt
• lt/HEADgt
• ltBODYgt

16

• Une autre possibilité consiste à utiliser la
  propriété SRC de
• l'élément SCRIPT pour faire référence à un script
  externe
• ltHTMLgt
• ltHEADgt
• ltTITLEgt
• lt/TITLEgt
• ltSCRIPT LANGUAGE"Javascript" SRC"script.js"gt
• lt/SCRIPTgt
• lt/HEADgt
• ltBODYgt