Arts numériques

Le DOM est une sorte d’arbre, dont les deux troncs principaux sont head et body, et qui se divise ensuite en branche pour afficher tous vos div, li et autres p.

C’est sur base de ce dom interprété par le navigateur que vous pourrez ensuite appliquer vos styles css et agir avec javascript. Ceci est important àretenir : si votre code html est mal analysé par le navigateur àcause d’erreurs de syntaxe, certaines parties de votre page ne pourrons pas être atteintes. Donc pour un codage javascript efficace, il est important de s’appuyer sur un codage html correct.

Une fois stocké dans la mémoire de l’ordinateur, le dom peut être manipulé : on peut lui ajouter des branches, cloner des branches, modifier des éléments, le texte contenu dans ces éléments, puisqu’on ne manipule pas un fichier physique (le html d’origine, jeté après l’analyse du dom), mais sa représentation sous forme de structure.

Le DOM et les navigateurs

La difficulté jusqu’il y a quelques années était que la syntaxe javascript pour agir sur le dom était (et reste) différente suivant les navigateurs. Làencore, le W3C tente de jouer son rôle de standardisation, mais comme il ne fait que recommander, pas imposer, la standardisation du code pour interfacer avec le dom reste différente dans les navigateurs.

"Use strict"

On a aujourd’hui une plus grande standardisation du code, qui a amené àla création du mode "strict" de javascript, qui est une façon de spécifier que l’on va utiliser un code contemporain, plus strict, moins tolérant avec les erreurs. Cette déclaration a été introduite avec la version 5 de ECMAScript (le nom technique de javascript).
Typiquement, les variables doivent être déclarées avant utilisation :

x=15;

n’est pas toléré

var x=15;

ou mieux

let x=15;

devra être employé.

Fenêtre, document et navigateur

Javascript a pour but d’interagir avec le navigateur qui l’exécute. Il peut atteindre 3 grandes entités de celui-ci, considéré comme des objets.

navigator est le terme permettant d’atteindre les propriétés du navigateur. On ne peut que lire les informations données par le navigateur, pas les changer.
Typiquement, on peut demander au navigateur
– son nom de code (appCodeName) ou son nom (appName)
– si il est connecté àinternet ou pas
– si les cookies sont acceptés
– si javascript est actif ou si le navigateur l’interdit
– la langue et la localisation du navigateur

Dès qu’une page html est chargée et analysée, elle devient un objet nommé document. Cet objet contient toute la structure et les contenus de la pages sous la forme de nÅ“uds contenant des attributs ou d’autres objets. C’est làqu’on va pouvoir manipuler les éléments d’un page.
– lister les éléments (tags) de la page
– accéder àleur texte et àleurs attributs
– créer des éléments dans la page
– les supprimer
– les déplacer
et beaucoup d’autres choses.

Un objet window est créé pour chaque fenêtre créée par le navigateur. On peut accéder aux informations d’une fenêtre et aussi changer certains de ses paramètres :
– l’historique des pages qui y ont été vues
– sa taille en largeur et hauteur
– sa position dans l’écran de l’ordinateur
– le nombre de pixels scrollés sur l’axe horizontal et vertical
et d’autres choses encore.