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

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...

Afficher une boîte de dialogue
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>

La syntaxe du JavaScript
Les 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';
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

Type des variables
var x; // Now x is undefined
var x = 5; // Now x is a Number
var 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 number
typeof false // Returns boolean
typeof [1,2,3,4] // Returns object
typeof {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;

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);
Conversion de type

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

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
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;
result = true || false;
var result = false;
result = !result;
alert(result); // Affiche « true » car on voulait l'inverse de «
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é
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) {
L’instruction « else if »

La structure switch
var 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;

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 ?');

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 »
Ordre des opérateurs

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 {
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 {

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 fonction
Inté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é !');

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 !';
}
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);
}
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);
}
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.
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 rectangle
function 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èle
function 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èle
function 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";
}

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'];

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
aprè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

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.

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

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 point
case 39:
//-Move right
x=x+3;
pixel.style.left = x+'px';
break;
case 38:
//-Move up
y=y-3;
pixel.style.top = y+'px';
break;
case 40:
//-Move down
y=y+3;
pixel.style.top = y+'px';
break;
default:
break;
}
};
</script>

Exercice point
var 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 left
x=x-3;
pixel.style.left = x+'px';
break;

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() {

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>
</div>
<div class="publicite">
</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"

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 »

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>

Modifier la classe
var 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

Modifier le contenu d’une balise
<body>
<div id="myDiv">
</div>
<script>
alert(div.innerHTML);
document.getElementById('myDiv').innerHTML = '<blockquote>Je mets une citation à la
place du paragraphe</blockquote>’;

Contenu textuel d’une balise
<body>
<div id="myDiv">
</div>
<script>
alert(div.innerText);
var txt = '';
if (div.textContent) { // « textContent » existe ? Alors on s'en sert !
txt = div.textContent;

Cours javascript v1

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (6)

Semelhante a Cours javascript v1

Semelhante a Cours javascript v1 (20)

Cours javascript v1

Notas do Editor