1

Chapitre n°1 : Introduction au langage

JavaScript

I. Le besoin en JavaScript :
1. Les limites du langage HTML :

Limites de conception : HTML n'est pas idéal pour les conceptions visuelles
complexes. Il offre juste une structure de base et des options de style. Ce sont les
feuilles de style en cascade (CSS) qui se chargent de la présentation visuelle du
contenu HTML.
Dépendance à l'égard du navigateur : Bien que le HTML soit considérablement
supporté, le code HTML peut être interprété de manière imperceptiblement
différente, ce qui peut engendrer un rendu incohérent et des problèmes de
compatibilité.
Limites de programmation évoluée : HTML est un langage de création d’interface
sans aucune logique de programmation évoluée (notion de sous programmes,
gestion des évènements, variables...) avec absence de toutes structures
algorithmiques (conditionnelles ou itératives).
Problèmes de sécurité : HTML est essentiellement responsable de la structure et de
la présentation du contenu, et non de la sécurité. Ainsi, déployer des mesures de
sécurité appropriées nécessite l'emploi d'autres technologies et procédés, telles que
la programmation côté serveur et les protocoles de communication sécurisés.
Interactivité limitée : Le langage HTML est un langage statique qui ne dispose pas de
l'interactivité et des fonctionnalités avancées des langages plus dynamiques comme
JavaScript. HTML doit fonctionner en conjonction avec d'autres technologies pour
rendre les pages web interactives et dynamiques.
Gestion limitée du multimédia: Bien que le langage HTML permette d'intégrer des
contenus multimédias tels que des images, du son et des vidéos, il n'offre pas des
fonctionnalités de création d’animations ou de contrôle de saisie dans un formulaire
ou d’interfaçage avec une base de données que les technologies spécialisées.

2. Les différentes solutions proposées :

Pour remédier aux insuffisances citées ci-dessus, deux catégories de solutions ont été
proposées :

Utilisation des langages côté client (client-side) (JavaScript) : Un langage côté client
est un langage qui s’exécute sur le client qui est généralement un navigateur Web.
L'ultime avantage de ces langages est la rapidité. En revanche, leur inconvénient
majeur est la non-confidentialité, vu que le code est visible sur le client.

SUPPORT DE COURS : PROGRAMMATION WEB2 ENSEIGNANTE : AMARA NEHLA

 2

Utilisation des langages côté serveur (server-side) (PHP(Hypertext

Preprocessor),Java, Python, C#, …) :Un langage côté serveur est un langage qui
s’exécute sur le serveur avant de renvoyer le résultat sur le client, ce qui inclut de
rendre des pages web dynamiques, d'interagir avec des bases de données…etc.

3. Présentation du JavaScript :

Le langage JavaScript est un langage de script côté client, c'est à dire qu'il est exécuté sur le
navigateur. Il a été développé par les sociétés Netscape et Sun Microsystems vers la fin de
l'année 1995.

Il est utilisé pour réaliser de la programmation multimédia dynamique, améliorer la

présentation et l'interactivité des pages Web construites à l’aide du langage HTML (et
éventuellement le langage CSS), traiter localement des événements provoqués par le client,
et effectuer des traitements simples sur le poste de travail de l'utilisateur, améliorant ainsi
l’expérience de ce dernier.

Contrairement à ce que pourrait laisser penser son nom, JavaScript n’est pas allié avec le
langage Java. Il vaut mieux considérer qu’il s’agit bel et bien de deux langages complètement
distincts.

4. Les principes du JavaScript :

Les principales caractéristiques de ce langage sont :

JS est un langage de programmation structurée qui concourt à enrichir le HTML, à le

rendre plus "intelligent" et interactif.
Le code JS est interprété par le navigateur client.
JavaScript emprunte la plupart des éléments de sa syntaxe à java, C/C++.
JavaScript est un langage dynamique multi-paradigmes :
 Procédural :
Un langage procédural est un type de langage de programmation qui suit une
approche séquentielle étape par étape pour résoudre des problèmes.
Une procédure, aussi appelée fonction contient simplement une série
d'étapes à réaliser. N'importe quelle procédure peut être appelée à n'importe
quelle étape de l'exécution du programme, y compris à l'intérieur d'autres
procédures, voire dans la procédure elle-même (récursivité).
 objet :
JS comporte une syntaxe intégrant la notion de la programmation objet
limitée aux objets simples : String, Date, Image, Array. Ce n'est pas
véritablement un langage orienté objet puisqu’il ne possède pas de concept
de classe à part entière. Il est plutôt un langage orienté prototype où chaque
objet possède une propriété intégrée privée qui contient un lien vers un autre
objet appelé le prototype duquel il va hériter des propriétés et des méthodes.

SUPPORT DE COURS : PROGRAMMATION WEB2 ENSEIGNANTE : AMARA NEHLA

 3

 Evénementiel :
JS contient des gestionnaires d'événement : il reconnaît et réagit aux actions
associées aux événements déclenchés par l’utilisateur comme un clic de la
souris, un passage de souris, une validation/soumission de formulaire, etc...
C’est un langage front-end : Le terme front-end désigne les éléments d'un site ou
d'une application que l’on appelle « l’interface utilisateur » (la partie visuelle) que les
utilisateurs voient à l'écran et avec laquelle ils vont interagir directement.
JavaScript est (tout comme HTML et CSS) multiplateforme et ne dépend d’aucun
système d’exploitation ou autres.
Spécificité du JavaScript : les fonctions sont des objets. On peut donc stocker des
fonctions dans des variables et les transmettre comme n'importe quel objet.
C'est un langage limité : Ce n'est pas un langage de programmation à part entière,
indépendant. C’est un langage de script, dépendant de HTML, c'est une extension de
HTML.

5. Généralités :

Le JavaScript est sensible à la casse : La variable « A » n’est pas le même que « a »,

c’est-à-dire que, contrairement aux balises HTML, JS fait la distinction entre
majuscules et minuscules.
En JavaScript, les instructions sont appelées (statements) et sont séparées par des
points-virgules (;). Il est possible de mettre plusieurs instructions sur la même ligne,
puisque l’interpréteur ignore les sauts de lignes. Vous pouvez aussi insérer des blancs
où vous voulez – excepté dans des noms de variables ou dans des expressions – cela
ne change pas le code.
Un nombre à virgule (réel) est séparé par un point (.) et non par une virgule.
Pour mettre un commentaire de fin de ligne, on utilise le double slach (//),tout le
texte qui vient après est considéré comme commentaire jusqu'à la fin de la ligne.
Pour mettre un commentaire sur plusieurs lignes, on utilise le /* et le */.
NB : Le fait de commenter son code régulièrement est vu comme une bonne
pratique, car cela permet de retourner sur ses traces et comprendre (voir modifier) le
code facilement après.

Les niveaux d’imbrication de boucles sont indiqués avec les caractères ‘{’ et ‘}’. Par
contre, on ne peut pas imbriquer des commentaires
(/*commentaire1/*commentaire2*/*/).
Rien n'interdit de mettre plusieurs scripts dans une même page HTML.

6. Domaines d’application :
Les fonctions JavaScript peuvent permettre d'améliorer l'expérience utilisateur d'un site
web ; de la mise à jour des flux de médias sociaux à l'affichage d'animations et de cartes

SUPPORT DE COURS : PROGRAMMATION WEB2 ENSEIGNANTE : AMARA NEHLA

 4

interactives. Lors de la navigation sur Internet, à tout moment vous pouvez par exemple voir
un carrousel d'images, un menu déroulant « Cliquer pour afficher » ou le changement
dynamique de la couleur des éléments d'une page web. C'est un langage de programmation
qui permet d'automatiser des tâches, de manipuler et améliorer le fonctionnement des
systèmes. Tout cela est possible grâce à JavaScript.

En complément de HTML et de CSS, JavaScript est utilisé pour :

Créer du contenu mis à jour de manière dynamique : Il permet de produire du

HTML dynamique (DHTML).
Développer des jeux sur navigateur et des applications mobiles.
Créer des petites applications simples (calculette, outils de conversion, jeu,…)
Insérer des éléments interactifs ou réactifs en relation avec l’aspect graphique de
l’interface (modification d’image(s) lors du passage de la souris, gestion des
fenêtres, modification locale de la page HTML, modification de menus)
Tester la validité des données sur les éléments de l’interface de saisie.
vérifier qu’une valeur considérée comme obligatoire a été bien saisie.
vérifier bien que le champ saisi correspond bien au format demandé.
Il permet également aux utilisateurs de charger du contenu dans un document
sans recharger la page entière.
…..

La synergie de HTML, de CSS et de JavaScript est devenue avec le temps bien plus robuste ;
les divers navigateurs prenant de moins en moins leur chemin individuel au profit d’un
standard qui s’imposait de plus en plus.

JavaScript est devenu l’un des langages de programmation les plus puissants et les plus
polyvalents. Une connaissance approfondie de cette technologie est une compétence
importante pour tout développeur Web.

II. Concept de base du langage JavaScript :

1. Les objets JavaScript et leur hiérarchie :

JavaScript divise une page web en éléments ou objets intrinsèques prédéfinis afin de
permettre d'accéder à n’importe lequel d’entre-eux, d'en retirer des informations et de
pouvoir les manipuler par l'intermédiaire de leurs propriétés.
Les objets JavaScript peuvent être répartis en 2 catégories :

SUPPORT DE COURS : PROGRAMMATION WEB2 ENSEIGNANTE : AMARA NEHLA

 5

Des objets d’interface : Des objets bibliothèques de propriétés

et de fonctions prédéfinies :
Ces objets permettent de gérer les aspects Ce sont les objets qui permettent de fournir
visuels de différents contrôles graphiques les différentes ressources logicielles
pouvant se trouver au niveau d’une requises pour la programmation. Ce sont
interface. On peut citer comme exemple par exemple les objets pour le calcul de la
les objets : window, document, button, date et de l'heure, pour des tâches
radio, checkbox...etc. mathématiques et pour le traitement de
chaînes de caractères.
Ces objets sont : String, Math, Date,
Navigator, Array, et Object.

a. La hiérarchie des objets d’interface :

Les objets JavaScript qui dépendent du contenu d'un document HTML sont structurés
hiérarchiquement pour pouvoir les désigner précisément, c'est à dire que des objets
s’emboîtent dans d'autres jusqu'à atteindre l'objet le plus élevé à l’échelle de la hiérarchie.
On commence généralement par l'objet le plus grand (celui contenant tous les autres) puis
on descend dans la hiérarchie jusqu'à arriver à l'objet voulu.
Regardons l’esquisse de l’arborescence suivante :

SUPPORT DE COURS : PROGRAMMATION WEB2 ENSEIGNANTE : AMARA NEHLA

 6

 L'objet le plus élevé dans la hiérarchie en JavaScript est la fenêtre du navigateur (les
objets en JavaScript ont leur dénomination en anglais, donc dans le cas présent c'est
l'objet window). Les fenêtres ont des propriétés comme un titre, une taille, etc...
 L'objet window contient un sous-objet (ou un objet subalterne), c'est le document
HTML lui-même identifié par le nom document.
 Cette page peut contenir plusieurs objets, comme des formulaires, des images, des
liens, etc. Pour de tels éléments subalternes, il y’a à nouveau des objets spécifiques à
JavaScript, par exemple l'objet forms pour des formulaires.
 L’objet formulaire, de son côté, est constitué de différents sous -objets ou sous-
éléments, ce sont les champs de formulaire, par exemple des champs de saisie, des
listes de choix ou des boutons pour envoyer ou interrompre...etc. En JavaScript, il y’a
pour cela un objet elements, avec lequel vous pouvez adresser des champs distincts
et d'autres éléments dans le formulaire.
Pour accéder à un objet, il est donc nécessaire de parcourir l'arborescence en partant
de l'objet le plus grand (l'objet window) vers l'objet à atteindre.

Exemple Illustratif : Pour mieux comprendre le concept, on va faire un exemple qu'on va

expliquer :

<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<form name="form1">
<label for='log'> Entrer votre login: </label>
<input id='log' type="text" name="login" />
<input type="button" name="bout1" value="Action" />
</form>
</body>
</html>

SUPPORT DE COURS : PROGRAMMATION WEB2 ENSEIGNANTE : AMARA NEHLA

 7

Interprétation :
Comme vous constatez, il s'agit uniquement du code HTML. L'objectif est de distinguer les
objets et leur hiérarchie. Pour accéder à un objet, il faudra donner le chemin complet de
l'objet en allant du contenant le plus extérieur vers l'objet référencé.

Pour commencer, le navigateur est inclus dans sa fenêtre du nom de window, c'est l'objet en
tête de la hiérarchie. Puis il y a le document HTML du nom de document qui vient après.
Donc le nom complet de l'objet document est [Link] .

L'objet document contient un formulaire dont l'attribut name vaut form1. Alors, ce
formulaire est identifié en JavaScript par son nom form1 ou plutôt par son nom
complet [Link].form1.

Le formulaire form1 renferme deux champs de formulaire : Intéressons-nous au premier

champ qui est une zone de texte du nom de login. JavaScript identifiera donc cet objet par
son nom. Mais pour que l'identifiant soit correct il faut qu'il soit complet, l'objet "zone de
texte" sera donc identifié par [Link].

Cependant, la déclaration de l'objet window n'est pas obligatoire comme il occupe la

première place dans la hiérarchie, il est repris par défaut par JavaScript et devient donc
facultatif. Donc, l'identifiant de la "zone de texte" peut s’exprimer comme
ceci : [Link].

Maintenant que nous avons identifié notre objet, on va faire appel à ses attributs et ses
méthodes pour pouvoir l'exploiter.
b. Les attributs des objets :

Un attribut est une variable qui appartient à l’objet. Elle représente une propriété ou une
caractéristique ou une description de celui-ci. Les objets JavaScript ont des propriétés
personnalisées.

En JavaScript, pour accéder aux propriétés, on utilise la syntaxe :

Nom_de_l'objet.nom_de_la_propriété

Les attributs de l'objet "zone de texte" que nous pouvons identifier

par [Link] sont les mêmes attributs dont l'élément HTML correspondant
dispose. Par exemple : value qui désigne la valeur que contient la zone de texte, size qui
désigne sa taille.
En général c'est l'attribut value qui est souvent utilisé. Pour accéder à la valeur de la zone de
texte, on fait :

SUPPORT DE COURS : PROGRAMMATION WEB2 ENSEIGNANTE : AMARA NEHLA

 8

[Link]

c. Les méthodes des objets :

A chaque objet JavaScript, le concepteur du langage a prévu un ensemble de méthodes (ou

fonctions dédiées à cet objet) qui lui sont propres et qui permettent de faire des traitements
sur celui-ci. On peut dire qu'elles décrivent le comportement de l'objet.

Par exemple, à l’objet document, JavaScript a dédié la méthode "écrire dans le document",
qui permet d’afficher toute sorte de données : C’est la méthode write() qui suit une syntaxe
assez simple.

On peut ainsi afficher un texte.

[Link] ("votre texte") ;

On peut écrire une variable, soit la variable result :

[Link](result);

 Pour associer du texte (chaînes de caractères) et des variables (concaténation), on

utilise l’instruction :
Res=33 ;
[Link]("Le résultat est " + res);

 On peut utiliser les balises HTML pour agrémenter ce texte :

[Link]("<B>Le résultat est</B>" + res);
ou
[Link] ("<B>" + "Le résultat est " + "</B>" + res)
[Link]("<FONT COLOR='red'>Le résultat est"+ res +"</FONT>");

Toutes les balises HTML peuvent figurer comme constantes texte, et sont exécutées comme
du code HTML.

On peut afficher une image :

SUPPORT DE COURS : PROGRAMMATION WEB2 ENSEIGNANTE : AMARA NEHLA

 9

On peut afficher la date et l'heure : Pour se faire, il faut déclarer un objet, de type
Date, initialisé à la date du système.

Exemple

2. Les boites de dialogue :

Qu’est-ce qu’une boite de dialogue ?

Une boîte de dialogue est une fenêtre qui s'affiche au premier plan suite à un événement, et
qui permet :
soit d'avertir l'utilisateur,
soit le confronter à un choix,
soit lui demander de compléter un champ pour récupérer une information.

JavaScript propose trois différentes boites de dialogue dont l'utilisation se rapporte pour
chacune d’elles à une de celles décrites ci-dessus. Comme nous allons utiliser le navigateur
comme environnement de démonstration, voyons 3 méthodes spécifiques de l'objet
window pour interagir avec l’utilisateur : alert, prompt et confirm.

Toutes ces méthodes sont modales : elles suspendent l’exécution du script et empêchent
l'utilisateur d'accéder au reste de l'interface du programme, interagir avec le reste de la
page, appuyer sur d’autres boutons, …etc. tant que la fenêtre n’a pas été traitée. Pour ces
raisons, mieux vaut ne pas abuser des fonctions qui créent de telles boîtes de dialogue.

a. La fonction alert() :
la fonction alert() ([Link]()) indique au navigateur d'afficher une boîte de dialogue
avec un message (une indication), et d'attendre que l’utilisateur ferme cette boîte de
dialogue en appuyant sur “OK”.

SUPPORT DE COURS : PROGRAMMATION WEB2 ENSEIGNANTE : AMARA NEHLA

 10

Par exemple :

<script> alert ("Hello"); </script>

Les boîtes de dialogue créées avec alert() ne nécessitent pas de réponse de la part de
l'utilisateur, en dehors de l'acquittement du message (l'acquittement d'une donnée ou d'une
information consiste à informer son émetteur de sa bonne réception).

b. La fonction confirm() :
La fonction confirm() ([Link]() ) permet d’interagir avec l’internaute. Elle indique au
navigateur d'afficher une boîte de dialogue avec un message (une question) et d'attendre
que la personne confirme ou annule la boîte de dialogue via deux boutons : OK et Annuler.

La syntaxe :

result = confirm(message);

Où :

message est une chaîne de caractères qu'on souhaite afficher dans la boîte de dialogue
de confirmation.
result est un booléen qui indique (true) si l'option « OK » a été sélectionnée et (false)
dans le cas contraire (si l'option « Annuler » a été sélectionnée).
Si le navigateur ignore les boîtes de dialogue, la valeur renvoyée est
toujours false.

SUPPORT DE COURS : PROGRAMMATION WEB2 ENSEIGNANTE : AMARA NEHLA

 11

Par exemple :

<script type="text/javascript">
let isBoss = confirm("Are you the boss?");
alert(isBoss);
</script>

c. La fonction prompt() :
La méthode prompt() ([Link]()) affiche une fenêtre modale, éventuellement avec
un message texte, un champ de saisie (une zone de texte) qui invite le visiteur à saisir un
texte, et des boutons OK/Annuler. Elle est un peu plus évoluée que les deux méthodes
précédentes puisqu'elle fournit un moyen simple de récupérer une information provenant
de l'utilisateur, on parle alors de boîte d'invite.

La fonction prompt() requiert deux arguments :

result = prompt(message, [default]);

Où :

message est une chaîne de caractères qui sera affichée pour le visiteur (le texte d’invite).
default est un deuxième paramètre facultatif, non requis, qui indique la valeur par
défaut affichée pour la saisie (une valeur initiale du champ d’entrée.)
result Lorsque l'utilisateur clique sur le bouton «OK», le texte saisi dans le champ est
renvoyé par la fonction.

SUPPORT DE COURS : PROGRAMMATION WEB2 ENSEIGNANTE : AMARA NEHLA

 12

Si l'utilisateur clique sur «OK» sans avoir saisi de texte, c'est la chaîne vide qui
est renvoyée.
Si l'utilisateur clique sur le bouton «Annuler», la fonction renvoie null.

Par exemple :

<script>
var prenom=prompt('Entrez votre prénom:', 'nehla');
alert("votre prénom est : " + prenom);
</script>

On notera que le résultat de la fonction est une chaîne de caractères. Cela signifie qu'il faut
parfois convertir la valeur fournie par l'utilisateur. Si, par exemple, on souhaite que la
réponse soit un nombre, il faudra la convertir.

Il existe deux limitations partagées par toutes les trois méthodes ci-dessus :

L’emplacement exact de la fenêtre modale est déterminé par le navigateur.

Habituellement, c’est au centre.
L’aspect exact de la fenêtre dépend également du navigateur. Nous ne pouvons pas
le modifier.

SUPPORT DE COURS : PROGRAMMATION WEB2 ENSEIGNANTE : AMARA NEHLA

 13

3. Les différents emplacements du code JavaScript :

On va pouvoir placer du code JavaScript de plusieurs façons à des endroits différents :

a) Au sein d’un document HTML :
 Dans un élément <script>, au sein d’une page HTML :

Syntaxe :
<Script language = "JavaScript"> code </Script>
Ou bien
<Script type ="text/JavaScript"> code </Script>

o Les deux déclarations sont explicites et permettent de préciser que le langage utilisé
entre les délimiteurs est du JavaScript et non pas un autre langage.
o On va pouvoir placer notre élément <script> n’importe où dans notre page HTML,
aussi bien dans l’élément <head> qu’au sein de l’élément <body>.
o De plus, on va pouvoir indiquer plusieurs éléments <script> dans une page HTML
pour placer plusieurs bouts de code JavaScript à différents endroits de la page.

 Directement dans la balise ouvrante d’un élément HTML grâce aux

gestionnaires d’événements :

Un gestionnaire d'événement permet d'associer un traitement à un événement en suivant

une syntaxe particulière comme suit :

Syntaxe :

<balise ... onEvent ="code JS" | "fonction JS">

Où :

balise désigne le nom d’une balise HTML qui supporte l’événement, souvent un
composant de formulaire.
onEvent désigne le gestionnaire d'événement associé à l'événement Event.

Nb : Il faut noter que onEvent est un attribut HTML indiqué comme un paramètre
supplémentaire dans une balise d’un formulaire, et ce qui est entre les guillemets est sa
valeur :

 Un code JS édité directement : une suite d’instructions présentées directement.

 Une fonction JS qui fait le plus souvent référence à une fonction préalablement
définie dans une section <HEAD> <SCRIPT>...</SCRIPT> </HEAD> ou dans un fichier
externe d’extension .js, et est appelée à cet endroit.

SUPPORT DE COURS : PROGRAMMATION WEB2 ENSEIGNANTE : AMARA NEHLA

 14

Néanmoins, même si le code inséré entre les guillemets est purement du code JavaScript,
nous ne le mettons pas dans les tags de script (<script> et </script>).

Exemple Illustratif :

b) Dans un fichier séparé externe contenant exclusivement du JavaScript, portant

l’extension .js et que l'on appelle dans le <head> d'un fichier HTML comme suit :

Syntaxe :
<Script language = "JavaScript" src= "chemin/[Link]"> </Script>

Où : chemin/[Link] correspond au chemin d'accès au fichier contenant le code en

JavaScript.

SUPPORT DE COURS : PROGRAMMATION WEB2 ENSEIGNANTE : AMARA NEHLA

 15

Il est préférable de placer le fichier JS dans le même dossier que la page. Un tel fichier
externe permet de réutiliser le code dans de multiples pages, sans avoir à l'inclure dans le
code.

Exemple illustratif :

Fichier HTML :

Fichier JavaScript : emplacement_externe.js

SUPPORT DE COURS : PROGRAMMATION WEB2 ENSEIGNANTE : AMARA NEHLA