July 11
JavaScript è un linguaggio di scripting che può essere incluso in una pagina Web, viene eseguito in un browser Web e si può accedere dopo il caricamento della pagina Web. Queste caratteristiche rendono JavaScript ideale per aggiungere l'interattività di elementi di design di una pagina Web, consentendo loro di fornire risposte basate su azioni dell'utente. Ad esempio, supponiamo che quando un utente posiziona il cursore su un'immagine, un file musicale dovrebbe svolgere. Questo tipo di interazione dinamica può essere implementato utilizzando JavaScript.
1 Utilizzare il browser Web per aprire un motore di ricerca e la ricerca di un'immagine gratuitamente (.jpeg) da utilizzare nella pagina Web. Scarica l'immagine e salvarla. Inoltre, cercare un file audio gratuito (.mp3) e scaricare il file nella stessa posizione.
2 Creare un nuovo file in un editor di testo chiamato "imagesound.htm" e salvarlo. Questo file conterrà l'immagine e l'audio, così come le funzioni JavaScript che attivare e disattivare la musica in base alle azioni dell'utente. Dovrebbe essere formattato in questo modo:
<Html>
<Head>
</ Head>
<Body>
</ Body>
</ Html>
3 Modifica imagesound.htm e posizionare due funzioni JavaScript all'interno del "<head>" e "</ head>" tag. La prima funzione verrà chiamato quando l'utente posiziona il cursore sopra l'immagine e la seconda funzione verrà chiamata quando l'utente sposta il suo cursore lontano dall'immagine. Posizionare le funzioni all'interno JavaScript <script> e </ script> tag, in questo modo:
<Html>
<Head>
<Script language = tipo "javascript" = "text / javascript">
Funzione enableSound (soundfile) {
}
Funzione disableSound () {
}
</ Script>
</ Head>
<Body>
</ Body>
</ Html>
4 Modificare il ") enableSound (" la funzione. Questa funzione prende il nome del file audio e lo utilizza per creare un oggetto audio. L'oggetto audio viene inserito in un elemento <span> chiamato "hidden_span" utilizzando la proprietà innerHTML. La codifica dovrebbe apparire come questo:
<Html>
<Head>
<Script language = tipo "javascript" = "text / javascript">
Funzione enableSound (soundfile) {
document.getElementById ( 'hidden_span'). innerHTML = "<object type = \" / x-mpeg "data = \" audio \ "+ soundfile +" \ "width = \" 0 \ "height = \" 0 \ " nascosto = \ "true \"> ";
}
Funzione disableSound () {
}
</ Script>
</ Head>
<Body>
</ Body>
</ Html>
5 Modificare il ") disableSound (" la funzione. Questa funzione riporta proprietà innerHTML l'elemento "hidden_span" di nulla quando viene chiamato. Lo script dovrebbe apparire come questo:
<Html>
<Head>
<Script language = tipo "javascript" = "text / javascript">
Funzione enableSound (soundfile) {
document.getElementById ( 'hidden_span'). innerHTML = "<object type = \" / x-mpeg "data = \" audio \ "+ soundfile +" \ "width = \" 0 \ "height = \" 0 \ " nascosto = \ "true \"> ";
}
Funzione disableSound () {
. Document.getElementById ( 'hidden_span') innerHTML = "";
}
</ Script>
</ Head>
<Body>
</ Body>
</ Html>
6 Aggiungere l'immagine scaricata per imagesound.htm utilizzando l'istruzione. Inserire il codice per chiamare il "enableSound ()" e "disableSound ()" funzioni utilizzando l'evento "onMouseOver" chiamare "enableSound ()" e l'evento "onMouseOut" chiamare "disableSound ()." Utilizzare il nome del audio scaricato quando si chiama "enableSound ()," in questo modo:
<Html>
<Head>
<Script language = tipo "javascript" = "text / javascript">
Funzione enableSound (soundfile) {
document.getElementById ( 'hidden_span'). innerHTML = "<object type = \" / x-mpeg "data = \" audio \ "+ soundfile +" \ "width = \" 0 \ "height = \" 0 \ " nascosto = \ "true \"> ";
}
Funzione disableSound () {
. Document.getElementById ( 'hidden_span') innerHTML = "";
}
</ Script>
</ Head>
<Body>
<Img onMouseOver = "enableSound ( 'my_mp3.mp3')" onMouseOut = "disableSound ()">
</ Body>
</ Html>
7 Aggiungere un elemento "<span>" per imagesound.htm. Posizionare l'elemento sotto l'immagine e identificarla con l'id " 'hidden_span'."
<Html>
<Head>
<Script language = tipo "javascript" = "text / javascript">
Funzione enableSound (soundfile) {
document.getElementById ( 'hidden_span'). innerHTML = "<object type = \" / x-mpeg "data = \" audio \ "+ soundfile +" \ "width = \" 0 \ "height = \" 0 \ " nascosto = \ "true \"> ";
}
Funzione disableSound () {
. Document.getElementById ( 'hidden_span') innerHTML = "";
}
</ Script>
</ Head>
<Body>
<Img onMouseOver = "enableSound ( 'my_mp3.mp3')" onMouseOut = "disableSound ()">
<Span id = 'hidden_span'> </ span>
</ Body>
</ Html>
8 Salva "imagesound.htm" per la stessa posizione dei file audio e di immagine. Aprire imagesound.htm in un browser Web e utilizzare il cursore per attivare e disattivare il file musicale.