cours javascript v1

Akambi Fagbohoun http://twitter.com/afagbohoun

http://twitter.com/afagbohoun

• Le JavaScript, langage dit client-side

Qu'est-ce que le JavaScript ?

• Langage interpreté et orienté objet

• Le JavaScript, pas que le Web

Qu'est-ce que le JavaScript ?

• Dynamiser une page HTML

- Interactions avec l’internaute- Animations- Aide à la navigation)

Apports du JavaScript

Petit historique du langage

• Développé par Brendan Eich (1995)

• standardisé par l'ECMA International sous le nom d’ECMAScript

• Dernière version standardisée du JavaScript est basée sur l'ECMAScript 5, sorti en 2009.

• ECMAScript 6

LES BASES DE JAVASCRIPT

Le javascript dans une page HTML

<!DOCTYPE html>

<html>

<head>

<title>Hello World!</title>

</head>

<body>

<script type="text/javascript" src="hello.js"></script>

<script type="text/javascript" >

// Un peu de code JavaScript...

console.log(‘Hello world!’);

/* Fin de mon code javascript avec un commentaire

sur plusieurs lignes */

</script>

</body>

</html>

Afficher une boîte de dialogue

<!DOCTYPE html>

<html>

<head>

<title>Hello World!</title>

</head>

<body>

<script>

alert('Hello world!');

</script>

</body>

</html>

La syntaxe du JavaScriptLes instructions

Ou

instruction_1;

instruction_2;

instruction_3;Instruction_1;Instruction_2

Instruction_3

function toggle(elemID) {

var elem = document.getElementById(elemID);

if (elem.style.display == 'block') {

elem.style.display = 'none';

} else {

elem.style.display = 'block';

}

}

Espace et indentation

Les variables

// Déclaration de variables

var myVariable;

// Affectation de valeur

myVariable = 2;

// Chaine de caractère

var text1 = "Mon premier texte"; // Avec des guillemets

var text2 = 'Mon deuxième texte'; // Avec des apostrophes

// boolean

var isTrue = true;

var myVariable1, myVariable2 = 4, myVariable3;

// Affecter une valeur à plusieurs variables en même temps

var myVariable1, myVariable2;

myVariable1 = myVariable2 = 2;

Type des variablesvar x; // Now x is undefinedvar x = 5; // Now x is a Numbervar x = "John"; // Now x is a String

var cars = ["Saab", "Volvo", "BMW"];

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

/* Connaitre le type d’une variable */

alert(typeof text1); // Affiche : « string »

typeof "John" // Returns string typeof 3.14 // Returns numbertypeof false // Returns booleantypeof [1,2,3,4] // Returns objecttypeof {name:'John', age:34} // Returns object

Les opérateurs arithmétiques

Opérateur Signe

addition +

soustraction -

multiplication *

division /

modulo %

var result = 3 + 2;

alert(result); // Affiche : « 5 »

var number1 = 3, number2 = 2, result;

result = number1 * number2;

alert(result); // Affiche : « 6 »

var divisor = 3, result1, result2, result3;

result1 = (16 + 8) / 2 - 2 ; // 10

result2 = result1 / divisor;

result3 = result1 % divisor;

alert(result2); // Résultat de la division : 3,33

alert(result3); // Reste de la division : 1

var number = 3;

number = number + 5; équivaut à

number += 5;

alert(number); // Affiche : « 8 »

Concacténation

var hi = 'Bonjour', name = 'toi', result;

result = hi + name;

alert(result); // Affiche : « Bonjourtoi »

// Simplification

var text = 'Bonjour ';

text += 'toi';

alert(text); // Affiche « Bonjour toi ».var userName = prompt('Entrez votre prénom :');

alert(userName); // Affiche le prénom entré par l’utilisateur

Interaction avec l’utilisateur

Concaténation - suite

var text = 'Voici un nombre : ', number = 42, result;

result = text + number;

alert(result); // Affiche : « Voici un nombre : 42 »

var first, second, result;

first = prompt('Entrez le premier chiffre :');

second = prompt('Entrez le second chiffre :’);

result = first + second;

result2 = parseInt(first) + parseInt(second);

alert(result);

alert(result2);

var text, number1 = 4, number2 = 2;

text = number1 + '' + number2;

alert(text); // Affiche : « 42 »

Conversion de type

A retenir

Les conditions

var number = 4, text = '4', result;

alert(number == text;); // Affiche « true » alors que « number » est un nombre

et « text » une chaîne de caractères

result = number === text;

alert(result); // Affiche « false » car cet opérateur compare aussi les types des

variables en plus de leurs valeurs

Les opérateurs de comparaison

var number1 = 2, number2 = 2, number3

= 4, result;

result = number1 == number2; // On

spécifie deux variables avec l'opérateur de

comparaison entre elles

alert(result); // Affiche « true », la condition

est donc vérifiée car les deux variables

contiennent bien la même valeur

result = number1 == number3;

alert(result); // Affiche « false », la condition

n'est pas vérifiée car 2 est différent de 4

result = number1 < number3;

alert(result); // Affiche « true », la condition

est vérifiée car 2 est bien inférieur à 4

Opérateur Signification

== égal à

!= différent de

=== contenu et type égal à

!== contenu ou type différent de

> supérieur à

>= supérieur ou égal à

< inférieur à

<= inférieur ou égal à

Exemples

Les opérateurs logiques

var result = true && true;

alert(result); // Affiche : « true »

result = true && false;

alert(result); // Affiche : « false »

result = false && false;

alert(result); // Affiche : « false »

Exemples avec ET

Opérateur Type de logique Utilisation

&& ET valeur1 && valeur2

|| OU valeur1 || valeur2

! NON !valeur

var result = true || true;

alert(result); // Affiche : « true

»

result = true || false;

alert(result); // Affiche : « true

»

result = false || false;

alert(result); // Affiche : «

false »

var result = false;

result = !result;

alert(result); // Affiche « true » car on voulait

l'inverse de « false »

result = !result;

alert(result); // Affiche « false » car on a inversé de

nouveau « result », on est donc passé de « true » à

« false »

Exemples avec NONExemples avec OU

Combiner les opérateurs

var condition1, condition2, result;

condition1 = 2 > 8; // false

condition2 = 8 > 2; // true

result = condition1 && condition2;

alert(result); // Affiche « false »

var result = 2 > 8 && 8 > 2;

alert(result); // Affiche « false »

Les structures conditionnelles

La structure if

if (true) {

alert("Ce message s'est bien affiché.");

}

if (false) {

alert("Pas la peine d'insister, ce message ne s'affichera pas.");

}if (2 < 8 && 8 >= 4) { // Cette condition renvoie « true », le code est donc

exécuté

alert('La condition est bien vérifiée.');

}

if (2 > 8 || 8 <= 4) { // Cette condition renvoie « false », le code n'est donc pas

exécuté

alert("La condition n'est pas vérifiée mais vous ne le saurez pas vu que ce

code ne s'exécute pas.");

}

Exemples

La structure if….else

if (confirm('Pour accéder à ce site vous devez avoir 18 ans ou plus, cliquez sur

"OK" si c\'est le cas.')) {

alert('Vous allez être redirigé vers le site.');

}

else {

alert("Désolé, vous n'avez pas accès à ce site.");

}var floor = parseInt(prompt("Entrez l'étage où l'ascenseur doit se rendre (de -2

à 30) :"));

if (floor == 0) {

alert('Vous vous trouvez déjà au rez-de-chaussée.');

} else if (-2 <= floor && floor <= 30) {

alert("Direction l'étage n°" + floor + ' !');

} else {

alert("L'étage spécifié n'existe pas.");

}

L’instruction « else if »

La structure switchvar drawer = parseInt(prompt('Choisissez le tiroir à ouvrir (1 à 4) :'));

switch (drawer) {

case 1:

case 1:

alert('Contient divers outils pour dessiner : du papier, des crayons, etc.');

break;

case 2:

alert('Contient du matériel informatique : des câbles, des composants,

etc.');

break;

case 3:

alert('Ah ? Ce tiroir est fermé à clé ! Dommage !');

break;

case 4:

case 5:

alert('Contient des vêtements : des chemises, des pantalons, etc.');

break;

default:

alert("Info du jour : le meuble ne contient que 4 tiroirs et, jusqu'à preuve

du contraire, les tiroirs négatifs n'existent pas.");

}

Les ternaires

var startMessage = 'Votre catégorie : ',

endMessage,

adult = confirm('Êtes-vous majeur ?');

if (adult) { // La variable « adult » contient un booléen, on peut donc

directement la soumettre à la structure if sans opérateur conditionnel

endMessage = '18+';

} else {

endMessage = '-18';

}

alert(startMessage + endMessage);

var startMessage = 'Votre catégorie : ',

endMessage,

adult = confirm('Êtes-vous majeur ?');

endMessage = adult ? '18+' : '-18';

alert(startMessage + endMessage);

Conditions sur les variables

var conditionTest = 'Fonctionnera ? Fonctionnera pas ?';

if (conditionTest) {

alert('Fonctionne !');

} else {

alert('Ne fonctionne pas !');

}var conditionTest1 = '', conditionTest2 = 'Une chaîne de caractères';

alert(conditionTest1 || conditionTest2);

L’opérateur OU

Tester l'existence de contenu d'une variable

Incrémentation et décrémentation

var number = 0;

number++;


number--;

alert(number); // Affiche : « 0 »var number = 0;

var output = ++number;


alert(output); // Affiche : « 1 »

var number = 0;

var output = number++;


alert(output); // Affiche : « 0 »

Ordre des opérateurs

Les boucles

La boucle « while »

while (condition) {

instruction_1;

instruction_2;

instruction_3;

}

var number = 1;

while (number < 10) {

number++;

}


Exemples

La boucle « while »

var nicks = '', nick;

while (true) {

nick = prompt('Entrez un prénom :');

if (nick) {

nicks += nick + ' '; // Ajoute le nouveau prénom ainsi qu'une espace juste

après

} else if (nick == ‘continue’) {

continue; // On passe à l’itération suivante

} else {

break; // On quitte la boucle

}

}

alert(nicks); // Affiche les prénoms à la suite

Exemples avec liste de « prénom »

La boucle « do…while »

do {

instruction_1;

instruction_2;

instruction_3;

} while (condition);

var number = 1;

while (number < 10) {

number++;

}


Exemples

La boucle « for »for (initialisation; condition; incrémentation) {

instruction_1;

instruction_2;

instruction_3;

}for (var iter = 0; iter < 5; iter++) {

alert('Itération n°' + iter);

}

Exemples

for (var nicks = '', nick; true;) {

nick = prompt('Entrez un prénom :');

continue;

if (nick) {

nicks += nick + ' ';

} else {

break;

}

}

alert(nicks);

Les fonctions

• Mener une action précise

• Factoriser et simplifier le code

function myFunction(arguments) {

// Le code que la fonction va devoir exécuter

}

Structure d’une fonction

Les fonctions

function showMsg() {

alert('Et une première fonction, une !');

}

showMsg(); // On exécute ici le code contenu dans la fonctionIntérêt d’une fonction

var result;

result = parseInt(prompt('Donnez le nombre à multiplier par 2 :'));

alert(result * 2);

alert('Vous en êtes à la moitié !');

result = parseInt(prompt('Donnez le nombre à multiplier par 2 :'));

alert(result * 2);

Intérêt des fonctions

function byTwo() {

var result = parseInt(prompt('Donnez le nombre à multiplier par 2 :'));

alert(result * 2);

}

byTwo();

alert('Vous en êtes à la moitié !');

byTwo();

La portée des variables

var ohai = 'Hello world !';

function sayHello() {

alert(ohai);

}

sayHello();function sayHello() {

var ohai = 'Hello world !';

}

sayHello();

alert(ohai);

Variables locales

Variables globales

La portée des variables - suite

var message = 'Ici la variable globale !';

function showMsg() {

var message = 'Ici la variable locale !';

alert(message);

}

showMsg();

alert(message);

Variables globales et locales du même nom

variables globales ou locales ?

var var1 = 2, var2 = 3;

function calculate() {

alert(var1 * var2); // Affiche : « 6 » (sans blague ?!)

}

calculate();function calculate() {

var var1 = 2, var2 = 3;

alert(var1 * var2);

}

calculate();

Variables locales

Variables globales

Les arguments

function myFunction(arg) { // Notre argument est la variable « arg »

// Une fois que l'argument a été passé à la fonction, vous allez le retrouver

dans la variable « arg »

alert('Votre argument : ' + arg);

}

myFunction('En voilà un beau test !');function moar(first, second) {

// On peut maintenant utiliser les variables « first » et « second » comme on

le souhaite :

alert('Votre premier argument : ' + first);

alert('Votre deuxième argument : ' + second);

}

moar('Un !', 'Deux !’);

moar(prompt('Entrez votre premier argument :'), prompt('Entrez votre

deuxième argument :’));

Exemples

Les arguments facultatifs

function prompt2(text, allowCancel) {

if (typeof allowCancel === 'undefined') {

allowCancel = false;

}

alert(text);

}

// On exécute la fonction seulement avec le premier argument, pas besoin du

deuxième

prompt2('Entrez quelque chose :');

function prompt2(allowCancel, text) {

position des arguments facultatifs

Les valeurs de retour

function sayHello() {

return 'Bonjour !'; // L'instruction « return » suivie d'une valeur

alert('Attention ! Le texte arrive !');

}

alert(sayHello()); // Ici on affiche la valeur retournée par la fonction sayHello()

Les fonctions anonymes

function (arguments) {

// Le code de votre fonction anonyme

}

var sayHello = function() {

alert('Bonjour !');

};

sayHello(); // Affiche : « Bonjour ! »

cas pratiques

Structures vs instructions

function structure() {

// Du code…

}

var instruction = 1234;

var instruction = function() {

// Du code…

};

Instructions

Structures

Isoler le code avec fonctions anonymes

// Code externe

(function() {

// Code isolé

})

(arguments);

// Code externe

function test() {

// Du code…

}

test();(function test() {

// Code.

})();

revient à :

déclaration fonction + exécution


var test = 'noir'; // On crée une variable « test » contenant le mot « noir »

(function() { // Début de la zone isolée

// On crée une variable du même nom avec le contenu « blanc » dans la zone

isolée

var test = ‘blanc';

alert('Dans la zone isolée, la couleur est : ' + test);

})(); // Fin de la zone isolée. Les variables créées dans cette zone sont

détruites.

// Le texte final contient bien le mot « noir » vu que la « zone isolée » n'a

aucune influence sur le reste du code

alert('Dans la zone non-isolée, la couleur est : ' + test);

Exemple :


var sayHello = (function() {

return 'Yop !';

})();

alert(sayHello); // Affiche : « Yop ! »

Valeur de retour zone isolée

Comprendre le scope

var l=1; function demandezunnombre() { x= prompt("donnez un nombre > 13 svp :) ");} do { demandezunnombre(); }while((x=="") || (parseInt(x) < 13)); alert("Merci, vous avez bien rentré le numéro : "+l +" valdez et allez faire vous calcules :)");

Erreur à ne pas faire

A retenir - fonctions

• Les variables déclarées avec var au sein d'une fonction ne sont accessibles que dans cette fonction.

• Eviter le plus possible d’utiliser des variables globales.

• Une fonction peut recevoir un nombre défini ou indéfini de paramètres. Elle peut aussi retourner une valeur ou ne rien retourner du tout.

• Des fonctions qui ne portent pas de nom sont des fonctions anonymes et servent à isoler une partie du code.

Exercices

• Ecrire fonction triangle

**********

* ** *******

Exercice carre function carre() { var n=parseInt(prompt("donner un nombre entier : ")); var s=""; for(var i=0;i<n;i++) { var d=""; for (j=0;j<n;j++) { var k="*" d+=k; } var l=d s+=l+"\n"; } return s; } var R = carre(); alert(R);

Exercice triangle rectanglefunction triangle(){ var n=parseInt(prompt("Entrez un nombre entier : ")); var r=""; for(var i=0;i<n;i++) { var d=""; for (j=0;j<i;j++) { var v="*" d+=v; } var w=d r+=w+"*\n"; } return r; } var R = triangle(); alert(R);

Exercice triangle isocèlefunction losange(){ do{ var n=parseInt(prompt("Entrez un nombre impair : ")); }while(n%2==0); var r=""; for(i=1;i<=n;i=i+2){ var d=""; for (j=1;j<=i;j++){

var v="*";d+=v; } var a=""; for(var k=1;k<=(n-i)/2;k++){ var b=" " a+=b } var h=« *"; var c=a; var w=d; r+=c+w+c+"\n"; } return r; } var R = losange(); alert(R);

Exercice triangle isocèlefunction losange(){ do{ var n=parseInt(prompt("Entrez un nombre impair : ")); }while(n%2==0); var r=""; for(i=1;i<=n;i=i+2){ var d=""; for (j=1;j<=i;j++){

var v="*"; d+=v; } var a=""; for(var k=1;k<=(n-i)/2;k++){ var b=" " a+=b } var h="*" var c=a; var w=d; r+=c+w+c+"\n"; } return r; } var R = losange(); alert(R);

Les objets natifs

var myString = 'Ceci est une chaîne de caractères’;

// On affiche le nombre de caractères, au moyen de la propriété « length »alert(myString.length);

// On récupère la chaîne en majuscules, avec la méthode toUpperCase()alert(myString.toUpperCase());

• un constructeur• des propriétés• des méthodes

Les élément d’un objet

Autres objets natifs

Number : l'objet qui gère les nombres

Boolean : l'objet qui gère les booléens

String : l'objet qui gère les chaînes de caractères

Array : l'objet qui gère les tableaux

Les tableaux

Indice 0 1 2 3 4

Donnée Valeur 1 Valeur 2 Valeur 3 Valeur 4 Valeur 5

var myArray = ['Sébastien', 'Laurence', 'Ludovic', 'Pauline', ‘Guillaume'];

Syntaxe courte

var myArray = new Array('Sébastien', 'Laurence', 'Ludovic', 'Pauline',

'Guillaume');

Syntaxe longue - dépréciée

Opérations sur les tableaux

var myArray = ['Sébastien', 'Laurence', 'Ludovic', 'Pauline', 'Guillaume'];

alert(myArray[1]); // Affiche : « Laurence »

myArray[1] = 'Clarisse';

alert(myArray[1]); // Affiche : « Clarisse »myArray.push('Ludovic'); // Ajoute « Ludovic » à la fin du tableau

myArray.push('Pauline', 'Guillaume'); // Ajoute « Pauline » et « Guillaume » à la

fin du tableau

myArray.unshift(‘Ludovic’);

myArray.unshift(‘Ludovic’, ‘Pauline’);

Ajout d’item

myArray.pop(); // Retire le dernier élément

myArray.shift(); // Retire le premier élément

Supression d’item

Transformation chaine / tableau

var cousinsString = 'Pauline Guillaume Clarisse',

cousinsArray = cousinsString.split(' ');

alert(cousinsString);

alert(cousinsArray);

var cousinsString_2 = cousinsArray.join('-');

alert(cousinsString_2);

Tableau vers chaine

Chaine vers tableau

Parcourir un tableau

var myArray = ['Sébastien', 'Laurence', 'Ludovic', 'Pauline', ‘Guillaume'];

for (var i = 0; i < myArray.length; i++) {

alert(myArray[i]);

}

for (var i = 0, c = myArray.length; i < c; i++) {

alert(myArray[i]);

}

Optimisation

Parcourir avec for

Les objets littéraux

var family = {

self: 'Sébastien',

sister: 'Laurence',

brother: 'Ludovic',

cousin_1: 'Pauline',

cousin_2: 'Guillaume'

};Identifiant self sister brother cousin_1 cousin_2

Donnée Sébastien Laurence Ludovic Pauline Guillaume

Tableau des prénoms

Syntaxe des objets

var myArray = [];

var myObject = {};

var family = {

self: 'Sébastien',

sister: 'Laurence',

brother: 'Ludovic',

cousin_1: 'Pauline',

cousin_2: 'Guillaume'

};

Accès aux items

family.sister;

family[‘sister'];

var id = 'sister';

alert(family[id]); // Affiche : « Laurence »

Opérations sur les objets

family['uncle'] = 'Didier'; // « Didier » est ajouté et est accessible via

l'identifiant « uncle »

family.uncle = 'Didier'; // Même opération mais d'une autre manière

Parcourir les objets

for (var id in family) {

// On stocke l'identifiant dans « id » pour parcourir l'objet « family »

alert(family[id]);

}

Ajout d’un item

Utilisation des objets

function getCoords() {

/* Script incomplet, juste pour l'exemple */

return { x: 12, y: 21 };

}

var coords = getCoords();

alert(coords.x); // 12

alert(coords.y); // 21

Valeur de retour

Exercices

- Ecrire un programme qui saisit un entier au clavier et qui recherche si cet

entier appartient au tableau (réponse de type oui/non).

- Ecrire un programme qui saisit deux indices et échange les valeurs contenues

dans le tableau à ces deux indices. Le programme affichera le contenu du

tableau avant et après cette transformation

- Reprendre la partie saisie du programme précédent pour écrire un nouveau

programme qui recherche et affiche le plus grand élément du tableau.

Débogage de code javascript

va myVar = 'test; // Le mot-clé « var » est mal orthographié et il manque une

apostrophe

Bug syntaxique

// On veut afficher la valeur 6 avec les nombres 3 et 2

var myVar = 3 + 2;

// Mais on obtient 5 au lieu de 6 car on a fait une addition au lieu d'une

multiplication

Bug algorithmique

Console de développement

Debogage erreur syntaxique

// Ici nous créons une fonction JavaScript, avec quelques erreurs de syntaxe.

functin test() {

alert('Hello !');

script avec erreur syntaxique

<script src="votre-fichier.js"></script>

Afficher variable dans la console

// On crée un objet basique.

var helloObject = {

english: 'Hello',

french: 'Bonjour',

spanish: 'Hola'

};

// Et on l'affiche.

console.log(helloObject);

// Tant qu'à faire, on affiche aussi un tableau.

var helloArray = ['Hello', 'Bonjour', 'Hola'];

console.log(helloArray);

Tester un code dans la console

// On déclare une variable contenant un texte quelconque.

var myVar = 'Hello';

// Toutes les secondes, on affiche le contenu de cette variable dans la console.

setInterval();

setInterval(function() { console.log(myVar);}, 1000);

Utiliser les points d’arrêt// La fonction « a » affiche la valeur qu'elle reçoit de « b ».

function a(value) {

console.log(value);

}

// La fonction « b » incrémente la valeur reçue par « c » puis la passe en

paramètre à « a ».

function b(value) {

a(value + 1);

}

// La fonction « c » incrémente la valeur reçue par la boucle for puis la passe en

paramètre à « b ».

function c(value) {

b(value + 1);

}

// Pour chaque itération, cette boucle passe en paramètre la valeur de « i » à la

fonction « c ».

for (var i = 0 ; i < 10; i++) {

c(i);

}

Utiliser les points d’arrêt

Utiliser les points d’arrêt

chrome Firefox

La pile d’exécution

chrome Firefox

Exercice point<!DOCTYPE html><html lang="fr"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">  <title>Accueil</title> </head>

<body>  <script src="bootstrap-3.3.6-dist/js/jquery-2.1.4.js"></script>

Exercice point <div id="myDiv" style="position:absolute;width:100px;height:100px;left:100px;background-color:red;"></div>

<script> $(document).keydown(function(e){ switch (e.which){ case 37: // fleche gauche $('div').stop().animate({left:'-=30'}); break; case 38: // fleche haut $('div').stop().animate({top:'-=30'}); break; case 39: // fleche droite $('div').stop().animate({left:'+=30'}); break; case 40: // fleche bas $('div').stop().animate({top:'+=30'}); break; }}); </script> </body></html>

Exercice pointcase 39:

//-Move rightx=x+3;pixel.style.left = x+'px';

break;case 38:

//-Move upy=y-3;pixel.style.top = y+'px';

break;case 40:

//-Move downy=y+3;pixel.style.top = y+'px';

break;default:

break;}

};

</script>

Exercice pointvar x=150,y=150;

pixel = document.createElement('DIV')pixel.style.width = '10px'pixel.style.height = '10px'pixel.style.backgroundColor = '#000'pixel.style.position = 'absolute'pixel.style.left = x+'px'pixel.style.top = y+'px'document.body.appendChild(pixel)

window.onkeydown = function(e) {var key = e.keyCode || e.which;switch (key) {

case 37://-Move leftx=x-3;pixel.style.left = x+'px';

break;

Manipuler les éléments HTML

Objet window

<script>

window.alert('Hello world!');

alert('Hello world!’);

var text = 'Variable globale !’;

console.log(window.text);

// On utilise une IIFE pour « isoler » du code

(function() {

// Cette variable n'a jamais été déclarée et pourtant on lui attribue une

valeur

variable1 = 'Variable accessible !’;

})();

alert(variable1); // Affiche : « Variable accessible ! »

</script>

Objet document

Objet document<div id="myDiv"> <p>Un peu de texte <a>et un lien</a></p></div>

<script> var div = document.getElementById('myDiv');

alert(div);

var divs = document.getElementsByTagName('div');

for (var i = 0, c = divs.length ; i < c ; i++) { alert('Element n° ' + (i + 1) + ' : ' + divs[i]);}</script>

Accès aux éléments <div id="menu"> <div class="item"> <span>Élément 1</span> <span>Élément 2</span> </div> <div class="publicite"> <span>Élément 3</span> <span>Élément 4</span> </div></div><div id="contenu"> <span>Introduction au contenu de la page...</span></div>

var query = document.querySelector('#menu .item span'), queryAll = document.querySelectorAll('#menu .item span');

alert(query.innerHTML); // Affiche : "Élément 1"

alert(queryAll.length); // Affiche : "2"alert(queryAll[0].innerHTML + ' - ' + queryAll[1].innerHTML); // Affiche : "Élément 1 - Élément 2"

Héritage

Editer les éléments HTML

<body>

<a id="myLink" href="http://www.un_lien_quelconque.com">Un lien modifié

dynamiquement</a>

<script>

var link = document.getElementById('myLink');

var href = link.getAttribute('href'); // On récupère l'attribut « href »

console.log(href);

link.setAttribute('href', 'http://www.speedwapp.com'); // On édite l'attribut

« href »

var href = link.href;

console.log(href);

link.href = 'http://www.speedwapp.com';

</script>

</body>

Modifier la classe<!doctype html>

<html>

<head>

<meta charset="utf-8" />

<title>Le titre de la page</title>

<style>

.blue {

background: blue;

color: white;

}

</style>

</head>

<body>

<div id="myColoredDiv">

<p>Un peu de texte <a>et un lien</a></p>

</div>

<script>

document.getElementById('myColoredDiv').className = 'blue';

</script>

</body>

</html>

Modifier la classevar div = document.querySelector('div');

// Ajoute une nouvelle classe

div.classList.add('new-class');

// Retire une classe

div.classList.remove('new-class');

// Retire une classe si elle est présente ou bien l'ajoute si elle est absente

div.classList.toggle('toggled-class');

// Indique si une classe est présente ou non

if (div.classList.contains('old-class')) {

alert('La classe .old-class est présente !');

}

// Parcourt et affiche les classes CSS

var result = '';

for (var i = 0 ; i < div.classList.length ; i++) {

result += '.' + div.classList[i] + '\n';

}

alert(result);

Modifier le contenu d’une balise<body>

<div id="myDiv">


</div>

<script>

var div = document.getElementById('myDiv');

alert(div.innerHTML);

document.getElementById('myDiv').innerHTML = '<blockquote>Je mets une

citation à la place du paragraphe</blockquote>’;

document.getElementById('myDiv').innerHTML += ' et <strong>une portion

mise en emphase</strong>.';

</script>

</body>

Contenu textuel d’une balise<body>

<div id="myDiv">


</div>

<script>

var div = document.getElementById('myDiv');

alert(div.innerText);

var txt = '';

if (div.textContent) { // « textContent » existe ? Alors on s'en sert !

txt = div.textContent;

} else if (div.innerText) { // « innerText » existe ? Alors on doit être sous IE.

txt = div.innerText + ' [via Internet Explorer]';

} else { // Si aucun des deux n'existe, cela est sûrement dû au fait qu'il n'y

a pas de texte

txt = ''; // On met une chaîne de caractères vide

}

console.log(txt);

txt2 = div.textContent || div.innerText || ‘';

console.log(txt2);

</script>

</body>