Vous êtes sur la page 1sur 18

Formation continue, septembre-octobre2000

Javascript
Javascript
Grald Collaud
Centre NTE, Universit de Fribourg
G. Collaud, Cration de pages web, septembre-octobre 2000
Programme
Programme
! Survol - Contexte
! Avantages et inconvnients
! Concepts principaux
! Quelques exemples
! Remarques
! Quelques sites
! Elments du langage
! Ateliers / exercices
G. Collaud, Cration de pages web, septembre-octobre 2000
Survol
Survol
! Langage de programmation
! Interprt
! Gnralement intgr au code HTML
! Ajoute une certaine interactivit
G. Collaud, Cration de pages web, septembre-octobre 2000
Vue d'ensemble
Vue d'ensemble
Pages HTML statiques simples
Pages HTML statiques simples
Image Maps
Image Maps
Javascript
Javascript
HTML
HTML
tendu
tendu
Feuilles de style
Feuilles de style
Scripts CGI
Scripts CGI
Java
Java
XML
XML
VRML
VRML
SMIL
SMIL
Vido
Vido
Audio
Audio
ASP
ASP
PHP
PHP
Plugins
Plugins
G. Collaud, Cration de pages web, septembre-octobre 2000
Avantages et inconvnients
Avantages et inconvnients
! Facile apprendre
! Dveloppement rapide
! Facile dbugger
! Indpendant de la plate-forme
! Petite priode
d'apprentissage
! interactivit
(crire du texte ou du html,
montrer des images, faire dfiler
du texte en bas de page, etc, )
! Mthodes existantes limites
! Difficile de cacher le code
! Peu d'outils de dveloppement
! Pas toujours stable
! Pas toujours compatible
! interaction limite
pas question de lire ou d'crire un
fichier (scurit)
G. Collaud, Cration de pages web, septembre-octobre 2000
Concepts principaux
Concepts principaux
! Variables
! Objets (notation par points)
! Fonctions vs. mthodes
! Evnements
G. Collaud, Cration de pages web, septembre-octobre 2000
Rudiments
Rudiments
! Habituellement, le code se place entre la fin de la balise de titre
</title> et la fin de la balise d'entte </head>, mais peut se mettre
aussi ailleurs
! Commence par :
<script language="Javascript">
! Se termine par :
</script>
! Commentaires :
// et /* -- */
G. Collaud, Cration de pages web, septembre-octobre 2000
Exemple simple
Exemple simple
<html>
<head>
<title>Premier script</title>
<script language="JavaScript>
document.write( Hello world ! )
</script>
</head>
<body>
...
</body>
</html>
G. Collaud, Cration de pages web, septembre-octobre 2000
Exemple : dialogue
Exemple : dialogue
<html>
<head>
<title>Premier script</title>
<script language="JavaScript">
<!-- Hide
alert("Bonjour, ceci est un dialogue");
// -->
</script>
</head>
<body>
</body>
</html>
G. Collaud, Cration de pages web, septembre-octobre 2000
Exemple : variable
Exemple : variable
<script language="JavaScript">
<!-- Hide
var reponse = "Bonjour, Grald"
alert(reponse);
// -->
</script>
G. Collaud, Cration de pages web, septembre-octobre 2000
Exemple : dialogue
Exemple : dialogue
<script language="JavaScript">
<!-- Hide
var reponse = prompt("Quel est votre nom ?", "")
alert("Bonjour, " + reponse);
// -->
</script>
G. Collaud, Cration de pages web, septembre-octobre 2000
Exemple : vnements et fonctions
Exemple : vnements et fonctions
<html>
<head><title>Premier script</title>
<script language="JavaScript">
function giveDate() {
alert(document.lastModified);
}
</script>
</head>
<body bgcolor=ffffff>
<a href="#" onClick="giveDate();">
Ce lien affiche un dialogue avec la date de modification du document</a>
</body>
</html>
G. Collaud, Cration de pages web, septembre-octobre 2000
Exemple : objets et fonctions
Exemple : objets et fonctions
<script language="JavaScript">
<!-- Hide
document.write("<h2>This page was last updated on " +
document.lastModified + "</h2>")
// -->
</script>
G. Collaud, Cration de pages web, septembre-octobre 2000
Remarques
Remarques
! Javascript vs. Java
! Javascript vs. Javascript
! Livre de rfrence
! View source
! Exprimentez
G. Collaud, Cration de pages web, septembre-octobre 2000
Quelques sites
Quelques sites
! Touchez les carrs
http://www.hotwired.com/webmonkey/98/03/image_swap.html
! Calculs simples
http://www.hotwired.com/webmonkey/98/03/calculations.html
! Validation d'un formulaire
http://mis.huji.ac.il/ttt/validate.html
http://mis.huji.ac.il/ttt/hase.validate.html
G. Collaud, Cration de pages web, septembre-octobre 2000
Collections
Collections
d'exemples
d'exemples
! Calculatrices, Calendriers, Menus, Table de multiplication,
Utilisation des cookies, Encryption, ...
http://gsb.haifa.ac.il/~sheizaf/ecommerce/javascript.examples.html
! Divers
http://mis.huji.ac.il/ttt/javascript.examples.html
http://tanega.com/java/java.html
G. Collaud, Cration de pages web, septembre-octobre 2000
Sites en
Sites en
fran
fran
ais
ais
! Gnral
http://www.commentcamarche.net/index.html
! Tutoriel
http://jlcastellani.free.fr/jscript.htm
!
http://sarcher.citeweb.net/javascript/
! Quelques rfrences de yahoo france :
http://fr.dir.yahoo.com/informatique_et_multimedia/Langages_de_
programmation/JavaScript/
! Exemples
http://www.chez.com/helleven/java/
http://www.xhtml.net/langages/javascript/
G. Collaud, Cration de pages web, septembre-octobre 2000
El
El
ments du langage
ments du langage
! Variables
! Squence
! Choix
! Boucles
! Procdures et Fonctions
! Mthodes
! Interaction avec HTML
" balise script
" objets
" vnements