Contatti

MATEMATICA CON JAVASCRIPT

VISUALIZZARE L'INSIEME DEI CARATTERI ASCII IN UNA TABELLA

Prima parte

F
acciamo il punto.
Spiegazione del codice:

var num=32: Nella variabile di tipo numerico di nome num viene memorizzato il valore 32, che corrisponde al primo carattere stampabile e visualizzabile.
+=: assegna alla variabile di sinistra il risultato della concatenazione della variabile. stessa con il contenuto dell'espressione a destra.
ESEMPIO
Se x = "ciao" ,x += "a tutti" assegna alla variabile x il valore ciao a tutti.

APPROFONDIMENTO

margin-left:auto; margin-right:auto;': La tabella è centrata.
border: 1px solid #cccccc;: Il bordo di 1 pixel è di colore grigio.
border-collapse:separate;: Il bordo mostrato nel modo tradizionale (a differenza di collapse). Abbiamo aggiunto questa proprietà, che è di default, per permettervi di cambiarla con facilità.
CAPTION: Didascalia della tabella

APPROFONDIMENTO SULLE TABELLE

for (i=1; i<=14; i++) {

Ciclo (esterno) per la predisposizione delle righe che in tutto saranno 14.

output+='<tr>'

Il tag <tr> inserisce una riga della tabella per ogni valore di i.

for (j=num; j<=num+15; j++) {

Ciclo (interno) per la predisposizione delle colonne e relativo contenuto.
j varia fra num, che è stato inizialmente posto = 32, e num + 15: in questo modo verranno a formarsi 16 colonne.
Questo ciclo sarà eseguito per intero prima che il controllo torni al ciclo esterno

}

Parentesi di chiusura del ciclo interno.

num+=16.

Ora num si incrementa di 16 in modo da continuare la numerazione alla prossima riga: dunque nella prima riga avremo i caratteri da 32 a 47, nella seconda da 48 a 63 e così via.

}

Parentesi di chiusura del ciclo esterno.

output+= '</table>'

tag di chiusura della tabella

document.write(output)

Metodo dell'oggetto document. Il parametro posto in parentesi indica che deve essere visualizzato sullo schermo il contenuto della variabile output.

document.close()

Metodo dell'oggetto document. Si comunica al browser che è terminata la procedura di apertura della finestra e di scrittura del documento. Se non si include questa riga di codice non avrà luogo la stampa né altri eventuali comandi sulla pagina che abbiamo appena aperta.

}

Parentesi di chiusura della funzione

IN EVIDENZA DAL SITO

www.tommasobientinesi.it

La passione per i viaggi e la natura nel nuovo sito di Tommaso Bientinesi

Abbiamo già visto come sia possibile visualizzare la sequenza dei valori ASCII e dei corrispondenti caratteri.
Ora vogliamo presentare i dati in una tabella, come si vede nell'esempio.

ANALISI DEL PROBLEMA

Dobbiamo visualizzare i caratteri rispettivamente corrispondenti ai numeri decimali compresi fra 32 e 255: in tutto 224 caratteri.
Decidiamo di inserire 16 caratteri in ogni riga, insieme ai rispettivi codici, e quindi abbiamo bisogno di 14 righe.
Si tratta di utilizzare un ciclo for nidificato; per la costruzione della tabella seguiremo le regole già presentate nella sezione CREARE UNA TABELLA.

Codice per la funzione(clic sull'area di testo per selezionare tutto).

Nel codice abbiamo spezzato le righe per permettere una migliore visualizzazione.

Analizziamo in particolare le righe di codice

output+='<td style="width:45px; height:45px;' - Stile per le misure di ogni cella: larghezza e altezza di 45 pixel
output+=' background-color:white; border: 1px solid #cccccc" text-align: center;' - Colore di sfondo bianco; testo centrato; bordo grigio di 1 pixel.
output+='<span style="font-size:24px">&#'+j + '</span>' - Con grandezza del carattere di 24 pixel si compone la stringa &#j, per ogni j.
Quando, ad esempio j=65, viene scritto &#65, che viene visualizzato come A.
output+='<br><span style="font-size:12px">'+ j; - Si va a capo; con grandezza del carattere di 12 pixel si scrive il codice.

Condiderato sempre l'esempio di j = 65, e tenuto conto dello stile, avremo la seguente visualizzazione

A
65

NOTA BENE - Le altre righe del codice sono commentate nella sezione Facciamo il punto a sinistra nella pagina.

Codice per il pulsante(clic sull'area di testo per selezionare tutto).

<form name="Mioform">
<input type=button value="Clicca" name="bottone" OnClick="javascript:codice()">
</form>

Ottieni la lista dei caratteri con il loro codice Ascii. Per vederla premi il bottone (se non lo hai fatto prima):

T
i potrebbero anche interessare

RIGUARDO AI CARATTERI

Tabella del codice ASCII ESTESO

Sequenze escape

I nomi di caratteri speciali

Visualizzare una ☆

I simboli matematici o lettere greche

Conoscere il codice ASCII di un carattere

RIGUARDO AL CODICE

Output dello script nel documento

Dove inserire il codice javascript

Ascii esteso con codice esadecimale

INDICE Prima parte