JavaScript côté navigateur

Voir la vidéo
Description Sommaire

Nous allons maintenant voir comment écrire du JavaScript côté navigateur. Le navigateur ne change pas notre manière d'écrire le code, mais donne accès à de nouveaux objets qui permettent d'intéragir avec l'utilisateur ou le navigateur.

Plusieurs navigateurs, plusieurs versions

Le principal problème que l'on va rencontrer sur les navigateurs est le problème de compatibilité. En effet, il existe aujourd'hui plusieurs navigateurs qui n'utilisent pas les mêmes moteurs et qui disposent parfois de différences. Même si les différences ne sont pas aussi marquées que par le passé il faudra faire attention lorsque l'on utilise certaines fonctionnalités en regardant si elle est supportée par les navigateurs que l'on cible. Pour cela vous pouvez utiliser le site caniuse.

On fera surtout attention aux navigateurs mobiles qui peuvent parfois être sur des anciennes versions sans la possibilité de mettre à jour (Android et iOS ont tendance à ne plus mettre à jour leurs vieux périphériques).

L'objet window

Sur le navigateur l'objet global est l'objet window. Cet objet contient un ensemble de méthodes et de propriétés utiles. D'ailleurs lorsque l'on utilise une méthode comme setTimeout() en réalité cela revient à écrire window.setTimeout(). Ainsi, toutes les propriétés définies sur cet objet deviennent accessibles comme des variables globales.

window.a = 3
console.log(a)

Cette approche peut permettre de rendre une variable accessible partout dans notre code mais on aura aujourd'hui plutôt tendance à utiliser le système de module que l'on verra plus tard.

alert, prompt, confirm

Côté navigateur il y a 3 méthodes qui permettent d'afficher des fenêtres d'alerte à l'utilisateur.

window.alert('Ooops') // Affiche une alerte 
const a = window.confirm('Sûr de sûr ?') // Affiche une fenêtre de confirmation et renvoie un booleen
const nom = window.prompt('Entrez votre nom') // Affiche un champ qui permet de rentrer une valeur

Ces fonctions ne seront pas forcément trop utilisées dans les cas réels car on les remplacera souvent par des formulaires directement placés sur la page.

Publié
Technologies utilisées
Auteur :
Grafikart
Partager