Cours Web nº9 Introduction à JavaScript
26
pages
Français
Documents
Le téléchargement nécessite un accès à la bibliothèque YouScribe Tout savoir sur nos offres
26
pages
Français
Documents
Le téléchargement nécessite un accès à la bibliothèque YouScribe Tout savoir sur nos offres
IntroductionCours Web nº9Introduction à JavaScriptPierre Senellart (pierre@senellart.com)Pierre Yger (yger@unic.cnrs-gif.fr)26 novembre et 7 décembre 2007P. Senellart, P. Yger (IFIPS) Introduction à JavaScript 26/11/2007 1 / 25IntroductionPlan du cours1 Introduction2 L’objet Node3 Fonctions utiles de JavaScript4 Gestionnaire d’événements5 Références6 ApplicationP. Senellart, P. Yger (IFIPS) Introduction à JavaScript 26/11/2007 1 / 25Introduction À quoi ça sert?PHP, CGI... : permettent des comportements dynamiques côtéserveur. Nécessitent un échange entre le navigateur et le serveur Web(soumission d’un formulaire, clic sur un lien) pour chaquecomportement dynamique souhaité.JavaScript : permet des comportements dynamiques côté client :manipulation des fenêtres, changement dynamique du codeHTML/CSS, interaction fine avec les formulaires...Permet la manipulation du DOM (Document Object Model), lareprésentation du document HTML comme un arbre, les balises étantles nœuds de l’arbre.« Dynamic HTML » (DHTML) : JavaScript + DOM + CSSAlternatives : VBScript (Internet Explorer uniquement), Java (pluscomplet, mais plus lourd, plug-in nécessaire), Flash (nécessite unlogiciel propriétaire pour le développement, plug-in nécessaire).Rien à voir avec Java!P. Senellart, P. Yger (IFIPS) Introduction à JavaScript 26/11/2007 2 / 25Introduction Document Object ModelExampleTitre < ...
Voir
26 novembre et 7 décembre 2007
Cours Web nº9 Introduction à JavaScript
Pierre Senellart (e@seierrart.nellocmp) Pierre Yger (icunr@gegis-nr.crf.fy)
/15202701//1
Références
6
Application
1
Introduction
2
L’objet Node
5
Plan du cours
Fonctions utiles de JavaScript
3
4
Gestionnaire d’événements
5
2/00172/pi2t/611
PHP, CGI. . . : permettent des comportements dynamiquescôté serveur. Nécessitent un échange entre le navigateur et le serveur Web (soumission d’un formulaire, clic sur un lien) pour chaque comportement dynamique souhaité. JavaScript : permet des comportements dynamiquescôté client: manipulation des fentres, changement dynamique du code HTML/CSS, interaction fine avec les formulaires. . . Permet la manipulation du DOM (DocumentObjectModel), la représentation du document HTML comme un arbre, les balises étant les nuds de l’arbre. « Dynamic HTML » (DHTML) : JavaScript + DOM + CSS Alternatives: VBScript (Internet Explorer uniquement), Java (plus complet, mais plus lourd, plug-in nécessaire), Flash (nécessite un logiciel propriétaire pour le développement, plug-in nécessaire). Rien à voir avec Java !
Example
<html lang="fr"xml:lang="fr"xmlns="..."> <head> <title>Titre</title> </head> <body> <p>Contenu</p> </body> </html>
5
fr
fr
title
p
00/2/273
html
@xml:lang
body @lang
head
oductionIPS)Intrpi2t/611JàvaSarcen.SPFI(regY.P,tralleeTitrutnneoCneOtcomuoiDnudtcntroIcejbdoMtle
Langage de Programmation Normalisé sous le nom d’EcmaScript Syntaxe très proche de PHP. Différences : PHP
Variables Concaténation$chaine1.$chaine2 chaine1+chaine2 Interpolation oui ("$toto") non Tableaux$t=array(1,’two’) t=newArray(1,’two’) Taille tableaucount($t) t.length
Liaison d’un script JavaScript avec un document XHTML Itoto.jscontenant des fonctions JavaScript (function) IDans le<head>du XHTML :
<script src="toto.js"type=ipt"ascrj/vaettx"></script>
/25
IGestionnaires d’évènement comme attributs des balises XHTML (cf plus loin).
JavaScript
tpScriJavagageelanLnoitcudortnItoototo$t
En pratique, les objets JavaScript qu’on utilisera représenteront le document XHTML, les nuds du documents, la fentre. . .
/11/700252/5
JavaScript basé sur lemodèle objet. Variables : objets complexes, ayant des propriétés (membres) et des fonctionnalités (fonctions membres,méthodes). En JavaScript, on accède au membre blah de l’objet toto avec toto.blah, et on utilise la méthode bouh de l’objet toto avec toto.bouh(arguments).
voiture.couleur="bleu"; voiture.avance(100); voiture.tourneGauche();
Example Par exemple, un objetvoiturepourrait avoir une propriétécouleuret des fonctionnalitéstourneGauche(),tourneDroite()ouavance(distance). On pourrait alors marquer :
regY.P,tralleneSP.jeobledètrtdonInooMcuit
Fonctions utiles de JavaScript
Plan du cours
672/
Références
6
Application
1
3
4
Gestionnaire d’événements
5
Introduction
2
L’objet Node
P.Senellart,P.YgeejNtdoe’Lbo
L’objetnodeest l’objet central du modèle DOM (Document Object Model). Chaque élément, chaque attribut et chaque donnée en caractères représentent des nuds distincts. Ces nuds forment une arborescence. L’objet node dispose de propriétés et de méthodes pour accéder aux différents nuds, peu importe s’ils sont placés très bas dans l’arborescence.
70/7SPIFI(reudortnI)JanàioctptriScvara,t.PgY.PeSenll
accède à un élément XHTML qui possède un attributidvalanttiti. valeur = node.nodeValuesauvegarde la valeur ou le contenu d’un nud : Ipour les nuds texte, c’est le texte, Ipour les nuds attribut la valeur affectée à l’attribut
52tpi11/6002/2/87oNedéGénarilétnsode=document.getlEmeneBtIy(dt"tii")’oLetbjtrInS)IPIFr(ge.YrcSavaJànoitcudotrP,lealS.neP
node.className="nouvelle classe"pour changer le nom de la _ classe CSS à laquelle appartient le nud. node.style.borderStyle="valeur"pour changer le style de bordure d’un nud. node.style.visibility="valeur"pour changer la visibilité d’un nud node.style.display="valeur"pour changer la propriété CSS display d’un nud.
Règle générale On peut changer de cette façon n’importe quelle propriété CSS, d’un nud. Le nom de la propriété en JavaScript est identique au nom CSS, sauf que les traits d’unions sont remplacés par une majuscule sur la lettre suivante. Les valeurs des propriétés en JavaScript sont identiques aux valeurs CSS (mais doivent tre mis entre guillemets).
/11/7002riSc26ptnàiovaJa
functionTest() { document.getElementById("paragraphe").style.color ="blue"; }
710//2006/11
Explication :L’exemple contient un paragraphe avec le nom idparagraphe et un lien qui si on le clique appelle la fonctionTest(). Cette fonction change la propriété CSScolordu paragraphe, de telle sorte que le paragraphe perde sa couleur rouge et devienne bleu.
<p id="paragraphe"style="color: red;">un texte</p> <a href=""onclick="Test()">Test</a>
XHTML :
Exemple JavaScript :
