ZESTAW DO NAUKI JAVASCRIPT 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 >>>
Znaczniki najważniejsze, otwierający i zamykający stronę www… 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> <FONT color=„” size=„” face=„”> </FONT> <IMG src=„”> <BR> <U> </U> <B> </B> <S> </S> Między „” wstawiamy kolor tła strony Tutaj podaję kilka z nich W cudzysłowach FONT color – kolor w języku angielskim size – wielkość w cyfrach face – nazwa czcionki W cudzysłowach IMG src – url obrazu (adres, np. nazwa.jpg) Ten kod nie ma znacznika zamykającego! BR – enter U – podkreślenie (z j. ang. underline) 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> <MARQUEE> </MARQUEE> 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 Ruchomy tekst
Początek JavaScript Otwieramy znacznik skryptu <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…
alert (przykład poniżej) Tak samo można zmieniać kod między znacznikami. Mamy więc do dyspozycji: pisanie na ekranie alert (przykład poniżej) document.write(„tekst”); window.alert(„alert”);
Pamiętajmy jednak, aby pisać tekst w „cudzysłowiu” 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 zmienna1 = 15+20 var zmienna2 = 10–8 var zmienna3 = 2*5 var zmienna4 = 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.
OnLoad() OnMouseOver() OnClick() <BODY OnLoad=„nazwafunkcji()”> <INPUT type=„button” value=„Kliknij” OnClick=„nazwafunkcji()”> lub OnMouseOver=„nazwafunkcji()”> 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 - gdy strona się załaduje OnMouseOver - gdy kursor znajdzie się nad (czymś) OnClick - gdy klikniemy na (coś) OnLoad dodajemy do BODY OnMouseOver i OnClick dodajemy do guzika...
przed tym, co funkcja ma robić wstawiamy nawias klamrowy <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 k y z c a m m e o i u N c z a e k k r a w M y k z o 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!