CEZARY SOBANIEC
mailto:sobaniec@cs.put.poznan.pl
Instytut Informatyki
Politechnika Pozna ńska
$Id: javascript.lyx,v 1.10 2003/05/23 16:36:56 sobaniec Exp $
Co to jest JavaScript
• j ęzyk programowania stworzony przez Netscape do tworzenia interaktywnych stron WWW
• JavaScript to co innego niż Java
Jak działa JavaScript
• interpreter wbudowany w przeglądarkę
• kod zawarty w dokumencie HTML lub ładowany z zewn ętrznego pliku
• kod jest jawny (komenda View/Page Source) Historia
• JavaScript 1.0 (Netscape 2.0)
• JavaScript 1.1 (Netscape 3.0)
• JavaScript 1.2 (Netscape 4.0–4.05)
• JavaScript 1.3 (Netscape 4.06–4.5)
• JavaScript 1.4
• JavaScript 1.5 (Netscape 6)
Instytut Informatyki
JavaScript (1/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003
Core JavaScript
podstawowa cz ęść j ęzyka JavaScript z wbudowanymi obiektami takimi, jak: Array, Date, Math
Client-side JavaScript
rozszerzenie Core JavaScript o obiekty opisujące składowe dokumentu wg. modelu Document Object Model. Zastosowanie: obsługa zdarze ń w przeglądarce.
Server-side JavaScript
rozszerzenie Core JavaScript o obiekty współpracujące z serwerem WWW. Zastosowania: komunikacja z bazą danych, zarządzanie sesją, odwołania do serwera, dost ęp do systemu plików, poczta elektroniczna.
Client−side
Server−side
JavaScript
JavaScript
Core JavaScript
Instytut Informatyki
JavaScript (2/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003
Przykłady skryptów JavaScript Przykład Hello world
Przegl ˛
adarki nie obsługuj ˛
ace JavaScript
<html>
<html>
<body>
<body>
<p>Fragment dokumentu HTML...
<p>Fragment dokumentu HTML...
<script type="text/javascript">
<script type="text/javascript"> document.write("Hello world!")
<!--
</script>
document.write("Hello world!")
Dalszy fragment dokumentu.
// -->
</body>
</script>
</html>
<noscript><h1>Przegl ˛
adarka nie obsługuje
JavaScript</h1></noscript>
Dalszy fragment dokumentu.
</body>
</html>
Domy ślny j ęzyk skryptowy dla dokumentu
<head>
...
<META http-equiv="Content-Script-Type" content="text/javascript">
</head>
Instytut Informatyki
JavaScript (3/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003
Zdarzenia są generowane poprzez interakcj ę użytkownika
• poruszenie, klikni ęcie myszką
• wciśni ęcie klawisza
• zdarzenia czasowe
Wewnątrz skryptu można zdefiniować procedury obsługi zdarze ń Przykład
<a onClick="alert(’Przejście dalej’)" href="http://unixlab.cs.put.poznan.pl"> Nasz serwer</a>
• brak znacznika <script>
Funkcje wbudowane
• alert() — okienko z komunikatem
• pytanie o wartość: funkcja prompt()
• potwierdzenie confirm()
Instytut Informatyki
JavaScript (4/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003
Standardowe zdarzenia JavaScript onLoad
zdarzenie zachodzi po załadowaniu (onUnload — usuni ęciu) całego dokumentu (tylko elementy BODY i FRAMESET)
onClick
po klikni ęciu myszką (onDblClick — podwójne klikni ęcie) onMouseDown
po wciśni ęciu klawisza myszki
onMouseUp
po puszczeniu klawisza myszki
onMouseOver
po najechaniu myszką na element
onMouseMove
podczas przesuwania myszki nad elementem
onMouseOut
po usuni ęciu myszki znad elementu
onKeyPress
wciśni ęcie i puszczenie klawisza
onKeyDown
wciśni ęcie klawisza
onKeyUp
puszczenie klawisza
onSubmit
zatwierdzenie formularza (element FORM)
onFocus
po wybraniu elementu np. klawiszem Tab lub myszką onBlur
po opuszczeniu wybranego elementu
onReset
wyczyszczenie formularza (element FORM)
onSelect
zaznaczenie fragmentu tekstu w okienku edycyjnym onChange
po zmianie zawartości pola edycyjnego
Instytut Informatyki
JavaScript (5/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003
Przykład
function mojaFunkcja() {
document.write("Witam na mojej stronie!<br>"); document.write("Tak działa JavaScript!<br>");
}
...
mojaFunkcja();
Argumenty funkcji
Tablica argumentów funkcji
function komunikat(str) {
function polacz(separator) {
alert(str);
wynik="";
}
for(var i=1; i<arguments.length; i++) {
...
wynik=wynik+arguments[i]+separator;
komunikat("Fukcje w języku JavaScript");
}
return wynik;
}
Instytut Informatyki
JavaScript (6/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003
n za pomoc ˛
a funkcji
Definicja funkcji
<head>
<script type="text/javascript"> function obliczenia() {
var x= 12;
var y= 5;
var wynik = x + y;
alert(wynik);
}
</script>
</head>
Odwołanie do funkcji
<p>Fragment dokumentu...
Zobacz <a onClick="obliczenia()"
href="http://unixlab.cs.put.poznan.pl"> serwer Unixlab</a>.
Instytut Informatyki
JavaScript (7/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003
eval
wykonanie fragmentu kodu
isNaN
tekst nie reprezentuje liczby
parseFloat
konwersja tekstu na liczb ę zmiennoprzecinkową parseInt
konwersja tekstu na liczb ę całkowitą
escape
konwersja znaków do formatu %xx
unescape
konwersja znaków z formatu %xx
Przykład
floatValue=parseFloat(toFloat);
if (isNaN(floatValue)) {
alert("Nie jest to liczba typu float");
} else {
alert("Liczba typu float");
}
Instytut Informatyki
JavaScript (8/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003
Hierarchia obiektów
• elementy dokumentu HTML ułożone są w hierarchi ę
• każdy element jest obiektem w JavaScript
• każdy obiekt posiada swoje własności i metody Podstawowe obiekty
window
bieżące okno przeglądarki. Obiekt posiada elementy potomne, np. status document
aktualnie załadowany dokument HTML (lub inny). Własności: np. tło location
adres aktualnego dokumentu (własność href, metoda reload()) Instytut Informatyki
JavaScript (9/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003
Przykład hierarchii obiektów Dokument HTML
<html>
<body>
<img src="https://zanotowane.pl/14/1086/slon.png">
<p>Witam na <a href="mailto:ja@wp.pl">mojej</a> stronie WWW. </p>
<form>
<input type="text" value="">
<input type="button" value="Odczyt">
</form>
<img src="https://zanotowane.pl/14/1086/kolo.png">
</body>
</html>
Instytut Informatyki
JavaScript (10/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003
document
images[0]
images[1]
forms[0]
links[0]
elements[0]
elements[1]
Odwołania
document
document.images[0]
document.forms[0]
document.forms[0].elements[0]
document.forms[0].elements[0].value
document.images[1].src
Instytut Informatyki
JavaScript (11/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003
Odwołania do obiektów
<script type="text/javascript"> function wartosc() {
alert("Wprowadziłeś tekst: "
+ document.forms[0].elements[0].value);
}
</script>
...
<form>
<input type="text" value="">
<input type="button" value="Odczyt" onClick="wartosc()">
</form>
Instytut Informatyki
JavaScript (12/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003
Odwołania poprzez nazwy
<script type="text/javascript"> function czyszczenie()
{
document.formularz.x.value = "";
}
</script>
...
<form name="formularz" >
<input type="text" name="x" value="">
<input type="button" value="Wyczyść" onClick="czyszczenie()">
</form>
Nowe nazwy obiektów
forms[0] = formularz
forms[0].elements[0] = formularz.x
Instytut Informatyki
JavaScript (13/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003
Linia statusu — ang. statusbar
Wy świetlenie/wył ˛
aczenie nowego tekstu
window.status = "Przykładowy napis"; window.status = "";
Opisy odno śników
<a href="ftp://user:pass@unixlab.cs.put.poznan.pl"
onMouseOver="window.status=’Nasz serwer FTP’; return true; "
onMouseOut="window.status=’ ’">
</a>
Instytut Informatyki
JavaScript (14/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003
setTimeout("alert(’Czas upłynął!’)", 3000)); Prosta animacja
<script type="text/javascript"> var no = 1;
function scroll() {
if (no == 1) {
window.status = "Witamy!";
no = 2;
}
else {
window.status = "... i zapraszamy ponownie!"; no = 1;
}
setTimeout("scroll()", 3000);
}
</script>
...
<body onLoad="scroll()">
Instytut Informatyki
JavaScript (15/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003
Problemy
✘ brak standaryzacji zestawu obiektów JavaScript
✘ brak standaryzacji zdarze ń w JavaScript
✘ brak standardowego zestawu funkcji wbudowanych
✘ różne wersje skryptów dla różnych przeglądarek w różnych wersjach Różne implementacje: Netscape, Internet Explorer Document Object Model
• jawna specyfikacja hierarchii obiektów całego dokumentu
• standardowy zestaw zdarze ń
• mechanizmy dynamicznej modyfikacji dokumentów Specyfikacja
Instytut Informatyki
JavaScript (16/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003
✔ reprezentacja obiektów w dokumencie i ich własności w sposób niezależny od platformy, przeglądarki, aplikacji, producenta oprogramowania, j ęzyka programowania czy j ęzyka znaczni-kowego
✔ metody tworzenia, usuwania i przeglądania elementów dokumentu oraz modyfikacji ich własności
✔ obsługa dokumentów HTML i XML
Poziomy DOM
DOM0
poziom podstawowy, definiowany nieformalnie poprzez odniesienie do istniejących przeglądarek: Netscape 3 i IE3
DOM1
pierwsza generacja DOM. Składa si ę z dwóch cz ęści:
• DOM Core — podstawowe funkcje do tworzenia, usuwania i zmiany własności elementów dokumentu (HTML i XML)
• DOM HTML — rozszerzenia specyficzne dla HTML
DOM2
druga generacja DOM. Rozszerzenia: interfejs dost ępu do CSS z poziomu j ęzyka skryp-towego, obsługa zdarze ń.
Instytut Informatyki
JavaScript (17/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003
Odwołania poprzez identyfikatory
<script type="text/javascript"> function pokaz()
{
e = document.getElementById("nazwisko"); alert(e.value);
}
</script>
...
<form>
<input type="text" id="nazwisko" >
<input type="button" value="Wyczyść" onClick="pokaz()">
</form>
Instytut Informatyki
JavaScript (18/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003
Odwołania poprzez identyfikatory
<script type="text/javascript"> function zmien()
{
e = document.getElementById("x");
e.style.color = "red";
}
</script>
...
<h1 id="x" onMouseOver="zmien()">JavaScript a CSS</h1> Instytut Informatyki
JavaScript (19/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003
Dynamiczne pozycjonowanie elementów
<script type="text/javascript"> var i = 0;
function zmien() {
e = document.getElementById("x");
i += 10;
e.style.left = i;
}
</script>
<h1 id="x" style="position: absolute" onMouseDown="zmien()"> JavaScript a CSS</h1>
Instytut Informatyki
JavaScript (20/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003
Przykład HTML
<html>
<frameset rows="50%,50%">
<frame src="https://zanotowane.pl/14/1086/gora.html" name="ramka1">
<frame src="https://zanotowane.pl/14/1086/dol.html" name="ramka2">
</frameset>
</html>
Hierarchia obiektów
Okno przegla˛darki
parent/rodzic
ramka1
ramka2
children/dzieci
Instytut Informatyki
JavaScript (21/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003
Dost ęp do ramek w JavaScript 1. odwołanie z poziomu ramki-rodzica do ramki-dziecka ramka1.document.write("Wiadomość od rodzica"); 2. z poziomu ramki-dziecka do ramki-rodzica
parent.location.href="http://unixlab"; 3. z poziomu ramki-dziecka do drugiej ramki-dziecka parent.ramka2.location.href="http://unixlab"; Instytut Informatyki
JavaScript (22/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003
Definicja ramek
Menu: plik menu.html
<html>
<html>
<frameset cols="20%,*>
<head>
<script type="text/javascript">
<frame src="https://zanotowane.pl/14/1086/menu.html" name="menu"> function load(url) {
<frame src="https://zanotowane.pl/14/1086/start.html" name="main"> parent.main.location.href = url;
}
</frameset>
</script>
</html>
</head>
<body>
<a href="javascript:load(’first.html’)" >first</a>
<a href="second.htm" target="main" >second</a>
<a href="third.htm" target=" top" >third</a>
</body>
</html>
Zastosowanie
• przeładowanie zawartości kilku ramek jednocześnie Instytut Informatyki
JavaScript (23/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003
Przykład
<form>
<input type="button" value="Nowe okno"
onclick="open(’http://unixlab/’)" >
</form>
Trzeci parametr funkcji open
open("abc.html", "mojeOkno", "width=300,height=200,menubar=no"); height
liczba pikseli
resizable
yes|no
width
liczba pikseli
scrollbars
yes|no
directories
yes|no
status
yes|no
location
yes|no
toolbar
yes|no
menubar
yes|no
Instytut Informatyki
JavaScript (24/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003
Drugi parametr funkcji open
<script>
okno1 = open("abc.html", "mojeOkno");
</script>
...
<a href="abc.html" target=" mojeOkno">Zobacz to</a>
...
<script>
okno1.document.localtion.href = "...";
</script>
Zamykanie okna
<script type="text/javascript"> function zamknij() {
close();
}
</script>
...
<form>
<input type="button" value="Zamknij" onclick="zamknij()">
</form>
Instytut Informatyki
JavaScript (25/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003
Dynamiczne tworzenie dokumentów Przykład
<script type="text/javascript"> function openWin3() {
myWin= open("");
myWin.document.open();
myWin.document.write("<html><body>"); myWin.document.write("<h1>Hello world!</h1>"); myWin.document.write("</body></html>"); myWin.document.close();
}
</script>
Tworzenie dynamiczne zawarto ści ramek
parent.ramka2.document.open();
parent.ramka2.document.write("..."); parent.ramka2.document.close();
Dokumenty innych typów niż HTML
okno = open("");
okno.document.open("text/plain")
Instytut Informatyki
JavaScript (26/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003
Date
<script type="text/javascript"> now = new Date();
document.write("Godzina: "
+ now.getHours()
+ ":" + now.getMinutes() + "<br>"); document.write("Data: " now.getDate()
+ "/" + (now.getMonth()+ 1)
+ "/" + (1900 + now.getYear()));
</script>
Przykład zastosowania
• aktywny zegarek: <body onLoad=""> + setTimeout() Instytut Informatyki
JavaScript (27/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003
Array
<script type="text/javascript"> tab = new Array();
tab[0]= "Ala";
tab[1]= "Ola";
tab[2]= "Lolek";
for (var i=0; i<3; i++)
{
document.write(tab[i] + "<br>");
}
</script>
Funkcje obiektu Array:
concat, join, pop, push, reverse,
shift, slice, splice, sort, unshift
Instytut Informatyki
JavaScript (28/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003
Math
x = Math.random();
y = Math.sin(x);
Funkcje obiektu Math:
abs, sin, cos, tan, acos, asin, atan, exp,
log, ceil, floor, min, max, pow, round, sqrt
String
Funkcje obiektu String:
charAt, charCodeAt, indexOf, lastIndexOf,
concat, slice, substr, toLowerCase, toUpperCase RegEx
Funkcje obiektu RegEx: match, replace,search
HTML
Funkcje obiektu HTML: anchor, big, bold, italics, sup, link Instytut Informatyki
JavaScript (29/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003
Przykład
<script type="text/javascript"> function test1(elem) {
if (elem.value == "") {
alert("Proszę wprowadzić jakiś tekst."); elem.focus();
return false;
}
else return true;
}
</script>
...
<form action="http://www.google.com/search" onSubmit="return test1(this.q)" >
<input type="text" name="q">
<input type="submit" value="Szukaj">
</form>
Zalety
✔ zminiejszenie obciążenia sieci — przesyłane są tylko poprawnie wypełnione formularze
✔ szybsza reakcja dla użytkownika
Instytut Informatyki
JavaScript (30/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003
Zmiana rysunku
<a href="http://unixlab"
onMouseOver="document.rys1.src=’img2.gif’"
onMouseOut="document.rys1.src=’img1.gif’">
<img src="https://zanotowane.pl/14/1086/img1.gif" name="rys1" border="0">
</a>
Wst ępne ładowanie rysunków
<script type="text/javascript"> ukrytyRys2 = new Image();
ukrytyRys2.src = "img2.gif";
...
</script>
...
<a href="..."
onMouseOver=" document.rys1.src=ukrytyRys2.src"
onMouseOut=" document.rys1.src=ukrytyRys1.src">
...
Instytut Informatyki
JavaScript (31/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003
Cechy j ęzyka
Wady
• interpretowalny
✘ szybkość (JIT — Just In-Time compilers)
• niezależny od sprz ętu
✘ problemy z przenaszalnością (AWT)
• obiektowy
✘ niestabilność interfejsów programowych
• dynamiczny
• wielowątkowy
• z obsługą wyjątków
Historia
• Java 1.0
• Java 1.1.x
• Java 1.2.x, nowe biblioteki graficzne
• Java 1.3.x, rok 2001, efektywność
• Java 1.4.x, 2002, ulepszone I/O
• Java 1.5.x, 2003, ??
Instytut Informatyki
JavaScript (32/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003
Kod źródłowy
class hello {
public static void main(String[] args) {
System.out.println("Hello World!");
}
}
Plik z kodem źródłowym musi mieć tą samą nazw ę, co główna klasa w projekcie.
Kompilacja
# javac hello.java
Powstaje plik helo.class z bajtkodami.
Uruchomienie
# java hello
Hello World!
Instytut Informatyki
JavaScript (33/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003
Kod źródłowy
Plik HTML odwołuj ˛
acy si ę do apletu
import java.applet.Applet;
<HTML>
import java.awt.Graphics;
<BODY>
<APPLET CODE="hello.class"
public class hello extends Applet {
WIDTH="150"
public void paint(Graphics g) {
HEIGHT="35">
g.drawString("Hello world!", 50, 25); Przegl ˛
adarka nie obsługuje
}
j˛
ezyka Java
}
</APPLET>
</BODY>
</HTML>
Kompilacja
# javac hello.java
Uruchomienie
# appletviewer hello.html
Instytut Informatyki
JavaScript (34/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003
Aplet po uruchomieniu
Przegl ˛
adarka i appletviewer
Instytut Informatyki
JavaScript (35/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003
Kod źródłowy
public class Simple extends Applet {
...
public void init() { ... }
public void start() { ... }
public void stop() { ... }
public void destroy() { ... }
}
init
inicjacja apletu podczas każdorazowego (prze)ładowania start
start apletu lub wznowienie jego pracy
stop
zatrzymanie pracy apletu
destroy
usuni ęcie apletu z pami ęci
Rysowanie zawarto ści apletu
• biblioteka komponentów graficznych AWT
przyciski, przyciski radiowe, checkbox, pola tekstowe, listy, menu, suwaki, kontenery
• biblioteka komponentów Java Foundation Classes (JFC/Swing) Instytut Informatyki
JavaScript (36/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003
• aplet jest interpretowany i pracuje w tzw. piaskownicy (ang. sandbox) ograniczającej jego funkcjonalność
Co może zrobi ć aplet?
✔ odtwarzać muzykę
✔ tworzyć połączenia sieciowe z bazowym serwerem
✔ wywoływać publiczne metody innych apletów bieżącej strony WWW
✔ aplety uruchomione z lokalnego dysku nie mają ogranicze ń apletów sieciowych Czego aplet nie może robi ć?
✘ ładować innych bibliotek lub definiować metod native
✘ czytać i modyfikować zawartości plików na komputerze, na którym pracuje
✘ zestawiać połącze ń do innych komputerów oprócz bazowego serwera
✘ uruchamiać nowych programów u klienta
✘ odczytywać części konfiguracji lokalnego systemu Za zarządzanie bezpiecze ństwem odpowiedzialny jest wbudowany w przeglądarkę obiekt SecurityManager.
Instytut Informatyki
JavaScript (37/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003
Podstawowe cechy
• komplenty zestaw graficznych komponentów: od przycisków, poprzez podzielne okna do ta-belek
• modyfikowalny wygląd komponentów (ang. look and feel) — dostosowanie do stylu lokalnego systemu operacyjnego
• wsparcie dla osób słabo widzących lub niewidomych
• biblioteka graficzna Java2D
• obsługa standardu Drag and Drop
• zmodyfikowana i rozbudowana obsługa zdarze ń Biblioteka AWT
✘ używała kodu typu native
✘ jej funkcjonalność była wspólnym mianownikiem wszystkich środowisk graficznych Instytut Informatyki
JavaScript (38/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003
import javax.swing.*;
import java.awt.*;
public class swing hello extends JApplet {
public void init() {
JLabel label = new JLabel("Swing Hello World!"); label.setHorizontalAlignment(JLabel.CENTER);
label.setBorder(BorderFactory.createMatteBorder(1, 1,2,2,Color.black));
getContentPane().add(label, BorderLayout.CENTER);
}
}
Instytut Informatyki
JavaScript (39/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003
Wywołania metod j ęzyka Java z JavaScript
<script>
var s = new java.lang.String("Hello world"); alert(s.startsWith("Hello"));
</script>
Nowe okno w j ęzyku Java
function createWindow() {
var ramka = new java.awt.Frame(); okno = new java.awt.Dialog(ramka);
okno.setSize(350, 200);
okno.setTitle("Hello World");
okno.setVisible(true);
}
Instytut Informatyki
JavaScript (40/40)
Politechnika Pozna ńska
c
by Cezary Sobaniec 2003