Bienvenue à ce nouveau tuto dans le quel nous allons savoir où exactement écrire le code JavaScript.
Il faut mentionné tout d’abord que l’insertion d’un code JavaScript peut s’écrire dans un de ces trois emplacement :
- Directement dans la balise ouvrante d’un élément HTML
- Dans une balise « script » dans le fichier HTML
- Dans un fichier externe qui a l’extension « .js »
Nous allons, dans cette tuto , voir comment écrire un code JavaScript dans chacun de ces endroits et dégager les différents avantages et inconvénients de chaque façon de faire.
accès rapide
- la démo
- Définition d’un script
- Comment placer JavaScript dans la balise ouvrante d’un élément HTML ?
- Comment utiliser la balise <script> pour insérer du JavaScript ?
- Comment utiliser un fichier JavaScript externe ?
- Quiz de ce tuto
La démo
mettre ici la vidéo de la démonstration
Définition d’un script
Un script est une portion de code qui vient s’insérer dans une page HTML. Le code du script n’est pas visible dans la fenêtre du navigateur et ce dernier peut le comprendre grâce aux balises spécifiques qui lui signalent qu’il s’agit d’un script écrit en langage JavaScript.
Les balises annonçant un code Javascript sont les suivantes :
<SCRIPT language="Javascript">
Placez ici le code de votre script
</SCRIPT>en HTML5 , l’attribut type="text/javascript" n’est pas obligatoire.
Comment placer JavaScript dans la balise ouvrante d’un élément HTML ?
Nous pouvons mettre le code JavaScript directement dans la balise ouvrante HTML.
Ce type d’insertion de code a été très fréquent au début surtout lorsqu’on veut faire des événements sur un composant HTML par exemple lors d’un clic sur un bouton on déclenche un message.
Exemple
Nous allons écrire un programme Bienvenue() qui permettra d’afficher une fenêtre contenant le texte: « Bienvenue ! » lorsque l’utilisateur clique sur le bouton.
Pour se faire nous allons poursuivre les étapes suivantes :
- Créer un nouveau fichier HTML ( extension .html ) qui va contenir un code HTML avec du code JavaScript dedans.
- mettre dans ce fichier le code suivant :
<html>
<head>
<title>Inserer JavaScript</title>
<meta charset="utf-8">
</head>
<body>
<button onclick="alert('Bienvenue !')">Cliquez ici</button>
</body>
</html>Vous pouvez télécharger le code source de cet exemple en cliquant sur le bouton ci-dessous :
Ici , nous avons un exemple très simple mais imaginons qu’on va avoir une page qui contient beaucoup d’élément HTML et pour chacun on va ajouter dedans du JavaScript ==> ça sera difficile même de le lire.
C’est pourquoi, il est déconseillé d’écrire du code JavaScript dans des balises ouvrantes d’éléments HTML car la séparation des différents langages permet de conserver le code plus propre, plus compréhensible et surtout plus maintenable.
Comment utiliser la balise <script> pour insérer du JavaScript ?
Nous pouvons mettre notre code JavaScript dans un élément <script> qui est l’élément utilisé en HTML pour indiquer que le code situé dedans est en JavaScript.
Le script va être inséré dans un fichier HTML dans n’importe quel emplacement de la page. Généralement, les fonctions JavaScript utiles sont insérées dans l’élément “head” et le code JS principal juste avant la balise de fermeture </body> de la page HTML.
Exemple
Nous allons écrire un programme Bienvenue() qui permettra d’afficher une fenêtre contenant le texte: « Bienvenue à tous !!! »
Pour se faire nous allons poursuivre les étapes suivantes :
- Créer un nouveau fichier HTML ( extension .html ) qui va contenir un code HTML avec du code JavaScript dedans.
- mettre dans ce fichier le code suivant :
<head>
<TITLE>Bienvenue à tous via JavaScript</TITLE>
<meta charset="UTF-8">
<script>
// Dans cette balise , on définit la fonction JavaScript qui permet d'afficher "Bienvenue à tous !!!"
function bienvenue() { alert("Bienvenue à tous !!!") ;}
</script>
</head>
<body>
< !--code HTML de la page -->
<script>
//Le code principal dans le quel on fait appel à la fonction bienvenue()
bienvenue() ;
</script>
</body>
Résultat
Vous pouvez télécharger le code source de cet exemple en cliquant sur le bouton ci-dessous :
Exercices d’application avec correction
Exercice 1
Créez une fonction nommée « somme » qui prend deux nombres comme arguments et retourne leur somme ( on va utiliser la balise “script” dans la même page HTML)
Exemples :
somme(3, 5) ➞ 8
somme(3, -1) ➞ 2
Correction
<head>
<TITLE>fonction somme avec JavaScript</TITLE>
<meta charset="UTF-8">
<script>
// Dans cette balise , on définit la fonction somme JavaScript qui permet de calculer et d'affiche la somme x+y
function somme(x,y) { alert("la somme : " + x + " + " + y + " = "+ (x+y)) ;}
</script>
</head>
<body>
<script>
//Le code principal dans le quel on fait appel à la fonction somme()
somme(3,5) ;
</script>
</body>Résultat d’affichage
Vous pouvez télécharger le code source de cet exercice en cliquant sur le bouton ci-dessous :
Comme vous l’avez remarqué , cette méthode est meilleure que la précédente cependant ce n’est pas pas idéalement celle que nous allons utiliser pour plusieurs raisons :
Tout d’abord, car la séparation des codes n’est pas respecté ici puisqu’on mélange du HTML avec du JavaScript ce qui rendre l’ensemble complexe et difficile à comprendre et à maintenir dans le cadre d’un gros projet.
De plus, imaginons qu’on souhaite utiliser un même code sur plusieurs pages, donc il faudra faire plusieurs copier-coller à chaque fois ce qui entraine une complexité lors de la maintenance de l’ensemble du site.
Comment utiliser un fichier JavaScript externe?
Mettre du code JavaScript dans un fichier séparé contenant du code JavaScript est la méthode recommandée vu que le code sera plus lisible et plus facile à maintenir.
Pour se faire , nous allons passer par la création créer un nouveau fichier d’extension .js. Ensuite, nous allons faire appel à ce fichier JavaScript depuis le fichier HTML grâce à l’attribut src, placé dans la balise <script>.
Exemple
Cas où les deux fichiers sont dans le même emplacement
Dans cet exemple, nous allons créer deux fichiers :
- Un fichier JavaScript externe qui contient le code JavaScript
- Un fichier HTML dans le quel nous appellerons les fichiers .js
Pour cet exemple les deux fichiers sont dans le même emplacement ( le même dossier ) comme le montre cette figure :
Nous allons prendre le même exemple que le tuto précédant mais cette fois-ci avec un appel externe du JS.
écrire un programme Bienvenue() qui permettra d’afficher une fenêtre contenant le texte: « Bienvenue à tous !!! »
Nous allons créer tout d’abord un nouveau fichier nommé : bienvenue.js dans lequel nous mettons le code suivant :
function bienvenue() {
alert("Bienvenue à tous !!!") ;
}Par la suite , on crée un nouveau fichier HTML nommé par exemple bienvenue.html dans lequel nous ferons appel au fichier bienvenue.js à l’aide de l’attribue src
<head>
<TITLE>Bienvenue à tous via JavaScript</TITLE>
<meta charset="UTF-8">
// Ici on fait appel au fichier bienvenue.js
<script type="text/javascript" src="bienvenue.js"></script>
</script>
</head>
<body>
< !--code HTML de la page -->
<script>
//appel de la fonction bienvenue()
bienvenue() ;
</script>
</body>
Résultat
Vous pouvez télécharger le code source de cet exemple en cliquant sur le bouton ci-dessous :
Cas où les deux fichiers ne sont pas dans le même emplacement
Pour faciliter la tâche , on va prendre le même exemple et créer les deux fichiers :
- Un fichier JavaScript externe qui contient le code JavaScript
- Un fichier HTML dans le quel nous allons appeler les fichier .js
Pour cet exemple les deux fichiers qui ne sont pas dans le même emplacement ( mettre le fichier .js dans un dossier nommé javascript)
bienvenue.js
function bienvenue() {
alert("Bienvenue à tous !!!") ;
}test.html
<head>
<TITLE>Bienvenue à tous via JavaScript</TITLE>
<meta charset="UTF-8">
// Ici on fait appel au fichier bienvenue.js
<script type="text/javascript" src="javascript/bienvenue.js"></script>
</script>
</head>
<body>
< !--code HTML de la page -->
<script>
//appel de la fonction bienvenue()
bienvenue() ;
</script>
</body>Le même résultat
La seule modification à effectuer est de modifier l’attribut en mettant les nom du dossier javascript avant le nom du fichier .js src= »javascript/bienvenue.js »
Vous pouvez télécharger le code source de cet exemple en cliquant sur le bouton ci-dessous :
Exercices d’application avec correction
Exercice 1
Créez une fonction nommée « minuteVersSeconde » qui prend une durée en minute comme arguments et retourne sa conversion vers en secondes ( utiliser un script externe JavaScript)
Exemples :
minuteVersSeconde(3) ➞ 180
minuteVersSeconde(2) ➞ 120
Correction
Tout d’abord, la création d’un nouveau fichier nommé : externe.js par exemple dans lequel on met le code suivant :
function minuteVersSeconde(x) {
alert("La conversion de " + x +" minutes vers les secondes est " + (x*60)) ;
}Par la suite , la création un nouveau fichier HTML( nommé :conversion.html) dans lequel nous ferons appel au fichier externe.js à l’aide de l’attribue src
<head>
<TITLE>minute vers secondes via JavaScript</TITLE>
<meta charset="UTF-8">
// Ici on fait appel au fichier externe.js
<script type="text/javascript" src="externe.js"></script>
</script>
</head>
<body>
< !--code HTML de la page -->
<script>
//appel de la fonction minuteVersSeconde()
minuteVersSeconde(3) ;
</script>
</body>
Vous pouvez télécharger le code source de cet exercice en cliquant sur le bouton ci-dessous :
Exercice 2
Créez une fonction nommée « ResteDivision » qui prend deux entiers X et Y comme arguments et retourne le reste de la division de X par Y ( utiliser un script externe JavaScript et qui ne sont pas dans le même emplacement )
Exemples :
ResteDivision(6,3) ➞ 0
minuteVersSeconde(3,2) ➞ 1
Correction
Tout d’abord, la création d’un nouveau fichier nommé : externe.js dans un dossier nommé js par exemple dans lequel on met le code suivant :
function ResteDivision(x,y) {
alert("Le reste de la division de " + x +" par " +y+ " égal à "+ (x%y)) ;
}Par la suite , la création d’un nouveau fichier HTML (nommé resteDivision.html ) dans lequel nous ferons appel au fichier division.js à l’aide de l’attribue src
<head>
<TITLE>Bienvenue à tous via JavaScript</TITLE>
<meta charset="UTF-8">
<script type="text/javascript" src="js/division.js"></script>
</script>
</head>
<body>
< !--code HTML de la page -->
<script>
//Le code principal dans le quel on fait appel à la fonction bienvenue()
ResteDivision(3,2) ;
</script>
</body>
Vous pouvez télécharger le code source de cet exercice en cliquant sur le bouton ci-dessous :
Dans ce tuto , nous avons vu comment écrire un petit code JavaScript et où nous pouvons le placer.
Espérons bien que ce tuto vous a plu. Dans le tuto suivant , Nous allons voir comment déclarer faire les commentaires dans JavaScript ainsi que quelques mots clé réservé par ce langage.
Quiz de ce tuto
Vous pouvez tester que vous avez bien assimiler tous ce que nous avons appris ensemble via ce quiz 🙂 🙂 amusez vous bien.