Révision

A relire !

http://dupontl1.blogspot.com/2019/02/td-grid.html
http://dupontl1.blogspot.com/search?q=DS

Test

<body>

<div class="top">div : class top <h1>h1</h1> <div id="tmpPlants" class="tmpExample"> <div class="A B tmpExample" id="item.A">div : class =A et B id=item.A</div> <div class="A tmpExample" id="b">div : class =A id=b</div> <div class="B tmpExample" id="c">div : class =B id=c</div> </div> <footer> footer </footer> </div>

</body>

Encadrer les éléments sélectionnés par les expressions :

document.body.querySelector(".top :first-Child")
document.body.querySelectorAll(".top :first-Child")[1]
document.body.querySelector(".top").firstChild
document.body.querySelector(".top").firstElementChild.previousSibling
document.body.querySelector(".top").lastChild.previousElementSibling

div, h1
.A.B
.top :first-child
.top :nth-child(1)
.top :nth-of-type(1)

Ecrire deux expressions permettant de mettre le <footer> premier enfant de body !

Correction de l'examen : ⇗

test

Trouver le nombre de DIV du site https://wherepathe.blogspot.com/

Programme de revision

La partie parcours du DOM ne sera pas au partielle.

Cours Parcours du DOM

https://duponttd.blogspot.com/2016/10/parcours-du-dom.html

ouvrir une page WEB, puis dans la console tapez (copier/coller) :

printDOM = (node) => {

console.groupCollapsed(`${node.nodeName}`);

for(let nd of node.children) {
printDOM(nd);
}
console.groupEnd(`${node.nodeName}`);
}
printDOM(document);

Voici le cours

Solution TD Dom modification

Voici les réponses au TD modification.

Solution TD : DOM

retrouvez la solution du TD :

cliquez

Préparation examen

Notez que les étudiants avaient étudié Flex. Ces questions ne vous seront pas posées. PAr contre vous avez étudié le DOM et le parcours dans le graphe.

2017
2018

Selecteur CSS : hover

Article sur la création d'un menu pur CSS

code en action

quizz

Recursif

Parcours à la recherche de texte !

Rechercher un mot dans une page !

en action !

Afficher le DOM dans une page

Remarque :

Code avec expReg : en action

Vidéo : help

Exemple de vidéos disponibles :querySelectorAll

site d'aide : Khan

Projet

Regarder la vidéo hacker Google et proposer votre solution.

Comment insérer !

démo

Série d'articles sur le récursif !

Vous connaissez la fonction Factorielle !

function factorielle(n) {

  return n == 0 ? 1 :  n * factorielle (n-1);

}

const factorielle = (n) => n>0 ? n*factorielle(n-1) : 1;

>factorielle(6)
720

Il est important de comprendre les appels récursifs pour cela examiner le code suivant :
récursif code

-> le premier appel finit en dernier

Voici deux autres exemples d'utilisation du principe de récursion :

La fonction puissance

Décomposition

Parcours projet

Voici le résultat que vous devez obtenir pour le projet parcours DOM.

Aller dans le fichier

https://wherepathe.blogspot.com/

Copier ce code (compacter)

let a=0,p =(e)=>{let a1=a++;console.groupCollapsed(`Begin ${e.nodeName} ${a1}`);Array.from(e.children,c=>p(c));console.log(`End ${e.nodeName} ${a1}`);console.groupEnd();};p(document.body);

Coller le code dans la console.

quizz

Test

Projet : DOM

Afficher les balises d'une page WEB

Editeur en cloud et DOM

lire l'article

l'objet window : en action

HTML

Créer un fichier HTML.

h1{ChapItre $$$}*200⇄ (tab)

L'extension Emmet doit être active.

Le code HTML obtenu, déclenche le scrool
<h1>Chaptre 001</h1>
<h1>Chaptre 002</h1>
<h1>Chaptre 003</h1>
...
<h1>Chaptre 199</h1>
<h1>Chaptre 200</h1>

Utilisez le scrool.

CSS

ajouter les propriétés suivantes :

* {

margin : 0;

box-sizing: border-box;

}

h1 {

height : 40px;

}

Inspection

Nous allons découvrir l'objet window.

Inspecter le chapitre 100 et rechercher la propriété offsetTop: 3960

Cette valeur correspond à 100-1*hauteur H1

DOC : The HTMLElement.offsetTop read-only property returns the distance of the

current element relative to the top of the offsetParent node. 🌎

L'objet window.

Tapez dans la console
> window
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}

Rechercher la propriété pageYOffset

DOC : The corresponding pageXOffset property, which returns the number of pixels scrolled along the horizontal axis (left and right), is an alias for scrollX. 🌎

Remonter le scrool en haut de la page et donner la valeur de pageYOffset.

>window.pageYOffset
<0

Application

Compléter le code HTML en ajoutant un div

<h1>chapitre 001</h1>

Donner le style suivant :

#anim{

position :fixed;

text-align : right;

border : 1px solid;

z-index : -1;

color : white;

background-image: linear-gradient(to right, white, black);

}

Dans l'onglet JS de votre éditeur tapez le code.

function animMyScrool() {

//let anim = document.querySelector("#anim");

anim.innerText = parseInt(anim.style.width);

anim.style.width =

`${window.pageYOffset/document.body.offsetHeight*document.body.offsetWidth}px`;

window.requestAnimationFrame(animMyScrool);

}

window.requestAnimationFrame(animMyScrool);

window.requestAnimationFrame permet de relancer une fonction ici tick tout le temps. Cette fonction est utilisée dans les jeux d'animation.

Etudiez le coeur de la fonction animMyScrool.

Quizz

Selecteur !

Balise iframe

inspectez https://wherepathe.blogspot.com/ à la recherche de la balise <iframe>

Menu pur CSS

Outils pour le développement

Défi pour ce WE

Soit le HTML

<div class="conteneur" style="width: 400px; height: 400px;">
<div id="it1">A</div>
<div id="it2">B</div>
<div id="it3">C</div>
<div id="it4">D</div>
</div>

Imaginer le résultat du CSS suivant

.conteneur {
display: grid;
grid-template-columns: repeat(2, 100px);
}

#it4 {
grid-column-end : 1
}

Grille implicite/explicite

code du simulateur de Grid : télécharger

Création d'une grille :

.conteneur { display : grid; }

Création d'une grille explicite

Nous allons créer ici une grille d'une colonne en explicitant (en donnant) la taille de la colonne.

.conteneur { display : grid; grid-template-columns : 200px; }

Nous voyons ici deux notions importantes :

la notion de grille explicite et implicite.

Le premier bloc se place sur la première colonne. (grille explicite).
Mais, les trois autres blocs se placent eux aussi sur la première colonne sur des lignes non explicites (pas définies) dites implicites.

Remarque : La hauteur des lignes varies en fonction de la hauteur du conteneur et de chaque bloc.

Création d'une grille implicite

Continuons à définir notre grille explicite en ajoutant deux lignes.

.conteneur { display : grid; grid-template-columns : 200px; grid-template-rows : 1fr 200px; }

Encore une fois, la grille explicite (définie 1col,2lig) permet de placer les deux blocs 1 et 2. Et, une grille implicite place les deux blocs 3 et 4.
La hauteur des lignes implicites est réduite dans notre exemple au minimum du fait principalement de la taille 1fr de la première ligne.

Remarque :

La définition grid-template-rows : 50px 50px; donnerait des hauteurs de lignes explicites plus grandes (sans dépasser la hauteur totale du conteneur).

Hauteur des lignes implicites

On peut donner une valeur aux lignes implicites grid-auto-rows : 100px

Ainsi, à chaque fois d'un bloc est placé sur une ligne implicite, la ligne prendra cette valeur.

TD grid

Voici une série d'exercices sur CSS grid.

A) Création d'une page

Utilisation de →Template-areas

B) Les alogorithmes de placement

C) En action

D) Avancé

Grid : un cours

http://dupontcss.blogspot.com/p/cours.html

DS : 1H

Code HTML

<div class="top">div : class top</br>
<h1>h1</h1>
<ul id="tmpPlants" class="tmpExample">
<li class="A B tmpExample" id="item.A">li : class =A et B id=item.A</li>
<li class="A tmpExample" id="b">li : class =A id=b</li>
<li class="B tmpExample" id="c">li : class =B id=c</li>
</ul>
<footer> footer </footer>
</div>

Pour chaque sélecteur, encadrer les éléments sélectionnés.

Selecteurs ('ul, li')
Selecteurs ('li:not(#b)')
Selecteurs ( "#item.A" )
Selecteurs ( ".A.B" )
Selecteurs ( ".top :first-child" )
Selecteurs ( "ul:first-child" )
Selecteurs ( "li:not(:hover)" )
Selecteurs ( "li.B + *" )
Selecteurs (".top :nth-child(2)")
Selecteurs (".top :nth-of-type(1)")
Selecteurs (".top :not(:last-child)")

Exemple :

Selecteurs ('h1')

Remarque : si vous le faites sous forme de DM aidez vous du simulateur.

------------- Auto correction

div : class top

h1

li : class =A et B id=item.A
li : class =A id=b
li : class =B id=c

Je vous ai programmé une correction : il vous suffit de cliquer sur le lien

Selecteurs classés par "Types"

Les Selecteurs

En tapant directement votre CSS :

http://dupontcss.blogspot.com/p/html-display-flex-align-itemsstretch.html

Autre site

Entraînez vous en tapant votre sélecteur, la coche verte vous donne le résultat.

quizz

basic html

Quizz HTML

DS CSS : 10'

Voici un test sur les sélecteurs : durée 10'.

Quizz

Etude de cas

Exemple à étudier

→Jolie menu

L'utilisation de la speudo-classe first( last ) est particulièrement efficace dans la construction de menu.
Elle permet de distinguer le premier (dernier) élément de la liste et de lui affecter un style particulier.

La figure ci-dessus montre le résultat de l'application d'un bord arrondi au lien du premier élément de la liste du menu.

nav li :first-child a {

border-bottom-left-radius: 10px;

border-bottom-right-radius: 0;

border-top-left-radius: 10px;

border-top-right-radius: 0;

}

La couleur fait correspondre à notre expression des besoins en français avec l'expression traduite en CSS !

quizz

Travail perso : Les selecteurs

Plan du cours

Cours en ligne : UDACITY

Voir cours !

introduction

Exemple quizz

Projet : EXPERTISE DE SITE

Pourquoi ne pas parler d'un site qui vous concerne en premier lieu ; celui de votre université : Université d'Evry

Comparaison

Rendez vous sur le site vu en cours : https://vincennes1900.blogspot.com/ et cliquez sur un sujet.

L'ascenseur sur le coté est bloqué, cela vous permet de vous consacrer sur le sujet cliqué.

la vidéo suivante montre que l'on ne peut plus utiliser l'ascenseur de la page (reste actif celui du message).

Faite l'expérience sur le site de l'université en cliquant sur l'icone recherche. L'ascenseur reste présent. De plus, un simple clique sur le fond noir ne permet pas de le supprimer.

Navigateur !

Un éditeur ne vous ai pas imposé.

Voici une proposition : →Visual Studio

Vous y retrouvez la magie d'EMMET.

HTML

TEST

Dans les deux articles qui suivent, notre seul espoir de faire disparaître l'étoile de la mort est d'inspecter le code à la recherche d'indice permettant de débloquer un code secret et un bouton.

help !

GAME / Vous êtes mon seul espoir !

Trouvez une faille dans la protection de l'étoile

TD HTML

Attente du mister MAgie !

Nous avons vu dans notre premier cours l'inspecteur. Le seul outil de développement que vous devez maîtriser. Mais quel outil !

Nous pourrons découvrir la magie de propriété permettant de jolie effet

Exemple

Découvrez la propriété "overflow". Elle est très utile dans bien des effets.
overflow en action

Mes attentes :

Dans quelque temps, suite à ce genre de cours, vous devrez travailler par vous même.
C'est à dire rechercher des informations sur la propriété CSS overflow.

Mon rôle :

Mon but est de vous permettre d'être autonome dans votre recherche.

Je ne peux pas travailler pour vous et faire la 1/2 heure de travail personnel quotidien.

En cours ou en TD, je vous montrerai que l'inspecteur permet de simuler la position de votre souris sur un élément. Cette information facilitera votre recherche.

Simuler la présence de la souris sur un élément

Travail maison

Travail personel

Programme sur ${time} ans

Plan

Lab : Etudier le code

Aller dans le fichier test : code

Comment inspecter l'info bulle ?

Quelle magie permet son apparition/disparition ?

TD : environnement

A lire

test : devTools

Utiliser l'inspecteur pour répondre aux questions suivantes

Rechercher l'onglet permettant de visualiser le bloc Start Wars sous la forme suivante.

test inspector !

DEVTOOLS : Chrome

Commencez par lire l'article sur Chrome et ses outils de développement : ici.

Télécharger ensuite sur votre bureau (ou dans le répertoire de votre choix) le dossier contenant les fichiers de travail : ici

Nous considérons donc que :

You have the source code for your site on your desktop.

Mise en place

Ajouter le dossier de travail comme le montre la vidéo.

N'oubliez pas d'autoriser l'accès à Chrome.

Objectif

Nous allons pouvoir modifier modifier les trois types de fichiers (HTML, CSS, JS) sans passer par un éditeur !

靧 Un seul et unique outil de travail.

Pour exercice nous allons nous entraîner à modifier les trois types de fichiers HTML,CSS et JS.

Modification du fichier HTML

Modifier le titre de votre fichier.

Modification de votre site

Modifier le fichier CSS pour mettre une grille en place.

Modification du fichier JS

Modifier du style :

document.querySelectorAll(".aside")[0].style = 'border:solid 3px; padding : 1em;';

voir : cssText

Remarque : il faudrait éviter de mettre du style directement en JS.

Voici une bonne pratique (ajout d'une classe) :

dans le fichier CSS, ajouter la classe test :

.test {

border : 1em solid;

padding : 1em;

}

dans le fichier JS, ajouter le code suivant :
document.querySelectorAll(".aside")[0].classList.add("test");

Modifier le texte :

Modifier le texte du paragraphe "Inspired by a trip to the library of Fonmon ... " en mettant la date d'aujourd'hui.

Modifier la structure

voir cours

Pages

Test

Aller dans le fichier

Copier ce code (compacter)

Coller le code dans la console.

HTML

CSS

Inspection

L'objet window.

Application

Création d'une grille :

Création d'une grille explicite

la notion de grille explicite et implicite.

Création d'une grille implicite

Hauteur des lignes implicites

Code HTML

Pour chaque sélecteur, encadrer les éléments sélectionnés.

Exemple :

------------- Auto correction

h1

Autre site

Voici un test sur les sélecteurs : durée 10'.

Exemple à étudier

introduction

Exemple quizz

Comparaison

HTML

Exemple

Mes attentes :

Mon rôle :

Mise en place

Objectif

Modification du fichier HTML

Modification de votre site

Modification du fichier JS

Modifier du style :

Modifier le texte :

Modifier la structure