Le chapitre précédent nous a apprit a utiliser la console développeur de Chrome.
Dans ce cours, nous allons voir où écrire notre code Javascript.
Commençons tout d'abord par créer notre page HTML nommée index.html avec le contenu suivant:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Mon App</title>
</head>
<body>
</body>
</html>
INSÉRER LE CODE EN DUR DANS LE HTML
La première méthode consiste à écrire notre Javascript directement dans notre fichier HTML avec la balise
<script>
comme suit :
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Mon App</title>
</head>
<body>
</body>
<script>
console.log("Mon code Javascript fonctionne !")
</script>
</html>
À noter que le bloc
<script>
peut être positionné dans le <head>
ou dans le <body>
, mais pour des raisons de perception, nous préféreront, dès que possible, le mettre tout à la fin de notre code HTML.En effet, les scripts Javascript peuvent être assez lourd à charger et demander un peu de temps pour être exécuté. En plaçant notre code Javascript à la fin du document, lors du chargement de la page, le design et le contenu s'afficheront assez rapidement. À l'inverse, l'affichage sera impacté par le chargement et l'exécution de notre code Javascript et l'utilisateur aura une sensation de "page qui rame" !
INSÉRER LE CODE DANS UN FICHIER JAVASCRIPT A INCLURE
Si la première méthode est convenable pour un simple
console.log()
, lorsque notre code sera un peu plus gros, nous auront besoin de le positionner dans un fichier à part.Pour cela, nous allons créer un fichier nommé script.js et y mettre notre code:
JavaScript:
console.log("Super, notre code est positionné dans un fichier script.js !");
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Mon App</title>
</head>
<body>
</body>
<script src='script.js'></script>
</html>
Maintenant que nous savons comment écrire notre code Javascript dans une application HTML, nous verrons dans le prochain cours ce que sont les variables et comment les utiliser !
Dernière édition: