JavaScript id 226714

JavaScript i Java

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 $

JavaScript

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

by Cezary Sobaniec 2003

Rodzaje JavaScript

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

Core JavaScript

Instytut Informatyki

JavaScript (2/40)

Politechnika Pozna ńska

by Cezary Sobaniec 2003

Przykłady skryptów JavaScript Przykład Hello world

Przegl ˛

adarki nie obsługuj ˛

ace JavaScript

<html>

<body>

<p>Fragment dokumentu HTML...

<script type="text/javascript">

<!--

</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>

...

</head>

Instytut Informatyki

JavaScript (3/40)

Politechnika Pozna ńska

by Cezary Sobaniec 2003

Zdarzenia

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

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

by Cezary Sobaniec 2003

Funkcje

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

by Cezary Sobaniec 2003

Obsługa zdarze ´

n za pomoc ˛

a funkcji

Definicja funkcji

<head>

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

by Cezary Sobaniec 2003

Funkcje wbudowane

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

by Cezary Sobaniec 2003

Obiekty JavaScript

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

by Cezary Sobaniec 2003

Przykład hierarchii obiektów Dokument HTML

<html>

<body>

<p>Witam na <a href="mailto:ja@wp.pl">mojej</a> stronie WWW. </p>

<form>

</form>

</body>

</html>

Instytut Informatyki

JavaScript (10/40)

Politechnika Pozna ńska

by Cezary Sobaniec 2003

Hierarchia obiektów

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

by Cezary Sobaniec 2003

Odwołania do obiektów

alert("Wprowadziłeś tekst: "

+ document.forms[0].elements[0].value);

}

</script>

...

<form>

</form>

Instytut Informatyki

JavaScript (12/40)

Politechnika Pozna ńska

by Cezary Sobaniec 2003

Odwołania do obiektów (II)

Odwołania poprzez nazwy

{

document.formularz.x.value = "";

}

</script>

...

</form>

Nowe nazwy obiektów

forms[0] = formularz

forms[0].elements[0] = formularz.x

Instytut Informatyki

JavaScript (13/40)

Politechnika Pozna ńska

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

by Cezary Sobaniec 2003

Mechanizm timeout

setTimeout("alert(’Czas upłynął!’)", 3000)); Prosta animacja

function scroll() {

if (no == 1) {

window.status = "Witamy!";

no = 2;

}

else {

window.status = "... i zapraszamy ponownie!"; no = 1;

}

setTimeout("scroll()", 3000);

}

</script>

...

Instytut Informatyki

JavaScript (15/40)

Politechnika Pozna ńska

by Cezary Sobaniec 2003

Document Object Model

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

http://www.w3c.org/TR-dom

Instytut Informatyki

JavaScript (16/40)

Politechnika Pozna ńska

by Cezary Sobaniec 2003

Document Object Model

✔ 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

by Cezary Sobaniec 2003

Obiekty w DOM

Odwołania poprzez identyfikatory

{

e = document.getElementById("nazwisko"); alert(e.value);

}

</script>

...

<form>

</form>

Instytut Informatyki

JavaScript (18/40)

Politechnika Pozna ńska

by Cezary Sobaniec 2003

JavaScript a CSS

Odwołania poprzez identyfikatory

{

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

by Cezary Sobaniec 2003

JavaScript a CSS (II)

Dynamiczne pozycjonowanie elementów

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

by Cezary Sobaniec 2003

Ramki a JavaScript

Przykład HTML

<html>

</frameset>

</html>

Hierarchia obiektów

Okno przegla˛darki

parent/rodzic

ramka1

ramka2

children/dzieci

Instytut Informatyki

JavaScript (21/40)

Politechnika Pozna ńska

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

by Cezary Sobaniec 2003

Przykład: menu

Definicja ramek

Menu: plik menu.html

<html>

<head>

<frame src="menu.html" name="menu"> function load(url) {

<frame src="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

by Cezary Sobaniec 2003

Nowe okna

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

by Cezary Sobaniec 2003

Obsługa nowych okien

Drugi parametr funkcji open

okno1 = open("abc.html", "mojeOkno");

</script>

...

<a href="abc.html" target=" mojeOkno">Zobacz to</a>

...

okno1.document.localtion.href = "...";

</script>

Zamykanie okna

close();

}

</script>

...

<form>

</form>

Instytut Informatyki

JavaScript (25/40)

Politechnika Pozna ńska

by Cezary Sobaniec 2003

Dynamiczne tworzenie dokumentów Przykład

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

by Cezary Sobaniec 2003

Obiekty wbudowane

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

by Cezary Sobaniec 2003

Obiekty wbudowane

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

by Cezary Sobaniec 2003

Obiekty wbudowane

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

by Cezary Sobaniec 2003

Walidacja formularzy

Przykład

if (elem.value == "") {

alert("Proszę wprowadzić jakiś tekst."); elem.focus();

return false;

}

else return true;

}

</script>

...

</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

by Cezary Sobaniec 2003

Obiekt Image

Zmiana rysunku

<a href="http://unixlab"

onMouseOver="document.rys1.src=’img2.gif’"

onMouseOut="document.rys1.src=’img1.gif’">

</a>

Wst ępne ładowanie rysunków

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

by Cezary Sobaniec 2003

J ęzyk Java

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

by Cezary Sobaniec 2003

Aplikacja HelloWorld

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

by Cezary Sobaniec 2003

Aplet HelloWorld

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

by Cezary Sobaniec 2003

Aplet po uruchomieniu

Przegl ˛

adarka i appletviewer

Instytut Informatyki

JavaScript (35/40)

Politechnika Pozna ńska

by Cezary Sobaniec 2003

Cykl życia apletu

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

by Cezary Sobaniec 2003

Funkcjonalno ś ć apletów

• 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

by Cezary Sobaniec 2003

Java Foundation Classes

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

by Cezary Sobaniec 2003

Przykład apletu JFC

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

by Cezary Sobaniec 2003

JavaScript i Java

Wywołania metod j ęzyka Java z JavaScript

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

by Cezary Sobaniec 2003