CODICI HTML -Esercitazioni all'uso dei comandi-

Argomenti trattati
1. Opzioni iniziali
     1.1Caselle testo e Pulsanti
      1.2 Visualizzazione Messaggi
      1.3 Utilizzo delle caselle "select"
      1.4 Utilizzo del contenitore "Div"
      1.5 L'istruzione -document.write()- il tag avvio automatico di un programma <body onload=''nomefunction()''>
2.  Opzione necessaria ad impostare solo caratteri numerici
      2.1 Valore (event.keyCode) di un tasto
      2.1 Valori interi
      2.2 Valori decimali
      2.3 Valori  frazionari
3.  Operazioni aritmetiche
4   Creazione automatica di un link
5.  Opzione necessaria ad eseguire un operatore ternario "if"
6.  Opzione necessaria ad eseguire un ciclo "for"
7.  Opzione necessaria ad impostare  caselle "selct"
8.  Opzione Input "Checkbox"
9.  La funzione switch-case
10 L'uso delle "function(valore1,valore2,ecc.) -Arrotondamento di un numero-"
11 Funzioni matematiche
12 Creazione automatica di caselle testo
13  Creazione automatica di una tabella atta ad accogliere dati numerici o letterari
     13.1 Colori elementi di un tabella
14  Creazione automatica di caselle testo -Invio dati ad altro documento html-
15 Archiviazione locale all'interno del browser dell'utente (Documento 1)
16 I Cookie
    16.0 Applicazione 0
      16.1 Applicazione 1
      16.2 Applicazione 2
      16.3 Applicazione 3 (Geotecnica) calcolo coefficiente di fondazione (fattori di capacità portante)
17 Archiviazione applicazioni con nome 
     Relativamente  l'esempio precedente 16.3  (Calcolo coefficiente di fondazione) viene proposta
     questa opzione con la quale è possibile, previa denominazione, archiviare svariate applicazioni.
18 Creazione schede dati
19   La Grafica  [Rileva dimensioni schermo]  [Disegna Linea, rettangolo, cerchio Testo] [disegna Poligono  ] 
                         [Crea mappa sensibile]  [Mappa sensibile] 
        19.0  Applicazione 0
        19.1  Applicazione 1 -Impostazione grafica coordinate punti-
          19.2  Applicazione 2 -Impostazione grafica palificate-
        19.3  Applicazione 3 -Mappa-   Applicazione 4 -Mappa- Applicazione 5 -Mappa-
 


11. Caselle testo e pulsanti    
 1.1 Pulsanti e caselle testo
In questo ambito è prevista la   creazione  di una casella testo atta ad accogliere l'evento conseguente alla "pressione" di un pulsante appositamente creato per determinare  l'effetto di tale azione.
   
 


2..Opzione necessaria ad impostare solo caratteri numerici (Interi, decimali e frazionari ) 
2.1  Valore (event.keyCode) di un tasto 

In questa sessione è possibile visualizzare con il tasto "visualizza" i codici numerici associati all'evento nella area di testo scorrevole allocata a destra. Inoltre con la  pressione  di un tasto nella prima casella si può conoscere  il relativo  numero associato riportato nella seconda casella.
                                                                                                      
       Clicca un  Tasto  >>>>      Codicecorrispondente  >>>    
2.1 Impostazione solo caratteri numerici (valori interi)   
Il codice consente di operare l'inserimento, nella casella a sinistra, di un dato costituito da soli caratteri numerici che con il comando "esegui" può essere trasferito nella casella di destra.
   
2.2 Impostazione solo caratteri numerici (valori decimali)   
Il codice , operando coq sopra,   oltre all'impostazione   di soli caratteri numerici consente l'acquisizione del punto decimale.
     
2.3 Opzione necessaria ad impostare solo caratteri frazionari  
Il codice esegue, in successione, l'estrazione  del numeratore, del denominatore ed in conclusione la divisione dei due numeri
     Numeratore     Denominatore   Risultato
 


3.Operazioni aritmetiche   
Come  applicazione degli elementi definiti precedentemente, si propone un esempio che  , per due numeri  da inserire in caselle testo appositamente  create,  prevede   di effettuare le quattro operazioni, attivabili con altrettanti pulsanti associati alle "function" contenente i codici dei calcoli da elaborare.
Primo numero         
Secondo numero             Risultato   
 


4 Creazione automatica di un link   
La   creazione automatica di un   collegamento ipertestuale,  connesso ad un file il cui  percorso deve essere inserito nella casella testo sottostante, si concretizza con l'utilizzo di una "function"  legata al  pulsante "crea link".  Il  testo sensibile  conseguente, pronto per essere cliccato,  verrà visualizzato nella riga posizionata  sotto lo stesso comando. Contestualmente il codice  creato automaticamente necessario allo scopo, viene inserito nella casella “area testo”. Con il pulsante  "Edita codice"  è possibile editare l’intero listato che definisce la porzione di pagina di cui al presente paragrafo
Percorso del file a cui associare il collegamento ipertestuale 
  
Area testo        
 


5. Opzione necessaria ad eseguire un operatore ternario "if" 
Il codice esegue il confronto fra due numeri da cui scaturisce  la valutazione in merito alla quale viene accertato se si ha l'eguaglianza oppure se  il primo numero  è maggiore o minore del secondo.
Numero 1                  Numero 2                   
    
 


6. Opzione necessaria ad eseguire un ciclo "for" 
Il codice esegue delle operazioni ripetute in cui per ogni ciclo operato, da un valore minimo (Min)  ad un valore massimo (Max), effettua il  prodotto fra il relativo indice e l'incremento impostato
Val. Min           Val. Max            Incremento           
                                                                                                                                            
 


7. Opzione necessaria ad impostare  caselle "selct" 
La pressione del tasto "Esegui" determina  l'inserimento, nella  cella apposita "Area di stampa 2", della data recedentemente impostata. Vengono  creati altresì, un testo, inserito in un'area di stampa"Area di stampa 1", in cui è riportata la corrispondenza fra i  mesi e le relative notazioni numeriche,  ed infine due ambiti, "Area di stampa 3" e "Area di stampa 4" ,  in cui sono evidenziati alcune operazioni utili a individuare se l'anno è bisestile o meno, 
    Area di stampa 1          Area di stampa 2
                       Area di stampa 3           Area di stampa 4
 


 8.Opzione Input "Checkbox"         
La pressione  dei tasto "Visualizza (1)" e "Visualizza (2)" , in relazione alle opzioni (Scelta1, Scelta2, Scelta3,) previste  nell'esempio di questo  codice, determina rispettivamente:
1) l'inserimento nella prima casella "Text"  delle diciture Opzione1 - Opzione2 - Opzione3 ) o la combinazione di queste, a seconda se vengono operate più scele corrispondenti agli  indici 1, 2, 3
2)l'inserimento nella seconda  casella "TextArea"  di una delle seguenti  dicitura
      --->E' stata attivata l'opzione di cui alla scelta1 avente un Checkbox1.name =Opzione1
      --->E' stata attivata l'opzione di cui alla scelta2 avente un Checkbox2.name =Opzione2
      --->E' stata attivata l'opzione di cui alla scelta2 avente un Checkbox3.name =Opzione3
   o la combinazione di queste, a seconda se vengono operate più scele corrispondenti agli
    indici 1, 2, 3
Scelta1 Scelta2   Scelta3
   
     
 


9. Opzione  la funzione switch-case     
La funzione in esame, a seconda della scelta operata nell'ambito della prima casella  select (in cui vengono proposti gli indici  1, 2 e 3)  visualizza, con la pressione del tasto esegui,  uno dei seguenti  messaggi:
              "Viene elaborata la parte di codice caratterizzata dall'indice 1"
              "Viene elaborata la parte di codice caratterizzata dall'indice 2"
              "Viene elaborata la parte di codice caratterizzata dall'indice 3" 
              
 


10.L'uso delle"function nomefunz (valore1,valore2,ecc.)"  -Arrotondamento di un numero
Le istruzioni previste in   questa sessione  -utilizzando le proprietà della  "function nomefunz(var1 var2..)",  in relazione ai valori definiti ed inviati da un altro ambito-  consentono di effettuare i calcoli programmati in questo contesto  con l'utilizzo della  variabile "nomenomefunz(var1 var2..)"  conseguentemente aggiornata. Nel caso particolare tale variabile, aggiornata con invii alla Function preposta al calcolo degli arrotondamenti  di un numero, viene inserita nella corrispondente  casella  di cui alle  opzioni riportate di seguito.
Numero 
              Numero Arrotondamento                   Arrotondamento per  difetto                 Arrotondamento in funz.  del  decimale
                       per eccesso                                           (troncamento)                                  finale (Maggiore  o minore  di 5)
                                                                        
                                                                       
                                                                       
                                                                       
 


11. Funzioni matematiche  
1 Numero  (n)                    2°Mumero(m)                                   Risultato   
E' possibile esportare i codici associati alle varie funzioni matematiche di cui ai pulsanti allocati  in questa sezione. Tale opzione può essere attuata con l'utilizzo del link che automaticamente viene visualizzata cliccando il pulsante connesso alle singole funzioni. Il link di riferimento è dato dalla seguente notazione: "Esporta funzione..............Edita codice"
11.1 Estrai caratteri da una  espressione letteraria (da una stringa)r>
Stringa        
 Estrazione in riferimento alle lettere                                 Lettera iniziale               Lettera finale             
Estrazione in riferimento alla posizione delle lettere      Numero Lett.iniziale       Numero Lett.finale    
   N.Caratteri         SottoStringa estratta      
 


12. Creazione automatica di caselle testo

Numero di righe              Numero di colonne  

         

12.1. Acquisizione  dati da caselle testo create automaticamente  
 


13 Creazione automatica di una tabella atta ad accogliere dati numerici o letterari
Imposta numero di colonne                              
Imposta numero di righe                        
   
 
Con il pulsante allocato a destra è possibile provare l'opzione (il link) creata con la procedura copia-incolla del  codice editabile con il comando "Edita codice "