JavaScript

pagine di Roberto Ricci L.S. "A. Righi", Bologna.

Elementi di Stile e Grafica

Il World Wide Web Consortium (W3C) - l'organizzazione non a scopo di lucro responsabile della standardizzazione di HTML - ha creato STYLES in aggiunta a HTML 4.0 per definire come gli elementi HTML debbono essere visualizzati. Ciò aumenta le potenzialità di HTML, oltre a contrastare la diversificazione nelle interpretazioni tra Microsoft e Netscape. In particolare introduce alcune potenzialità grafiche.

Sintassi

Gli stili vengono aggiunti nei modi seguenti, l'ultimo dei quali prioritario:

di default del Browser

fogli di stile esterni, come nell'esempio seguente

<link rel="stylesheet" type="text/css" href="http://www.w3schools.com/stdtheme.css" />

fogli di stile interni tra <head> e </head>, con la forma seguente:
```
<STYLE>
  sel₁, ... ,sel_N {propr₁: valore; ... propr_K: valore;};
  ...
  sel₁, ... ,sel_M {propr₁: valore; ... propr_h: valore;};
</STYLE>
```
dove
- selettore è normalmente l'elemento/tag HTML di cui definire lo stile,
- proprietà è l'aspetto di stile da modificare; le proprietà degli oggetti Style possono essere raggruppate
  - Background
  - Border and Margin
  - Layout
  - List
  - Misc
  - Positioning
  - Printing
  - Scrollbar
  - Table
  - Text
  Il nome della proprietà di style in JavaScript è sostanzialmente lo stesso che nella sintassi di STYLE, eliminando il trattino se presente e iniziando le altre parti del nome con la lettera maiuscola, così background-color è nella sintassi di STYLE e backgroundColor nella sintassi JavaScript.
- valore è la modalità che la proprietà dovrà assumere come negli esempi seguenti:
```
 {background-image: url('../../../../gifs/flowers.gif'); background-attachment: scroll}
 {list-style-image: url(this.gif)}
 {font-size: 18pt; font-style: italic; text-align: center}
```
definizione di stile all'interno dell'elemento HTML con la forma seguente:
```
<marcatore  style="propr₁: valore;...pror_N: valore;"> ... </marcatore>
```

Selettori class e id

Allo stesso elemento HTML posono essere associati stili differenti come nell'esempio seguente:

H1.right {text-align: right}
H1.center {text-align: center}

in modo da definire due diversi stili di titoloni

<H1 class="right">
Questo paragrafo è allineato a destra.
</H1>

<H1 class="center">
Questo paragrafo è allineato al centro.
</H1>

Se non si precisa il nome di alcun marcatore, ad esempio

.center {text-align: center}

ogni elemento HTML sarà allineato al centro.

Il selettore class può essere applicato a più elementi nella stessa pagina. Invece il selettore id si applica sempre a un solo elemento. Ad esempio

H1#tit1{
	text-align: center;
	color: red
}

si applica al primo titolone con valore id uguale a tit1, mentre nel caso

*#verde {color: green}

si applica al primo elemento con valore id uguale a verde.

Nei CSS si possono inserire commenti tra "/*" e "*/", come nell'esempio seguente:

	/* Un commento */
H1{
	text-align: center;
	/* Un altro commento */
	color: red;
	font-family: arial
}

Esempi:

Stile e posizionamento testo
Mostra pop-up!
Istogramma
Barra che si allunga
posizionare un punto sul documento
visualizzare le coordinate di un punto (dove si fa click) sul documento
visualizzare le coordinate del puntatore sul documento
una simulazione del moto rettilineo uniforme
rimbalzi nel documento
onde unidimensionali
primo esempio di grafico di una funzione
grafico di una funzione
life di John Conway
movimento della luna
ombreggiature di un testo
orologio con le lancette
ragnatele
immagine in movimento (farfalla)
disegnini spostabili

Esercizi:

realizzare una simulazione del moto rettilineo uniforme in una direzione qualunque
realizzare una simulazione del moto di un proiettile (Soluz.)
realizzare una simulazione del moto armonico (Soluz.)

pagine di Roberto Ricci L.S. "A. Righi", Bologna. Ultima revisione