Kurs JavaScript i HTML`a

Transcript Kurs JavaScript i HTML`a

Samouczek JavaScript
ZESTAW DO NAUKI
JAVASCRIPT
Krok 1 – zapoznanie
 JavaScript – jest to język programowania
przeznaczony do uatrakcyjnienia stron
www;
W tym samouczku zapoznasz się z
podstawami JavaScript i HTML’em
Krok 2 - HTML
HTML, (Hyper Text Markup Language) to język w
którym powstają strony www. Aby zacząć
JavaScript, poznajmy najpierw kilka zasad
obowiązujących w HTML’u >>>
Cała treść kodu HTML mieści się w znacznikach (<>). Nie
będziemy się zagłębiali mocno w tajniki, przejdźmy od razu
do robienia strony...
<HTML>
</HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
Znaczniki najważniejsze,
otwierający i zamykający
stronę www…
Znacznik HEAD (to co
znajduje się tutaj, nie
zostaje wyświetlone);
Znacznik BODY (z ang.
ciało, to co jest wewnątrz,
zostaje wyświetlone na
stronie)
Teraz poznajmy listę znaczników dla <HEAD>
<TITLE>
</TITLE>
Między tymi
znacznikami
umieszczamy tytuł
strony…
A teraz znaczniki <BODY>
<BODY BGCOLOR=„”> </BODY> Między „” wstawiamy kolor tła strony
Tutaj podaję kilka z nich
<FONT color=„” size=„”
W cudzysłowach FONT
face=„”>
</FONT> color – kolor w języku angielskim
size – wielkość w cyfrach
face – nazwa czcionki
<IMG src=„”>
W cudzysłowach IMG
src – url obrazu (adres, np. nazwa.jpg)
Ten kod nie ma znacznika
<BR>
zamykającego!
<U>
</U>
BR – enter
<B>
</B>
U – podkreślenie (z j. ang. underline)
<S>
</S>
B – pogrubienie (z j. ang. bolt)
S – przekreślenie (z j. ang. strike)
Znaczników BODY ciąg dalszy…
<SUP> </SUP>
<SUB> </SUB>
<A HREF=„”>
</A>
<CENTER>
</CENTER>
SUP – indeks górny
SUB – indeks dolny
A HREF – hiperłącze, w cudzysłowu
wpisujemy adres url innej strony
www (np. innastrona.html)
CENTER – wycentrowanie
<MARQUEE>
</MARQUEE>
Ruchomy tekst
Początek JavaScript
<script language=„JavaScript”>
</script>
Otwieramy znacznik skryptu
Musimy zdefiniować język skryptu
(language) aby przeglądarki
wiedziały, że to o JavaScript nam
chodzi
Zamykamy znacznik skryptu
I otrzymujemy…
<HTML>
<HEAD>
<TITLE>STRONA TESTOWA</TITLE>
<BODY>
<FONT COLOR=„red” SIZE=„3”
FACE=„Comic Sans MS”>
<CENTER>
TEKST WYCENTROWANY
</CENTER>
<U><B>
TEKST PODKREŚLONY, POGRUBIONY
</B></U>
</FONT>
</BODY>
</HTML>
Taki powinien być wygląd strony po
wpisaniu kodu, np. do notatnika…
Teraz dysponując taką więdzą możemy zacząć
tworzyć pierwsze skrypty
<script
language=„JavaScript”>
document.write(„Mój pierwszy
skrypt”);
</script>
Otwieramy znaczniki
skryptu…
Piszemy komendę
napisania wyrazu w
nawiasie, w
cudzysłowiu…
Zamykamy znaczniki
skryptu…
Tak samo można zmieniać kod
między znacznikami. Mamy więc
do dyspozycji:
document.write(„tekst”);
pisanie na ekranie
window.alert(„alert”);
alert (przykład poniżej)
document.write(„”);
document.write(„”);
Pamiętajmy jednak, aby pisać
tekst w „cudzysłowiu”
i nie zapominać o średniku na
końcu!
Zamiast
document.write
możemy pisać samo
write,
a w przypadku alertu, samo
alert
Teraz trochę o zmiennych…
var ziemniak = 5
var ziemniak =
„marchewka”
var ziemniak = „5”
Zmienna, to „liczba” lub „łańcuch
tekstu” o określonej nazwie
Aby zdefiniować (nazwać)
zmienną, wstawiamy przed nią
var
tak jak w przykładzie obok, gdzie
zmienna nosi nazwę
„ziemniak” i ma wartość
liczbową „5”.
Jeśli chcemy wstawić łańcuch
liczbowy i nazwać ziemniaka
marchewką, piszemy:
A gdy chcemy, by liczba była
łańcuchem? Piszemy ją w
cudzysłowie!
Operatory matematyczne
var
var
var
var
zmienna1
zmienna2
zmienna3
zmienna4
=
=
=
=
15+20
10–8
2*5
15/3
document.write(zmienna1);
Operatory matematyczne, to po
prostu znaki +,-,*,/ itp. Poznamy
na razie tylko te 4 podstawowe
Aby wykonać obliczenie, tworzymy
najpierw zmienną, do której
„podłączymy” obliczenia:
- dodawanie
- odejmowanie
- mnożenie
- dzielenie
Aby zobaczyć jaki to wynik, piszemy
już bez cudzysłowu, ponieważ
odnosimy się do zmiennej, jej
nazwę...
Dodawanie łańcuchów tekstowych
var czesc1 = „ziem”
var czesc2 = „niak”
var calosc = czesc1+czesc2
document.write(calosc);
albo
document.write(czesc1+czesc2);
Można złączyć ze sobą 2 łańcuchy
tekstowe, aby pod nazwą
zmiennej tworzyły całość.
Nazywamy jedną, potem drugą
zmienną, podstawiamy tekst i
dokonujemy dodawania...
Tak czy inaczej otrzymujemy łańcuch
„ziemniak”.
Funkcje w znaczniku HEAD
Funkcja, to komenda która jest
wykonywana po wywołaniu jej. Na
razie brzmi to dość zawile, ale
zaraz przekonamy się że jest to
dosyć proste.
Załóżmy, że mamy stronę i chcemy
na niej zamieścić powitanie w
alercie, np.
Chcemy jednak, aby skrypt włączył się,
gdy załaduje się cała strona, a nie np.
gdy nie załadowały się jeszcze
obrazki. Jak to zrobić? Najpierw
poznajmy kilka poleceń.
OnLoad()
OnMouseOver()
OnClick()
OnLoad - gdy strona się załaduje
OnMouseOver - gdy kursor znajdzie się nad
(czymś)
OnClick - gdy klikniemy na (coś)
<BODY OnLoad=„nazwafunkcji()”>
<INPUT
type=„button”
value=„Kliknij”
OnClick=„nazwafunkcji()”>
OnLoad dodajemy do BODY
OnMouseOver i OnClick dodajemy do
guzika...
lub
<INPUT
type=„button”
value=„Kliknij”
OnMouseOver=„nazwafunkcji()”>
<script language=„JavaScript”>
function nazwafunkcji()
{
window.alert(„Nastąpiło
wykonanie funkcji”);
}
</script>
Tak więc gdy nastąpi wywołanie
funkcji, zostaje wykonana
komenda, którą umieszczamy w
znacznikach skryptu, najlepiej w
strefie HEAD
przed tym, co funkcja ma robić
wstawiamy nawias klamrowy
to samo na zakończeniu
Podsumowanie
s
a
m
o
u
c
z
e
k
w
y
k
o
a
k
y
z
c
m
e
i
N
a
k
r
a
M
z
n
a
n
y
p
r
z
e
Tak więc zakończyliśmy nasz
samouczek i możesz przystąpić
do robienia własnej strony www z
użyciem techniki JavaScript.
Powodzenia!

Kurs JavaScript i HTML`a

Transcript Kurs JavaScript i HTML`a

Directory