JavaScript : les bases

Premier script

Une page Web avec du code JavaScript

La page web ci-dessous comprend non seulement du HTML & CSS mais aussi du code JavaScript.

Le code correspondant : <!doctype html> <html lang ='fr'><head> <title>page avec JavaScript</title> <meta charset = 'utf-8'> <style> h1{width : 800px ; margin-left : auto ; margin-right : auto ; } </style> </head> <body> <h1>Première page avec du JS </h1> <script> /* ce script affiche le périmètre et la surface d'un cercle de rayon 4 cm */ var vsurface = 4 * 4 * 3.14; // calcul de la surface dans la variable vsurface var vperimetre = (4 + 4) * 3.14; // calcul de la circonférence dans la variable vperimetre alert('circonférence du cercle : ' + vperimetre + ' cm' ) ; // affichage circonférence alert('surface du cercle : ' + vsurface + ' cm2' ) ; // affichage surface </script> </body></html>

Testez cette page !

Commentaire du code

Le code JavaScript doit être écrit à l'intérieur du conteneur SCRIPT c'est à dire entre la balise <script> et la balise </script>
Le script comprend des instructions et des commentaires.
Une instruction se termine impérativement par un point-virgule.
Un commentaire sur plusieurs lignes commence par /* et se termine par */
Un commentaire de fin de ligne se place après le point-virgule et est précédé de 2 "slashs" (barres obliques).

dans les deux premières il y a un calcul effectué et le résultat du calcul est affecté à une variable
dans les deux suivantes on affiche un message dans une boîte de dialogue grâce à la fonction alert()

Le paramètre de la fonction alert est une expression avec emploi de l'opérateur de concaténation (+)
alert('surface du cercle : ' + vsurface + ' cm2' ) veut dire : afficher dans la boîte de dialogue la chaîne 'surface du cercle :' suivie du contenu de la variable vsurface suivie de la chaîne 'cm2'

Les fonctions

Dans le script JavaScript de la page nous avons appelé deux fois la fonction alert. Il s'agit d'une fonction native de JS ! Donc nous n'avons pas besoin de la définir.
Pour appeler une fonction dans une instruction il faut l'écrire puis indiquer entre parenthèses un ou plusieurs paramètres (on dit aussi arguments).

Le caractère +

Attention en JavaScript le caractère + peut selon le contexte signifier addition ou concaténation ...
Si tous les éléments sont de type numérique il y a addition ; si l'un au moins des éléments est de type string il y a concaténation.

Emplacement du code JavaScript

Code JS dans la page

Dans l'exemple le code JS est dans la page (on parle de code JS interne). Le code JS est placé dans le conteneur SCRIPT c'est à dire entre la balise ouvrante <script> et la balise fermante </script>

Mais où positionner le conteneur SCRIPT avec son code ?
Par le passé il était conseillé de positionner le conteneur SCRIPT à l'intérieur du conteneur HEAD. C'était maladroit. En effet le navigateur charge la page séquentiellement le code. Donc dans cette hypothèse il risque d'exécuter le code JS avant de charger les éléments HTML.
Si le code JS est lourd l'affichage des objets HTML de la page va donc être ralenti !

Mais ce n'est pas le plus grave. Imaginez que le code JS manipule des éléments HTML et que de surcroît il s'exécute automatiquement dès son chargement. Vous aurez alors un "plantage" !
En effet le script est censé manipuler le DOM alors que celui-ci n'a pas encore été créé ...

Il est donc préférable de placer le code JavaScript dans le conteneur BODY mais après tous les éléments HTML donc juste avant </body>.

Code JavaScript externalisé

Imaginons que dans plusieurs pages nous ayons besoin du même code JS. Il serait idiot de dupliquer le script dans chaque page.
Comme pour le CSS nous pouvons externaliser le JS ! Nous créons alors un fichier d'extension .js que nous nommons cercle.js et qui ne contient que du code JavaScript !

Le contenu du fichier "cercle.js"

Dans ce fichier les balises <script> et </script> sont alors inutiles puisque ce fichier ne contient que du JS !

/* ce script affiche le périmètre et 
la surface d'un cercle de rayon 4 cm */
var vsurface = 4 * 4 * 3.14; // calcul de la surface dans la variable vsurface
var vperimetre = (4 + 4) * 3.14; // calcul de la circonférence dans la variable vperimetre
alert('circonférence du cercle : ' + vperimetre + ' cm' ) ; // affichage circonférence
alert('surface du cercle : ' + vsurface + ' cm2' ) ; // affichage surface

Le code de la page web

Le code de notre page devient alors tout simplement : ... <script src = "cercle.js" ></script> ...

Remarque : Alors que le lien vers un fichier CSS se fait avec la balise link, le lien vers du code JS externe se fait avec le conteneur SCRIPT avec l'attribut src.
Ici on suppose bien sûr que la page web et le fichier d'extension .js sont dans le même dossier donc le chemin vers le fichier de script se résume au nom du fichier.

Code JavaScript dans la balise

On peut aussi intégrer une instruction JavaScript dans le "tag" début donc directement dans le code HTML via un atribut événementiel tel onclick, onload, onmouseover, onfocus, etc.

Exemple 1

	<body onload ="alert('bienvenue dans cette page');">

Sur chargement de la page une boite de dialogue apparait avec le message "bienvenue dans cette page".
Attention la valeur d'un attribut doit être en guillemets doubles donc la chaine de caractères qui est l'argument de la fonction alert() doit être entre guillemets simples sinon erreur de syntaxe.

La boite de dialogue découlant de la fonction alert() est dite modale ou bloquante. En effet l'internaute doit cliquer sur la bouton OK pour que l'exécution du script se pouruive.

Exemple 2

Rien n'interdit que l'événement provoque l'exécution de plusieurs instructions comme dans l'exemple ci-dessous. <div onclick ="rebours = rebours-1; console.log(rebours);">

Si clic sur la boite DIV alors deux instructions JS sont exécutées : décrémentation d'un compteur et affichage du contenu du compteur dans la console.

Intégrer le code JavaScript dans le "tag" début présente cependant un gros inconvienient : mélange de HTML et de JavaScript.
Cela suppose que le développeur web soit compétent non seulement en HTML mais aussi en JavaScript ...
Nous verrons plus tard qu'il y a des solutions pour bien séparer le code HTML du code JavaScript donc de ne plus utiliser les attributs événementiels du HTML.

Traduction

Tutoriel JavaScript & jQuery - sommaire

JavaScript

jQuery - célèbre bibliothèque JavaScript

Tutoriel JavaScript & jQuery - recherche

L'auteur : Patrick Darcheville