MODULE: 1
APPLICATIONS
HYPERMEDIA
Partie IIi: Javascript
CFP Agadir Formateur: Adnan ET-TAYEB [email protected]
Sommaire
Introduction
Emplacement du code JavaScript
Syntaxe
Les événements
Exemples de script
Exercices
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2012/2013
Introduction
3
JavaScript est un langage client c'est-à-dire
exécuté chez l'utilisateur lorsque la page Web est
chargée:
C’est un langage:
▪ intégrés aux pages HTML
▪ interprété par le navigateur
▪ Orienté objet
▪ Permet de dynamiser les sites web
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2012/2013
Introduction
4
JavaScript est un langage utilisé (en complément)
avec l’HTML et le CSS, il permet de:
▪ Afficher les informations variables (date, heure, …)
▪ Interagir avec les utilisateur
▪ Réagir à un événement particulier
▪ Valider des données sans utiliser un serveur
▪ Lire et écrire des éléments HTML
▪ Créer des menus dynamiques
▪ …
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2012/2013
Introduction
5
Un programme créé en JavaScript consiste à:
▪ Définir des variables: (chaque variable est
caractérisée par: nom, type et valeur)
▪ Ecrire des instructions (affectation, calcul, affichage,
…)
▪ Accéder aux objets des documents HTML: (fenêtres,
documents, formulaires, …)
▪ …
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2012/2013
Emplacement du code JavaScript
6
<head>
<title></title>
Dans l’entête de la <meta charset= " utf-8 " />
page, à l’intérieure de
<!-- commentaire HTML -->
la balise script:
<style>
</* commentaire CSS */>
…
</style>
<script type= " text/javascript " >
</* commentaire JavaScript */>
//Commentaire sur une ligne
…
</script>
</head>
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2012/2013
Emplacement du code JavaScript
7
Il est possible d’insérer le code JavaScript:
▪ Entre les balise body, dans ce cas le script sera exécuté au chargement de
la page.
▪ Dans les balises HTML, dans le cas d’un code bref.
▪ Dans un fichier externe d’extension ‘js’, dans ce cas on indique
l’emplacement de ce fichier dans l’entête. Cette méthode permet d’utiliser le
même script dans plusieurs pages.
<script type="text/javascript" src="Mon_Fichier.js">
</script>
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2012/2013
Syntaxe
Déclarer une variable grâce var i, j=0, chaine="Bonjour";
au mot clef var. var bool="true";
La définition d’une fonction function mafonction(argt1,arg2,...){
grâce lignes de code
Au mot clef function return sortie; //commande optionnelle
}
Les conditions if (condition){
égalité : == ...............
différent de : != }
inférieur ou égal à : =< else{
et logique : && ...............
ou logique : || }
Négation: !
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2012/2013
Syntaxe
La boucle for for (i=0; i<5; i++){
...............
}
La boucle while while (a<b){
...............
}
La boucle do do{
...............
}while (a<b)
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2012/2013
Syntaxe
La commande switch switch (expression)
{
case val1:
//code à exécuter si
//(expression =val1)
break;
…
default:
//code à exécuter si
// expression est différente
//de tout les valeurs rencontrées
}
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2012/2013
Les variables
Fonctions Observations
var b1 = new Boolean(true); Déclarer et initialiser un booléen
var s = new String("chaine"); Déclarer une chaine de caractères
Adnan ET-TAYEB ---- ISTA AGADIR ----
2012/2013
Les tableaux
Fonctions Observations
var noms = new Array(3); Déclarer un tableau de taille 3
var tab = new Array("1","A",5); Déclarer et initialiser un tableau
for(i=0;i<3;i++) alert(tab[i]); Afficher les éléments du tableau ‘tab’
document.write(noms); Afficher les éléments du tableau ‘tab’
document.write(noms.join(" | ")); Afficher les éléments du tableau ‘tab’
Var longueur = tab.length; Récupérer la taille de ‘tab’
tab.sort(); Trier le tableau tab dans l'ordre alphabétique
noms.push(4); Ajouter une valeur au tableau ‘tab’
Adnan ET-TAYEB ---- ISTA AGADIR ----
2012/2013
Fonctions
Fonctions Observations
var b1 = new Boolean(true); Déclarer et initialiser un booléen
document.write("valeur de b1 : ",b1); Afficher la valeur de la variable b1
document.write("<br>"); Ecrire de code HTML en utilisant JavaScript
document.write("contraire de b1 : Afficher le contraire de b1
",!b1);
Adnan ET-TAYEB ---- ISTA AGADIR ----
2012/2013
Fonctions
Fonctions Observations
var nbr = parseInt("3"); Convertir une chaine en nombre entier
var nbr = parseFloat("3"); Convertir une chaine en nombre réel
var nbr = Math.abs(x) Calculer la valeur absolue d’un nombre
var nbr = Math.cos(x) Calculer le cosinus
var nbr = Math.max(x,y) Calculer le maximum de deux nombre
var nbr = Math.random() Générer un nombre aléatoire
var nbr = Math.sqrt(x) Calculer le racine carré
var nbr = Math.pow(x,y) Calculer x à la puissance y
--- ---
Adnan ET-TAYEB ---- ISTA AGADIR ----
2012/2013
Les événements
15
les événements permettent de déclencher l’exécution
de code JavaScript.
Les événement commencent par ‘on’, ils sont insérer dans les
balise HTML.
Exemple 1:
<input type="button" onclick="maFonction()">
Après l’événement clic de ce bouton la fonction:
maFonction() sera exécutée.
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2012/2013
Les événements
16
les événements permettent de déclencher l’exécution
de code JavaScript.
Les événement commencent par ‘on’, ils sont insérer dans les
balise HTML.
Exemple 2:
<a href="javascript:alert(‘Message !')">Cliquer ici</a>
Après l’événement clic de ce lien la fonction:
alert(‘Message !') sera exécutée. Elle affiche: ’Message !’
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2012/2013
Les événements
Evénement L’événement survient
onload après le chargement de la page
onunload lors de la fermeture de la page
onbeforeunload juste avant la fermeture de la fenêtre
onclick lors d'un clic sur le bouton gauche
ondblclick lors d’un double-clic sur le bouton gauche
onmousedown quand on enfonce l’un des boutons de la souris
onmouseup quand on relâche l’un des boutons de la souris
onmousemove lorsque la souris se déplace dans un objet du document
onkeydown quand on enfonce une touche du clavier
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2012/2013
Les événements
Evénement L’événement survient …
onkeyup quand on relâche la touche
onkeypressed quand on enfonce une touche du clavier
onblur quand l'élément perd le focus
onfocus quand l'élément a le focus
onchange quand l'élément perd le focus et que son contenu a changé
onsubmit juste avant l'envoi d'un formulaire
onreset lors de la réinitialisation du formulaire
onselect quand le contenu d'un élément est sélectionné
onscroll lors de l'utilisation de la barre de défilement
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2012/2013
Les événements
Evénement L’événement survient …
onbeforeprint avant l'impression (après le clic sur le bouton Ok de la
fenêtre d'impression)
onafterprint après l'impression
oncopy lors du copier vers le pressepapier
onpaste lors du coller depuis le presse-papier
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2012/2013
Exemples de script
Exemple 1: Script qui permet de générer un bout de la page web
<body>
<script language="JavaScript">
document.write("Bonjour l\’informaticien !");
</script>
</body>
N.B: on utilise \ pour afficher les caractères spéciaux.
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2012/2013
Exemples de script
Exemple 2: Script qui affiche une alerte suite à un événement
<script language="JavaScript">
function bnj(chaine)
{
alert("Bonjour, "+ chaine+"!");
}
</script>
<body>
...
<!-- Utilisation d’un événement pour faire appel à la fonction -->
</body>
N.B: L’opérateur + permet de concaténer deux chaines de caractères.
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2012/2013
Exemples de script
Exemple 3: Script qui demande une information
<body>
<script language="javascript">
//Demande d’une information
var p = prompt("p =",3.14);
var r=20;
document.write("La surface est :" + p*Math.pow(r,2));
</script>
</body>
N.B: La fonction Math.pow(r,2) permet de calculer le nombre r².
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2012/2013
Exemples de script
Exemple 4: Script qui demande une confirmation
<body>
<script language="javascript">
//Demande d’une information
conf = confirm("Voulez vous vraiment effectuer cette action
?");
var rep = (conf =="1")?"Oui":"Non";
document.write(conf + " " + rep);
</script>
</body>
N.B: rep=(condition)?val1:val2 :C’est la structure de contrôle
condensée.
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2012/2013
Exercices
Exercice 1: Validation d’un formulaire.
Ecrire le code d’une page web contenant un formulaire, puis
programmer en JavaScript la fonction qui permet de faire la validation de ce
formulaire.
Indications:
Utiliser l’instruction suivante pour modifier la classe d’un élément:
document.getElementById("id").className="nom_classe";
Utiliser l’instruction suivante pour modifier la valeur d’un élément:
document.getElementById("id").value ="valeur";
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2012/2013
Exercices
Exercice 2: Calculatrice
Ecrire le code d’une
page web qui permet de
faire les calcules standards.
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2012/2013
Exercices
Liste contenant
trois éléments <a>
Exercice 3: Boîte d'onglets.
Ecrire le code d’une
page web contenant trois
onglets, puis programmer en
JavaScript la fonction qui
permet de passer d’un
onglet à un autre.
Trois balises div
superposées
Adnan ET-TAYEB ---- ISTA AGADIR ---- 2012/2013
