Javascript¶

Introduction au JavaScript¶

JavaScript est un langage multi-plateforme et orienté objet. C'est un langage qu'on utilise dans un environnement existant (le navigateur web par exemple) et qui peut appeler et interagir avec les objets de cet environnement.

En programmation web, on l'utilise souvent du côté client pour rendre nos interfaces dynamiques et interactives (comme le carousel Bootstrap, par exemple). Mais il faut savoir que le JavaScript peut aussi être utilisé du côté serveur et dans d'autres contextes que les sites web (MongoDB, Node.js, pour n'en nommer que deux).

JavaScript fait partie des trois langages qu'on considère que tous les développeurs web devraient connaître, avec le HTML et le CSS.

Quand le navigateur Web rencontre du code JavaScript, il commence à l'interpréter ligne par ligne. Si un script est particulièrement long à lire et interpréter, alors il se peut qu'il ralentisse la page web. C'est entre autre une des raisons pour lesquelles on place l'appel au JavaScript à la fin d'une page web.

Le code JavaScript peut imposer au navigateur différents comportements suivant la situation. On peut créer une fonction qui ne sera activée que lorsque l'utilisateur fera une action particulière dans la page. On peut même créer du code HTML à la volée à l'aide du JavaScript et l'utiliser pour modifier le contenu de la page. D'autres utilisations courantes incluent la manipulation des éléments pour en modifier leur apparence, la validation de formulaires et le traitement d'information, ainsi que l'appel à un serveur. Bref, c'est un langage très versatile qui offre énormément de possibilités!

On retrouve des exemples de positionnement du code JavaScript à différents endroits dans une page HTML:

dans le corps de la page entre l'ouverture et la fermeture de la balise <script>;
dans les attributs des balises HTML;
dans l'en-tête de la page entre l'ouverture et la fermeture de la balise <head>;
dans un document externe, d'extension .js (à préconiser).

Il faut noter que lorsque possible, le JavaScript devrait être dans un document externe d’extension .js, afin de simplifier le code de la page web et diviser le code par utilité (HTML pour le contenu, CSS pour l'apparence, JS pour la fonctionnalité).

Dans nos projets du cours, nous ajouterons donc un sous-dossier nommé scripts dans lequel on sauvegardera nos feuilles JS.

Hierarchie

Sensible à la casse

Le JavaScript est un langage sensible à la casse et parfois, une simple majuscule au lieu d'une minuscule peut empêcher un script complet de fonctionner!

La balise `<script>`¶

L'élément HTML <script> est utilisé pour intégrer ou faire référence à un script exécutable du côté client. Cela fait généralement référence à du code JavaScript mais ce peut également être un autre type de script (par exemple WebGL). Cet élément englobe le code du script à exécuter ou utilise l'attribut src pour appeler un fichier contenant le script à exécuter.

Dans la mesure du possible, l'élément <script> est appelé au bas de la page HTML afin de permettre le chargement de la page à l'écran avant le chargement des scripts. En effet, puisque souvent les scripts accèdent aux éléments de la page, on ne veut pas que ceux-ci s'exécutent avant que les éléments ne soient disponibles.

        <!--Tout le contenu de la page avant la balise script -->
        <script src="scripts/monScript.js"></script>
    </body>
</html>

IMPORTANT

L'ouverture et la fermeture de balise est toujours obligatoire.
La balise <script> avec un attribut src défini ne doit pas avoir de script compris entre l'ouverture et la fermeture. Cela peut causer un comportement inattendu.

Les attributs Async et Defer¶

En plus de placer la balise script au bas du HTML, il existe deux attributs à utiliser dans la balise pour s'assurer du bon fonctionnement de notre site qui utilise des scripts :

Async : chargement asynchrone, exécution immédiate
Defer : chargement asynchrone, exécution différée

Script

Ainsi, la différence se trouve au moment où le script est exécuté.

Si le script peut s'exécuter de façon indépendante, alors async est recommandé
Sinon, l'option defer est préconisée pour les cas où :
- le script nécessite l'accès aux éléments de la page
- on appelle plusieurs scripts et ils doivent s'exécuter dans l'ordre

Comment l'écrire :

<script src="scripts/monScript.js" async>

Ou encore :

<script src="scripts/monScript.js" defer>

Les bases du langage¶

JavaScript utilise une syntaxe similaire au C, C++, Java, etc.
Les instructions sont séparées par des points-virgules et on ne devrait retrouver qu'une seule instruction par ligne de code.
JavaScript est un langage sensible à la case et fait donc une distinction entre un élément nommé "toto" et un autre nommé "Toto".

let toto = 5 ;
typeof Toto; 

//Résultat: undefined, car Toto est différent de toto

Les règles d'indentation de code sont les mêmes : toute instruction apparaissant à l'intérieur d'accolades doit être indentée d'une tabulation.
Une ligne de commentaire simple débute par deux barres obliques // Commentaire
Un commentaire sur plusieurs lignes est englobé d'une barre oblique et d'une étoile /* Commentaire */
Plusieurs mots sont réservés et ne doivent pas être utilisés pour nommer des éléments commes des variables.

Variables¶

Les variables sont utilisées comme des noms symboliques désignant les valeurs utilisées dans l'application. Elles servent à faire appel à des valeurs placées dans la mémoire de l'ordinateur pour pouvoir effectuer du traitement d'information.

Variables

JavaScript est un langage où le typage des données est dynamique. Ainsi, lors de la déclaration des variables, nous n'indiquons pas le type d'information qui sera placé dans la boîte. En comparaison à d'autres langages où on doit inscrire le type (int, double, float, string, char, etc.), en JavaScript on ne fait qu'indiquer "voici une variable dont le nom est xxx".

Il existe 3 façons de déclarer une variable en JavaScript :

var, variable à contenu dynamique, à portée navigateur

ne devrait être utilisé qu'en cas d'extrême nécessité
let, variable à contenu dynamique, à portée du bloc ou script
const, variable constante, obligatoirement initialisée, dont la valeur ne change jamais

var toto; //valeur indéfinie
let titi; //valeur indéfinie
const PI = 3.14159265359;

Laquelle des méthodes à utiliser dépend de la portée que la variable doit avoir dans notre script.

La portée des variables¶

Les variables JavaScript ont une portée qui dépend de la façon dont elle a été déclarée ainsi que de l'endroit où elle a été déclarée.

La portée indique quand une variable est lisible dans un fichier script.

Il existe trois portées possibles :

variable globale

Ces variables sont déclarées à l’extérieur des fonctions et sont placées au début du fichier contenant le code JavaScript. Ces variables peuvent être utilisées dans toutes les fonctions et existent tant que la page web demeure dans le navigateur. (possible avec var, let et const )
variable locale

Ces variables sont déclarées à l’intérieur des fonctions créées par le programmeur et ne peuvent être utilisées qu’à l’intérieur de la fonction. Une fois la fonction exécutée et terminée, la variable n’existe plus. (possible avec var, let et const )
variable de bloc

Ces variables sont déclarées à l'intérieur d'un bloc de code délimité par des accolades (une condition if ou une boucle for, par exemple) et ne peuvent être utilisées qu'à l'intérieur du bloc. Une fois le bloc terminé, la variable n'existe plus. (possible avec let et const)

En général, on priorise la déclaration locale de bloc avec le mot-clé let lorsque possible, afin que la mémoire se libère le plus tôt possible.

Si une variable est nécessaire dans plus d'une fonction et que sa valeur doit persister, alors elle peut être déclarée globale.

Les variables de bloc sont généralement utiles pour les boucles, que nous verrons sous peu, et du traitement temporaire.

Attention

Il est recommandé de préférer les variables déclarées avec let et const plutôt qu'avec var. En effet, let et const créent des variables à portée restreinte au script, alors que var crée des variables ayant une portée dans tout le navigateur ouvrant ainsi des possibilités de piratage.

Extrait de la page de w3Schools : https://www.w3schools.com/js/js_variables.asp

Var

Nommer une variable¶

Peu importe le langage utilisé, on essaie toujours de donner un nom significatif à une variable, afin de faciliter la lisibilité du code.

Les noms peuvent contenir :

des lettres minuscules et majuscules
des chiffres 0 à 9
des soulignés

Pour le cours nous appliquerons les règles suivantes :

un nom de variable doit débuter par une lettre minuscule ;
un nom de variable doit être significatif ;
sauf la lettre du début, les mots dans un nom de variable débute par une majuscule

Exemple : pour une variable contenant un nom de client

✔️ let nomClient;
let x;
let gertrude;
let nomclient;

Déclarer er initialiser une variable¶

Les variables seront déclarées dans le haut (de la fonction ou de la section globale si nécessaire), avant toute ligne de traitement.

Une variable qui n'est pas initialisée (qui n'a pas une valeur de départ), aura une valeur undefined.

Déclarer une variable

//variable undefined : non initialisée
let marqueVoiture;

//variable initialisée
let marqueVoiture = "BMW";

//vérifier si la variable contient une valeur
if (marqueVoiture == undefined)
{
  faireCeci();
} else {
  faireCela();
}

Opérateurs¶

En plus des opérateurs arithmétiques standards tels que l'addition (+), la soustraction (-), la multiplication (*) et la division (/), il existe aussi plusieurs autres opérateurs possibles en JavaScript.

Voici un tableau de quelques opérateurs qui pourront être utiles pour le cours d'Interfaces web (une explication supplémentaire sera donnée en classe):

Nom	Description	Exemple
Affectation (=)	Donne une valeur à une variable.	maVar = 10
Affectation après addition (+=)	Additionne une valeur à une variable, puis renvoie le résultat dans la variable	x += y Même résultat que x = x + y
Affectation après soustraction (-=)	Soustrait une valeur d'une variable, puis renvoie le résultat dans la variable	x -= y Même résultat que x = x - y
Modulo (%)	Retourne le reste entier de la division	x = 5 % 2 (x prendra la veleur 1)
Concaténation (+)	Ajoute une chaîne de caractères à la suite d'une autre	var x = "alpha"; var y = "bet"; z = x + y; Résultat = "alphabet"
Égalité (==)	Retourne vrai (true) si les deux valeurs comparées sont égales, après conversion en valeurs de même type	maVar1 == maVar2
Inégalité (!=)	Retourne vrai (true) si les deux valeurs comparées sont différentes	maVar1 != maVar2
Supériorité (>)	Retourne vrai (true) si la valeur gauche est suppérieure à la valeur droite	maVar1 > maVar2
Infériorité (<)	Retourne vrai (true) si la valeur gauche est inférieure à la valeur droite	maVar1 < maVar2
Inférieur ou égal (<=) et Supérieur ou égal (>=)	Retourne vrai si la valeur de gauche correspond à l'opérateur utilisé	maVar1 >= maVar2
Condition (if)	Évalue si une expression est vraie	if(maVar1 == maVar2)
Boucle (for)	Exécute un traitement en boucle, un nombre de fois indiqué	for(let i=0; i<10; i++)

Pour une liste complète des opérateurs, voir la rubrique d'aide sur MDN : Expressions et opérateurs.