Javascript

MODULE: 1
APPLICATIONS
HYPERMEDIA
Partie IIi: Javascript
CFP Agadir Formateur: Adnan ET-TAYEB tec.dev.com@gmail.com

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

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
▪ …

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, …)
▪ …

6
<head>
<title></title>
Dans l’entête de la <meta charset= " utf-8 " />
page, à l’intérieure de

la balise script:
<style>
</* commentaire CSS */>
…
</style>
<script type= " text/javascript " >
</* commentaire JavaScript */>
//Commentaire sur une ligne
…
</script>
</head>

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>

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: !
Syntaxe
La boucle for for (i=0; i<5; i++){
...............
}
La boucle while while (a<b){

...............
}
La boucle do do{
...............
}while (a<b)

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
}

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

2012/2013
Fonctions
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);

2012/2013
Fonctions
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
--- ---

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" >
Après l’événement clic de ce bouton la fonction:

maFonction() sera exécutée.

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 !’

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

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

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

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.

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

</body>
N.B: L’opérateur + permet de concaténer deux chaines de caractères.

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

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.

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";

Exercices
Exercice 2: Calculatrice
Ecrire le code d’une

page web qui permet de
faire les calcules standards.

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

Javascript

Transféré par

Droits d'auteur :

Formats disponibles

Javascript

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Javascript

Transféré par

Droits d'auteur :

Formats disponibles

MODULE: 1

Partie IIi: Javascript

CFP Agadir Formateur: Adnan ET-TAYEB tec.dev.com@gmail.com

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2012/2013

JavaScript est un langage client c'est-à-dire

▪ interprété par le navigateur

▪ Permet de dynamiser les sites web

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2012/2013

JavaScript est un langage utilisé (en complément)

▪ Afficher les informations variables (date, heure, …)

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2012/2013

Un programme créé en JavaScript consiste à:

▪ Définir des variables: (chaque variable est

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2012/2013

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2012/2013

Il est possible d’insérer le code JavaScript:

▪ Dans les balises HTML, dans le cas d’un code bref.

▪ Dans un fichier externe d’extension ‘js’, dans ce cas on indique

<script type="text/javascript" src="Mon_Fichier.js">

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2012/2013

La définition d’une fonction function mafonction(argt1,arg2,...){

Les conditions if (condition){

La boucle while while (a<b){

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2012/2013

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2012/2013

var b1 = new Boolean(true); Déclarer et initialiser un booléen

Adnan ET-TAYEB ---- ISTA AGADIR ----

var noms = new Array(3); Déclarer un tableau de taille 3

Adnan ET-TAYEB ---- ISTA AGADIR ----

var b1 = new Boolean(true); Déclarer et initialiser un booléen

Adnan ET-TAYEB ---- ISTA AGADIR ----

var nbr = parseInt("3"); Convertir une chaine en nombre entier

Adnan ET-TAYEB ---- ISTA AGADIR ----

les événements permettent de déclencher l’exécution

<input type="button" >

Après l’événement clic de ce bouton la fonction:

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2012/2013

les événements permettent de déclencher l’exécution

<a href="javascript:alert(‘Message !')">Cliquer ici</a>

Après l’événement clic de ce lien la fonction:

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2012/2013

Evénement L’événement survient

onload après le chargement de la page

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2012/2013

Evénement L’événement survient …

onkeyup quand on relâche la touche

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2012/2013

Evénement L’événement survient …

onbeforeprint avant l'impression (après le clic sur le bouton Ok de la

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2012/2013

N.B: on utilise \ pour afficher les caractères spéciaux.

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2012/2013

N.B: L’opérateur + permet de concaténer deux chaines de caractères.

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2012/2013

N.B: La fonction Math.pow(r,2) permet de calculer le nombre r².

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2012/2013

N.B: rep=(condition)?val1:val2 :C’est la structure de contrôle

Adnan ET-TAYEB ---- ISTA AGADIR ---- 2012/2013

Ecrire le code d’une page web contenant un formulaire, puis