JavaScript -...

JavaScript• język skryptowy

– lekki, o prostej składni

– obiektowy

– zaprojektowany do tworzenia interaktywnych stron HTML• zazwyczaj kod skryptu jest zanurzony w kodzie HTML

– interpretowany, obsługiwany przez większość przeglądarek• Internet Explorer, Firefox, Chrome, Opera, Safari

– używany bez opłat licencyjnych

• pozwalający na– wstawianie tekstu w HTML w sposób dynamiczny

– obsługę zdarzeń (jak np. załadowanie strony czy też kliknięcie na elemencie HTML)

– wczytywanie i zapisywanie elementów HTML ze zmianą zawartości

– walidację danych dostarczanych na formatkach

– rozpoznania przeglądarki i załadowania dedykowanej strony

– tworzenie ciasteczek

Miejsca zamieszczania skryptów

• w HTML

– wewnątrz <head>

– wewnątrz <body>

– wewnątrz <head> i <body>

• w zewnętrznym pliku

<html>

<body>

<script type="text/javascript">



</script>

</body>

</html>

<html>

<head>

<script type="text/javascript"

src="xxx.js"></script>

</head>

<body>

</body>

</html>

Skrypty wewnątrz <head>

<html>

<head>


function message()

{

alert("This alert box was called with the onload

event");

}

</script>

</head>

<body onload="message()">

</body>

</html>

Skrypty wewnątrz <body>

<html>

<head>

</head>

<body>


document.write("This message is written by JavaScript");

</script>

</body>

</html>

Elementy składni

• rozróżniane są małe i duże litery

• na kod składają się:

– wyrażenia (komendy zakończone średnikiem)document.write("Hello Dolly");

– bloki wyrażeń (komendy zamieszczone pomiędzy {})

– komentarze (linijkowe // i blokowe /* */)

• wyrażenia mogą być dzielone <script type="text/javascript">

{

// document.write("<h1>This is a heading</h1>");

/* document.write("<p>This is a paragraph.</p>"); */

document.write("<p>This is another \

paragraph.</p>");

}

</script>

Elementy składni

• zmienne

– nazwy zaczynające się od liter lub

podkreślenia

– możliwe użycie bez deklaracji

– redeklaracja z zachowaniem starej wartości


var firstname;

firstname="Hege";

document.write(firstname);

document.write("<br />");

firstname="Tove";

document.write(firstname);

</script>

var x=5

y=7

var x

Elementy składni

• operatory

+, -, *, /, %, ++, --

=, +=, -=, *=, /=, %=

==, ===, !=, >, <, >=, <=

&&, ||, !

?:x=5+5;

document.write(x);


x="5"+"5";

document.write(x);


x=5+"5";

document.write(x);


x="5"+5;

document.write(x);


10

55

55

55

Elementy składni

• instrukcja warunkowa


var d = new Date()

var time = d.getHours()

if (time<10)

{

document.write("<b>Good morning</b>");

}

else if (time>10 && time<16)

{

document.write("<b>Good day</b>");

}

else

{

document.write("<b>Hello World!</b>");

}

</script>

Elementy składni

• Instrukcja switch

var d=new Date();

theDay=d.getDay();

switch (theDay)

{

case 5:

document.write("Finally Friday"); break;

case 6:

document.write("Super Saturday"); break;

case 0:

document.write("Sleepy Sunday"); break;

default:

document.write("I'm looking forward to this weekend!");

}

</script>

Wyskakujące okienka

• alert

• potwierdzenie

• zachęta<html>

<head>


function show_alert()

{

alert("I am an alert box!");

}

</script>

</head>

<body>

<input type="button" onclick="show_alert()" value="Show alert box" />

</body>

</html>

alert("sometext");

var r=confirm("Press a button");

var name=prompt("Podaj imie", "Jan");

Pętlefor (var=startvalue;var<=endvalue;var=var+increment)

{

code to be executed

}

while (var<=endvalue)

{

code to be executed

}

do

{

code to be executed

}

while (var<=endvalue);

break;

continue; for (variable in object)

{

code to be executed

} <script type="text/javascript">

var x;

var mycars = new Array();

mycars[0] = "Saab";

mycars[1] = "Volvo";

mycars[2] = "BMW";

for (x in mycars)

{

document.write(mycars[x] + "<br />");

}

</script>

Funkcjefunction functionname(var1,var2,...,varX)

{

some code

} <html>

<head>


function product(a,b)

{

return a*b;

}

</script>

</head>

<body>


document.write(product(4,3));

</script>

</body>

</html>

Zdarzenia

• onLoad, onUnload

• onFocus, onBlur, onChange (pole)

• onSubmit (forma)

• onMouseOver, onMouseOut

<input type="text" size="30" id="email" onchange="checkEmail()">

<form method="post" action="xxx.htm" onsubmit="return checkForm()">

<a href="http://www.w3schools.com"

onmouseover="alert('An onMouseOver event');return false">

<img src="w3s.gif" alt="W3Schools" /></a>

Obsługa wyjątków

• blok try..catch

• klauzula throw

var x=prompt(„Podaj liczbę parzystą","");

try

{

if(x%2!=0)

{

throw "Err1";

}

}

catch(er)

{

if(er=="Err1")

{

alert(„Błąd! Liczba jest nieparzysta");

}

Znaki specjalne

Code Outputs

\' single quote

\" double quote

\& ampersand

\\ backslash

\n new line

\r carriage return

\t tab

\b backspace

\f form feed

Obiektowość

• dostęp do właściwości i metod przez . (with (x){})

• String, Date, Boolean, Array, Math, RegExp (test, exec)

• Navigator (appName, appVersion)


var str=„Witajcie!";

document.write(str.toUpperCase()+"ma "+str.length+"liter");

</script>


var browser=navigator.appName;

var b_version=navigator.appVersion;

var version=parseFloat(b_version);

document.write("Browser name: "+ browser);


document.write("Browser version: "+ version);

</script>

Tworzenie obiektów

• Utworzenie obiektu wprost

• Utworzenie obiektu z szablonu

function person(firstname,lastname,age,eyecolor)

{

this.firstname=firstname;

this.lastname=lastname;

this.age=age;

this.eyecolor=eyecolor;

this.newlastname=newlastname;

return this;

}

function newlastname(new_lastname)

{

this.lastname=new_lastname;

}

Ciasteczka<html>

<head>


function getCookie(c_name)

{

if (document.cookie.length>0)

{

c_start=document.cookie.indexOf(c_name + "=");

if (c_start!=-1)

{

c_start=c_start + c_name.length+1;

c_end=document.cookie.indexOf(";",c_start);

if (c_end==-1) c_end=document.cookie.length;

return unescape(document.cookie.substring(c_start,c_end));

}

}

return "";

}

function setCookie(c_name,value,expiredays)

{

var exdate=new Date();

exdate.setDate(exdate.getDate()+expiredays);

document.cookie=c_name+ "=" +escape(value)+

((expiredays==null) ? "" : ";expires="+exdate.toGMTString());

}

Ciasteczkafunction checkCookie()

{

username=getCookie('username');

if (username!=null && username!="")

{

alert('Welcome again '+username+'!');

}

else

{

username=prompt('Please enter your name:',"");

if (username!=null && username!="")

{

setCookie('username',username,365);

}

}

}

</script>

</head>

<body onload="checkCookie()">

</body>

</html>

Animacje<html>

<head>


function mouseOver()

{

document.getElementById("b1").src ="b_blue.gif";

}

function mouseOut()

{

document.getElementById("b1").src ="b_pink.gif";

}

</script>

</head>

<body>

<a href="http://www.w3schools.com" target="_blank">

<img border="0" alt="Visit W3Schools!" src="b_pink.gif" id="b1"

onmouseover="mouseOver()" onmouseout="mouseOut()" /></a>

</body>

</html>

Mapy obrazkowe HTML• <area>

– (onClick, onDblClick, onMouseDown, onMouseUp, onMouseOver, onMouseMove, onMouseOut, onKeyPress, onKeyDown, onKeyUp, onFocus, onBlur)

<html>

<head>


function writeText(txt)

{

document.getElementById("desc").innerHTML=txt;

}

</script>

</head>

<body>

<img src="planets.gif" width="145" height="126"

alt="Planets" usemap="#planetmap" />

<map name="planetmap">

<area shape ="rect" coords ="0,0,82,126"

onMouseOver="writeText('Sun ...')"

ref ="sun.htm" target ="_blank" alt="Sun" />

<area shape ="circle" coords ="90,58,3"

onMouseOver="writeText('Mercury ...')"

href ="mercur.htm" target ="_blank" alt="Mercury" />

<area shape ="circle" coords ="124,58,8"

onMouseOver="writeText('Venus ...')"

href ="venus.htm" target ="_blank" alt="Venus" />

</map>

<p id="desc"></p>

</body>

</html>

Mapy obrazkowe HTML

Zdarzenia czasowe

• setTimeout(), clearTimeout() <html>

<head>


function timedMsg()

{

var t=setTimeout("alert('5 seconds!')",5000);

}

</script>

</head>

<body>

<form>

<input type="button" value="Display timed alertbox!"

onClick="timedMsg()" />

</form>

</body>

</html>

Scripting for the Java Platform

• Java Specification Request (JSR) 223

– dostęp do obiektów Javy ze środowisk skryptowych

– tworzenie zawartości web z użyciem języków

skryptowych

– zanurzanie środowisk skryptowych w aplikacjach

Javy

• javax.script

– API pozwalające podłączyć dowolny silnik skryptowy

– Java SE 6 zawiera silnik Mozilla Rhino:JavaScript for

Java

Interfejsy i klasy dostępne w API

Interfejs Klasa

Bindings AbstractScriptEngine

Compilable CompiledScript

Invocable ScriptEngineManager

ScriptContext SimpleBindings

ScriptEngine SimpleScriptContext

ScriptEngineFactory ScriptException

Scenariusz użycia

• Utworzenie menadżera (obiektu klasy ScriptEngineManager)

• Uzyskanie silnika od menadżera (obiektu klasy ScriptEngine)

• Wykonanie skryptu przez silnik (wybraną metodą eval)

ScriptEngineManager mgr = new ScriptEngineManager();

ScriptEngine jsEngine = mgr.getEngineByName("JavaScript");

try {

jsEngine.eval("print('Hello, world!')");

} catch (ScriptException ex) {

ex.printStackTrace();

}

Fabryki silnikówScriptEngineManager mgr = new ScriptEngineManager();

List<ScriptEngineFactory> factories =

mgr.getEngineFactories();

for (ScriptEngineFactory factory: factories) {

System.out.println("ScriptEngineFactory Info");

String engName = factory.getEngineName();

String engVersion = factory.getEngineVersion();

String langName = factory.getLanguageName();

String langVersion = factory.getLanguageVersion();

System.out.printf("\tScript Engine: %s (%s)\n",

engName, engVersion);

List<String> engNames = factory.getNames();

for(String name: engNames) {

System.out.printf("\tEngine Alias: %s\n", name);

}

System.out.printf("\tLanguage: %s (%s)\n",

langName, langVersion);

}

Wynik

ScriptEngineFactory Info

Script Engine: Mozilla Rhino (1.6 release 2)

Engine Alias: js

Engine Alias: rhino

Engine Alias: JavaScript

Engine Alias: javascript

Engine Alias: ECMAScript

Engine Alias: ecmascript

Language: ECMAScript (1.6)

Przykład wyszukania silnika

List<ScriptEngineFactory> scriptFactories =

mgr.getEngineFactories();

for (ScriptEngineFactory factory: scriptFactories) {

String langName = factory.getLanguageName();

String langVersion = factory.getLanguageVersion();

if (langName.equals("ECMAScript") &&

langVersion.equals("1.6")) {

engine = factory.getScriptEngine();

break;

}

}

engine = mgr.getEngineByExtension("js");

Przykład uruchomienia skryptu• Uruchomienie bezpośrednie

• Uruchomienie poprzez Invocable

try {

jsEngine.eval("print('Hello, world!')");



}

jsEngine.eval("function sayHello() {" +

" println('Hello, world!');" +

"}");

Invocable invocableEngine = (Invocable) jsEngine;

invocableEngine.invokeFunction("sayHello");

invokeMethod, invokeFunction wyrzucają wyjątki(ScriptException, NoSuchMethodException, NullPointerException)

Manifest ze ścieżką do skryptu

• katalog scripts

Manifest-Version: 1.0

Ant-Version: Apache Ant 1.6.5

Created-By: 1.6.0-rc-b89 (Sun Microsystems Inc.)

Main-Class: com.sun.demo.calculator.Calculator

Class-Path: .

ScriptEngineManager engineMgr = new ScriptEngineManager();

ScriptEngine engine = engineMgr.getEngineByName("ECMAScript");

InputStream is =

this.getClass().getResourceAsStream("/scripts/F1.js");

try {

Reader reader = new InputStreamReader(is);

engine.eval(reader);



}

Dostęp skryptu do obiektów Javy

• wywołanie metody put silnika

– do obiektu javax.script.Bindings

utrzymywanego przez silnik wstawiana jest

para klucz-wartość

List<String> namesList = new ArrayList<String>();

namesList.add("Jill"); namesList.add("Bob");

namesList.add("Laureen"); namesList.add("Ed");

Przykład dostępu do obiektu Javy

jsEngine.put("namesListKey", namesList);

System.out.println("Executing in script environment...");

try {

jsEngine.eval("var x;" +

"var names = namesListKey.toArray();" +

"for(x in names) {" +

" println(names[x]);" +

"}" +

"namesListKey.add(\"Dana\");");



}

System.out.println("Executing in Java environment...");

for (String name: namesList) {

System.out.println(name);

}


Invocable invocableEngine = (Invocable)jsEngine;

try {

jsEngine.eval("function printNames1(namesList) {" +

" var x;" +

" var names = namesList.toArray();" +

" for(x in names) {" +

" println(names[x]);" +

" }" +

"}" +

"function addName(namesList, name) {" +

" namesList.add(name);" +

"}");

invocableEngine.invokeFunction("printNames1", namesList);

invocableEngine.invokeFunction("addName", namesList, "Dana");



} catch (NoSuchMethodException ex) {


}

Użycie kontekstu silnika

import javax.script.*;

public class MultiScopes {

public static void main(String[] args) throws Exception {

ScriptEngineManager manager = new ScriptEngineManager();

ScriptEngine engine = manager.getEngineByName("JavaScript");

engine.put("x", "hello");

engine.eval("println(x);");

ScriptContext newContext = new SimpleScriptContext();

Bindings engineScope =

newContext.getBindings(ScriptContext.ENGINE_SCOPE);

engineScope.put("x", "world");

engine.eval("println(x);", newContext);

}

}


• Kod Java

• JavaScript– plik op.js

– komenda

try {

jsEngine.eval("importPackage(javax.swing);" +

"var optionPane = " +

" JOptionPane.showMessageDialog(null, 'Hello, world!');");



}

importPackage(javax.swing);

var optionPane = JOptionPane.showMessageDialog(null,

'Hello, world!');

jrunscript –fs op.js

Przykład dostępu do obiektów JavaimportPackage(java.awt);

importClass(java.awt.Frame);

var frame = new java.awt.Frame("hello");

frame.setVisible(true);

print(frame.title);

var SwingGui = new JavaImporter(javax.swing,

javax.swing.event,

javax.swing.border,

java.awt.event);

with (SwingGui) {

var mybutton = new JButton("test");

var myframe = new JFrame("test");

}

var a = java.lang.reflect.Array.newInstance(java.lang.String, 5);

a[0] = "scripting is great!";

print(a.length);

Dostęp do obiektu skryptu

• eval, invokeMethod, invokeFunction zawsze zwracają instancję Object

• dla większości silników obiekt ten jest ostatnio wyliczoną przez skrypt wartością

• silnik będzie mapował niektóre typy skryptowe do typów Javy (silnik Mozilla Rhino mapuje typy number oraz string do, odpowiednio, Double oraz String)

• można dokonywać rzutowania typów (jeśli wiadomo, że mapowanie istnieje)

• silnik może tworzyć i zwracać natywne obiekty Javy

Przykład stworzenia obiektu

skryptu z poziomu Java


public class InvokeScriptMethod {




String script = "var obj = new Object(); obj.hello =

function(name) { print('Hello, ' + name); }";

engine.eval(script);

Invocable inv = (Invocable) engine;

Object obj = engine.get("obj");

inv.invokeMethod(obj, "hello", "Script Method !!" );

}

}

Użycie skryptu do implementacji

interfejsu Javy import javax.script.*;

public class RunnableImpl {




String script = "function run() { println('run called'); }";



Runnable r = inv.getInterface(Runnable.class);

Thread th = new Thread(r);

th.start();

}

}

Użycie skryptu do implementacji

obiektu z interfejsem Javy


public class RunnableImplObject {




String script = "var obj = new Object(); obj.run =

function() { println('run method called'); }";


Object obj = engine.get("obj");


Runnable r = inv.getInterface(obj, Runnable.class);

Thread th = new Thread(r);

th.start();

}

}

Jeszcze jeden przykład

// pojedynczy interfejs

var r = new java.lang.Runnable() {

run: function() {

print("running...\n");

}

};

var th = new java.lang.Thread(r);

th.start();

// W przypadku przeciążonych metod można podać sygnaturę

var out = java.lang.System.out;

out["println(java.lang.Object)"]("hello");

Tworzenie tablic

var a = java.lang.reflect.Array.newInstance(java.lang.String, 5);

a[0] = "scripting is great!"; print(a.length);

JavaScript -...

Documents

Transcript of JavaScript -...