JavaScript

Qu’est ce qu’un langage de programmation ?

C’est un ensemble d’instructions écrites par un humain dans un fichier texte qui sont interprétées par l’ordinateur
afin de commander celui-ci.

Il existe de nombreux langages de programmation, certains avec un rôle bien défini et donc pas forcément courants,
d’autres sont très répandus et servent à concevoir les applications essentielles (traitement de texte, navigateur web,
le système d’exploitation lui-même).

Certains langages évoluent dans un environnement contraint, c’est-à-dire qu’ils n’ont pas accès à l’ensemble de
l’ordinateur. C’est le cas du JavaScript au sein des navigateurs web.

Qu’est ce que le JavaScript ?

Il s’agit d’un langage de programmation inventé par la société Netscape qui avait développé dans les années 90 un
navigateur web, Netscape Navigator.

Le but était de rendre les sites web développés en HTML + CSS plus dynamiques, réagissant par exemple à un clic ou
un survol de la souris du visiteur sur un élément de la page. On parlait alors de Dynamic HTML ou DHTML.

Aujourd’hui la principale utilisation du langage JavaScript reste la manipulation de la page : ajout, modification ou
suppression de balises à la volée, modification des styles CSS, etc. Ces fonctionnalités ont été standardisées par le
W3C dans ce qu’on appelle le DOM, Document Object Model.

Bonus & Notes :

- Netscape Navigator a été en grande partie réécrit pour donner aujourd’hui Mozilla Firefox.
- Ne pas confondre les langages de programmation Java et JavaScript, ils n’ont rien à voir, Netscape lui avait donné ce nom-là
pour des raisons marketing car le Java était très en vogue dans les années 90.

Comparaison entre le JavaScript, le HTML et le CSS

Le HTML et le CSS ne sont pas des langages de programmation mais des langages de description, ils indiquent au
navigateur web respectivement la structure et la mise en forme d’une page. Le JavaScript est quant à lui un langage
de programmation qui sert à ajouter un comportement aux éléments d’une page.

Aujourd’hui bien que ces principes demeurent exacts, les frontières entre les trois langages sont néanmoins plus
floues : on voit par exemple apparaître du CSS pouvant modifier la structure ou le comportement de la page.
Langage de programmation côté client et côté serveur
Le JavaScript est exécuté au sein du navigateur web du visiteur du site, sur l’ordinateur de celui-ci ; cet ordinateur
est le client, on dit donc que le JavaScript est un langage côté client.

Le PHP que nous étudierons prochainement est quant à lui exécuté sur le serveur hébergeant le site web ; on dit
donc à l’inverse que le PHP est un langage côté serveur.

On parle de client et de serveur car c’est ainsi que fonctionne le protocole HTTP sur lequel repose l’ensemble du
web : le navigateur web client envoie des requêtes à un serveur HTTP qui envoie une réponse en retour.

Bonus & Notes :

- Là aussi les frontières deviennent floues et il faut savoir qu’on peut tout à fait exécuter du PHP sur un ordinateur quelconque,
côté client donc ; et à l’inverse exécuter du JavaScript sur des serveurs, ce dernier cas est d’ailleurs devenu une tendance très
forte apparue ces dernières années.
Fonctionnement d’une communication client / serveur HTTP
Pour obtenir les différentes ressources constituant un site (fichiers HTML, feuilles de styles, images, scripts, etc.), le
navigateur web génère des requêtes HTTP. Chaque ressource dispose d’une adresse HTTP que l’on appelle une URL.

La plupart du temps c’est l’utilisateur du navigateur web qui va générer la première requête HTTP, en cliquant sur un
hyperlien ou en tapant directement une URL dans la barre d’adresse du navigateur.

Tout comme le HTML et le CSS, le JavaScript peut demander au navigateur web d’exécuter des requêtes HTTP
supplémentaires pour récupérer de nouvelles ressources. La combinaison du JavaScript et du du protocole HTTP
permet ainsi de récupérer dynamiquement de nouveaux contenus, en fonction du contexte : par exemple charger
une image lorsque le visiteur clique sur le bouton suivant dans un diaporama.

Le navigateur web envoie sa requête HTTP sous la forme de plusieurs en-têtes, notamment l’URL, ainsi que
possiblement un message complémentaire au serveur HTTP.

Le serveur HTTP traite alors la requête puis envoie à son tour une réponse HTTP au navigateur web sous la forme de
plusieurs en-têtes, notamment un code de statut, et éventuellement la ressource demandée.

Bonus & Notes :

- Il existe plusieurs codes de statut renvoyés par le serveur HTTP et reconnus par le navigateur web. Le plus célèbre est le code
d’erreur 404 qui signifie que la ressource demandée n’existe pas à l’URL spécifiée sur le serveur.
Première découverte du langage
Le code écrit en JavaScript doit être placé dans une balise <script>. Cette balise peut se trouver à l’intérieur de la
balise <head> de la page HTML ou de la page <body>, selon les besoins.

Voir le fichier exemple-1.html

La méthode document.write() permet d’écrire du HTML à l’emplacement même de la balise <script>.

Bonus & Notes :

- Le navigateur web lit les balises HTML de manière séquentielle. Il est donc préférable de placer le code JavaScript tout en
bas, juste avant la fermeture de la balise <body>, ce qui assurera au code d’avoir accès à tout le document au moment où il
sera exécuté. Les scripts situés dans la balise <head> sont en général réservés à l’initialisation ou au chargement de librairies
externes en JavaScript.

Liens vers ressources utiles

Référence Microsoft http://msdn.microsoft.com/fr-fr/library/ie/yek4tbz0(v=vs.94).aspx

Référence Mozilla https://developer.mozilla.org/fr/docs/JavaScript/Guide

Site du Zéro http://www.siteduzero.com/informatique/tutoriels/dynamisez-vos-sites-web-avec-javascript

Stack Overflow http://stackoverflow.com/

Web Platform http://docs.webplatform.org/wiki/Main_Page/fr

Afficher un message
En complément de la méthode document.write() il est possible d’utiliser :

- La méthode window.alert() pour afficher une boite de dialogue.

- La méthode console.log() pour afficher le message dans la console de développement du navigateur web.

Il est important de bien faire la différence entre les trois méthodes d’affichage et de savoir manipuler la console de
développement du navigateur web (ou une extension telle que FireBug) qui est très utile pour trouver des erreurs
éventuelles au sein d’un script.

L’affichage d’un message dans une boite de dialogue est assez contraignant (dépend du bon vouloir du navigateur
qui peut en empêcher l’affichage) et est aujourd’hui peu recommandé.

La méthode document.write() peut insérer une ou plusieurs balises HTML, démontrant la possibilité pour le
JavaScript de manipuler la page.

Voir le fichier exemple-2.html

Bonus & Notes :

- Comme toutes les méthodes de l’objet window, la méthode alert() peut être appelée de manière globale, sans indiquer
l’objet window dans le code. Ainsi window.alert() et alert() sont synonymes.
Écrire des commentaires
Chaque langage dispose d’une syntaxe permettant de commenter son code, afin de le documenter pour expliquer
des points complexes, d’attirer l’attention des futurs développeurs lisant le code, etc.

En JavaScript il existe une syntaxe permettant de commenter sur plusieurs lignes le code et d’une autre permettant
de commenter sur une seule ligne.

Voir le fichier exemple-3.html

Placer le code JavaScript dans un fichier externe

Tout comme le CSS qui est placé dans une feuille de styles avec extension .css et relié par une balise <link> au
fichier HTML, il est recommandé de placer le code JavaScript dans un fichier .js relié par la balise <script> qui
ressemble alors à la balise <img> avec un attribut spécifiant l’URL du script.

Voir le fichier exemple-4.html

Les variables
En programmation, une variable est un emplacement dans la mémoire vive de l’ordinateur. Une variable possède un
nom, un type et une valeur. Elle est déclarée avec le mot-clé var.

Les variables en JavaScript peuvent entres autres contenir des lettres de l’alphabet, des chiffres et le caractère
underscore. Pas d’espace ni d’autre signe de ponctuation.

Le type de la variable permet de savoir si on manipule des nombres, des chaînes de caractères ou d’autres types de
données que nous verrons plus tard.

Les langages de programmations peuvent être classés selon de nombreuses catégories, l’une d’elles est la façon de
gérer le type des variables : il existe des langages à typage faible et d’autres à typage fort. Le JavaScript est un
langage à typage faible car une variable peut changer de type à tout moment selon la façon dont le programmeur la
manipule dans son code.

On utilise l’opérateur d’égalité pour affecter une valeur à une variable.

Voir le fichier exemple-5.html

Bonus & Notes :

- Attention, le JavaScript est sensible à la casse, ce qui signifie que les majuscules et les minuscules sont différents et donc que
var ma_variable n’est pas la même déclaration que var MA_Variable par exemple.
- Il existe différentes conventions de nommage de variable selon les usages. En JavaScript il conseillé de suivre le camelCase,
c’est-à-dire que les mots sont attachés, le premier mot toujours en minuscle et la première lettre de chaque mot suivant est
en majuscule, comme ceci : var ceciEstUneVariable.
- L’avantage du typage faible en JavaScript est qu’il est la plupart du temps inutile de convertir une variable, notamment une
chaîne de caractères en nombre ou inversement, cela facilite la lecture et la compréhension du code. L’inconvénient est que
le programmeur a intérêt à bien savoir ce qu’il écrit car une erreur peut très facilement apparaître en cas d’imprévu.
Le type de données indéfini (undefined)
En général on définit une variable sans lui affecter immédiatement une valeur. Dans ce cas le type de la variable est
undefined et la valeur de la variable, si jamais on souhaitait l’afficher serait la chaîne de caractères « undefined ».

Bonus & Notes :

- Il est possible d’utiliser l’opérateur typeof() pour connaître le type d’une variable. Ainsi var maVariable = 13;
document.write(typeof(maVariable)); affichera « number », c’est-à-dire le type nombre.

Les constantes
Les constantes sont des données dont la valeur ne peut pas changer une fois qu’elles ont été déclarées avec le mot-
clé const. On peut les voir comme des « variables en lecture-seule ».

Voir le fichier exemple-6.html

Bonus & Notes :

- Les constantes sont très utiles pour définir des données de configuration qui ne doivent pas être modifiées dans le code. Cela
permet ainsi de prévenir des erreurs. On retrouve alors ce type de constante tout en haut des scripts, bien mis en évidence.

Opérations
Il est possible d’effectuer des calculs arithmétiques de base sur les variables et constantes de type nombre.

Les chaînes de caractères peuvent être ajoutées les unes derrière les autres à l’aide du même opérateur que
l’addition en arithmétique. On appelle cela la concaténation de chaînes.

Les opérateurs ++ et -- permettent respectivement d’incrémenter ou de décrémenter une variable, c’est-à-dire de

lui ajouter la valeur 1 ou de lui soustraire la valeur 1.

Voir le fichier exemple-7.html

Récupérer la saisie de l’utilisateur

Il est possible d’ouvrir une boite de dialogue à l’utilisateur et de lui demander de saisir une valeur avec la méthode
window.prompt(). On peut affecter le résultat de la méthode directement à une variable qui sera alors de type
chaîne de caractères.

Si on souhaite s’assurer qu’une variable est de type nombre avant de la manipuler alors on peut la convertir à l’aide
de la fonction parseInt(). Si la fonction n’arrive pas à effectuer la conversion elle renverra la valeur NaN (Not a
Number).

Exercice : réutiliser l’exemple précédent pour demander le montant HT à l’utilisateur

Voir le fichier exemple-8.html

Les tableaux de données
Les tableaux sont des variables permettant de manipuler plusieurs valeurs en même temps. On peut visualiser un
tableau comme une suite de données dans la mémoire vive de l’ordinateur, chaque donnée étant accessible à l’aide
d’un indice dans le tableau.

En JavaScript, les tableaux sont des objets de la classe Array.

Les indices des tableaux peuvent être des nombres ou des chaînes de caractères. On peut utiliser une variable ou
une constante en guise d’indice au sein d’un tableau. En général le premier indice d’un tableau est 0.

Voir le fichier exemple-9.html

La classe Date

Il existe en JavaScript une classe Date permettant de manipuler la date et l’heure.

Si on ne passe aucun argument à la création, l’objet représentera la date et l’heure actuelle, mais on peut donner en
argument une chaîne de caractères que le JavaScript s’efforcera de traduire, par une exemple la chaîne de caractères
« 2013-12-24 ».

La méthode getDay() renvoie le numéro du jour de la semaine entre 0 (Dimanche) et 6 (Samedi).

La méthode getDate() renvoie le jour du mois entre 1 et 31.

La méthode getMonth() renvoie le numéro du mois de l’année entre 0 (Janvier) et 11 (Décembre).

La méthode getFullYear() renvoie l’année.

Pour obtenir une référence complète des méthodes disponibles de la classe Date, aller au lien suivant :
https://developer.mozilla.org/fr/docs/Référence_de_JavaScript_1.5_Core/Objets_globaux/Date

Exercice : utiliser des tableaux de données et la classe Date pour afficher le nom du jour de la semaine, la
date, le nom du mois et l’année en cours

Voir le fichier exemple-10.html

Introduction aux objets

Un objet est une représentation informatique d’un concept de la réalité, par exemple comme vu précédemment,
une date ou un tableau. On peut créer et manipuler ses propres objets en implémentant des variables que l’on
appelle des propriétés et des fonctions que l’appelle des méthodes.

La syntaxe de création d’un objet ressemble à la création de tableaux et de dates.

Le point est un séparateur entre le nom de l’instance de l’objet et sa méthode ou sa propriété.

Les règles de nommage sont exactement les mêmes que pour les variables.

Voir le fichier exemple-11.html