<CodePhenix>

Accès à GitLab
↑

Les variables

Variable Description
var Permet de déclarer une variable globale, sa valeur peut être réaffectées.
let Permet de déclarer une variable avec une portée limitée à un bloc.
const Permet de déclarer une constante sa valeur doit être initier et ne pourra pas être réaffectées.
Exemple
var maVariable; //déclaration d'une variables
maVariable = 2; // assigner la valeur 2 à maVariable
const = 2; // la constante avec une valeur 2 ne pourra pas être modifié

Les types de données

Les nombres :

var number = 2;

Les chaines de caractères :

var texte = "Une chaine de caractère";

Les booléens :

var vrai = true,
    faux = false ;

Il est possible d'appeler différents types de données. Par exemple :

var paragraphe = "numéro du paragraphe" + numero;

Les tableaux

Les tableaux permettent de déclarer et stocker plusieurs valeurs sous la forme d'une liste.

Methode Description
length Donne la longeur des éléments du tableau.
[i] Donne le nom de l'élément de l'index i.
indexOf() Donne l'index de l'élément dans le tableau.
push Ajoute un élément en fin de tableau.
unshift Ajoute un élément au début du tableau.
pop() Retire le dernier élément du tableau.
shift() Retire le premier élément du tableau.
splice(i) Permet d'ajouter ou retirer un élément du tableau en fonction de son index.
includes() Permet de chercher un élément dans le tableau.
Exemples
var myArray = new Array();
var fruits = ["Pomme", "Framboise", "Cerise"];

Accéder à l'élément d'un tableau

fruits[0]; // Pomme
fruits.length; // 3
fruits[fruits.length - 1]; // Cerise
fruits.indexOf("Pomme"); // 0

Ajouter un élément à un tableau

fruits.push("Kiwi", "Poire" );
fruits.unshift("Banane", "Ananas" );

Retirer un élément d'un tableau

var fruits = ["Pomme", "Framboise", "Cerise"];
var last = fruits.pop(); // Cerise
var first = fruits.shift(); // Pomme

Ajouter ou retirer un élément à n'importe quel position

var fruits = ["Pomme", "Framboise", "Cerise"];
fruits.splice(0,1); // Supprime Pomme
fruits.splice(1, 0, "Kiwi", "Poire" ); // Kiwi et Poire sont ajoutés après Pomme
fruits.splice(1, 1, "Banane", "Ananas" ); // Banane et Ananas remplace Framboise

Chercher dans un tableau

fruits.includes("Pomme"); // true
fruits.includes("Citron"); // false

Déclarer un objet :

var monLivre = {
   titre: "Titre du livre",
   autheur: "Nom de l'autheur",
   annee: 2021
}

Déclarer des tableaux d'objets :

var monLivre = [
{
   titre: "Titre du livre 1",
   autheur: "Nom de l'autheur 1",
   annee: 2021
},
{
   titre: "Titre du livre 2",
   autheur: "Nom de l'autheur 2",
   annee: 2022
}
]

Déclarer des objets complexes :

{
   titre: "Titre du livre 2",
   autheur: "Nom de l'autheur 2",
   annee: 2022,
   format : {
     broche: true,
     poche: true,
     kindle: false
   }
}

Accéder à une informations :

monLivre.annee;

Ajouter de nouvelles informations :

monLivre.lu = true ;

Supprimer des informations :

delete monLivre.annee;

Il est possible de faire des modèles d'objet, que l'on appelle des classes. Par exemple :

class livre{
   constructor(titre, autheur, annee){
     this.titre = titre;
     this.autheur = autheur;
     this.annee = annee;
   }
}

On peut ensuite créer un nouvel objet basé sur le modèle, en utilisant l'ordre donné lors de la construction :

var nouveauLivre = new livre("Titre du livre", "Nom de l'autheur", 2021);

Algorithmie

Liste des opérateurs arithmetic

Opérateur Description
= Assigne une valeur.
+ Permet d'ajouter une valeur.
- Permet de soustraire une valeur.
* Permet de multiplier une valeur.
/ Permet de diviseur une valeur.
% Permet de faire un modulo d'une valeur.
+= Ajoute et assigne la valeur.
-= Soustrait et assigne la valeur.
*= Multiplie et assigne la valeur.
/= Divise et assigne la valeur.
%= Fait le modulo et assigne la valeur.
++ Permet d'incrémenter de 1.
-- Permet de décrémenter de 1.
Exemples

Opérations simple et modulo

var x = 10;
var y = 4;
x + y; // 14
x - y; // 6
x * y; // 40
x / y; // 2.5
x % y; // 2

Opérations et assignement

var x = 10;
x += 30; // 40
x -= 20; // 20
x *= 25; // 500
x /= 10; // 50
x %= 15; // 5

Avec une chaine de caractère

var str1 = "Hello";
var str2 = "World!";
console.log(str1 + str2); // Outputs: Hello World!

Différence d'incrémentation entre ++x etc++x

x = 10;
console.log(++x); // 11
console.log(x); // 11

x = 10;
console.log(x++); // 10
console.log(x); // 11

Les écouteurs d'évenements

Évenement Description
addEventListener() Ajoute un écouteur d'évenement.
removeEventListener() Retire un écouteur d'évenement.
click Au clic.
input Tant que l'élément de type input garde le focus.
change Quand l'élement de type input perd le focus.
mousemove Quand la souris est en mouvement.
mouseover Quand la souris est au survol.
mouseout Quand la souris ne survol plus.
keydown Quand une touche du clavier est appuyée.
scroll Détecte le scroll dans la page ou sur un élément.
transitionstart Détecte le début d'une transition.
transitionend Détecte la fin d'une transition.
animationstart Détecte le début d'une animation.
animationend Détecte la fin d'une animation.
animationend Détecte la fin d'une animation.
drag Détecte lorsqu'un élément est glissé.
drop Détecte lorsqu'un élément est déposé dans une zone valide.
load Détecte la fin d'un chargement.

Les boucles

Cette boucle exécute les intructions pour chaque élément.

Exemple avec un tableau :

var fruits = ["Pomme", "Framboise", "Cerise"];

for(var fruit of fruits) {
console.log(fruit)
}

Exemple avec un élément :

var mesElements = document.querySelectorAll("bouton");

for (var element of elements){
console.log(element);
}

Cette boucle est une variante de la boucle for of. Mais avec cette méthode on va pouvoir indexer, les éléments et les isoler en fonction de leur indice.

var fruits = ["Pomme", "Framboise", "Cerise"];

for(var fruit in fruits) {
console.log(fruit + fruits[fruit]);
}

Exemple avec un objet :

var person = {"titre": "Titre du livre", "autheur": "Nom de l'autheur", "annee": "2021"};

for (var info in livre) {
console.log(info + livre[info]);
}

La boucle for prend trois paramètres :

for (initialization; condition; increment) {
// Code à exectuer
}
  • initialisation - est utilisé pour initialiser les variables du compteur, et évalué une fois sans condition avant la première exécution de la boucle.
  • condition - est évaluée au début de chaque boucle, tant que la condition est remplie la boucle continue.
  • increment - met à jour la boucle avec une nouvelle valeur à chaque execution.

L'exemple suivant définit une boucle qui commence avec i=1. La boucle se poursuivra jusqu'à ce que la valeur de la variable i soit inférieure ou égale à 5. La variable i augmente de 1 à chaque fois que la boucle est exécutée :

for(var i=1; i<=5; i++) {
console.log(i);
}

Exemple avec un tableau :

var fruits = ["Pomme", "Framboise", "Cerise"];

for(var i=0; i<fruits.length; i++) {
console.log(i + fruits[i]);
}

La fonction agit un peu comme un tableau, elle va placer chaque éléments dans une liste. Elle peut ainsi prendre en compte trois paramètres (comme des variables, on peut les nommer selon notre choix), qui sont dans l'ordre :

  • l'élément individuel,
  • le numéro de l'élément dans la liste (son index),
  • et l'ensemble du tableau créé
var mesElements = document.querySelectorAll('p');

mesElements.forEach(function(element, index, array){
element.textContent += '(paragraphe n°:' + index + ')';
});

Exemple avec un tableau :

var numbers = [1, 2, 3, 4, 5, 6];

numbers.forEach(function(value, index, array){
array[index] = value * value;
});

console.log(numbers); // écrit : 1, 4, 9, 16, 25, 36

Exemple avec un évenement :

var button = document.querySelectorAll("button");

button.forEach(function(bouton){
bouton.addEventListener("click", function(){
bouton.style.backgroundColor = "red";
})
//Seul le bouton qui sera cliqué prendra la couleur rouge.
});

Cette boucle effectue les instructions tant que la condition spécifiée est vraie, si celle-ci est fausse la boucle ne sera jamais exécuté.

Exemple
var i = 1;
while(i <= 5) {
console.log("<p>Numéro " + i + "</p>");
i++;
}

La boucle while do est une variante de la boucle while, à la différence qu'elle exécute la condition en fin d'instruction, elle sera donc toujours exécutée une fois.

Exemple
var i = 1;
do {
console.log("<p>Numéro " + i + "</p>");
i++;
}
while(i <= 5);

Les conditions

Permet d’exécuter une instruction SI la condition est remplie.

Exemple
var now = new Date(),
dayOfWeek = now.getDay();

if(dayOfWeek == 5) {
console.log("Bon weekend !");
}

If else

Exemple

Permet d’exécuter une instruction SI la condition est remplie SINON on exécute une autre instruction.

if(dayOfWeek == 5) {
console.log("Bon weekend !");
} else {
console.log("Bonne journée !");
}

Else if

Permet d'ajouter des conditions supplémentaires dans le cas ou les précédentes ne sont pas remplies.

Exemple
if(dayOfWeek == 5) {
console.log("Bon weekend !");
} else if(dayOfWeek == 0) {
console.log("Have a nice Sunday!");
} else {
console.log("Bonne journée !");
}

L'opérateur ternaire est une façon abrégée d'écrire les instructions if...else. Il est représenté par le symbole du point d'interrogation ? et il prend trois opérandes : une condition à vérifier, un résultat pour true, et un résultat pour false.

Exemple
var age = 21;
var userType = age < 18 ? 'enfant' : 'Adulte';
console.log(userType); // Adulte

Cela revient au même que d'écrire :

var userType;
var age = 21;
if(age < 18) {
userType = 'enfant';
} else {
userType = 'Adulte';
}
console.log(userType); // Adulte

Permet de basculer d'un cas à l'autre en fonction d'une valeur.

switch(maValeur){
  case "valeur1":
     // Dans le cas ou maValeur est égale à valeur1 on exécute ces instructions.
     break;
   case "valeur2":
     // Dans le cas ou maValeur est égale à valeur2 on exécute ces instructions.
     break;
  default:
   /* Si maValeur est différente de tous les cas,
   on exécute les instructions placées ici. */
}
Exemple
var d = new Date();

switch(d.getDay()) {
   case 0:
     console.log("Dimanche");
     break;
   case 1:
     console.log("Lundi");
     break;
   case 2:
     console.log("Mardi");
     break;
   case 3:
     console.log("Mercredi");
     break;
   case 4:
     console.log("Jeudi");
     break;
   case 5:
     console.log("Vendredi");
     break;
   case 6:
     console.log("Samedi");
     break;
}

Les opérateurs

Opérateurs comparatifs

Opérateur Description
< Inférieur à.
<= Inférieur ou égal à.
> Supérieur à.
>= Supérieur ou égal à.
== Égal à.
=== identique à.
!= Différent de.
!== Ne sont pas identique.
Exemple
var x = 25;
var y = 35;
var z = "25";
console.log(x == z); // true
console.log(x === z); // false
console.log(x != y); // true
console.log(x !== z); // true
console.log(x < y); // true
console.log(x > y); // false
console.log(x <= y); // true
console.log(x >= y); // false

Opérateurs logiques

Opérateur Description
&& Permet de vérifier si deux conditions sont vraies (signifie « ET »).
|| Permet de vérifier si au moins une condition est vraie (signifie « OU »).
! Permet de vérifier si une condition n'est pas vraie (signifie « NON »).
Exemple
var year = 2018;
// Année bissextiles, divisibles par 400 ou par 4, mais pas par 100.
if((year % 400 == 0) || ((year % 100 != 0) && (year % 4 == 0))){
console.log("Année bissextiles");
} else {
console.log("Année non bissextiles");
}

Les fonctions

Les variables créées à l'interieur d'une fonction n'existent pas à l'exterieur de celle-ci.

Déclarer une fonction :

function maFonction(){
console.log("ma fonction se déclenche !");
}

Appeler une fonction :

maFonction();

Déclencher une fonction avec un écouteur d'évenement :

declencheFonction.addEventListener('click', maFonction);

Manipulation du DOM

Variable Description
getElementsByTagName sélectionne une balise.
getElementById sélectionne un identifiant.
getElementsByClassName sélectionne une classe.
querySelector permet de sélectionner avec un sélecteur CSS.
querySelectorAll permet de sélectionner plusieurs éléments avec un sélecteur CSS.
parentElement permet de sélectionner le parent d'un élément.
children permet de sélectionner les enfants d'un élément.
nextElementSibling sélectionne le prochain élément.
previousElementSibling sélectionne l'élément précédent.
Exemples
var paragraphe = document.querySelectorAll('.myClass p');
paragraphe.querySelectorAll('span');

Variable Description
createElement Créé une balise HTML.
appendChild Ajoute un élément en tant que dernier enfant.
insertBefore Ajoute un élément avant un autre élément.
removeChild Supprime un élément enfant.
replaceChild Remplace un élément enfant.
createTextNode Créé du contenu de type texte.
insertAdjacentHTML Ajoute du contenu en HTML avant un élément.
innerHTML Ajoute du contenu en HTML à la fin.

Variable Description
getAttribute Récupère la valeur du nom d'un attribut.
setAttribute Permet d'ajouter un nom d'attribut et sa valeur.
removeAttribute Supprime un attribut.
classList.add Ajoute une classe.
classList.remove Supprime une classe.
classList.replace Remplace une classe.
classList.contains Cherche si la classe contient la valeur.

Il est possible d'assigner un attribut et sa valeur en passant directement par son nom. Par exemple :

monImage.src = "img/mon-image.png";

La date

Méthode Description
getFullYear() renvoie l'année sur 4 chiffres.
getMonth() renvoie le mois (0 à 11).
getDate() renvoie le jour du mois (1 à 31).
getDay() renvoie le jour de la semaine (0 à 6, la semaine commence le dimanche).
getHours() renvoie l'heure (0 à 23).
getMinutes() renvoie les minutes (0 à 59).
getSeconds() renvoie les secondes (0 à 59).
getMilliseconds() renvoie les millisecondes (0 à 999).
Exemple
function timeRunnning(){
   var horlogeRunning = new Date();
   heure.innerHTML = horlogeRunning.getHours();
   min.innerHTML = horlogeRunning.getMinutes();
   sec.innerHTML = horlogeRunning.getSeconds();
   interval = setTimeout(timeRunnning, 1000);
}
timeRunnning();

Il est aussi possible de récupérer la date d'un input de type date :

var inputDate = document.querySelector("input[type='date']").value;
var maDate = new Date(inputDate);

La méthode de calcule

Méthode Description
floor Arrondi à l'entier inférieur le plus proche.
round Arrondi à l'entier le plus proche.
floor Arrondi à l'entier inférieur le plus proche.
celi Arrondi à l'entier supérieur le plus proche.
min Retourne la plus petite valeur.
max Retourne la plus grande valeur.
Exemples
console.log(Math.floor(9.99)); // 9

console.log(Math.round(3.5)); // 4
console.log(Math.round(-5.7)); // -6
console.log(Math.round(7.25)); // 7

console.log(Math.ceil(9.01)); // 10

var numbers = [1, 3, 2];
console.log(Math.max(...numbers)); // 3
console.log(Math.min(...numbers)); // 1

Les expressions régulières

Symbole Description
f Matche le caractère f littéralement
[ABC] Ce groupe de caractères matche A, B, OU C littéralement
[A-Za-z] Matche tout l'alphabet, majuscule comme minuscule
\d Equivalent à [0-9]
\s Matche l'espace et le retour à la ligne (les whitespace en général)
. Matche n'importe quel caractère
$ Echappe le caractère $ pour le matcher littéralement
{x, y} Répète l'élément précédent entre x et y fois
{x, } Répète l'élément précédent au moins x fois (sans limite)
* Equivalent à {0, }
+ Equivalent à {1, }
? Equivalent à {0, 1}
^ Début de ligne
$ Fin de ligne
( ) Groupe capturant
(?: ) Groupe non-capturant
Exemple
var regex = /@/; // la chaîne de caractère doit contenir le caractère @
console.log(regex.test("etienne&mail.fr")); // renvoie false
console.log(regex.test("etienne@mail.fr")); // renvoie true