Aller au contenu

Javascript - Les bases

Développé initialement pour ajouter un peu de dynamisme aux pages web, Javascript est devenu aujourd'hui un incontournable du développement web. Il peut être utilisé à la fois du côté client (depuis un navigateur) ou bien du côté serveur. C'est un langage de script qui n'a pas besoin d'être compilé, il est exécuté directement par le navigateur. Les scripts (nom donné aux "programmes" javascript) peuvent être écris directement dans un fichier HTML ou dans un fichier portant l'extension js.

Où ajouter nos scripts

Dans un fichier HTML

On peut ajouter un script un peu n'importe où dans un fichier html avec la balise script: dans la balise head, dans le body, etc. C'est une question de préférence. Personnellement j'ajoute mes scripts à l'intérieur de la balise head. La syntaxe est la suivante : 

<script type="text/javascript">
    alert('Hello, world!');
</script>

Dans cette exemple, une message s'affichera à l'écran avec le texte Hello, world!. L'attribut type dans la balise n'est plus vraiment nécessaire aujourd'hui, on peut l'omettre sans problème.

Idéalement, on va réserver l'ajout de script directement dans un fichier html à des utilisations simples et brèves. La plupart du temps les scripts sont contenu dans des fichiers externes.

Dans un fichier externe

Un peu comme avec le css, on peut écrire nos scripts dans un ou des fichiers externes et les appeler depuis nos pages html. Pour ce faire on va aussi utiliser la balise script mais en ajoutant l'attribut src.

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

<!-- Pour ajouter plus d'un fichier, on répète avec les autres fichiers -->
<script defer src="deuxieme_script.js"></script>

La maintenance et la clarté du code est une raison d'extraire les scripts dans des fichiers externe. Mais l'avantage majeure est que le navigateur va télécharger les fichiers en cache. Ensuite si une autre page html fait référence à un des fichiers téléchargés, il sera lu depuis le cache et non pas téléchargé à nouveau, ce qui réduit le trafic et permet à la page de s'afficher plus rapidement.

Utilisation de l'attribut defer et async de la balise script

Par défaut, quand on charge un script depuis un fichier externe, il sera exécuté immédiatement. Ça peut poser un problème si notre script interagit avec des éléments du DOM car ceux-ci peuvent ne pas être encore "chargés" (accessible) lors de exécution du script. Pour palier à ce problème on peut soit charger nos scripts à la toute fin de notre fichier HTML ou bien plus utiliser l'attribut defer ou async de la balise script.

  • defer sera utilisé quand on veut manipuler des éléments de la page et être sûr qu'ils sont chargés. Le script ne bloquera pas l'affichage de la page et sera exécuté une fois celle-ci chargé en entier.
  • async sera utilisé pour un script qui est totalement indépendant de la page html. L'exécution ne bloquera pas l'affichage de la page et sera lancé une fois le script terminé.

Attention par contre car en utilisant ces deux attributs, la page peut terminer de se charger avant que les scripts ne soient exécutés. Ça peut créer de petits problème visuel selon la nature des scripts.

Exemple

<script defer src="mes_scripts.js"></script>
<script async src="mon_script_async.js"></script>

Source : https://javascript.info/script-async-defer

Hello World

Et oui, on n'y échappera pas, on va faire un premier exemple avec un bon vieux Hello World.

  • Dans le répertoire du cours, créez vous un sous-dossier nommé helloworld_js.
  • Dans ce sous-répertoire créez un fichier nommé index.html et ajoutez-y les balises de base d'une page html.
  • On va utiliser la fonction alert() pour afficher un message de votre choix. (Et non vous n'êtes pas obligé d'afficher Hello World).
  • Ajoutez à l'aide de la balise script le code javascript pour faire afficher votre message. Essayer d'inclure la balise à différent endroit du fichier.

Bon maintenant on va refaire la même chose mais depuis un fichier externe.

  • Toujours dans le répertoire exercices_js, créez un nouveau sous-répertoire nommé js.
  • Dans ce sous-répertoire, créez un fichier nommé helloworld.js.
  • Ajouter le code dans ce nouveau fichier. (Uniquement la ligne alert('Mon message'), pas la balise script).
  • Faites référence à ce fichier en ajoutant une deuxième balise script.
  • Rechargez la page pour voir le résultat.

Vous devriez avoir comme résultat deux messages qui s'affichent à l'écran, un depuis le fichier html et un autre depuis le fichier js externe. On va profiter du moment pour afficher un troisième message, mais cette fois dans la console du navigateur avec la fonction console.log(). Chaque navigateur nous donne accès à une console qui affiche différents messages (d'avertissements, d'erreurs, etc.). Les messages affichés dans la console ne sont pas vu par l'utilisateur qui consulte la page web. Il faut ouvrir la console pour les visualiser. La console est un outil très utilisé pour suivre vos scripts et les "débugger". Nous allons en reparler plus longuement mais pour l'instant nous allons nous en servir pour afficher un petit message de bienvenue.

  • Ouvrez la console en faisant un clique droit dans la page, ensuite inspecter dans le menu contextuel et l'onglet console.
  • À l'endroit que vous voulez, ajouter un message dans la console avec la fonction console.log('Mon message');
  • Rechargez la page pour voir le résultat.

Structure du code

Terminaison d'une ligne de code

Chaque ligne de code doit se terminer par un point-virgule ( ; )! En fait ce n'est pas entièrement vrai. Javascript est un langage assez permissif, et on peut ne pas en ajouter la plupart du temps sans créer d'erreurs.

// Ici les deux messages vont s'afficher même s'il n'y a pas de point-virgule
alert('Bonjour')
alert('tout le monde')

Par contre, c'est une bonne pratique de toujours en ajouter, et je veux que vous le fassiez toujours.

Commentaires

Pour ajouter un commentaire sur une ligne, on utilise //. Pour les blocs de commentaires, on va plutôt utiliser / /

// Commentaire sur une ligne
alert('Coucou!!');
/*
    Commentaire sur
    plusieurs lignes
*/
console.log('Hola');

Variables

Déclaration et assignation

En javascript les variables n'ont pas de type. Pour en déclarer un, il suffit d'utiliser le mot let ou var suivi du nom de la variable. Nous verrons la différence entre let et var plus loin, pour l'instant on va toujours utiliser let. Ensuite pour assigner une valeur à notre variable on va utiliser le symbole = suivi de la valeur. On peut aussi faire les deux étapes sur la même ligne.

// Déclaration d'une variable
let message;
// Assignation de la variable
message = 'Bonjour tout le monde';
// La même chose sur une ligne
let message = 'Bonjour tout le monde';

alert (message);

Attention, déclarer une variable plus d'une fois va provoquer une erreur.

let message = 'Bonjour';
let message = 'Au revoir'; // On va avoir une erreur de syntaxe ici

Les variables n'ayant pas de type, on peut passer plusieurs type de valeur à une même variable. Par contre ce n'est pas une bonne pratique et on devrait l'éviter.

let message = 'Allo';
alert(message) // Va afficher Allo
message = 5;
alert(message * 2) // Va afficher 10;

Constantes

Une constante est une variable dont la valeur ne peut être changé après son assignation. On utilise le mot const pour la déclarer.

const COULEUR_ORANGE = '#ffaa00';

COULEUR_ORANGE = '#ffffff'; // Va provoquer une erreur

Bien nommer ses variables

Un nom de variable peut être composé de lettre, chiffre et des caractères $ et _. Le premier caractère ne doit pas être un chiffre. Si le nom de la variable comporte plus d'un mot, on va utiliser la notation camelCase : on supprime les espaces, le premier mot en minuscule mais les suivants commenceront par une lettre majuscule. Attention, le nom de variable est aussi sensible à la case.

// Exemple de nom en camelCase
let nomEnCamelCase = 'Hallo!';
// Les deux variables sont différentes
let message = 'Message 1';
let messAge = 'Message 2';

Pour les constantes, la norme veux qu'on mettre le nom entièrement en majuscule avec les différents mots séparés par un _ quand la valeur est "hardcodé" (attribué dans le code lors de la déclaration). Sinon on utilise le camelCase comme avec les variables.

// La valeur est ici hardcodé
const COULEUR_ORANGE = '#ffaa00';
// On assigne la constant avec le résultat de la fonction calculAge()
const monAge = calculAge(dateDeNaissance);

En règle générale on doit éviter les noms de variable trop court ou non significatif.

// Le nom ne veut rien dire
let a = 'Mon titre';
// C'est beaucoup plus significatif avec ce nom
let texteTitre = 'Mon titre'

Exercice

En reprenant ce que vous avez fait dans la section Hello World, modifiez votre code pour utiliser des variables dans les fonctions alert() et console.log().

Interaction

Il y a plusieurs fonctions natives en javascript pour interagir avec le visiteur de notre site. Nous avons déjà vu alert() qui affiche un message à l'écran. On va en voir deux autres :

  • prompt(titre, valeur par défaut) : Demande à l'usager de saisir une valeur.
  • confirm() : Affiche une fenêtre avec un texte et deux boutons, Ok et Cancel.

Alert

Comme nous l'avons vu plus haut, une façon simple d'afficher un message à l'usager est d'utiliser la commande alert().

Syntaxe

alert('Mon message');

Exemple

alert('Bonjour tout le monde!!');

// Affichera Bonjour Mathieu
let nom = 'Mathieu';
alert('Bonjour ' + nom);

Prompt

Avec prompt() on demande à l'usager de saisir une valeur qu'on assignera à une variable.

Syntaxe

prompt("Message à afficher", "Valeur optionnelle par défaut");

Exemple

let message = 'Veuillez entrer votre nom';
// On affiche le message et récupère la valeur dans la variable nom
let nom = prompt(message);
// La valeur affiché sera ce qui a été saisie par l'usager
alert(nom);

// On peut aussi déclarer une valeur par défaut qui sera afficher dans la case de saisie.
// Ici Mathieu sera inscrit dans la case à l'affichage
let nomAvecDefaut = prompt(message, 'Mathieu');

Confirm

On peut aussi poser une question à l'usager et récupérer une valeur True ou False avec la commande confirm().

Syntaxe

confirm("Texte à afficher");

Exemple

let resultat = confirm("Voulez-vous continuer?");
// resultat prendra la valeur True ou False selon le choix de l'usager
if (resultat) {
    alert('Ok on continue.');
} else {
    alert('On arrête déjà.');
}

Exercice

  • Demandez le nom de l'usager et affichez en résultat le nom saisie suivi de ", bienvenue sur mon site!".
  • Posez la question suivante à l'usager : "Est-ce que vous aimez le Javascript?". Afficher le message "Super!" si la réponse est affirmative et "J'espère que ça va changer." si c'est négatif.