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
slug: CSS/Premiers_pas/JavaScript
tags:
- CSS
- 'CSS:Premiers_pas'
translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
---
<p> </p>
<p>Vous entrez dans la partie II du tutoriel. Cette partie contient des exemples montrant toute la portée de CSS dans Mozilla.</p>
<p>Chaque page de la partie II illustre la manière dont CSS interagit avec une autre technologie donnée. Ces pages ne sont pas prévues pour vous apprendre à utiliser ces autres technologies. Pour cela, vous devrez consulter d'autres tutoriels pour les comprendre en détail.</p>
<p>Au lieu de cela, ces pages sont conçues pour illustrer les nombreux usages de CSS. Pour les comprendre, vous devriez avoir une certaine connaissance de CSS, mais il n'est pas nécessaire de maîtriser aucune des autres technologies évoquées.</p>
<h3 id="Information_:_JavaScript" name="Information_:_JavaScript">Information : JavaScript</h3>
<p>JavaScript est un
<i>
langage de programmation</i>
. Lorsque vous utilisez une application Mozilla (par exemple votre navigateur), une grande partie du code exécuté par votre ordinateur est écrit en JavaScript.</p>
<p>JavaScript peut interagir avec les feuilles de style, ce qui permet d'écrire des programmes modifiant le style d'un document dynamiquement.</p>
<p>Il existe trois manières de le faire :</p>
<ul>
<li>En travaillant avec la liste de feuilles de style du document — par exemple en ajoutant, retirant ou modifiant une feuille de style.</li>
<li>En travaillant avec les règles d'une feuille de style — par exemple en ajoutant, retirant ou modifiant une règle.</li>
<li>En travaillant avec un élément individuel du DOM — en modifiant son style indépendamment des feuilles de style du document.</li>
</ul>
<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;">
<caption>
Plus de détails</caption>
<tbody>
<tr>
<td>Pour plus d'informations à propos de JavaScript dans Mozilla, consultez la page <a href="fr/JavaScript">JavaScript</a> de ce wiki.</td>
</tr>
</tbody>
</table>
<h3 id="Action_:_une_d.C3.A9monstration_en_JavaScript" name="Action_:_une_d.C3.A9monstration_en_JavaScript">Action : une démonstration en JavaScript</h3>
<p>Créez un nouveau document HTML, <code>doc5.html</code>. Copiez et collez-y le contenu ci-dessous, en vous assurant de faire défiler pour en obtenir l'entièreté :</p>
<div style="width: 48em; height: 12em; overflow: auto;">
<pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Premiers pas en CSS avec Mozilla - Démonstration en JavaScript</TITLE>
<LINK rel="stylesheet" type="text/css" href="style5.css"></strong>
<SCRIPT type="text/javascript" src="script5.js"></SCRIPT>
</HEAD>
<BODY>
<H1>Exemple en JavaScript</H1>
<DIV id="square"></DIV>
<BUTTON type="button" onclick="doDemo(this);">Cliquez ici</BUTTON>
</BODY>
</HTML>
</pre>
</div>
<p>Créez un nouveau fichier CSS, <code>style5.css</code>. Copiez et collez-y le contenu ci-dessous :</p>
<div style="width: 48em;">
<pre>/*** Démonstration en JavaScript ***/
#square {
width: 20em;
height: 20em;
border: 2px inset gray;
margin-bottom: 1em;
}
button {
padding: .5em 2em;
}
</pre>
</div>
<p>Créez un nouveau fichier texte, <code>script5.js</code>. Copiez et collez-y le contenu ci-dessous :</p>
<div style="width: 48em;">
<pre>// JavaScript demonstration
function doDemo (button) {
var square = document.getElementById("square")
square.style.backgroundColor = "#fa4"
button.setAttribute("disabled", "true")
setTimeout(clearDemo, 2000, button)
}
function clearDemo (button) {
var square = document.getElementById("square")
square.style.backgroundColor = "transparent"
button.removeAttribute("disabled")
}
</pre>
</div>
<p>Ouvrez le document dans votre navigateur et appuyez sur le bouton.</p>
<p>Ce wiki ne permet pas d'utiliser JavaScript dans ses pages, il n'est donc pas possible de montrer la démonstration ici. Cela ressemble à ceci, avant et après que vous appuyiez sur le bouton :</p>
<table>
<tbody>
<tr>
<td style="padding-right: 2em;">
<table style="border: 2px outset #36b; padding: 0 1em .5em .5em;">
<tbody>
<tr>
<td>
<p><b>Démonstration en JavaScript</b></p>
<div style="width: 5em; height: 5em; border: 2px inset gray; background-color: white;">
<div style="width: 2em; height: 1em; border: 1px outset black; background-color: #ccc; margin-top: 4px;">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table style="border: 2px outset #36b; padding: 0 1em .5em .5em;">
<tbody>
<tr>
<td>
<p><b>Démonstration en JavaScript</b></p>
<div style="width: 5em; height: 5em; border: 2px inset gray; background-color: #fa4;">
<div style="width: 2em; height: 1em; border: 1px inset black; background-color: #ccc; margin-top: 4px;">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p>Remarques à propos de cette démonstration :</p>
<ul>
<li>Le document HTML est lié à la feuille de style de la manière habituelle et est également lié au script.</li>
<li>Le script traite des éléments individuels du DOM. Il modifie le style du carré directement. Il modifie le style du bouton indirectement en changeant un de ses attributs.</li>
<li>En JavaScript, <code>document.getElementById("square")</code> fonctionne de manière similaire au sélecteur CSS <code>#square</code>.</li>
<li>En JavaScript, <code>backgroundColor</code> correspond à la propriété CSS <code>background-color</code>.</li>
<li>Votre navigateur possède une règle de style interne pour <code>button{{ mediawiki.external('disabled=\"true\"') }}</code> qui modifie l'apparence du bouton lorsqu'il est désactivé.</li>
</ul>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: .5em;">
<caption>
Challenge</caption>
<tbody>
<tr>
<td>Modifiez le script pour que le carré se déplace vers la droite de 20 em lorsque sa couleur change et revienne à sa place lors de l'opération inverse.</td>
</tr>
</tbody>
</table>
<h4 id="Pour_continuer" name="Pour_continuer">Pour continuer</h4>
<p>Si vous avez eu des difficultés à comprendre cette page ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa <a>page de discussion</a>.</p>
<p>Dans cette démonstration, le document HTML est lié au script même si seul l'élément button utilise le script. Mozilla étend CSS afin qu'il puisse lier du code JavaScript (ainsi que du contenu et d'autres feuilles de style) aux éléments sélectionnés. La page suivante en fournit la démonstration : <b><a href="/fr/docs/CSS/Premiers_pas/Liaisons_XBL">Liaisons XBL</a></b></p>
|
