https://cacauet.org/wiki/index.php?title=Javascript_DOM_exemple&feed=atom&action=history
Javascript DOM exemple - Historial de revisió
2024-03-29T04:35:26Z
Historial de revisió per a aquesta pàgina del wiki
MediaWiki 1.34.0
https://cacauet.org/wiki/index.php?title=Javascript_DOM_exemple&diff=3577&oldid=prev
Enric: /* Introducció */
2016-11-23T14:39:07Z
<p><span dir="auto"><span class="autocomment">Introducció</span></span></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="ca">
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">← Versió més antiga</td>
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">Revisió del 14:39, 23 nov 2016</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l3" >Línia 3:</td>
<td colspan="2" class="diff-lineno">Línia 3:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>El [[DOM]] és el [[Document Object Model]] de Javascript per a navegadors web, una col·lecció d'objectes que ens permet accedir i manipular el document HTML que tenim a la pàgina. És important que el DOM és un objecte que pertany al navegador/browser, pel que en altres entorns (com per exemple Node.js) no existeixi.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>El [[DOM]] és el [[Document Object Model]] de Javascript per a navegadors web, una col·lecció d'objectes que ens permet accedir i manipular el document HTML que tenim a la pàgina. És important que el DOM és un objecte que pertany al navegador/browser, pel que en altres entorns (com per exemple Node.js) no existeixi.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>El DOM disposa de diversos elements:</div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>El DOM disposa de diversos elements <ins class="diffchange diffchange-inline">ordenats jeràrquicament</ins>:</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline">* document</del></div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline">* window</del></div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline">[[Fitxer:Html-dom1.jpg|400px]]</ins></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline">* ..</del>.</div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline">[[Fitxer:Html-dom2</ins>.<ins class="diffchange diffchange-inline">png|400px]]</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><br></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><br></div></td></tr>
</table>
Enric
https://cacauet.org/wiki/index.php?title=Javascript_DOM_exemple&diff=3574&oldid=prev
Enric: Es crea la pàgina amb « == Introducció == El DOM és el Document Object Model de Javascript per a navegadors web, una col·lecció d'objectes que ens permet accedir i manipular el d...».
2016-11-22T16:58:32Z
<p>Es crea la pàgina amb « == Introducció == El <a href="/wiki/index.php?title=DOM&action=edit&redlink=1" class="new" title="DOM (encara no existeix)">DOM</a> és el <a href="/wiki/index.php?title=Document_Object_Model&action=edit&redlink=1" class="new" title="Document Object Model (encara no existeix)">Document Object Model</a> de Javascript per a navegadors web, una col·lecció d'objectes que ens permet accedir i manipular el d...».</p>
<p><b>Pàgina nova</b></p><div><br />
== Introducció ==<br />
El [[DOM]] és el [[Document Object Model]] de Javascript per a navegadors web, una col·lecció d'objectes que ens permet accedir i manipular el document HTML que tenim a la pàgina. És important que el DOM és un objecte que pertany al navegador/browser, pel que en altres entorns (com per exemple Node.js) no existeixi.<br />
<br />
El DOM disposa de diversos elements:<br />
* document<br />
* window<br />
* ...<br />
<br />
<br><br />
<br />
== Codi d'exemple ==<br />
<syntaxhighlight lang="javascript"><br />
<html><br />
<head><br />
<meta charset="utf-8"><br />
<script type="text/javascript"><br />
// constructor de l'objecte Edifici (es crida amb "new")<br />
function Edifici(carrer,num,cp,ciutat) {<br />
this.carrer = carrer;<br />
this.numero = num;<br />
this.cp = cp;<br />
this.ciutat = ciutat;<br />
}<br />
// variable global amb l'array d'edificis<br />
var edificis = [];<br />
<br />
// funció global, la cridarem des del "button"<br />
function afegeix_edifici() {<br />
// instanciem nou edifici<br />
// aconseguim les dades del formulari amb getElementById(id)<br />
var edifici = new Edifici(<br />
document.getElementById("carrer").value,<br />
document.getElementById("numero").value,<br />
document.getElementById("cp").value,<br />
document.getElementById("ciutat").value<br />
);<br />
// afegim el nou edifici a l'array global d'edificis<br />
// fins que no recarreguem la pàgina el tindrem en la RAM<br />
edificis.push(edifici);<br />
// feedback a l'usuari: pintem al "textarea" amb id="sortida"<br />
var sortida = document.getElementById("sortida");<br />
sortida.innerHTML = "Has afegit l'edifici: "+JSON.stringify(edifici);<br />
}<br />
</script><br />
</head><br />
<br />
<body><br />
<h1>Javascript mon amour</h1><br />
Carrer: <input type="text" id="carrer" /><br><br />
Número: <input type="number" id="numero" /><br><br />
CP: <input type="number" id="cp"><br><br />
Ciutat: <input type="text" id="ciutat"><br><br />
<br />
<button onclick="afegeix_edifici()">Afegeix edifici</button><br><br />
<br />
<textarea id="sortida" rows=5 cols=100>fojasoidjasoi<br />
</textarea><br />
</body><br />
<br />
</html><br />
</syntaxhighlight><br />
<br />
<br></div>
Enric