jesteś tutaj
527
Funkcje anonimowe, zasięg i domknięcia
Tworzenie domknięć jako procedur obsługi zdarzeń
Przyjrzyjmy się jeszcze jednemu sposobowi tworzenia domknięć. Tym razem zbudujemy
domknięcie działające jako procedura obsługi zdarzeń; jest to rozwiązanie dosyć często
spotykane w kodzie JavaScript. Zaczniemy od utworzenia prostej strony WWW, zawierającej
przycisk oraz element
<div>
, w którym będzie wyświetlany komunikat. Umieszczony na tej
stronie skrypt będzie zliczał liczbę kliknięć przycisku i wyświetlał ją w elemencie
<div>
.
Poniżej przedstawiliśmy kody HTML i CSS naszej strony, dodaj je do pliku o nazwie
divClosure.html.
<!doctype html>
<html lang=”pl”>
<head>
<meta charset=”utf-8”>
<title>Kliknij mnie!</title>
<style>
body, button { margin: 10px; }
div { padding: 10px; }
</style>
<script>
// Tu umieĂcimy kod -avaScript.
</script>
</head>
<body>
<button id=”clickme”>Kliknij mnie!</button>
<div id=”message”></div>
</body>
</html>
A to jest nasz cel: po każdym
kliknięciu przycisku chcemy
aktualizować komunikat
prezentowany w elemencie <div>
i wyświetlać w nim, ile razy
przycisk został kliknięty.
To zwyczajna, typowa strona WWW.
Z prostym arkuszem stylów CSS,
służącym do określenia wyglądu
elementów.
Tu umieścisz swój kod JavaScript.
Na stronie znajdują się przycisk oraz element
<div> prezentujący komunikaty, które będziemy
aktualizować po każdym kliknięciu przycisku.
A teraz napiszemy kod. Oczywiście mógłbyś napisać kod realizujący to, o co nam
chodzi w tym przykładzie, bez stosowania domknięcia, jednak — jak się przekonasz
— przy użyciu domknięcia kod będzie bardziej zwarty, a nawet wydajniejszy.
Get Programowanie w JavaScript Rusz głową! now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
