Developpement Web - CM 4

Inès de Courchelle

1 / 48

Le DOMDéfinitionDocument Object Model
Interface de programmation pour les documents HTML, XML, SVG
Ce n'est pas un langage
Utilisation à travers HTML et Javascript
ObjectifsFournir une représentation structurée du document sous forme d'un arbre
Définir la façon dont la structure peut être manipulée (style, contenu ...)
Représenter le document comme un ensemble de nœuds et d'objets possédant des propriétés et des méthodes
2 / 48

Illustration

monFichier.html

3 / 48

Où coder ?

Toujours pareil !

La partie HTML

Dans le fichier html

La partie JS

Solution 1 : Dans le fichier html entre les balises
Solution 2 : Dans un fichier séparé avec l'extension .js

Ne pas oublier

<script type="text/javascript" src="mesFonctions.js"></script>

4 / 48

Afficher une chaîne de caractéres

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Cours N°4 sur le DOM</title>
        <!-- le lien du ou des CSS-->
        <link rel="stylesheet" type="text/css" href="monStyle.css" />
        <!-- le lien du JS Pour que le contenu s'affiche après le titre-->
        <script type="text/javascript" src="mesFonctions.js"></script>
    </head>
    <body>
        <h1> C'est le cours sur le DOM</h1>
        <p> COYG </p>
        <img src="https://media.tenor.com/4ekNInv_6PIAAAAC/lelly-smith-arsenal-wfc.gif" width="300">
        <button type="button" onclick="myFunction()">Changer Texte </button>
        <p id="demo">Phil Neville</p>
    </body>
</html>

JS

function myFunction() {
    document.getElementById("demo").innerHTML = "Sarina Wiegman";
}

5 / 48

Afficher une chaîne de caractéres

VAR

6 / 48

Ajouter une chaîne de caractéres

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Cours N°4 sur le DOM</title>
        <!-- le lien du ou des CSS-->
        <link rel="stylesheet" type="text/css" href="monStyle.css" />
        <!-- le lien du JS Pour que le contenu s'affiche après le titre-->
        <script type="text/javascript" src="mesFonctions.js"></script>
    </head>
    <body>
        <h1> C'est le cours sur le DOM</h1>
        <p> COYG </p>
        <img src="https://media.tenor.com/4ekNInv_6PIAAAAC/lelly-smith-arsenal-wfc.gif" width="300">
        <button type="button" onclick="myFunction()">Changer Texte </button>
        <p id="demo">Phil Neville</p>
    </body>
</html>

JS

function myFunction() {
    document.getElementById("demo").innerHTML += "Sarina Wiegman ";
}

7 / 48

Ajouter une chaîne de caractéres

VAR

8 / 48

Modifier une chaîne de caractéres

HTML

Toujours le même

JS

function myFunction() {
    if (document.getElementById("demo").innerHTML=="Phil Neville")
        document.getElementById("demo").innerHTML = "Sarina Wiegman";
    else
        document.getElementById("demo").innerHTML = "Phil Neville";
}

9 / 48

Modifier une chaîne de caractéres

VAR

10 / 48

Modifier une chaîne de caratéres

Comment j'ai trouvé la fonction ?

W3school

Et après ...

c'est de l'algo

S'il y a écrit "Phil Neville" Alors j'écris "Sarina Wiegman"
Sinon on écrit "Phil Neville"

11 / 48

Changer une couleur

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Cours N°4 sur le DOM</title>
        <!-- le lien du ou des CSS-->
        <link rel="stylesheet" type="text/css" href="monStyle.css" />
        <!-- le lien du JS Pour que le contenu s'affiche après le titre-->
        <script type="text/javascript" src="mesFonctions.js"></script>
    </head>
    <body>
        <h1> C'est le cours sur le DOM</h1>
        <p> COYG </p>
        <img src="img/jordy.gif" width="300">
       <button type="button" onclick="color()">Changer la couleur </button>
        <p id="demo">UTV</p>
    </body>
</html>

JS

function color() {
    let x = document.getElementById("demo");
    x.style.fontSize = "25px";
    x.style.color = "purple";
}

function color() {
    document.getElementById("demo").style.fontSize = "25px";
    document.getElementById("demo").style.color = "purple";
}

12 / 48

Changer une couleur

VAR

13 / 48

Changer du style

HTML

<!doctype html>
<html>
<head>
  <title>Cours N°4 sur le DOM</title>
        <!-- le lien du ou des CSS-->
        <link rel="stylesheet" type="text/css" href="monStyle.css" />
        <!-- le lien du JS Pour que le contenu s'affiche après le titre-->
        <script type="text/javascript" src="mesFonctions.js"></script>
</head>
<body>
    <h1>Changer de style</h1>
    <p class="demo" id="demo">COYG  </p>
    <p class="change" id="change">UTV  </p>
    <button onclick="myFunction()">Come On</button>
</body>
</html>

JS

function myFunction() {
    document.getElementsByTagName("p")[0].setAttribute("class", "change");
}

14 / 48

Changer de style

VAR

15 / 48

Récupérer une saisie clavier

HTML

<!doctype html>
<html>
<head>
  <title>Cours N°4 sur le DOM</title>
        <!-- le lien du ou des CSS-->
        <link rel="stylesheet" type="text/css" href="monStyle.css" />
        <!-- le lien du JS Pour que le contenu s'affiche après le titre-->
        <script type="text/javascript" src="mesFonctions.js"></script>
</head>
<body>
    <img src="img/carli.gif" >
    <input type="text" onkeypress="displayResult(event)">
</body>
</html>

JS

function displayResult(event) {
        if(event.which){
            keychar=String.fromCharCode( event.which );
            alert("Touche " + keychar + " enfoncée.");
        }
}

16 / 48

Récupérer une saisie clavier

VAR

17 / 48

Afficher une image

VAR

18 / 48

Création d'une fenêtre

HTML

<!doctype html>
<html>
<head>
  <title>Cours N°4 sur le DOM</title>
        <!-- le lien du ou des CSS-->
        <link rel="stylesheet" type="text/css" href="monStyle.css" />
        <!-- le lien du JS Pour que le contenu s'affiche après le titre-->
        <script type="text/javascript" src="mesFonctions.js"></script>
</head>
<body>
    <img src="img/jordan-nobbs-arsenal.gif" >
    <p id="w"></p>
    <p id="h"></p>
    <p> Ouvrir une nouvelle fenêtre</p>
    <button id="button" onclick="myFunction()"> OUVRIR UNE NOUVELLE PAGE </button>
</body>
</html>

19 / 48

Création d'une fenêtre

JS

    var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    document.getElementById("w").innerHTML = w;
    document.getElementById("h").innerHTML = h;
    function myFunction(){
        var myWindow = window.open("", "Hermione", "width=500,height=500");
        myWindow.document.write("Je l'ai lu dans l'histoire de Poudlard");
        myWindow.document.write("<img src='img/hermione.jpg'>");
    }

20 / 48

Création d'une fenêtre

VAR

21 / 48

Afficher une image

HTML

<!doctype html>
<html>
<head>
        <title>Cours N°4 sur le DOM</title>
        <!-- le lien du ou des CSS-->
        <link rel="stylesheet" type="text/css" href="monStyle.css" />
        <!-- le lien du JS Pour que le contenu s'affiche après le titre-->
        <script type="text/javascript" src="mesFonctions.js"></script>
</head>
<body>
    <h1 style="color:powderblue;">SUPER</h1>
    <button type="button" onclick="myFunction()">BUT</button>
    <p id="demo"></p>
    <p id="p1"> </p>
    <img id="champion" src="">
</body>
</html>

JS

function myFunction(){
    document.getElementById("demo").innerHTML ="Thierry Henry";
    document.getElementsByTagName("h1")[0].setAttribute("style", "color: red;");
    document.getElementById("champion").setAttribute("src", "img/thierry-henry.gif");
}

22 / 48

Afficher une image

VAR

23 / 48

Les noeuds - enfants - parents

Définition

24 / 48

Notre exemple

HTML

<!doctype html>
<html>
<head>
  <title>Cours N°4 sur le DOM</title>
        <!-- le lien du ou des CSS-->
        <link rel="stylesheet" type="text/css" href="monStyle.css" />
        <!-- le lien du JS Pour que le contenu s'affiche après le titre-->
        <script type="text/javascript" src="mesFonctions.js"></script>
</head>
<body>
    <h1>WSL</h1>
    <select id="mySelect" size="4">
        <option>Manchester United</option>
        <option>Chelsea</option>
        <option>Manchester City</option>
        <option>Arsenal</option>
        <option>Aston Villa</option>
    </select>
    <p id="taille"> </p>
    <p id="numero1"> </p>
    <p id="dernier"> </p>
    <button onclick="countChild()">calculer</button>
    <p>Voulez vous supprimer le premier élèment ?</p>
    <button onclick="killChild()">OUIIIII</button>
    <p>Element à rajouter : <input type="text" id="add" name="add"></p>
    <button onclick="addChild()">valider</button>
    <p>Voulez vous coloriez le premier enfant ?<p>
    <button onclick="color()">YES</button>
</body>
</html>

25 / 48

Les noeuds - enfants - parents

VAR

26 / 48

Notre exemple

Le schema

27 / 48

Notre exemple

C'est un arbre

28 / 48

Notre exemple

C'est un arbre

29 / 48

Notre exemple

C'est un arbre

30 / 48

Notre exemple

C'est un arbre

31 / 48

Notre exemple

C'est un arbre

32 / 48

Les noeuds - enfants - parents

Compter les noeuds dans le select

function countChild() {
    let taille = document.getElementById("mySelect").children.length;
    let child = document.getElementById("mySelect").children;
    document.getElementById("taille").innerHTML = taille;
}

33 / 48

Les noeuds - enfants - parents

Compter les noeuds dans le select

34 / 48

Les noeuds - enfants - parents

Compter les noeuds dans le select

35 / 48

Les noeuds - enfants - parents

Compter les noeuds dans le select

36 / 48

Les noeuds - enfants - parents

Supprimer un enfant

function killChild() {
    let list = document.getElementById("mySelect");
    list.removeChild(list.firstElementChild);
}

37 / 48

Les noeuds - enfants - parents

Supprimer un enfant

38 / 48

Les noeuds - enfants - parents

Supprimer un enfant

39 / 48

Les noeuds - enfants - parents

Ajouter un enfant

function addChild() {
    let ajout = document.getElementById("add").value;
    let node = document.createElement("option");
    let textnode = document.createTextNode(ajout);
    node.appendChild(textnode);
    document.getElementById("mySelect").appendChild(node);
}

40 / 48

Les noeuds - enfants - parents

Ajouter un enfant

41 / 48

Les noeuds - enfants - parents

Ajouter un enfant

42 / 48

Les noeuds - enfants - parents

Ajouter un enfant

43 / 48

Les noeuds - enfants - parents

Ajouter un enfant

44 / 48

Les noeuds - enfants - parents

Ajouter un enfant

45 / 48

Les noeuds - enfants - parents

Effet de style

function colorChild(){
    let c = document.getElementById("mySelect").children;
    c[0].style.backgroundColor = "red";
}

46 / 48

Les noeuds - enfants - parents

VAR

47 / 48

C'est fini !

À vous de jouer !

48 / 48

Help

Keyboard shortcuts

↑, ←, Pg Up, k

Go to previous slide

↓, →, Pg Dn, Space, j

Go to next slide

Home

Go to first slide

End

Go to last slide

b / m / f

Toggle blackout / mirrored / fullscreen mode

Clone slideshow

Toggle presenter mode

Restart the presentation timer

?, h

Toggle this help