Apprentissage création de module

Rédigé par David - - Aucun commentaire

À l'étape de l'install de gulp pour automatiser notre processus, on a rencontré un problème, et on a dû réinstaller nodejs dans sa dernière version :

curl -sL https://deb.nodesource.com/setup_5.x | sudo bash -

puis

sudo apt-get install nodejs
Classé dans : Simplon - Mots clés : aucun

Semaine 5 : on continue avec Javascript

Rédigé par David - - Aucun commentaire

On commence par lire le cours sur OpenClassRoom qui traite de DOM

Le Document Object Model (abrégé DOM) est une interface de programmation pour les documents XML et HTML.

Une interface de programmation, qu'on appelle aussi une API (pour Application Programming Interface), est un ensemble d'outils qui permettent de faire communiquer entre eux plusieurs programmes ou, dans le cas présent, différents langages. Le terme API reviendra souvent, quel que soit le langage de programmation que vous apprendrez.

C'est grâce au DOM que nous allons pouvoir modifier des éléments HTML (afficher ou masquer un <div> par exemple), en ajouter, en déplacer ou même en supprimer.

Petite note de vocabulaire : dans un cours sur le HTML, on parlera de balises HTML (une paire de balises en réalité : une balise ouvrante et une balise fermante). Ici, en JavaScript, on parlera d'élément HTML, pour la simple raison que chaque paire de balises (ouvrante et fermante) est vue comme un objet. Par commodité, et pour ne pas confondre, on parle donc d'élément HTML.

Le document

L'objet document est un sous-objet de window, l'un des plus utilisés. Et pour cause, il représente la page Web et plus précisément la balise <html>. C'est grâce à cet élément-là que nous allons pouvoir accéder aux éléments HTML et les modifier.

La structure DOM

Comme il a été dit précédemment, le DOM pose comme concept que la page Web est vue comme un arbre, comme une hiérarchie d'éléments. On peut donc schématiser une page Web simple comme ceci :
structure DOM

 

Voici le code source de la page :

<html>
    <head>
        <meta charset="utf-8" />
        <title>Le titre de la page</title>
    </head>
    <body>
        <div>
            <p>Un peu de texte <a>et un lien</a></p>
        </div>
    </body>
</html>

Le schéma est plutôt simple : l'élément <html> contient deux éléments, appelés enfants : <head> et <body>. Pour ces deux enfants, <html>est l'élément parent. Chaque élément est appelé nœud (node en anglais). L'élément <head> contient lui aussi deux enfants : <meta> et <title>. <meta> ne contient pas d'enfant tandis que <title> en contient un, qui s’appelle #text. Comme son nom l'indique, #text est un élément qui contient du texte. Il est important de bien saisir cette notion : le texte présent dans une page Web est vu par le DOM comme un nœud de type #text. Dans le schéma précédent, l'exemple du paragraphe qui contient du texte et un lien illustre bien cela :

<p>
Un peu de texte
<a>et un lien</a>
</p>
Si on va à la ligne après chaque nœud, on remarque clairement que l'élément <p> contient deux enfants : #text qui contient « Un peu de texte » et <a>, qui lui-même contient un enfant #text représentant « et un lien ».
 
La notion d'héritage on verra ça plus tard... on reviendra dessus
 
On va s'amuser avec innerHTML
Fil RSS des articles