Programowanie w Javie

Wykład 4:
Język JavaScript:
1.
2.
3.
4.
5.
Zastosowanie
Metody osadzanie skryptu JS w dokumencie HTML
Składnia języka
Funkcje. Obiekty. Zdarzenia.
DOM
JavaScript
• skryptowy język programowania
• interpretowany a nie kompilowany
• w JS nie piszemy samodzielnych programów, a jedynie
programy, które można umieścić w dokumencie HTML.
Programy w JS są uruchamiane przy otwieraniu dokumentu
HTML w przeglądarce
• JS to nie jest uproszczoną wersja Javy. Są to dwa różne języki.
Ale jest dużo podobieństw: składnia i nazwy obiektów
bibliotecznych
• JS jest zorientowany obiektowo, ale nie wspiera w pełni
obiektowości jak Java (nie ma np. mechanizmu dziedziczenia).
Opiera się na predefiniowanych obiektach.
• JS został opracowany przez Netscape Communications
Corporation (twórcę przeglądarki Netscape, teraz Mozilla
Firefox), rok 1995.
Zastosowanie JS:
"ożywienie" strony internetowej
Za pomocą programów (skryptów) JS możemy tworzyć m.in.:
– interakcję z użytkownikiem poprzez obsługę zdarzeń: np.
• najechanie myszką na element strony powoduje wyświetlenie
komunikatu
• wysuwane menu po kliknięciu lub najechaniu myszką
• obsługa pokazu slajdów lub wyświetlanie automatyczne
• sprawdzać poprawność wypełnienia formularzy, czy np. zostały
wypełnione wszystkie pola
– dynamiczne treści na stronie: np. zegar z bieżącym czasem,
automatycznie aktualizowany
– efektowne wyświetlanie galerii zdjęć
– modyfikować część strony bez potrzeby przeładowania całej strony
(np. uzupełnienie wyszukiwanej frazy) - technologia AJAX (przyszły
semestr)
JavaScript czyli programowanie po stronie klienta
•
•
•
skrypty JS osadzamy (umieszczamy, wstawiamy) w kodzie HTML
przeglądarki www posiadają interpretery JS i to przeglądarka wykonuje
kod JS, a nie serwer
jedyne zadanie serwera: odesłać do przeglądarki dokument HTML
Mówimy więc, że skrypty JS wykonują się po stronie klienta (w przeglądarce).
Albo mówimy o programowaniu po stronie klienta, ponieważ piszemy
program, który będzie wykonywany po stronie klienta (w przeglądarce).
Programowanie po stronie serwera (czyli programy będą wykonywane na
serwerze) - przyszły semestr.
Metody osadzania JS w kodzie HTML
•
w nagłówku (head) lub w ciele (body) dokumentu HTML w elemencie script
<script>
document.write("Trwa wykład z JavaScriptu");
</script>
•
poprzez zewnętrzny plik (import pliku):
Skrypt zapisujemy w oddzielnym pliku z rozszerzeniem .js
Następnie dołączamy go do dokumentu HTML wpisując w nagłówku (head):
<script src="adres_url_pliku_js"></script>
•
jako obsługę zdarzenia:
Skrypt wpisujemy w znaczniku jako wartość atrybutu będącego nazwą
zdarzenia
<h1 onclick="alert('Trwa wykład z Javascriptu');">
Kliknij, aby zobaczyć komunikat.
</h1>
Przykłady: OsadzanieJS*.html
Kolejność wykonania skryptów
Najpierw skrypt osadzony w nagłówku dokumentu
Następnie skrypt osadzony w ciele dokumentu
Jeśli jest więcej niż jeden skrypt w nagłówku lub ciele to będą
wykonane w kolejności osadzenia.
Zaś skrypt dodany jako obsługa zdarzenia zostanie wykonany, gdy
zdarzenie nastąpi np. gdy klikniemy myszką
Przykłady: Kolejnosc.html
Jak radzić sobie z błędami
Do debugowania można wykorzystać:
• przeglądarkę Firefox:
włączamy Firebug a w nim zakładkę "Konsola"
• przeglądarkę Chrome:
włączamy DevTools a w nim zakładkę
"Konsola"
Uruchamianie skryptu w konsoli
Wygodny sposób, aby np. sprawdzić co robi dane polecenie lub
przypomnieć składnię:
1. Włączamy Firebug-a i wybieramy zakładkę "Konsola"
2. Po prawej stronie wpisujemy instrukcje JS
3. Naciskamy "Uruchom". Jeśli są jakieś błędy pokażą się po lewej stronie
Jak zobaczyć jaki został wygenerowany kod HTML
1.
2.
3.
4.
5.
Otwieramy przykład: Generowany.html
Mamy listę punktowaną.
Kod HTML tej listy został wygenerowany przez skrypt JS
Ale jak włączymy źródło tej strony (CTRL-U) to nie pokaże się kod HTML
listy punktowanej
Aby zobaczyć ten kod należy zaznaczyć listę z miastami i z menu
kontekstowego (prawy przycisk myszy) wybrać
 Firefox: "Pokaż źródło"
 Chrome: "Zbadaj element"
W ten sposób można sprawdzić czy został wygenerowany właściwy kod tzn.
zgodny z tym jak tworzy się listy w HTML
Elementy języka JS - typy danych
• liczbowe: typ całkowity, typ zmiennoprzecinkowy
• logiczne
• napisy (String), tworzymy za pomocą " lub '
Oba sposoby są dobre:
"jakiś tekst"
'jakiś tekst'
• tablice (tablice są obiektami)
• obiekty
Elementy języka JS - zmienne
• Nie trzeba podawać typu zmiennej
• Tej samej zmiennej możemy przypisywać wartości różnych
typów (mówimy, że JS jest typowany dynamicznie)
• Deklaracja zmiennej bez inicjalizacji:
var nazwa_zmiennej;
• Deklaracja zmiennej z inicjalizacją. Można pominąć słowo var:
nazwa_zmiennej = wartosc;
Elementy języka JS
Tak samo jak w Javie:
• komentarze
• instrukcje sterujące: if, for, while, do while, switch, break, continue
• operatory: arytmetyczne, przypisania, konkatenacji (łączenia) napisów,
operator warunkowy, logiczne, bitowe
Operatory porównania:
== (prawda, gdy są równe wartości)
=== (prawda, gdy są równe wartości i typy)
Przykład:
x=1;y="1";
x == y - prawda
x === y - fałsz
Przykład: TypyDanychZmienne.html
Metoda write
•
•
•
Metoda wypisuje w dokumencie HTML tekst podany jako argument
Jest metodą predefiniowanego obiektu document
Odwołanie do metody tak jak w Javie czyli za pomocą operatora kropka:
document.write()
•
Argument można podać tak:
document.write("Słowo 'write' znaczy po polsku pisać");
document.write('Słowo "write" znaczy po polsku pisać');
Ale tak jest źle:
document.write("Słowo "write" znaczy po polsku pisać");
Chyba, że chronimy znak:
document.write("Słowo \"write\" znaczy po polsku pisać");
Powyższe można stosować też do innych metod, np. alert(), prompt()
Łączenie napisów: operator +
Uwaga: jeśli wywołamy metodę write po załadowaniu dokumentu to
dotychczasowa zawartość dokumentu zostanie nadpisana
Przykład: Nadpisanie.html
Metoda alert. Metoda prompt.
•
•
•
•
alert wyświetla okno dialogowe z komunikatem
prompt wyświetla okno dialogowe, w którym można wprowadzić dane
jako argument można podać napis. Pokaże się on w oknie dialogowym.
obie metody zatrzymują wykonanie skryptu. Wykonywanie skrypt jest
kontynuowane po naciśnięciu OK lub Anuluj
Przykład: AlertPrompt.html
Funkcje
Definiowanie i wywoływanie funkcji zobacz przykład: Funkcje.html
Obiekty
JavaScript – język zorientowany obiektowo.
Trzy rodzaje obiektów:
– wbudowane (Array, String, Math, Date, RegExp)
– obiekty DOM reprezentujące okno przeglądarki i
elementy dokumentu HTML
– zdefiniowane przez użytkownika
Tablice (obiekt Array)
Przykłady: Tablice.html
Pole:
length rozmiar tablicy
Metody:
reverse() odwraca kolejność elementów tablicy
join() łączenie elementów tablicy w napis
sort() sortowanie tablicy alfabetycznie
shift() usuwa i zwraca pierwszy element tablicy
pop() usuwa i zwraca ostatni element tablicy
Więcej o metodach : http://www.w3schools.com/jsref/jsref_obj_array.asp
Napisy (obiekt String)
•
utworzenie obiektu typu String i przypisanie go zmiennej, trzy
równoważne instrukcje:
tekst = "Trwa wykład";
tekst = 'Trwa wykład';
tekst = new String("Trwa wykład");
•
String można obsługiwać jak tablicę znaków, tak jak w C, nie tak jak w Javie
Metody obiektu String:
split()
podzielenie napisu względem separatora i zapisanie w
tablicy
indexOf()
wyszukanie tekstu. Zwraca indeks znaku pierwszego
wystąpienia podanego argumentu
fromCharCode() zwraca znak na podstawie numeru Unicode
Przykłady: Napisy.html
Więcej: http://www.w3schools.com/jsref/jsref_obj_string.asp
Obiekt Math
pola:
• Math.PI – liczba π: 3,14
• Math.E – liczba E: 2,71
metody:
• Math.floor(x) - zaokrąglenie do dołu
• Math.random() - liczba losowa z przedziału [0,1)
• Math.sqrt(x) -pierwiastek kwadratowy z "x"
Przykład: Math.html
Więcej na:
http://www.w3schools.com/jsref/jsref_obj_math.asp
Obiekt Date
new Date() – tworzy obiekt z bieżącą datą i godziną (czas systemowy
użytkownika, nie serwera)
new Date(2014,9,1) – tworzy obiekt ze wskazaną datą, kolejne argumenty
wskazują rok, miesiąc (styczeń to 0) i dzień itd., jeśli nie podana godzina
domyślnie jest północ. W tym przykładzie będzie data 1.10.2014
Domyślnie data jest wyświetlana w formacie:
Wed Oct 01 2014 00:00:00 GMT+0200
Datę można wyświetlić w przyjaźniejszy sposób korzystając z metod:
getDate() – zwraca dzień miesiąca (od 1 do 31)
getMonth() - zwraca numer miesiąca (od 0 do 11, 0 to styczeń)
getDay() – zwraca dzień tygodnia (od 0 do 6, 0 to niedziela)
getTime() - zwraca liczbę milisekund, które upłynęły od 1.01.1970
Przykład: Date.html
Więcej metod: http://www.w3schools.com/jsref/jsref_obj_date.asp
DOM (Document Object Model)
Obiektowy model dokumentu
•
DOM jest sposobem reprezentacji dokumentu HTML, który polega na tym,
że każdy element strony jest reprezentowany przez obiekt. W polach
obiektu są zapisane właściwości tego elementu.
Np. obiekt reprezentujący element img będzie miał pole src, w którym
będzie zapisana wartość atrybutu src
•
DOM dla konkretnego dokumentu jest tworzony przez przeglądarkę po
załadowaniu tego dokumentu. Mogą być różnice między DOM-em
utworzonym przez Firefox, a DOM-em utworzonym przez np. Chrome
•
Hierarchia obiektów DOM (czyli relacja rodzic - dziecko) jest taka jak
zagnieżdżenie elementów na stronie.
Graficzne przedstawienie DOM dla przykładowego dokumentu
document
head
body
h1
p
DOM - każdy element dokumentu HTML to obiekt
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Podstawy JavaScriptu</h1>
<p>
JavaScript jest to język ...
</p>
</body>
</html>
DOM (Document Object Model)
Obiektowy model dokumentu
•
Gdy modyfikujemy pole obiektu DOM to następuje modyfikacja elementu
strony HTML, który reprezentowany jest przez ten obiekt.
•
JS umożliwia modyfikację obiektów DOM .
Np. możemy za pomocą odpowiedniej metody JS zmodyfikować pole src
obiektu DOM reprezentującego obrazek, a przez to obrazek na stronie
zmieni się na inny.
•
Uwaga: JavaScript  DOM. JS jest jednym z języków, które umożliwia
odwoływanie się do obiektów DOM.
Inny język skryptowy, który umożliwia odwoływanie się do DOM to
VBScript.
DOM - przykład
Przykład: DostepDoDOMPrzyklad.html
•
getElementById() - metoda obiektu JS document, która zwraca obiekt
DOM reprezentujący element strony HTML o podanym atrybucie id".
Aby skorzystać z tej metody element musi mieć nadany atrybut "id".
•
innerHTML - pole, w którym jest zapisana zawartość danego elementu
(czyli zawartość danego znacznika).
•
style - pole, w którym są zapisane deklaracje stylu dla danego elementu
•
src - pole, w którym jest zapisana wartość atrybutu src
Zdarzenia
•
Zdarzenia: kliknięcie myszką, najechanie myszką, naciśnięcie klawisza itp.
Dzisiaj tylko kliknięcie myszką, inne zdarzenia następny wykład
•
Dla elementu strony możemy dodać skrypt (mówimy: dodać obsługę
zdarzenia), który zostanie wykonany, gdy zdarzenie będzie miało miejsce.
Jak dodać obsługę zdarzenia, różne sposoby:
Przykład: ObslugaZdarzenia.html
Obiekt JS document
Metody:
• write() - wpisanie tekstu do dokumentu HTML
• getElementById() - zwraca obiekt reprezentujący element strony o
podanym atrybucie id
• getElementsByClassName(), getElementsByTagName() - zwraca tablicę
obiektów reprezentujące elementy, odpowiednio o podanym atrybucie
class lub znaczniku (tagu)
Pola:
• lastModified - data ostatniej modyfikacji dokumentu HTML (data ostatniej
modyfikacji pliku)
• images - tablica obiektów reprezentujących wszystkim obrazki w
dokumencie HTML. Kolejność obiektów w tablicy jest taka jak obrazków na
stronie
Więcej: http://www.w3schools.com/jsref/dom_obj_document.asp
Obiekt JS window
•
Za pomocą obiektu JS window odwołujemy się do okna przeglądarki.
Pola, m.in:
• document – bieżący dokument
• innerWidth, innerHeight - szerkość / wysokość okna przeglądarki nie licząc
paska menu i paska przewijania
• location - zobacz następny slajd
Metody, m.in:
• alert(), prompt() – opis metod zobacz slajd "Metoda alert ..."
• open() - otwarcie nowego okna przeglądarki
Więcej: http://www.w3schools.com/jsref/obj_window.asp
Uwaga: Gdy odwołujemy się do bieżącego dokumentu nie trzeba pisać:
window.document, window.alert, window.prompt itd.
Można bez "window."
Obiekt location
Obiekt location jest polem obiektu window. W obiekcie location są zapisane
dane związane z adresem URL strony.
Pola:
•
href – adres URL strony
Jak zrobić przekierowanie na nową stronę:
location.href="http://www.uwb.lt"
Przykład: Przekierowanie.html
Metody:
•
reload() – przeładowanie strony (odpowiednik odśwież)
Więcej: http://www.w3schools.com/jsref/obj_location.asp
Opóźnienie wykonania instrukcji (czas bezczynności)
Metody obiektu window:
• setTimeout(instrukcje,opóźnienie) - opóźnienie wykonania instrukcji
opóźnienie podaje się w milisekundach.
• clearTimeout(identyfikator_opóznienia) - wyzerowanie czasu bezczynności
(przerwanie odliczania czasu, instrukcja, która miała się wykonać po
odliczeniu czasu nie wykona się)
Przykłady:
Opoznienie.html
OpoznienieCzasPobytu.html
Uwaga:
Wywołanie metody setTimeout() nie zatrzymuje dalszego wykonania skryptu,
tak jak np. metoda alert lub prompt
Dodatkowe informacje
Funkcje. Zmienna z "var" czy bez. Funkcja anonimowa.
Przykłady: Funkcje.html
Zmienna z "var" czy bez:
Przykład: ZasiegZmiennychVar.html
Funkcja anonimowa (funkcja bez nazwy).
Zastosowanie: zobacz Slad "Zdarzenia" i przykład ObslugaZdarzenia.html
Obiekt RegExp (wyrażenia regularne)
Obiekt RegExp umożliwia wyszukiwanie podając wzorzec wyszukiwania za
pomocą wyrażenia regularnego
• składnia:
/wzorzec/modyfikator
Przykład: /a+/i
a+ (wyszukiwanie przynajmniej jednego wystąpienia znaku a)
i (wielkość liter nie ma znaczenie)
• utworzenie obiektu RegExp:
obiekt = new RegExp("/a+/i");
•
wywołujemy metodę test() obiektu RegExp podając jako argument tekst,
który ma być przeszukany:
zwróci ona true jeśli wzorzec zostanie odnaleziony, false w przeciwnym
razie.
Przykład. Sprawdź czy zaproponowane hasło zawiera cyfry
Regularne.html