Traduction
Tutoriel sur Javascript, Vue.js, jQuery.js & Node.js
Recherche dans ce tuto
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Une page web peut contenir du code JavaScript.
Une page peut avoir un lien avec vers un fichier de scripts.
Une instruction HTML peut contenir du code JS.
La page web ci-dessous comprend non seulement du HTML & CSS mais aussi du code JavaScript.
Le code correspondant :
Le code JavaScript doit être écrit à l'intérieur du conteneur SCRIPT c'est à dire entre la balise script
début et la balise script fin.
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 ligne se place après le point-virgule et est précédé de 2 "slashs" (barres obliques).
Le paramètre de cette méthode est une expression avec emploi de l'opérateur de concaténation (+)
document.write('surface du cercle : ' + vsurface + ' cm2' ) veut dire :
écrire dans le document(page) la chaîne 'surface du cercle :' suivie du contenu de la variable vsurface suivie de la chaîne 'cm2'
Attention en JavaScript le caractère + peut selon le contexte signifier addition ou concaténation ...
Si tous les termes sont de type numérique il y a addition ; si l'un au moins des terme est de type string il y a concaténation
(les termes numériques sont convertis automatiquement en chaines).
Le code JS peut être contenu dans la page ou externalisé.
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 partie BODY de la page après tous les éléments HTML décrits donc juste avant </body>.
Il y a une troisième solution : le code JS dans la partie HEAD mais ce code n'est appelé que sur chargement de la page.
On trouve alors la balise BODY avec la syntaxe suivante :
<body onload ="fonction JS" >
On utilise donc la balise début un attribut événementiel pour appeler une fonction JS.
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 !
Dans ce fichier le conteneur (balise double) SCRIPT devient inutile 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 vperimetre
var vperimetre = (4 + 4) * 3.14; // calcul de la circonférence dans la variable vperimetre
document.write("
",'Circonférence du cercle : ' + vperimetre + ' cm' ) ; // affichage circonférence
document.write("
",'Surface du cercle : ' + vsurface + ' cm2' ) ; // affichage surface
Le code de la page devient alors tout simplement (partie BODY uniquement) :
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.
Le rendu de la page avec JS externalisé :
On peut aussi intégrer une instruction JS dans la balise début via un atribut événementiel tel onclick, onload, onmouseover, onfocus, etc.
<body onload ="alert('bienvenue dans cette page');" >
Sur chargement de la page une boite de dialogue apparait avec le message "bienvenue dans cette page".
En effet on utilise la fonction alert(expression) pour afficher des infos.
La boite de dialogue découlant de la fonction alert() est dite modale ou bloquante. Ce qui signifie que l'internaute doit cliquer sur la bouton OK pour que l'exécution du script se pouruive.
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 la balise début présente cependant un gros inconvienient : dispersion du code JavaScript.
La maintenance du code JS est plus délicate.
Nous verrons plus loin qu'il y a des solutions pour que le code HTML ne soit plus "truffé" de commandes JS.