Joan: Es crea la pàgina amb «=Introducció= =Referències= =Desenvolupament= ==1. Formulari per crear un compte de gmail== 1. El següent enllaç és el formulari per crear un compte de gmail a...».

2020-11-17T17:38:51Z

Es crea la pàgina amb «=Introducció= =Referències= =Desenvolupament= ==1. Formulari per crear un compte de gmail== 1. El següent enllaç és el formulari per crear un compte de gmail a...».

Pàgina nova

=Introducció=

=Referències=

=Desenvolupament=
==1. Formulari per crear un compte de gmail==
1. El següent enllaç és el formulari per crear un compte de gmail a Google.
*https://accounts.google.com/SignUp?service=mail&continue=https%3A%2F%2Fmail.google.com%2Fmail%2F&ltmpl=default&hl=ca
Copia el codi font. Localitza l'etiqueta ''<form>'' i ''</form>'' i determina quants formularis hi ha. Inspecciona el codi font i localitza les diferents parts del formulari. Tabula correctament tot el formulari (és una mica lio, però és aclaridor, hi ha moltes etiquetes). Enmig de totes aquestes etiquetes trobarem els ''INPUT'' que ens interessen.

2. Mitjançant la col·lecció ''forms'', troba tots els elements del formulari (és a dir, els INPUT). Fixa't que el botó de submit no forma part del formulari.
Llista tots els elements del formulari, i les propietats importants.

3. Cerca tots els fills del formulari. Amb ''childNodes'' veuràs que només penja un fill del formulari. És correcte aquest resultat, no? (mira el formulari correctament tabulat)

4. Si volem recórrer tots els nodes que pengen del formulari, hem d'endinsar-nos en tot l'arbre del formulari, de manera recursiva. Per fer-ho, podem utilitzar el codi que hem trobat a:
*https://www.javascriptcookbook.com/article/traversing-dom-subtrees-with-a-recursive-walk-the-dom-function/
<pre>
function walkTheDOM(node, func) {
func(node);
node = node.firstChild;
while (node) {
walkTheDOM(node, func);
node = node.nextSibling;
}
}

// Example usage: Process all Text nodes on the page
walkTheDOM(document.body, function (node) {
if (node.nodeType === 3) { // Is it a Text node?
var text = node.data.trim();
if (text.length > 0) { // Does it have non white-space text content?
// process text
}
}
});
</pre>

Cerca tots els nodes que pengen del formulari.

5. Un cop els tens tots, ara pots filtrar només els que ens interessen: els INPUT.
===solució===
<pre>
<script>
forms = document.getElementsByTagName("form");
console.log("Número de formularis: " + forms.length);

console.log("Número d'elements del formulari:" + forms[0].elements.length);

for (i=0;i<forms[0].elements.length;i++)
{
console.log(forms[0].elements[i].name);
console.log(forms[0].elements[i].tagName);
console.log(forms[0].elements[i].type);
console.log(forms[0].elements[i].value);
console.log("");
}

console.log("==================================");

var google_form = document.getElementsByTagName("form");
console.log("Número de formularis: " + google_form.length);
//només té un fill
console.log("Número de fills: " + google_form[0].childNodes.length);
//si vull trobar els inpunts, hauré de baixar recursivament per tota l'estructura del formulari.

console.log("==================================");

//https://www.javascriptcookbook.com/article/traversing-dom-subtrees-with-a-recursive-walk-the-dom-function/
function walkTheDOM(node, func) {
func(node);
node = node.firstChild;
while (node) {
walkTheDOM(node, func);
node = node.nextSibling;
}
}

walkTheDOM(google_form[0], function (node) {
console.log(node.nodeName)
});

console.log("==================================");

walkTheDOM(google_form[0], function (node) {
if (node.nodeName === "INPUT") {
console.log(node.nodeName + " - " + node.nodeName + " - " + node.name + " - " + node.id)
}
});

</script>
</pre>

==2. Llistar imatges d'una web==
Basant-nos en l'anterior codi, podem recórrer tots els elements del DOM en una pàgina web. Per exemple, un llistat de totes les imatges. Per exemple, propva-ho amb algun diari digital com ara:
*naciodigital.cat
o d'altres. Es tracta de llistar la url de totes les imatges. Més endavant, aprendràs a posar tota aquesta informació en una base de dades, per exemple.

'''solució''':
<pre>
<script>

//https://www.javascriptcookbook.com/article/traversing-dom-subtrees-with-a-recursive-walk-the-dom-function/
function walkTheDOM(node, func) {
func(node);
node = node.firstChild;
while (node) {
walkTheDOM(node, func);
node = node.nextSibling;
}
}

walkTheDOM(document.body, function (node) {
if (node.nodeName === "IMG") {
console.log(node.src)
}
});

</script>
</pre>

=Entrega=
Entrega al Classroom

{{Autor}}, Novembre 2020
[[Categoria: Institut Jaume Balmes]]
[[Categoria: Assignatura DAW-M06-WEC]]

Recórrer el DOM. Formulari Google Account - Historial de revisió

Joan: Es crea la pàgina amb «=Introducció= =Referències= =Desenvolupament= ==1. Formulari per crear un compte de gmail== 1. El següent enllaç és el formulari per crear un compte de gmail a...».