M.

DIENG Abdoulaye
1
1. Présentation de JavaScript
2. Inclusion du JavaScript
3. Variable
4. Types
5. Opérateurs
6. Entrée/Sortie de base
7. Tableaux
9. Structures de contrôle
10. Fonctions
11. Evénements
12. Objet document
2
 JavaScript, développé par Netscape en 1995, est un langage
de script (côté client) incorporé dans un document
(X)HTML pour créer des pages web interactives.
 JavaScript permet, entre autres, de :
• traiter les saisies et frappes faites au clavier;
• traiter les mouvements et clicks de la souris ;
• réagir aux actions précitées avec des sorties à l'écran ou
des modifications dynamiques dans la page Web.
 JavaScript permet de décharger le serveur de plusieurs
tâches et d'éviter les attentes des réponses aux requêtes
adressées via le réseau internet.
 JavaScript est un langage interprété par le navigateur.
3
 Inclusion interne : n’importe où dans la page html, avec la
balise script comme suit :
<script type="text/javascript">
Placez ici le code de votre script
</script>

 Inclusion externe : écrire le code JavaScript ds un fichier .js

que l’on inclura dans toute page html comme suit :
<script type="text/javascript"
src="chemin/du/fichier_inclus.js"></script>

 Toute dépendance doit être incluse avant le code.

 En production, pour le chargement rapide d’une page :

• inclure éventuellement JavaScript après le contenu ; 4
• combiner plusieurs fichiers JavaScript.
 Une variable permet de désigner un emplacement mémoire
et possède :
• un identificateur ou nom
• une valeur ou contenu « provisoire »;
• un type indiquant comment le contenu doit être
interprété;

 Syntaxe de déclaration d’une variable :

var nomVariable;
(Le mot var est facultatif, mais recommandé)

 Le type d’une variable n’est déterminé que lors de

l'affectation.

5
 Type number:
• Entier : en base 10, en hexadécimal ou en octal.
• Réels : forme décimal ou avec exposant (e ou E).

 Type string:
• une string représente une suite de caractères.
• une string est délimitée par des guillemets (' ou " ).
• l’anti-slash (\) permet d’échapper ou de déspécialiser les
caractères (', ", \).

 Type boolean:
 exprime la valeur true ou la valeur false.
 Seules les valeurs 0 et ses variations, "" (la chaîne vide),
null(absence délibérée de valeur),NaN(Not a Number),
undefined (variable non initialisée) donnent false par 6
conversion.
 Number(obj)
 Convertit l’objet spécifié en nombre ou en NaN.
 Si obj est du type Date , Number retourne une valeur en
millisecondes mesurées depuis le 01 Janvier 1970,
positive après cette date, négative avant.

 parseFloat(chaine)
• Analyse une chaîne et retourne un nombre à virgule
flottante ou retourne NaN.
 parseInt(chaine, base)
• Analyse une chaîne et retourne un entier dans la base
base ou retourne NaN.
 Si un caractère non conforme est rencontré, chacune de
ces fonctions retourne la valeur analysée jusqu'à ce
caractère (exclu). 7
 Opérateurs arithmétiques
+, -, *, /, % (modulo), ++(incrément), --(décrément)
NB : + permet aussi de concaténer deux string

 Opérateurs d’assignation
= (affectation), += (ajouter à), *=, /=, -=, %=
NB : += permet aussi de concaténer deux string

 Opérateurs logiques
&& (et), || (ou), ! (non)

 Opérateurs de comparaison
== (égalité), <, <=, >, >=, != (différent)
8
 prompt("question" [, "texteParDéfaut"])
• Ecrit une question dans une boîte de dialogue munie d’une
zone de saisie et de deux boutons OK et Annuler;
• Le texte par défaut, s’il est mis, s’affiche dans la zone de
saisie pour aider l’internaute à répondre à la question
• Retourne le texte saisi par le visiteur qui appuie aussi sur
OK
• Retourne null si le visiteur clique sur Annuler ou appuie
sur la touche Echap.
• Remplacer les caractères accentués par leur code latin-1 en
octal précédé de l’anti-slash.
Ex : é (\351), è (\350), ê (\352), à (\340)
Table complète : www.pjb.com.au/comp/diacritics.html

9
 confirm("texte")
• Ecrit un texte (entre quotes dans le code source) et/ou la
valeur d’une variable (hors quotes) dans une boîte de
dialogue munie de deux boutons OK et Annuler,
• Retourne true si le visiteur clique sur Ok
• Retourne false si le visiteur clique sur Annuler ou
appuie sur la touche Echap.
• Un texte et une variable sont concaténés par +.
• Pour écrire sur plusieurs lignes, utiliser le caractère \n.
• Remplacer tout caractère non-ASCII par son code latin-1
en octal précédé de l’anti-slash.

10
 alert("texte")
• Ecrit un texte (entre quotes dans le code source) et/ou la
valeur d’une variable (hors quotes) dans une boîte de
dialogue munie d’un bouton OK.
• Un texte et une variable sont concaténés par +.
• Pour écrire sur plusieurs lignes, utiliser le caractère
spécial de retour chariot \n.
• Remplacer tout caractère non-ASCII par son code latin-1
en octal précédé de l’anti-slash.

11
  document.write("texte")
• Ecrit un texte (entre quotes dans le code source) et/ou la
valeur d’une expression (hors quotes) dans le corps
(body) du document, à la position de l'appel du script.

• Un texte et une expression sont concaténés par , ou par

+.

• Pour écrire sur plusieurs lignes, utiliser la balise <br>.

• Remplacer tout caractère non-ASCII par son code html.

12
x
  Les tableaux sont des objets (Array Object).

 Déclaration d’un tableau :

var nomTableau=new Array([dim]);

 Déclaration et initialisation :
• var nomTableau=new Array( element_1 [, element_2, …] );
• var nomTableau=[element_1 [, element_2, …] ];

 length, seule propriété de l’objet Array renvoi le nombre

d’éléments d’un tableau

 Accès à un élément :
nomTableau[ i ] où i varie de 0 à length-1 13
x
 if (condition_1)
{traitement_1}
[else
{traitement_2}]
 if (condition_1)
{traitement_1}
else if (condition_2)
{traitement_2}
… // suite de elseif
else
{traitement_n}

 switch (expression){
case valeur_1 : traitement 1; break;
case valeur_2 : traitement 2; break;
…
[default : traitement par défaut]
14
}
 while(condition){
traitement
}

 do{
traitement
}while(condition);

 for(initialisation; condition; itération ){

traitement
}

 for(var x in obj){
traitement
} 15
x = indice ou propriété de obj x
  Syntaxe de la définition d’une fonction :
function nomDeLaFonction([param_1 [, param_2, …] ] ) {
séquence d'instructions;
[return nom_variable]
}

 Le nom de la fonction est optionnel

 Variable locale = variable déclarée dans une fonction avec var.

 Variable globale = variable déclarée en dehors d’une fonction ou

déclarée sans var

16
x
 Événement = changement d'état de l'environnement qui
peut être intercepté par le code JavaScript
 Quelques évènements
 click : l’élément associé est cliqué
 mouseOut : le pointeur de la souris quitte l’élément
 mouseOver : le pointeur de la souris survole l’élément
 focus : l’élément associé est ciblé
 blur : l’élément associé n’est plus ciblé
 change : le contenu du champ texte associé est modifié
 load : la page est chargée dans le navigateur
 submit : le formulaire associé est soumis

17
 Gérer un événement = associer une action à un événement.
 Syntaxe de la création d’un gestionnaire d'événement :
• Attribut HTML :
<balise onEvenement='Action_JavaScript ou nomFonction();'>
Ex : <body onLoad="alert(‘la page est chargée !’);" >
• Propriété DOM
element.onevenement=function(){ … };
Ex : <span id="clickme">Cliquez-moi !</span>
<script type="text/javascript">
var elt = document.getElementById('clickme');
elt.onclick = function() {
alert("Vous m'avez cliqué !");
};
</script>
element.evenement() déclenche un événement ds le code
18
Ex : form1.submit() // soumet le formulaire form1
 Il permet d’accéder et de modifier le contenu d’une page
Web
 Quelques méthodes de sélection
• getElementById("nomId") retourne un objet html à partir
de son id
• getElementsByTagName("nomElement") retourne un
tableau d‘éléments HTML à partir de leur nom
• querySelector("selecteur") retourne le 1er élément
satisfaisant au sélecteur CSS.
• querySelectorAll("selecteur") retourne tous les éléments
satisfaisant au sélecteur CSS.

19
Expression Retour
elem Les balises elem.
elem bal Balises bal contenues dans une balise elem.
elem > bal Balises bal directement descendantes d’une balise elem.
elem + bal Balises bal immédiatement précédées d'une balise elem.
elem ~ bal Balises bal précédées d'une balise elem.
#nomId Balise ayant l'id "nomId".
.nomClasse Balises ayant la classe "nomClasse".
elem[attr] Balises elem dont l'attribut "attr" est spécifié.
elem[attr="val"] Balises elem dont l'attribut "attr" vaut val.
elem[attr^="val"] Balises elem dont l'attribut "attr" commence par val.
elem[attr$="val"] Balises elem dont l'attribut "attr" se termine par val.
elem[attr*="val"] Balises elem dont l'attribut "attr" contient val. 20
  Une fois sélectionné, tout contenu est accessible en lecture
et en écriture
 nomElement.innerHTML récupère ou définit tout le balisage
et le contenu au sein d'un élément donné.
 nomElement.nomAttribut récupère ou définit la valeur d’un
attribut de l’élément concerné.
 nomElement.style.propriétéCSS récupère ou définit une
propriété de style de l’élément concerné.
 propriétéCSS a presque le même nom qu’en CSS
 Remplacer les "-" par une majuscule sur le mot suivant
Ex : background-color → style.backgroundColor
 nomElement.className récupère ou définit l’attribut class de
21
x
l’élément concerné.
https://developer.mozilla.org/fr/docs/JavaScript/Référence_Ja
vaScript

http://www.toutjavascript.com/reference/

http://www.w3schools.com/jsref/

22