Język JavaScript JavaScript - wykład 1 Podstawy Beata Pańczyk W oparciu o kurs: http://republika.onet.pl/-1,34,fabryka.html 1 JavaScript wprowadzony przez firmy Netscape i Sun język skryptowy (nie wymaga kompilacji) wspomagający tworzenie dokumentów HTML Wykonywanie poleceń JavaScript - przeglądarka WWW (interpretacja po stronie klienta) JavaScript dodaje do stron WWW interaktywność moŝliwość reagowania na polecenia uŝytkownika Język zorientowany obiektowo, składnia i podstawowa struktura wzorowana na C/C++ jeden ze składników DHTML-a, czyli Dynamicznego HTML-a (z ang. Dynamic HTML). DHTML to technika tworzenia i modyfikacji elementów strony za pomocą języka skryptowego. 2 Historia połowa lat 90 - w firmie Netscape powstał język LiveScript 1995 - przemianowany na JavaScript główny twórca - Brendan Eich kolejne lata - kolejne wersje ustandaryzowany przez ECMA (międzynarodowa organizacja standaryzacyjna, skrót od dawnej nazwy European Computer Manufacturers Association) zamieszanie w nazewnictwie - uŝywane są nazwy JavaScript, ECMAScript oraz (dla produktów firmy Microsoft) JScript. obecnie występujące na rynku wersje najpopularniejszych przeglądarek (FireFox 1.5, Internet Explorer 6, Netscape 8, Opera 8) są zgodne z ECMAScript v3, czyli JavaScript 1.5 oraz JScript 5.5 i 5.6. 3 ECMA Script V1 - V3 V4 Wersje JavaScript 1.0 1.1 1.2 1.3 1.4 1.5 2.0 JScript 1.1 2.0-3.0-5.5, 5.6.NET 4 Zastosowania budowa stron reagujących na działania uŝytkownika sprawdzanie poprawności formularzy obsługa elementów interfejsu strony (np. dynamicznych menu i przycisków) dynamiczne generowanie treści oraz realizacja wielu innych efektów 5 Określenie typu skryptów dokument HTML powinien w nagłówku zawierać określenie domyślnego języka skryptowego nie jest to obligatoryjne, ale zalecane przez W3C <meta http-equiv="content-script-type" content="typ"> typ - rodzaj języka. w przypadku języka JavaScript: <meta http-equiv="content-script-type" content="text/javascript"> brak powyŝszego znacznika - przeglądarka próbuje ustalić domyślny język skryptowy na podstawie nagłówków HTTP otrzymanych z serwera 6 1
Umieszczanie skryptów w kodzie HTML Skrypty osadzone - umieszczane wewnątrz kodu HMTL przy uŝyciu znacznika <script> z obligatoryjnym parametrem type, o ile dokument ma być zgodny ze specyfikacją HTML 4 Skrypty zewnętrzne - umieszczenie skryptu w oddzielnym pliku i uŝycie znacznika <script> z parametrem src 7 Skrypty osadzone //tutaj kod skryptu większość dostępnych na rynku przeglądarek potrafi pracować w trybie zgodności z przestarzałymi standardami i akceptuje równieŝ znacznik <script> nie zawierający argumentu type language parametr dawniej określający język skryptu (np. language="javascript"); nie występuje w ścisłej (strict) wersji standardu HTML 4 i obecnie nie naleŝy go stosować (z drugiej strony - starsze przeglądarki, obsługujące standard HTML wcześniejszy niŝ 4.0, rozpoznają tylko parametr language, nie rozpoznają natomiast parametru type) 8 Kod JavaScript w HTML<4 <html> <head> <script language="javascript"> <!-- ukrycie skryptu // instrukcje do wykonania --> </head> 9 Kod JavaScript w HTML4.x kod w bloku znaczników <script>... wymagany parametr: type (dla JavaScriptu "text/javascript") opcjonalnie parametr language oznaczający minimalny numer wersji JavaScript Np.. <script type="text/javascript" language="javascript1.5"> // Ten skrypt wymaga JS 1.5. function fun() {... 10 Kod JavaScript w XHTML nie występuje parametr language specyfikacja XML wymaga, by umieścić treść skryptu wewnątrz sekcji CDATA, jeśli stosowane są znaki "<" czy ">" // <![CDATA[ function fun() {... // ]]> Znaki komentarza "//" zapobiegają błędnemu zinterpretowaniu tej sekcji przez starsze Skrypty zewnętrzne oddzielny plik zwykle z rozszerzeniem js <script type="text/javascript" src="lokalizacja skryptu"> <script type="text/javascript" src="http://nazwa.domeny/skrypty/skrypt.js"> znacznik zamykający jest niezbędny i nie naleŝy go pomijać. przeglądarki 11 12 2
Pełny dokument ze skryptem <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> <meta http-equiv="content-script-type" content="text/javascript"> <title>moja strona WWW</title> <script type="text/javascript" src="http://nazwa.domeny/skrypty/skrypt.js"> </head> <body> </body> 13 </html> Ukrywanie skryptów Jeśli przeglądarka nie obsługuje pewnego typu skryptów, bądź obsługa skryptów jest wyłączona - naleŝy wyświetlić stosowną informację lub teŝ wykonać alternatywny kod stosując znacznik <noscript>: <noscript> <h1> Ta witryna wymaga obsługi skryptów </h1> </noscript> 14 Ukrywanie skryptów c.d. witryna moŝe być odczytywana przez przeglądarki nie obsługujące JavaScript i nie rozpoznające znacznika <script> (mało prawdopodobne) w celu uniknięcia wyświetlenia kodu skryptu, ujmuje się go w komentarze SGML: <!-- Ukrycie przed przeglądarkami nie obsługującymi // JavaScript tutaj treść skryptu // Koniec kodu JavaScript --> 15 Prosty skrypt <?xml version="1.0" encoding="iso-8859-2"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"/> <meta http-equiv="content-script-type" content="text/javascript"/> <title>pierwszy skrypt</title> <!-- Ukrycie przed przeglądarkami nie obsługującymi JavaScript alert("mój pierwszy skrypt!"); //Koniec kodu JavaScript --> </head> <body> <p>pierwszy skrypt</p> </body> </html> 16 Wynik działania skryptu 17 Blok <script> Umieszczanie bloku - w nagłówku (przy pobieraniu strony będzie ładowany jako pierwszy) lub ciele dokumentu Dowolna liczba bloków <script> na stronie Kolejność osadzania skryptów ma znaczenie - będą wykonywane w kolejności umieszczenia na stronie Przeglądarka moŝe wstrzymywać ładowanie i wyświetlanie strony póki nie wykona skryptu - najlepiej skrypty umieszczać na samym końcu (co pomoŝe uniknąć błędów polegających na odwoływaniu się do elementów strony, które jeszcze się nie załadowały) 18 3
Metoda document.write <body> document.write("<h1>"); document.write("oto moja strona WWW"); document.write("</h1>"); <p>ok</p> </body> </html> Metoda document.write sekcji skrypt w <head> <head>... <!-- document.write("<h1>"); document.write("oto moja strona WWW"); document.write("</h1>"); --> </head> <body> <p>ok</p> </body></html> Validation Error: document type does not allow element "h1" here. 19 20 Komentarze w kodzie skryptu Komentarz blokowy /*... treść komentarza blokowego... */ Komentarz wierszowy //treść komentarza liniowego... Komentarz wierszowy moŝe się znaleźć w środku komentarza blokowego: /* //treść komentarza 21 */ JavaScript w przeglądarkach Implementacje JavaScriptu w przeglądarkach dostarczają obiektów pozwalających na: modyfikowanie zawartości dokumentu (obiekt document) manipulowanie oknami i wyświetlanie okien dialogowych (obiekt window) pobieraniem informacji o przeglądarce (obiekt navigator) obsługę zdarzeń 22 Podstawy języka JavaScript RozróŜnianie wielkości liter (domyślna pisownia małymi literami) Zakończenie instrukcji - opcjonalny znak średnika Bloki instrukcji w nawiasach klamrowych { Nazwy zmiennych: mogą zaczynać się od litery, znaku _ nie mogą zawierać spacji polskich liter nie mogą być słowami kluczowymi języka JavaScript 23 Typy zmiennych liczbowy (number) - nie ma rozróŝnienia na typy całkowitoliczbowe i rzeczywiste (zmiennopozycyjne). Liczby zapisywane są za pomocą literałów liczbowych łańcuchowy (string) - w pojedynczym lub podwójnym cudzysłowie logiczny (boolean) : true,false specjalny typ null wartość pusta obiektowy 24 4
Literały Literały wartości zmiennych, np. literał znakowy "złoty", 'kolor' literał liczbowy 2.35e-4, 0.1E-1 Znaki specjalne w literałach znakowych (stałe znakowe) - jak w C \b, \f, \n, \r, \t, \, \\ Znak w szesnastkowym kodzie Unicode \uxxxx np. "\u0041" - znak"a" Przykłady literałów liczbowych 3.142 liczba zmiennoprzecinkowa 314E-2 liczba zmiennoprzecinkowa 26 liczba całkowita 076 liczba ósemkowa 0x9F liczba szesnastkowa 25 Definiowanie zmiennych Definicja zmiennej słowo kluczowe var (opcjonalne) Przykłady definiowania zmiennych var liczba; var liczba=7; liczba=7; var cena=10; var waluta="$"; var napis=cena+waluta; Brak konieczności definiowania zmiennych na początku programu 26 Operatory Operatory arytmetyczne: +, -, /, *, % Operatory zwiększania i zmniejszania: --, ++ Operatory porównania: ==,!=, >, <, >=, <= === równe wartością i typem!== róŝne wartością i typem Operatory logiczne: &&,,! Operatory przypisania: =, +=, -=, *=, /=, %= Operatory bitowe: >>, <<, &,, ^, ~ Konwersja typów i konkatenacja JavaScript - język o łagodnej kontroli typów Zmienne i literały róŝnych typów moŝna bez potrzeby wcześniejszego uzgadniania typów porównywać, łączyć itp. Łączenie typu znakowego i liczbowego operatorem "+" wynik typu znakowego Przykład - najprostszy przypadek konwersji typów: t="2000"; t+=10; //Wynik: t="200010" 27 28 Tablice var nazwa_tab=array(rozmiar_tablicy); np.: var tablica=array(10); tablice o niezdefiniowanej długości moŝna tworzyć za pomocą konstruktora new np. var tab1=new Array(); var tab2=new Array("Rok","2000"); var tablica = new Array("wart1", "wart2", "wart3"); odwołania do elementów tablicy np.: tab2[0] numerowanie elementów tablicy od 0 29 Instrukcja warunkowa i switch if (warunek) {instrukcje else if (warunek) {instrukcje else {instrukcje (warunek)?wartość1:wartość2 switch (zmienna) {case wartość 1: instrukcje;break; case wartość 2: instrukcje;break;... default:instrukcje; np. if(liczbaksiazek >= 5) alert( Prezent!"); else alert("dziękujemy!"); 30 5
Iteracje while (warunek) {instrukcje for(licz=pocz;licz<=koniec;licz++) {instrukcje do { instrukcje) while (warunek) for dla obiektów (przechodzi przez wszystkie pola danego obiektu - w tym elementy tablicy): for (wlasnosc in obiekt) {instrukcje 31 Iteracje - przykłady var haslo=3384; var prosba="podaj hasło!"; var odpowiedz=0; while(odpowiedz!=haslo) { odpowiedz=prompt(prosba, ""); for (i=1; i<5; i++) { document.write(i+"<br>"); 32 Inne instrukcje Funkcje Przerwanie wykonywania pętli i przekazanie sterowania na jej początek continue Przerwanie wykonywania pętli i przekazanie sterowania do instrukcji za pętlą break Instrukcja with with (nazwa_obiektu) {instrukcje 33 Umieszczanie funkcji - w nagłówku dokumentu Funkcje (zmienne lokalne funkcji deklaruje się jako var, zwracane rezultaty poprzedza się słowem kluczowym return) function nazwa_funkcji(arg1,arg2,...) { instrukcje; return zmienna function nazwa_funkcji() { instrukcje; return zmienna 34 Przykład zastosowania funkcji <html><head> function sprawdzkod(kod) { if(kod==1313)return true; return false; </head> <body> <script type= text/javascript"> var kod=prompt("podaj kod dostępu"," "); if(sprawdzkod(kod)) alert("właściwy kod!"); else alert("błędny kod!"); Przykład wynik dzialania </body></html> 35 36 6
Zmienne lokalne i globalne Zmienne lokalne - występujące w funkcjach (lokalne dla danej funkcji) Zmienne globalne występujące poza funkcjami Zmiennej lokalnej nie moŝna wywołać poza funkcją np. function piszlublin(tekst){ var nazwa="lublin: "; //lokalna document.write(nazwa + tekst); return true; JavaScript - Przykład 1 <html> <head> <title>pierwszy przkład w JavaScript</title> function imie() {w=window.prompt("podaj swoje imie:",""); if (w==""){window.alert("cześć ANONYMOUS?"); else {window.alert("cześć "+w+"!!!"); </head> <body> <h2> PRZYKŁAD 1 </h2> <form action="..." method="post"> <p><input name="imie" type="button" value="imie" onclick="imie()" /> Kliknij 37 38 </p></form> <hr/> </body> </html> Przykład 1 - wynik 39 Obiekty obiekty definiuje się dwuetapowo - najpierw strukturę obiektu (prototyp) a na podstawie prototypu tworzy się faktyczny obiekt w JavaScripcie wszystko jest obiektem Object - podstawowy obiekt Obiekty JavaScript: Array (tablica) String (łańcuch tekstowy) Number (liczba całkowita lub rzeczywista) Boolean (wartość logiczna) Function (funkcja JavaScriptu) Date (data) 40 Math (operacje matematyczne). Dostęp do pól i metod Instrukcja wiąŝąca with Obiekty JavaScriptu są tablicami asocjacyjnymi Dostęp do pól obiektów przy uŝyciu dwóch równowaŝnych notacji: obiekt.pole i obiekt["pole"] metody obiektu (funkcje) są jego polami - dostęp jest moŝliwy przy uŝyciu notacji z kropką lub notacji z nawiasami kwadratowymi Np. m.metoda1(); m["metoda1"](); Instrukcje: obiekt.pole1=wartość; obiekt.pole2=wartość; RównowaŜne: with (obiekt) { pole1=wartość; pole2=wartość; 41 42 7
Definiowanie własnego obiektu Aby zdefiniować własny obiekt wystarczy utworzyć funkcję konstruktora: // funkcja konstruktora function MojObiekt(poleA, poleb) { this.polea = polea; this.poleb = poleb; function _metoda1() {alert("mojobiekt::metoda1()"); this.metoda1 = _metoda1; function _metoda2() {alert("mojobiekt::metoda2()"); this.metoda2 = _metoda2; utworzenie instancji klasy MojObiekt (operator new): 43 var m = new MojObiekt(2, 3); Obiekty i metody - przykład funkcja garderoba (konstruktor nowego obiektu) definiuje prototyp obiektu z trzema własnościami zmiennymi materiał, kolor, rozmiar i jedną metodą cena() function garderoba(materiał,kolor,rozmiar) { this.materiał=materiał; this.kolor=kolor; this.rozmiar=rozmiar; this.cena=mcena(); 44 Obiekty i metody - przykład cd function mcena() //Cena wyjsciowa 10+dodatek zalezny od materialu { var cenawyjsciowa=10; var dodatek=0; if (this.material== bawelna ) {dodatek=5.50; if (this.material== akryl ) {dodatek=2.50; if (this.material== lycra ) {dodatek=7.50; return cenawyjsciowa+dodatek Generowanie konkretnego obiektu: sweter=new garderoba( bawelna, czarny, M ) Ustalenie ceny swetra: cenaswetra=sweter.cena() 45 8