Java Script

Les bases

Sommaire :

1. commentaires

2. variables

{types}

{opérateurs arithmétiques}

{concaténation}

{length}

{brackets}

3. tableaux

4. fonctions

{portée}

{return}

5. conditions

{comparaisons}

{if...else}

{else...if}

{opérateurs logiques}

{switch}

6. boucles

{while}

{do while}

{for}

7. objets

{constructors}

Commenter son code

//Je suis un commentaire mono-ligne

Il existe 2 façons de commenter son code :

L'utilisation de // permet d'ignorer le texte sur la ligne.

Il est possible d'écrire un commentaire sur plusieurs lignes avec /* pour commencer et */ pour finir.

/*Je suis un 
  commentaire multi-lignes*/

Exo

Vous devez écrire un commentaire mono-ligne qui contient au moins 3 mots.

Vous devez écrire un commentaire multi-lignes qui contient au moins 3 mots.

résultat

//Je suis un commentaire mono-ligne

/*Je suis un 
  commentaire multi-lignes*/

Les variables

Une variable est un conteneur qui va stocker des informations temporairement.

Une variable va pouvoir changer, c'est à dire stocker différentes valeurs au fil du temps.

Quand on stocke une valeur, on dit qu'on assigne une valeur à la variable.

Pour déclarer une variable, nous allons utiliser les mot clés const & let.

let nom;
const monAge;

EXEMPLE

1 ère étape : Déclarer une variable.

Il existe des règles à respecter quand on écrit des variables :

Le nom d'une variable commence soit par une lettre soit par un underscore ( _ ).

Le nom d'une variable ne doit contenir que des lettres, chiffres et underscores. Pas de caractères spéciaux !!!

Le nom d'une variable ne doit pas contenir d'espaces.

Le nom d'une variable est sensible aux majuscules et minuscules.

Il existe des mots réservés en JS que l'ont ne pourra pas utiliser.

let nom = 'jojo';
const monAge = 5;

EXEMPLE

2 ème étape : Assigner une valeur à une variable avec

l'opérateur =.

Exo

Assigner la valeur Ford à la variable voiture.

Assigner la valeur 5 à la variable etoiles

résultat

let voiture = 'Ford';
let etoiles = 5;

Les types de valeurs

En JS, il existe plusieurs types de valeurs.

Le JS va automatiquement détectée le type de valeur que nous allons renseigner.

Nous allons donc pouvoir effectuer différents types d'opérations selon le type de variables.

Ces valeurs vont pouvoir être manipulées différemment en fonction de leur type.

Les 7 types de valeurs :

string (chaine de caractères)
number (nombre)
boolean (booléen)
null (nul / vide)
undefined (indéfini)
symbol (symbole)
object (objet)

La valeur STRING (chaine de caractère)

La valeur string va nous permettre de stocker du texte.

Pour cela, nous allons mettre nos valeurs à l'intérieur de guillemets ou apostrophes.

Toute valeur entre guillemets ou apostrophes sera considéré comme un texte même si c'est à priori un chiffre.

var nom = 'Ada';
var age = 59;
var monAge = "23";

EXEMPLE

console.log(typeof monAge);

La valeur NUMBER (nombre)

La valeur number va nous permettre de stocker des nombres.

Nous allons utiliser ni guillemets ou apostrophes.

Avec ce type de valeur, nous allons pouvoir assigner des nombres positifs, négatifs, entiers et décimaux.

var x = 5;
var y = -20;
var z = 5.3;

EXEMPLE

console.log(typeof x);

La valeur BOOLEAN (booléen)

Un booléen est, en algèbre, est une valeur binaire (0 et 1).

En informatique, il ne contient que 2 valeurs (true et false).

Cette valeur sera très utile pour tout ce qui est de vérifié si tel test est validé ou non.

Pas de guillemets ou apostrophes.

var vrai = true;
var faux = false;
var x = 2 < 7;

EXEMPLE

console.log(x);

Exo

x devrait avoir comme

valeur 18.

y devrait avoir comme

valeur -7.

//assigner 
//les valeurs
var x;
var y;
var nom;
var jojo;
var a;

//verifier les 
//résultats
console.log()

nom devrait avoir comme

valeur Manu.

jojo devrait avoir comme

valeur false.

a devrait avoir comme

valeur undefined.

résultat

//résultat console
//18 -7 "Manu" false undefined

Les opérateurs arithmétiques

Les opérateurs

Les opérateurs vont nous permettre d'effectuer des actions sur les variables et les valeurs.

L'opérateur = va nous permettre d'assigner une valeur à une variable.

L'opérateur + va nous permettre d'additionner une valeur à une autre valeur.

Les opérateurs arithmétiques vont nous permettre d'effectuer des opérations mathématiques entre les valeurs de type number.

var x = 5;
x = x + 10;

console.log(x);

EXEMPLE

Nous pouvons aussi stocker les valeurs de différentes variables dans une variable.

var x = 5;
var y = 10;
var resultat = x - y;

console.log(resultat);

EXEMPLE

Exo

x devrait valoir 80.

y devrait valoir 4.

//assigner 
//les valeurs
var x;
var y;
var z;

x = x * 10;
y = y / 2;
z = x + y;


//verifier les 
//résultats
console.log(x, y, z)

z devrait valoir 84.

résultat

//résultat console
//80 4 84

var x = 8;
x = x * 10;
var y = 8;
y = y / 2;
var z = x + y;
// CONSOLE
console.log(x, y, z);

Nous allons aussi pouvoir écrire de la façon suivante avec les opérateurs d'affectation.

var x = 5;
x += 10;

var y = 12;
y -= 6;

console.log(x,y);
// 15 6

EXEMPLE

Exo

x devrait valoir 4.

y devrait valoir 10.

var x = 8;
var y = 7;
var z = 2;
var Z = 27;

// Utiliser les 
//opérateurs d'affectation
x = x - 4;
y = 3 + y;
z = z * 22;
Z = Z / 3;

// Vérifier 
// les résultats
console.log(x, y, z, Z);

z devrait valoir 44.

Z devrait valoir 9.

résultat

x -= 4;
y += 3;
z *= 22;
Z /= 3;

La concaténation

La concaténation signifie mettre bout à bout.

Cela désigne le fait de rassembler deux chaînes des caractères pour en former une nouvelle.

Nous allons pour cela mettre notre nouvelle valeur entre des accents graves ( ` ).

Pour que cela fonctionne, il va falloir placer les expressions

entre ${}.

var nom = 'jojo';
var ville = 'Paris';
var age = 23;

console.log(`Bonjour, je m'appelle ${nom},
je vis à ${ville} et j'ai ${age} ans.`);

//résultat console
//Bonjour, je m'appelle jojo, 
//je vis à Paris et j'ai 23 ans.

EXEMPLE

Exo

Compléter la phrase en assignant des valeurs à ces 3 variables.

var nomSas;
var duree;
var formationPro;

console.log();

//résultat console
//Je participe au sas hackeuse pendant 
//6 semaines afin d'intégrer
//la formation développeuse web.

résultat

console.log(`Je participe au sas ${nomSas} pendant
${duree} semaines afin d'integrer 
la formation ${formationPro}`);

La propriété

LENGTH

La propriété LENGTH représente la longueur d'une chaîne de caractères.

var longueur = 'Combien de caractères constituent 
ma valeur? réponse :';

console.log(`${longueur} ${longueur.length}`);

//résultat console
//Combien de caractères constituent 
//ma valeur? réponse :  55

EXEMPLE

Exo

Afficher le nombre de caractères de la variable nom avec la propriété length.

let longueurDuNom;

let nom = 'Grace Hopper';

longueurDuNom = nom;

console.log();

résultat

let longueurDuNom = nom.length;

console.log(longueurDuNom);

//résultat console
//12

Les BRACKETS

(crochets)

La notation entre brackets est un moyen d'obtenir un index spécifique dans une chaine de caractères.

Comme pour la plupart des langages de programmation, en JS, On ne commence pas à compter à partir de 1 mais à partir de 0.

C'est ce qu'on appelle l'indéxation basée sur le 0.

let premiereLettre;
let nom = 'Rachida';

premiereLettre = nom[0];

console.log(premiereLettre);

// résultat console
// R

EXEMPLE

Exo

Afficher la troisième et la dernière lettre de la variable nom avec le système de brackets.

let nom = 'Margaret';

let troisiemeLettre = nom;
let derniereLettre = nom;

console.log();

résultat

let nom = 'Margaret';

let troisiemeLettre = nom[2];
let derniereLettre = nom[nom.length - 1];

console.log(troisiemeLettre, derniereLettre);

//resultat console
//r t

ARRAYS

(les tableaux)

Les variables de type array (tableaux) sont des variables particulières qui nous permettent de stocker plusieurs valeurs.

On va pouvoir stocker tout type de valeur.

Le tableau s'écrit entre brackets (crochets) et une virgule s'épare les valeurs.

let monTableau = [ 'Manu', 5, 5 * 3, 'lapin' ];

console.log(monTableau);

// résultat console
// (4) ["Manu", 5, 15, "lapin"]

EXEMPLE

Exo

Créer un tableau avec la variable myArray.

let myArray;

console.log();

Le tableau devrait comporter un string, un number négatif, une division et un booléen.

résultat

let myArray = [ 'bibiche', -5, 8 / 2, 6 < 3 ];
console.log(myArray);

//resultat console
//["bibiche", -5, 4, false]

Nous allons pouvoir accéder aux données à l'intérieur des tableaux grâce à leur indice ou clé.

La première valeur du tableau va être la valeur 0.

Cette syntaxe utilise les brackets (crochets).

let profil = [ 'Ada', 'développeuse', 1, 'pionnière' ];

let numero = profil[2];

console.log(numero);

// résultat console
// 1

EXEMPLE

var profil = [ 'Ada', 'développeuse', 1, 'pionnière' ];

profil[1] = 'mathématicienne';

console.log(profil);

// résultat console
// (4) ["Ada", "mathématicienne", 1, "pionnière"]

EXEMPLE

Nous allons pouvoir modifier les valeurs à notre convenance après la création de notre tableau.

var mesData = [ 
  [ 12, 45, 78 ], 
  [ 3, 66, 10 ], 
  [ 44, 88, 99 ] 
];

var data = mesData[1][2];

console.log(data);

// résultat console
// 10

EXEMPLE

Nous allons pouvoir accéder à plusieurs tableaux avec les indices à l'intérieur de notre tableau.

Exo

myData devrait être un tableau.

Changer la valeur 90 par 11.

let myData;

Montrer dans la console la valeur 11 et 23.

myData devrait avoir comme valeurs : [12,6,8], [44,71,90], [23,54,99].

résultat

let myData = [ [ 12, 6, 8 ], [ 44, 71, 90 ], 
             [ 23, 54, 99 ] ];

myData[0][2] = 11;

console.log(myData[0][2], myData[2][0]);

// résultat console
// 11 23

Nous allons pouvoir manipuler nos tableaux avec des méthodes.

Avec ces méthodes, nous allons pouvoir ajouter ou effacer des valeurs ou paramètres de notre tableau.

Manipuler les tableaux

Les méthodes push() et pop().

La méthode push() va nous permettre de d'ajouter des éléments à la fin de notre tableau. Nous allons passer les éléments à ajouter en argument.

La méthode pop() vas nous permettre de supprimer le dernier élément passé en argument.

var myData = [ 'Ada', 'Grace', 'Margaret' ];

console.log(myData);

myData.push('Dorothy', 'Hedy');

console.log(myData);

myData.pop();

console.log(myData);

// résultat console
// 
// (3) ["Ada", "Grace", "Margaret"]
// 
// (5) ["Ada", "Grace", "Margaret", "Dorothy", "Hedy"]
//
// (4) ["Ada", "Grace", "Margaret", "Dorothy"]

EXEMPLE

Les méthodes unshift() et shift().

La méthode unshift() va nous permettre de d'ajouter des éléments au début de notre tableau. Nous allons passer les éléments à ajouter en argument.

La méthode shift() vas nous permettre de supprimer le premier élément passé en argument.

var myData = [ 'Ada', 'Grace', 'Margaret' ];

console.log(myData);

myData.unshift('Dorothy', 'Hedy');

console.log(myData);

myData.shift();

console.log(myData);

// résultat console
// 
// (3) ["Ada", "Grace", "Margaret"]
// 
// (5) ["Dorothy", "Hedy", "Ada", "Grace", "Margaret"]
// 
// (4) ["Hedy", "Ada", "Grace", "Margaret"]

EXEMPLE

La méthode splice().

La méthode splice() va nous permettre de d'ajouter ou de supprimer des éléments à n'importe quel endroit de notre tableau.

La méthode splice() vas prendre 3 arguments :

La position de départ, le nombre d'éléments à remplacer et les éléments à ajouter au tableau.

var myData = [ 'Ada', 'Grace', 'Margaret' ];

console.log(myData);

myData.splice(2, 1, 'Dorothy', 'Hedy');

console.log(myData);

// résultat console
// (3) ["Ada", "Grace", "Margaret"]
// (5) ["Ada", "Grace", "Dorothy", "Hedy"]

EXEMPLE

Exo

Ajouter à la fin du tableau 'Phoebe'.

Placer 'Ross', 'Chandler' et 'Joey' entre 'Monica' et 'Phoebe'.

let friends = [ 'Janice', 'Monica', 'Ben' ];

console.log(friends);

Ajouter au début du tableau 'Rachel'.

Supprimer 'Ben'.

Supprimer 'Janice'.

résultat

let friends = [ 'Janice', 'Monica', 'Ben' ];

friends.pop();
friends.shift();
friends.push('Phoebe');
friends.unshift('Rachel');
friends.splice(2, 0, 'Ross', 'Chandler', 'Joey');

console.log(friends);

// résultat console
// (6) ["Rachel", "Monica", "Ross", "Chandler", 
// "Joey", "Phoebe"]

Functions

(les fonctions)

Une function (fonction) est un bloc de code nommé et réutilisable dont le but est d'effectuer une tâche précise.

Le JS dispose de nombreuses fonctions définies que nous pouvons utiliser juste en les appelant.

Nous les appelons méthodes.

Pour les invoquer, il suffit d'écrire la fonction suivi d'un couple de parenthèses.

var test = 'Keyser Söze';

alert(test);

EXEMPLE

Ici, nous allons utiliser la méthode alert qui va nous permettre de visualiser dans une fenêtre notre message.

Les fonctions personnalisées

En plus des nombreuses fonctions prédéfinies, nous allons pouvoir créer nos propres fonctions.

Créer des fonctions vont nous permettre de gagner du temps et de la maintenabilité.

La grande force des fonctions, va résidé dans le fait de les écrire une seule fois et de les réutiliser autant de fois que l'ont veut là où on en a besoin.

Pour ce faire, il va falloir les définir.

Les fonctions personnalisées

Pour créer une fonction, il faut :

-Utiliser le mot clé function.

-Lui donner un nom.

-Mettre un couple de parenthèses dans lequel nous allons mettre ou non des paramètres.

-Ouvrir une couple d'accolades dans lequel nous allons placer notre code.

function add(n1, n2) {
	console.log(n1 + n2);
}

add(5, 2);
add(12, 8);

// résultat console
// 7
// //20

EXEMPLE

Les fonctions personnalisées

Dans l'exemple, le but de notre fonction est de faire apparaitre dans la console une addition de 2 nombres non connus.

Nous allons faire passer en argument deux nombres à notre fonction afin qu'elle puisse les additionner lorsqu'on l'appelle.

Les paramètres vont nous servir de prête-noms qui seront remplacés par les valeurs effectives passées en argument lors de l'appel de cette fonction.

Exo

Créer une fonction appelée message qui doit faire apparaître une fenêtre quand on ouvre notre page Web.

La première fenêtre donnera comme message : "Hello".

La deuxième fenêtre donnera comme message : "Wesh".

Lui donner un paramètre que nous modifierons via les arguments suivants :

résultat

function message(a) {
	alert(a);
}

message('Hello');
message('Wesh');

La portée des variables

La portée des variables

La portée d'une variable désigne l'espace du script dans laquelle elle va être accessible.

Toutes nos variables ne sont pas disponibles partout.

En JS, il existe deux espaces : l'espace global et l'espace local.

L'espace global désigne tout le script alors que le local, l'intérieur d'une fonction.

La portée des variables

Une variable crée dans l'espace global va être accessible partout dans notre script.

Une variable locale va être seulement accessible dans l'ensemble d'une fonction.

La portée permet de protéger certaines variables en les rendant inaccessibles depuis l'extérieur.

En cas de conflit, c'est à dire une variable identique entre locale et globale, celle de la fonction sera prise en compte.

//On déclare deux variables globales
var x = 5;
var y = 8;

//On définit une première fonction
// qui utilise les variables globales
function portee1() {
	console.log(x + y);
}

//On définit une deuxième fonction
// qui définit des variables locales
function portee2() {
	var a = 5;
	var b = 6;
	console.log(a + b);
}

EXEMPLE

//On définit une troisème fonction
// qui définit des variables locales
function portee3() {
	var x = 1;
	var y = 2;
	console.log(x + y);
}

portee1();
portee2();
portee3();

// résultat console
// 13
// 11
// 3

EXEMPLE

function test() {
	var x = 7;
	var y = 9;
	console.log(x + y);
}

test();
console.log(x);

// résultat console
// 16
// Uncaught ReferenceError: x is not defined

La variable x crée une erreur dans la console, car elle n'est pas globale.

Exo

Ajouter une variable locale à la fonction cheveux pour remplacer le rouge par le vert.

var couleur = 'rouge';

function cheveux() {
	console.log(couleur);
}
cheveux();

résultat

var couleur = 'rouge';

function cheveux() {
	couleur = 'vert';
	console.log(couleur);
}

cheveux();

// résultat console
// vert

L'instruction

RETURN

Nous allons pouvoir utiliser une instruction return pour renvoyer une valeur hors de notre fonction.

return est une valeur renvoyée par une fonction une fois celle-ci terminée.

Ce n'est pas une instruction d'affichage comme alert().

Nous allons pouvoir manipuler cette valeur return ou la stocker dans une variable pour effectuer différentes opérations.

ATTENTION : return met fin à l'exécution de la fonction. Toutes les opérations qui la suivent seront ignorées.

Exo

Créer une fonction multi qui accepte un argument.

Multiplier cet argument par 8.

La fonction multi() doit renvoyer 32.

function multi(a) {
	return;
}

console.log();

résultat

function multi(a) {
	return a * 8;
}

console.log(multi(4));

// résultat console
// 32

EXEMPLE

var num = 2;

function ajoutCinq() {
	num = num + 5;
}

console.log(ajoutCinq());

//résultat console
//undefined

La valeur return n'est pas obligatoire. Dans ce cas, lorsque vous l'appelez, la fonction traite le code interne mais la valeur renvoyée n'est pas définie.

Les conditions

Les conditions vont nous permettre d'exécuter une série d'instructions si une condition donnée est vérifiée ou éventuellement une autre série d'instructions si elle ne l'est pas.

On va pouvoir utiliser les conditions pour effectuer différentes actions selon paramètres.

Exemple : si mon héros touche le dragon, alors il revient à sa position initiale.

Nous allons nous appuyer très souvent sur le contenu de variables.

EXEMPLE

function test() {
	if (1 < 5) {
		console.log("c'est vrai");
	}
}
test();

//résultat console
//c'est vrai

Nous allons créer notre condition avec le mot clé if. Dans la parenthèse, nous allons placer le test. A l'intérieur de l'accolade, définir le résultat souhaité.

Les opérateurs de comparaison

Nous allons comparer la valeur d'une variable à une certaine autre valeur donnée et selon le résultat, le bloc de code s'exécutera ou pas.

Pour cela nous allons utiliser les valeurs de comparaisons :

==	Permet de tester l’égalité sur les valeurs
===	Permet de tester l’égalité en termes de valeurs et de types
!=	Permet de tester la différence en valeurs
<>	Permet également de tester la différence en valeurs
!==	Permet de tester la différence en valeurs ou en types
<	Permet de tester si une valeur est strictement inférieure à une autre
>	Permet de tester si une valeur est strictement supérieure à une autre
<=	Permet de tester si une valeur est inférieure ou égale à une autre
>=	Permet de tester si une valeur est supérieure ou égale à une autre

EXEMPLE

function test(a, b) {
	if (a < b) {
		console.log('bien joué');
	}
}

test(2, 7);

//résultat console
//bien joué

Exo

Initialiser une variable x et stocker la valeur 7.

Créer une fonction test et passer lui comme paramètre a.

Si x est supérieur au paramètre a alors apparait dans la console le message 'Wesh'.

La fonction test doit avoir comme argument 5.

résultat

var x = 7;
function test(a) {
	if (x > a) {
		console.log('wesh');
	}
}
test(5);

//résultat console
//wesh

La condition

if ... else

( si ... sinon )

La condition if est limitée car elle n'exécute qu'un bloc de code que s'il est évalué à true mais ne nous offre aucune autre possibilité.

La structure conditionnelle if...else va nous permettre d'exécuter un bloc de code si le test renvoie à true et un autre bloc de code dans le cas contraire.

EXEMPLE

var x = 11;
function test() {
	if (x < 8) {
		console.log('Bien joué');
	} else {
		console.log('Essaie encore');
	}
}
test();

//résultat console
//Essaie encore

On place notre comparaison et on effectue le test dans le if mais en aucun cas dans le else car ce dernier prend en compte tous les autres paramètres.

Exo

Initialiser une variable a et stocker la valeur 5.5.

Créer une fonction monTest.

Si a est supérieur ou égal à 4 alors apparait dans la console : "c'est ça".

Sinon apparait dans la console : "un autre jour".

résultat

var a = 5.5;
function monTest() {
	if (a >= 4) {
		console.log("c'est ça");
	} else {
		console.log('un autre jour');
	}
}

monTest();

//résultat console
//c'est ça

La condition

else...if

( sinon ... si )

La condition if...else if...else va nous permettre de générer et de prendre en charge autant de cas que l'on souhaite.

Nous allons pouvoir écrire autant de else if dans notre condition et chacun d'entre eux pourra avoir son propre test.

Note : au premier test renvoyé à true, la condition s'arrête.

EXEMPLE

var note = 15;

function moyenne() {
	if (note > 18) {
		console.log('excellent');
	} else if (note >= 14) {
		console.log('très bien');
	} else {
		console.log('Doit travailler');
	}
}
moyenne();

//résultat console
//très bien

Exo

Initialiser une variable bonbons et stocker la valeur 22.

Créer une fonction jour.

Si bonbons est égal en type et en valeur à "22" alors apparait dans la console : "génial".

Sinon si bonbons est différent en valeur à 22 alors apparait dans la console : "fantastique".

Sinon apparait dans la console : "doit arrêter".

résultat

var bonbons = 22;

function jour() {
	if (bonbons === '22') {
		console.log('génial');
	} else if (bonbons != 22) {
		console.log('fantastique');
	} else {
		console.log('doit arrêter');
	}
}

jour();

//résultat console
//doit arrêter

Exo

function test(valeur) {
	if () {
		return '25 ou plus';
        
	} else if () {
		return '12 en type et en valeur';
               
	} else if () {
		return '14 ou moins';
               
	} else {
		return 'moins de 12';
	}
}

console.log(test(12));

résultat

function test(valeur) {
	if (valeur >= 25) {
		return '25 ou plus';
	} else if (valeur === 12) {
		return '12 en type et en valeur';
	} else if (valeur <= 14) {
		return '14 ou moins';
	} else {
		return 'moins de 12';
	}
}

console.log(test(12));

//résultat console
//12 en type et en valeur

Les opérateurs logiques

Ce type d'opérateurs va nous permettre d'être plus précis dans nos test tout en écrivant moins.

Il va nous permettre d'effectuer plusieurs comparaisons au sein d'un même test.

Le JS supporte 3 types de tests : ET, OU, NON.

L'opérateur ET dont le symbol est && renvoie true si toutes les comparaisons sont évaluées à true ou false sinon.

L'opérateur OU dont le symbol est || renvoie true si au moins une comparaison est évaluée à true ou false sinon.

L'opérateur NON dont le symbol est ! renvoie false si une comparaison est évaluée à true ou renvoie true dans le cas contraire.

EXEMPLE

var x = 5;

function test() {
	if (x > 3 && x < 7) {
		return 'x contient une valeur 
      entre 3 et 7';
      
	} else if (x === '4' || x <= 6) {
		return 'x est bien inférieur à 6';
      
	} else if (x !== '5') {
		return 'x est bien égal à 5 mais 
      renvoie false';
	}
}

console.log(test());

Exo

Créer une fonction test avec comme paramètre age.

Si age est supérieur à 15 ET inférieur à 18 alors est retourné dans la console "Trop jeune".

Si age est égal à 18 OU supérieur à 18 alors est retourné dans la console "Allez coco".

Si age est différent de "18" en type et en valeur, alors est retourné dans la console : "Tu fais quoi wesh ?"

Tester la fonction en lui passant les arguments : 17, 13 et 19.

résultat

function test(age) {
	if (age > 15 && age < 18) {
		return 'trop jeune';
	} else if (age == 18 || age > 18) {
		return 'allez coco';
	} else if (age !== '18') {
		return 'tu fais quoi wesh';
	}
}
console.log(test(17), test(13), test(19));

//résultat console
// trop jeune 
// tu fais quoi wesh 
// allez coco

L'instruction

SWITCH

L’instruction switch va nous permettre d’exécuter un code en fonction de la valeur d’une variable. On va pouvoir gérer autant de « cas » que l’on souhaite.

L’instruction switch représente une alternative à l’utilisation de if…else if…else.

Dans un switch chaque cas va être lié à une valeur précise. L’instruction switch ne supporte pas l’utilisation des opérateurs de supériorité ou d’infériorité.

Il va pouvoir être plus intéressant (mais rarement) d’utiliser un switch plutôt qu’un if…else if…else car plus rapide.

EXEMPLE

var test = 10;

switch (test) {
	case 1:
		console.log("ce n'est pas 1");
		break;
	case 10:
		console.log("c'est bien le 10");
		break;
	default:
		console.log("c'est aucun des cas");
}

console.log(test);

// résultat console
// c'est bien le 10

Exo

Créer une fonction bouffe avec comme paramètre compo.

Créer une variable grec en stockant un espace vide comme valeur.

Créer une instruction switch qui va définir la variable grec.

Créer 3 cas possibles : "salade", "tomates", "oignons" et une valeur par défaut : "chef".

Retourner la valeur grec et passer l'argument 3 à la fonction bouffe.

résultat

function bouffe(compo) {
  
	switch (compo) {
		case 'a':
			console.log('salade');
			break;
		case 'b':
			console.log('tomates');
			break;
		case 'c':
			console.log('oignons');
			break;
		default:
			console.log('chef');
	}
}

bouffe('c');

résultat

// résultat console
// oignons

Les boucles

Les boucles vont nous permettre d’exécuter plusieurs fois un bloc de code, c’est-à-dire d’exécuter un code « en boucle » tant qu’une condition donnée est vérifiée et donc nous faire gagner de temps dans l’écriture de nos scripts.

Lorsqu’on code, on va en effet souvent devoir exécuter plusieurs fois un même code.

Utiliser une boucle nous permet décrire le code qu’on doit exécuter une seule fois.

Son fonctionnement :

on pose une condition souvent liée à la valeur d’une variable et on exécute le code « en boucle » tant que la condition est vérifiée.

il faudra que la condition donnée soit fausse à un moment donné (pour pouvoir sortir de la boucle).

Pour que notre condition devienne fausse à un moment, on pourra incrémenter ou décrémenter la valeur de notre variable à chaque nouveau passage dans la boucle.

Les boucles vont donc être essentiellement composées de trois facteurs :

Une valeur de départ qui va nous servir à initialiser notre boucle et nous servir de compteur .

Un test ou une condition de sortie qui précise le critère de sortie de la boucle .

Un itérateur (Incrémenter) qui va modifier la valeur de départ de la boucle à chaque nouveau passage jusqu’au moment où la condition de sortie est vérifiée. Incrémenter une valeur signifie ajouter 1 à cette valeur tandis que décrémenter signifie enlever 1.

Nous disposons de six boucles différentes en JavaScript :

La boucle while (« tant que »)
La boucle do… while (« faire… tant que »)
La boucle for (« pour »)
La boucle for… in (« pour… dans»)
La boucle for… of (« pour… parmi »)
La boucle for await… of (« pour -en attente-… parmi »)

La boucle

WHILE

La boucle WHILE

La boucle while (tant que) va nous permettre de répéter une série d’instructions tant qu’une condition donnée est vraie.

La condition de sortie est analysée avant d’entrer dans la boucle, c'est à dire que si la valeur initiale est supérieur à celle du test, nous ne rentrerons jamais dans la boucle.

EXEMPLE

var monTableau = [];
//on initialise la variable i avec la valeur 0
var i = 0;
//Tant que la variable est inférieure à 6
while (i < 6) {
//on push les valeurs dans le tableau
	monTableau.push(i);
//on incrémente pour chaque tour
	i++;
// la boucle va refaire un tour
// jusqu'à ce que test soit faux
}

console.log(monTableau);

// résultat console
// (6) [0, 1, 2, 3, 4, 5]

EXEMPLE

var monTableau = [];
var i = 0;
while (i < 6) {
	monTableau.push(i);
	i++;
}
console.log(monTableau);

// Les 3 questions de boucles
// 1. Qu'est ce que je veux répéter ?
//La valeur de ma variable i
// 
// 2. Que dois-je changer ?
// Augmenter valeur de i dans mon tableau
// 
// 3. Combien de temps faut-il répéter?
// Jusqu'à ce que i soit égal à 6

EXEMPLE

// A chaque fois que la boucle s'exécute, i prend  + 1.
// 
// La boucle s'arrête quand la condition n'est plus vérifiée, 
// c'est-à-dire quand i n'est plus plus petit que 6.
// 
// La variable i est initialisée à 0 au début du programme, 
// et elle est incrémentée de 1 à chaque fois que la boucle 
// est exécutée.
// 
// La première fois que la boucle est exécutée, 
// la ligne i++ met i à 1.
// 
// La seconde fois que la boucle est exécutée, 
// la ligne i++ met i à 2...
// 
// Lorsque le programme atteint la fin de la boucle et 
// teste la condition, il cesse la répétition car 
// la condition i < 6 n’est plus vérifiée.

Exo

Créer un tableau sans valeur stockée.

Initialiser la variable i et stockée la bonne valeur.

Vous devez utiliser la boucle while.

Mon tableau est égal à [10, 9, 8, 7, 6, 5].

résultat

var tableau = [];

var i = 10;

while (i >= 5) {
	tableau.push(i);
	i--;
}

console.log(tableau);

// résultat console
// (6) [10, 9, 8, 7, 6, 5]

La boucle

DO WHILE

La boucle DO... WHILE

La boucle do...while (faire...tant que) est semblable à la boucle while.

La différence se situe dans l'ordre dans lequel vont se faire les opérations.

Ici, le code de la boucle va être exécuté avant l'évaluation de la condition de sortie.

A la différence de while, on effectuera toujours au moins un passage même si la condition de sortie n'est pas vérifiée.

EXEMPLE

var monTableau = [];
// ma variable i n'entre pas dans la condition
var i = 7;
do {
	monTableau.push(i);
	i++;
} while (i < 6);

console.log(monTableau);

// résultat console
// [7]

Exo

Changer la boucle while en do while.

var tableau = [];

var i = 10;

while (i < 5) {
	tableau.push(i);
	i--;
}

console.log(tableau);

résultat

var tableau = [];

var i = 10;

do {
	tableau.push(i);
	i--;
} while (i < 5);

console.log(tableau);

// résultat console
// [10]

La boucle

FOR

La boucle FOR

La boucle for (pour) est structurellement différente des boucles while et do… while puisqu’on va cette fois-ci initialiser notre variable à l’intérieur de la boucle.

La boucle for utilise une syntaxe condensée, ce qui en fait la condition la plus utilisée en JS.

Une boucle for contient trois « phases » à l’intérieur du couple de parenthèses : une phase d’initialisation, une phase de test (condition de sortie) et une phase d’itération.

Chaque phase est séparée des autres par un point-virgule.

EXEMPLE

var tableau = [];

for (var i = 0; i < 5; i++) {
  
	tableau.push(i);
}

console.log(tableau);

// résultat console
// (5) [0, 1, 2, 3, 4]

Exo

Changer la boucle while en for.

var tableau = [];

var i = 10;

while (i > 5) {
	tableau.push(i);
	i--;
}

console.log(tableau);

résultat

var tableau = [];

for (var i = 10; i > 5; i--) {
  
	tableau.push(i);
}

console.log(tableau);

// résultat console
// (5) [10, 9, 8, 7, 6]

Exo

Push des nombres impairs allant de 13 à 21 (inclus).

Utiliser une boucle for.

Mon tableau est égal à : [13, 15, 17, 19].

var tableau = [];

console.log(tableau);

résultat

var tableau = [];

for (var i = 13; i < 21; i += 2) {
  
	tableau.push(i);
}

console.log(tableau);

// résultat console
// (4) [13, 15, 17, 19]

Exo

Déclarer une variable total et initialiser la à 0;

Utiliser une boucle for pour additionner la valeur de chaque élément de mon tableau à la variable total .

La variable total doit être au final égal à 50.

var monTableau = [ 8, 9, 10, 11, 12 ];

console.log(total);

résultat

var monTableau = [ 8, 9, 10, 11, 12 ];

var total = 0;

for (var i = 0; i < 5; i++) {
	
	monTableau.push(i);

	total = total + monTableau[i];
}

console.log(total);

// résultat console
// 50

Objects

(les objets)

Dans la « vraie » vie, un crayon est un objet.

Des crayons de différentes couleurs, différentes tailles ou formes.

La couleur, taille ou forme d’un crayon vont être des propriétés.

Ils vont posséder les mêmes propriétés (ils possèdent tous une taille) mais les valeurs associées à ces propriétés vont être différentes (chaque crayon peut avoir une taille différente des autres).

De plus, un crayon sert à écrire. "Ecrire" est donc ici une fonction de l'objet crayon ou encore ce que nous allons désormais appeler une méthode.

JavaScript est un langage orienté objet.

Cela signifie que ce langage a été construit autour du concept d’objets, et que son fonctionnement même se base sur l’utilisation d’objets.

En JavaScript, quasiment tout est avant tout objet :

Les chaînes de caractères, nombres et booléens peuvent être des objets;
Les fonctions sont des objets ;
Les tableaux sont des objets ;

Un objet est :

Un ensemble cohérent de données et de fonctionnalités qui vont fonctionner ensemble.

Un conteneur qui va pouvoir stocker plusieurs variables qu’on va appeler ici des propriétés.

Une méthode lorsqu’une propriété contient une fonction en valeur.

Un conteneur qui va posséder un ensemble de propriétés et de méthodes qu’il est cohérent de regrouper.

EXEMPLE

var primitive = "Je suis une variable primitive";

// Marvel est un objet littéral
var Marvel = {
// nom, rang, partenaires sont des propiétés
	nom: 'Tony',
	rang: 1,
// la valeur de partenaires est un tableau
	partenaires: [ 'Thor', 'Hulk', 'Captain' ],
// message est une méthode
	message: function() {
		console.log('Je suis Iron Man');
	}
};

console.log(typeof Marvel);
// résultat console
// object

Quand on ouvre des accolades en JS, on lui signifie que l'on va créer un objet.

On insère notre propriété et on lui ajoute une valeur. Entre les deux le caractère est ( : ).

La combinaison des deux se nomme un membre.

On termine le membre par une virgule pour passer au suivant à moins que cela ne soit le dernier.

Exo

Créer l'objet moi.

Créer la propriété nom avec une valeur string.

Créer la propriété age avec une valeur number.

Créer la propriété collegues avec au moins 3 valeurs dans un tableau.

résultat

var moi = {
	nom: 'Jojo',
	age: 22,
	collegues: [ 'Marina', 'Laura', 'Yveline' ]
};

console.log(moi);

// résultat console
// {nom: "Jojo", age: 22, collegues: Array(3)}

Accéder et modifier

Pour accéder aux propriétés et aux méthodes d’un objet, on utilise le caractère point ( . ) qu’on appelle également un accesseur.

On va commencer par préciser le nom de l’objet puis l’accesseur puis enfin le membre auquel on souhaite accéder.

Cet accesseur va nous permettre non seulement d’accéder aux valeurs de nos différents membres mais également de modifier ces valeurs.

EXEMPLE

var moi = {
	nom: 'Jojo',
	age: 22,
	collegues: [ 'Marina', 'Laura', 'Yveline' ]
};

console.log(moi.nom);

moi.nom = 'Vegeta';

console.log(moi);

// résultat console
// Jojo
// {nom: "Vegeta", age: 22, collegues: Array(3)}

Exo

Modifier la 3ème valeur du tableau collegues.

La 3ème valeur devrait être égale à "Rachida".

résultat

var moi = {
	nom: 'Jojo',
	age: 22,
	collegues: [ 'Marina', 'Laura', 'Yveline' ]
};

moi.collegues[2] = 'Rachida';

console.log(moi);

// résultat console
// collegues: (3) ["Marina", "Laura", "Rachida"]

Ajouter et supprimer des propriétés

Pour ajouter des propriétés dans notre tableau, nous devrons écrire le nom de l'objet suivi d'un point et de la nouvelle propriété ainsi que la valeur stockée à l'intérieur.

Pour supprimer une propriété, nous la précéderons de l'opérateur delete.

EXEMPLE

var moi = {
	nom: 'Jojo',
	age: 22,
	collegues: [ 'Marina', 'Laura', 'Yveline' ]
};

moi.job = 'formateur';

delete moi.age;

console.log(moi);

// résultat console
// {nom: "Jojo", collegues: Array(3), job: "formateur"}

Exo

Créer un objet voiture.

L'objet doit comporter 3 propriétés et 1 méthode.

L'une de ces propriétés est un tableau qui contient 3 valeurs.

La méthode nous permet d'afficher dans la console le message "la voiture s'appelle nomDeLaVoiture".

Ajouter une propriété couleur.

Effacer la deuxième propriété.

résultat

var voiture = {
	nom: 'Ford',
	prix: 150000,
	concu: [ 'Ferrari', 'Lambo', 'Audi' ],
	message: function() {
		console.log(`La voiture s'appelle ${voiture.nom}`);
	}
};

voiture.couleur = 'rouge';

delete voiture.prix;

voiture.message();

console.log(voiture);

// résultat console
// La voiture s'appelle Ford
// {nom: "Ford", concu: Array(3), couleur: "rouge", message: ƒ}

Les constructeurs

Les avantages de la programmation orientée objet sont d’obtenir Les scripts les plus performants.

Elle permet de créer de multiples objets semblables, à la chaine et de manière dynamique.

En groupant des données au sein d’objets, on va pouvoir manipuler plutôt que de réécrire sans cesse les mêmes opérations.

Ex: 0n souhaite créer un objet à chaque fois qu’un utilisateur enregistré se connecte sur notre site.

Chaque objet « utilisateur » va posséder des propriétés.

A la place d'écrire de manière littérale, il serait pratique de créer une sorte de plan à partir duquel on pourrait créer des objets similaires à la chaine.

Le constructeur d’objets qui n’est autre qu’une fonction constructeur va nous permettre de réaliser cette opération.

EXEMPLE

// Profil est une fonction constructor
function Profil(nom, age, genre) {
	this.nom = nom;
	this.age = age;
	this.genre = genre;
	this.presentation = function() {
		return 'Je suis un.e client.e.';
	};
}

// On créer un objet humain_1 en utilisant 
// le constructor
// L'opérateur new appelle le constructor
var humain_1 = new Profil('Ada', 205, 'féminin');
var humain_2 = new Profil('Alan', 55, 'masculin');

EXEMPLE

// On peut accéder aux valeurs des propriétés
// de l'objet crée
console.log(humain_1.nom);
console.log(humain_2.presentation());

// résultat console
// Ada
// Je suis un.e client.e

Java Script { les bases }

By Jonathan Blanc