JavaScript -...
Transcript of 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">
<!--
document.write("Hello World!");
//-->
</script>
</body>
</html>
<html>
<head>
<script type="text/javascript"
src="xxx.js"></script>
</head>
<body>
</body>
</html>
Skrypty wewnątrz <head>
<html>
<head>
<script type="text/javascript">
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>
<script type="text/javascript">
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
<script type="text/javascript">
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);
document.write("<br />");
x="5"+"5";
document.write(x);
document.write("<br />");
x=5+"5";
document.write(x);
document.write("<br />");
x="5"+5;
document.write(x);
document.write("<br />");
10
55
55
55
Elementy składni
• instrukcja warunkowa
<script type="text/javascript">
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>
<script type="text/javascript">
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>
<script type="text/javascript">
function product(a,b)
{
return a*b;
}
</script>
</head>
<body>
<script type="text/javascript">
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)
<script type="text/javascript">
var str=„Witajcie!";
document.write(str.toUpperCase()+"ma "+str.length+"liter");
</script>
<script type="text/javascript">
var browser=navigator.appName;
var b_version=navigator.appVersion;
var version=parseFloat(b_version);
document.write("Browser name: "+ browser);
document.write("<br />");
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>
<script type="text/javascript">
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>
<script type="text/javascript">
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>
<script type="text/javascript">
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>
<script type="text/javascript">
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!')");
} catch (ScriptException ex) {
ex.printStackTrace();
}
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);
} catch (ScriptException ex) {
ex.printStackTrace();
}
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\");");
} catch (ScriptException ex) {
ex.printStackTrace();
}
System.out.println("Executing in Java environment...");
for (String name: namesList) {
System.out.println(name);
}
Przykład dostępu do obiektu Javy
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 (ScriptException ex) {
ex.printStackTrace();
} catch (NoSuchMethodException ex) {
ex.printStackTrace();
}
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);
}
}
Przykład dostępu do obiektu Javy
• Kod Java
• JavaScript– plik op.js
– komenda
try {
jsEngine.eval("importPackage(javax.swing);" +
"var optionPane = " +
" JOptionPane.showMessageDialog(null, 'Hello, world!');");
} catch (ScriptException ex) {
ex.printStackTrace();
}
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
import javax.script.*;
public class InvokeScriptMethod {
public static void main(String[] args) throws Exception {
ScriptEngineManager manager = new ScriptEngineManager();
ScriptEngine engine = manager.getEngineByName("JavaScript");
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 {
public static void main(String[] args) throws Exception {
ScriptEngineManager manager = new ScriptEngineManager();
ScriptEngine engine = manager.getEngineByName("JavaScript");
String script = "function run() { println('run called'); }";
engine.eval(script);
Invocable inv = (Invocable) engine;
Runnable r = inv.getInterface(Runnable.class);
Thread th = new Thread(r);
th.start();
}
}
Użycie skryptu do implementacji
obiektu z interfejsem Javy
import javax.script.*;
public class RunnableImplObject {
public static void main(String[] args) throws Exception {
ScriptEngineManager manager = new ScriptEngineManager();
ScriptEngine engine = manager.getEngineByName("JavaScript");
String script = "var obj = new Object(); obj.run =
function() { println('run method called'); }";
engine.eval(script);
Object obj = engine.get("obj");
Invocable inv = (Invocable) engine;
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);