JavaScript Principe

Le JavaScript est un langage de programmation orienté objet non compilé. Il n’a pas réellement d’intérêt en tant que langage autonome, mais il s’intègre facilement au sein d’autres produits (notamment les navigateurs Web).

En règle générale, il est exécuté coté client, c’est à dire dans le navigateur. L’objectif principal est la manipulation des «objets» qui composent la page web, le DOM.

Un fichier JavaScript est un fichier texte édité avec un simple éditeur de texte. Son extension est .js.

Note: il peut également être exécuté coté serveur.

JavaScript se raccourcit en JS, et non pas JAVA (c’est un autre langage)

Insérer du JS dans une page web#

Les portions de code JavaScript peuvent être écrites :

dans une balise <script>
dans un fichier séparé qui sera lié à la page web grâce à la balise <script> et un attribut src.

Pour des raisons de maintenance et de lisibilité, il est préférable d’utiliser la seconde méthode, à savoir les fichiers séparés. Deux «endroits» sont préférés pour l'appel à un fichier externe:

dans le <head> de la page HTML (les métadonnées)
juste avant la fermeture de l’élément <body>

La seconde méthode a l'avantage de ne pas devoir attendre le chargement complet de la page avant d'exécuter son code, puisque la page est déjà chargée avant que le fichier ne le soit. (La lecture d'une page web est séquentielle)

1er exemple : code dans la page#

Le code est intégré dans une page HTML classique. La fonction alert() ici appelée affiche une «popup» avec un message.

Fichier index.html

...
</head>
<body>
    ...
    <script>
        alert("premier code javascript");
    </script>
    <p>contenu HTML</p>
    ...
</body>

Cet exemple affiche la popup lors de la lecture du HTML, donc avant l’affichage du paragraphe.

2e exemple : fichier externe en fin de document#

Le code est dans un fichier séparé, la balise <script> est en fin de document, juste avant la fermeture du <body> :

Fichier code.js

alert("page chargée");

Fichier index.html

<body>
    ...
    <p>contenu HTML</p>
    <script src="code.js"></script>
</body>

Cet exemple affiche la popup après l’affichage du contenu HTML.

Compatibilité#

Le JavaScript est basé sur le standard EcmaScript[^1], mais tous les navigateurs n’offrent pas le même support. Attention alors lors de l’utilisation de telle ou telle fonctionnalité. Les frameworks aident à gérer l’interopérabilité des développements effectués.

Documentation JavaScript et DOM#

Déboguer#

L’utilisation des outils intégrés au sein des navigateurs est primordiale pour déboguer une application JS. Tous les navigateurs récents disposent de tels outils (console de développement).

La commande «magique» est console.log(). Elle permet d’afficher en console ce que vous souhaitez.