Podstawy JavaScript. <script type="text/javascript"> kod skryptu </script>

Transkrypt

1 Podstawy JavaScript Jest to język skryptowy stworzony przez firmę Netscape jako LiveScript, którego celem było rozszerzenie możliwości HTMLa w taki sposób, aby strony stały się bardziej atrakcyjne pod względem sposobu prezentacji danych oraz zostały wzbogacone o możliwość interakcji z użytkownikiem. Na mocy porozumienia z firmą Sun Microsystems w 1995 roku oficjalnie narodził się pod obecną nazwą - JavaScript. JavaScript a Java. Istnieją dwie szkoły, jeżeli chodzi o powiązania JavaScript - Java: jedni uważają, że JavaScript sięga swoimi korzeniami języka Java, a inni dowodzą, że poza nazwą - niewiele mają ze sobą wspólnego. Przede wszystkim JavaScript jest językiem skryptowym - tzn. interpretowanym. Nie musi być kompilowany do kodu maszynowego, a żeby zobaczyć jak działa aplikacja, którą napisaliśmy za jego pomocą - wystarczy przeglądarka internetowa obsługująca JavaScript. Ze względów bezpieczeństwa nie można zapisywać na dysku komputera, na którym przeglądana jest dana strona. Wszelkie odwołania do funkcji i obiektów wykonywane są w trakcie wykonywania programu. Java natomiast jest w pełni obiektowym językiem programowania pozwalającym na budowanie zaawansowanych i skomplikowanych programów, a ze względu na to, że są uruchamiane w specjalnym środowisku - Wirtualnej Maszynie Java - niezależnych od platformy sprzętowej i systemowej. Podobieństwa pomiędzy Java i JavaScriptem można zauważyć np. w samej składni języków. Zalety Język jest relatywnie łatwy do opanowania - nic nie stoi na przeszkodzie, aby zacząć używać go już po kilku minutach od rozpoczęcia nauki. Ponieważ jest to najbardziej rozpowszechniony język skryptowy, w Internecie można znaleźć setki stron z kursami oraz gotowymi, przykładowymi skryptami, a także miliony witryn wykorzystujących JavaScript. O jego popularności w dużej mierze zadecydował fakt, iż pozwala on na odciążenie serwerów i ograniczenie zbędnych danych, wysyłanych przez Internet. Można sobie wyobrazić sklepy internetowe, w których nieodzownym elementem są formularze wypełniane przez użytkownika. Dzięki JavaScript można sprawdzić poprawność wprowadzonych danych na komputerze klienta, pomijając przy ewentualnym błędzie scenariusz, w którym dane są wysyłane, serwer zużywa moc obliczeniową na ich sprawdzenie, wygenerowanie strony z opisem błędu i odesłaniem jej z powrotem na komputer klienta. JavaScript jest nieustannie rozwijany. Powstały liczne biblioteki, odciążające użytkownika z konieczności pisania powtarzającego się często kodu, a także dbające o to, żeby efekt był zgodny z założeniami na najpopularniejszych przeglądarkach np. JQuery. Wady Największą wadą JavaScript są różnice w interpretacji kodu w różnych przeglądarkach. Zdarza się tak, że różne polecenia w różnych przeglądarkach realizują to samo. Jest to efekt walki pomiędzy producentami przeglądarek, którzy chcieli przeforsować swoje koncepcje i narzucić je użytkownikom. To dodatkowo objawia się w braku spójnej i jednoznacznej dokumentacji. Nie można być pewnym, że kod napisany nawet zgodnie z zaleceniami W3C będzie prawidłowo działał na wszystkich przeglądarkach. Oczywiście najwięcej problemów jak dotąd przysparzał Internet Explorer. Umieszczanie kodu 1. Zagnieżdżony w pliku HTML (w dowolnym miejscu w znacznikach body jak i head) <script type="text/javascript"> kod skryptu </script> 1

2 2. W osobnym pliku. Wtedy dodajemy w nagłówku strony odwołanie do pliku ze skryptami <script type="text/javascript" src="nazwa_pliku.js"></script> 3. Gdy przeglądarka nie obsługuje JavaScript możemy poinformować o tym użytkownika: <noscript> Twoja przeglądarka nie obsługuje JavaScriptu. Aby zobaczyć stronę w pełnej funkcjonalności, zainstaluj inną przeglądarkę: Internet Explorer, Chrome, Firefox, Netscape Navigator, Mozilla, Opera... </noscript> Lub możemy wykorzystać komentarze JavaScript <script type="text/javascript"> // Twoja przeglądarka nie obsługuje JavaScriptu. /* Aby zobaczyć stronę w pełnej funkcjonalności, zainstaluj inną przeglądarkę: Internet Explorer, Netscape Navigator, Mozilla, Opera... */  </script> Obecnie jednak większość przeglądarek obsługuje JavaScripty. Podstawowe operacje document.write("witaj świecie!") wypisze podany tekst na stronie. W nawiasach można wstawić dowolny kod html np. 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>") Zmienne. Podobnie jak w PHP, w JavaScript typ zmiennej jest rozpoznawany automatycznie przy jej deklaracji var imie="janek" // zmienna typu string var wiek=20 // zmienna typu integer document.write("nasz gość ma na imie "+imie+".") document.write(imie+" ma "+wiek+" lat") Operatory Operatory Arytmetycze Operator Opis Przykład Wynik + Dodawanie x=3 x=x+4 - Odejmowanie x=4 x=6-x * Mnożenie x=3 x=x*5 / Dzielenie 10/5 9/

3 % Modulo (reszta z dzielenia) 4%3 12%8 8%2 ++ Zwiększanie o 1 x=2 x++ -- Zmniejszanie o 1 x=4 x x=3 x=3 Operatory przypisania Operator Przykład Równoważne z = x=y += x+=7 x=x+7 -= x-=3 x=x-3 *= x*=y x=x*y /= x/=y x=x/y %= x%=y x=x%y Operatory porównania Operator Opis Przykład == jest równe 2==3 wynik:fałsz!= nie jest równe 2!=3 wynik:prawda > jest większe 25>30 wynik:fałsz < jest mniejsze 2<3 wynik:prawda >= większe lub równe 25>=3 wynik:prawda <= mniejsze lub równe 2<=3 wynik:prawda Operatory logiczne Operator Opis Przykład && i x=3 y=4 (x < 9 && y > 2) wynik:prawda 3

4 lub x=3 y=4 (x==8 y==6) wynik:fałsz! zaprzeczenie x=3 y=4!(x==y) wynik:prawda Funkcje function suma(liczba1, liczba2) sumaliczb=liczba1+liczba2 // dodaje liczby i przypisuje nowej zmiennej wynik=sumaliczb return wynik // zwraca zmienną wynik a=1; b=2; c=suma(a,b) // funkcja zwraca wartość, która jest podstawiana do zmiennej c document.write("c="+c+" to samo co: "+ suma(a,b)) Funkcje predefiniowane Pisząc nasze skrypty mamy zawsze dostęp do zestawu funkcji standardowych dla JavaScript. Należy do nich przykładowo funkcja alert - wyświetlająca okienko dialogowe z informacją i przyciskiem OK, albo prompt - wyświetlającej okienko, w którym użytkownik może wpisać wartość zwracaną potem do programu. alert("witam na mojej stronie") document.write("miło mi Cię gościć "+ prompt("podaj imię:") +" na mojej stronie") Obiekty Obiekty są konstrukcjami programistycznymi posiadającymi tzw. właściwości, którymi mogą być zmienne lub inne obiekty. Z obiektami powiązane są funkcje wykonujące operacje na jego właściwościach, a nazywamy je metodami. Do właściwości danego obiektu możemy się dostać używając zapisu: nazwa_obiektu.nazwa_właściwości function pokaz_auto() dane="marka: "+ this.marka +" Rocznik: "+ this.rok +" Cena: "+ this.cena +"<br>" document.write(dane) this.wlasciciel.pokaz() // metoda pokaz obiektu osoba function pokaz_osoba() dane="imie: "+ this.imie +" nazwisko: "+ this.nazwisko +"<br>" document.write(dane) function auto(marka,rok,cena,wlasciciel) this.marka=marka this.rok=rok this.cena=cena this.wlasciciel=wlasciciel this.pokaz=pokaz_auto // dodajemy metode pokazujaca dane naszego auta function osoba(imie,nazwisko) this.nazwisko=nazwisko this.imie=imie this.pokaz=pokaz_osoba // dodajemy metode pokazujaca nasza osobe 4

5 // tu koniec funkcji pisanych w sekcji HEAD // potem gdzieś gdzie nam potrzeba: posiadacz=new osoba("jan","kowalski") bryka=new auto("ferrari",2003,200000,posiadacz) bryka.pokaz() // pokazuje nam wszystkie wlasciwosci naszego obiektu Instrukcje warunkowe i pętle If else if (warunek) kod wykonywany jeżeli warunek spełniony else kod wykonywany jeżeli warunek nie spełniony switch switch (zmienna) case wartosc1: kod wykonywany gdy zmienna=wartosc1 break case wartosc2: kod wykonywany gdy zmienna=wartosc2 break //... itd case wartoscx: kod wykonywany gdy zmienna=wartoscx break default: kod wykonywany, gdy żadnej z powyższych wartości nie przyjmuje zmienna Operator warunkowy zmienna=(warunek)?wartosctrue:wartoscfalse while while (warunek) kod pętli Do while do kod wykonywany w pętli while (warunek) For for(inicjalizacja_zmiennej; warunek; zmiana_zmiennej) kod wykonywany w pętli Zdarzenia elementów HTML Zdarzenia są to akcje podejmowane przez przeglądarkę w odpowiedzi na ruchy myszki, klawiatury, bądź ogólnie - na zmianę stanu dokumentu w danym momencie (np. załadowanie się obrazka, kodu strony). Dzięki JavaScript możemy kontrolować większość zdarzeń jakie zachodzą na naszych stronach. Najczęściej wykorzystywane zdarzenia przedstawione są poniżej: 5

6 zdarzenie opis z obiektami Onclick zachodzi, gdy naciśniemy przycisk myszki na obiekcie button, checkbox, Image, layer, link, radio, reset, submit onmouseover zachodzi, gdy najedziemy wskaźnikiem na obiekt Image, layer, link onmouseout zachodzi, gdy opuszczamy wskaźnikiem obiekt Image, layer, link onmousedown zachodzi, gdy trzymamy przyciśnięty przycisk myszki na obiekcie Image, layer onmouseup zachodzi, gdy zwolnimy przycisk myszki na obiekcie Image, layer Onblur zachodzi, gdy opuszczamy obiekt (przejście na inny obiekt password, select, text, textarea Onfocus zachodzi, gdy wchodzimy na obiekt password, select, text, textarea Onchange Onselect zachodzi, gdy opuszczamy obiekt, którego zawartość została zmieniona zachodzi, gdy zaznaczymy tekst wewnątrz pola tekstowego password, select, text, textarea password, text, textarea Onsubmit zachodzi, gdy wysłamy formularz form On reset zachodzi, gdy resetujemy formularz form Onload zachodzi w momencie załadowania dokumentu do przeglądarki document, frame Onunload zachodzi w momencie opuszczania strony document, frame Onabort zachodzi, gdy przerwane zostaje ładowanie strony document, frame Onerror zachodzi, gdy przeglądarka nie może załadować obrazu Image HTML DOM DOM to skrót od Document Object Model - czyli model obiektów dokumentu. Jest to tzw. interfejs programowania dla elementów HTML jakie mogą pojawiać się na stronach. HTML DOM to standard określający sposoby dostępu oraz zmiany zawartości, właściwości, parametrów poszczególnych elementów HTML. Dzięki temu do zawartości stron HTML mogą dostawać się wszystkie typy przeglądarek i języków programowania. Każdy z elementów HTML ma określone właściwości i metody, które są zaimplementowane również w JavaScript. Nie ma sensu zamieszczanie tutaj pełnego opisu tych elementów. Wszystkie potrzebne informacje można znaleźć pod adresami: 6

7 Nasz dokument możemy rozrysować jako hierarchiczne drzewo. Na samej górze jest dokument HTML, a tuż pod nim znajdują się jego "dzieci" (inna nazwa to korzenie - nody) - czyli elementy znajdujące się w document. Przykładowo jeżeli na naszej stronie będziemy mieli akapit: <p id="paragraf">ten napis zawiera <strong id="bold">pogrubiony tekst</strong></p> <p>lorem ipsum</p> to odwołanie się do naszych elementów z poziomu skryptu będzie miało postać: document.getelementbyid('paragraf') //wskaz uje na nasz akapit document.getelementbyid('bold') //wskaz uje na nasz znacznik strong document.getelementsbytagname('p') //kolek cja akapitów document.getelemensbytagname('p')[0] //wskaz uje na pierwszy akapit document.getelemensbytagname('p')[0].getelementsbytagname('strong')[0] //pobie ramy pierwszy akapit, a w nim pobieramy pierwszy strong document.getelementbyid('paragraf').getelementsbytagname('strong') //kolek cja znaczników strong znajdujących się w akapicie paragraf document.getelementbyid('paragraf')[1].firstchild //pierwsze dziecko 2 akapitu document.getelementbyid('cos').childnodes[1] //drugie dziecko elementu cos document.getelementbyid('cos').parentnode //element rodzic w którym leży element cos Przykład HTML <table id="tabelka" class="tab"> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr> <tr><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> <tr><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr> <tr><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td></tr> </table> JavaScript function podswietl_wiersze(id) var tab = document.getelementbyid(id); var td = tab.getelementsbytagname('td'); for (x=0; x<td.length; x++) td[x].onmouseover = function() this.parentnode.classname = 'podswietlone'; //ustawiamy klase hover dla TR 7

8 td[x].onmouseout = function() this.parentnode.classname = ''; podswietl_wiersze('tabelka') AJAX Technologia AJAX nie jest niczym nowym, tak naprawdę jest używana już od 1998 roku. Popularność zyskała niedawno, w latach , kiedy to Google zaczęło używać AJAXa na szerszą skalę, w swoich projektach. Wtedy właśnie webmasterzy zrozumieli, że połączenie JavaScript z XML daje im bardzo duże możliwości. Przykładowy kod:  <html> <head> <title>przykładowy skrypt AJAX</title> <script type="text/javascript"> // pierwsza część kodu var ObiektXMLHttp = false; if (window.xmlhttprequest) ObiektXMLHttp = new XMLHttpRequest(); else if (window.activexobject) ObiektXMLHttp = new ActiveXObject("Microsoft.XMLHTTP"); // druga część kodu function getdata(zrodlo, cel) if(obiektxmlhttp) var cel = document.getelementbyid(cel); ObiektXMLHttp.open("GET", zrodlo); ObiektXMLHttp.onreadystatechange = function() if (ObiektXMLHttp.readyState == 4) cel.innerhtml = ObiektXMLHttp.responseText; // trzecia część kodu ObiektXMLHttp.send(null); </script> </head> <body> <h1>ajax w praktyce</h1> <form> <input type = "button" value = "Pokaż wiadomość" onclick = "getdata(' 'div')"> </form> <div id="div"> Tutaj pojawi się wiadomość. </div> </body> </html> Pierwsza część kodu inicjuje obiekt XMLHttp - warunek if() jest tam tylko dlatego, że Internet Explorer nie potrafi zainicjować tego obiektu bez ActiveX - więc musimy mu trochę pomóc. Druga część kodu zawiera funkcję getdata z dwoma atrybutami: źródło, czyli skąd ma pobrać dane, oraz cel - dokąd ma je wysłać. Jak pewnie zauważyłeś, przy otwieraniu pliku z danymi podajemy nie tylko jego adres (najlepiej, aby plik z którego pobierasz dane znajdował się na tym samym serwerze co plik 8

9 pobierający dane), ale też dodatkowy atrybut - "GET". Zauważ też, że treść z pliku pobierana jest dopiero wówczas, gdy ObiektXMLHttp.readyState będzie miał wartość 4. Co to oznacza? Po prostu, że ObiektXMLHttp zakończył swoje działania i można spokojnie wyświetlić pobrane dane. Formularze Podpowiedzi, sprawdzanie poprawności //sprawdza zwykłe pole tekstowe function sprawdzpole() if (this.value=='') this.createerror('wpisałeś złe dane'); return false; else this.removeerror(); return true; //funkcja sprawdza poprawnosc maila function sprawdzmaila() var WzorMaila = /^[0-9a-z_.-]+@[0-9a-z.-]+\.[a-z]2,3$/i if (!WzorMaila.test(this.value)) this.createerror('podałeś złego a'); return false; else this.removeerror(); return true; //etap 1 - podpowiedzi var formularz = document.getelementbyid('forma'); formularz['imie'].onchange = sprawdzpole; formularz['mail'].onchange = sprawdzmaila; //etap 2 - wysylanie formularz.onsubmit = function() for (x=0; x<this.forms.elements.length; x++) if (this.classname.indexof('wymagane')!=-1 && this.classname.indexof('daneerror')!=-1) //błędne dane - nie wysyłamy return false; return true; Zadanie Dodać przynajmniej jeden skrypt JavaScript do strony. Skrypt może na przykład służyć do: walidacji formularza, obsługa zdarzeń na stronie, dynamicznej zmiany treści strony (bez przeładowania jej), zmiany pewnych elementów na stronie, ich właściwości (np. kolorów). 9