Javascript - PowerPoint PPT Presentation

Loading...

PPT – Javascript PowerPoint presentation | free to view - id: 2a317b-ZDc1Z



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Javascript

Description:

Javascript = langage de script qui permet d'effectuer des op rations sur les ... En modifiant leur propri t s, nous allons pouvoir les faire bouger, les ... – PowerPoint PPT presentation

Number of Views:26
Avg rating:3.0/5.0
Slides: 17
Provided by: Mot9
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: 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
About PowerShow.com