JavaScript
Introduction au développement web
Objectifs du cours
Après ce cours vous serez capable de:
– Expliquer les origine du JavaScript
– Décrire comment le JavaScript fonctionne
– Expliquer son utilité
– Écrire les procédures de base avec le JavaScript
– Manipuler le DOM
Plan du cours
Présentaion
Les notions de bases
Fonctions & porté
Les événements
Les interactions avec le
DOM
Modélisation des objets
INTRODUCTION
Allons à la découverte de JavaScript
Introduction
• Le JavaScript est un langage de script
• Inventé par Brendan Eich (Netscape) en 1995
• Ce langage est inspire d’autres tells que le Java et le Python
Introduction
Préentation
• Au début, un langage coté serveur LiveScript
• Après, la version coté client appelé JavaScript
– Partenariat entre Sun et Netscape pour le nom
– “JavaScript” était une marque de Sun et maintenant Oracle
Introduction
Préentation
• Coté client interpreté par le navigateur
• Différent de php
• Complémentaire à HTML et CSS
– Ajoute le dynamism au web
• Interaction avec l’utilisateur
• Animation
• Aide à la navigation
Introduction
Présntation
• Comme le CSS, le code javascript peut être défini dans:
• Le code HTML
• Un fichier séparé (.js)
Introduction
Préentation
• Basé sur les évenements:
• Onload • onabort
• Onfocus • onerror
• Onclick • onmouseover
• Ondbclick • ….
• Associé aux objets du DOM :
window, documents, forms
Introduction
Les librairies
• Il y a plusieurs librairie
– jQuery
– Ext JS
– Prototype
– Dojo
– Etc…
Questions ?
Notions de base
Allons à la découverte du JavaScript
Notions de base
Hello world
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<script type="text/javascript">
alert('Hello world!');
</script>
</body>
</html>
Notions de base
Implémenation du JavaScript
Deux emplacements pour declarer le JavaScript
Directement dans le code html entre les balises <script>
<script type="text/javascript">
var name = "Grima";
</script>
Dans un fichier externe (bonne pratique)
<script type="text/javascript"
src="[Link]"></script>
Notions de base
Syntaxe de base
Une instruction se termine par un point virgule (;)
<script type="text/javascript">
Instruction_1;
Instruction_2; Instruction_3;
</script>
C’est possible d’aligner plusieurs instructions
Notions de base
Syntaxe de base
Les commentaires monolignes sont créées par //, et multiligne par /* et
*/
<script type="text/javascript">
// Single line comment
/* Multi
line
comment */
</script>
Notions de base
Syntaxe de base
Afficher du texte dans le consol: [Link]()
<script type="text/javascript">
// Displays Hello Universe!
[Link]("Hello Universe!");
</script>
Notions de base
Syntaxe de base
Afficher du texte sur une page web: [Link]()
<script type="text/javascript">
// Add « Hello World! » inside the page
[Link]("Hello World!");
</script>
Notions de base
Syntaxe de base
Afficher du texte via une boite de dialogue: [Link](message)
[Link]("My message is great!");
// Ceci aussi fonctionne
alert("My message is great!");
Notions de base
Syntaxe de base
Interaction avec l’utilisateur : [Link](message)
var returnValue = [Link]("Question", "Text");
// Ceci aussi fonctionne
returnValue = prompt("Question", "Text");
Notions de base
Variables
Respect de la casse
myvariable ≠ myVariable
On assigne une valeur à une variable en tapant son nom à gauche du signe
d’égalité (=), et la valeur à droite
Notions de base
Variables
Déclaration explicite avec le mot clé var
<script type="text/javascript">
var name = « Ferdinand";
</script>
Le nom d’une variable:
Ne peut pas commencer par un nombre
Doit contenir uniquement les caractères alphanumériques
Ne peut pas être un mot reserve (var, for ………..)
Notions de base
Variables
Déclaration implicite sans le mot clé var
<script type="text/javascript">
name = "Doug";
</script>
Notions de base
Variables
Concaténation: combine des chaine de caratères avec d’autres types
Opérateur +
var max_age = 18;
var message = « pas permis pour les moins de" + max_age
+ " ans";
Notions de base
Variables
Mauvais “typage”
Le type d’une variable défini le formatage de son contenu
Obtention du type d’une variable: typeof
var myVar1 = "I am a string !";
var myVar2 = "Am I really a string ?";
myVar2 = 100;
[Link](typeof myVar1); // Va
afficher"string"
[Link](typeof myVar2); // Va afficher
"number"
Notions de base
Les opérateurs
Les opérateurs mathématiues
Notions de base
Les opérateurs
Les opérateurs de comparison (salary = 2800)
Notions de base
Les opérateurs
Les opérateurs logiques
Symbol Example Explanation
&& age == 18 && salary > 2800 AND
|| age == 18 || salary > 2800 OR
^ age == 18 ^ salary > 2800 Exclusive OR
Notions de base
Les opérateurs
Operation divers
Notions de base
Les conditions
Test conditionnel : if … else if … else
if( expression1 ) {
// If "expression1" is evaluated to true, then this
// block is executed
} else if ( expression2 ) {
// Otherwise, if "expression2" is evaluated to true,
// this block is executed
} else {
// Otherwise, this code block is executed
}
Notions de base
Les conditions
switch
switch(myVar) {
case "case1":
// if(myVar === "case1")
break;
case "case2":
// if(myVar === "case2")
break;
default:
// else - Default code to execute
break;
}
Notions de base
Les boucles
Boucles conditionnelles: while
// It loops 40 times
var myVariable = 40;
while( myVariable > 0 ) {
myVariable = myVariable – 1;
}
Notions de base
Les boucles
Boucle conditionnelle: do …. while
Même que while
Premier test après la première execution du block de la boocle
var myVariable = 0;
// Loop will execute once even if the test returns
false
do {
myVariable -= 1;
} while (myVariable > 0);
Notions de base
Les boucles
Boucle iterative: for
À specifier:
L’état initial
Condition d’iteration
Instruction d’itération
var a;
for (a = 0; a < 100; a += 1){
// Loop will display Blabla 100
times.
[Link]("<p>Blabla</p>");
}
Notions de base
Les tableaux
Contient des données en sequences
Plusieurs manière pour créer un tableau
En creant un objet de type array
En utilisant les crochet [] (conseillé)
Supporte tous les types de données de JavaScripte
Notions de base
Création des tableaux
var fruitBasket1 = new Array("Apples", "Bananas", "Pears");
var fruitBasket2 = [ "Oranges", "Bananas", "Strawberries"];
var fruitBasket3 = [];
var apple = fruitBasket1[0];
[Link](apple);
Notions de base
Liste des méthodes liées aux tableaux
Méthodes Roles
unshift() Ajouter un item au début du tableau
shift() Retire le premier item du tableau
Pop() Retire le dernier item du tableau
Etc…
Chaine de caractères et tableau
split() Méthode permettant de transformer
une chaine de caractères en tableau
Notions de base
Parcourir un tableau
Avec la boucle for
Notions de base
Les objets littéraux: tableau associatif
Un objet littéral, tableau associatif, est un tableau dont les indices ont un
nom
Ce code va créer un objet identique à un tableau, excepté le fait que chaque
item sera accessible au moyen d'un identifiant
Notions de base
Les objets littéraux : accès aux items
Nous avons deux façons d’accéder aux items d’un objet littéral:
Notions de base
Les objets littéraux : for in
Il n’est pas possible de parcourir un objet littéral avec une boucle for. Pour
se faire nous allons utiliser la boucle for in
Questions
Notions de base
Execice (1/3)
Vous allez écrire votre premier programme en javascript
Jeux de devinette !
Initialisez une variable nommée numberToFind avec un nombre au
hazard entre 0 et 100
Initialisez une autre variable nommée remainingAttempts à une valeur
entière de 7
Notions de base
Execice (2/3)
Tant que l’utilisateur n’a pas trouvé la valeur de numberToFind et a
toujours des possibilités d’essaie,demandez lui de choisir un nombre
Si le nombre choisi correspond à la valeur de la variable
numberToFind
Afficher un message à l’utilisateur pour lui dire qu’il à
gagné
Si le nombre ne correspond pas à la valeur de la variable
numberToFind
afficher un message pour informer l’utilisateur si le nombre à
trouver est plus petit ou non
Notions de base
Execice (3/3)
Allons à la découverte du langage JavaScript
Les fonctions et leur protée
Les fonctions et leur portée
Les fonctions
Un bloc d’instruction
• Déclaré avec le mot clé function
• Peut prendre des valeurs ou références appelés arguments
function myFunction(myParam1, myParam2) {
// Some code to execute
}
Les fonctions et leur portée
Les fonctions
Appelé par son nom suivit de parenthèse:
functionname();
functionName(arguments);
Peut retourner une valeur avec le mot clé return
La valeur retournée peut être utilisée par une autre fonnction
Les fonctions et leur portée
Les fonctions
Exemple
function howOld(year){
var currentYear = new Date().getFullYear();
return currentYear - year;
}
// someValue will contain 22 (if current year is 2012)
var someValue = howOld(1990);
// Will display Bryan is 42 years old (if 2012)
[Link]("Bryan is " + howOld(1970) + " years old");
Les fonctions et leur portée
La portée des variables
Locale
Accessible seulement dans la fonction ou elle est déclarée
Globale
Accessible dans tout le document
Fonction = porté
Déclaration explicite dans la function = variable locale
Déclaration implicite dans la function = variable globale
Les fonctions et leur portée
La portée des variables
Une variable déclarée avec le mot clé var à l’intétieur de la function est
considérée comme locale
Autrement , sans le mot clé var, elle devient une variable globale
Les variables déclarées hors de la function sont considérées globales
var myVar = "I am global\n";
function writeGlobal(){
[Link](myVar);
}
function setGlobal_writeLocal(newValue){
myVar = newValue;
var myVar = "I am local\n";
[Link](myVar);
}
writeGlobal();
setGlobal_writeLocal("I am still global\n");
writeGlobal();
// What displays the console ?
Les fonctions et leur portée
La portée des variables
Attention:
Les variables déclarées avec le mot clé var sont toujours interpreté
avant l’exécution de la function
Les fonctions et leur portée
Les expressions de fonction
Le javascript supporte aussi les expressions de function
Fonctions avec ou sans nom (anonyme)
Peut être utilisé pour contenir des fonctionnalités pour une utilisation
à court terme
var values = [2, 6, 3];
var displaySquare = function(x) {
[Link](x * x);
}
[Link](displaySquare);
Les fonctions et leur portée
Fonctionnement
Une fonction peut être assigné à une variable
Peut être passé comme argument à une fonction
Peut être une valeur de retour d’une fonction
Les fonctions et leur portée
Passer une fonction comme paramètre-
Exemple
Exécuter une action une fois par élément du tableau
L'élément courant est représenté par le param de la fonction anonyme
dans l’exemple suivant
var myArray = ["Apple", "Strawberry"];
[Link]( function(element) {
[Link](element + "/");
});
Les fonctions et leur portée
Fn expression VS Fn declaration
La déclaration d’une fonction est évaluée avant tout autre instruction
Les expressions de fonctions sont évaluées après tout autre instruction
Les fonctions et leur portée
Exemple
function declaration() {
[Link]("I'm a function declaration");
}
var expression = function() {
[Link]("I'm a function expression");
}
declaration();
expression();
Les fonctions et leur portée
Exemple
declaration();
expression();
function declaration() {
[Link]("I'm a function declaration");
}
var expression = function() {
[Link]("I'm a function expression");
}
Questions
A la découverte du language JavaScript
INTERACTION AVEC LE DOM
DOM
INTRODUCTION
Document Object Model
Le standard W3C:
L’ensemble des standards du html
Les outils standards pour accéder et manipuler les
documents html
Indépendant du langage de la plateforme
DOM
INTRODUCTION
L’arborescence simplifiée
DOM
Accès aux éléments
Acces à toute la structure d’une page HTML
De façon dynamique , nous serons capable de:
Accéder aux éléments HTML
Accéder, modifier et supprimer les attributs et des valeurs
Crée, modifier et supprimer les éléments
Organiser des éléments de façon hiérarchique
DOM
Accès aux éléments
Acces à un seul élément en passant par un sélecteur css
[Link]("#myElement");
Acces à une liste d’éléments en passant par un sélecteur css
Retourne un tableau JavaScript contenant tous les
homonymes
[Link]("p");
DOM
Accès aux éléments
Acces aux éléments en passant par le nom de la balise
Retourne un tableau JavaScript contenant tous les
éléments ayant la balise spécifiée
[Link]("p");
DOM
Accès aux éléments
Exemple:
<img id="img1" name="theImage" src="[Link]" />
<script type="text/javascript">
var img = [Link]("#img1");
var elements = [Link]("theImage");
[Link](elements[0] === img); // true
elements = [Link]("img");
[Link](elements[0] === img); // true
</script>
DOM
Accès aux éléments
Accès à tous les nœuds enfants d’un élément
[Link];
Accès à un élément parent
[Link];
DOM
Manipuler les attributs
Accès à un attribut d’un élément
[Link]("attribute");
Modifier les attributs d’un élément
[Link]("attribute", "value");
DOM
Manipuler les valeurs
Accès au texte d’un élément
[Link];
Modifier le texte d’un élément
[Link] = "text";
DOM
Autres manipulations….
Créer un élément
var e = [Link](‘p’);
Ajouter un élément à un parent(élément)
[Link](e);
DOM
Autres manipulations….
Modifier un élément
[Link] = ‘center’;
Supprimer un élément
var e = [Link]("#deleteMe");
[Link](e);
DOM
Autres manipulations….
Ajouter un élément avant un autre
[Link](new_element,element);
Contender
new_element
element
<div id="content">
Accès aux éléments
<h1>Hello world!</h1>
<p>
It's my <strong>awesome</strong> page!
</p>
</div>
<script type="text/javascript">
var divEl = [Link]("#content");
var strongEl = [Link][1].childNodes[1];
// Somehow easier...
var sEl = [Link]("#content strong");
</script>
DOM
Accès en cascade
Sélectionner un élément à partir d’un autre
<p>
<strong>Hello</strong> world!
</p>
<script>
var p = [Link]("p");
var strong = [Link]("strong");
[Link](p);
[Link](strong);
</script>
DOM
Les propriétés d’un élément du DOM
Certaines propriétés très utlies
DOM
Les propriétés d’un élément du DOM
Ajouter un élément avant un autre
<p></p>
var p = [Link]("p");
[Link] = "Hello World";
<p>Hello World</p>
DOM
Les propriétés d’un élément du DOM
Ajouter un élément avant un autre
<p></p>
var p = [Link]("p");
[Link] = “<strong>Hello World </strong>";
<p><strong> Hello World </strong></p>
DOM
Les propriétés d’un élément du DOM
Ajouter un élément avant un autre
<p class="otherClass"></p>
var p = [Link]("p");
[Link]("myClass");
[Link]("otherClass");
<p class="myClass"></p>
DOM
Les propriétés d’un élément du DOM
Ajouter un élément avant un autre
<p>This is a paragraph without style</p>
var p = [Link]("p");
[Link] = "red";
[Link] = "Calibri";
[Link] = "1px blue solid";
[Link] = "uppercase";
[Link] = "200px";
[Link] = "bold";
Questions ?
DOM
Exercice (1/3)
Mettez à jour votre page Devinette
Nous allons changer la fonction alerte par des nœuds DOM
Partie 1:
Utilisez prompt pour demander une valeur à l’utilisateur
Créez des paragraphes et ajoutez-les à la page au lieu
d'afficher des alertes
DOM
Exercice (2/3)
Mettez à jour votre page Devinette
Nous allons changer la fonction alerte par des nœuds DOM
Partie 2 (utiliser la propriété style de vos éléments):
« plus grand » devrait être mis en vert
« plus petit » devrait être mis en rouge
Les deux texte devraient être en gras
DOM
Exercice (3/3)
Exemple du resultat
Découvrir le langage JavaScript
Les événements
Les événements
Présentation
Les évènements sont des actions qui se produisent et auxquelles on va
pouvoir répondre en exécutant un code. Par exemple, on va pouvoir
afficher ou cacher du texte suite à un clic d’un utilisateur sur un élément,
on change la taille d’un texte lors du passage de la souris d’un utilisateur
sur un élément.
Les évènements et leur prise en charge sont l’un des mécanismes
principaux du JavaScript qui vont nous permettre d’ajouter un vrai
dynamisme à nos pages Web.
Les événements
Présentation
Présentation et première définition des évènements
En JavaScript, un évènement est une action qui se produit et qui possède
deux caractéristiques essentielles :
C’est une action qu’on peut « écouter », c’est-à-dire une action
qu’on peut détecter car le système va nous informer qu’elle se
produit ;
C’est une action à laquelle on peut « répondre », c’est-à-dire
qu’on va pouvoir attacher un code à cette action qui va
s’exécuter dès qu’elle va se produire.
Les événements
Présentation
Définir des gestionnaires d’évènements
Pour écouter et répondre à un évènement, nous allons définir ce qu’on
appelle des gestionnaires d’évènements.
Un gestionnaire d’évènements est toujours divisé en deux parties :
une partie qui va servir à écouter le déclenchement de l’évènement,
et une partie gestionnaire en soi qui va être le code à exécuter dès
que l’évènement se produit.
Les événements
Présentation
Aujourd’hui, en JavaScript, il existe trois grandes façons d’implémenter un
gestionnaire d’évènements :
On peut utiliser des attributs HTML de type évènement (non
recommandé) ;
On peut utiliser des propriétés JavaScript liées aux évènements ;
On peut utiliser la méthode addEventListener() (recommandé).
Les événements
Présentation
Utiliser les attributs HTML pour gérer un évènement
Cette façon de faire ne devrait plus être utilisée aujourd’hui. Cependant,
de nombreux sites utilisent encore ce type de syntaxe ce qui nous force à
l’étudier ici.
Les événements
Présentation
Utiliser les propriétés JavaScript pour gérer un évènement
Les événements
Présentation
Utiliser la méthode addEventListener() pour gérer un évènement
Cette dernière façon de gérer les évènements est la manière
recommandée aujourd’hui car c’est la plus flexible et la plus performante.
On va passer deux arguments à cette méthode : le nom d’un évènement
qu’on souhaite prendre en charge ainsi que le code à exécuter (qui
prendra souvent la forme d’une fonction) en cas de déclenchement de cet
évènement.
Les événements
Les attributs des événements standards
Associer un événement au clique du client:
Ancienne méthode de le faire: mauvais pratique
HTML tag Available event of the
that possesses events object
object event
<input type="button" value="push me" click the button');"/>
Arguments action
Available arguments of Action associated to
the object the event
Les événements
Les attributs des événements standards
<input type="button" id="myButton" value="Push me!" />
var button = [Link]("#myButton");
[Link]("onclick", function() {
alert("You clicked the button!");
});
Les événements
Les attributs des événements standards
Les événements
Les attributs des événements standards
Questions ?
Les événements
Exercice (1/2)
• Vous allez ajouter du code JavaScript à votre
formulaire de contact pour valider les entrées des
utilisateurs!
• Créer un nouveau fichier JS.
– Déclarez une fonction nommée validateForm ()
qui valide les saisies dans le formulaire
• Tous les champs doivent être remplis
– Si un champ a une erreur, définissez sa couleur sur
rouge
– Exécutez la fonction lors de la soumission du
formulaire!
Les événements
Exercice (2/2)
• Vous allez jouer avec le gestionnaire
d’événements!
• Créer une page contenant un seul bouton
HTML
• Créer un nouveau fichier JS
– Avec une fonction à l'intérieur:
• goToGoogle(): rediriger l'utilisateur vers le site Web de Google
Découvrir le langage JavaScript
CONCEPT DE CALLBACK
Questions?
