3. 2
Généralités sur Javascript
Introduction
Le Javascript est un langage de programmation de scripts
orienté objet.
Le Javascript s’inclut directement dans la page Web (ou dans un
fichier externe) et permet de dynamiser une page HTML, en
ajoutant des interactions avec l’utilisateur, des
animations,comme par exemple :
Afficher/masquer du texte
Faire défiler des images
Créer un diaporama avec un aperçu « en grand » des image
Créer des infobulles
Le Javascript est un langage dit client-side, c’est-à-dire que les
scripts sont exécutés par le navigateur chez le client.
Akram Rekik | Js
8. 7
Bases de JavaScript
Structures de contrôle
!!! Même Syntaxe que le C !!!
Structures de contrôle
if else, switch case, for, while, break, continue, do while
Akram Rekik | Js
9. 8
Bases de JavaScript
Lire/Ecrire
prompt()
Ouvre une boite de dialogue avec une zone saisie et 2 boutons
OK et Annuler, retourne l’information lue
confirm()
Ouvre une boite de dialogue avec 2 boutons OK et Annuler,
retourne un booléen
alert()
Permet d’écrire un message dans une fenêtre
Akram Rekik | Js
10. 9
Bases de JavaScript
Exemple
Exemple
1 < script >
2 var nicks = ’ ’ , nick ,
3 proceed = true ;
4 while ( proceed ) {
5 nick = prompt ( ’Entrez un prenom : ’ );
6 if ( nick ) {
7 nicks += nick + ’ ’;
8 }
9 else {
10 proceed = false ;
11 }
12 }
13 alert ( nicks );
14 </ script >
Akram Rekik | Js
11. 10
Les Evènements
onclick : un clic du bouton gauche de la souris sur une cible
onMouseOver : passage du pointeur de la souris sur une cible
onblur : une perte de focus d’une cible
onfocus : une activation d’une cible
onselect : une selection d’une cible
onchange : une modification du contenue d’une cible
onsubmit : une soumission d’un formulaire
onload : un chargement d’une page
onunload : la fermeture d’une fenetre ou le chargement d’une
page autre que la courante
Akram Rekik | Js
13. 12
Les Tableaux
Tableaux Classiques
var T = new Array()
Tableau classique
var jours = new Array();
var jours = new Array("Lundi", "Mardi", "Mercredi, "Jeudi", "Vendredi",
"Samedi", "Dimanche");
jours[0]
jours.length
Akram Rekik | Js
14. 13
Les Tableaux
Tableaux Associatifs
Tableau associatif
var tableau = new Array();
tableau["un"] = "La première chaine";
tableau["deux"] = "La deuxième chaine";
tableau["tnt"] = "pleib d’autres chaines";
tableau.length
Akram Rekik | Js
15. 14
Les Tableux
Les Méthodes de l’objet Array
var tableau3=tableau1.concat(tableau2);
var chaine=tableau.join(séparateur);
tableau.pop();
tableau.reverse();
tableau.sort();
Le tri est irréversible ! Une fois trié, il est impossible de récupérer
votre tableau dans l’ordre initial.
Akram Rekik | Js
16. 15
Les Tableaux
Exemple 1
Exemple 1
1 var table = new Array("Pierre","Paul","Jacques");
2 table [3] = "Toto";
3 table.sort ();
4
5 function lire1(tab)
6 {
7 var chaine = "Le tableau contient :"
8 for(var i=0; i<tab.length; i++)
9 chaine += "n" + i + " -> " + tab[i];
10
11 alert(chaine );
12 }
13
14 lire1(table );
Akram Rekik | Js
17. 16
Les Tableaux
Exemple 2
Exemple 2
1 var table = new Array("Pierre","Paul","Jacques");
2 table [3] = "Toto";
3 table.reverse ();
4
5 function lire2(tab)
6 {
7 var chaine = "Le tableau contient :";
8 for(var indice in tab)
9 chaine +="n" +indice+ " -> " +tab[indice ];
10
11 alert(chaine );
12 }
13
14 lire2(table );
Akram Rekik | Js
19. 18
Les Objets Prédéfinis
L’Objet Math
L’Objet Math
Propriétés
Propriétés: Math.PI et Math.E
Méthodes
atan(), acos(), asin(),tan(), cos(), sin(),
abs(), exp(), log(), max(), min(), pow(),
round(), sqrt(), floor(), random()
Akram Rekik | Js
20. 19
Les Objets Prédéfinis
L’Objet Document
Objet Document
Attributs
title : titre
Méthodes
write() : écrire
getElementById("id")
getElementsByTagName("balise")
Evénements
onClick et onDblClick : lors d’un clic / double clic sur l’élément en
question
onMouseMove : lors d’un déplacement de la souris au-dessus
de cet élément
Akram Rekik | Js
21. 20
Les Objets Prédéfinis
L’Objet Form
Objet Form
Attributs
name : nom
action : fichier
method : get ou post
enctype : encodage
Méthodes
submit() : soumission
reset() : remise à zèro
Evénements
onSubmit() : lors de la soumission
onReset() : lors de la remise à zèro
Akram Rekik | Js
22. 21
Les Elèments d’un Formulaire
Input Text
<input type="text" id="motclef" value="Mot clef">
Les propriétés :
value : valeur
defaultValue : valeur par défault
form : objet formulaire
maxLength : longueur maximale
Les méthodes :
blur() : perte de focus
focus() : prise de focus
select() : donne le focus et sélectionne la zone de saisie
Les événements :
onBlur : lors de la perte de focus
onChange : lors d’un changement
onFocus : lors de la prise de focus
Akram Rekik | Js
23. 22
Les Elèments d’un Formulaire
input button
input button
Les propriétés :
value : libellé
Les méthodes :
click() : clic
Les événements :
onClick : lors d’un clic
Akram Rekik | Js
24. 23
Les Elèments d’un Formulaire
select
select
Les propriétés :
size : nombre de lignes
options : tableau
value : valeur
text : libellé
defaultSelected : true of false
selected : true of false
selectedIndex : indice de la ligne sélectionnée
Akram Rekik | Js
25. 24
Les Elèments d’un Formulaire
Exemple
Exemple
1 // mettre cette fonction dans le script.js
2 function Selection(liste)
3 {
4 var numero = liste.selectedIndex;
5 var valeur = liste.options[numero ]. value;
6 alert("Vous avez choisi : " + valeur );
7 }
8 //ce code dans la page html
9 Vous etes :
10 <select name="genre" onchange="Selection(this)">
11 <option value="rien">Choisissez ...</ option >
12 <option value="garcon">Un garçon </option >
13 <option value="fille">Une fille </option >
14 <option value="saispas">Je ne sais pas </option >
15 </select >
Akram Rekik | Js
26. 25
Les Elèments d’un Formulaire
Exemple
Exemple
1 <img src="ossec.png" alt="" id="uneImage" />
2 document.getElementById("uneImage"). onclick =
3 function ()
4 {
5 alert("Oui ?");
6 }
Akram Rekik | Js