Lamiae
Cours JavaScript les ajouts requis dans HTML, tutoriel & guide de travaux pratiques en pdf.
Introduction
Pourquoi JavaScript ?
– Limiter les échanges entre client et serveur
– Permettre des vérifications localement (date, nombre, …)
– Ajouter de l’interactivité aux pages Web
– Bouton, textes, listes, …
– Java ou JavaScript ?
– Java = langage de programmation, indépendant de HTML, puissant
– JavaScript = ancré dans HTML, langage interprété, Variables non typées
– Pourquoi faire ?
– Traitement local (client) d’événements déclenchés par l’utilisateur
– Applications simples (calculettes, convertisseurs, devis automatique)
– Aspects graphiques (modifications d’images liées à la position de la souris)
– Tests de validité (saisie de chiffres exclusivement)
– Chargement de plugin
Exemples
<HTML>
<HEAD>
<TITLE> Premier exemple de JavaScript </TITLE>
<SCRIPT LANGUAGE="JavaScript1.2">
var tabCol = new Array("#FFF000","#FFFF00","#F000F0","#FF00FF","#F0F0F0","#FFF0FF");
var indiceCol=0;
function fin()
{ window.close(); }
function changeColor()
{ document.bgColor=tabCol[indiceCol]; indiceCol = (indiceCol+1)%6; }
</SCRIPT>
</HEAD>
<BODY>
Ce premier exemple montre comment JavaScript permet de declencher <Br><Br><Br>
la fermeture d’une fenetre en cliquant sur un lien <A HREF= »JavaScript:fin() »> (ici) </A> <Br><Br><Br>
ou en passant avec la souris sur un autre lien <A HREF= » » onMouseOver= »fin() »> (celui-ci) </A> <Br><Br><Br>
ou de changer la couleur de fond en passant avec la souris sur un autre lien tel que
<A HREF= » » onMouseOver= »changeColor() »> (celui-ci) </A> par exemple <Br><Br><Br>
Un dernier script pour ajouter un mot :
<SCRIPT language= »JavaScript1.2″>
document.write(‘FIN’)
</SCRIPT>
</BODY>
</HTML>
Les ajouts requis dans HTML
– Balise SCRIPT (entre <HEAD> et </HEAD>)
– Permet l’insertion de code exécuté par le browser
– Attribut LANGUAGE= »JavaScript1.2″
– Attribut SRC= »filename.js » : charger du code stocké dans un autre fichier on peut écrire plusieurs fois dans le même fichier <SCRIPT src=f1.js> en changeant le nom du fichier à charger. ATTENTION au conflit de noms.
– Entre <Head> et </Head> :
– Code chargé en même temps que le reste de la page
– Non exécuté
– Entre <Body> et </Body>
– Code chargé en même temps que le reste de la page
– Si exécutable : exécuté en même temps que les autres balises HTML
– Si définition de fonctions : fonctions stockées et non exécutée
Attention au temps de chargement !!
Ajouts … (suite)
– Pseudo-protocole JavaScript
– Dans l’attribut HREF de la balise A
– Complémentaire à HTML, FTP, …
– Provoque l’exécution de code JavaScript
– Nouveaux attributs de balises
– Gère les évènements utilisateur (clic, over, keypress, change, …)
– <Balise onEvenement= »javaScript_Function_to_Execute »)>
– onMouseOver, onKeyUp, …
……..
Si le lien ne fonctionne pas correctement, veuillez nous contacter (mentionner le lien dans votre message)Télécharger cours JavaScript 3CM, 6TP (6.1 MO) (Cours PDF)
