Les bases du javascript

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>

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

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

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.

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

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

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 »

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

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

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»

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 »

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’);
}

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

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 

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 »

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

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 »

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

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:

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

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)

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

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

A SUIVRE…

Les bases du javascript

Contenu connexe

Tendances (20)

En vedette (20)

Similaire à Les bases du javascript (20)

Les bases du javascript