Langage #3 : Javascript

Structure d'information balisée en HTML, couche de peinture et mise en page par CSS, et maintenant on utilisera Javacript pour améliorer l'expérience utilisateur (UX), en rendant plus interactif l'interface utilisateur (UI) ! Animation 2D, 3D, interaction clavier, player vidéos, souris, filtres de webcam, contrôle de formulaires, quizz, statistiques dynamiques, requêtes asynchrones par ajax, ... on ouvre les possibilités de javascript vers un océan de domaines divers et variés.
Quelques mots à propos  Javascript 

Langage de script possédant des instructions de flux, des variables, des instructions, des opérateurs, javascript permettra de créer des applications web et des sites web interactifs. Javascript dans le contexte Web du navigateur permettra de manipuler le DOM, et des propriétés du navigateur utilisés.

À ne pas confondre avec Java qui est un autre langage de programmation qui nécessite une machine virtuelle pour tourner, alors que javascript peut être directement interprété par un navigateur ou un serveur nodejs selon la norme ECMAScript ou autres normes plus exotiques.

La version 1 de ECMAScript a pour date 1997, puis la version 10 de ECMAScript en 2019. Plus tard, une version en développement sera ESnext.


Un oeil sur le format de fichier​

Avant de commencer à coder en javascript, il est important de connaitre les bases de la mise en place de la machinerie. En particulier, où écrire le script, et comment sera-t’il exécuté ? On a plusieurs façon d’exécuter  un code javascript : soit par fichier, en ligne de commande (ex :nodejs), soit directement dans un fichier HTML via la balise script où via des propriétés HTML comme par exemple les propriétés href ou onClick. Ici on parlera un peu de la notion de fichier JS.

Le format de fichier JS comporte trois composantes dont j’ai envie de parler. L’extension du fichier, l’encodage du fichier et le mime type. L’extension du fichier javascript est .js, l’encodage du fichier est de préférence utf-8 with no-BOM et le mime type du fichier sera text/javascript.

On évitera de mettre des caractères exotiques dans le nom du fichier, et utiliser le nommage 8.3 est une bonne pratique. Selon le serveur qui peut être case sensitive (différentiation des majuscules et minuscules), il faut faire très attention au nommage. Par exemple engine_12h30_agence_de_communication.js convient très bien comme nommage, et selon le système où il sera exécuté, il pourra être concaténé dans un unique fichier javascript comprenant diverses librairies ou code javascript, et on ne verra plus le nom du fichier javascript. Attention, sur un serveur case sensitive, ce nom de fichier n’est pas pareil que Engine_12h30_Agence_De_Communication.js .

⚠️ Toujours vérifier caractères par caractères le chemin jusqu’au fichier, l’existence du fichier, via le protocole en vigueur. Par exemple, vérifier que le fichier existe localement sur le disque dur, où qu’il ne retourne pas une erreur 404 par url via un serveur web.Par exemple, vérifier que le fichier existe localement sur le disque dur, où qu’il ne retourne pas une erreur 404 par url via un serveur web.

Exemple d’utilisation de javascript via la balise script 

< script type= »text/javascript »>

<!–[CDATA[

//code javascript

//écrire un message dans la console de développement web du navigateur

console.log(« 12h30 agence de communication – blog #sourceCode »);

]]–>

< /script >


Lire / éditer / exécuter un document JS

Le fichier JS sera ouvert avec un éditeur de code, ou exécuté via une page html. Pour utiliser un fichier JS depuis un fichier HTML, on utilise la balise HTML suivante : < script type=”text/javascript” > On écrira le code directement dans la balise entre < script> et < /script> ou dans un fichier .js qui sera appelé via un lien et la propriété src de la balise src. Pour un script dans un autre environnement que le context navigateur, on dira plutôt : “Je vais exécuter le fichier JS”.

De ce point de vue, on peut par exemple exécuter des fichier js depuis un serveur Node. On peut aussi écrire directement du code javascript en ligne de commande et exécuter des tâches diverses. Afficher l’heure, traiter des images, traiter des fichiers, comme obfusquer, ou au contraire « beautifier » du code dans ces fichiers.

On observe donc qu’ avec cet outil qu’est le javascript, on peut aujourd’hui faire beaucoup de chose qui n’ont pas directement à voir avec la réalisation d’UI/UX.


Compatibilité 🦗

Dans le contexte d’un navigateur web, l’interactivité, les animations, la mise en page générée par du code javascript va fonctionner correctement ou avec des bugs : Mise en page éclatée, page blanche, interactions qui ne fonctionnent pas, animations saccadées, … Tout dépend de ce qu’on manipule dans un navigateur avec du code javascript, un script sera compatible avec tel navigateur mais pas un autre. Sur Mozilla dev il y a un article sur la « Compatibilité des navigateurs avec les API JavaScript WebExtensions »


Voici quelques notes sur le debuguage 🛠️
 
  • Utiliser les outils de développement web intégrés au navigateur web.
  •  Utiliser la console : console.log();
  • Attention à la portée (scope) des variables.
  • Lancer des investigations.
  • Observer les messages d’erreurs, d’avertissements de la console de l’outil de dévelop-pement.
  • On le répétera jamais assez : Modifier, Transférer, Vider le Cache, Actualiser !

Se documenter, S’entraîner !📚

Un peu de documentation en ligne concernant les spécifications du langage JS:

Un peu d’entrainement peut être fait sur les sites suivants 


Conclusion

Javascript ouvre un univers vers un aperçu de la programmation de plus haut niveau que HTML/CSS. Les variables, les instructions de flux, les boucles, et la programmation orientée objet permettront de bien s’amuser avec les propriétés des navigateurs et du DOM.

Il sera intéressant d’aborder ce qui a été fait avec javascript. Des frameworks MVC, des serveurs Nodejs, des outils de programmations, d’optimisations, d’obfuscation, de la librairie 3D three.js, le framework Vue.js, etc 

D’une simple interactivité avec un formulaire à une visite virtuelle d’un musée, javascript rajoute une couche interactive très intéressante au média web. Avec le  PHP on rajoutera des pages dynamiques, qu’on oppose aux pages statiques.