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

DarkGL 




 	




 

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  dodajmy

 

Zdarzenie


 

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:

 
 

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):

 

Zmiana stylów

Jestem zielony


 

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.plInternet 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:

 




 	




 

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  dodajmy

 

Zdarzenie


 

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:

 
 

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):

 

Zmiana stylów

Jestem zielony


 

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



Podobne wpisy:
    

  1. Wykorzystanie JavaScript w motd na steam – lokalizacja gry , dostęp do plików
    2. 

  2. Tutor – Informacje jak w Condition Zero
    3. 

  3. PAWN Pre-Processor Część 1
    4. 

  4. Zwracanie hard coded strings i trochę o samym return
    5. 

  5. Lista komend klienta CS 1.6
    6.

Dodaj komentarz

Witryna wykorzystuje Akismet, aby ograniczyć spam. Dowiedz się więcej jak przetwarzane są dane komentarzy.