Améliorer vos compétences web

a. Balises

Vous trouverez dans cette partie un rappel succinct concernant la structure d’une page HTML. Si vous pratiquez régulièrement HTML/CSS alors vous pouvez sauter cette partie. Vous obtiendrez tous les détails concernant les balises et les attributs disponibles auprès du W3C (https://html.spec.whatwg.org/multipage/). Il existe plusieurs versions pour une page HTML ; la dernière version est la 5. Il existe deux familles pour les pages HTML : la famille SGML et la famille XML, les deux étant supportées par les navigateurs récents. La famille XML est plus stricte que la famille SGML mais les navigateurs font peu la différence car ils ont été conçus pour supporter un certain nombre d’erreurs.

Une page HTML 5 est composée de balises. Une balise a la possibilité d’avoir un contenu si sa nature l’autorise. La somme des relations conteneur/contenus forme la structure d’une page HTML. Tout en haut de cette structure il y a la balise html qui est donc unique et appelée balise racine ou élément racine. La syntaxe d’une balise est faite par une partie ouvrante via des chevrons et éventuellement si elle possède un contenu par une partie fermante, elle-même construite par des chevrons.

Exemple

<b>Hello</b> 

La balise b possède le texte Hello, elle sert à mettre du gras dans le texte. Elle a une partie ouvrante <b> et une partie fermante </b>. Ce qui est entre les deux parties est le champ d’application et le contenu.

La balise peut, dans sa partie ouvrante, avoir un ou plusieurs attributs. Un attribut est généralement une paire clé unique/valeur séparée par =. La valeur peut être placée entre guillemets ou bien entre apostrophes. Il existe plus rarement une variante où seul un nom est présent et correspond plus à une directive. 

Exemple

<img src="images/hello.jpg"> 

La balise img n’a pas de contenu, elle possède un attribut src désignant la localisation d’un fichier image relatif à la page courante.

Dans la forme XML, nous devons écrire :

<img src="images/hello.jpg"/> 

Ce qui est équivalent à :

<img src="images/hello.jpg"></img>...

a. Rôle

L’objet window a la particularité d’avoir ses propriétés et ses méthodes disponibles dans l’espace de noms global. Son usage est courant et vous avez déjà pu l’employer sans le savoir, par exemple en utilisant la méthode alert pour afficher une boîte de dialogue avec un message.

Exemple

alert( "bonjour" ); 
 
window.alert( "bonjour" ); // équivalent 

Ces deux invocations sont équivalentes. À noter qu’en pratique seule la première forme sera employée pour une question d’efficacité.

Il existe de nombreuses propriétés et méthodes dans l’objet window. Nous allons présenter ci-dessous celles d’usage courant.

Dans la même lignée que la méthode alert, la méthode confirm sert à obtenir la confirmation auprès d’un utilisateur par une boîte de dialogue modale (donc bloquante tant que l’utilisateur n’a pas interagi). La méthode prompt attend la saisie d’une valeur et null est retourné en cas de refus par l’utilisateur.

Exemple

if (confirm("Voulez-vous commencer le jeu ?")) {  
    const nombreMagique = Math.round(Math.random() * 10);   
    let coup = 0;   
    while (true) {  
        coup++;   
        const val = parseInt( prompt("Votre chiffre ?") );   
        if (val) {  
            if (val == nombreMagique) {  
                alert("Félicitations, vous avez mis " + coup + " 
coup(s)");  
                break;  
            } else if (val > nombreMagique) {  
                alert("Il est plus petit");  
          ...

a. Propriétés et méthodes

Nous avons déjà utilisé la méthode write pour l’écriture d’une ligne. Il existe également writeln qui ajoute un retour à la ligne. Ces méthodes ne sont pas dynamiques, au sens où elles ne peuvent fonctionner qu’une fois et lors de l’interprétation de la balise script. Elles sont d’usage plutôt rare hormis pour des bugs, tests et cas particuliers.

Comme nous l’avons vu en introduction, un document HTML est composé de balises. Le navigateur dispose en interne d’un parseur qui va convertir ces balises en une hiérarchie de nœuds (objets) correspondant à l’arborescence de vos balises. Cette organisation est représentée grâce à un standard défini par le W3C que l’on appelle DOM (Document Object Model). Ces nœuds représentent la structure de votre document qui devient accessible en JavaScript. Il est donc possible de modifier le document en modifiant les nœuds qui le composent. Un nœud qui peut avoir un contenu et/ou des attributs est un élément (représenté par une balise dans le code HTML).

Concernant les nœuds, nous disposons des propriétés JavaScript principales suivantes :

Parmi les méthodes, nous trouvons principalement :

a. Première étape

Cette étude de cas consiste à pouvoir ajouter et supprimer un ensemble de notes dans une page web. Nous essayons de suivre une architecture MVC (Modèle Vue Contrôleur) afin de pouvoir éventuellement changer la présentation au choix de l’utilisateur. Cette architecture consiste à bien séparer chaque composante de l’application. Ainsi, le Modèle de données stockera toutes les notes de l’utilisateur, alors que la Vue (présentation) ira parcourir ce modèle de données pour effectuer l’affichage.

Lorsque vous commencez un projet, vous pouvez ne vous focaliser que sur le squelette de l’application. Nous l’avons vu dans le chapitre Adopter les bonnes pratiques, c’est l’architecture en module (par fonction anonyme ou module ES) qu’il faut favoriser. Nous avons donc comme point de départ quelque chose de ce style :

     // notes.js  
export const notes = {  
    ajouterItem :   
        function() {  
  
        },  
    supprimerItem :   
        function(index) {  
   
        }  
}; 

Ce module ES de base offre donc deux accès par les méthodes ajouterItem...