SlideShare une entreprise Scribd logo
LES BASES
Auteur : Olivier Martin pour la 3W Academy
http://www.conception.website
Où écrire du code javascript ?
<!DOCTYPE html>
<html>
<body>
<h1>Hello world!</h1>
! Soit dans un fichier javascript externe : 
<script src="monfichier.js" type="text/javascript"></script>
! Soit directement entre les balises <script></script> 
<script type="text/javascript">
Alert(‘Hello world !’);
// mettre tout votre code JS
</script>
</body>
</html>
Auteur : Olivier Martin pour la 3W Academy
Comment débuguer son code JS ?
En utilisant la console de votre navigateur. Pour la faire apparaître :
faire soit « F12 », soit clic droit « inspecter l’élément » puis cliquez
ensuite sur l’onglet « console » :
Nature de l’erreur
Fichier concerné
Numéro de la ligne sur laquelle l’erreur a été rencontrée
Auteur : Olivier Martin pour la 3W Academy
Les variablesf
Une variable sert à stocker une donnée qui sera utilisée plus tard.
• Déclarer une variable et lui assigner une valeur :
var maVariable = ‘valeur assignée’ ;
• Déclarer plusieurs variables en même temps :
var maVariable = ‘valeur assignée’ , maVariable2 = 45 , result;
REMARQUES :
- On peut très bien déclarer une variable sans lui assigner de valeur (exemple avec la
variable « result »).
- Le préfixe var sert à indiquer qu’il s’agit d’une variable locale et non une variable globale
Auteur : Olivier Martin pour la 3W Academy
Les variables
Les variables sont dites « sensible à la casse ».
Prenons cet exemple :
var moi = ‘Thomas’ ;
var Moi = ‘Olivier’ ; // on met un M masjuscule cette fois
Alert(moi); // affiche Thomas
Alert(Moi); // affiche Olivier
Conclusion : les variables « moi » et « Moi » sont considérées comme différentes à cause de
la majuscule.
Auteur : Olivier Martin pour la 3W Academy
1) Utiliser la notation en camelCase pour le nom de variable :
var maVariableBienEcrite = ‘hello’ ;
>>> Cela consiste à écrire le premier mot en minuscule puis ceux qui suivent en les
commençant par une majuscule.
2) Préférer l’usage de l’anglais :
var myCompetencies = [‘HTML’ , ‘CSS’ , ‘JS’]
>>> L’anglais est intéressant car il ne comporte aucun n’accent 
3) Donnez leur des noms cohérents (éviter les noms du style myVar1, myVar2 etc.)
Auteur : Olivier Martin pour la 3W Academy
Les variablesf
Quelques règles et bonnes pratiques pour nommer vos variables :
Les variables
Demander à l’utilisateur d’assigner une valeur à une variable avec la fonction
prompt();
var prenom = prompt(‘Entrez votre prénom’);
// Après validation la variable prenom vaudra « Samuel »
Samuel
Auteur : Olivier Martin pour la 3W Academy
3 façons d’afficher un résultat simplement :
var test = ‘Hello world !’ ;
alert(test) ;
console.log(test);
Faire F12 ou clic droit puis « inspecter l’élément » sur votre navigateur :
document.write(test); // écrit « Hello world!» dans notre document html
Le contenu de la variable s’affiche dans la console du navigateur
Auteur : Olivier Martin pour la 3W Academy
1)
2)
3)
Les types de variables
Il existe plusieurs types de variable en javascript tels que les Nombres
(number), les chaînes de caractère (string) ou encore les booléens qui
valent 0 ou 1 (boolean)
Exemples :
var Myvar1 = 5 ; // il s’agit d’un nombre entier (number (int))
var Myvar2 = 5.1589 ; // il s’agit d’un nombre à virgule (number (float))
var Myvar3 = ‘du texte’ ; // il s’agit d’une chaîne de caractère (string)
var Myvar4 = false ; / la variable est un booléen de valeur 0 (bool).
var Myvar4 = true ; //la variable est un booléen de valeur 1 (bool).
Auteur : Olivier Martin pour la 3W Academy
Les types de variables
Il existe également le type « function » et le type « object » un peu moins
courant surtout pour les débutants.
// variable contenant une fonction. Son type vaut « function » :
var mafonction = function (){
// instructions
}
// exemple de variables dont le type vaut « object » :
var mon_objet1 = [‘Jean’ , ’Alphonse’];
var mon_objet2 = {nom : ‘Jean’ , prenom : ‘Valjean’};
DON’T PANIC, les fonctions et objets seront abordés plus loin 
Afficher le type d’une variable avec typeof
var myVar = 5;
alert(typeof Myvar); // affiche « number »
var myVar =‘test’;
alert(typeof Myvar); // affiche « string »
var myVar = true;
alert(typeof Myvar); // affiche « boolean »
Auteur : Olivier Martin pour la 3W Academy
Convertir le type d’une variable
var chiffre1 = prompt(‘Entrer un chiffre’);
var chiffre2 = prompt(‘Entrer un 2ème chiffre’);
// on suppose que l’utilisateur rentre 5 et ensuite 6
var result = chiffre1 + chiffre2;
alert (result); // affiche 56 et non 11 car les variables « chiffre1 » et
« chiffre2 » dont les valeurs ont été assignées via prompt() sont par défaut
considérées comme de type « string ».
// La solution pour y remédier:
result = parseInt(first) + parseInt(second);
alert(result); // affiche enfin 11
Auteur : Olivier Martin pour la 3W Academy
Les operateurs
• L’opérateur « + »
Permet d’additionner 2 valeurs numériques ou de mettre bout-à-bout plusieurs
variables.
var v1 = 5 , v2 = 10 , v3 = ‘un texte’;
var somme = v1 + v2 ; // vaut 15
var somme2 = v1 + v3 + v2; // vaut « 5 un text 10 »
• Opérateurs « - », « * » « / » :
Permet de faire des soustractions, multiplications et divisions sur des variables de
type « number ».
var v1 = 5 , v2 = 3 , v3 = 10;
var operation = ((v1 - v2) * v3) / v1; // vaut 4. Détail : ((5 - 3) x10) / 5) = 4
Auteur : Olivier Martin pour la 3W Academy
Les operateurs
• « % » (modulo)
Affiche le reste d’une division.
var mon_modulo = 11 % 2 ; // mon_modulo vaut 1 car 11 = 5x2 + 1
• « +=»
Prend la valeur de la variable déclarée et lui ajouter la nouvelle valeur
assignée :
var v1 = 10 , v2 = ‘Du texte’ ;
v1 += 5 ; // v1 vaut à présent 15 car 10 + 5 = 15
v2 += ‘encore plus long’ ; // v2 vaut « Du texte encore plus long »
• «-=» « *=» « /=» «%=» :
Fonctionne de la même manière que += mais que sur des valeurs de type « number ».
LA CONCATENATION
var v1 = ‘bonjour', v2 = ‘bonsoir', result;
result = 'Bien le '+v1 +', bien le '+ v2+' !';
alert(result); // Affiche : « Bien le bonjour, bien le bonsoir ! »
var result2 = v1+' et '+v2;
alert(result2); // Affiche : « Bonjour et bonsoir»
Auteur : Olivier Martin pour la 3W Academy
Les conditions if, elseif et else
If (Mettre une condition #1) {
Exécuter du code si condition#1 est respectée…
}
elseif (Mettre une autre condition #2)
{
Code qui s’exécute si la condition#1 n’est pas respectée mais si la condition #2 est respectée…
}
else {
Code qui s’exécute si condition#1 et condition#1 ne sont pas respectées…
}
Remarque : elseif et else sont optionnels. Vous pouvez aussi mettre une
infinité de « elseif » mais un seul « else » à la suite d’une condition en « if »
Auteur : Olivier Martin pour la 3W Academy
Opérateurs de comparaison
var mavariable = true; // Cela équivaut à écrire « var mavariable = 1; »
// L’exemple ci dessous affichera « Bien égale à 1 » :
if(mavariable == 1) {
alert(‘Bien égal à 1’);
}
else {
alert(‘Pas égale à 1’);
}
// L’exemple si dessous affichera « Pas égale à 1 » :
if(mavariable === '1') { // ici ’10’ est considéré comme une chaîne de caractère
et non un entier à cause des apostrophes ‘’
alert(‘Bien égal à 1’);
}
else {
alert(‘Pas égale à 1’);
}
Auteur : Olivier Martin pour la 3W Academy
Opérateurs logiques
var v1 = 20 , v2 = false ;
if( v1 > 10 && v1 < 30) alert(‘OK’); // affichera OK
If(v1 == 10 || v2 == false) alert(‘OK’); // affichera OK
if(!v2) alert(‘OK’); // affichera OK
Auteur : Olivier Martin pour la 3W Academy
Les boucles #1
La boucle While :
var v1; // on déclarer la variable locale v1
while (v1 % 1 !== 0){
v1 = prompt('entrer un entier');
}
Explication :
Tant que v1 n’est pas un nombre entier on redemande à l’utilisateur de
renseigner v1 via la boite de dialogue « prompt ».
Pour info : Le reste d’un entier divisé par 1 vaut toujours 0. Exemple :
10 % 1 = 0. C’est donc une bonne astuce pour vérifier si une variable
est un nombre entier 
Auteur : Olivier Martin pour la 3W Academy
Les boucles #2
La boucle For #1:
• Structure de la boucle
for ({bloc d’initialisation} ; {bloc de condition} ; {bloc d’itération}){
// code à exécuter
}
• Exemple :
for (var i = 1; i < 5; i++) { // la variable i s’incrémente de +1 à chaque
exécution de la boucle. Une fois que i sera égal à 5 la condition i < 5 ne sera
plus respectée et la boucle cessera de s’éxécuter.
alert('Itération n°' + i);
}
// la boucle va s’exécuter 5 fois et afficher successivement une alerte
contenant « Itération n°1 » , « Itération n°2 » , etc. jusqu’à « Itération n°5 »
Auteur : Olivier Martin pour la 3W Academy
La boucle For (variante) :
• Exemple sur un tableau (array):
var my_array = [‘john’, ‘sophie’,’thomas’];
for (var id in my_array ) { // la variable id correspond à l’index soit 0,1 et 2 dans notre exemple
alert(my_array[id]); // affiche john , puis sophie , puis thomas
}
• Exemple sur un object litéral :
var my_object = { ‘prenom’ : ‘john’, ‘nom’:’Do’, ‘genre’ : ‘homme’ };
for (var id in my_object ) { // la variable id correspond à l’index prenom , nom et genre
alert(my_object[id]); // affiche john , Do puis homme en 3ème exécution
}
Les boucles #3
Auteur : Olivier Martin pour la 3W Academy
Les fonctions
function Nom_De_Ma_Fonction(arguments){
// Le code que la fonction va devoir exécuter
}
• Exemple :
function somme(arg1,arg2){
return arg1 + arg2;
}
alert(somme(10,20)); // affiche « 30 »
Auteur : Olivier Martin pour la 3W Academy
Les tableaux (Array) et Objets littéraux
Les array :
• Exemple :
var languages = [‘html’ , ‘css’ , ’js’ , ‘php’ , ‘mysql’];
alert(languages[1]); // affiche «css»
alert(languages[4]); // affiche «mysql»
Identifiant 0 1 2 3 4
Données html css js php mysql
Auteur : Olivier Martin pour la 3W Academy
Parcourir un Array :
var languages = [‘HTML’ , ‘CSS’ , ’JS’ , ‘PHP’ , ‘MYSQL’];
for (i = 0, c = languages.length ; i < c ; i++)
{
document.write(‘- ‘+languages[i]+’ <br>’);
}
Ajouter une ou plusieurs données dans l’array :
languages.push(‘jQuery’); // on utilise la méthode push();
languages.push(‘PYTHON’ , ’RUBY’); // on ajoute plusieurs données à la volée
- HTML
- CSS
- JS
- PHP
- MYSQL
Résultat:
Auteur : Olivier Martin pour la 3W Academy
Les tableaux (Array) et Objets littéraux
Les objets littéraux :
• Exemple :
var personage = {prenom : ‘Tony’ , nom : ‘Stark’ , age : 35};
alert(personage[‘nom’]); // affiche «Stark»
alert(personage.nom); // affiche également «Stark»
Identifiant prenom nom age
Données Tony Stark 35
Auteur : Olivier Martin pour la 3W Academy
Parcourir un objet littéral :
var personage = {prenom : ‘Tony’ , nom : ‘Stark’ , age : 35};
for (var index in personage)
{
document.write(‘- ’+index +’ : ‘+ personage[index]+’ <br>’);
}
Ajouter ou modifier une propriété :
personage.ville = ‘lyon’; //si la propriété « ville » de l’objet littéral « personnage »
n’existe pas alors elle est créé; sinon elle est modifiée.
- prenom : Tony
- nom : Stark
- age : 35
Résultat :
Le javascript est un langage orienté objet
Chaque variable contient un objet sur lequel on peut lire des propriétés
et appliquer des méthodes.
Exemple :
var objet1 = [‘HTML’, ‘CSS’,’JS’]; // objet1 est un objet de type Array
console.log(objet1.length); // on lit la propriété « length » qui vaut 3
console.log(objet1.join(‘-’)); // on applique la méthode « join » ce qui
produit l’affichage de « HTML-CSS-JS » dans la console
LA POO (Programmation Orientée Objet)
Auteur : Olivier Martin pour la 3W Academy
LA POO (Programmation Orientée Objet)
LES OBJETS NATIFS
Exemple d’un objet natif javascript « window » :
• Window ontient des propriétés telles que :
window.innerWidth // renvoi la largeur interne
window.innerHeight // renvoi la hauteur interne
• Mais aussi des méthodes :
Window.close() // ferme la fenêtre en cours
window.print() //Ouvre la boîte de dialogue d'impression du document courant.
Autres objets natifs : console , document …
En savoir plus sur les propriétés et méthode de l’objet windows sur :
https://developer.mozilla.org/fr/docs/DOM/window
innerWidth
innerHeight
LA POO (Programmation Orientée Objet)
function voiture (color,mark, power) {
// on défini les propriétés
this.couleur= color;
this,marque = mark;
this.puissance = power ;
this.vitesse = 0 ; // peut être amenée à varier
// on défini les méthodes
this.tourner = function (angle=10){
// code qui ferait tourner la voiture en fonction de l’angle
défini. Par défaut on fait tourner la voiture de 10°.
}
this.accelerer = function (){ // mettre du code qui ferait
augmenté la proprité vitesse,
}
this.freiner = function (){// mettre du code qui ferait diminuer
la proprité vitesse,
}
this.klaxoner = function (){ // mettre du code qui
provoquerai l’émission d’ un son de klaxon depuis un fichier
.wav ou .mp3
}
}
Caractéristiques (Propriétés) :
- Couleur : Blanche
- Marque : Lamborghini
- Puissance : 492 ch
- Vitesse : de 0 à 320 km/h
Fonctionalités (Méthodes) :
- Tourner
- Accélérer
- Freiner
- Klaxonner
Objet constructeurExemple imagé avec une voiture Création des instances de l’objet voiture
// on créer une instance de l’objet voiture :
var lamborghini = new voiture(‘blanche‘,
‘Lamborghini’,492);
// on peut aussi créer une seconde instance :
var fiat_panda = new voiture(‘rouge‘ , ‘Fiat panda’ , 100);
alert(lamborghini.couleur); // affiche blanche
lamborghini.accelerer(); // on augmente la propriété
vitesse de l’objet lamborghini via sa méthode accelerer();
setTimeout(function(){alert(lamborghini.vitesse); },
4000);
// affiche la propriété « vitesse » de l’objet lamborghini
après 4 secondes d’accélération soit : 100 km/ h
Ressources pour continuer d’apprendre soi-
même :
- Wikibooks : http://fr.wikibooks.org/wiki/Programmation_JavaScript
- OpenClassroom : http://openclassrooms.com/courses/dynamisez-
vos-sites-web-avec-javascript
- Codecademy : http://www.codecademy.com/fr/tracks/javascript
- 3WA : http://javascript.3wa.fr
Auteur : Olivier Martin pour la 3W Academy
A SUIVRE…
Auteur : Olivier Martin pour la 3W Academy

Contenu connexe

Tendances

Javascript : que fait ce code?
Javascript : que fait ce code?Javascript : que fait ce code?
Javascript : que fait ce code?
Ruau Mickael
 
Exceptions
ExceptionsExceptions
Exceptions
Axel KAMALAK
 
Cours java script
Cours java scriptCours java script
Cours java script
AdelThaljaoui
 
JAVA
JAVAJAVA
Javascript les générateurs (generators)
Javascript   les générateurs (generators)Javascript   les générateurs (generators)
Javascript les générateurs (generators)
Julien CROUZET
 
Cours c++
Cours c++Cours c++
Cours c++
Nahla BelHaj
 
Javascript un langage supérieur
Javascript un langage supérieurJavascript un langage supérieur
Javascript un langage supérieurFredy Fadel
 
C# langage & syntaxe
C#   langage & syntaxeC#   langage & syntaxe
C# langage & syntaxe
Mahfoud EL HOUDAIGUI
 
Chapitre1: Langage Python
Chapitre1: Langage PythonChapitre1: Langage Python
Chapitre1: Langage Python
Aziz Darouichi
 
Initiation au code : Ateliers en C# (applications desktop et mobile native)
Initiation au code : Ateliers en C# (applications desktop et mobile native)Initiation au code : Ateliers en C# (applications desktop et mobile native)
Initiation au code : Ateliers en C# (applications desktop et mobile native)
Stéphanie Hertrich
 
Héritage et polymorphisme- Jihen HEDHLI
Héritage et polymorphisme- Jihen HEDHLIHéritage et polymorphisme- Jihen HEDHLI
Héritage et polymorphisme- Jihen HEDHLI
JihenHedhli1
 
Chapitre6: Surcharge des opérateurs
Chapitre6:  Surcharge des opérateursChapitre6:  Surcharge des opérateurs
Chapitre6: Surcharge des opérateurs
Aziz Darouichi
 
C# et .NET : Enigmes et puzzles
C# et .NET : Enigmes  et puzzlesC# et .NET : Enigmes  et puzzles
C# et .NET : Enigmes et puzzles
Microsoft
 
Les fonctions lambdas en C++11 et C++14
Les fonctions lambdas en C++11 et C++14Les fonctions lambdas en C++11 et C++14
Les fonctions lambdas en C++11 et C++14
Aurélien Regat-Barrel
 
Caml intro
Caml introCaml intro
Caml intro
zan
 
Présentation de ECMAScript 6
Présentation de ECMAScript 6Présentation de ECMAScript 6
Présentation de ECMAScript 6Julien CROUZET
 
Les fondamentaux du langage C
Les fondamentaux du langage CLes fondamentaux du langage C
Les fondamentaux du langage C
Abdoulaye Dieng
 

Tendances (20)

Cours java
Cours javaCours java
Cours java
 
Javascript : que fait ce code?
Javascript : que fait ce code?Javascript : que fait ce code?
Javascript : que fait ce code?
 
Exceptions
ExceptionsExceptions
Exceptions
 
Cours java script
Cours java scriptCours java script
Cours java script
 
JAVA
JAVAJAVA
JAVA
 
Javascript les générateurs (generators)
Javascript   les générateurs (generators)Javascript   les générateurs (generators)
Javascript les générateurs (generators)
 
Cours c++
Cours c++Cours c++
Cours c++
 
Javascript un langage supérieur
Javascript un langage supérieurJavascript un langage supérieur
Javascript un langage supérieur
 
C# langage & syntaxe
C#   langage & syntaxeC#   langage & syntaxe
C# langage & syntaxe
 
Chapitre1: Langage Python
Chapitre1: Langage PythonChapitre1: Langage Python
Chapitre1: Langage Python
 
Initiation au code : Ateliers en C# (applications desktop et mobile native)
Initiation au code : Ateliers en C# (applications desktop et mobile native)Initiation au code : Ateliers en C# (applications desktop et mobile native)
Initiation au code : Ateliers en C# (applications desktop et mobile native)
 
Ch11
Ch11Ch11
Ch11
 
Héritage et polymorphisme- Jihen HEDHLI
Héritage et polymorphisme- Jihen HEDHLIHéritage et polymorphisme- Jihen HEDHLI
Héritage et polymorphisme- Jihen HEDHLI
 
Chapitre6: Surcharge des opérateurs
Chapitre6:  Surcharge des opérateursChapitre6:  Surcharge des opérateurs
Chapitre6: Surcharge des opérateurs
 
C# et .NET : Enigmes et puzzles
C# et .NET : Enigmes  et puzzlesC# et .NET : Enigmes  et puzzles
C# et .NET : Enigmes et puzzles
 
Les fonctions lambdas en C++11 et C++14
Les fonctions lambdas en C++11 et C++14Les fonctions lambdas en C++11 et C++14
Les fonctions lambdas en C++11 et C++14
 
Caml intro
Caml introCaml intro
Caml intro
 
Présentation de ECMAScript 6
Présentation de ECMAScript 6Présentation de ECMAScript 6
Présentation de ECMAScript 6
 
Les fondamentaux du langage C
Les fondamentaux du langage CLes fondamentaux du langage C
Les fondamentaux du langage C
 
Cours php
Cours phpCours php
Cours php
 

En vedette

НВК "Якимівська гімназія"
НВК "Якимівська гімназія"НВК "Якимівська гімназія"
НВК "Якимівська гімназія"
NVK Yakym Gymnasia
 
Kuwait Discover the opportunity
Kuwait   Discover the opportunityKuwait   Discover the opportunity
Kuwait Discover the opportunity
John G. Hermanson
 
Coventional inheritance
Coventional inheritanceCoventional inheritance
Coventional inheritance
a_rabby_ajumder
 
Юровникова Антонина Николаевна
Юровникова Антонина НиколаевнаЮровникова Антонина Николаевна
Юровникова Антонина Николаевна
POPOVA DIANA
 
Independence&benefits
Independence&benefitsIndependence&benefits
Independence&benefits
xomxomxom
 
Wikiyblog
WikiyblogWikiyblog
Wikiyblog
mariandrea99
 
Presentation Magento OroCRM - MageConf 2014
Presentation Magento OroCRM - MageConf 2014Presentation Magento OroCRM - MageConf 2014
Presentation Magento OroCRM - MageConf 2014
Sylvain Rayé
 
Undergraduate prospectus
Undergraduate prospectusUndergraduate prospectus
Undergraduate prospectus
Emrana Khatun
 
Best Buy
Best BuyBest Buy
Best Buy
Avani Jain
 
Seth Northrop & Li Zhu - Legal Streaming
Seth Northrop & Li Zhu - Legal StreamingSeth Northrop & Li Zhu - Legal Streaming
Seth Northrop & Li Zhu - Legal Streaming
Li Zhu
 
Best Buy
 Best Buy Best Buy
Best Buy
Avani Jain
 
Маркарьян А.С.
Маркарьян А.С.Маркарьян А.С.
Маркарьян А.С.
POPOVA DIANA
 
2015路過數位藝術節感想短講4版(18g0v)
2015路過數位藝術節感想短講4版(18g0v)2015路過數位藝術節感想短講4版(18g0v)
2015路過數位藝術節感想短講4版(18g0v)
Jessie Wang
 
Distribution ppt 2
Distribution ppt 2Distribution ppt 2
Distribution ppt 2
Cuety242
 
Fa27assignment4 new
Fa27assignment4 newFa27assignment4 new
Fa27assignment4 new
goldenj234
 
Kuwait international boat show presentation Exhibitors
Kuwait international boat show presentation ExhibitorsKuwait international boat show presentation Exhibitors
Kuwait international boat show presentation Exhibitors
John G. Hermanson
 
Avani jain best_buy
Avani jain best_buyAvani jain best_buy
Avani jain best_buy
Avani Jain
 
Editing colour
Editing colourEditing colour
Editing colour
Sarah Dade
 

En vedette (20)

НВК "Якимівська гімназія"
НВК "Якимівська гімназія"НВК "Якимівська гімназія"
НВК "Якимівська гімназія"
 
anastasia_tatcha
anastasia_tatchaanastasia_tatcha
anastasia_tatcha
 
Kuwait Discover the opportunity
Kuwait   Discover the opportunityKuwait   Discover the opportunity
Kuwait Discover the opportunity
 
Coventional inheritance
Coventional inheritanceCoventional inheritance
Coventional inheritance
 
Юровникова Антонина Николаевна
Юровникова Антонина НиколаевнаЮровникова Антонина Николаевна
Юровникова Антонина Николаевна
 
Independence&benefits
Independence&benefitsIndependence&benefits
Independence&benefits
 
Wikiyblog
WikiyblogWikiyblog
Wikiyblog
 
Presentation Magento OroCRM - MageConf 2014
Presentation Magento OroCRM - MageConf 2014Presentation Magento OroCRM - MageConf 2014
Presentation Magento OroCRM - MageConf 2014
 
Undergraduate prospectus
Undergraduate prospectusUndergraduate prospectus
Undergraduate prospectus
 
Best Buy
Best BuyBest Buy
Best Buy
 
Seth Northrop & Li Zhu - Legal Streaming
Seth Northrop & Li Zhu - Legal StreamingSeth Northrop & Li Zhu - Legal Streaming
Seth Northrop & Li Zhu - Legal Streaming
 
Best Buy
 Best Buy Best Buy
Best Buy
 
Маркарьян А.С.
Маркарьян А.С.Маркарьян А.С.
Маркарьян А.С.
 
2015路過數位藝術節感想短講4版(18g0v)
2015路過數位藝術節感想短講4版(18g0v)2015路過數位藝術節感想短講4版(18g0v)
2015路過數位藝術節感想短講4版(18g0v)
 
Certificates
CertificatesCertificates
Certificates
 
Distribution ppt 2
Distribution ppt 2Distribution ppt 2
Distribution ppt 2
 
Fa27assignment4 new
Fa27assignment4 newFa27assignment4 new
Fa27assignment4 new
 
Kuwait international boat show presentation Exhibitors
Kuwait international boat show presentation ExhibitorsKuwait international boat show presentation Exhibitors
Kuwait international boat show presentation Exhibitors
 
Avani jain best_buy
Avani jain best_buyAvani jain best_buy
Avani jain best_buy
 
Editing colour
Editing colourEditing colour
Editing colour
 

Similaire à Les bases du javascript

Javascript pour les développeurs Java : quels sont les pièges à éviter ?
Javascript pour les développeurs Java : quels sont les pièges à éviter ?Javascript pour les développeurs Java : quels sont les pièges à éviter ?
Javascript pour les développeurs Java : quels sont les pièges à éviter ?
FlorianBoulay
 
HumanTalk - Commentaires, je t'aime un peu, beaucoup, à la folie, pas du tout
HumanTalk - Commentaires, je t'aime un peu, beaucoup, à la folie, pas du toutHumanTalk - Commentaires, je t'aime un peu, beaucoup, à la folie, pas du tout
HumanTalk - Commentaires, je t'aime un peu, beaucoup, à la folie, pas du tout
florentpellet
 
Notions de base de JavaScript
Notions de base de JavaScriptNotions de base de JavaScript
Notions de base de JavaScript
Kristen Le Liboux
 
POO_Java_BasesLangage.pdf
POO_Java_BasesLangage.pdfPOO_Java_BasesLangage.pdf
POO_Java_BasesLangage.pdf
LarbaSAWADOGO2
 
Cours php
Cours phpCours php
Cours php
csskaled
 
Introduction java
Introduction javaIntroduction java
Introduction java
Fouad Root
 
Python - Part1.pdf presentation cours intro
Python - Part1.pdf presentation cours introPython - Part1.pdf presentation cours intro
Python - Part1.pdf presentation cours intro
dallelkhezzaneint
 
Cours c#
Cours c#Cours c#
Cours c#
zan
 
Javascript #2 : valeurs, types & opérateurs
Javascript #2 : valeurs, types & opérateursJavascript #2 : valeurs, types & opérateurs
Javascript #2 : valeurs, types & opérateurs
Jean Michel
 
seance4-1 php.ppt
seance4-1 php.pptseance4-1 php.ppt
seance4-1 php.ppt
AmineReal
 
Php4 Mysql
Php4 MysqlPhp4 Mysql
Php4 Mysql
HamdiBaklouti
 
Apprendre vba excel(1)
Apprendre vba excel(1)Apprendre vba excel(1)
Apprendre vba excel(1)
FIDEL Wisly
 
Fiche de TD 1 de préparation probatoire (littéraire et scientifique) du Camer...
Fiche de TD 1 de préparation probatoire (littéraire et scientifique) du Camer...Fiche de TD 1 de préparation probatoire (littéraire et scientifique) du Camer...
Fiche de TD 1 de préparation probatoire (littéraire et scientifique) du Camer...
ATPENSC-Group
 
Cours_Java. Skzozibb nsif keizijfbjzozzml keiei tjeiz9rkr
Cours_Java. Skzozibb nsif keizijfbjzozzml keiei tjeiz9rkrCours_Java. Skzozibb nsif keizijfbjzozzml keiei tjeiz9rkr
Cours_Java. Skzozibb nsif keizijfbjzozzml keiei tjeiz9rkr
JulienKhalil3
 
Introduction au langage Ruby
Introduction au langage RubyIntroduction au langage Ruby
Introduction au langage RubyJulien Blin
 
Cours2 initiation language arduino
Cours2   initiation language arduinoCours2   initiation language arduino
Cours2 initiation language arduino
labsud
 
Fondamentaux portée - contexte - function ms tech days
Fondamentaux   portée - contexte - function ms tech daysFondamentaux   portée - contexte - function ms tech days
Fondamentaux portée - contexte - function ms tech days
Jean-Pierre Vincent
 
Eléments du langage Java.pdf
Eléments du langage  Java.pdfEléments du langage  Java.pdf
Eléments du langage Java.pdf
AabidiHafid
 

Similaire à Les bases du javascript (20)

Javascript pour les développeurs Java : quels sont les pièges à éviter ?
Javascript pour les développeurs Java : quels sont les pièges à éviter ?Javascript pour les développeurs Java : quels sont les pièges à éviter ?
Javascript pour les développeurs Java : quels sont les pièges à éviter ?
 
HumanTalk - Commentaires, je t'aime un peu, beaucoup, à la folie, pas du tout
HumanTalk - Commentaires, je t'aime un peu, beaucoup, à la folie, pas du toutHumanTalk - Commentaires, je t'aime un peu, beaucoup, à la folie, pas du tout
HumanTalk - Commentaires, je t'aime un peu, beaucoup, à la folie, pas du tout
 
Notions de base de JavaScript
Notions de base de JavaScriptNotions de base de JavaScript
Notions de base de JavaScript
 
POO_Java_BasesLangage.pdf
POO_Java_BasesLangage.pdfPOO_Java_BasesLangage.pdf
POO_Java_BasesLangage.pdf
 
Cours php
Cours phpCours php
Cours php
 
Introduction java
Introduction javaIntroduction java
Introduction java
 
Python - Part1.pdf presentation cours intro
Python - Part1.pdf presentation cours introPython - Part1.pdf presentation cours intro
Python - Part1.pdf presentation cours intro
 
33_1180.pdf
33_1180.pdf33_1180.pdf
33_1180.pdf
 
Cours c#
Cours c#Cours c#
Cours c#
 
Javascript #2 : valeurs, types & opérateurs
Javascript #2 : valeurs, types & opérateursJavascript #2 : valeurs, types & opérateurs
Javascript #2 : valeurs, types & opérateurs
 
seance4-1 php.ppt
seance4-1 php.pptseance4-1 php.ppt
seance4-1 php.ppt
 
Php4 Mysql
Php4 MysqlPhp4 Mysql
Php4 Mysql
 
Apprendre vba excel(1)
Apprendre vba excel(1)Apprendre vba excel(1)
Apprendre vba excel(1)
 
Fiche de TD 1 de préparation probatoire (littéraire et scientifique) du Camer...
Fiche de TD 1 de préparation probatoire (littéraire et scientifique) du Camer...Fiche de TD 1 de préparation probatoire (littéraire et scientifique) du Camer...
Fiche de TD 1 de préparation probatoire (littéraire et scientifique) du Camer...
 
Cours_Java. Skzozibb nsif keizijfbjzozzml keiei tjeiz9rkr
Cours_Java. Skzozibb nsif keizijfbjzozzml keiei tjeiz9rkrCours_Java. Skzozibb nsif keizijfbjzozzml keiei tjeiz9rkr
Cours_Java. Skzozibb nsif keizijfbjzozzml keiei tjeiz9rkr
 
Introduction au langage Ruby
Introduction au langage RubyIntroduction au langage Ruby
Introduction au langage Ruby
 
Cours2 initiation language arduino
Cours2   initiation language arduinoCours2   initiation language arduino
Cours2 initiation language arduino
 
Fondamentaux portée - contexte - function ms tech days
Fondamentaux   portée - contexte - function ms tech daysFondamentaux   portée - contexte - function ms tech days
Fondamentaux portée - contexte - function ms tech days
 
Eléments du langage Java.pdf
Eléments du langage  Java.pdfEléments du langage  Java.pdf
Eléments du langage Java.pdf
 
PHP.pptx
PHP.pptxPHP.pptx
PHP.pptx
 

Dernier

Riding motorbikes in country side 20
Riding motorbikes in country side 20Riding motorbikes in country side 20
Riding motorbikes in country side 20
RDM-ROW history
 
Les logiciels libres : une opportunite pour votre entreprise?
Les logiciels libres : une opportunite pour votre entreprise?Les logiciels libres : une opportunite pour votre entreprise?
Les logiciels libres : une opportunite pour votre entreprise?
Asher256
 
Riding motorbikes in country side 15
Riding motorbikes in country side 15Riding motorbikes in country side 15
Riding motorbikes in country side 15
RDM-ROW history
 
Stratégies pour accroître la visibilité et l'engagement de votre blog
Stratégies pour accroître la visibilité et l'engagement de votre blogStratégies pour accroître la visibilité et l'engagement de votre blog
Stratégies pour accroître la visibilité et l'engagement de votre blog
Asher256
 
Netflix, OCS et Disney avec ou sans engagement
Netflix, OCS et Disney avec ou sans engagementNetflix, OCS et Disney avec ou sans engagement
Netflix, OCS et Disney avec ou sans engagement
ABO IPTV PREMIUM
 
Conseils pour mieux Sécuriser votre système Linux
Conseils pour mieux Sécuriser votre système LinuxConseils pour mieux Sécuriser votre système Linux
Conseils pour mieux Sécuriser votre système Linux
Asher256
 

Dernier (6)

Riding motorbikes in country side 20
Riding motorbikes in country side 20Riding motorbikes in country side 20
Riding motorbikes in country side 20
 
Les logiciels libres : une opportunite pour votre entreprise?
Les logiciels libres : une opportunite pour votre entreprise?Les logiciels libres : une opportunite pour votre entreprise?
Les logiciels libres : une opportunite pour votre entreprise?
 
Riding motorbikes in country side 15
Riding motorbikes in country side 15Riding motorbikes in country side 15
Riding motorbikes in country side 15
 
Stratégies pour accroître la visibilité et l'engagement de votre blog
Stratégies pour accroître la visibilité et l'engagement de votre blogStratégies pour accroître la visibilité et l'engagement de votre blog
Stratégies pour accroître la visibilité et l'engagement de votre blog
 
Netflix, OCS et Disney avec ou sans engagement
Netflix, OCS et Disney avec ou sans engagementNetflix, OCS et Disney avec ou sans engagement
Netflix, OCS et Disney avec ou sans engagement
 
Conseils pour mieux Sécuriser votre système Linux
Conseils pour mieux Sécuriser votre système LinuxConseils pour mieux Sécuriser votre système Linux
Conseils pour mieux Sécuriser votre système Linux
 

Les bases du javascript

  • 1. LES BASES Auteur : Olivier Martin pour la 3W Academy http://www.conception.website
  • 2. Où écrire du code javascript ? <!DOCTYPE html> <html> <body> <h1>Hello world!</h1> ! Soit dans un fichier javascript externe :  <script src="monfichier.js" type="text/javascript"></script> ! Soit directement entre les balises <script></script>  <script type="text/javascript"> Alert(‘Hello world !’); // mettre tout votre code JS </script> </body> </html> Auteur : Olivier Martin pour la 3W Academy
  • 3. Comment débuguer son code JS ? En utilisant la console de votre navigateur. Pour la faire apparaître : faire soit « F12 », soit clic droit « inspecter l’élément » puis cliquez ensuite sur l’onglet « console » : Nature de l’erreur Fichier concerné Numéro de la ligne sur laquelle l’erreur a été rencontrée Auteur : Olivier Martin pour la 3W Academy
  • 4. Les variablesf Une variable sert à stocker une donnée qui sera utilisée plus tard. • Déclarer une variable et lui assigner une valeur : var maVariable = ‘valeur assignée’ ; • Déclarer plusieurs variables en même temps : var maVariable = ‘valeur assignée’ , maVariable2 = 45 , result; REMARQUES : - On peut très bien déclarer une variable sans lui assigner de valeur (exemple avec la variable « result »). - Le préfixe var sert à indiquer qu’il s’agit d’une variable locale et non une variable globale Auteur : Olivier Martin pour la 3W Academy
  • 5. Les variables Les variables sont dites « sensible à la casse ». Prenons cet exemple : var moi = ‘Thomas’ ; var Moi = ‘Olivier’ ; // on met un M masjuscule cette fois Alert(moi); // affiche Thomas Alert(Moi); // affiche Olivier Conclusion : les variables « moi » et « Moi » sont considérées comme différentes à cause de la majuscule. Auteur : Olivier Martin pour la 3W Academy
  • 6. 1) Utiliser la notation en camelCase pour le nom de variable : var maVariableBienEcrite = ‘hello’ ; >>> Cela consiste à écrire le premier mot en minuscule puis ceux qui suivent en les commençant par une majuscule. 2) Préférer l’usage de l’anglais : var myCompetencies = [‘HTML’ , ‘CSS’ , ‘JS’] >>> L’anglais est intéressant car il ne comporte aucun n’accent  3) Donnez leur des noms cohérents (éviter les noms du style myVar1, myVar2 etc.) Auteur : Olivier Martin pour la 3W Academy Les variablesf Quelques règles et bonnes pratiques pour nommer vos variables :
  • 7. Les variables Demander à l’utilisateur d’assigner une valeur à une variable avec la fonction prompt(); var prenom = prompt(‘Entrez votre prénom’); // Après validation la variable prenom vaudra « Samuel » Samuel Auteur : Olivier Martin pour la 3W Academy
  • 8. 3 façons d’afficher un résultat simplement : var test = ‘Hello world !’ ; alert(test) ; console.log(test); Faire F12 ou clic droit puis « inspecter l’élément » sur votre navigateur : document.write(test); // écrit « Hello world!» dans notre document html Le contenu de la variable s’affiche dans la console du navigateur Auteur : Olivier Martin pour la 3W Academy 1) 2) 3)
  • 9. Les types de variables Il existe plusieurs types de variable en javascript tels que les Nombres (number), les chaînes de caractère (string) ou encore les booléens qui valent 0 ou 1 (boolean) Exemples : var Myvar1 = 5 ; // il s’agit d’un nombre entier (number (int)) var Myvar2 = 5.1589 ; // il s’agit d’un nombre à virgule (number (float)) var Myvar3 = ‘du texte’ ; // il s’agit d’une chaîne de caractère (string) var Myvar4 = false ; / la variable est un booléen de valeur 0 (bool). var Myvar4 = true ; //la variable est un booléen de valeur 1 (bool). Auteur : Olivier Martin pour la 3W Academy
  • 10. Les types de variables Il existe également le type « function » et le type « object » un peu moins courant surtout pour les débutants. // variable contenant une fonction. Son type vaut « function » : var mafonction = function (){ // instructions } // exemple de variables dont le type vaut « object » : var mon_objet1 = [‘Jean’ , ’Alphonse’]; var mon_objet2 = {nom : ‘Jean’ , prenom : ‘Valjean’}; DON’T PANIC, les fonctions et objets seront abordés plus loin 
  • 11. Afficher le type d’une variable avec typeof var myVar = 5; alert(typeof Myvar); // affiche « number » var myVar =‘test’; alert(typeof Myvar); // affiche « string » var myVar = true; alert(typeof Myvar); // affiche « boolean » Auteur : Olivier Martin pour la 3W Academy
  • 12. Convertir le type d’une variable var chiffre1 = prompt(‘Entrer un chiffre’); var chiffre2 = prompt(‘Entrer un 2ème chiffre’); // on suppose que l’utilisateur rentre 5 et ensuite 6 var result = chiffre1 + chiffre2; alert (result); // affiche 56 et non 11 car les variables « chiffre1 » et « chiffre2 » dont les valeurs ont été assignées via prompt() sont par défaut considérées comme de type « string ». // La solution pour y remédier: result = parseInt(first) + parseInt(second); alert(result); // affiche enfin 11 Auteur : Olivier Martin pour la 3W Academy
  • 13. Les operateurs • L’opérateur « + » Permet d’additionner 2 valeurs numériques ou de mettre bout-à-bout plusieurs variables. var v1 = 5 , v2 = 10 , v3 = ‘un texte’; var somme = v1 + v2 ; // vaut 15 var somme2 = v1 + v3 + v2; // vaut « 5 un text 10 » • Opérateurs « - », « * » « / » : Permet de faire des soustractions, multiplications et divisions sur des variables de type « number ». var v1 = 5 , v2 = 3 , v3 = 10; var operation = ((v1 - v2) * v3) / v1; // vaut 4. Détail : ((5 - 3) x10) / 5) = 4 Auteur : Olivier Martin pour la 3W Academy
  • 14. Les operateurs • « % » (modulo) Affiche le reste d’une division. var mon_modulo = 11 % 2 ; // mon_modulo vaut 1 car 11 = 5x2 + 1 • « +=» Prend la valeur de la variable déclarée et lui ajouter la nouvelle valeur assignée : var v1 = 10 , v2 = ‘Du texte’ ; v1 += 5 ; // v1 vaut à présent 15 car 10 + 5 = 15 v2 += ‘encore plus long’ ; // v2 vaut « Du texte encore plus long » • «-=» « *=» « /=» «%=» : Fonctionne de la même manière que += mais que sur des valeurs de type « number ».
  • 15. LA CONCATENATION var v1 = ‘bonjour', v2 = ‘bonsoir', result; result = 'Bien le '+v1 +', bien le '+ v2+' !'; alert(result); // Affiche : « Bien le bonjour, bien le bonsoir ! » var result2 = v1+' et '+v2; alert(result2); // Affiche : « Bonjour et bonsoir» Auteur : Olivier Martin pour la 3W Academy
  • 16. Les conditions if, elseif et else If (Mettre une condition #1) { Exécuter du code si condition#1 est respectée… } elseif (Mettre une autre condition #2) { Code qui s’exécute si la condition#1 n’est pas respectée mais si la condition #2 est respectée… } else { Code qui s’exécute si condition#1 et condition#1 ne sont pas respectées… } Remarque : elseif et else sont optionnels. Vous pouvez aussi mettre une infinité de « elseif » mais un seul « else » à la suite d’une condition en « if » Auteur : Olivier Martin pour la 3W Academy
  • 17. Opérateurs de comparaison var mavariable = true; // Cela équivaut à écrire « var mavariable = 1; » // L’exemple ci dessous affichera « Bien égale à 1 » : if(mavariable == 1) { alert(‘Bien égal à 1’); } else { alert(‘Pas égale à 1’); } // L’exemple si dessous affichera « Pas égale à 1 » : if(mavariable === '1') { // ici ’10’ est considéré comme une chaîne de caractère et non un entier à cause des apostrophes ‘’ alert(‘Bien égal à 1’); } else { alert(‘Pas égale à 1’); } Auteur : Olivier Martin pour la 3W Academy
  • 18. Opérateurs logiques var v1 = 20 , v2 = false ; if( v1 > 10 && v1 < 30) alert(‘OK’); // affichera OK If(v1 == 10 || v2 == false) alert(‘OK’); // affichera OK if(!v2) alert(‘OK’); // affichera OK Auteur : Olivier Martin pour la 3W Academy
  • 19. Les boucles #1 La boucle While : var v1; // on déclarer la variable locale v1 while (v1 % 1 !== 0){ v1 = prompt('entrer un entier'); } Explication : Tant que v1 n’est pas un nombre entier on redemande à l’utilisateur de renseigner v1 via la boite de dialogue « prompt ». Pour info : Le reste d’un entier divisé par 1 vaut toujours 0. Exemple : 10 % 1 = 0. C’est donc une bonne astuce pour vérifier si une variable est un nombre entier  Auteur : Olivier Martin pour la 3W Academy
  • 20. Les boucles #2 La boucle For #1: • Structure de la boucle for ({bloc d’initialisation} ; {bloc de condition} ; {bloc d’itération}){ // code à exécuter } • Exemple : for (var i = 1; i < 5; i++) { // la variable i s’incrémente de +1 à chaque exécution de la boucle. Une fois que i sera égal à 5 la condition i < 5 ne sera plus respectée et la boucle cessera de s’éxécuter. alert('Itération n°' + i); } // la boucle va s’exécuter 5 fois et afficher successivement une alerte contenant « Itération n°1 » , « Itération n°2 » , etc. jusqu’à « Itération n°5 » Auteur : Olivier Martin pour la 3W Academy
  • 21. La boucle For (variante) : • Exemple sur un tableau (array): var my_array = [‘john’, ‘sophie’,’thomas’]; for (var id in my_array ) { // la variable id correspond à l’index soit 0,1 et 2 dans notre exemple alert(my_array[id]); // affiche john , puis sophie , puis thomas } • Exemple sur un object litéral : var my_object = { ‘prenom’ : ‘john’, ‘nom’:’Do’, ‘genre’ : ‘homme’ }; for (var id in my_object ) { // la variable id correspond à l’index prenom , nom et genre alert(my_object[id]); // affiche john , Do puis homme en 3ème exécution } Les boucles #3 Auteur : Olivier Martin pour la 3W Academy
  • 22. Les fonctions function Nom_De_Ma_Fonction(arguments){ // Le code que la fonction va devoir exécuter } • Exemple : function somme(arg1,arg2){ return arg1 + arg2; } alert(somme(10,20)); // affiche « 30 » Auteur : Olivier Martin pour la 3W Academy
  • 23. Les tableaux (Array) et Objets littéraux Les array : • Exemple : var languages = [‘html’ , ‘css’ , ’js’ , ‘php’ , ‘mysql’]; alert(languages[1]); // affiche «css» alert(languages[4]); // affiche «mysql» Identifiant 0 1 2 3 4 Données html css js php mysql Auteur : Olivier Martin pour la 3W Academy
  • 24. Parcourir un Array : var languages = [‘HTML’ , ‘CSS’ , ’JS’ , ‘PHP’ , ‘MYSQL’]; for (i = 0, c = languages.length ; i < c ; i++) { document.write(‘- ‘+languages[i]+’ <br>’); } Ajouter une ou plusieurs données dans l’array : languages.push(‘jQuery’); // on utilise la méthode push(); languages.push(‘PYTHON’ , ’RUBY’); // on ajoute plusieurs données à la volée - HTML - CSS - JS - PHP - MYSQL Résultat: Auteur : Olivier Martin pour la 3W Academy
  • 25. Les tableaux (Array) et Objets littéraux Les objets littéraux : • Exemple : var personage = {prenom : ‘Tony’ , nom : ‘Stark’ , age : 35}; alert(personage[‘nom’]); // affiche «Stark» alert(personage.nom); // affiche également «Stark» Identifiant prenom nom age Données Tony Stark 35 Auteur : Olivier Martin pour la 3W Academy
  • 26. Parcourir un objet littéral : var personage = {prenom : ‘Tony’ , nom : ‘Stark’ , age : 35}; for (var index in personage) { document.write(‘- ’+index +’ : ‘+ personage[index]+’ <br>’); } Ajouter ou modifier une propriété : personage.ville = ‘lyon’; //si la propriété « ville » de l’objet littéral « personnage » n’existe pas alors elle est créé; sinon elle est modifiée. - prenom : Tony - nom : Stark - age : 35 Résultat :
  • 27. Le javascript est un langage orienté objet Chaque variable contient un objet sur lequel on peut lire des propriétés et appliquer des méthodes. Exemple : var objet1 = [‘HTML’, ‘CSS’,’JS’]; // objet1 est un objet de type Array console.log(objet1.length); // on lit la propriété « length » qui vaut 3 console.log(objet1.join(‘-’)); // on applique la méthode « join » ce qui produit l’affichage de « HTML-CSS-JS » dans la console LA POO (Programmation Orientée Objet) Auteur : Olivier Martin pour la 3W Academy
  • 28. LA POO (Programmation Orientée Objet) LES OBJETS NATIFS Exemple d’un objet natif javascript « window » : • Window ontient des propriétés telles que : window.innerWidth // renvoi la largeur interne window.innerHeight // renvoi la hauteur interne • Mais aussi des méthodes : Window.close() // ferme la fenêtre en cours window.print() //Ouvre la boîte de dialogue d'impression du document courant. Autres objets natifs : console , document … En savoir plus sur les propriétés et méthode de l’objet windows sur : https://developer.mozilla.org/fr/docs/DOM/window innerWidth innerHeight
  • 29. LA POO (Programmation Orientée Objet) function voiture (color,mark, power) { // on défini les propriétés this.couleur= color; this,marque = mark; this.puissance = power ; this.vitesse = 0 ; // peut être amenée à varier // on défini les méthodes this.tourner = function (angle=10){ // code qui ferait tourner la voiture en fonction de l’angle défini. Par défaut on fait tourner la voiture de 10°. } this.accelerer = function (){ // mettre du code qui ferait augmenté la proprité vitesse, } this.freiner = function (){// mettre du code qui ferait diminuer la proprité vitesse, } this.klaxoner = function (){ // mettre du code qui provoquerai l’émission d’ un son de klaxon depuis un fichier .wav ou .mp3 } } Caractéristiques (Propriétés) : - Couleur : Blanche - Marque : Lamborghini - Puissance : 492 ch - Vitesse : de 0 à 320 km/h Fonctionalités (Méthodes) : - Tourner - Accélérer - Freiner - Klaxonner Objet constructeurExemple imagé avec une voiture Création des instances de l’objet voiture // on créer une instance de l’objet voiture : var lamborghini = new voiture(‘blanche‘, ‘Lamborghini’,492); // on peut aussi créer une seconde instance : var fiat_panda = new voiture(‘rouge‘ , ‘Fiat panda’ , 100); alert(lamborghini.couleur); // affiche blanche lamborghini.accelerer(); // on augmente la propriété vitesse de l’objet lamborghini via sa méthode accelerer(); setTimeout(function(){alert(lamborghini.vitesse); }, 4000); // affiche la propriété « vitesse » de l’objet lamborghini après 4 secondes d’accélération soit : 100 km/ h
  • 30. Ressources pour continuer d’apprendre soi- même : - Wikibooks : http://fr.wikibooks.org/wiki/Programmation_JavaScript - OpenClassroom : http://openclassrooms.com/courses/dynamisez- vos-sites-web-avec-javascript - Codecademy : http://www.codecademy.com/fr/tracks/javascript - 3WA : http://javascript.3wa.fr Auteur : Olivier Martin pour la 3W Academy
  • 31. A SUIVRE… Auteur : Olivier Martin pour la 3W Academy