web:javascript:position

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision		 Révision précédente
web:javascript:position [2021/06/19 11:01] – philweb:javascript:position [2021/08/11 10:54] (Version actuelle) – phil
Ligne 1: Ligne 1:
 +[[web:javascript|{{ :iconemaison.jpg?nolink&25|Accueil JavaScript}}]]
 +
 +==== Où intégrer le code JavaScript ? ====
 +
 +[Mise à jour le 19/6/2021]
 +
 +  * **Sources** : <html><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript" target="_blank">MDN web docs Mozilla</a></html>
 +
 +----
 +
 +=== 1. Dans une page HTML ===
 +<note>Le code JavaScript s'intègre au sein d'une page HTML avec les balises **<script>** et **</script>**. La balise <script> attend l'attribut **type="text/javascript"**.</note>
 +
 +//Exemple// : Hello World
 +<code javascript *.js>
 +<!DOCTYPE html>
 +<html>
 + 
 +<head>
 +    <meta charset="UTF-8">
 +    <title>Hello World</title>
 +</head>
 + 
 +<body>
 +    <p id="hw"></p>
 +    <noscript>Le navigateur n'est pas configuré pour exécuter le JavaScript !</noscript>
 +    <script type="text/javascript">
 +        document.getElementById("hw").innerHTML="Hello World";
 +    </script>
 +</body>
 + 
 +</html>
 +</code>
 +
 +<note important>Le code HTML placé entre les balises **<noscript>** et **</noscript>** est **optionnel**. Il s'affiche uniquement pour un navigateur non configuré pour exécuter le JavaScript.</note>
 +
 +=== 2. Dans un tag HTML ===
 +<note>Le JavaScript s'intègre également directement dans les balises HTML, le plus souvent dans les attributs dédiés à la **gestion des évènements**.</note>
 +
 +// Exemple 1 // : on compte les clics sur un bouton !
 +<code javascript *.js>
 +<!DOCTYPE html>
 +<html>
 +
 +<head>
 +    <meta charset="UTF-8">
 +    <title>Compteur de clics</title>
 +</head>
 +
 +<body>
 +    <button onclick="var compteur = 0; compteur = compteur + 1; console.log(compteur);">Cliquez-moi</button>
 +</body>
 +
 +</html>
 +</code>
 +
 +{{ :web:javascript:compteurclic.png?nolink|}}
 +// Exemple 2 // : le compteur de l'exemple précédent est placé dans une fonction.
 +<code javascript *.js>
 +<!DOCTYPE html>
 +<html>
 +
 +<head>
 +    <meta charset="UTF-8">
 +    <title>Compteur de clics</title>
 +</head>
 +
 +<body>
 +    Compteur : <span id="resultat">0</span>
 +    <br>
 +    <button onclick="compteur()">Cliquez-moi</button>
 +</body>
 +
 +<script type="text/javascript">
 +    var cmpt = 0;
 +    function compteur() {
 +        cmpt += 1;
 +        document.getElementById("resultat").innerHTML = cmpt;
 +    }
 +</script>
 +
 +</html>
 +</code>
 +
 +=== 3. Dans un fichier externe === 
 +<note>L'intégration de JavaScript dans un fichier externe est la **méthode la plus utilisée**.</note>
 +
 +//Exemple// : la fonction compteur est placée dans un fichier script.js
 +{{ :web:javascript:compteurclicproj.png?nolink|}}
 +<code javascript *.js>
 +var cmpt = 0;
 +function compteur() {
 +    cmpt = cmpt + 1;
 +    document.getElementById("resultat").innerHTML = cmpt;
 +}
 +</code>
 +
 +Cette fonction est intégrée au code HTML avec l'**attribut** //src// de la balise //<script>//.
 +
 +<code html *.html>
 +<!DOCTYPE html>
 +<html>
 +
 +<head>
 +    <meta charset="UTF-8">
 +    <title>Compteur de clics</title>
 +</head>
 +
 +<body>
 +    Compteur : <span id="resultat">0</span>
 +    <br>
 +    <button onclick="compteur()">Cliquez-moi</button>
 +</body>
 +
 +<script type="text/javascript" src="scripts/script.js"></script>
 +
 +</html>
 +</code>
 +
 +<note tip>L'utilisation de l'extension **.js** n'est qu'une convention, non obligatoire. Elle permet cependant de forcer l'éditeur de code à appliquer la coloration syntaxique dédiée au JavaScript. </note>