Come utilizzare Java Script per aggiungere il tempo alla tua pagina web

September 22

Come utilizzare Java Script per aggiungere il tempo alla tua pagina web


JavaScript è un linguaggio di programmazione che estende la funzionalità di default di un browser. Anche se non è possibile aprire o salvare documenti sul disco rigido (per motivi di sicurezza), è possibile creare grafici, visualizzare il tempo di esecuzione ed eseguire altre funzioni.

Utilizzando JavaScript per visualizzare l'ora nella pagina Web vi introdurrà a molti concetti e tecniche che guideranno i vostri progetti di programmazione futuri. In particolare, imparerete gli elementi di programmazione event-driven. Questo approccio di programmazione sottolinea scrittura di codice di programma che viene eseguito quando si verifica un evento particolare (ad esempio un clic del mouse, conto alla rovescia), piuttosto che un tempo predeterminato.

istruzione

1 Digita il codice HTML alla fine di questo passo in una nuova istanza di Blocco note di Windows (o altri word processor). Questo testo stampe codice alla finestra del browser, un primo passo essenziale nella creazione di un display in esecuzione di tempo.

<Html>

<Head>

<Script type = "text / javascript">

function funzione () {

var w = document.getElementById ( "mywindow");

w.innerHTML = "Il tempo andrà qui";

}

</ Script>

</ Head>

<Body onLoad = "myfunc ();" >

<Div id = "mywindow">

</ Div>

</ Body>

</ Html>

2 Salvare il documento come "Testo normale" con un nome che termina con l'estensione "HTM". Questa azione assicura che Windows chiamerà browser predefinito del PC per aprire il documento, a differenza di qualche altro programma.

3 Fare doppio clic sul file appena salvato per rendere il browser apre il documento. Il browser visualizzerà il messaggio "Il tempo andrà qui."

(Se il browser visualizza un messaggio relativo a sicurezza e bloccato gli script, fare clic con il messaggio e selezionare "Consenti contenuto bloccato." Inoltre, fai clic su "Sì" alla finestra di dialogo di sicurezza che appare dopo il messaggio appena citato.)

4 Tipo, dopo la linea del documento che inizia con "var = w", questa seguente dichiarazione, che recupera la data e l'ora del sistema:

var d = new Date ();

5 Digitare oltre la linea che inizia con "w.innerHTML =" la seguente riga di revisione, che visualizza l'uscita del comunicato si è aggiunto nell'ultimo passaggio:

w.innerHTML = d;

Premere il tasto "Control-S" per ri-salvare il documento.

6 Stampa, nella finestra del browser che visualizza il documento HTML, "F5", che visualizzerà il tempo nella finestra del browser. Il tempo non si aggiorna ancora automaticamente, ma ti rendono farlo nei seguenti passaggi.

7 Digitare oltre la linea che inizia con "<onLoad del corpo>" la seguente riga di revisione:

<Body onLoad = "inizializzazione ();" >

Questa affermazione rivisto chiama una nuova funzione, che gestisce un conto alla rovescia JavaScript utilizzato per recuperare più volte l'ora corrente.

8 Tipo, poco prima del "</ script>" tag HTML, la nuova funzione di cui al punto precedente:

funzione initialize () {

var tout = setTimeout ( "myfunc ()", 1000);

}

9 Tipo, subito dopo la dichiarazione che inizia con "w.innerHTML =", questa nuova dichiarazione.

var tout = setTimeout ( "myfunc ()", 1000);

Questi cambiamenti si basano sulla funzione timer setTimeout JavaScript (), che chiama la funzione per visualizzare l'ora corrente, "myfunc." Ogni volta che la funzione viene chiamata, setTimeout viene chiamato di nuovo, che crea un ciclo infinito che visualizza il tempo di esecuzione.

10 Premere il tasto "Control-S", quindi premere "F5" nella finestra del browser del documento. Il tempo sarà ora aggiornare automaticamente.