1 ZESTAW DO NAUKI JAVASCRIPTSamouczek JavaScript ZESTAW DO NAUKI JAVASCRIPT

2 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

3 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 >>>

4 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... 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)

5 Teraz poznajmy listę znaczników dla Między tymi znacznikami umieszczamy tytuł strony…

6 A teraz znaczniki
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)

7 Znaczników BODY ciąg dalszy…

8 Początek JavaScript Otwieramy znacznik skryptu Otwieramy znacznik skryptu Musimy zdefiniować język skryptu (language) aby przeglądarki wiedziały, że to o JavaScript nam chodzi Zamykamy znacznik skryptu { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/822981/2/images/8/Pocz%C4%85tek+JavaScript+Otwieramy+znacznik+skryptu.jpg", "name": "Początek JavaScript Otwieramy znacznik skryptu", "description": " Otwieramy znacznik skryptu. Musimy zdefiniować język skryptu (language) aby przeglądarki wiedziały, że to o JavaScript nam chodzi. Zamykamy znacznik skryptu.", "width": "800" }

9 I otrzymujemy…

10 Teraz dysponując taką więdzą możemy zacząć tworzyć pierwsze skrypty Otwieramy znaczniki skryptu… Piszemy komendę napisania wyrazu w nawiasie, w cudzysłowiu… Zamykamy znaczniki skryptu… { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/822981/2/images/10/Teraz+dysponuj%C4%85c+tak%C4%85+wi%C4%99dz%C4%85+mo%C5%BCemy+zacz%C4%85%C4%87+tworzy%C4%87+pierwsze+skrypty.jpg", "name": "Teraz dysponując taką więdzą możemy zacząć tworzyć pierwsze skrypty", "description": " document.write(„Mój pierwszy skrypt ); Otwieramy znaczniki skryptu… Piszemy komendę napisania wyrazu w nawiasie, w cudzysłowiu… Zamykamy znaczniki skryptu…", "width": "800" }

11 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”);

12 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

13 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!

14 Operatory matematycznevar 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ę...

15 Dodawanie łańcuchów tekstowychvar 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”.

16 Funkcje w znaczniku HEADFunkcja, 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.

17 OnLoad() OnMouseOver() OnClick() 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...

18 przed tym, co funkcja ma robić wstawiamy nawias klamrowy 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 { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/822981/2/images/18/przed+tym%2C+co+funkcja+ma+robi%C4%87+wstawiamy+nawias+klamrowy.jpg", "name": "przed tym, co funkcja ma robić wstawiamy nawias klamrowy", "description": " function nazwafunkcji() { window.alert(„Nastąpiło wykonanie funkcji ); } 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.", "width": "800" }

19 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!