F
acciamo il punto.
Argomenti correlati:
DOM
- Acronimo di document object model, modello a oggetti di un documento, è una piattaforma e un'interfaccia indipendente dal linguaggio che consente ai programmi e script di accedere e aggiornare dinamicamente il contenuto, la struttura e lo stile di un documento.
(Definizione tradotta da W3C)
APPROFONDIMENTO SUGLI OGGETTI
HTML DOM
- Ogni documento HTML caricato nella finestra di un browser diventa un oggetto document, che a sua volta è parte dell'oggetto window. HTML DOM definisce uno standard per l'accesso e la manipolazione di documenti HTML, consente quindi di ottenere, modificare, aggiungere o eliminare elementi HTML.
id
- Attributo HTML che serve a identificare univocamente un elemento. Per questo uno stesso id non può essere attribuito a più di un elemento nella stessa pagina.
ESEMPIO DI SINTASSI:
<div id = "MiaImmagine" src="...">
<span id = 'prodotto'>
- Uno Span è in pratica una sorta di foglio trasparente che viene "incollato" sopra alla pagina di testo nella posizione stabilita dagli attributi LEFT (distanza dal lato sinistro dello schermo) e TOP (distanza dal lato superiore). Se questi attributi mancano lo span viene posizionato nel punto esatto in cui viene dichiarato.
All'interno dei tags <span> e </span> può essere inserito tutto quanto si trova normalmente in una pagina HTML, come testo, immagini, tabelle, marquees, collegamenti ipertestuali. L'attributo id dà un nome allo span, che altrimenti non potrebbe essere richiamato, ad esempio, nei codici Javascript.
document.getElementById
- Restituisce l'elemento con l'identificatore indicato in parentesi.
SINTASSI: document.getElementById("identificatore")
Sostituire al posto di identificatore l'id dell'elemento a cui volete accedere.
innerHTML
- Proprietà che definisce sia il codice HTML che il testo inserito fra i tag che lo contengono.
Per poter cambiare l'innerHTML di un elemento occorre dotarlo di un id e quindi usare il metodo getElementById.
document.getElementById('prodotto').innerHTML
- Rispettando la gerarchia ad albero di javascript il costrutto intende
la proprietà innerHTML dell'elemento che ha id = 'prodotto' e che si trova nel documento attualmente caricato nella pagina.
Function
- Le funzioni in JavaScript permettono di scrivere del codice in un blocco in modo che possa essere utilizzato anche più volte quando sia necessario. La sintassi è:
function nome(argomenti){
istruzioni;
}
dove al posto di nome possiamo scrivere un termine che ci ricordi lo scopo della funzione stessa.
Le istruzioni vanno separate dal punto e virgola.
Per riferirsi, o chiamare, una funzione, basta usare questa sintassi:
nome(valore degli argomenti)
Se gli argomenti mancano, occorre comunque inserire le parentesi.
Ad esempio, noi abbiamo costruito la funzione function calcola() ed in seguito l'abbiamo richiamata scrivendo calcola().
|
La nostra guida "MATEMATICA CON JAVASCRIPT" si occupa di presentare programmi di matematica attraverso il linguaggio javascript, e di ognuno di essi cercheremo di dare un'esauriente spiegazione.
Molto spesso l'output dei programmi sarà visualizzato o in una finestra di alert, o in una nuova pagina.
Per chi è interessato, tuttavia, forniamo anche il modo di scrivere un risultato in un punto preciso del documento, attraverso le proprietà del DOM HTML document.getElementById(id) e innerHTML.
 Per il momento ci limitiamo a fornire uno strumento rapido per raggiungere il nostro scopo; comunque definizioni e spiegazioni essenziali dei termini si trovano nella sezione "Facciamo il punto" a sinistra della pagina.
ESEMPIO
Visualizzare o nascondere il prodotto di 3 × 2 tutte le volte che vogliamo. Seguite le istruzioni. Fate clic sul carattere = per ottenere il prodotto: 3 × 2 =
Fate clic su AGGIORNA per ripristinare: AGGIORNA
COME OTTENERE IL RISULTATO IN TRE MOSSE
Passo uno: preparate uno span dove poi far scrivere il numero 6 e dategli un id.
Codice: <span id = "prodotto"></span>
Passo due: preparate le funzioni opportune: function calcola() {
document.getElementById('prodotto').innerHTML = "6";
}
function aggiorna() {
document.getElementById('prodotto').innerHTML = " ";
}
Entrambe le funzioni accedono allo span che ha id = 'prodotto' e scrivono il testo opportuno e cioè 6, nel caso della funzione numero 1, uno spazio vuoto nel caso della funzione numero 2.
Passo tre: ora dovete attivare le funzioni attraverso un evento: noi abbiamo scelto un clic su un collegamento ipertestuale.
Codice per il carattere = : <a href="javascript:calcola()"> = </a>
Codice per il testo AGGIORNA : <a href="javascript:aggiorna()">AGGIORNA</a>
ECCO IL CODICE COMPLETO
Un clic sull'area di testo per selezionare
|
IN EVIDENZA DAL SITO 
CALCOLATRICE
SCIENTIFICA
CON SPIEGAZIONI
ED ESEMPI
TARTAMONDO - PER BAMBINI
AREA GIOCHI
ULTIMO ARRIVATO...
|
