Objectif général : Savoir créer une réelle interactivité entre le contenu d'une page HTML et l'internaute Objectifs opérationnels: • Stocker et utiliser des données à l’aide des variables et des opérateurs • Communiquer avec le programme à travers le clavier et l’écran • Contrôler le flux d’exécution des instructions • Définir et utiliser des fonctions • Manipuler des tableaux et des chaînes de caractères • Sélectionner du contenu dans une page Web • Manipuler du contenu dans une page Web • Interagir avec l’internaute

1. M. DIENG Abdoulaye
1

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

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

4.  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 ;
• combiner plusieurs fichiers JavaScript.
4

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

6.  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
conversion.
6

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

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

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

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

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

12.  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.
x
12

13.  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
x
13

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

15.  while(condition){
traitement
}
 do{
traitement
}while(condition);
 for(initialisation; condition; itération ){
traitement
}
 for(var x in obj){
traitement
}
x = indice ou propriété de obj 15
x

16.  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
x
16

17.  É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

18.  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
Ex : form1.submit() // soumet le formulaire form1 18

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

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

21.  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
x l’élément concerné.
21

22. https://developer.mozilla.org/fr/docs/JavaScript/Référence_Ja
vaScript
http://www.toutjavascript.com/reference/
http://www.w3schools.com/jsref/
22