Introduction au Langage JavaScript

JavaScript (abrégé "JS") est un langage de programmation léger, interprété ou compilé à la volée, avec une approche fonctionnelle. JavaScript est un langage de script avancé conçu pour le web, largement utilisé dans le développement d'applications web pour ajouter diverses fonctionnalités dynamiques et offrir une expérience utilisateur plus fluide et esthétique. Typiquement, les scripts JavaScript sont intégrés directement dans du code HTML pour fonctionner.

Syntaxe de base

Syntaxe des commentaires

// Commentaire sur une seule ligne
/* Commentaire
   sur plusieurs lignes */

Différentes méthodes d'inclusion de JavaScript

• Écriture directe dans les balises script
• Inclusion de fichiers JavaScript via les balises script

Les balises script peuvent être insérées n'importe où dans un document HTML. Puisque les fichiers HTML sont chargés de haut en bas, le code JavaScript peut déclarer des fonctions en haut du document ou attendre le chargement de certains éléments avant s'exécuter.

Symbole de fin de déclaration

Point-virgule ;

Note : Il est possible d'écrire des fichiers JavaScript dans l'éditeur IDE comme PyCharm

Variables et constantes

Mots-clés pour les variables : var, let

Les variables en JavaScript sont de type dynamique et ne nécessitent pas de spécification du type de données lors de leur déclaration.

> var nombre = 100
< undefined
> nombre
< 100
> let compteur = 200;
< undefined
> compteur
< 200

Dans la console du navigateur, le symbole > indique le code exécuté et < affiche la valeur de retour.

• let est une syntaxe introduite dans ECMAScript 6, permettant de définir des variables locales qui n'affectent pas l'espace global, comme à l'intérieur d'une boucle.
• Dans les navigateurs modernes, il est recommandé d'utiliser let pour créer des variables.

Mots-clés pour les constantes : const

Une constante définie ne peut plus être réassignée, elle est en lecture seule.

const VALEUR = 10;
VALEUR = 11;  // Erreur : Assignment to constant variable.
console.log(VALEUR);  // 10

Types de données de base

L'opérateur typeof permet d'interroger le type d'une variable. typeof lui-même est un opérateur.

L'appel de l'opérateur typeof sur une variable ou une valeur retournera l'une des valeurs suivantes :

• undefined - si la variable est de type Undefined
• boolean - si la variable est de type Boolean
• number - si la variable est de type Number
• string - si la variable est de type String
• object - si la variable est un type de référence ou de type Null

Type numérique (Number)

En JavaScript, les entiers et les nombres à virgule flottante sont tous des objets Number. Nous pouvons cependant effectuer diverses opérations de conversion :

• parseInt("123") convertit une chaîne de caractères numérique en entier
• parseFloat("123.456") convertit une chaîne de caractères numérique en nombre à virgule flottante
• parseInt("abc") retourne NaN (Not a Number)

NaN (Not a Number)

NaN est un type de données numérique en JavaScript, indiquant qu'une valeur n'est pas un nombre.

Type chaîne de caractères (String)

Données entourées de guillemets simples ou doubles, utilisées pour stocker des données textuelles.

let texte1 = "formation"
let texte2 = 'js'

Il est également possible d'utiliser les chaînes de caractères modèles (template strings) :

let texte3 = `Supporte les
lignes
multiples`
let nom = 'marc', moment="maintenant";
`Bonjour ${nom}, comment vas-tu ${moment}?`  // Permet l'insertion de variables

Concaténation de chaînes :

JavaScript supporte l'opérateur + pour la concaténation de chaînes, avec une efficacité raisonnable dans la plupart des cas.

Python supporte égalemetn cette opération, mais avec une efficacité moindre dans le cas de Python.

let pre = "for"
let suf = "mation"
let mot = pre + suf
console.log(mot)  // formation

Méthodes courantes pour les chaînes :

Méthode	Description	Complément
.length	Retourne la longueur
.trim()	Retourne la chaîne sans espaces de début et de fin	Peut spécifier les caractères à supprimer
.trimLeft()	Retourne la chaîne sans espaces de gauche	Équivalent de .lstrip() en Python
.trimRight()	Retourne la chaîne sans espaces de droite
.charAt(index)	Retourne le caractère à l'index spécifié
.concat(value,..)	Concatène les chaînes passées en paramètre	La concaténation utilise généralement +
.indexOf(substring,start)	Retourne l'index de la sous-chaîne	start indique la position de recherche
.substring(from, to)	Extrait une sous-chaîne selon les index	Différences avec slice
.slice(start,end)	Extrait une sous-chaîne selon les index
.toLowerCase()	Retourne la chaîne en minuscules
.toUpperCase()	Retourne la chaîne en majuscules
.split(delimiter,limit)	Retourne un tableau de chaînes découpées	Peut spécifier le délimiteur et la limite

Différences entre substring et slice

string.slice(start, stop) et string.substring(start, stop) :

Points communs :
Si start égal à stop, retourne une chaîne vide
Si le paramètre stop est omis, l'extraction va jusqu'à la fin de la chaîne
Si un paramètre dépasse la longueur de la chaîne, il est remplacé par cette longueur

Caractéristiques de substring() :
Si start > stop, start et stop sont échangés
Si les paramètres sont négatifs ou non numériques, ils sont remplacés par 0

Caractéristiques de slice() :
Si start > stop, les valeurs ne sont pas échangées
Si start est négatif, l'extraction commence à la position abs(start) à partir de la fin (incluse)
Si stop est négatif, l'extraction s'arrête à la position abs(stop) à partir de la fin (exclue)

Type booléen (Boolean)

Les valeurs true et false en JavaScript sont en minuscules, ce sont des valeurs booléennes explicites.

Il existe également des valeurs booléennes implicites.

• "" (chaîne vide), 0, null, undefined, NaN sont considérés comme false.
• Toutes les autres valeurs sont considérées comme true.

null et undefined

• null indique l'absence de valeur intentionnelle, généralement utilisé pour assigner ou effacer une varible.
• undefined indique qu'une variable a été déclarée mais n'a pas reçu de valeur, soit 1. quand une variable est déclarée mais non initialisée, 2. quand une fonction ne retourne pas explicitement de valeur.

Symbol

ES6 a introduit un nouveau type de données primitif (Symbol), représentant une valeur unique. C'est le 7ème type de données du langage JavaScript.

Objets

En JavaScript, tout est objet, y compris les types de données déjà mentionnés.

Il est possible de créer des objets personnalisés, et il existe aussi des objets intégrés comme Number/String/Date/Array qui sont fournis par JavaScript.

Un objet est simplement un type de données spécial avec des propriétés et des méthodes.

Objets tableau (Array)

De nombreux langages ont des tableaux comme type de données, et en JavaScript, un tableau peut stocker des valeurs de différents types de données consécutivement.

// Définition et accès par index
let liste = [1, 2, 3, 'bonjour']
console.log(liste[3]) // bonjour

Méthodes courantes :

Méthode	Description	Complément
.length	Taille du tableau
.push(ele)	Ajoute un élément à la fin
.pop()	Supprime et retourne le dernier élément
.unshift(ele)	Ajoute un élément au début
.shift()	Supprime et retourne le premier élément
.slice(start,end)	Extrait une tranche de tableau
.reverse()	Inverse l'ordre des éléments
.join(sep)	Joint les éléments du tableau avec un séparateur	sep est le séparateur
.concat(val)	Concatène plusieurs tableaux	Si val est un type de base, il est ajouté directement, sinon ses éléments sont ajoutés
.forEach()	Applique une fonction à chaque élément	Retourne un nouveau tableau sans modifier l'original
.splice()	Supprime des éléments et en ajoute de nouveaux	À connaître
.map()	Crée un nouveau tableau avec les résultats d'une fonction appliquée à chaque élément	Retourne un nouveau tableau sans modifier l'original

forEach()

tableau.forEach(function(valeurCourante, index, tableau){
    // code à exécuter
}, thisValue)
// function(valeurCourante, index, tableau)
valeurCourante : paramètre obligatoire, l'élément actuel
index : optionnel, l'index de l'élément actuel
tableau : optionnel, l'objet tableau auquel appartient l'élément
// thisValue
paramètre supplémentaire optionnel, passé comme valeur `this` s'il est fourni, sinon `undefined` est passé

splice()

Supprime des éléments à une position spécifique et en ajoute de nouveaux.

tableau.splice(index, combien, element1,.....,elementX)
// Paramètres
index : obligatoire. Position où commencer l'ajout/suppression. Doit être un nombre.
combien : obligatoire. Nombre d'éléments à supprimer. Doit être un nombre, peut être "0".
         Si ce paramètre n'est pas spécifié, tous les éléments de l'index à la fin du tableau sont supprimés.
element1, ..., elementX : optionnels. Nouveaux éléments à ajouter au tableau

Objets personnalisés (Object)

• Création d'objets personnalisés

 let utilisateur1 = new Object()
 let utilisateur2 = {'nom':'marc','age':25}

• Manipulation d'objets personnalisés (ajout, suppression, modification, consultation)

// Consultation
utilisateur2['nom']  // Accès par clé sous forme de chaîne
utilisateur2.nom  // Accès par propriété

// Ajout
utilisateur2['passion'] = 'programmation'
utilisateur2.sexe = 'masculin'

// Modification
utilisateur2['age'] = 26
utilisateur2.age = 27

// Suppression
delete utilisateur2.sexe  // Retourne true

Opérateurs

Opérateurs arithmétiques

+ - * / % ++ --

• % est l'opérateur modulo (reste de division)
• Concernant ++ et --, ce sont les opérateurs d'incrémentation et de décrémentation

var x=10;
var res1=x++;  // res1 vaut 10
var res2=++x;  // res2 vaut 12

Ce comportement s'explique par le fait que :

L'opérateur d'incrémentation après la variable assigne d'abord la valeur à la varible de destination puis incrémente ;

L'opérateur d'incrémentation avant la variable incrémente d'abord puis assigne la valeur à la variable de destination.

Opérateurs de comparaison

> >= < <= != == === !==

Il est important de noter la différence entre == et === :

• == est l'égalité faible, 5=='5' retourne true
• === est l'égalité stricte, 5==='5' retourne false

!= et !== ont la même distinction.

JavaScript étant un langage à typage faible, l'opérateur == effectue des conversions de type automatiques.

Opérateurs logiques

&&	||	!
ET	OU	NON

Opérateurs d'affectation

= += -= *= /=

Contrôle de flux

Structure conditionnelle - if

if(condition1){
    code à exécuter si condition1 est vraie
}else if(condition2){
    code à exécuter si condition2 est vraie
}else{
    code à exécuter si aucune condition n'est vraie
}

Structure conditionnelle - switch

De nombreux langages possèdent une syntaxe switch, qui a été supprimée en Python.

switch(expression){
    case valeur1:
        code à exécuter si expression correspond à valeur1;
        break;  // Sans break, les cas suivants seraient également exécutés
    case valeur2:
        code à exécuter si expression correspond à valeur2;
        break;
        ...
    case valeurN:
        code à exécuter si expression correspond à valeurN;
        break;
    default:
        code à exécuter si aucune valeur ne correspond;
}

Note : Les clauses case nécessitent généralement un break pour empêcher l'exécution des cas suivants

Structure de boucle - for

for(initialisation; condition; incrementation){
    code de la boucle;
}
// Parcourir un tableau
for (let i = 0; i < tableau.length; i++) {
    console.log(tableau[i])
}
// Parcourir un objet personnalisé
let objet = {'nom':"marc",'age':25}
for(let cle in objet){   // Itère directement sur les clés (sous forme de chaîne)
    console.log(objet[cle])
}

Structure de boucle - while

while(condition){
    code de la boucle;
}

Opérateur ternaire : condition ? valeur1 : valeur2

Fonctions

Fonctions anonymes

function(parametres){
    corps de la fonction
}

Structure de fonction et syntaxe simplifiée

function nomFonction(parametres){
    // Commentaires
   code de la fonction;
   return valeurRetour
}

// ES6 permet d'utiliser la flèche (=>) pour définir des fonctions.
function additionne(a,b){
    return a+b
}
// Équivalent à
let additionne = (a,b) => a+b
// La gauche de la flèche représente les paramètres, la droite la valeur de retour

// Définition et exécution immédiate :
function additionne(a,b){
    return a+b
}(1,2);
// Définition suivie d'un appel immédiat avec paramètres.

Caractéristiques des paramètres et des valeurs de retour

• Le passage de paramètres supplémentaires ou insuffisants ne provoque pas d'erreur
• Tous les arguments réels sont en fait passés à un objet paramètre arguments organisé comme un tableau
• Si nous essayons d'accéder à un argument réel non reçu par arguments, la valeur par défaut est undefined
• La fonction ne peut retourner qu'une seule valeur, même si plusieurs sont spécifiées. Il faut organiser manuellement un tableau ou un objet personnalisé pour retourner plusieurs valeurs

Espaces de noms et fermetures (closures)

Les concepts de variables locales, globales, cycle de vie, portée (scope) et fonctions de fermeture sont similaires à de nombreux autres langages :

On peut se référer aux concepts d'espaces de noms en Python et de fermetures en JavaScript pour mieux comprendre.

Objets intégrés

En JavaScript, tout est objet. Voici quelques objets courants :

Objet	Description
Array	Tableaux de données
String	Manipulation de chaînes de caractères
Date	Manipulation de dates et heures
Math	Opérations mathématiques
JSON	Traitement de données JSON
RegExp	Expressions régulières
Number	Manipulation de nombres

Voici quelques-uns de ces objets en détail :

Objet Date

• Afficher la date d'un objet Date

// D'abord convertir l'objet date en chaîne
let dateStr = objetDate.toLocaleString();
console.log(dateStr);

• Créer des objets Date

// Méthode 1 : sans paramètre
let d1 = new Date();
console.log(d1.toLocaleString());

// Méthode 2 : paramètre chaîne de date
let d2 = new Date("2023/05/15 14:30");
console.log(d2.toLocaleString());

// Méthode 3 : paramètre millisecondes
let d3 = new Date(5000);
console.log(d3.toLocaleString());

// Méthode 4 : paramètres année, mois, jour, heure, minute, seconde, milliseconde
let d4 = new Date(2023,4,15,14,30,0,300);
console.log(d4.toLocaleString());

• Méthodes de l'objet Date

Méthode	Description
getDay()	Renvoie le jour de la semaine (0-6)
getDate()	Renvoie le jour du mois (1-31)
getMonth()	Renvoie le mois (0-11)
getFullYear()	Renvoie l'année complète
getHours()	Renvoie les heures (0-23)
getMinutes()	Renvoie les minutes (0-59)
getSeconds()	Renvoie les secondes (0-59)
getMilliseconds()	Renvoie les millisecondes (0-999)
getTime()	Renvoie le nombre de millisecondes depuis le 1er janvier 1970

Objet JSON

• Convertir un objet JavaScript en chaîne JSON : let str = JSON.stringify(objet)
• Analyser une chaîne JSON en objet JavaScript : let obj = JSON.parse(str)

Objet RegExp

// Deux manières de définir des expressions régulières
let regex1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}$");
let regex2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;

// Validation avec une expression régulière
regex1.test('utilisateur123')
regex2.test('utilisateur123')

/*Attention : les expressions régulières ne peuvent pas contenir d'espaces*/

// Correspondance globale
let texte = 'marc dupont marc marc';
texte.match(/marc/)
texte.match(/marc/g)
let regex2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
regex2.test('marc');
regex2.test('marc');
regex2.lastIndex;
/*Attention : en correspondance globale, il y a une propriété lastIndex*/

// Validation sans paramètre
let regex2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
regex2.test();
regex2.test(undefined);

let regex3 = /undefined/;
regex3.test();

Problème avec la correspondance globale

Comme dans l'exemple ci-dessus, le test donne une fois true, une fois false, car la propriété lastIndex fonctionne comme un curseur. La première correspondance atteint la fin de la chaîne, et la deuxième ne trouve plus rien.