<p id="para-01">
<span>First span</span>
</p>
<script type="text/javascript">
var p01 = document.getElementById('para-01');
alert(p01.firstChild.nodeName)
</script>test
valeur de l'index : reduce
comparez les index dans les cas suivants
[0, 1, 2, 3, 4].reduce(function(accumulateur, valeurCourante, index, array){
console.log(`${index} : ACC= ${accumulateur}, Cour= ${valeurCourante}`);
return accumulateur + valeurCourante;
});
avec une valeur initiale :
[0, 1, 2, 3, 4].reduce(function(accumulateur, valeurCourante, index, array){
console.log(`${index} : ACC= ${accumulateur}, Cour= ${valeurCourante}`);
return accumulateur + valeurCourante;
},1000);
[0, 1, 2, 3, 4].reduce(function(accumulateur, valeurCourante, index, array){
console.log(`${index} : ACC= ${accumulateur}, Cour= ${valeurCourante}`);
return accumulateur + valeurCourante;
});
avec une valeur initiale :
[0, 1, 2, 3, 4].reduce(function(accumulateur, valeurCourante, index, array){
console.log(`${index} : ACC= ${accumulateur}, Cour= ${valeurCourante}`);
return accumulateur + valeurCourante;
},1000);
Afficher le nombre de chaque balise du DOM
Ecrire le code JS qui permet d'afficher le nombre de balises par type !
En action :
Injecter le code dans la console d'une page HTML prise au hasard.
En action :
Injecter le code dans la console d'une page HTML prise au hasard.
allTag=(a=>{let b=[],c={};return _explore=(a=>{for(let c of a.children)b.push(c.nodeName),_explore(c)}),_explore(a),_getWordCnt=(a=>{return a.reduce(function(a,b){return a[b]=a[b]+1||1,a},[])}),c=_getWordCnt(b),_sort=(a=>{let b=[],c=Object.keys(a).sort((b,c)=>a[c]-a[b]);for(var d of c)b[d]=a[d];return b}),_sort(c)});let a=allTag(document.body);for(var b in a)a.hasOwnProperty(b)&&console.log(`la balise ${b} apparaît ${a[b]} fois `);
reduce en action : one more
const promos = [
{ promo: "L3miage", etudiants: ["Dupont", "Whells", "Toto"]},
{ promo: "L2miage", etudiants: ["Dupond", "Pathé"]},
{ promo: "M1miage", etudiants: ["Audu", "Baby"]},
]
const tousEtudiants = promos.reduce(function(prev, curr) {
return [...prev, ...curr.etudiants];
},[]);
console.log(tousEtudiants.sort());
remarque, ... est bien un opérateur utilisé ici pour remplacer la concaténation.
{ promo: "L3miage", etudiants: ["Dupont", "Whells", "Toto"]},
{ promo: "L2miage", etudiants: ["Dupond", "Pathé"]},
{ promo: "M1miage", etudiants: ["Audu", "Baby"]},
]
const tousEtudiants = promos.reduce(function(prev, curr) {
return [...prev, ...curr.etudiants];
},[]);
console.log(tousEtudiants.sort());
remarque, ... est bien un opérateur utilisé ici pour remplacer la concaténation.
classList : mon code
Nous allons écrire une classe JS simulant classList.
JavaScript
C'est un vrai exercice de programmation.
Nous allons juste développer la méthode add et donnerons le reste du code à étudier.
Nous savons récupérer les classes associées à un nœud du DOM.
Notons que le type retourné est "string"
typeof(object.className)
Voici les fonctions de base
var t = document.getElementById("f");
var classTab,
classString;
console.log(" type of = " , typeof(t.className));
// string->tab
classTab = t.className.split(" ");
console.log(classTab);
//tab->string
classString = classTab.join(" ");
console.log(classString);
JS Bin on jsbin.com
Nous pouvons tester la présence d'une classe avant ajout
JS Bin on jsbin.com
JS Bin on jsbin.com
JS Bin on jsbin.com
Pour finir, on peut evisager d'écrire l'ensemble des fonctions utiles.
JS Bin on jsbin.com
JavaScript
ptr = object.classList
Nous allons juste développer la méthode add et donnerons le reste du code à étudier.
Nous savons récupérer les classes associées à un nœud du DOM.
| HTML | <element class="p" ... > |
|---|---|
| JavaScript | |
typeof(object.className)
Mise en place de la fonction add
Pour manipuler (ajouter, supprimer) un string, il est fréquent de transformer le string en tableau pour utiliser les méthodes efficaces sur les tableaux.- transforme string en tableau
- ajoute la class au tableau
- transforme tableau en string
Voici les fonctions de base
var t = document.getElementById("f");
var classTab,
classString;
console.log(" type of = " , typeof(t.className));
// string->tab
classTab = t.className.split(" ");
console.log(classTab);
//tab->string
classString = classTab.join(" ");
console.log(classString);
JS Bin on jsbin.com
Nous pouvons tester la présence d'une classe avant ajout
JS Bin on jsbin.com
Amélioration du code
Cela marche, parfait, mais c'est maintenant que la partie intéressante commence !
- Créer des fonctions pour réutiliser notre code de base
- Introduire des éléments de test
Création de fonctions de base
var classesSeparator = " ";
function splitClasses(classesString) {
return classesString.split(classesSeparator);
}
function joinClasses(classes) {
return classes.join(classesSeparator);
}
function indexInClasses(className, classes) {
if (!className || !classes || !classes.length)
return false;
return classes.indexOf(className);
}
Amélioration du code
Il est foncdemental d'imaginer que ce code va rentrer en conflit avec une autre bibliothèque JS. Imaginer que notre fonction add soit utilisée ainsi add(1,2) ?
Les améliorations consistent
//code
})();
exemple :
var _classesSeparator = " ";
Les améliorations consistent
- Création d'un espace de noms
- Mise en évidence des fonctions internes
- Retour d'un objet pointant sur les fonctions
Création d'un espace de nom
Classes = (function () {//code
})();
Mise en évidence des fonctions et variables internes
Nous marquons ces items avec un _exemple :
var _classesSeparator = " ";
Retour de l'objet
La partie la plus subtile.
Classes = (function () {
...
return {
"add": add
};
})();
Le principe reste simple.
Une fonction anonyme s'auto exécute et renvoie un objet que l'on affecte à Classes.
Classes est un objet qui a un méthode add qui pointe en réalité sur la méthode add que nous avons définie et qui fait appelle à des fonctions internes qui ne sont plus atteignable : TOP !
Pour finir, on peut evisager d'écrire l'ensemble des fonctions utiles.
JS Bin on jsbin.com
DOM : API
| Property / Method | Description |
|---|---|
| element.appendChild() | Adds a new child node, to an element, as the last child node |
| element.attributes | Returns a NamedNodeMap of an element's attributes |
| element.childElementCount | Returns the number of child elements an element has |
| element.childNodes | Returns a collection of an element's child nodes (including text and comment nodes) |
| element.children | Returns a collection of an element's child element (excluding text and comment nodes) |
| element.classList | Returns the class name(s) of an element |
| element.className | Sets or returns the value of the class attribute of an element |
| element.cloneNode() | Clones an element |
| element.contains() | Returns true if a node is a descendant of a node, otherwise false |
| element.contentEditable | Sets or returns whether the content of an element is editable or not |
| element.firstChild | Returns the first child node of an element |
| element.firstElementChild | Returns the first child element of an element |
| element.getAttribute() | Returns the specified attribute value of an element node |
| element.getAttributeNode() | Returns the specified attribute node |
| element.getElementsByClassName() | Returns a collection of all child elements with the specified class name |
| element.getElementsByTagName() | Returns a collection of all child elements with the specified tag name |
| element.hasChildNodes() | Returns true if an element has any child nodes, otherwise false |
| element.id | Sets or returns the value of the id attribute of an element |
| element.innerHTML | Sets or returns the content of an element |
| element.insertBefore() | Inserts a new child node before a specified, existing, child node |
| element.lastChild | Returns the last child node of an element |
| element.lastElementChild | Returns the last child element of an element |
| element.nextSibling | Returns the next node at the same node tree level |
| element.nextElementSibling | Returns the next element at the same node tree level |
| element.nodeName | Returns the name of a node |
| element.nodeType | Returns the node type of a node |
| element.nodeValue | Sets or returns the value of a node |
| element.parentNode | Returns the parent node of an element |
| element.parentElement | Returns the parent element node of an element |
| element.previousSibling | Returns the previous node at the same node tree level |
| element.previousElementSibling | Returns the previous element at the same node tree level |
| element.querySelector() | Returns the first child element that matches a specified CSS selector(s) of an element |
| element.querySelectorAll() | Returns all child elements that matches a specified CSS selector(s) of an element |
| element.removeAttribute() | Removes a specified attribute from an element |
| element.removeChild() | Removes a child node from an element |
| element.replaceChild() | Replaces a child node in an element |
| element.setAttribute() | Sets or changes the specified attribute, to the specified value |
| element.setAttributeNode() | Sets or changes the specified attribute node |
| element.style | Sets or returns the value of the style attribute of an element |
| element.tagName | Returns the tag name of an element |
| element.textContent | Sets or returns the textual content of a node and its descendants |
| nodelist.item() | Returns the node at the specified index in a NodeList |
| nodelist.length | Returns the number of nodes in a NodeList |
en action
JS Bin on jsbin.com
const words = ["Beau", "Balle", "Ange",
"Ananas", "Reduce","Action"];
const alphabetical = words.reduce((a, x) => {
if(!a[x[0]]) a[x[0]] = [];
a[x[0]].push(x);
return a; }, {});
Object.keys(alphabetical).forEach(function (key) {
console.log(` ${key} => ${alphabetical[key]}`);
});
console.log(alphabetical);
const words = ["Beau", "Balle", "Ange",
"Ananas", "Reduce","Action"];
const alphabetical = words.reduce((a, x) => {
if(!a[x[0]]) a[x[0]] = [];
a[x[0]].push(x);
return a; }, {});
Object.keys(alphabetical).forEach(function (key) {
console.log(` ${key} => ${alphabetical[key]}`);
});
console.log(alphabetical);
Inscription à :
Articles (Atom)