December 17
Uno dei modi più semplici per sfruttare il modello a oggetti documento HTML (elementi e contenitori) è quello di utilizzare JavaScript. JavaScript è un linguaggio lato client che ha una varietà di funzioni che consentono agli sviluppatori web di identificare gli elementi o contenitori e manipolarle in base all'input dell'utente. Utilizzando elemento attributi, quali ID e nomi, i programmatori possono inserire contenitori ed elementi (quali tabelle, righe e celle della tabella), in sezioni di documenti HTML (come elementi DIV).
1 Aprire un editor di testo e creare un file HTML che include un tag "<html>", un tag "<head>", un "</ head>" tag, un "<body>" tag, un "</ body> "tag, e un" </ html> tag ". Nome del file tableDiv.html.
2 Modifica tableDiv.html e aggiungere due delimitatori di script ( "<script>" e "</ script>") tra il pagina "<head>" e "</ head>" tag. Assegnare un attributo "tipo" per il primo tag <script> e impostarlo su "text / javascript". Impostare l'attributo type di "text / javascript" dice al browser di interpretare qualsiasi testo posizionato tra i <script> delimitatori come JavaScript.
3 Aggiungere una funzione JavaScript tra i tag "</ script>" tableDiv.html di "<script>" e. Nome della funzione "CreateTable ()" e seguire il nome con due parentesi graffe ( "{" e "}").
4 Aggiungere una variabile denominata "TableID" tra parentesi graffe di apertura e chiusura della funzione. Utilizzare il metodo document.getElementById () per recuperare un riferimento all'elemento che conterrà il tavolo, o "myTable". Assegnare l'elemento alla variabile TableID.
5 Impostare lo stile della variabile TableID di "blocco". Questo stile indica che la tabella creata deve essere generata in una scatola di blocco.
6 Aggiungere un tag "<div>" tra createTable.html di "<body>" e "<body>" tag. Impostare il valore "id" del tag "myTable" e impostare l'attributo del tag "stile" a "display: none". Questo stile grafico indica che la casella di blocco del div non dovrebbe essere generato. Chiudere il tag "</ div>".
7 Aggiungere un tag "<table>" tra createTable.html di "<div>" e "</ div>" tag e dare al tavolo un "= confine 1" attributo. Aggiungere due serie di "<tr>" tag e due serie di "<td>" tag tra l'aperto "<table>" e chiudi "</ table>" tag. Posizionare il testo "cella 1" tra la prima serie di "<td>" tag e inserire il testo "cella 2" tra la seconda serie di "<td>" tag.
8 Aggiungere un tag "<tasto>" subito dopo la chiusura tag div ( "</ div>"). Assegnare un evento "onClick" per il pulsante e impostare il valore della manifestazione per "javascript: CreateTable ()". Questo valore indica che la funzione CreateTable () dovrebbe essere chiamato quando il pulsante viene premuto. Dare il pulsante il testo "Fare clic per aggiungere la tabella alla DIV" e chiudere il "<button />" tag. Dopo aver seguito questi passi (1-8), createTable.html cercherà, come mostrato nell'esempio seguente. Salvare e chiudere createTable.html.
<Html>
<Head>
<Script type = "text / javascript">
funzione CreateTable ()
{
var TableID = document.getElementById ( 'myTable');
tableId.style.display = 'blocco';
}
</ Script>
</ Head>
<Body>
<Div id = stile "myTable" = "display: none">
<Table border = "1">
<Tr> <td> cella 1 </ td> </ tr>
<Tr> <td> cella 2 </ td> </ tr>
</ Table>
</ Div>
<Button onclick = "javascript: CreateTable ();"> Fare clic per aggiungere la tabella alla DIV </ button>
</ Body>
</ Html>
9 Aprire createTable.html in un browser web. Fare clic sul pulsante "Clicca per aggiungere la tabella alla DIV" per creare la tabella all'interno del DIV "myTable".