Tabella dei caratteri Ascii - Matematica con JavaScript - di Eliana Argenti e Tommaso Bientinesi

VISUALIZZARE L'INSIEME DEI CARATTERI ASCII IN UNA TABELLA

CHE COSA E' IL CODICE ASCII

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
var output ='<html><head><body><p align=center><table><CAPTION>INSIEME DEI CARATTERI ASCII</CAPTION>'
Alla variabile di tipo alfanumerico di nome output viene assegnato il testo che contiene i tag per aprire una pagina HTML ed inserirvi una tabella dal titolo 'INSIEME DEI CARATTERI ASCII'
APPROFONDIMENTO sulle tabelle
output+='<tr>'
Alla stringa contenuta nella variabile output viene concatenato il tag <tr> che inserisce la prima riga della tabella
for (j=1; j<=8; j++)
Iterazione enumerativa
Il valore iniziale per il contatore j è 1
La condizione per terminare è che sia j=8
L'incremento per il contatore è 1 (j++ equivale all'istruzione di assegnazione j=j+1; in altri termini incrementa di 1 il valore della variabile j
{
Parentesi che indica l'inizio del ciclo
output+='<td>Valore <td> Carattere '
Alla variabile output si assegna il suo valore precedente incrementato della stringa <td>Valore <td> Carattere che crea una colonna nella quale viene scritto 'Valore' seguita da una colonna nella quale viene scritto 'Carattere'
}
Parentesi di chiusura del ciclo.
In conclusione attraverso questo ciclo vengono create dinamicamente otto coppie di colonne nelle quali trova posto l'intestazione
for (i=1; i<=28; i++) {
Ciclo (esterno) per la predisposizione delle righe
output+='<tr>'
Alla stringa contenuta nella variabile output viene concatenato il tag <tr> che inserisce una riga della tabella
for (j=num; j<=num+7; j++) {
Ciclo (interno) per la predisposizione delle colonne e relativo contenuto. Questo ciclo sarà eseguito per intero prima che il controllo torni al ciclo esterno
output+='<td> <p align=right>'+j+'<td><b>'+'<p align=center>&#'+j;
Alla stringa contenuta nella variabile output viene concatenata una stringa contenente:
il tag <td> che inserisce una colonna della tabella;
il tag <p align=right> che allinea a destra il testo;
j che èil valore attuale del contatore;
il tag <td> che inserisce una colonna della tabella;
il tag <b> che scrive il testo in grassetto;
il tag <p align=center> che centra il testo;
&#'+j che permette la visualizzazione del carattere che ha il valore Ascii corrispondente a j
}
Parentesi di chiusura del ciclo interno. In conclusione attraverso questo ciclo vengono create dinamicamente otto coppie di colonne per ogni riga creata dal ciclo esterno.
num=num+8
Viene incrementato di 8 il valore della variabile num che costituisce il valore iniziale della vatiabile j del ciclo interno. In questo modo in corrispondenza della prima riga vengono scritti i primi 8 caratteri, in corrispondenza della seconda i caratteri dal nono al sedicesimo... e così via.
}
Parentesi di chiusura del ciclo esterno.
'</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

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 8 caratteri in ogni riga, preceduti dai rispettivi valori, e quindi abbiamo bisogno di 28 righe.
Si tratta di utilizzare un ciclo for nidificato, secondo il seguente codice:

Le singole righe del codice sono commentate nella sezione Facciamo il punto a sinistra nella pagina.

ECCO IL CODICE COMPLETO

Copia ed incolla questo codice fra i tags <HEAD> ed </HEAD> della pagina HTML.

Crea un bottone con il seguente codice, da inserire fra i tags <BODY> e </BODY> :
<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):

webfract@tin.it