2010-03-31
Technologie internetowe
Wykład 4
Skrypty klienckie JavaScript
Skrypty klienckie
Programy osadzone w kodzie HTML
Języki JavaScript, VBScript, ActionScript
Wykonywane przez przeglądarkę
Mogą być nie obsługiwane lub zablokowane
Jawne kody zródłowe
Brak wymiany danych przez sieć
Brak wymagań względem serwera
Brak możliwości współpracy z bazami danych i
rejestracji danych
1
2010-03-31
Język JavaScript
Stworzony przez NETSCAPE
Inna składnia i filozofia zapożyczona z
języka Java
Brak jawnego typowania zmiennych
Zaimplementowany w większości
przeglądarek
Osadzanie JavaScript
Bezpośrednio w znaczniku HTML, w atrybucie definiującym zdarzenie.
}
for (i=1;i<=7;i++)
document.write(i+
);
3
2010-03-31
Osadzanie JavaScript
Dołączanie zewnętrznego pliku skryptowego.
Klasa Array
Jani,Hege,Stale,Kai Jim,Borge,Tove
Borge,Hege,Jani,Kai Jim,Stale,Tove
13
2010-03-31
Document Obiect Model
Opisuje hierarchiczną strukturę obiektów tworzących stronę HTML
Window
Textarea
Frame Link
Text
Image
Hidden
Document
Anchor
Submit
Location
Form
Reset
History
Radio
Navigatior Checkbox
Option
Select
Obiekt Window
Właściwości:
document obiekt dokumentu HTML
history obiekt historii nawigacji
location - obiekt lokalizacji
navigator - obiekt informacji o przeglądarce
frames[] kolekcja ramek w oknie
length liczba ramek na oknie
innerHeight, innerWidth wewnętrzne wymiary okna
outerHeight, outerWidth zewnętrzne wymiary okna
screenLeft, screenTop, screenX, screenY pozycja okna na ekranie
status tekst na pasku statusowym
window.status= Czekam na dane ! ;
14
2010-03-31
Obiekt Window
Metody:
alert(tekst) - pokazuje okienko informacyjne)
promp(pytanie, domyslna tresc) - pokazuje okienko
zapytania i zwraca wpisany tekst
confirm (pytanie) - pokazuje okienko potwierdzeni
tak/nie i zwraca true/false)
close() - zamyka okno
open(url,name,spec) - otwiera nowe okno
resizeTo() - zmienia rozmiar okna
scrollBy(), scrollTo() - przewija okno względnie
moveTo(), moveBy przesunięcie okna na pozycję
navigate(url) przejście do nowego adresu
Obiekt Window
if (confirm('Jesteś pewien, że wychodzisz z serwisu'))
window.navigate('http://www.onet.pl');
else
window.alert('Cieszymy się, że zostałeś !');
window.open('http://wwww.onet.pl','ONET', 'fullscreen=yes');
15
2010-03-31
Obiekt Window
Metody obsługi czasu:
setTimeout(czas,wyrażenie) (wykonuje
wyrażenie po podanej liczbie milisekund)
clearTimeout() (anuluje działanie
setTimeout)
setInterval(czas, wyrażenie) (wywołuje
wyrażenie co podany okres czasu)
clearInterval() (wyłącza interval)
Obiekt Window - przykłady
16
2010-03-31
background-color:yellow">
Obiekt Navigator
Właściwości:
" appName nazw przeglądarki
" appCodeName nazwa kodowa przeglądarki (IE: Mozilla)
" appVersion wersja kodowa przeglądarki
" cookieEnabled dostępność obsługi cookies
" platform platforma, system operacyjny
" userAgent reprezentacja przeglądarki wysyłana w nagłówku HTTP
" userLanguage język użytkownika
document.write(navigator.appName);
17
2010-03-31
Obiekt Screen
Właściwości:
" height, width rozmiary ekranu
" availHeight, availWidth rozmiary pulpitu
" colorDepth głebia kolorów w bitach (8,16,24,32)
if (screen.width<1024)
{
alert( Strona wymaga wyższej rozdzielczości );
navigate( http://www.polsl.pl );
}
Obiekt History
Właściwości:
" length ilość wpisów w historii przeglądania
Metody:
" back() - przejdz do poprzedniej strony
" forward() przejdz do następnej strony
" go(n) przejdz n stron w przód (+) lub w tył(-)
" go(url) przejdz do strony o podanym url
18
2010-03-31
Obiekt Location
Właściwości:
" host nazwa serwera i port
" hostname nazwa serwera
" href cały URL
" pathname ścieżka URL
" port
" protocol protoków (http, https, file)
" search część URL po znaku ?
Metody:
" assign(url) załaduj nową stronę
" reload(f) odśwież stronę HTML, f równe true oznacza pominięcie cache
" replace(url) załaduj nową stronę z usunięciem bieżącej z historii
location.assign( http://www.onet.pl );
Obiekt Document
Kolekcje
forms[] - formularze
images[] - obrazy
links[] hiperłącza
anchors[]- zakładki
cookie cookies danego dokumentu
title - tytuł dokumentu
URL adres dokumentu
reffer adres dokumentu, który załadował dokument
location obiekt lokalizacja dokumentu
bgColor kolor tła documentu
fgColor - kolor czcionki dokumentu
19
2010-03-31
Obiekt Document
var d=new Date();
document.title="Wiadomości studenckie "+data.toLocaleString();
var Kolory=new Array('yellow','blue','green','red','gray');
var NrKoloru=0;
window.setInterval("document.bgColor=Kolory[NrKoloru++]; if (NrKoloru>4) NrKoloru=0;",300);
document.URL= http://www.polsl.pl ;
Obiekt Document
Metody
open() otwiera dokument do pisania
clear() czyści zawartość dokumentu
close() zamyka dokument do pisania
write(), writeln() pisze do dokumentu
getElementById() wybiera element wg id
getElementsByName() wybiera elementy
według nazwy
getElementsByTagName wybiera elemetny
według typu
20
2010-03-31
Obiekt Document
for (i=1;i<=7;i++)
document.write('Tekst');
Jak się masz
var pola=document.getElementsByTagName( input');
for (i=0;i
Zdarzenia myszy
Zdarzenia myszy:
onclick kliknięcie myszką
ondblclick podwójne kliknięcie
onmousedown naciśnięcie przycisku myszy
onmouseup- puszczenie przycisku myszy
onmousemove poruszenie myszą
onmouseover wejście kursorem w obszar obiektu
onmouseout opuszczenie obiektu
Atrybuty zdarzeń myszy w obiekcie Event:
clientX,clientY położenie kursora na obiekcie
screenX,screenY położenie kursora na ekranie
button numer przycisku myszy
21
2010-03-31
Zdarzenia myszy - przykład
Zdarzenia klawiatury
Zdarzenia klawiatury:
onkeypress naciśnięcie klawisza
onkeydown wciśnięcie klawisza
onkeyup puszczenie klawisza
Atrybuty zdarzeń myszy w obiekcie Event:
keyCode kod klawisza
22
2010-03-31
Zdarzenia klawiatury - przykłady
Obiekt Form
Właściwości:
" reset()
" size
Metody: " onKeyPress
" blur() " onKeyUp
" click() " onSelect