Javascript est un langage de programmation dit de haut niveau. Inventé à la fin des années 1990, il s’agit à l’origine d’un langage spécifique au web, destiné à être lu par les navigateurs côté client, qui permet d’interagir avec une page web statique. Aujourd’hui, il est utilisé dans différents contextes, notamment avec l’arrivée de l’environnement NodeJs en 2009, qui permet d’exécuter des programmes écrits en Javascript en-dehors du navigateur, coté serveur.
Concrètement, côté client, il permet de modifier de manière programmatique la page web actuellement chargée. Il est utilisé pour des applications diverses, dont les plus communes sont:
- Envoyer des requêtes au serveur à la demande de l'utilisateur une fois que la page est chargée pour en modifier certaines parties. Cette technique s'inscrit dans une démarche dite de chargement dynamique, qui vise à économiser les ressources transferées entre le serveur et le client. Nous n'aborderons pas cette utilisation de Javascript cette année, à moins de rencontrer des cas particuliers de design qui le nécessite dans vos portfolios.
- Créer des interactions avec l'utilisateur, en attachant certaines de ses actions (clique, survol, scroll…) à une modification de la page web.
(Don't) be so vanilla
Il existe différentes manières d'utiliser le langage Javascript, et l'une des plus courantes consiste à se servir d'un petit programme qui simplifie la manière d'écrire le code appelé JQuery. Nous ne ferons pas de JQuery ici, et apprendrons le langage Javascript lui-même, aussi appelé Vanilla JS. Vanilla est une expression familière anglophone qui signifie sage, conventionnel.
Ce semestre, nous allons étudier les fondamentaux de Javascript, à travers un enseignement théorique et une série de petits exercices. Ceux-ci seront orientés vers les actions les plus communément requises dans un cadre de design éditorial. Chaque notion comportera un exercice visant à l'expliciter.
Première feuille de script
De la même manière que le CSS est ajouté au HTML grâce à un lien vers une feuille de style externe, le Javascript s'écrit habituellement dans un fichier de script indépendant, portant l'extension .js. Placer le fichier à l'extérieur permet de lier un même script à plusieurs pages HTML. Et comme le CSS, il peut également s'écrire directement dans le fichier HTML (code dit inline), et dans ce cas-là, reste limiter à une seule page HTML.
Contrairement au CSS, le lien vers la feuille de script JS ne s'effectue pas dans la head du fichier HTML, mais juste avant la fermeture de la basile body. Ce comportement provient de la nécessité pour la page HTML d'avoir entièrement chargée avant que le script ne puisse s'appliquer. Pour lier une feuille JS, on utilise la balise script, avec l'attribut src que nous avons déjà rencontré avec la balise img.
<script src="js/main.js"></script>
</body>
</html>