[PROGRAMMATION WEB 2] TI1
Chapitre 3: Initiation à JavaScript
Introduction
Brendan Eich
JavaScript (souvent abrégé JS) est un langage de programmation de scripts
Membre du conseil d'administration de la fondation Mozilla
utilisé dans les pages web interactives. Le langage a été créé en 1995
par Brendan Eich pour le compte de Netscape Communications Corporation.
Le langage, actuellement a la version 1.8.2.
Le Javascript est sensible à la casse, c'est-à-dire qu'il fait une différence entre
un nom de variable contenant ou non des majuscules.
Ainsi la fonction bonjour(); n'est pas la même fonction que Bonjour();.
Comme en langage C, chaque instruction se termine par un point-virgule (;).
JavaScript & Java
Il ne faut pas confondre le JavaScript et le Java. En effet contrairement au langage Java, le code
est directement écrit dans la page HTML, c'est un langage peu évolué qui ne permet aucune
confidentialité au niveau des codes. D'autre part l'applet Java a été préalablement compilée, et
une machine virtuelle permettant d'interpréter le pseudo-code doit être chargée en mémoire
(du côté du client) à chaque chargement de la page, d'où un important ralentissement pour les
applets Java contrairement au JavaScript.
Javascript
Langage interprété
Code intégré au HTML
Langage peu typé Liaisons dynamiques: les références des objets sont vérifiées au chargement Accessibilité du code
Java
Langage pseudo-compilé (chargement d'une machine virtuelle) Code (applet) à part du document HTML, appelé à partir de la page Langage fortement typé (déclaration du type de variable) Liaisons statiques: les objets doivent exister au chargement (compilation)
Confidentialité du code
ISET DE BIZERTE 2014-2015 | HTML5 1
[PROGRAMMATION WEB 2] TI1
Insertion de code JavaScript dans une page HTML
Utilisation de la balise “script”
Un script est une portion de code qui vient s'insérer dans une page HTML. Le code du script
n'est toutefois pas visible dans la fenêtre du navigateur car il est compris entre des balises (ou
tags) spécifiques qui signalent au navigateur qu'il s'agit d'un script écrit en langage JavaScript.
Les balises annonçant un code Javascript sont les suivantes :
<script type="text/javascript" language="JavaScript" >
//Placez ici le code de votre script
</script>
On insère normalement toutes les fonctions et initialisations dans le “head” de la page HTML
(cela assure que les procédures soient connues, avant d’être appelées).
Exemple
programme sayhello() qui permettra d’afficher une petite fenêtre avec le texte: "Bonjour Tout le monde!!!" <HEAD> <TITLE>Hello World avec JavaScript</TITLE> <script language="JavaScript" type="text/javascript"> // ICI on definit une fonction JavaScript function sayhello() { alert("Bonjour tout le monde!!! ") } </script> </HEAD> <BODY>
Script Externe
Il est possible de mettre les portions de code dans un fichier externe. L'appel se fait via l'attribut
SRC, placé dans la balise Script.
Exemple
<html> <head> <title> </title> <script type="text/javascript" src="MonFichier.js"></script> </head> <body>
</body> </html>
ISET DE BIZERTE 2014-2015 | HTML5 2
[PROGRAMMATION WEB 2] TI1
Syntaxes
Déclaration des variables
En JavaScript les variables ne sont pas typées. La déclaration peut se faire d’une manière explicite grâce au mot clef var ou d’une manière implicite.
Exemple
var i; //Déclaration de variable d’une façon explicite i = 2; chaine = "bonjour"; //Déclaration de variable d’une façon implicite bool = true;
Les variables ne doivent pas être des mots-clefs JavaScript : var, form, int, document, etc..
Définition des fonctions
Une fonction est introduite par function.
function nom(arg0, arg1, ..., argN) { //votre script. }
//ou var nom = function (arg0, arg1, ..., argN) { //votre script. }
Exemple
return n1+n2; }
function sum(n1, n2) { alert(sum(5,10)); //15 // ou bien var sum = function (n1, n2) { return n1+n2; }; alert(sum(5,10)); //15
Portée locale d’une variable
function test() { var message = "hi"; } test(); alert(message); // undefined
Portée globale
function test() { message = "hi"; } test(); alert(message); // "hi"
Types
ISET DE BIZERTE 2014-2015 | HTML5 3
[PROGRAMMATION WEB 2] TI1
Types
Il y a principalement trois types classiques de données Boolean, Number, String et un type complexe Object (liste de couples nom-valeurs). Il est possible de déterminer le type (courant) d'une variable avec l'opérateur typeof qui retourne l'une des valeurs suivantes:
undefined si la valeur est indéfinie (variable déclarée mais pas initialisée ou variable non
déclarée) boolean number string object si la valeur est un objet ou null function si la valeur est une fonction
Conversions numériques
Relatifs aux valeurs et conversions des nombres, on trouve 4 fonctions :
isNaN détermine si un paramètre donné n'est pas un nombre Number effectue une conversion parseInt effectue une conversion en valeur entière parseFloat effectue une conversion en valeur réelle
Publicité
Exemple
alert(isNaN(10)); // false alert(isNaN("10")); // false - peut être convertie alert(isNaN("blue")); // true - ne peut être convertie var num1 = Number("hello world"); // NaN var num2 = Number("00001"); // 1 var num3 = Number(true); // 1 var num3 = parseInt(""); // NaN var num4 = parseInt(22.5); // 22 var num5 = parseInt("70",10); // 70 - la base 10 est spécifiée var num6 = parseFloat("22.5"); // 22.5
String
On utilise les quotes simples (apostrophes) ou doubles (guillemets) pour définir des valeurs chaînes de caractères. L'attribut length permet de déterminer la longueur d'une chaîne.
Exemple
var nom = "Ali"; var prenom = 'Mohamed'; alert(prenom.length); // 7 var message = "toto a dit \"je suis malade\".";
Il est possible de transtyper une valeur en chaîne avec String().
Exemple
ISET DE BIZERTE 2014-2015 | HTML5 4
[PROGRAMMATION WEB 2] TI1
var v1 = 10; alert(String(v1)); // "10" var v2 = true; alert(String(v2)); // "true" var v3 = null; alert(String(v3)); // "null" var v4; alert(String(v4)); // "undefined"
Il existe de nombreuses fonctions sur les chaînes de caractères.
Exemple
var s = "hello world"; alert(s.length); // 11 alert(s.charAt(1)); // "e" alert(s.charCodeAt(1)); // 101 alert(s.slice(3)); // "lo world" alert(s.slice(-3)); // "rld" alert(s.substring(3,7)); // "lo w" alert(s.indexOf("o")); // 4 alert(s.lastIndexOf("o")); // 7 alert(s.toUpperCase()); // HELLO WORLD alert(s + " !"); // hellow world !
Math
Il s'agit d'un objet définissant de nombreuses constantes et fonctions mathématiques.
Exemple
alert(Math.E); // la valeur de e alert(Math.PI); // la valeur de pi alert(Math.min(5,12)); // 5 alert(Math.max(23,5,7,130,12)); // 130 alert(Math.ceil(25.3)); // 26 alert(Math.floor(25.8)); //25 alert(Math.random()); // valeur aléatoire entre 0 et 1 var n = Math.floor(Math.random()*nb + min); alert(n); // valeur aléatoire entre min et min+nb (exclus)
D'autres fonctions:
Math.abs(x) Math.exp(x) Math.log(x) Math.pow(x,y) Math.sqrt(x) Math.sin(x) Math.cos(x) Math.tan(x)
Opérateurs
Typiquement, ceux de C, C++ et java:
ISET DE BIZERTE 2014-2015 | HTML5 5
[PROGRAMMATION WEB 2] TI1
incrémentation/décrémentation (++, --)
arithmétiques (+,*,-,=,%)
relationnels (>,<,>=,<=,==,! =) et (===,! ==)
logique (!,&&,||)
affectation (=,+=,-=,*=,/=,%=)
Exemple
var age = 10; age++; alert(age); // 11 alert(age > 10 && age < 20); // true alert(26 % 5); // 1 age*=2; alert(age); // 22
Structures de contrôle
Elles sont très proches de celles de langages tels que C, C++ et Java. Pour rappel, les structures de contrôles sont de trois types :
Séquence : exécution séquentielle d'une suite d'instructions séparées par un point-
virgule
Alternative : structure permettant un choix entre divers blocs d'instructions suivant le
résultat d'un test logique
Boucle : structure itérative permettant de répéter plusieurs fois le même bloc
d'instructions tant qu'une condition de sortie n'est pas avérée
Alternative
L'instruction if sans partie else : if (condition) instruction; if (condition) { instruction; } if (condition) { instruction1; instruction2; ... }
Exemple
if (x >= 0) alert("valeur positive ou nulle"); ... if (note > 12 && note <= 14) { alert("bravo"); mention="bien"; }
L'instruction if...else :
if (condition) instruction1; else instruction2; if (condition) { instructions1; } else { instructions2; }
if (condition1) { instructions1; } else if (condition2) { instructions2; } else { instructions3; }
ISET DE BIZERTE 2014-2015 | HTML5 6
[PROGRAMMATION WEB 2] TI1
Exemple
if (rank == 1)
medaille="or";
else if (rank == 2)
medaille="argent";
else if (rank == 3)
medaille="bronze";
L'opérateur ternaire ?: Permet de remplacer une instruction if...else simple. Sa syntaxe (lorsqu'utilisée pour donner une valeur à une variable) est :
variable = condition ? expressionIf : expressionElse;
Elle est équivalente à:
if (condition) variable=expressionIf; else variable=expressionElse;
Exemple
var civilite = (sexe == "F") ? "Madame" : "Monsieur";
Cet opérateur est utile pour les expressions courtes.
L'instruction switch : switch (expression) { case valeur1 :
instructions1; break; case valeur2 :
instructions2; break;
... case valeurN :
instructionsN; break;
default:
instructionsDefault;
} Le branchement par défaut n'est pas obligatoire.
Boucle
L'instruction while :
while (condition) instruction;
while (condition) { instruction1; instruction2; ... }
Exemple
var num = 1;
Publicité
while (num <= 5) { alert(num); num++; }
ISET DE BIZERTE 2014-2015 | HTML5 7
[PROGRAMMATION WEB 2] TI1
L'instruction for :
for (instructionInit; condition; instructionIter) instruction;
for (instructionInit; condition; instructionIter) { instruction1; instruction2; ... }
Exemple
for (var num = 1; num <= 5; num++) alert(num);
L'instruction do...while :
do {
instruction1;
instruction2;
...
} while (condition);
L'instruction for-in pour les objets :
for (var prop in window)
document.writeln(prop);
Certaines instructions permettent un contrôle supplémentaire sur les boucles :
break permet de quitter la boucle courante
continue permet de terminer l'itération en cours de la boucle courante
Exemple
for (var i=0; i<5; i++) { for (var j=0; j<5; j++) { if ((i+j)%3 == 0) continue; for (var k=0; k<5; k++) { if ((i+j+k)%3 == 0) break; alert(i + " " + j + " " + k); } } }
Exercice
Ecrire le code Javascript qui détermine si un nombre entier x est parfait.
Un nombre est parfait ssi il est égal à la somme de ses diviseurs stricts.
6 est parfait car 6 = 1 + 2 + 3.
Object
ISET DE BIZERTE 2014-2015 | HTML5 8
[PROGRAMMATION WEB 2] TI1
Utilisé pour stocker des données. Création d'une variable (de type Object) avec new Object() ou
de manière littérale (énumération entre accolades).
Exemple
var person = new Object(); person.name = "Julien"; person.age = 23; //ou bien var person = { name : "Julien", age : 23 }
Il est possible d'utiliser les crochets pour accéder à un champ.
alert(person.name);
alert(person["name"]);
var field="name"; alert(person[field]); 35
Array
Les tableaux peuvent contenir des données de nature différente.
Exemple
var colors = new Array(); // tableau vide var colors2 = new Array(20); // tableau avec 20 cases var colors3 = new Array("red","blue","green"); // 3 cases var colors4 = ["red","blue","green"]; // notation littérale
Le champ length indique la taille d'un tableau.
var colors = ["red","blue","green"]; alert(colors.length); // 3 colors[colors.length]="black"; // nouvelle couleur colors[99]="pink"; alert(colors.length); // 100 alert(colors[50]): // undefined colors.length=10; // plus que 10 cases
De nombreuses méthodes existent sur les tableaux.
Exemple
var colors = ["red","blue","green"]; alert(colors); // red,blue,green alert(colors.join(";")); // red;blue;green colors.push("black"); alert(colors); // red,blue,green,black var item = colors.pop(); alert(item + " " + colors); // black red,blue,green var item2= colors.shift();
ISET DE BIZERTE 2014-2015 | HTML5 9
[PROGRAMMATION WEB 2] TI1
alert(item2 + " " + colors); // red blue,green
Il existe d'autres méthodes telles que concat, slice et splice.
Ré-ordonner les tableaux
On peut utiliser reverse et sort.
Exemple
var values = [0, 1, 2, 3, 4]; alert(values.reverse()); // 4,3,2,1,0 values = [0, 1, 5, 10, 15]; alert(values.sort()); // 0,1,10,15,5 function compare(value1, value2) { ... } values = [0, 1, 5, 10, 15]; alert(values.sort(compare)); // 0,1,5,10,15
Exercice
Ecrire le corps de la fonction compare ci-dessus qui retourne -1 lorsque le premier argument
est inférieur au second, +1 lorsque le premier argument est supérieur au second, et 0 sinon.
Window
L'objet window représente la fenêtre du navigateur.
Exemple
window.moveTo(0,0); window.resizeTo(800,800); var vW = window.open("http://www.isetb.tn","v"); if (vW == null) alert("fenetre bloquee"); else { ... vW.close(); }
Le navigateur peut être configuré de manière à empêcher de modifier son emplacement, de
modifier sa taille ou encore d'afficher une fenêtre pop-up.
Timer
Il est possible de programmer l'exécution d'une méthode à un instant donné ou à des temps
réguliers grâce à setTimeout et setInterval.
Exemple
function helloWorld() { alert("hello world"); } var id = setTimeout(helloWorld, 1000);
ISET DE BIZERTE 2014-2015 | HTML5 10
[PROGRAMMATION WEB 2] TI1
var num=0, max=4, intervalId = setInterval(incrementNumber,500); function incrementNumber() { if (++num == max) clearInterval(intervalId); else alert(num); }
Il est possible d'annuler avec clearTimeout et clearInterval.
Boites de dialogues
Des boites de dialogues peuvent être ouvertes en utilisant les méthodes alert, confirm et
prompt.
Exemple
if (confirm("Voulez vous quitter?")) alert("Au revoir"); else
alert(" Suite… ");
Publicité
var name = prompt("What is your name?","Toto"); if (name != null)
alert("Welcome " + name);
ISET DE BIZERTE 2014-2015 | HTML5 11
[PROGRAMMATION WEB 2] TI1
Annexes : Les évènements
Les évènements vont pouvoir donner lieu à une interactivité. Ce sont les gestionnaires d'événements qui permettent d'associer une action à un événement.
l'utilisateur, qui
actions de
sont des
La syntaxe d'un gestionnaire d'événement est la suivante :
onEvenement="Action_Javascript_ou_Fonction();"
Associer un évènement à un élément
Pour ce faire il suffit de mettre dans la balise le nom de l'évènement et de lui associé une fonction exemple :
<img src='une_image.jpg ' onclick='nom_de_lafonction(parametre1,parametre2)' />
On peut exécuter plusieurs fonctions sur le même évènement pour ce faire il suffit de rajouter un point virgule. <img src='une_image.jpg' onclick='fonction1() ; fonction2() ; fonction3()' />
Liste non exhaustive des évènements
Evénement Description
Objets Associés
onClick
onLoad
Lorsque l'utilisateur clique sur un bouton, un lien ou tout autre élément. Button, document, Checkbox, Link, Radio, Reset, Select, Submit Image, Layer, window
Lorsque la page est chargée par le browser ou le navigateur.
onUnload
Lorsque l'utilisateur quitte la page.
onMouseOver
onDragdrop
onMouseOut
mouseup
onMouseDown
onFocus
Lorsque l'utilisateur place le pointeur de la souris sur un lien ou tout autre élément. lorsque navigateur. Lorsque le pointeur de la souris quitte un lien ou tout autre élément.
l'utilisateur effectue un glisser-déposer sur
la fenêtre du
Lorsqu’ un élément de formulaire a le focus c-à-d devient la zone d'entrée active.
onBlur
Lorsqu’un élément de formulaire perd le focus c-à-d que l'utilisateur clique hors du champs et que la zone d'entrée n'est plus active.
onChange
Lorsque la valeur d'un champ de formulaire est modifiée.
onSelect
onSubmit
onError
Lorsque l'utilisateur sélectionne un champ dans un élément de formulaire. Lorsque l'utilisateur clique sur le bouton Submit pour envoyer un formulaire lorsqu'une erreur apparaît durant le chargement de la page.
window
Area, Layer, Link
window
Layer, Link
Button, document, Link
Button, document, Link
Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, TextArea, window
Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, TextArea, window FileUpload, Select, Submit, Text, TextArea text, Textarea
Form
Image, window
ISET DE BIZERTE 2014-2015 | HTML5 12
[PROGRAMMATION WEB 2] TI1
onKeydown
lorsque l'utilisateur appuie sur une touche de son clavier.
onKeypress
lorsque l'utilisateur maintient une touche de son clavier enfoncée.
lorsque l'utilisateur relâche une touche de son clavier préalablement enfoncée. lorsque l'utilisateur efface les données d'un formulaire à l'aide du bouton Reset. lorsque l'utilisateur redimensionne la fenêtre du navigateur
onKeyup
onReset
onResize
onAbort
dblclick
Image,
Link,
Image,
Link,
Image,
Link,
document, TextArea document, TextArea document, TextArea form
window
image
document, Link
ISET DE BIZERTE 2014-2015 | HTML5 13