JAVASCRIPT
INTRODUCTION
JavaScript permet :
De programmer des actions en fonction d’évènements
d’effectuer des calculs
de valider localement les données saisies par l’utilisateur
d'ajouter des effets d’animation
de détecter la langue, versions du navigateur
de créer de petites applications (calculette, convertisseur)
De créer des jeux ...
- On peut écrire le JavaScript dans un fichier externe (comme avec le CSS).
Dans le <head> du HTML on va utiliser la syntaxe : <script src= « [Link] » </script>
- JS intègre plusieurs types d’objets :
o WINDOW : la fenêtre du navigateur
o DOCUMENTS : la page web qui s’affiche dans la fenêtre du nav
A. WINDOW
Représente la fenêtre du navigateur, qui contient :
- Document
- Navigator
- History ..
WINDOW contient des méthodes telles que :
- alert(message) ; confirm(message) ; prompt(message)
- setTimeout(function,delay) ; setInterval(function,delay)
Exemple : alert(“Hello”)
B. DOCUMENT
Représente la page HTML :
Il permet :
- D’accéder à tous les éléments affichés sur la page,
- De contrôler les saisies,
- Modifier l’apparence et le contenu
DOCUMENT possède : Des méthodes : Des objets :
- Des propriétés : getElementById() Forms
bgcolor addEventListener() Images
title ...
- WINDOW – alert() : Cette méthode va ouvrir une petite fenêtre pop-up avec du texte
Alert(« Hello World ») ;
- WINDOW – prompt() : Cette méthode sert à lire une valeur (input)
x = prompt(« Veuillez saisir votre nom ») ;
- DOCUMENT – confirm() : Cette méthode ouvre une boite de dialogue avec 2 boutons (OK et
Cancel), et retourne un booléen.
<script >
var response = confirm("Êtes-vous sur de vouloir annuler votre
commande ?");
if (response == true) {
alert("Votre commande est annulée!");
}
</script>
SYNTAXE DE BASE
LES VARIABLES
NOTE : on ne peut déclarer une variable
- Pour déclarer une variable, on utilise le mot clé var avec un chiffre d’abord
var x = « Dane » ;
var y = 1234 ; var abc //OK
var z = null ; var a2 //OK
var myArray = [1, 2, 3, 4] ; var 2a //NON
- On peut aussi utiliser le mot clé let
Exemple : let count = 0 ; NOTE : Sa portée est limitée à celle du
let found = true ; bloc courant.
if (score > 100 ) if (score > 100 )
{ {
let message = 'You Win!'; var message = 'You Win!';
[Link](message); [Link](message);
} }
[Link](message); [Link](message);
ERROR YOU WIN
if (score > 100 )
{
let message = 'You Win!';
[Link](message);
}
- Pour déclarer une constante on utilise le mot clé const
const nom = ‘Gharib’ ;
CARACTERE SPECIAUX :
\n : retour a la ligne \ « : guillemet
\t : tabulation \\ : backslah
\’ : cote
LES OPERATEURS :
Les opérateurs arithmétiques : +, -, *, /, %,++,--
Les opérateurs d’assignation : =, +=, -=, *=, /=, %=
Les opérateurs de comparaison : ==, ===, !=, !==, >, >=, <, <=
Les opérateurs logiques : &&, ||, !
== compare deux valeurs quel que soit leur type (égalité tolérante)
=== compare deux valeurs de même type (égalité stricte)
!= différent en valeur
!== différent en valeur et en type
> supérieur à
>= supérieur ou égal à
< inférieur à
<= inférieur ou égal à
2 == '22'; // => true
22 === '22'; // => false
2 !== "2"; // => true
2 !== "3"; // => true
2 !== 2; // => false
- DOCUMENT – write() : Cette méthode permet d’écrire du texte dans la page HTML
<script >
var reference='063WPR1L3';
[Link]("<h2>Techniques de programmation Web</h2>");
[Link]("est le titre du cours ");
[Link](reference);
</script>
IF / ELSE / SWITCH / FOR
if (expression){ if (i < 0) {
instruction1 ; message = 'negatif';
} }
else { else {
instruction2 ; if (i > 0)
} message = 'positif';
else
message = 'Zero' ;
}
switch (n) { var color, message;
case value1: // Initialisation de color
block1;
break; switch(color) {
case value2: case "red": message = "problem";
block2; break;
break; case "green": message = "ok";
default: block3; break;
} case "orange": message = "warning";
break;
default: message = "unknown";
}
[Link](message);
for (initialisation ; condition ; var i;
incrémentation) { for (i=0; i<=5; i++){
instruction; [Link](i);
//... //...
} }
var i=0;
while (expression) { while (i<=5){
instruction; [Link](i);
//... //...
} i++;
}
for (i = 0; i < 10; i++) { for (i = 0; i < 10; i++) {
if (i === 5) { if (i === 5) {
break; } continue; }
text += i + " / ";} text += i + " / ";}
0/ 1/ 2 / 3/ 4/ 0 /1 /2 /3 /4 /6 /7 /8 /9 /
LES FONCTIONS
Pour déclarer une fonction, on utilise les mots clés : functions et return
function average(param1, param2) {
return (param1 + param2) / 2;
}
<!DOCTYPE html>
<html> <head> <script>
function myAlert() {
alert("Bienvenue sur le site de l\'IGE");}
</script>
</head>
<body onload="myAlert();">
</body>
</html>
function helloMessage() {
return 'Hello !';
}
alert(helloMessage());
QUELQUES FONCTIONS NATIVES
1. isNaN (string chaine) : utilisé pour le contrôle de saisie du user, retourne TRUE si chaine n’est pas
un nombre, sinon false
2. parseInt(String chaine, [integer base]) : convertit une chaine en un nombre entier.
3. parseFloat(string chaine) : convertit chaine en un nombre décimal.
4. eval(String chaine) : permet d’évaluer du code qui est sous forme de caractère
OBJETS
1. ARRAY permet de créer et manipuler des
Méthodes :
tableaux.
pop(), supprime le dernier élément du tableau
Propriétés :
shift(), supprime le premier élément du tableau
push(), ajoute des éléments en fin de tableau
length(), donne le nombre d’éléments du tableau
unshift(), insère des éléments en début de tableau
join(), convertit un tableau en chaine ...
2. STRING
Propriétés :
length, donne la longueur de la chaine ...
Méthodes :
toUpperCase(), retourne la chaine en majuscule
toLowerCase(), retourne la chaine en minuscule
substring(beginIndex, endIndex), extrait une sous-chaîne d'une chaîne en partant de
beginIndex et jusqu'à endIndex
charAt(n), retourne le caractère à la position n
indexOf(str, beginIndex), retourne la position de str dans une chaîne, à partir de la position
beginIndex, si la sous-chaîne n'est pas trouvée, elle retourne -1
lastIndexOf(str), retourne l'indice de la dernière occurrence de str, -1 sinon ...
3. MATH
Méthodes : abs(x), retourne la valeur absolue de x
round(x), retourne l’entier arrondi de x
random(), retourne un nombre aléatoire entre 0 et 1 sqrt(x), retourne la racine carrée de x
pow(x,y), renvoie x à la puissance y log(x), retourne le logarithme de x
max(x,y), retourne le plus grand entre x et y min(x,y), retourne le plus petit entre x et y
cos(x), retourne le cosinus de x ...
1. Écrire une fonction rand() permettant de générer un nombre entier aléatoire inferieur à 10.
function rand() {
return ([Link]([Link]() * 10) );
}
2. Écrire une deuxième fonction randInterval(min, max) permettant de générer un nombre entier
aléatoire compris entre min et max.
function randInterval(min, max) {
return (min + [Link]([Link]() * (max - min)) );
}