Krótki wstęp dla rozpoczynających naukę JavaScript

Internet to podstawa a podstawą internetu są strony internetowe. Odkrycie w sumie żadne, ale co zrobić, aby napisać własną stronę internetową? Można przeczytać jeden z wielu kursów HTML i CSS dostępnych online. Ale to nie wystarczy. Obecnie strony są bardziej „żywe”. Reagują na akcje użytkownika, podpowiadają, sugerują, są ładniejsze.
Czynnikiem ożywiającym strony jest właśnie język JavaScript. Jeżeli tu jesteś to z pewnością zgadzasz się z tym co mówię i chcesz poznać tajniki tej technologii :). Pisząc ten artykuł zakładam, że znasz przynajmniej jeden język programowania w dobrym stopniu oraz nie jest Ci obce budowanie stron z wykorzystaniem HTML i CSS.
W kursie wykorzystamy szablon dokumentu HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<!-- tutaj będziemy dodawać nasz kod HTML :) -->
</body>
</html>

Do dokumentu załączony jest arkusz stylów CSS. Aby ułatwić sobie pracę, proponuję Ci utworzenie sobie folderu na dysku do przechowywania pliku html, stylów css i już wkrótce pliku javscript.
Innym rozwiązaniem będzie skorzystanie z narzędzi online takich jak http://jsfiddle.net/.

Pomiędzy tagami <body> dodajmy

<p>Zdarzenie</p>
<button id="pokazWiadomosc">Pokaż Wiadomość</button>

Prosty przycisk, nic więcej 😉 Skoro przycisk jest do przyciskania to pasowałoby dodać rezultat tego kliknięcia. Tutaj z pomocą przychodzi wysławiony przeze mnie JavaScript.
Utwórzmy plik script.js i umieść go w swoim folderze. Jeżeli używasz narzędzi online, nie będzie to konieczne.
W naszym dokumencie HTML należy teraz wskazać miejsce naszego skryptu. Robimy to poprzez dodanie na końcu sekcji body tagu:

<script type="text/javascript" src="script.js"></script>

Pamiętaj, aby dodać go pod całą zawartością tagu. Od teraz przeglądarka wie, że podczas wczytywania dokumentu HTML powinna również przeczytać nasz skrypt.
Zaplanujmy co nasz skrypt będzie robił. Chcemy, aby po wciśnięciu przycisku Pokaż Wiadomość pokazało się okienko z informacją ‚Wiadomość :)’.
W pierwszej kolejności pobierzmy element button.

var przycisk; // deklaracja zmiennej, do której zostanie przypisany obiekt przycisku

Skorzystajmy z wbudowanej w język javascript funkcji document.getElementById służącej do pobierania elementu HTML o zadanym id. Id naszego przycisku to ‚pokazWiadomosc’, więc pobieramy obiekt:

przycisk = document.getElementById('pokazWiadomosc');

Jeżeli pisałeś kiedykolwiek programy obiektowe to wiesz, że każdy obiekt ma pewne własności (properties) i metody (methods).

Jedną z własności obiektu przycisk (elementu pobranego z dokumentu HTML) jest onclick. Przypisując do niej funkcję, zostanie ona wywołana w momencie kliknięcia na przycisk.

przycisk.onclick = function(){} // podstawiamy pustą funkcję

W ciele funkcji umieszczamy wywołanie informacji o treści ‚Wiadomość 🙂 za pomocą funkcji alert’. ‚alert’ jest również funkcją wbudowaną.

przycisk.onclick = function(){
	alert('Wiadomość :)');
}

Całość wygląda następująco

var przycisk; // = null

przycisk = document.getElementById('pokazWiadomosc');

przycisk.onclick = function(){
	alert('Wiadomość :)');
}

Skrócona działająca wersja:

document.getElementById('pokazWiadomosc').onclick = function(){
	alert('Wiadomość :)');
}

Oprócz wyświetlania wiadomości javascript umożliwia wykonywanie bardziej użytecznych działań. Choćby nawet dynamiczna zmiana stylów.

Utwórzmy treść dokumentu HTML (w tagu body):

<p>Zmiana stylów</p>
<p id="zielony">Jestem zielony</p>
<button id="przyciskZielony">Zmień zielony na czerwony</button>

Pobierzmy sobie przycisk o id ‚przyciskZielony’:

var przyciskZielony;
przyciskZielony = document.getElementById('przyciskZielony');

Następnie przypiszmy funkcję do własności onclick przycisku

przyciskZielony.onclick = function(){
	var zielony; // tutaj zostanie pobrany element p o id 'zielony'
	zielony = document.getElementById('zielony'); // tą funkcję już znamy

	// teraz odwołamy się do obiektu style, będącego własnością obiektu zielony. Następnie //przypiszemy wartość 'red' własności 'color' obiektu zielony.style

	zielony.style.color = 'red';
}

Takim sposobem po kliknięciu przycisku kolor tekstu zmieni się na czerwony.

Kolor jest czerwony ale napis dalej mówi, że jest zielony… Nie ma problemu. Zmienimy również napis. Wystarczy odwołać się do własności innerHTML obiektu zielony.

zielony.innerHTML = 'Jestem Czerwony! :D';

Całość jest następująca:

var przyciskZielonyNapis;

przyciskZielonyNapis = document.getElementById('przyciskZielonyNapis');

przyciskZielonyNapis.onclick = function(){
	var zielony;
	zielony = document.getElementById('zielony');
	zielony.style.color = 'red';
	zielony.innerHTML = 'Jestem Czerwony! :D';
}

lub prościej

document.getElementById('przyciskZielonyNapis').onclick = function(){
	var zielony = document.getElementById('zielony');
	zielony.style.color = 'red';
	zielony.innerHTML = 'Jestem Czerwony! :D';
}

Kolejny artykuł kontynuacja poradnika – http://darkgl.pl/2015/04/28/krotki-wstep-dla-rozpoczynajacych-nauke-javascript-kontynuacja/

Adam Sawicki – programista aplikacji internetowych, obserwator nowych startup’ów i technologii webowych, autor kursu c++ dla początkujących cpp.jcom.pl

Dodaj komentarz