Première approche

1. Origine

JavaScript est un langage fonctionnel conçu par Brendan Eich dans les locaux de Netscape Communications Corporation. Son usage initial était l’usage web avec le navigateur Netscape Navigator que l’on peut considérer aujourd’hui comme une sorte d’ancêtre à Firefox.

En novembre 1996, Netscape décide de soumettre JavaScript comme standard auprès de l’ECMA (organisation internationale privée) ce qui a donné la terminologie ECMAScript. Cet organisme définit les évolutions du langage. La dernière version lors de la rédaction de cet ouvrage est l’ECMAScript 2024 (ES15).

Il existe également une terminologie obsolète JScript dans l’univers Microsoft pour désigner une implémentation basée sur ECMA mais ajoutant des capacités d’interaction avec les composants COM.

2. JavaScript n’est pas Java

Java est un langage de programmation-objet développé initialement par Sun (James Gosling et Patrick Naughton). C’est un langage dont le code source est compilé puis interprété par une plateforme d’exécution (JVM pour Java Virtual Machine). JavaScript n’est pas une forme « interprétée » du langage Java, il s’agit d’un langage bien distinct malgré son nom, preuve en est qu’un...

1. Conception d’une première page

Nous allons commencer par exécuter un premier programme JavaScript car rien ne remplace la pratique pour assimiler un langage. Pour cela, nous utiliserons un navigateur Internet si possible récent (Edge, Chrome, Firefox…) pour visualiser le résultat de notre programme.

Pour écrire un programme de test, il vous suffira de vous munir d’un éditeur de texte de préférence avec coloration syntaxique, voici une liste de quelques éditeurs gratuits :

Nous placerons nos tests dans un même répertoire comme « exemples ». Il suffit, si l’on souhaite travailler avec Visual Studio Code (ou VSCode), de faire par le menu File/Open Folder et de choisir votre répertoire de travail.

Dans le menu File, vous utiliserez New File… puis vous saisirez le nom de votre fichier comme « test1.html ». Dans la partie gauche, le volet Explorer vous donne accès à tous les fichiers et sous-répertoires de votre répertoire de travail.

Nous allons maintenant saisir une page HTML 5 minimale avec à l’intérieur un code JavaScript. Vous noterez que VSCode vous propose une aide à la saisie, par exemple, il vous suffit de saisir [<] pour avoir accès aux différentes balises HTML, si vous n’en voulez...

1. La console JavaScript

Si vous rencontrez des problèmes, sachez que vos navigateurs (Edge, Chrome, Firefox…) disposent des « consoles JavaScript » capables de vous signaler les erreurs avec également leurs localisations dans le code source. C’est un outil indispensable lorsque vous travaillez en JavaScript.

L’instruction JavaScript console.log sert à écrire directement dans la console, ce qui est pratique pour effectuer un test sans que cela impact le rendu de la page HTML.

console.log(  "mon code est passé par là" ); 

Ces consoles sont accessibles par le menu Développement de vos navigateurs ou bien par une combinaison de touches (en général la touche [F12] suffit).

Dans les exemples de console ci-dessous, nous avons volontairement oublié un caractère guillemet dans notre code "Hello World".

Sous Edge, en invoquant [F12], une boîte de dialogue apparaît, en sélectionnant l’onglet Consoles, vous pourrez voir apparaître vos erreurs au chargement de la page.

Si vous cliquez sur le lien associé à l’erreur, il vous indiquera exactement l’endroit qui pose problème.

Avec Chrome, nous avons également cette console par la touche [F12]. Si vous activez dans vos paramétrages AI Innovations, vous aurez également une assistance par l’intelligence artificielle pour corriger vos erreurs. Il vous suffit d’aller sur la partie droite de votre message d’erreur, d’activer Understand this error. Vous avez également le numéro de ligne qui pose problème après le nom du fichier de test toujours sur la partie droite de l’erreur.

Si vous faites maintenant l’exécution directement dans VSCode, il se comportera comme le navigateur, et vous proposera d’aller directement à l’erreur via l’éditeur ce qui sera plus pratique en cliquant sur le lien à côté de l’erreur (« ….html :4 »).

VSCode sera en réalité « connecté » à votre navigateur si celui-ci le permet avec l’avantage que vous pourrez aussi déboguer votre code JavaScript dans ce dernier. Pour cela...

1. Une syntaxe proche du C

int compteur; 
for (compteur = 0; compteur<10; compteur++) { 
 
    printf("Hello World"); 
} 

let compteur; 
for (compteur = 0; compteur < 10; compteur++) { 
  console.log("Hello World"); 
} 

1. Les valeurs primitives

"une chaîne de caractères" 

'une autre chaîne de caractères' 

"bonjour \"vous\"" 

"1+1= " + maValeur + " ... " + ... 

1. Introduction

Une variable est une structure de données associant un nom à une valeur. Cette valeur étant potentiellement variante, on comprendra aisément le terme de « variable ».

La convention de nommage est celle par défaut, on veillera donc à commencer un nom de variable par une minuscule.

On affecte une valeur à une variable par l’opérateur =.

maVariable=maValeur; 

JavaScript reste faiblement typé, cela signifie qu’une variable n’est pas associée à un type de données en particulier, seule compte la valeur avec laquelle elle est associée. Cette valeur peut être une valeur primitive comme une chaîne, un entier…. mais également une structure plus complexe comme une fonction, un tableau, un objet…

Grâce à l’instruction typeof que nous avons abordé à titre d’exemple précédemment, nous pouvons toujours connaître la nature d’une valeur.

Afin d’agrémenter nos exemples sur les variables, nous utiliserons des fonctions très simples sans arguments. Les fonctions seront détaillées dans le prochain chapitre.

Voici une présentation succincte de la syntaxe des fonctions.

// Déclaration d'une fonction 
function maFonction() { 
} 
// Appel de fonction 
maFonction() ; 

2. Contexte d’usage d’une variable

maVariable = 10; 

maVariable = false; 

1. Calcul

Les opérateurs de calcul servent aux expressions JavaScript.

L’opérateur % est très pratique pour savoir si vous êtes en présence d’un nombre pair ou pas car si c’est bien le cas alors le reste de la division par 2 donnera 0.

Exemple 4 % 2 = 0 mais 5 % 2 = 1 car 4 est pair et 5 est impair.

Lors d’une division par 0, la constante Infinity sera associée au nombre :

Exemple

let a = 1 / 0; 
alert( a == Infinity ); // true 
Infinity est bien considéré comme un nombre par l'interpréteur 
JavaScript. 

Exemple

alert( typeof Infinity );   // number 

2. Affectation

Les opérateurs d’affectation sont utilisés avec une variable pour initialiser ou altérer le contenu.

Les opérateurs ++ et -- peuvent être postfixés ou préfixés à la variable. Lorsqu’ils sont placés en fin de variable, cela signifie qu’ils ne seront appliqués qu’après la fin de l’expression en cours. Dans le cas contraire, cela sera effectué pendant l’évaluation de l’expression.

La forme postfixée est la plus courante.

Exemples

  let x = 10;  
  let y = 1 + ( x-- );  
  // Y vaut alors 11 et X vaut 9  
  let x = 10;  
  let y = 1 + ( --x ); 
  // Y vaut alors 10 et x vaut 9 

Booléen

Avant de nous intéresser aux contrôles de flux de données, il nous faut étudier les expressions booléennes autorisées. Comme nous l’avons...

1. Déclaration

function helloWorld() { 
  alert( "Hello" ); 
} 

function helloWorld()  
{ 
 alert( "Hello"...

1. Test conditionnel

let a; 
let b = a || "par défaut"; 
alert( b ); // « par défaut » 
// Deuxième cas 
let a = "ok"; 
let b = a || "par défaut"; 
alert( b ); // « ok »