Kurs JavaScriptu. Podstawy programowania na potrzeby stron WWW

JavaScript, choć od jego premiery w pakiecie Netscape Navigator minęło już ponad 12 lat, odgrywa coraz większą rolę w projektowaniu interaktywnych narzędzi dla witryn internetowych. Od prostej manipulacji danymi, przez dynamiczne modelowanie struktury strony, obsługę multimedialnych rozszerzeń, aż po tworzenie odrębnych aplikacji – możliwości zastosowania tego języka skryptowego są niezwykle szerokie. Dziś nie sposób, a nawet nie wypada nie znać choć podstawowych zasad programowania w JavaScripcie na potrzeby witryn internetowych.

Spis treści
Część 1 – Wprowadzenie Co to jest JavaScript? JavaScript a Java Zalety JavaScriptu Część 2 – Umieszczanie skryptu na stronie Kod źródłowy zagnieżdżony w HTML-u Kod źródłowy zamieszczony w oddzielnym pliku Jak zadbać o przeglądarki nieobsługujące JavaScriptu? Komentarze do kodu Część 3 – Wyświetlanie informacji na stronie i działania na zmiennych Kilka podstawowych zasad Instrukcja document.write Zmienne Operatory Część 4 – Funkcje i obiekty Co to jest funkcja? Jak zdefiniować funkcję? Funkcja zwracająca wartość Zasięg zmiennych Funkcje predefiniowane JavaScriptu Obiekty Część 5 – Instrukcje warunkowe i pętle Instrukcja warunkowa if Instrukcja warunkowa if ... else Konstrukcja switch Operator warunkowy Pętla while Pętla do ... while Pętla for Część 6 – Rdzenne Obiekty JavaScriptu Obiekt Array Obiekt Boolean Obiekt Date Obiekt Math Obiekt Number Obiekt String Część 7 – Zdarzenia elementów HTML-aCzęść 8 – Podsumowanie

Spis treści

Część 1 – Wprowadzenie

Co to jest JavaScript?
JavaScript a Java
Zalety JavaScriptu

Część 2 – Umieszczanie skryptu na stronie

Kod źródłowy zagnieżdżony w HTML-u
Kod źródłowy zamieszczony w oddzielnym pliku
Jak zadbać o przeglądarki nieobsługujące JavaScriptu?
Komentarze do kodu

Część 3 – Wyświetlanie informacji na stronie i działania na zmiennych

Kilka podstawowych zasad
Instrukcja document.write
Zmienne
Operatory

Część 4 – Funkcje i obiekty

Co to jest funkcja?
Jak zdefiniować funkcję?
Funkcja zwracająca wartość
Zasięg zmiennych
Funkcje predefiniowane JavaScriptu
Obiekty

Część 5 – Instrukcje warunkowe i pętle

Instrukcja warunkowa if
Instrukcja warunkowa if ... else
Konstrukcja switch
Operator warunkowy
Pętla while
Pętla do ... while
Pętla for

Część 6 – Rdzenne Obiekty JavaScriptu

Obiekt Array
Obiekt Boolean
Obiekt Date
Obiekt Math
Obiekt Number
Obiekt String

Część 7 – Zdarzenia elementów HTML-aCzęść 8 – Podsumowanie

Wprowadzenie

Co to jest JavaScript?

Ten wszechobecny dziś język skryptowy został stworzony – początkowo jako LiveScript – na potrzeby firmy Netscape i przeglądarki Navigator. Zamierzeniem jego projektantów było rozszerzenie możliwości języka HTML w taki sposób, aby strony stały się bardziej atrakcyjne pod względem sposobu prezentacji danych oraz możliwości interakcji z użytkownikiem. W 1995 roku, na mocy porozumienia z firmą Sun Microsystems, w zamian za włączenie do przeglądarki Netscape obsługi technologii Java, język otrzymał oficjalną nazwę JavaScript. W grudniu tego samego roku został zaimplementowany w najnowszej wówczas wersji Navigatora i rozpoczął triumfalny pochód przez Sieć.

JavaScript jest przede wszystkim językiem skryptowym – to znaczy interpretowanym. Nie musi zostać skompilowany do kodu maszynowego, aby można było zobaczyć efekty jego działania. Wystarczy nam do tego przeglądarka internetowa, która ten język obsługuje – czyli w zasadzie każda z liczących się na rynku aplikacji. Ze względów bezpieczeństwa JavaScript ma znacznie ograniczone uprawnienia dostępu do zasobów komputera, przy użyciu którego przeglądana jest dana strona, a wszelkie odwołania do funkcji i obiektów wykonywane są w trakcie wykonywania programu.

JavaScript a Java

Zbieżność nazw obu języków może być dla początkującego użytkownika myląca. Przyjęcie takiej, a nie innej nazwy dla produktu Netscape'a najprawdopodobniej podyktowane było względami marketingowymi, ale zasadność łączenia obu pakietów do dziś jest przedmiotem kontrowersji. Istnieją tutaj dwie szkoły: jedni uważają, że JavaScript sięga swoimi korzeniami środowiska Java, wskazując na przykład na podobieństwo składni, inni zaś dowodzą, że poza nazwą oba języki niewiele mają ze sobą wspólnego. Jakiekolwiek miałoby być rozstrzygnięcie tego sporu, debiutujący programiści powinni pamiętać o tym, że mają do czynienia z zupełnie odrębnymi mechanizmami.

Zalety JavaScriptu

Największą zaletą JavaScriptu jest niewątpliwie jego prostota. Język ten uważa się więc za relatywnie łatwy do opanowania i rzeczywiście – nic nie stoi na przeszkodzie, aby zacząć używać go już po kilku minutach od rozpoczęcia nauki. Ponieważ jest to obecnie najbardziej rozpowszechniony język skryptowy, w Internecie można znaleźć miliony praktycznych przykładów – witryn wykorzystujących różnorodne funkcje JavaScriptu.

O olbrzymiej popularności języka zadecydowały z pewnością jego uniwersalność oraz fakt, iż pozwala on na odciążenie serwerów i ograniczenie ilości zbędnych danych przesyłanych pomiędzy nimi a przeglądarką klienta. Najprostszym przykładem tych zalet mogą być choćby sklepy internetowe, których nieodzownym elementem są formularze wypełniane przez użytkownika. Dzięki JavaScriptowi można sprawdzić poprawność wprowadzonych danych na komputerze klienta, unikając – przy ewentualnym błędzie – urzeczywistnienia scenariusza, w którym dane są wysyłane, a serwer zużywa moc obliczeniową na ich sprawdzenie, wygenerowanie strony z opisem błędu i odesłaniem jej z powrotem.

JavaScript jest nieustannie rozwijany. Podstawowe funkcje z biegiem czasu uzupełniane są o nowe narzędzia, jak chociażby obiekt Image i tablica document.images, które pojawiły się w JavaScripcie 1.1 i wzbogaciły język o opcje manipulacji plikami graficznymi. Wraz z wersją 1.2, koncepcją dynamicznego HTML-a i zastosowaniem warstw możliwości projektowania interaktywnych stron zwiększyły się wręcz zdumiewająco. Obecnie przy użyciu odpowiednich bibliotek – jak na przykład script.aculo.us czy mootools – tworzyć można aplikacje sieciowe o dużym stopniu zaawansowania i atrakcyjnym interfejsie.

«poprzednia 1 2 3 4 ... 7 następna »

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

12 skomentuj »

Komentarze

#1 Starsep 2009-08-26 01:06:19 0
W listingu nr 22 jest błąd:

zamiast "switch (dzien);"

powinno być "switch (dzien)" (bez cudzysłowu).
IP: 77.253.130.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.2) Gecko/20090729 Firefox/3.5.2
#2 Starsep 2009-08-26 01:07:27 0
Oczywiście bez średnika, nie cudzysłowu! :P
IP: 77.253.130.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.2) Gecko/20090729 Firefox/3.5.2
#3 Advt.pl 2010-02-02 22:30:32 0
O olbrzymiej popularności języka zadecydowały z pewnością jego

uniwersalność oraz fakt, iż pozwala on na odciążenie serwerów

i ograniczenie ilości zbędnych danych przesyłanych pomiędzy nimi a

przeglądarką klienta. Najprostszym przykładem tych zalet mogą być choćby

sklepy internetowe, których nieodzownym elementem są formularze

wypełniane przez użytkownika. Dzięki JavaScriptowi można sprawdzić

poprawność wprowadzonych danych na komputerze klienta, unikając – przy

ewentualnym błędzie – urzeczywistnienia scenariusza, w którym dane są

wysyłane, a serwer zużywa moc obliczeniową na ich sprawdzenie,

wygenerowanie strony z opisem błędu i odesłaniem jej z powrotem.

Bzdura! Oprócz tego, że stosujemy javascript do walidacji danych użytkownika w formularzu, w celu wygody i przyjemności przez użytkownika, powinniśmy sprawdzać poprawność pół formularza w języku server-side. To co zostało napisane w tym kursie może spowodować dość poważne luki w zabezpieczeniach skryptu.

Pozdrawiam i zapraszam na Advt.pl
IP: 83.9.178.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.2) Gecko/20100115 Firefox/3.6
#4 Lapu 2010-06-28 23:25:11 0
Ten kurs to podstawy syntaktyki jezyka a nie jego rzeczywistego wykorzystania. Polecam kursy na w3 schools jezeli ktos powazniej podchodzi do wykorzystania js.
IP: 89.73.136.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.2.6) Gecko/20100625 Firefox/3.6.6
#5 Przemek 2010-09-10 18:28:22 0
Nie moge pojąć tego
IP: 79.162.198.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.2.4) Gecko/20100611 Firefox/3.6.4
#6 hryhryr 2010-12-09 20:14:46 0
yhrhrhrhrhrhrhrh
IP: 95.50.121.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.2.12) Gecko/20101026 Firefox/3.6.12
#7 B2B 2011-02-19 20:58:33 0
@Advt.pl

Czytaj ze zrozumieniem. W domyśle chodzi o to, że JS odciąża serwer - zamiast np. 50 zapytań obsłuży jedno błędne, bo reszta zostanie od razu poprawiona.
IP: 89.75.86.[...] Mozilla/5.0 (Windows; U; Windows NT 6.1; pl; rv:1.9.2.13) Gecko/20101203 Firefox/3.6.13
#8 Patryk yarpo Jar 2011-06-10 09:35:00 -1
Sądzę, że treść kursu nie porusza wielu kwestii związanych z rzeczywistymi mechanizmami i problemami wynikającymi w trakcie pracy z językiem.

Zapraszam na:

http://www.yarpo.pl/2011/06/03/javascript-na-powaznie/ Pokaż komentarz
IP: 153.19.52.[...] Mozilla/5.0 (Windows NT 5.1; rv:2.0.1) Gecko/20100101 Firefox/4.0.1
#9 Patryk yarpo Jar 2011-06-19 14:27:38 0
Odnośnie strony 5 artykułu - obiekt Boolean...

NIE należy go używać z operatorem new.

http://www.yarpo.pl/2011/02/23/dlaczego-new-boolean-jest-zlym-pomyslem/

co innego "statycznie", bez operatora new, jako sposób na rzutowanie wartości do true / false. Wtedy może jednak lepiej zastosować `!!`.

Podobnie nie jest dobrym rozwiązaniem używania konstruktorów Object, Array, czy Function. Zamiast tego dużo lepiej jest używać literałów:

http://www.yarpo.pl/2011/01/11/json-literaly-obiektowe/

szerzej o tym, dlaczego należy unikać konstruktorów, gdy mamy do dyspozycji literał na stronie:

http://www.yarpo.pl/2011/02/16/json-zamiast-konstruktorow/
IP: 79.189.17.[...] Mozilla/5.0 (Windows NT 6.1; rv:2.0.1) Gecko/20100101 Firefox/4.0.1
#10 Groszek Turbo 2011-10-22 13:05:11 0
Nie ogarne tego ;d
IP: 92.55.238.[...] Mozilla/5.0 (Windows NT 5.1; rv:6.0.1) Gecko/20100101 Firefox/6.0.1
#11 mmk 2012-01-02 01:32:57 0
"sok.length // zwrócony wynik=3;"

w rzeczywistości zamiast 3 zwracane jest 0. Dlaczego?
IP: 217.113.228.[...] Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.7 (KHTML, like Gecko) Chrome/16.0.912.63 Safari/535.7
#12 slawek22 2012-01-02 03:34:00 0
Samouczek - niczego nie wyjaśnia. Prosty opis paru funkcji i nie-najlepszych praktyk. Raczej pisany przez osobę która tworzy samouczki niż używa języka...

@Mmk

>"sok.length // zwrócony wynik=3;"

Autorowi się pomyliło. W JS nie ma tablic asocjacyjnych. Jako tablice asocjacyjne są wykorzystywane obiekty więc...

var a = new Array();

a.x = 10;

Tak nie wstawisz elementu do tablicy tylko ustalisz właściwość obiektu. To błąd, działa to tylko dlatego, że array dziedziczy po object.

@Patryk:

no to mamy 2 osobę na tym portalu która rozumie ten język :)

Tylko dlaczego tak skomplikowanie? Wzorzec factory w tak dynamicznym języku jak JS to jedna wielka pomyłka a cały model obiektowy można by sprowadzić do opisu parasitic inheritance, new, this i mechanizmu callback, może jeszcze napisać czemu czasami var this=that. Brakuje niestety czegoś opisującego tylko dobre praktyki w JS, bez poruszania tak bezsensownych tematów jak sposób emulacji modelu znanego z C.

Ogólnie to widzę, że próbujesz w pracy korzystać z praktyka zaczerpniętych z Java czy C++ - duży błąd, po prostu porzuć ten archaiczny model i pisz dobry, nowoczesny kod :)
IP: 83.27.69.[...] Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.7 (KHTML, like Gecko) Chrome/16.0.912.63 Safari/535.7

Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka (słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.