Cours Web nº9 Introduction à JavaScript

Cours Web nº9 Introduction à JavaScript

-

Documents
26 pages
Lire
Le téléchargement nécessite un accès à la bibliothèque YouScribe
Tout savoir sur nos offres

Description

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< ...

Sujets

Informations

Publié par
Nombre de visites sur la page 92
Langue Français
Signaler un problème
Introduction.Pt,P.YgerSenellarortntcudIFI(I)SPriSc26ptnàiovaJa
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
ctdurontInioS.nePtrP,lealavàJcraSucodonti)SPIrtnIegY.FI(r
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
tionoducIntriçasÀquoert?nelePS.P,Y.altrIFIPger(trodS)InJànoitcupircSava/2116/t25/27200
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 fentres, 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 nuds 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
P.SenellartP,Y.eg(rFIPI)SnItiucodtraSavàJon/62tpirc47002/11
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
ionàJavaScript26I(IFSPI)tnorudtc
En pratique, les objets JavaScript qu’on utilisera représenteront le document XHTML, les nuds du documents, la fentre. . .
/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
)SPIFI(rcudortnIavàJontit2ipcraS2/00/6115
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.YgeejNtdoeLbo
alitésrénéGedoNtejboL/102621/52
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 nuds distincts. Ces nuds forment une arborescence. L’objet node dispose de propriétés et de méthodes pour accéder aux différents nuds, 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 nud : Ipour les nuds texte, c’est le texte, Ipour les nuds 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
ontilapuSCStejboLinaMedoN.PudtctnorSPI)I(IFYgert,P.llarSene52/9
node.className="nouvelle classe"pour changer le nom de la _ classe CSS à laquelle appartient le nud. node.style.borderStyle="valeur"pour changer le style de bordure d’un nud. node.style.visibility="valeur"pour changer la visibilité d’un nud node.style.display="valeur"pour changer la propriété CSS display d’un nud.
Règle générale On peut changer de cette façon n’importe quelle propriété CSS, d’un nud. 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
PI)S(rFIdocunIrtella.Sen.Ygert,PPCnSStaoipiluMenajeobodtNLpi2tSarcJàvaitno25
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 :