
Witam w pierwszej części artykułów o samych podstawach JavaScript. Chcę tutaj opisać rzeczy potrzebne początkującym do jak najszybszego rozpoczęcia programowania.
Na pierwszy ogień pójdą słowa kluczowe JavaScript. Nie piszę tutaj o historii języka – mimo że jest ciekawa – koncentruję się bardziej na praktyce.
Poniżej znajduje się lista słów zarezerwowanych w języku JavaScript. Wiele z nich (te oznaczone gwiazdką – *) jest zarezerwowana w celu przyszłej zgodności.
Mówiąc krótko – wiele z tych oznaczonych słów będzie oficjalnie używane dopiero w przyszłych wersjach języka, choć pewnie wcale tak długo nie będziemy na to czekać. Te nowe słowa są dobrze znane programistom Java.
Oto pełna lista:
abstract (*) | as (*) | boolean |
break | byte | case |
catch | char | class (*) |
continue | const (*) | debugger (*) |
default | delete | do |
double | else | enum (*) |
export (*) | extends (*) | false |
final | finally | float |
for | function | goto (*) |
if | implements (*) | import (*) |
in | instanceof | int |
interface (*) | is (*) | long |
namespace (*) | native (*) | new |
null | package (*) | private (*) |
protected (*) | public (*) | return |
short | static (*) | super (*) |
switch | synchronized (*) | this |
throw | throws (*) | transient (*) |
true | try | typeof |
use (*) | var | void |
volatile (*) | while | with |
Kwestia osadzania skryptów w kodzie strony
Kilka słów o sposobach osadzania skryptów.
Zgodnie z XHTML:
<script type="text/javascript"> //<![CDATA[ document.write("Hello!"); //]]> </script>
Zgodnie z HTML:
<script language="JavaScript"> <!-- document.write("Hello!"); --> </script>
Natomiast dołączenie kodu z zewnętrznego pliku .js wygląda następująco:
<script type="text/javascript" src="nazwa.js"></script> // lub z zewnętrznego źródła <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
Teraz należało by wspomnieć o obiektach w JS, jako że język choć miejscami odbiega od innych języków typowo obiektowych, mocno na obiektach bazuje.
Główne obiekty w JavaScript
– location – Wewnątrz tego obiektu przechowywane są informacje o położeniu aktualnej strony, w tym pełny adres i jego poszczególne elementy(domena, port, protokół i inne).
– history – Znajdziemy tutaj adresy wszystkich witryn odwiedzonych podczas bieżącej sesji. Obiekt udostępnia także metody zmiany aktualnej strony (nawigacja).
– document – Kolekcja informacji o aktualnej stronie WWW (dokumencie). Informacje dotyczą wszystkich elementów, jak obrazki, linki (hiperłącza), formularze i ich elementy, wygląd elementów, i tak dalej. Można by rzec: wszystko o bieżącym dokumencie.
– form – Ten obiekt zawiera informacje o formularzach umieszczonych na aktualnej stronie. Daje dostęp do obiektów umieszczonych na formularzu (pola, listy, przyciski, itd) oraz udostępnia metody do obsługi tych elementów.
– navigator – Odwołuje się do samej przeglądarki.
– window – Jest to obiekt reprezentujący całe okno. Będziemy nim często manipulować, jako że obiekty window i document są intensywnie używane w kodach JS.
Właściwości i metody (oraz słowo o funkcjach)
Te dwa rodzaje zasobów są dostępne w obiektach.
Właściwości (properties) – są to zmienne przechowujące wartości opisujące obiekt, nad którym pracujemy. Odwołanie do właściwości przebiega według schematu:
obiekt.wlasciwosc
Przykład – obiekt document zawiera właściwość title, określającą tytuł dokumentu:
alert(document.title);
Metody (methods) – są to polecenia programistyczne, krótko mówiąc funkcje, ale skojarzone bezpośrednio z konkretnym obiektem. Zwykłe funkcje natomiast nie są skojarzone z żadnym obiektem. To jest właśnie zasadnicza różnica między nimi.
Przykład – obiekt document zawiera metodę umożliwiającą wypisanie tekstu na stronie:
document.write("Piszę!");
Inny popularny przykład to użycie metody go() aby cofnąć się stronę wstecz:
<a href="javascript:history.go(-1)">Wstecz</a>
Funkcje
Jak już wspomniałem metody powiązane są w obiektem, zwykłe funkcje istnieją samodzielnie, co pokazuje poniższy prosty przykład funkcji (i przy okazji instrukcji warunkowej):
function prostaFunkcja(a, b) { if (a > b) return a; else return b; } // wywołanie i wyświetlenie funkcją alert() alert(prostaFunkcja(5, 10));
W następnej części zagłębimy się w zagadnienia takie jak funkcje i zdarzenia.