Kurs JavaScript
Temat: Podstawowe podstawy. Eksperci proszeni o wyjście.
by
Jasió
Witajcie w pierwszym odcinku naszego kursu JavaScript! Dzisiaj
dowiemy się podstawowych rzeczy o tym języku programowania, a
także stworzymy pierwszy skrypt!
Więc od czego zacząć? Dobrze byłoby znać chociaż podstawowe informacje
na temat HTMLa. Przyda się także jakiś dobry edytor stron internetowych.
Najlepszym wyjściem byłby oczywiście Dreamweaver MX, ale całkiem
wygodnie pracuje się w Pajączku bądź w WebSicie. W najgorszym
wypadku pozostaje Notatnik.
JavaScript to "uzupełnienie" HTMLa - pozwala poszerzyć
zwykłą stronę o ciekawe animacje i efekty. Przydaje się też, jeżeli
ktoś potrzebuje stworzyć wiele małych stron zawartych w jednym
pliku (funkcja WindowOpen). Dzięki "Javie" możemy też
zablokować niektóre funkcje strony, dostępne tylko dla wybranych
odwiedzających. Obejrzyjcie teraz przykład:
To już jednak nieco wyższa szkoła jazdy (będziemy to przerabiać
na drugiej lub trzeciej lekcji), a na razie zajmijmy się prostszymi
rzeczami. Przede wszystkim, jest dość duża różnica między tekstem
wyświetalnym w języku HTML, a JavaScript. Przyjrzyjmy się kolejnemu
przykładowi:
To jest jakiś tam tekst w HTMLu
Zobaczmy strukturę dokumentu wykorzystującego JavaScript:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
Tutaj umieszczasz treść skryptu
-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
W dowolnym miejscu <BODY>, "wywołujesz" skrypt.
Możesz tu również umieścić dodatkowe funkcje.
-->
</SCRIPT>
</BODY>
</HTML>
Jeżeli skrypt ma być uruchamiany od razu po wejściu
na stronę, w polu <BODY> musisz wpisać: <BODY onload="nazwafunkcji()";>
Dobrze! A teraz weźmy się za obiecany pierwszy skrypt!
Utwórz nową stronę internetową i wstaw na nią poniższy skrypt:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<function pushbutton()
{ alert("Czytajcie Action Maga i Misia!");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<input type="button" name="Button1" value="Pierwszy
skrypt!" onclick="pushbutton()">
</FORM>
</BODY>
</HTML>
Zapisz teraz swoją stronę i obejrzyj w przeglądarce. Ciekawe,
prawda?
To co się zrobiło trzeba jednak zrozumieć - dlatego też przestudiujmy
skrypt. Sekcję <SCRIPT></SCRIPT> wstawiliśmy w obszar
<HEAD>, czyli w "głowę" strony. Dlatego też nie
wyświetla się on w przeglądarce. Funkcja "function pushbutton()
{ alert("Czytajcie Action Maga i Misia!");" w wolnym
tłumaczeniu oznacza: "otwórz wiadomość "Czytajcie Login
Pointa i Misia!". Rozumiecie? Teraz przejdźmy do sekcji <FORM></FORM>.
Znajdziecie tam taki tekst: <input type="button"
name="Button1" value="Pierwszy skrypt!" onclick="pushbutton()">.
Tym razem "tłumacząc", wyjdzie nam coś takiego: "rodzaj=przycisk,
nazwa=przycisk1, tekst=Pierwszy skrypt!, po naciśnięciu wywołaj
funkcję pushbutton()". Stworzyliśmy ją właśnie przed chwilą.
Mam nadzieję, że teraz rozumiecie, dlaczego skrypty wyglądają
tak, a nie inaczej. Spróbujcie jeszcze sekcję <FORM></FORM>
wstawić w inne miejsce sekcji <BODY> (ważne, by strona była
wypełniona tekstem). I co? Przycisk zmienia swoje "miejsce
zamieszkania"!
ZAPAMIĘTAJ!
- JavaScript jest językiem programowania działającym w symbiozie
z HTMLem;
- Jest to język pozwalający urozmaicić stronę, jak też zablokować
do niej dostęp;
- Główne informacje o skrypcie umieszcza się w sekcji <HEAD></HEAD>,
natomiast wywołanie go następuje w ramach <BODY>;
- Każdy skrypt można przetłumaczyć na "polski";
PRACA DOMOWA
1. Utwórz wiadomość tekstową, pojawiającą się po naciśnięciu
przycisku na górze strony. Zmień nazwę funkcji z "pushbutton()"
na "jasiojestbogiem()".
2*. Stwórz wiadomość tekstową pojawiającą się po uruchomieniu
strony.
A CO W NASTĘPNYM ODCINKU?
W następnym odcinku nauczymy się tworzyć zmienne, zajmiemy się
najprostszymi funcjami oraz - być może - zaczniemy zabawę z JavaScriptowymi
oknami. Na razie!