Come modificare HTML testo con variabili JavaScript

November 7

Come modificare HTML testo con variabili JavaScript


JavaScript è un linguaggio di scripting lato client che utilizza le variabili che si comportano più o meno allo stesso modo in cui le variabili si comportano in altri linguaggi di programmazione. variabili JavaScript non devono essere dichiarate prima del loro utilizzo, né hanno bisogno di avere un tipo assegnata o memoria allocata. È possibile utilizzare variabili JavaScript per contenere i valori al fine di aggiornare la maggior parte degli oggetti della pagina Web in modo dinamico, come testo o grafica. Inoltre, utilizzare JavaScript per aggiornare la proprietà "innerHTML" di un elemento HTML; questo è un metodo per modificare dinamicamente interi campi di testo al volo.

istruzione

1 Aprire un editor di testo e creare un nuovo file chiamato "changeTextVars.html." Digitare sei tag HTML nel file:

<Html>

<Head> </ head>

<Body> </ body>

</ Html>

Salva "changeTextVars.html."

2 Mettere un tag script aperto JavaScript - "<script>" - all'interno del codice HTML "<head>" tag. Impostare il valore del tag del "<script>" "tipo" a "text / javascript" e chiudere il "</ script>" tag:

<Html>

<Head>

<Script type = "text / javascript">

</ Script>

</ Head>

<Body> </ body>

</ Html>

3 Aggiungere una funzione JavaScript tra le "<script>" e "</ script>" tag denominati "ChangeText ()." Il "ChangeText ()" funzione richiede una variabile denominata "Monstername" come argomento:

<Html>

<Head>

<Script type = "text / javascript">

Funzione ChangeText (Monstername)

{

}

</ Script>

</ Head>

<Body> </ body>

</ Html>

4 Modificare la funzione "ChangeText". Utilizzare la funzione "document.getElementById" per modificare la proprietà "innerHTML" per il campo denominato "textToChange." Il "campo textToChange 'contiene il testo aggiornato con la variabile" Monstername ":

<Html>

<Head>

<Script type = "text / javascript">

Funzione ChangeText (Monstername)

{

document.getElementById ( 'textToChange') innerHTML = Monstername.;

}

</ Script>

</ Head>

<Body> </ body>

</ Html>

5 Aggiungere un tag "<p>" tra il codice HTML "<body>" e "</ body>" tag. Immettere del testo che visualizza il messaggio - come ad esempio "Il mio mostro preferito è:" - e chiudere il tag "</ p>". Assicurati di includere uno spazio dopo i due punti e prima del "</ p>" tag per separare il messaggio dal testo dinamico:

<Html>

<Head>

<Script type = "text / javascript">

Funzione ChangeText (Monstername)

{

document.getElementById ( 'textToChange') innerHTML = Monstername.;

}

</ Script>

</ Head>

<Body>

<P> Il mio mostro preferito è: </ p>

</ Body>

</ Html>

6 Inserisci una "<b>" tag aperto tra il "</ p>" tag dopo il "mio monstor preferita è:" "<p>" e il messaggio. Assegnare un "id" al "<b>" tag e impostare il valore a "textToChange." Ad esempio, digitare il testo "Dracula" dopo il "<b>" tag e chiudere il tag "</ b>":

<Html>

<Head>

<Script type = "text / javascript">

Funzione ChangeText (Monstername)

{

document.getElementById ( 'textToChange') innerHTML = Monstername.;

}

</ Script>

</ Head>

<Body>

<P> Il mio mostro preferito è: <b id = 'textToChange'> Dracula </ b> </ p>

</ Body>

</ Html>

7 Aggiungere un "<input>" tag HTML dopo il tag "<p>". Impostare il tipo di ingresso su "pulsante" e aggiungere un "onclick ()" evento che chiama la funzione "ChangeText" e passa il valore "Frankenstein". Impostare il "valore" campo di immissione attribuire a "cambiare il testo." Salvare e chiudere "changeTextVars.html."

<Html>

<Head>

<Script type = "text / javascript">

Funzione ChangeText (Monstername)

{

document.getElementById ( 'textToChange') innerHTML = Monstername.;

}

</ Script>

</ Head>

<Body>

<P> Il mio mostro preferito è: <b id = 'textToChange'> Dracula </ b> </ p>

<Input type = 'tasto' onclick = 'ChangeText ( "Frankenstein")' value = "Modifica testo">

</ Body>

</ Html>

8 Aprire "changeTextVars.html" in un browser Web. Fare clic sul pulsante "Modifica testo" per utilizzare la variabile "Monstername" per modificare il campo "textToChange" da "Dracula" a "Frankenstein".

Consigli e avvertenze

  • variabili JavaScript non devono essere dichiarate prima di utilizzarli. Tuttavia, utilizzando il "var" parola chiave la prima volta che si utilizza una variabile utilizzata è una buona pratica, come documenta in cui la variabile viene utilizzata per la prima nel codice.
  • variabili JavaScript sono maiuscole e minuscole e deve iniziare con una lettera o un carattere di sottolineatura.
  • Le variabili in JavaScript hanno regole ambito specifico.
  • Se è già stata dichiarata una variabile JavaScript, è possibile dichiarare ancora una volta senza incorrere in problemi con JavaScript. Tenere traccia delle dichiarazioni e le assegnazioni per evitare risultati inaspettati e bug codici difficili da trovare variabili.