January 12
JavaScript è un linguaggio di scripting lato client che può essere utilizzato per modificare dinamicamente quasi ogni aspetto di una pagina web, compresi gli stili che sono definiti e realizzati con i fogli di stile a cascata (CSS). JavaScript consente ai programmatori di creare funzioni che vengono eseguiti quando un utente interagisce con l'interfaccia utente, ad esempio, facendo clic sui pulsanti o collegamenti ipertestuali. Queste funzioni possono successivamente alterare alcuni aspetti dell'interfaccia utente, per esempio, cambiando il colore di un "<table>" tag HTML sfondo.
1 Aprire un editor di testo e creare un nuovo file chiamato changeBackground.html. Aggiungere alcuni tag HTML per il file che includono un tag aperto "<html>", un "<head>" tag aperto, una chiusura "</ head>" tag, un open "<body>" tag, una chiusura "< / body> "tag, e una chiusura" </ html> tag ". Questi tag comprendono una struttura di base pagina HTML.
<Html>
<Head> </ head>
<Body> </ body>
</ Html>
2 Modifica changeBackground.html e aggiungere un "<style>" tag tra il "<head>" e "</ head>" tag. Impostare l'attributo di stile "tipo" a "text / css". Creare uno stile per il "<table>" tag HTML e impostare la larghezza dello stile di "200px", l'altezza dello stile di "200px", e dello stile background-color a "blu". Inserire una "<style />" tag per chiudere lo stile.
<Html>
<Head>
<Style type = "text / css '>
tavolo {
width: 200px;
height: 200px;
background-color: blue;
}
</ Style>
</ Head>
<Body> </ body>
</ Html>
3 Aggiungere un tag JavaScript "<script>" tra il "<head>" e "</ head>" tag immediatamente dopo il tag "</ style>". Aggiungere una funzione JavaScript dopo il tag "<script>" nome "CHANGETABLE ()". La funzione CHANGETABLE () accetta un argomento, "colore", e utilizza il valore dell'argomento al colore di sfondo del tavolo. Inserire un paio di parentesi graffe ( "{}") per indicare la posizione per il codice della funzione e inserire un tag "</ script>" per chiudere lo script.
<Html>
<Head>
<Style type = "text / css '>
tavolo {
width: 200px;
height: 200px;
background-color: blue;
}
</ Style>
<Script type = "text / javascript '>
Funzione CHANGETABLE (colore)
{
}
</ Script>
</ Head>
<Body> </ body>
</ Html>
4 Modificare la funzione di CHANGETABLE. Aggiungere un comando tra le due parentesi graffe che imposta il colore di una tabella di fondo, "pagetable", per il colore memorizzato nella variabile colore.
<Html>
<Head>
<Style type = "text / css '>
tavolo {
width: 200px;
height: 200px;
background-color: blue;
}
</ Style>
<Script type = "text / javascript '>
Funzione CHANGETABLE (colore)
{
. Document.getElementById ( 'pagetable') style.backgroundColor = colore;
}
</ Script>
</ Head>
<Body> </ body>
</ Html>
5 Aggiungere un collegamento ( "<a>") tra il tag "<body>" e "</ body>" tag. Impostare il valore href del link "javascript: void (0)" per tornare null quando il link viene cliccato. Aggiungere un evento onclick () per il collegamento che chiama la funzione CHANGETABLE (colore) e passa il valore 'verde'. Dare il link il valore di testo "Modificare il colore tabella di verde." Inserire un tag di chiusura "</a>".
<Html>
<Head>
<Style type = "text / css '>
tavolo {
width: 200px;
height: 200px;
background-color: blue;
}
</ Style>
<Script type = "text / javascript '>
Funzione CHANGETABLE (colore)
{
. Document.getElementById ( 'pagetable') style.backgroundColor = colore;
}
</ Script>
</ Head>
<Body>
<a href="javascript:void(0)" onclick="changeTable('green');"> Cambia colore tavolo verde. </a>
</ Body>
</ Html>
6 Aggiungere un secondo link tag ( "<a>"). Impostare il valore href del tag per "javascript: void (0)" per tornare null quando il link viene cliccato. Aggiungere un evento onclick () per il collegamento che chiama la funzione CHANGETABLE (colore) e passa il valore 'giallo'. Dare il link il valore di testo "Cambia colore tabella di giallo." Inserire un tag di chiusura "</a>".
<Html>
<Head>
<Style type = "text / css '>
tavolo {
width: 200px;
height: 200px;
background-color: blue;
}
</ Style>
<Script type = "text / javascript '>
Funzione CHANGETABLE (colore)
{
. Document.getElementById ( 'pagetable') style.backgroundColor = colore;
}
</ Script>
</ Head>
<Body>
<a href="javascript:void(0)" onclick="changeTable('green');"> Cambia colore tavolo verde. </a>
<a href="javascript:void(0)" onclick="changeTable('yellow');"> Cambia colore tabella di colore giallo. </a>
</ Body>
</ Html>
7 Aggiungere un tag "<table>" dopo i tag di collegamento. Dare il tag "<table>" un id "pagetable". Aggiungere un "<tr>" tag aperto e un tag aperto "<td>". Chiudere il "</ td> tag e chiudere il" </ tr> "tag. Chiudere il" tag </ table> "e salvare e chiudere changeBackground.html.
<Html>
<Head>
<Style type = "text / css '>
tavolo {
width: 200px;
height: 200px;
background-color: blue;
}
</ Style>
<Script type = "text / javascript '>
Funzione CHANGETABLE (colore)
{
. Document.getElementById ( 'pagetable') style.backgroundColor = colore;
}
</ Script>
</ Head>
<Body>
<a href="javascript:void(0)" onclick="changeTable('green');"> Cambia colore tavolo verde. </a>
<a href="javascript:void(0)" onclick="changeTable('yellow');"> Cambia colore tabella di colore giallo. </a>
<Table id = "pagetable">
<Tr>
<Td>
</ Td>
</ Tr>
</ Table>
</ Body>
</ Html>
8 Aprire changeBackground.html in un browser web. Un 200px blu da 200px tabella verrà visualizzata sulla pagina. Clicca su "Cambia Colore tavolo verde." Link e verificare che lo sfondo del tavolo diventa verde. Clicca su "Cambia Colore tavolo al giallo." Link e verificare che lo sfondo del tavolo cambia in giallo.