Introduction à JavaScript​ 

Créé par Steve Fallet (ESIG - steve.fallet@divcom.ch) – 24.01.2024​

Mis à jour par Thomas Tirole - EMT Module 294 - 18.08.2025​

C’est quoi le JavaScript ?​

« JavaScript est un langage de script,​
multi-plateforme et orienté objet.​
C'est un langage léger qui doit faire partie d'un environnement hôte (un navigateur web par exemple) pour qu'il puisse être utilisé sur les objets de cet environnement »​

La galaxie JavaScript

Quelques généralités sur JavaScript​

Langage interprété

  • Nécessite un interpréteur (vs. un compilateur)

Langage orienté objet

  • Langage à "prototype"
  • Un prototype est un objet à partir duquel on créé de nouveaux objets

Confusion fréquente avec Java (radicalement différent)

  • Anciennement appelé LiveScript, créé en 1995
  • Renommé en JavaScript par son père Brendan Eich pour bénéficier de la popularité de Java dans les années 90

Son nom standardisé ECMAScript - ES

  • Standardisé par ECMA (European Computer Manufacturers Association)
  • ES 5 (2009) version la plus répandue /ES 6 (2014), prend de l'ampleur

JavaScript une technologie CLIENT

Pourquoi le "CLIENT-SIDE " est à la mode ?

Réduction de la charge serveur

  • Déplacement les traitements vers le clients, serveurs moins sollicités, infrastructures moins coûteuses, ...​

Améliorer les performances et l'UX

  • Interactions plus rapides et fluides, réduction de la latence

Scalabilité accrue

  • Dépend moins du serveur pour les tâches simples, permet aux apps de gérer davantage d'utilisateurs en même temps

Personnalisation et réactivité

  • Interfaces plus poussées, réactivité immédiate

Que peut faire JavaScript dans le navigateur ?

  • Ajouter du HTML, modifier du contenu, agir sur le style

 

  • Réagir aux actions, clics, mouvements, touches, …

 

  • Envoyer des requêtes réseau, download, upload, ...

 

  • Agir sur les cookies, afficher des messages

 

  • Stocker des données côté client ("local storage")

Ce que JavaScript ne peut pas faire

  • Accéder au disque (lecture ou écriture)
  • Récupérer des fichiers sans accord de l'utilisateur
  • Interagir avec la camera ou le micro sans autorisation
  • Interagir avec les autres onglets et autres domaines

Navigateurs et JavaScript​

 

Chaque navigateur intègre un interpéteur de JS, plus ou moins performant

  • SpiderMonkey (Firefox), V8 (Google Chrome), Chakra (Internet Explorer), SquirrelFish (Safari)

Permet un niveau d'interactivité plus riche qu'avec de l'HTML simple

  • Certains traitements simples peuvent être réalisés par le navigateur plutôt que par le serveur (ex: contrôle saisie user)
  • Un document HTML/CSS chargé dans le navigateur peut être "remanié" dynamiquement !

Pourquoi JavaScript est unique

  • Intégration complète avec HTML/CSS
  • Supporté et activé par défaut par les navigateurs principaux
  • Principal outil pour créer des interfaces utilisateur
  • Peut faire :
    • Frontend (Vue.js, React, Angular)
    • Backend (Node.js, Deno)
    • Applications multiplateformes (Slack, Discord)
    • Applications mobiles

Les langages "par-dessus" JavaScript

  • JavaScript tel quel ne convient pas à tout le monde
  • Des "surcouches" à JavaScript ont été créées :
    • CoffeeScript (sucre syntaxique)
    • TypeScript (typage strict  - Microsoft)
    • Flow (typage strict - Facebook)
    • Dart (langage orienté apps - Google pour le mobile)

En résumé...

  • JavaScript a été créé pour le navigateur au départ

 

  • Aujourd'hui utilisé dans de nombreux environnements

 

  • Langage parmi les plus populaires au monde

 

  • Intégration complète avec HTML/CSS 

 

  • Il existe d'autres langages qui sont "transpilés" en JavaScript

Où écrire du JavaScript ?

  • Dans la console du navigateur

 

  • Dans un fichier HTML

 

  • Dans un fichier externe

Dans la console du navigateur

  • Ouvrir le DevTools en appuyant sur F12
  • Sélectionner l'onglet Console.
  • Écrire l'instruction suivante : alert("Bonjour les apprentis en JS");
  • Valider l'instruction avec la touche ↵ Enter

Dans un fichier HTML

  • Il suffit de placer le code JavaScript dans un élément HTML <script>.

    Le code JavaScript contenu dans les balises <script> est interprété instruction par instruction comme les éléments HTML.

<h1>Titre de ma page</h1>

<script>
    alert("Bonjour depuis une page HTML !");
</script>

Un petit paragraphe

💡Eviter de mélanger JavaScript et HTML. Un bon développeur séparera toujours le contenu (HTML), la mise en forme (CSS) et les traitements (JavaScript).

Dans un fichier externe

  • Généralement on écrit le code JavaScript dans des fichiers portant l'extension .js. Exemple : panier-achats.js

    Pour intégrer un fichier JavaScript dans un document HTML on utilisera l'élément <script> et l'attribut src. Exemple :

<script src="panier-achats.js"></script>

Ou placer la balise <script> ?

  • On peut placer la balise <script> dans l'entête du document <head> ou dans le corps <body>.

    La meilleure pratique consiste à placer ses scripts à la fin du document juste avant la balise de fermeture du corps du document </body>.

<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Panier d'achats</title>
  </head>
  <body>
    <h1>Votre panier d'acahts</h1>
    Cette semaine promotion sur les loutres blanches du Gabon

    <!-- Inclusion des scipts -->  
    <script src="panier-achats.js"></script>
  </body>
</html>

Pourquoi à la fin ?

  • Code interprété et éléments résolus un par un. Un élément <script> va charger tout son contenu avant de passer à l’élément suivant.

    L’inclusion des scripts à la fin du document va donc permettre :

  • D'afficher rapidement quelque chose à l’écran. Le navigateur ne doit pas attendre le chargement des scripts avant d'interpréter les autres éléments HTML.
  • De manipuler les éléments HTML de la page, car tous créés avant l'importation du script

La directive use strict

  • En ajoutant la directive "use strict" au début d'un script, on demande au navigateur de respecter la norme ECMAScript et d'ainsi arrêter le script à la moindre erreur.

  • On peut placer au début d'un script ou début de fonction

<script>
    "use strict";
    msg = "Bonjour";
    alert(msg);
</script>

💡 Appliquer "use strict" à tous vos scripts afin d'éviter les auto-correction des navigateurs. Il vaut mieux stopper un script erroné le plus rapidement possible.

function maFonction() {
    "use strict";
    msg = "Bonjour";
}

Conventions de nommage

 

  • Il existe également des outils permettant d'analyser votre code comme ESLint & JSLint.

💡 Le cours est basé sur les conventions de Google

Pour ce cours...

  • Noms de variables et de fonctions :
    • Utiliser le camelCase pour nommer les variables, fonctions et méthodes. Par exemple : userName, calculateTotal().
    • Les constantes en dehors des classes MAJUSCULE avec un "_" en séparation. Par exemple : MAX_USERS, API_ENDPOINT.
  • Noms de classes :
    • Utiliser le PascalCase pour les classes et les types. Par exemple : UserController, ProductModel.
  • Noms des propriétés et méthodes d’objets :
    • Suivre aussi le camelCase pour les propriétés et méthodes d’objets. Par exemple : user.address, order.calculateTotal().
  • Noms de fichiers :
    • Les fichiers JavaScript doivent être nommés en lowerCamelCase. Par exemple : userProfile.js, orderController.js.

Nommer les variables d'éléments HTML

  • Utiliser un préfixe descriptif :

    • Utilisez un préfixe pour indiquer clairement qu'il s'agit d'un élément HTML. Par exemple, vous pouvez utiliser des préfixes comme btn pour un bouton (button), input pour un champ de saisie, div pour un div, ou list pour une liste (ul ou ol).

const btnSubmit = document.getElementById('submit');
const divContainer = document.querySelector('.container');

Nommer les variables d'éléments HTML

  • camelCase pour la lisibilité :

    • Suivez la convention camelCase pour nommer vos variables. Cette convention est cohérente avec les autres noms de variables dans JavaScript.

const inputUsername = document.querySelector('#username');
const listItems = document.querySelectorAll('.items');

Nommer les variables d'éléments HTML

  • Inclure le type d'élément dans le nom :

    • Lorsque cela est pertinent, incluez le type d'élément HTML dans le nom de la variable. Cela aide à identifier rapidement le type d'élément manipulé sans avoir à consulter le code HTML.

const inputEmail = document.querySelector('#email');
const divMainContent = document.getElementById('main-content');

Nommer les variables d'éléments HTML

  • Précision et clarté :

    • Assurez-vous que le nom de la variable décrit clairement son rôle ou sa fonction dans le code. Évitez les abréviations non évidentes ou les noms trop génériques.

const headerTitle = document.querySelector('h1');
const navMenu = document.querySelector('.navigation-menu');

En résumé

  • Nommez vos variables représentant des éléments HTML...
    • ​de manière descriptive et cohérente
    • avec les conventions camelCase
    • en indiquant le type d'élément
  • ​Code propre, compréhensible, et facile à maintenir