Artykuł
12/15/2011

Kurs JavaScript - Funkcje

Autor: Bożena Jurczyk

Opublikowano: 2011-12-14

Jak zauważyłeś do tej pory, możliwości które daje język JavaScript są duże. Jednak im zapisany kod jest dłuższy, tym trudniejszy staje się jego dalszy rozwój. Aby to ułatwić dalszą pracę, warto zastosować mechanizm, umożliwiający grupowanie kodu chociażby pod względem jego funkcjonalności. W tym przypadku bardzo pomocne stają się funkcje. Są to nazwane bloki, skupiające instrukcje, wykonujące konkretne zadanie.

Przed wykonaniem zadań powinieneś wiedzieć:

Po wykonaniu zadań nauczysz się:

jak tworzyć i używać funkcji w języku JavaScript

Implementacja

W przeglądarce Internet Explorer (od wersji 8) otwórz stronę internetową jTest.html, znajdującą się w pliku JavaScript.zip. Jeśli nie możesz pobrać pliku, zapoznaj się z informacjami zawartymi w samouczku Jak przygotować stronę samouczka JavaScript.

Twoim zadaniem będzie sprawdzenie, jak posługiwać się funkcjami w języku JavaScript.

Definiowanie funkcji

Jeżeli w kodzie istnieje potrzeba częstego powtarzania pewnego zestawu instrukcji, najlepszym rozwiązaniem jest umieścić go w ciele funkcji, a następnie wywołać ją w potrzebnych miejscach.

Otwórz stronę internetową jTest.html, wciśnij przycisk F12 lub wybierz Tools>F12 developer tools.
W oknie, kliknij na zakładkę Script (oznaczoną 1 na Rys.1.), a następnie w wierszu, w prawym dolnym rogu (oznaczonym 2 na Rys. 1.), wpisz:

function setText(element, text){ document.getElementById(element).innerHTML = text; }

Rys. 1. Narzędzia programistyczne do języka JavaScript w Internet Explorer 9.

Wciśnij Enter.
Teraz w poniższym wierszu wpisz:

setText("pokaz", "<b>Przykładowy tekst napisany przez funkcję setText</b>");

Na stronie powinien pojawić się napis wykonany pogrubioną czcionką: "Przykładowy tekst napisany przez funkcję setText".

Informacja

Aby utworzyć funkcję, użyj słowa kluczowego function. Następnie nadaj jej pewną nazwę, i jeśli jest taka potrzeba, podaj parametry wejściowe. Funkcja z tego ćwiczenia, o nazwie setText posiada dwa parametry. Pierwszy z nich jest identyfikatorem elementu, a drugi tekstem, który zostanie umieszczony wewnątrz tego elementu.

Modularyzacja funkcji

Ważną kwestią przy tworzeniu funkcji jest odpowiedni podział zadań. Pamiętaj, że jeżeli każda funkcja zajmie się jednym, konkretnym zadaniem, wtedy najprawdopodobniej nie będzie problemu z jej testowaniem i dopasowaniem do ponownego użycia.

Umieść trzy pliki graficzne w katalogu, w którym znajduje się plik jTest.html. Możesz wykorzystać przykładowe pliki, dostępne w systemie Windows 7.
Otwórz stronę internetową jTest.html, wciśnij przycisk F12 lub wybierz Tools>F12 developer tools.
W oknie, kliknij na zakładkę Script (oznaczoną 1 na Rys.1.), a następnie w wierszu, w prawym dolnym rogu (oznaczonym 2 na Rys. 1.), wpisz:

function createImage(src, alt){
    var newImage = document.createElement('img');
    newImage.className = 'image';
    newImage.src = src;
    newImage.alt = alt;
    newImage.width=300;
    return newImage;
}

function createGallery(element, images){
    if(element!=null){
        for(k in images){
            var img = images[k];
            element.appendChild(createImage(img.src, img.alt));
        }
    }
}

var divGallery = document.getElementById('pokaz');
var images = [
    {src: 'Desert.jpg', alt: 'Image not found: Desert.jpg'},
    {src: 'Tulips.jpg', alt: 'Image not found: Tulips.jpg'},
    {src: 'Koala.jpg', alt: 'Image not found: Koala.jpg'}
    ];

Dopasuj nazwy obrazków (images) w taki sposób, aby odpowiadały obrazkom, umieszczonym w katalogu.
Wciśnij przycisk Run Script, umieszczony w prawym dolnym rogu okna narzędzi programistycznych.
Wpisz:

createGallery(divGallery, images);

Wciśnij przycisk Run Script.
Na stronie powinny pojawić się trzy obrazki (Rys.2.).

Rys. 2. Galeria obrazków w JavaScript.

W tym zadaniu utworzyłeś dwie funkcje. Pierwsza z nich to createImage. Ma ona za zadanie stworzenie elementu HTML – znacznik obrazka <img>. Nadawane są mu atrybuty, przykazane jako parametry funkcji. Drugą funkcją jest createGallery i tworzy ona listę obrazków, których dane przekazywane są w parametrze wywołania, drugi parametr to identyfikator elementu, w którym funkcja ta ma zostać umieszczona. W funkcji została wykorzystana instrukcja warunkowa if w celu sprawdzenia, czy element, w którym ma zostać umieszczona galeria, na pewno istnieje. Ponadto, została również wykorzystana pętla for, w celu pobrania elementów tablicy obiektów, opisujących obrazki. Więcej informacji na ten temat znajdziesz w kolejnych samouczkach tego cyklu: Instrukcja warunkowa if i Pętla for.

Zwróć uwagę na to, że obie te funkcje pełnią modularne zadania. Pierwsza ma za zadanie utworzyć element obrazka i zwraca go jako wynik funkcji poprzez słowo return. Druga natomiast ma za zadanie utworzyć galerię, dlatego nie zajmuje się tworzeniem pojedynczych elementów, a wykorzystuje do tego pierwszą funkcję. Dzięki temu nie powiela kodu i jednocześnie jest bardziej czytelna.

Wykorzystanie funkcji odbywa się poprzez wypisanie jej nazwy w kodzie i podanie odpowiednich parametrów.

Informacja

Funkcja createImage nie musi być wykorzystana tylko przez funkcję createGallery. Nic nie stoi na przeszkodzie, aby użyć jej w dowolnym miejscu kodu, kiedy zajdzie taka potrzeba. Nie byłoby to jednak możliwe, gdyby jej instrukcje nie zostały wydzielone, a zamiast tego umieszczone razem z pozostałymi instrukcjami funkcji createGallery.

Podsumowanie

W tym samouczku nauczyłeś się, jak tworzyć i wykorzystywać funkcje w języku JavaScript. Dowiedziałeś się, że mogą one przyjmować pewne wartości na wejściu funkcji i następnie je wykorzystywać. Dowiedziałeś się także, że aby funkcje były łatwe w znajdywaniu ewentualnych błędów lub wygodne do ponownego użycia, powinny realizować modularne funkcjonalności.

W kolejnym samouczku poznasz podstawowe zdarzenia i ich obsługę w języku JavaScript – Zdarzenia.

Udostępnij za pośrednictwem