Pri vytváraní stránok je niekedy potrebné, aby po kliknutí na tlačidlo umiestnené na stránke došlo v prehliadači k nejakej udalosti naprogramovanej autorom. Aby ste to dosiahli, musíte do vygenerovaného dokumentu vložiť kód JavaScript a spojiť ho s požadovaným tlačidlom. V závislosti od množstva kódu, ktoré je potrebné na implementáciu zamýšľanej udalosti, môžete použiť rôzne spôsoby pripojenia tlačidla k kódu.
Inštrukcie
Krok 1
Volania kódu JavaScript sú najčastejšie spojené s udalosťou onclick, to znamená s kliknutím na ľavé tlačidlo myši. Ak nepotrebujete veľa kódu na opísanie akcie, ktorá sa musí stať, potom je možné všetok kód umiestniť priamo do značky tlačidla. Napríklad na naprogramovanie prehľadávača tak, aby po kliknutí na tlačidlo zobrazil jednoduchú správu, by skript jazyka JavaScript vyzeral takto: alert („Kód fungoval!“) Stačí iba jeden príkaz a text. To všetko je možné ľahko vložiť do popisu udalosti onclick tlačidlovej značky. V takom prípade môže najjednoduchší kód HTML stránky vyzerať takto:
Gombík s kódom
Gombík s kódom
Krok 2
Nie je praktické umiestňovať zložitejší kód JavaScript priamo do značky tlačidla. Je jednoduchšie vytvoriť z toho samostatnú funkciu a uskutočniť jej hovor v udalosti onclick. Môže to napríklad vyzerať ako funkcia, ktorá zobrazuje okno s časom kliknutia na tlačidlo: funkcia getTime () {
var now = nový dátum ();
alert ("Kód pracoval v" + now.getHours () + ":" + now.getMinutes ());
} Mal by byť umiestnený v hlavičke stránky (medzi značkami a). Celý kód stránky s volaním tejto funkcie viazanej na tlačidlo môže vyzerať takto:
Tlačidlo volania funkcie
funkcia getTime () {
var now = nový dátum ();
alert ("Kód pracoval v" + now.getHours () + ":" + now.getMinutes ());
}
Tlačidlo volania funkcie
Krok 3
Rovnaká metóda by sa mala použiť pri kliknutí na niekoľko rôznych tlačidiel, čím by sa vyvolala udalosť, ktorú je možné popísať rovnakým kódom JavaScriptu. Môžete napríklad mierne upraviť predchádzajúcu funkciu a pridať tak identifikáciu stlačeného tlačidla do okna správy: funkcia getTime (btnString) {
var now = nový dátum ();
alert (btnString + "kliknutie" + now.getHours () + ":" + now.getMinutes ());
} Celý kód stránky s tromi týmito tlačidlami môže vyzerať takto:
Tri tlačidlá s funkčným volaním
funkcia getTime (btnString) {
var now = nový dátum ();
alert (btnString + "kliknutie" + now.getHours () + ":" + now.getMinutes ());
}
Prvé tlačidlo
Druhé tlačidlo
Tretie tlačidlo
