September 16
Il Document Object Model JavaScript, o DOM, consente agli sviluppatori Web di localizzare, accedere e manipolare gli attributi di pagina Web oggetto. Una volta che viene utilizzato JavaScript per identificare correttamente un riferimento a un oggetto, in genere attraverso l'uso del suo id, può modificare gli attributi di visibilità, gli attributi dimensioni, attributi del carattere e molto altro ancora. JavaScript non è limitata alla modifica di singoli oggetti; attraverso l'uso di fogli di stile CSS e DOM JavaScript, gli sviluppatori possono modificare le pagine Web intere al volo, la creazione di pagine Web dinamiche che rispondono a una vasta gamma di interazioni con l'utente.
1 Aprire un editor di testo e creare un nuovo file chiamato showButton.html. Il tipico processo per la creazione di un nuovo file in un editor di testo è quello di selezionare "Nuovo" dal menu "File".
2 Aggiungere i seguenti tag HTML per showButton.html: "<html>", "<head>", "</ head>", "<body>", "</ body>" e "</ html>". Insieme, questi tag comprendono una pagina Web di base.
<Html>
<Head> </ head>
<Body> </ body>
</ Html>
3 Aggiungere un tag "<input>" per showButton.html, posizionando il tag tra il "<body>" e "</ body>" tag. Dare il tag input un attributo "tipo" "submit", un "id" attributo "invisiButton", un "valore" attributo "Sono visibile" e uno "stile" "visibility: hidden" attributo.
<Input type = "submit" id = valore "invisiButton" = "Io sono visibili" style = "visibility: hidden;">
4 Aggiungere un secondo "<input>" tag showButton.html subito dopo il primo tag "<input>". Dare a questo tag input un "tipo" attributo "invia", un attributo di "valore" "Clicca Qui per fare il primo pulsante sia visibile", un "id" attributo "showButton" e utilizzare un "onclick ()" JavaScript evento per chiamare il funzione "visibleButton".
<Input type = "submit" value = "Clicca per fare il primo pulsante visibile" id = "shownButton" onclick = "visibleButton ()">
5 Aggiungere un "<script>" delimitatore Javascript e una funzione JavaScript denominata "visibleButton" tra showButton.html di "<head>" e "</ head>" tag. Seguire la dichiarazione di funzione con due parentesi graffe ( "{}") per indicare la posizione del codice della funzione. Chiudere il JavaScript "</ script>" delimitatore.
<Script type = "text / javascript">
Funzione visibleButton () {}
</ Script>
6 Dichiarare una variabile denominata "buttonToShow" all'interno delle parentesi graffe della funzione visibleButton. Utilizzare il metodo "getElementById" JavaScript per recuperare l'elemento con l'id "invisiButton".
var buttonToShow = document.getElementById ( "invisiButton");
7 Impostare lo stile "buttonToShow" dell'elemento e attributi visibilità su "visibile". Dopo il punto 7, showButton.html apparirà come illustrato di seguito. Salvare e chiudere showButton.html.
<Html>
<Head>
<Script type = "text / javascript">
funzione visibleButton () {
var buttonToShow = document.getElementById ( "invisiButton");
buttonToShow.style.visibility = "visible";
}
</ Script>
</ Head>
<Body>
<Input type = "submit" id = valore "invisiButton" = "Io sono visibili" style = "visibility: hidden;">
<Input type = "submit" value = "Clicca per fare il primo pulsante visibile" id = "shownButton" onclick = "visibleButton ()">
</ Body>
</ Html>
8 Aprire showButton.html in un browser Web. Clicca su "Clicca per fare il primo pulsante visibile" pulsante e verificare che appare il pulsante "invisiButton".