Introduction au Javascript

Chapitre 1 – Découverte du Javascript

Introduction

Le Javascript est un langage fondamental du Web. Il permet de créer des sites dynamiques et interactifs sans devoir recharger la page dans le navigateur.

On peut l’utiliser de 2 façons :

• Interpréter du côté client par les navigateurs et interagir avec le HTML et le CSS.

• Interprété du côté serveur avec des Frameworks comme Angular , React, Vue ...

Le langage permet de programmer en objet. Les syntaxes pour les instructions de bases (tests, conditions, boucles …) sont identiques aux langages C, C++, PHP ...

Le langage Javascript permet de manipuler le DOM (Document Object Model), c’est-à-dire tous les éléments d’une page HTML.

Il existe des librairies ou framework Javascript permettant d’obtenir des résultats plus rapidement avec moins de lignes de codes (JQuery, Cleave, Animate On Scroll, ...)

Installation de Javascript dans une page HTML

Pour vous faire gagner du temps et commencer un projet rapidement, je vous ai préparé un fichier (modele.zip) au format « zip » que vous avez juste à décompresser. Celui-ci contient une page HTML, un répertoire « js » avec à l’intérieur, un fichier « script.js » dans lequel nous écrirons notre code. Nous aurions pu l’écrire directement dans la page HTML, mais nous souhaitons séparer les traitements de la présentation.

Nous pouvons appeler notre code dans l'entête HTML, mais cela ralentit le temps de chargement de l'affichage de la page, car si le JavaScript est lancé alors qu'il utilise des éléments de la page non chargés, cela posera des problèmes.

Bonne pratique :

• Placez l'appel du script en bas de page juste avant la balise «</body>».

• N’oubliez pas de commenter votre code avec les « // » ou les « /* */ ».

• Utilisez la console de votre navigateur (vous la trouverez dans les outils de développement) pour obtenir des informations sur le déroulement de votre programme pendant sa conception (nous l’utiliserons dans ce TP).

Les bases du langage :

Les types :

Le langage Javascript n’est pas un langage typé, ainsi, vous n’avez pas à faire de déclaration.

Les variables :

Le mot clé « var » permet de créer une variable locale.

Les tableaux :

Commentaires :

sort est une méthode d’un « Array » qui permet de trier. Vous pouvez consulter la documentation de Javascript afin de découvrir toutes les autres méthodes à cette adresse :

Tableau des conditions :

Algorithme

Javascript

Égalité

=

==

Différent

<>

!=

Inférieur

<

<

Supérieur

>

>

Inférieur ou égal

<=

<=

Supérieur ou égal

>=

>=

Structures conditionnelles :

if (condition){

// instructions

}

if (condition){

// instructions

}

else{

// instructions

}

switch(valeur){

case 1 : //instructions break ;

case 2 : // instructions break ;

default : //instructions

}

Les boucles :

Il existe 3 boucles différentes, le While, le Do While et le For (celui-ci se décline en plusieurs variantes).

Nous choisissons une boucle selon des critères bien précis :

Le While : Nous ne savons pas si nous allons rentrer dans la boucle, car la condition est en haut. Nous ne savons pas combien de fois nous allons recommencer la boucle, tout dépendra de la condition. Ne pas oublier de mettre des instructions à l’intérieur de la boucle. Cela qui nous permettra d’en sortir.

Le Do … While : Nous rentrons forcément à l’intérieur, car la condition de sortie est située en bas. Les instructions seront donc exécutées au minimum une fois. Nous ne savons pas si nous recommencerons la boucle, car tout dépend de la condition.

Le For :

version habituelle : Nous savons exactement combien de fois nous allons réaliser la boucle avant de rentrer à l’intérieur.

Pour i de 0 à 9

Pour i de 9 à 0

for (i=0;i<10;i++){

for (i=9;i>=0;i--){

// Instructions

// Instructions

}

}

Le foreach, parcours d’un tableau (Array) :

Dans l’exemple, la variable du tableau sera « tab », lors du parcours, un élément du tableau sera stocké dans la variable « element

...