Download - Cours javascript v1
Akambi Fagbohoun 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++;
alert(number); // Affiche : « 1 »
number--;
alert(number); // Affiche : « 0 »var number = 0;
var output = ++number;
alert(number); // Affiche : « 1 »
alert(output); // Affiche : « 1 »
var number = 0;
var output = number++;
alert(number); // Affiche : « 1 »
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++;
}
alert(number); // Affiche : « 10 »
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++;
}
alert(number); // Affiche : « 10 »
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
Isoler le code avec fonctions anonymes
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 :
Isoler le code avec fonctions anonymes
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 re- cherche 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
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"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Accueil</title> </head>
<body> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <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">
<p>Un peu de texte <a>et un lien</a></p>
</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">
<p>Un peu de texte <a>et un lien</a></p>
</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>