Exercice 1/8

Le principe des prochains exercices est de modifier le rendu HTML sans toucher au code source :

  • essayez de modifier le code source HTML (Appuyez sur reset pour réinitialiser);
  • cliquez sur Soumettre ma réponse;
  • vous verrez que vous ne pourrez pas continuer si le HTML source est modifié.

Leçon 1/8

L'un des avantages de Javascript est que c'est un langage exécutée du côté client, donc dans votre navigateur. De ce fait, Javascript a accès à de nombreuses informations sur l'environnement d'exécution d'une page web et donc la fenêtre du navigateur.

Pour Javascript, la fenêtre du navigateur est représentée par l'objet window et alert() est en fait une fonction (ou méthode) de window et l'on pourrait tout aussi bien écrire window.alert(). Idem pour prompt(), confirm().
De même window possède des propriétés permettant de connaître la largeur et hauteur en pixels de la fenêtre du navigateur.

Ce qui nous intéresse ici, c'est l'objet document qui représente la structure HTML de la page web et tout ce qui est contenu dans <html></html>.

document possède aussi des fonctions permettant de manipuler la structure HTML (le DOM) d'une page web.

La structure du DOM

alt text

Le DOM est constitué par des noeuds (nodes en anglais) :

  • le noeud racine est <html>;
  • chaque noeud possède un parent (sauf le noeud racine);
  • chaque noeud peut avoir plusieurs enfants;
  • chaque noeud peut avoir des noeuds frères / soeurs.

Un noeud peut être une balise HTML mais aussi du texte contenu dans cette balise.

Commentaires les mieux notés

  • mickael.59300

    comment peut on imaginer modifier le code source html en ayant aucune idée de la façon de procéder et donc, de l'écrire... on ne nous l'a jamais expliqué ici! on n'a aucune chance d'inventer seule cette procédure!

  • tadjauraurelien

    SLT JE N'ARRIVE PAS A VOIR MON SCORE AIDE!

  • mram Administrateur

    Ici il est demandé de simplement modifier le code HTML dans index.html (en faisant ce que vous voulez, c'est pour ça que rien est indiqué plus précisément). Vous verrez donc qu'il n'est pas possible dans ces exercices de modifier directement le HTML, car le but est de le faire en passant par le code Javascript. Car Javascript est fait en partie pour ça.

  • mram Administrateur

    Je fais remonter l'information à l'informaticien qui gère la plateforme.

6 Commentaires

  • mickael.59300

    mickael.59300

    comment peut on imaginer modifier le code source html en ayant aucune idée de la façon de procéder et donc, de l'écrire... on ne nous l'a jamais expliqué ici! on n'a aucune chance d'inventer seule cette procédure!

    le 06/04/2017 à 13h46

  • tadjauraurelien

    tadjauraurelien

    SLT JE N'ARRIVE PAS A VOIR MON SCORE AIDE!

    le 11/11/2016 à 13h07

  • mram

    mram Administrateur

    Ici il est demandé de simplement modifier le code HTML dans index.html (en faisant ce que vous voulez, c'est pour ça que rien est indiqué plus précisément). Vous verrez donc qu'il n'est pas possible dans ces exercices de modifier directement le HTML, car le but est de le faire en passant par le code Javascript. Car Javascript est fait en partie pour ça.

    le 08/04/2017 à 08h31

  • mram

    mram Administrateur

    Je fais remonter l'information à l'informaticien qui gère la plateforme.

    le 14/11/2016 à 18h24

  • bot666

    bot666

    si vous êtes bloqués, faites simplement reset et soumettre (soumettre le code de base quoi)

    le 10/01/2018 à 14h34

  • matsolidity-8

    matsolidity-8

    Personnellement je sais manipuler le DOM mais j'imagine que la plupart des "élèves" ici espèrent aussi accéder à une base de connaissance.. là il faut se débrouiller ! (ça fait aussi parti du processus d'apprentissage après tout donc bon...)

    le 28/12/2018 à 00h29

index.html
script.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM</title> </head> <body> <h1>Titre h1</h1> <p class="par">Paragraphe 1</p> <h2>Titre h2</h2> <p class="par">Paragraphe 2</p> <ul> <li>Item 1</li> <li>Item 2</li> <li><a href="http://www.google.fr">Item 3</a></li> </ul> <div id="bloc"> <h3>Titre h3</h3> <p class="par">Paragraphe 4</p> </div> <script src="script.js"></script> </body> </html>