JavaScript è un linguaggio di scripting lato client che viene spesso utilizzato per creare pagine Web dinamiche che rispondere all'input dell'utente, ad esempio quando un utente fa clic su un pulsante o posiziona il mouse su un'immagine. Nel linguaggio JavaScript utente azioni attivano "attributi di evento", ad esempio, onclick, onmouseover o onmouseout. Questi attributi di evento possono essere utilizzati per richiedere le funzioni che sono codificate per manipolare le parti dell'interfaccia utente, ad esempio il bordo di un'immagine.
Istruzioni
1
Aprire un editor di testo e creare un nuovo file denominato "mouseBorder.html". Aggiungere tag HTML al file che forniscono la struttura della pagina Web. Questi tag includono un tag "< head >" aperto, un tag di apertura "< html >", una stretta, un tag di chiusura "< / head >", un tag "< body >" aperto "< / body >" tag e una stretta "< / html >" tag.
2
Aggiungere un tag "< script >" tra il file "< head >" e "< / head >" tag, impostare l'attributo di tag < script > tipo "text/javascript" e chiudere il tag "< / script >".
< html >
< head >
< script type = "text/javascript" >
< / script >
< / head >
< corpo >< / corpo >
< / html >
3
Aggiungere una funzione JavaScript tra il file "< script >" e "< / script >" tag e nominare la funzione "hideShowBorder". La funzione di "hideShowBorder" accetta un argomento, denominato "borderWidth". La variabile "borderWidth" definisce la larghezza del bordo per visualizzare con un'immagine. Aggiungere una parentesi graffa aperta ("{") e una parentesi graffa di chiusura ("}") dopo la dichiarazione di funzione come un segnaposto per il codice della funzione "hideShowBorder".
< html >
< head >
< script type = "text/javascript" >
funzione hideShowBorder(borderWidth)
{
}
< / script >
< / head >
< corpo >< / corpo >
< / html >
4
Aggiungere il codice per la funzione di "hideShowBorder" tra l'Apri e Chiudi parentesi graffe. Questo codice utilizza la funzione di "Document. getElementById" JavaScript per impostare il valore dell'attributo "border" per un'immagine con l'id "borderImage". Il bordo verrà impostato con il valore del pixel passato alla funzione "hideShowBorder" con l'argomento "borderWidth".
< html >
< head >
< script type = "text/javascript" >
funzione hideShowBorder(borderWidth)
{
document.getElementById('borderImage').style.border = borderWidth + 'px tinta nero';
}
< / script >
< / head >
< corpo >< / corpo >
< / html >
5
Aggiungere un tag "< img >" tra il file "< body >" e "< / body >" tag. Impostare attributo "src" del tag "< img >" su un'immagine denominata "myimage. jpg". Dare il tag "< img >" l'id "borderImage".
< html >
< head >
< script type = "text/javascript" >
funzione hideShowBorder(borderWidth)
{
document.getElementById('borderImage').style.border = borderWidth + 'px tinta nero';
}
< / script >
< / head >
< corpo >
< img id = "borderImage" >
< / body >
< / html >
6
Aggiungere un tag HTML "< button >" sotto il tag "< img >", dare l'immagine il titolo "Mouse Over" e chiudere il tag "< / button >".
< html >
< head >
< script type = "text/javascript" >
funzione hideShowBorder(borderWidth)
{
document.getElementById('borderImage').style.border = borderWidth + 'px tinta nero';
}
< / script >
< / head >
< corpo >
< img id = "borderImage" >
< button > MOUSE sopra < / button >
< / body >
< / html >
7
Modificare il tag "< button >" e aggiunge una funzione di "onMouseOver" che passa il valore "5" per la funzione di "hideShowButton". Questo valore verrà impostato il bordo dell'immagine a "5 pixel" quando l'utente posiziona il mouse sopra il pulsante.
< html >
< head >
< script type = "text/javascript" >
funzione hideShowBorder(borderWidth)
{
document.getElementById('borderImage').style.border = borderWidth + 'px tinta nero';
}
< / script >
< / head >
< corpo >
< img id = "borderImage" >
< pulsante onMouseOver="hideShowBorder('5');" > MOUSE sopra < / button >
< / body >
< / html >
8
Modificare il tag "< button >" e aggiunge una funzione di "onMouseOut" che passa il valore "1" per la funzione di "hideShowButton". Questo valore verrà impostato il confine sull'immagine per "1 pixel" quando l'utente allontana il mouse dal pulsante. Salvare e chiudere mouseBorder.html.
< html >
< head >
< script type = "text/javascript" >
funzione hideShowBorder(borderWidth)
{
document.getElementById('borderImage').style.border = borderWidth + 'px tinta nero';
}
< / script >
< / head >
< corpo >
< img id = "borderImage" >
< pulsante onMouseOver="hideShowBorder('5');" onMouseOut="hideShowBorder('1');" > MOUSE sopra < / button >
< / body >
< / html >
9
Utilizzare un browser Web per aprire mouseBorder.html. Verificare che quando il mouse viene posizionato sul pulsante, il bordo dell'immagine cambia a "5 pixel". Quando il mouse viene spostato dal pulsante, il bordo dell'immagine diventa "1 pixel".
Consigli & Avvertenze
- Prestare attenzione durante l'implementazione di determinati eventi (ad esempio onload) perché il loro uso può causare cicli infiniti nell'interfaccia utente.
- Eventi JavaScript in grado di rilevare informazioni più specifiche circa l'interazione dell'utente, ad esempio che è stato fatto clic sul pulsante.
- Essere sicuri di controllare codice di evento in più browser, poiché l'implementazione dell'evento può essere implementata in modo diverso.
- Funzioni create per rispondere agli attributi dell'evento non verranno chiamate a meno che non si verifica l'evento.