Programmation Client II

DOM & mithril

DOM

Définition

Le Document Object Model (DOM) est une interface de programmation pour les documents HTML et XML. Il fournit une page dont des programmes peuvent modifier la structure, son style et son contenu. Cette représentation du document permet de le voir comme un groupe structuré de nœuds et d'objets possédant différentes propriétés et méthodes. Fondamentalement, il relie les pages Web aux scripts ou langages de programmation.

https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Introduction

Définition mathématique

$ API(\text{page Web}) = DOM + JS $

Dom dans différent language de programmation

# Exemple d'utilisation du DOM en Python
import xml.dom.minidom as m
doc = m.parse("C:\\Projects\\Py\\chap1.xml");
doc.nodeName # Propriété DOM de l'objet document;
p_list = doc.getElementsByTagName("para");

La perspective amyot

• Le "dom" est l'api pour travailler avec une page HTML
• Le "dom" représente une page web comme un arbre.

API important pour prendre des elements..

1. document.getElementById("demo"), selectionne un element par id

2. document.querySelector("#demo"), selectionne un element par selecteur css

3. document.querySelectorAll(".demo"), selectionne tout les element par selecteur css

Créer un element...

const container = document.getElementById("container");
const newElement = document.createElement("h3"); // On créer un element, 
                                                 // mais il n'est pas encore attaché
                                                 // à l'arbre
newElement.innerText = "hello world from javascript";
container.appendChild(newElement);

Résultat...

C'est difficile...

Mithril

Idée de base

• Représenter le code html (aka dom) par des "structure de données".

<ul>
    <li>un chien<li>
    <li>un <a href="https://example.com/chat">chat</a>
</ul>

import m from "https://esm.sh/mithril@2.2.2"

let html = m("ul", [
   m("li", "un chien"),
   m("li", ["un ", m("a", {href: "https://example.com/chat"}, "chat")]) 

])

Un vnode

Un vnode est la représentation d'une balise pour mithril

Exemples

import m from "https://esm.sh/mithril@2.2.2"

m("a"); 
// <a></a>

m("a", {href: "https://example.com"}); 
// <a href="https://example.com"></a>


m("a", {href: "https://example.com"}, "Bonjour monde"); 
// <a href="https://example.com">Bonjour monde</a>

m("a", {href: "https://example.com"}, m("span", "Bonjour monde"));
// <a href="https://example.com"><span>Bonjour monde</span></a>

m("a", {href: "https://example.com"}, [m("span", "Bonjour "), "le monde"]);
// <a href="https://example.com"><span>Bonjour </span>le monde</a>

Renderer un vnode

import m from "https://esm.sh/mithril@2.2.2"
let node = m("a", {href: "https://example.com"}, "hello world")
let root = document.getElementById("example-1")
m.render(root, node)

Créer une "vue" todo app...

import m from "https://esm.sh/mithril@2.2.2"

let tasks = [
    {name: "chips", status: "undone"},
    {name: "crottes de fromage", status: "done"},
    {name: "Bière (prestige)", status: "undone"},
]

function createTaskUI(task){
    let isChecked = task.status === 'done';
    return m('li', 
             m('input', 
               {type: 'checkbox', value: task.name, checked: isChecked}),
             task.name)
}

function createIndividualTaskUI(tasks){
    let ret = [];
    for(const task of tasks){
        ret.push(createTaskUI(task));
    }
    return ret;
}

function countNumberOfDoneTasks(tasks){
    let ret = 0;
    for(const task of tasks){
        if(task.status === "done"){
            ret ++;
        }
    }
    return ret;
}

function crateTitle(tasks){
    return m("span", ["Todo (", countNumberOfDoneTasks(tasks), "/", tasks.length, ")"])
}

function createTodoListUI(tasks){
    return m("div", [
        m("h5", crateTitle(tasks)),
        m("ul", createIndividualTaskUI(tasks))
    ]);
}

let root = document.getElementById("example-2")
m.render(root, createTodoListUI(tasks))

Créer une "vue" todo app (résultat)

Mithril Suite

• https://didier-ahuntsic.gitlab.io/cours-420-298-ah/ Cours 012

Exercices

Avec mithril, créer une page web comme...

• un
• deux
• 1. uno
  2. dos
  3. tres

X: Y: