JavaScript jest językiem skryptowym interpretowanym przez przeglądarki WWW. Istnieją różne sposoby umieszczania kodu JavaScript w kodzie HTML 1. <script language="javascript" type="text/javascript"> <!-- Treść skryptu // --> </script> Treść skryptu najlepiej jest ująć w znakach komentarza (<!-- i // -->), aby przeglądarki nieinterpretujące JavaScript go zignorowały. Np. <SCRIPT> <!-- document.write("dzień dobry"); //--> </SCRIPT> 2. Skrypty mogą być umieszczone w osobnych plikach o rozszerzeniu js. W znaczniku <SCRIPT> dodajemy atrybut SRC="url", gdzie url to adres pliku z kodem JS. Np. <script language="javascript" type="text/javascript" src="skrypty.js"></script> W JavaScript mamy możliwość komentowania tekstu na dwa sposoby: - ujęcie dowolnego fragmentu tekstu w znaczniki /* i */ - znacznik // powodujący potraktowanie jako komentarz tekstu stojącego za znacznikiem do końca linii
Język składa się z instrukcji które mówią co ma wykonać komputer. Instrukcje operują na zmiennych - miejscach w których mogą być przechowywane wartości - identyfikowanych przez nazwę. Nazwa zmiennej musi być pojedynczym słowem rozpoczynającym się literą. Zmienne mogą zawierać wartości różnych typów: -Wartości proste - napisy, liczby całkowite lub zmiennopozycyjne, wartości logiczne -Wartości złożone - tablice lub obiekty - zawierające "podzmienne" do których możemy się dostać używając odpowiednich konstrukcji języka
Zmienne Zmienne w programie zaczynają się od litery. Jeśli chcemy zapisać do zmiennej wartość - używamy konstrukcji: zmienna = wartość Zmienną możemy traktować jak szufladkę do której można schować różne przedmioty. Ta sama zmienne (o tej samej nazwie), może mieć różną wartość w zależności od tego w którym momencie będziemy pobierać jej wartość. Wprowadzenie do kodu zmiennej nie wymaga jej wcześniejszego deklarowania (nie podajemy jej typu). Wystarczy użyc np. liczba = 12. Podanie przed nazwą zmiennej słowa VAR oznacza jej lokalną deklarację. Bez tego słowa zmienna traktowana jest globalna. Zmienne mogą mieć następujące wartości: liczbowa: np.: x = 10 x = 3.14 x = -7.45 + 12 ciąg znaków np.: s = "Witaj!" tekst = "To jest początek tekstu. " Uwaga: wartością "rok" + 2001 jest ciąg znaków "rok 2001" Znaki specjalne: \n - koniec linii \" - cudzysłów logiczna: true lub false (bez cudzysłowia) null - wartość pusta. Użycie: VAR zmienna jest równoważne: VAR zmienna = null Wartością zmiennej niezadeklarowanej jest undefined
Operatory binarne: +, -, *, /, % (dzielenie modulo) unarne: negacja (-) oraz inkrementacja i dekremetacja (zmienna++, zmienna += 1) przypisania: a += b (to samo co: a = a + b), a -= b, a *= b, a /= b, a %= b logiczne: && (konkatenacja), (alternatywa),! (negacja) porównania: == (równe),!= (nie równe), <=, >=, <, >. Możemy porównywać ciągi znaków np. "ala" < "alb" wyrażenia warunkowe: zmienna = (warunek)? wartość_prawda : wartość_fałsz % - dzielenie modulo dzizła jak reszta z dzielenia - suma logiczna bitów - 1 1=1; 1 0=1; 0 1=1; 0 0=0; & - iloczyn logiczny bitów - 1&1=1; 1&0=0; 0&1=0; 0&0=0; ^ - suma modulo 2-1^1=0; 1^0=1; 0^1=1; 0^0=0; - suma logiczna - dla wartości logicznych - true gdy co najmniej jedna wartośc jest true && - iloczyn logiczny - dla wartości logicznych - true gdy obie jedna wartości są true ++ - zwiększenie wartości o 1 -- - zmniejszenie wartości o 1 ~ - negacja logiczna bitów! - negacja logiczna wartości logicznej == równa się!= różne od > większe od < mniejsze od >= niemniejsze od <= niewiększe od
Funkcje Ciągi instrukcji które powtarzają się w programie możemy połączyć w funkcję - i używać jej jak pojedynczego polecenia. Funkcję deklarujemy słowem function po którym powinna wystąpić nazwa funkcji, oraz para nawiasów. Następnie w nawiasach klamrowych umieszczamy wszystkie te instrukcje z których składa się funkcja. function Nazwa_Funkcji(argument1, argument2,..., argumentn) // treść Wywołanie funkcji: Funkcja1(argument1, argument2); Funkcja2(); Zmienna = Funkcja3(argument); Np. function NapiszTekst() document.write("to jest tekst pisany " + "przez funkcję o nazwie NapiszTekst"); Instrukcje umieszczone wewnątrz funkcji nie są wykonywane dopóki funkcja nie jest wywołana. Funkcję wywołujemy pisząc jej nazwę oraz parę nawiasów. Funkcję możem,y wywoływać wielokrotnie, bez konieczności jej ponownego definiowania.. NapiszTekst();
Zadanie 1 - napisać funkcję wypisującą 100 razy tekst "Nie będę rozmawiać na lekcji." Krok pierwszy: function NTxt() document.write("nie będę rozmawiać na lekcji. "); Krok drugi: funkcje mogą zawierać inne funkcje... function NTx10() NTxt(); NTxt(); NTxt(); NTxt(); NTxt(); NTxt(); NTxt(); NTxt(); NTxt(); NTxt(); Krok trzeci: zbudować funkcję NTxt100 - i ją wywołać. function NTxt100() NTxt10(); NTxt10(); NTxt10(); NTxt10(); NTxt10(); NTxt10();NTxt10(); NTxt10(); NTxt10(); NTxt10(); Ntxt100(); Folder Napisz tekst
Instrukcja pętli W języku JavaScript jest specjalna instrukcja która pozwala na powtórzenie następującej po niej instrukcji określoną liczbę razy. Podstawową instrukcją pętli jest instrukcja for for(przed; warunek; po) instrukcja; W nawiasach umieszczamy dwie instrukcje oraz wyrażenie które jest sprawdzane sprawdzane przed każdym wykonaniem instrukcji która znajduje się w pętli. Pierwsza z instrukcji wykonywana jest przed rozpoczęciem wykonywania pętli - i tylko raz. Druga - po każdym wykonaniu instrukcji pętli Zadanie 1 z wykorzystaniem pętli for: Aby zliczyć ilość wykonań pętli - potrzebujemy licznika - zmiennej w której będziemy pamiętać który raz wypisujemy tekst. Licznik na początku trzeba zainicjować. W każdym obiegu pętli zwiększać, i sprawdzać czy nie osiągnęliśmy już wartości 100. for(var licznik=0; licznik<100; ++licznik) document.write("nie będe rozmawiać na lekcji"); Plik petla
Zadania 2 wyświetlić każde zdanie w oddzielnej linii Krok 1: numerujemy każde z powtórzeń tekstu for (var licznik=0; licznik<100; ++licznik) document.write(licznik); document.write(". Nie będe rozmawiać na lekcji<br>"); Brak rezultatów Krok 2: Użycie dwu pętli for (var licznik=0; licznik<100; ++licznik) document.write(licznik); for (var licznik=0; licznik<100; ++licznik) document.write(". Nie będe rozmawiać na lekcji<br>"); Brak rezultatów Krok 3:Wszędzie tam gdzie wymagana jest jedna instrukcja można użyć instrukcji złożonej - czyli ciągu instrukcji zamkniętego w nawiasach klamrowych. for (var licznik=0; licznik<100; ++licznik) document.write(licznik); document.write(". Nie będę rozmawiać na lekcji<br>"); Pliki petla2 oraz petla3
Parametry funkcji Działanie funkcji można uzależnić od parametrów. Pozwalają one na przekazanie wartości do wnętrza funkcji. Jeśli nie wiemy co ani ile razy mamy przepisać, ale wiemy, że zadanie polega na przepisywaniu tego samego tekstu - możemy napisać funkcję: function przepisuj(tekst, ilerazy) for(var i=1; i<=ilerazy; ++i) document.write(i); document.write(". " + tekst); document.write("<br>"); przepisuj("codziennie będę odrabiać zadania domowe", 100); Plik parametr
Jeśli chcemy wypisać znak cudzysłowu na stronie, lub użyć innego znaku specjalnego to poprzedzamyje backslashem - i \ document.write("na ekranie zobaczysz<br>c:\\>") document.write("polecam film \"Wladca Pierścieni\"") document.write("<b><a href=\"spis.htm\">spis treści</a></b>") Wartości funkcji Funkcje nie muszą niczego wyświetlać ani wypisywać na ekranie Funkcje mogą także służyć do przygotowywania wartości lub wykonywania obliczeń. Funkcje zwracają wartość instrukcją return Wykonanie tej instrukcji kończy wykonywanie funkcji. function dodaj(a, b) var w = a + b; return w; var x = dodaj(10, 15); x = dodaj(x, 15); document.write( dodaj(x, 12) );
Instrukcja warunkowa Często w programie trzeba podjąć decyzję - czy wykonać jakąś instrukcję czy też nie. Instrukcja if, while, switch: do instrukcja; while (warunek); while (warunek) instrukcja; switch (wyrażenie ) case wartość1: instrukcja1; break; case wartość2: instrukcja2; break; default: instrukcja0 break; if (warunek) instrukcja; if (warunek) instrukcja1; else instrukcja2
Przykład: if ((dzień == "sobota") (dzień == "niedziela")) alert("uwielbiam weekendy!"); confirm("czy Ty też?"); else if (dzień == "poniedziałek") alert("nie cierpię poniedziałków"); Plik tabliczka
Zadanie 3 Wypisz silnie kolejnych liczb naturalnych od 1 do 4 Pętla while var i = 1; var x = 1; while (i < 5) x = x * i; writeln(i + "! = " + x); i++; Pętla for nie musimy ręcznie zwiększać stanu licznika (w naszym przykładzie było to i) var x = 1; for (var i = 1; i < 5; i++) x = x * i; writeln(i + "! = " + x); i++;
Obiekty Obiekty w JavaScript można tworzyć samemu lub korzystać z już gotowych. Każdy obiekt może mieć pewne własności i metody. Własność obiektu zachowuje się jak zmienna (albo kolejny obiekt), a metoda to nic innego jak funkcja odnosząca się do obiektu. Własności i metody obiektów wywołuje się następująco: obiekt.własność obiekt.metoda() Przy odwoływaniu się do metod lub własności obiektu można użyć instrukcji with, np.: with (obiekt) wlasnosc = 'aaa'; metoda(parametr); Nowy obiekt tworzy się instrukcją new. Konstruktor obiektu jest funkcją, w której do konstruowanego obiektu odwoływać się można poprzez słowo this: function mojobiekt() this.wlasnosc1 = null; this.wlasnosc2 = null; return this; Użycie: nowyobiekt = new mojobiekt();
Czyli: Obiekty to nie tylko grupy danych - dla obiektu możemy zdefiniować także funkcje które na danym obiekcie mogą być wykonywane. Funkcje takie nazywane są metodami Metody mogą być wywoływana tylko dla konkretnego obiektu. Wywołujemy je podobnie jak zwykłe funkcje ale poprzedzamy je nazwąobiektu i kropką. Większość elementów z jakimi mamy do czynienia w programamch - to obiekty. Przykładem obiektu jest document w którym wywoływaliśmy metodę write aby dopisać fragment dokumentu
Napisy Za napisy w języku JavaScript odpowiada klasa String Jeśli chcemy zamienić dowolną wartość na obiekt typu napis - wystarczy, że potraktujemy String jak funkcję zwracającą obiekt Napisy pozwalają na wykonanie wielu przydatnych operacji: charat - wskazany znak charcodeat - kod wskazanego znaku concat - łączy napisy indexof - zwraca miejsce podnapisu replace - zamienia fragment w napisie split - rozdziela na tablice w miejscach określonych separatorami substr - zwraca fragment napisu substring - podobnie jak poprzednia
Data Date jest obiektem pozwalającym na zarządzanie datą i godziną Posiada metody pozwalające na dostęp do wszystkich składników daty: getday - dzień tygodnia (0..6) getdate, setdate - dzień miesiąca (1..31) getmonth, setmonth - miesiąc (0..11) getyear, setyear - rok (00-99) getfullyear - rok - w pełnym zapisie (0000-9999) gethours, sethours - godziny (0..23) getminutes, setminutes - minuty (0..59) getseconds, setseconds - sekundy (0..59) getmiliseconds, setmiliseconds - milisekundy (0..999) Date - użycie: zmienna = new Date() zmienna = new Date(hours, minutes, seconds) zmienna = new Date(year, month, day) Dostępne metody: getdate(), setdate(), gettime(), getday(), settime() itp.
Przykład programu var d = new Date(); d.setdate(1); var m = d.getmonth() d.setdate( 1 - d.getday() ); do document.write("<tr>"); for (var i=0; i<7; ++i) document.write("<td>"); document.write( d.getdate() ); document.write("</td>"); d.setdate( d.getdate() + 1 ) document.write("</tr>"); while (d.getmonth() == m)
Tablice W języku JavaScript - tablice są obiektami które muszą być utworzone instrukcją new var tab = new Array(); Do elementów tablicy możemy się dostawać używając ich pozycji. Elementy numerowane są od 0. Tablice mają taki rozmiar jaki jest w danej chwili potrzebny by pomieścić wszystkie elementy. Nie jest wymagane by wszystkie elementy były tego samego typu. Wielkość tablicy można sprawdzić używając funkcji lenght tab[0] = 12.9; tab[1] = "Napis"; tab[2] = 1e-12; document.write( tab.length; Inicjalizacja tablic Tworząc tablicę, możemy od razu wypełnić ją wartościami podając je w nawiasach: var miesiace = new Array( "styczeń", "luty", "marzec", "kwiecień", "maj", "czerwiec", "lipiec", "sierpień", "wrzesień", "październik", "listopad", "grudzień"); Możemy podać ciąg wartości, lub liczbę elementów - jeśli podamy jako parametr przy tworzeniu tablicy - liczbę - będzie potraktowana jak liczba elementów Wartości nadane początkowo - mogą być zmieniane przez program
Zdarzenia Na stronie WWW wiele elementów może generować zdarzenia Zdarzenia mogą być związane z działaniami użytkownika takimi jak kliknięcie na jakimś elemencie lub przesunięcie kursora myszki ponad elementem strony. OnClick, onfocus, onchange Mogą także pochodzić od systemu i informować na przykład o tym, że strona jest w całości załadowana lub właśnie jest zmieniana onload, onunload Przykład zdarzenia Typowym zdarzeniem jest naciśnięcie przycisku Możemy na przykład wyświetlić komunikat poleceniem alert <html> <body> <form name=f1> <input type=button name=b1 value="nie dotykać" onclick="alert('auu!')"> </form> </body> </html>
Możemy także wywołać funkcję którą sami napiszemy <script> function zdarzenie() alert('auu!') </script> <form name=f1> <input type=button name=b1 value="nie dotykać" onclick="zdarzenie()"> </form> Możemy także modyfikować zawartość elementów dokumentu function zdarzenie() alert('auu!'); document.f1.b1.value = "Mowiłem, żeby nie dotykać"; Folder zdarzenia
<IMG SRC="coś tam" eventhandler="polecenie 1; polecenie 2; polecenie 3"> W miejsce eventhandler należy wstawić odpowiednie określenie zdarzenia. Oto lista najużyteczniejszych zdarzeń: Event handler Opis onclick klinięcie myszką na dany element onfocus wybranie danego pola formularza onblur odwrotne do onfocus onchange zmiana zawartości elementu formularza onselect gdy zawartość pola formularza zostaje wybrana onmouseover gdy kursor wejdzie nad element onmouseout gdy kursor opuści obszar nad elementem onload gdy dokument jest ładowany (dotyczy BODY oraz obiektu window) onunload gdy dana strona jest opuszczana (dotyczy BODY oraz obiektu window)
Wbudowane funkcje alert("tekst") - wyświetla okienko z tekstem eval("kod") - oblicza i zwraca wartość wygenerowaną przez "kod" (może to być ciąg instrukcji) parsefloat("ciąg") - konwertuje ciąg znaków na liczbę zmiennoprzecinkową parseint("ciąg") - konweruje ciąg znaków na liczbę całkowitą Przykład: <script language="javascript"> <!-- function wyswietl() alert(eval("5+10")); //--> </script> <input type="button" value="kliknij tu" onclick="wyswietl()"> <input type="button" value="i tu też" onclick="alert('tekścik')">