info2gestion

Les pages web

L'insertion de script dans le navigateur

Une page web peut contenir différents éléments et parmi ces éléments, des scripts javascript. Les balises <script> et </script> peuvent contenir des scripts Javascript.

Des fichiers externes peuvent contenir des scripts javascript et être appelés dans une page web html.

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

L'emplacement d'un script javascript ou de l'appel d'un fichier javascript peut avoir une importance. Javascript peut accéder à certains éléments (DOM) de la page web et le chargement de ces éléments dans la page web peut intervenir avant le script javascript et ne pas être pris en compte par le script.

Quand le fichier externe est appelé, celui est automatiquement et immédiatement chargé par le navigateur web (si javascript est activé au niveau du navigateur...).

Il existe différents attributs pour inclure un fichier javascript en fonction de l'accès aux éléments du DOM. Les attributs async, defer peuvent ajouter un contrôle supplémentaire sur l'accès aux éléments de la page web.

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

ou

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

Les balises async permet de charger plus ou moins avant les éléments de la page web et defer attend le chargement de la page web avant d'appeler le script.

Pour prévoir le ou les cas où javascript ne serait pas activé dans le navigateur web, il est possible d'utiliser la balise <noscript>

  
<noscript>Simple bonjour sans javascript</noscript>
  

Pour inclure javascript directement sur la page web, les balises sont similaires aux balises de chargement de fichier externe.

  
<script>
  console.log("Bonjour dans le module développement du navigateur");
</script>
  

L'emplacement du script est libre mais doit rester à l'intérieur des balises <script> et </script>.

Il est possible d'utiliser javascript en mode inline, c'est-à-dire dans un élément html déterminé.

  
<script>
  <a href="#" onClick="alert('fenêtre bonjour');">Cliquer sur ce lien</a>
</script>
  

onClick est un élément html attribut de type évènement et peut être utilisé avec d'autres éléments (boutons...). Javascript ES5 est une version de javascript qui utiliser les éléments web et les attributs de type évènement.

onClick peut également contenir un appel vers une fonction javascript. Les intéractions entre les éléments web et javascript peuvent être gérées de très nombreuses manières.

Javascript ES6 propose de nouvelles manières pour accéder aux éléments de la page web par exemple avec les event handlers ou méthodes d'évènement.