Javascript

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>
var name = "Grima";
</script>
 Dans un fichier externe (bonne pratique)
<script type="text/javascript"
src="script.js"></script>
Notions de base
Syntaxe de base
 Une instruction se termine par un point virgule (;)
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
*/
// Single line comment
/* Multi
line
comment */
</script>
Notions de base
Syntaxe de base
 Afficher du texte dans le consol: console.log()
// Displays Hello Universe!

console.log("Hello Universe!");
</script>
Notions de base
Syntaxe de base
 Afficher du texte sur une page web: document.write()
// Add « Hello World! » inside the page

document.write("Hello World!");
</script>
Notions de base
Syntaxe de base
 Afficher du texte via une boite de dialogue: window.alert(message)
window.alert("My message is great!");

// Ceci aussi fonctionne
alert("My message is great!");
Notions de base
Syntaxe de base
 Interaction avec l’utilisateur : window.alert(message)
var returnValue = window.prompt("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
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
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;
document.write(typeof myVar1); // Va
afficher"string"
document.write(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.
document.write("<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];

fruitBasket3.push(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
 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
 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)

console.log("Bryan is " + howOld(1970) + " years old");
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

 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(){
console.log(myVar);
}
function setGlobal_writeLocal(newValue){
myVar = newValue;
var myVar = "I am local\n";
console.log(myVar);
}
writeGlobal();
setGlobal_writeLocal("I am still global\n");
writeGlobal();
// What displays the console ?


 Attention:
 Les variables déclarées avec le mot clé var sont toujours interpreté
avant l’exécution de la function
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) {
console.log(x * x);
}
values.forEach(displaySquare);
Fonctionnement
 Une fonction peut être assigné à une variable
 Peut être passé comme argument à une fonction
 Peut être une valeur de retour d’une fonction
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"];

myArray.forEach( function(element) {
console.log(element + "/");
});
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

Exemple
function declaration() {
console.log("I'm a function declaration");
}
var expression = function() {
console.log("I'm a function expression");
}
declaration();
expression();
Exemple
declaration();
expression();
function declaration() {
console.log("I'm a function declaration");
}
var expression = function() {
console.log("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
 Acces à un seul élément en passant par un sélecteur css
document.querySelector("#myElement");
 Acces à une liste d’éléments en passant par un sélecteur css

 Retourne un tableau JavaScript contenant tous les
homonymes
document.querySelectorAll("p");
DOM

 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
document.querySelectorAll("p");
DOM

 Exemple:
<img id="img1" name="theImage" src="test.png" />
var img = document.querySelector("#img1");
var elements = document.getElementsByName("theImage");
console.log(elements[0] === img); // true
elements = document.querySelectorAll("img");
console.log(elements[0] === img); // true
</script>
DOM

 Accès à tous les nœuds enfants d’un élément
element.childNodes;
 Accès à un élément parent
element.parentNode;
DOM
Manipuler les attributs

 Accès à un attribut d’un élément
element.getAttribute("attribute");
 Modifier les attributs d’un élément
element.setAttribute("attribute", "value");
DOM
Manipuler les valeurs

 Accès au texte d’un élément
element.firstChild.nodeValue;
 Modifier le texte d’un élément
element.firstChild.nodeValue = "text";
DOM
Autres manipulations….
 Créer un élément
var e = document.createElement(‘p’);
 Ajouter un élément à un parent(élément)
parent.appendChild(e);
DOM
 Modifier un élément
e.style.textAlign = ‘center’;
 Supprimer un élément
var e = document.querySelector("#deleteMe");
e.parentNode.removeChild(e);
DOM
 Ajouter un élément avant un autre

Element.parentNode.insertBefore(new_element,element);
Contender
new_element
element
<div id="content">
<h1>Hello world!</h1>
<p>
It's my <strong>awesome</strong> page!
</p>
</div>
var divEl = document.querySelector("#content");
var strongEl = divEl.childNodes[1].childNodes[1];
// Somehow easier...
var sEl = divEl.querySelector("#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 = document.querySelector("p");
var strong = p.querySelector("strong");
console.log(p);
console.log(strong);
</script>
DOM
Les propriétés d’un élément du DOM
 Certaines propriétés très utlies

DOM

<p></p>
p.textContent = "Hello World";
<p>Hello World</p>
DOM

<p></p>
p.innerHTML = “<strong>Hello World </strong>";
<p><strong> Hello World </strong></p>

DOM

<p class="otherClass"></p>
p.classList.add("myClass");
p.classList.remove("otherClass");
<p class="myClass"></p>
DOM

<p>This is a paragraph without style</p>
p.style.color = "red";
p.style.fontFamily = "Calibri";
p.style.border = "1px blue solid";
p.style.textTransform = "uppercase";
p.style.width = "200px";
p.style.fontWeight = "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" onclick="alert('you click the button');"/>
Arguments action
Available arguments of Action associated to
the object the event
Les événements
<input type="button" id="myButton" value="Push me!" />
var button = document.querySelector("#myButton");

button.addEventListener("onclick", function() {
alert("You clicked the button!");
});
Les événements

Les événements

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?

Javascript

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Javascript

Transféré par

Droits d'auteur :

Formats disponibles

JavaScript

Introduction au développement web

Après ce cours vous serez capable de:

Allons à la découverte de JavaScript

• Le JavaScript est un langage de script

• Au début, un langage coté serveur LiveScript

• Coté client  interpreté par le navigateur

• Comme le CSS, le code javascript peut être défini dans:

• Associé aux objets du DOM :

Allons à la découverte du JavaScript

 Dans un fichier externe (bonne pratique)

 C’est possible d’aligner plusieurs instructions

// Displays Hello Universe!

// Add « Hello World! » inside the page

window.alert("My message is great!");

var returnValue = window.prompt("Question", "Text");

 Le nom d’une variable:

var max_age = 18;

var myVar1 = "I am a string !";

Création des tableaux

var fruitBasket1 = new Array("Apples", "Bananas", "Pears");

var apple = fruitBasket1[0];

Liste des méthodes liées aux tableaux

Les objets littéraux: tableau associatif

 Ce code va créer un objet identique à un tableau, excepté le fait que chaque

Les objets littéraux : accès aux items

Les objets littéraux : for in

Les fonctions et leur protée

function myFunction(myParam1, myParam2) {

// someValue will contain 22 (if current year is 2012)

// Will display Bryan is 42 years old (if 2012)

La portée des variables

La portée des variables

// What displays the console ?

La portée des variables

Les expressions de fonction

var values = [2, 6, 3];

var myArray = ["Apple", "Strawberry"];

 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

INTERACTION AVEC LE DOM

Accès aux éléments

Accès aux éléments

 Acces à un seul élément en passant par un sélecteur css

 Acces à une liste d’éléments en passant par un sélecteur css

Accès aux éléments

 Retourne un tableau JavaScript contenant tous les

Accès aux éléments

Accès aux éléments

 Accès à un élément parent

Manipuler les attributs

 Modifier les attributs d’un élément

Manipuler les valeurs

 Modifier le texte d’un élément

 Ajouter un élément à un parent(élément)

 Ajouter un élément avant un autre

 Sélectionner un élément à partir d’un autre

Les propriétés d’un élément du DOM

 Certaines propriétés très utlies

Les propriétés d’un élément du DOM

Les propriétés d’un élément du DOM

 Ajouter un élément avant un autre

<p><strong> Hello World </strong></p>