Un script JS peut prendre deux formes : écrit dans une page HTML ou écrit dans un fichier à côté (xyz.js).
Pour intégrer un script directement dans une page HTML
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width, initial-scale=1"/><!-- STYLES --><linkrel="stylesheet"href="../view/style/taskmenu.css"/></head><body><p> avant le script </p> <script>alert("Hello World"); </script><p> après le script </p></body>
Pour intégrer un script dans une page via un fichier .js
Le sens dans lequel vous chargez vos fichiers compte, et peut avoir une incidence très forte sur le temps de chargement de votre page. Plus d'info ici. `
`
Vous pouvez aussi récupérer des scripts directement via protocole http/s en utilisant un réseau de distribution de contenu (a.k.a. CDN). Par exemple : <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
Exo
Créer une page HTML simple, où vous affichez une alerte (alert("Number One")) dès que la page est prête.
Remplacer l'affichage de l'alerte par un fichier javascript qui effectue la même chose.
Créer deux autres fichiers .js avec comme contenu, respectivement, alert("Number Two") et alert("Number Zero") ; intégrer les à votre page
Ordonner les correctements pour avoir l'ordre des alertes suivants : 2 > 1 > 0.
Notion de disponibilité et fonctions
Cours
Vos fichiers .js de la section précédente s'exécutent directement, sans contrôle et possibilité de les rappeler. Néanmoins, une fois inclus dans votre page, ils sont connus des autres scripts subséquents.
Vous pouvez entourer vos alertes par le mot clef fonction
Vous pouvez aussi déclarer des variables qui, si elles sont dans le scope global de votre script, seront visibles par les scripts chargés après.
Exo
Entourez au moins une de vos alertes par une fonction ; que remarquez vous ?
Comment alors appeler le code contenu dans vos fonctions ?
En supposant que vous avez toujours vos trois fichiers scripts qui se chargent dans l'ordre 2 > 1 > 0, dans le premier script créer une variable let maVar1 = 2;, dans le deuxième script créer une variable let maVar2 = 1 et dans le troisième écrire l'instruction alert(maVar2 - maVar1). Que constatez-vous ?
Dans le cas d'une fonction, let créer une variable uniquement visible dans le contexte de la fonction, contrairement à var qui rend la variable disponible partout. const rend la variable constante.
Point important
JavaScript requiert que vous codiez PROPREMENT ! C'est un langage de script qui interprète beaucoup de chose... Donc faites attention et soyez discipliné !
var arr = [];
arr.length → 0
arr[3] → undefined // No array bounds exception
arr[3] = "hi";
arr.length → 4 // Only one element has been added, but at the third index, misleading the length counter
arr["3"] → "hi" // Apparently "3" is coerced into a number
delete(arr[3]);
arr.length → 4 // 4??? There are no elements in the array!
arr[3] → "undefined" // 7 lines above, length was "0"...