Les bases

1 | Inclure du JavaScript dans une page HTML

Dans une balise <script>

Placer une balise <script></script> dans l’entête (entre <head> et </head> ) ou juste avant </body>

<script>
...
</script>

Dans un fichier .js distant

Appeler, comme on le ferait avec une feuille de style, un fichier .js contenant un ou plusieurs scripts, soit dans l’entête (entre <head> et </head> ) ou juste avant </body>

<script src="js/messcripts.js"></script>

Pourquoi place-t-on les scripts avant </body> ?

Le chargement d’un script suspend le chargement de la page. S’il est dans <head>, il risque donc de concerner un élément du DOM (du contenu de la page) qui n’est pas encore chargé. Il ne va donc pas le trouver et générer une erreur. Certains scripts doivent toutefois rester dans <head> si, par exemple, ils doivent effectuer une vérification AVANT le chargement du DOM.

Il existe les attributs async et defer si vous voulez maîtriser plus précisément le chargement des scripts. Nous optons ici pour le placement avant </body> qui reste la grande majorité des cas.

Comme attribut d’une autre balise

<button onclick="...">Cliquez-moi !</button>

2 | La console

Dans votre navigateur, nous allons utiliser la console pour tester le JavaScript. Utiliser le raccourci ctrl-shift-i sur PC ou command-option-i sur Mac pour ouvrir les outils de développement de votre navigateur.

La console est une boucle d’évolution (REPL – read – evaluate – print- loop). Elle nous permet d’entrer des lignes de commande JavaScript sans devoir recharger la page et elle consigne les erreurs. Aucun danger d’abîmer quoi que ce soir dans la console ! Il suffit de recharger la page et tout est remis à zéro.

Tester les commandes suivantes :

  • alert("Hello World !");
    Affiche une affreuse fenêtre de dialogue avec le message deandé
  • prompt("Quel âge avez-vous ?");
    Affiche la même affreuse fenêtre mais avec un champ pour répondre, la réponse est alors affichée dans la console.
  • confirm("Voulez-vous partir en courant ?");
    Affiche toujours cette horreur avec la possibilité d’accepter ou annuler, la réponse true ou false s’affiche alors dans la console.

3 | Règles fondamentales

Sensibilité à la casse

JavaScript est sensible à la casse. Pour lui, uneVariable n’a rien à voir avec unevariable. Vous pouvez tester cela dans la console en écrivant : document.getElementById.toString();

La console va vous donner une réponse : 'function getElementById() { [native code] }'. Mais si vous écrivez : document.getElementByID.toString();

Vous obtiendrez une erreur ! Seul le D de ID est le responsable.

CamelCase

Les méthodes intégrées à JavaScript utilisent le principe du CamelCase, qui consiste à capitaliser chaque mot sauf le premier. Vous pouvez le constater dans l’exemple ci-dessus dans la commande getElementById. Il est recommandé d’utiliser ce principe lorsque vous écrirez vos variables, fonctions et autre. préférez donc écrire maVariable plutôt que mavariable

Point-virgules

Il est recommandé de terminer toute instruction JavaScript par un point-virgule. Ce n’est pas obligatoire car un retour à la ligne indique également qu’on est arrivé à la fion de la commande mais, dans un souci de facilité dans l’entretien du code par soi-même ou autrui, le point-virgule est plus clair et plus simple.

Espacements

Les espaces et tabulations n’ont aucune signification pour JavaScript.
Les commandes alert ( " Hello World ! " ) ; et alert("Hello World !"); sont absolument identique.

Commentaires

Commenter son code est très utile lorsque vous devrez vous replonger dedans plus tard. Il existe deux types de commentaires en JavaScript : multiligne et sur une seule ligne.

/* Ceci est un commentaire multiligne
Tout ce qui est situé entre ces balises sera ignoré dans l'exécution du code.
On stoppe un commentaire multiligne avec la même balise inversée :
*/
// Ceci est un commentaire sur une ligne
// Ceci aussi est un commentaire sur une ligne. Tant qu'il n'y a pas de retour chariot, JavaScript considère que c'est toujours la même ligne qui continue et le commentaire fonctionne toujours. Dès que vous ferez un retour chariot, vous serez sorti du commentaire

alert(“Je ne suis plus dans le commentaire !“);