1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
---
title: JavaScript i CSS
slug: Web/Guide/CSS/Inici_en_CSS/JavaScript
tags:
- CSS
- 'CSS:Getting_Started'
- Example
- Guide
- Intermediate
- NeedsUpdate
- Web
translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
---
<p>{{ CSSTutorialTOC() }}</p>
<p>Aquesta és la primera secció de la Part II del <a href="/en/CSS/Getting_Started" title="https://developer.mozilla.org/en/CSS/Getting_Started">tutorial CSS</a>. La Part II conté alguns exemples que mostren l'abast de CSS utilitzat amb altres tecnologies web i Mozilla.</p>
<p>Cada pàgina en la part II il·lustra com interactua amb CSS alguna altra tecnologia. Aquestes pàgines no estan dissenyades per ensenyar com utilitzar aquestes altres tecnologies. Aneu a altres tutorials per aprendre sobre elles en detall.</p>
<p>En lloc d'això, aquestes pàgines estan dissenyades per il·lustrar els molts usos de CSS. Per utilitzar aquestes pàgines, heu de tenir algun coneixement de CSS, però no cal cap coneixement d'unes altres tecnologies.</p>
<p>Secció anterior (Part I): <a href="/en/CSS/Getting_Started/Media" title="https://developer.mozilla.org/en/CSS/Getting_Started/Media">Mitjà</a><br>
Secció següent: <a href="/en/CSS/Getting_Started/SVG_graphics" title="https://developer.mozilla.org/en/CSS/Getting_Started/SVG_graphics">SVG</a></p>
<h3 id="Information:_JavaScript" name="Information:_JavaScript"><span id="result_box" lang="ca"><span>Informació</span><span>: JavaScript</span></span></h3>
<p>JavaScript és un <em>llenguatge de programació</em>. JavaScript s'utilitza àmpliament per proporcionar interactivitat en els llocs web i aplicacions.</p>
<p>JavaScript pot interactuar amb les fulles d'estil, permetent-li escriure programes que canvien l'estil d'un document de forma dinàmica.</p>
<p>Hi ha tres maneres de fer això:</p>
<ul>
<li>Treballant amb la llista de fulles d'estil del document, per exemple: afegir, eliminar o modificar una fulla d'estil.</li>
<li>Treballant amb les regles en una fulla d'estil, per exemple: afegir, eliminar o modificar una regla.</li>
<li>Treballant amb un element individual en el DOM, modificant el seu estil independentment de les fulles d'estil del document.</li>
</ul>
<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em; width: 100%;">
<caption>Més detalls</caption>
<tbody>
<tr>
<td>Per obtenir més informació sobre JavaScript, vegeu la pàgina de <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a> en aquest wiki.</td>
</tr>
</tbody>
</table>
<h3 id="Action:_A_JavaScript_demonstration" name="Action:_A_JavaScript_demonstration"><span id="result_box" lang="ca"><span>Acció</span><span>:</span> <span>Una demostració</span> <span>de JavaScript</span></span></h3>
<p>Feu un nou document HTML, <code>doc5.html</code>. Copieu i enganxeu el contingut d'aquí, assegurar-vos de deplaçar-vos per obtenir tota ella;</p>
<div style="width: 48em;">
<pre class="brush:html;"><!DOCTYPE html>
<html>
<head>
<title>Mozilla CSS Getting Started - JavaScript demonstration</title>
<link rel="stylesheet" type="text/css" href="style5.css" />
<script type="text/javascript" src="script5.js"></script>
</head>
<body>
<h1>JavaScript sample</h1>
<div id="square"></div>
<button>Click Me</button>
</body>
</html>
</pre>
</div>
<p>Feu una nova fulla d'estil CSS, <code>style5.css</code>. Copieu i enganxeu el contingut d'aquí:</p>
<div style="width: 48em;">
<pre class="brush:css;"> #square {
width: 120px;
height: 120px;
border: 2px inset gray;
margin-bottom: 1em;
}
button {
padding: .5em 2em;
}</pre>
</div>
<p>Feu un nou arxiu de text, <code>script5.js</code>. Copieu i enganxeu el contingut d'aquí:</p>
<div style="width: 48em;">
<pre class="brush:js;">// JavaScript demonstration
var changeBg = function (event) {
console.log("method called");
var me = event.target
, square = document.getElementById("square");
square.style.backgroundColor = "#ffaa44";
me.setAttribute("disabled", "disabled");
setTimeout(function () { clearDemo(me) }, 2000);
}
function clearDemo(button) {
var square = document.getElementById("square");
square.style.backgroundColor = "transparent";
button.removeAttribute("disabled");
}
var button = document.querySelector("button");
button.addEventListener("click", changeBg);
console.log(button);
</pre>
</div>
<p><span id="result_box" lang="ca"><span>Obriu el</span> <span>document</span> <span>en el navegador i</span> <span>premeu el</span> <span>botó</span> <span>o vegeu</span> <span>una mostra</span> <span>del treball</span> <span>a continuació.</span></span></p>
<p>{{ EmbedLiveSample('Action:_A_JavaScript_demonstration', 320,320) }}</p>
<div class="note"><strong>Notes importants</strong> sobre aquesta demostració:
<ul>
<li>El document HTML vincula la fulla d'estil com de costum, i també vincula el script.</li>
<li>L'script funciona amb elements individuals en el DOM. Modifica l'estil del cuadrat directament. Modifica l'estil del botó indirectament pel canvi d'un atribut.</li>
<li>En JavaScript, <code>document.getElementById("square")</code> és similar en funció al selector CSS <code>#square</code>.</li>
<li>En JavaScript, backgroundColor correspon a la propietat CSS <code>background-color</code>. JavaScript no permet guions en noms, de manera que "camelCase" s'utilitza en el seu lloc.</li>
<li>El vostre navegador té una regla CSS incorporada per <code>button{{ mediawiki.external('disabled=\"true\"') }}</code> que canvia l'aspecte del botó quan està desactivat.</li>
</ul>
</div>
<div class="warning">
<p>De fet, el document HTML anterior pot tenir una condició de competència (informació relacionada en aquesta pàgina <a href="http://www.w3.org/TR/2014/REC-html5-20141028/single-page.html#common-pitfalls-to-avoid-when-using-the-scripting-apis">W3C</a>), ja que té l'element <em>script</em> dins de l'element head podent inicar-se l'execució del codi JavaScript abans que la pàgina acabi de carregar-se i el codi no funcionarà perquè la variable <em>button</em> serà nul.la. En moure l'element <em>script</em> sota de l'element button (just damunt de l'etiqueta de tancament <em>body</em>) en el marcat HTML hauria de resoldre aquest problema.</p>
</div>
<table style="background-color: #fffff4; border: 1px solid #3366bb; margin-bottom: .5em; padding: 1em;">
<caption>Repte</caption>
<tbody>
<tr>
<td>Canvieu el script perquè el quadre salti a la dreta 20 em quan el seu color canviï, i salti cap a enrere després.</td>
</tr>
</tbody>
</table>
<p><a href="/en/CSS/Getting_Started/Challenge_solutions#JavaScript" title="https://developer.mozilla.org/en/CSS/Getting_Started/Challenge_solutions#JavaScript">Veure la solució per el repte.</a></p>
<h3 id="I_ara_què">I ara què?</h3>
<p>Si teniu dificultats per entendre aquesta pàgina o si teniu altres comentaris al respecte, si us plau, contribuïu a la vostre pàgina de <a href="https://developer.mozilla.org/Talk:en/CSS/Getting_Started/JavaScript">discussió</a>.</p>
<p>En aquesta demostració, el document HTML vincula el script tot i que només l'element button utilitza el script. Mozilla estén CSS de manera que pugui vincular codi JavaScript (i també contingut i altres fulles d'estil) per als elements seleccionats. La pàgina següent mostra això: <strong><a href="https://developer.mozilla.org/en/CSS/Getting_Started/XBL_bindings">vincles XBL</a></strong></p>
|
