Până acum, programele JS afișate pornesc automat când pagina HTML este încărcată. Acest lucru a păstrat totul mic, simplu și direct.
Acum dorim să introducem mecanismul de pornire intenționată a unui program în anumite momente de timp. Când un utilizator introduce un anumit conținut, poate fi necesar să îl evalueze; atunci când un utilizator dă clic pe un buton, poate fi necesar să pornească o acțiune complexă, cum ar fi o interogare la baza de date. Acțiunile (validare, interogare DB) vor fi gestionate într-o funcție JS, iar un anumit cod HTML va iniția apelul la astfel de funcții JS. Pentru a înțelege cum funcționează, trebuie să învățăm despre evenimente. Într-un capitol ulterior, vom explica evenimentele în detaliu.
Să presupunem că un utilizator dă clic pe un buton. Acest lucru generează un eveniment onclick . Apariția unui astfel de eveniment este combinată declarativ cu un apel la o funcție JS numită. Browserul apelează această funcție JS. Funcția JS rulează.
HTML complet cu JS-ul încorporat citește:
<!DOCTYPE html>
<html>
<head>
<title>Testing an event</title>
<script>
function showSomething() {
alert("Someone clicked the button.");
}
</script>
</head>
<body>
<h1>Click the button</h1>
<button type="button" onclick="showSomething()">A button</button>
</body>
</html>
- Spre deosebire de exemplele anterioare, nu se întâmplă nimic când pagina este încărcată. Acest lucru rezultă din faptul că comanda
alert()
este încorporată în funcția JSshowSomething()
. Această funcție este doar definită, dar nu este pornită. - Elementul HTML
<button>
are un atributonclick
cu o valoareshowSomething()
. - Când se face clic pe buton, are loc un eveniment onclick. Evenimentul este legat de buton.
- Browserul se ocupă de eveniment. El observă că va rula o funcție cu numele dat.
- Browserul caută funcția în toate scripturile JS disponibile (vă rugăm să observați că acest nume, precum și tot codul JS, țin cont de majuscule și minuscule!).
- După ce a găsit funcția cu exact acest nume în partea
, browserul pornește funcția.
<script>...</script> - Funcția se execută și afișează mesajul.
În esență, funcția JS cu comportamentul său de afișare a mesajelor va rula ori de câte ori utilizatorul face clic pe buton.
Al doilea exemplu
Acest exemplu oferă posibilitatea de a schimba culoarea de fundal a unor elemente HTML. Folosește 3 butoane, 2 funcții JS și 1 tip de eveniment (onclick; există multe alte tipuri). În plus, introduce conceptul de element id
<!DOCTYPE html>
<html>
<head>
<title>Second test for events</title>
<script>
function makeGreen() {
document.getElementById("mainPart")
.style.background = "green";
}
function makeBlue() {
document.getElementById("mainPart")
.style.background = "blue";
document.getElementById("blueButton")
.style.background = "aqua";
}
</script>
</head>
<body id="mainPart">
<h1>Click the buttons</h1>
<button type="button" onclick="makeGreen()">GREEN</button>
<button type="button" onclick="makeBlue()"
id="blueButton">BLUE</button>
<button type="button">Nothing</button>
</body>
</html>
Care sunt diferențele față de primul exemplu?
- Sunt 3 butoane. Primele două sunt asociate cu o funcție JS; al treilea nu este asociat.
- Elementele
<body>
și al doilea<button>
conțin un atribut iid=
„…”. Acest lucru le atribuie un identificator. El poate fi folosit în JS pentru a le localiza. - Elementul
<script>
conține două funcții cu nume diferite. - Când faceți clic pe unul dintre butoane, este apelată funcția JS asociată. Deoarece al treilea buton nu are o funcție JS asociată, nu se întâmplă nimic acolo.
- În JS, partea de cod
document.getElementById("...")
localizează elementul cu acest ID. Partea de cod.style.background =
modifică culoarea de fundal a acestui element. Vă rugăm să ignorați că cele două părți sunt scrise în rânduri separate. Acest lucru este doar pentru o citire mai bună a codului sursă pe dispozitive mici. Puteți lega cele două linii împreună.
"..." - Funcția
makeBlue()
execută două instrucțiuni și schimbă culoarea de fundal a corpului și a lui însuși.
(Include texte din Wikibooks sub licență CC BY-SA 3.0, traduse și adaptate de Nicolae Sfetcu)
Lasă un răspuns