Documents and computation Introduction to HTML JavaScript Language for the description of documents Information-oriented Document mobility Prof. Andrea Omicini & Ing. Giulio Piancastelli Distributed information II Facoltà di Ingegneria, Cesena How to distribute computation using the Web? Alma Mater Studiorum, Università di Bologna Associating mobile code to HTML pages andrea.omicini@unibo.it, giulio.piancastelli@unibo.it Applet Java JavaScript 2 JavaScript vs. Myths Java Applet Specialisation on the “client as browser” model JavaScript is similar to Java Dynamics Mainly for C-style syntax and control constructs “Lightness” JavaScript is simple Regular Expressions agile management It is easily usable without training Perl-like JavaScript runs on every browser Weakly typed Yes, but it can have specific quirks on specific versions easy prototyping of specific browsers (IE vs Mozilla vs Opera vs …) Inheritance and objects ECMA @ http://www.ecma-international.org/ When designing a page, pay attention at how it prototype vs. class degrades when JavaScript is missing or not enabled … 3 4 Standard JavaScript Object-oriented / Functional language ECMA 262 Model ISO 16262 Syntactic details ECMAScript Client side JavaScript, JScript, ActionScript Browser integration http://www.ecma-international.org/publications/standards/ECMA-262.HTM http://www.ecma-international.org/publications/files/ecma-st/ECMA-262.pdf Server side ECMA 357 We are not interested E4X Embedded ECMAScript for XML A subset of ECMA 262 trimmed to minimize system http://www.ecma-international.org/publications/standards/ECMA-357.HTM resources required to execute http://www.ecma-international.org/publications/files/ecma-st/ECMA-357.pdf 5 6
Example – XHTML Example – JavaScript absURL = "abs/"; bibURL = "bib/"; pdfURL = "pdf/"; <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> function showAbs(key) { <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> � abstractWin=window.open(absURL+key+".html","abstractWindow", <head> "resizable=yes,dependent=yes,height=150,width=600,location=no,menubar=no <meta http-equiv="content-type" content="text/html; charset=utf-8" /> ,scrollbars=yes,status=no,toolbar=no"); <title>…</title> � abstractWin.focus(); <link href ="style.css" rel="stylesheet" type="text/css" media="screen" /> } <script type="text/javascript" src="command.js"></script> function showBib(key) { </head> � bibtexWin=window.open(bibURL+key+".html","bibtexWindow", <body class="papers"> "resizable=yes,dependent=yes,height=300,width=600,location=no,menubar=no … ,scrollbars=yes,status=no,toolbar=no"); <form action="" method="get"> � bibtexWin.focus(); … } <input type="button" value="BibTeX" class="bibBtn" onclick="showBib('volume');"> function showPDF(key) { … � top.location.href=pdfURL+key+".pdf"; } … 7 8 What does JavaScript Structure of the do? language Document content and presentation control Case sensitive The document object It is a problem using HTML DOM Separators Browser control Spaces, line breaks, tabs, … The window object Semicolon Form management Optional, but please use it The Form , Button , … objects Comments User interaction Similar to C, C++ e Java Events management Use // for single line and /* … */ for multiline Interaction state management Keywords Cookies 9 10 Variables and scope Data types Primitive types: number, string and boolean Variables are dynamically typed Arrays x = "hello"; typeof x // returns "string" x = 54; typeof x // returns "number" Functions x = function(n) { return n * n }; typeof x // returns "function" Scopes Objects - both general and special, e.g. Global, in the so-called global object window and document for browser intraction Local, in the execution context (not in simple blocks) Data for dates and calendars Keyword var RegExp , for regular expressions, excellent to manage Used to make variables visible only in their local scope text as user input Web E4X adds XML-like data types documents and windows are new contexts in addition to person = <person><name>James</name><surname>Bond</surname></person> typeof person // returns "xml" “classic” scopes person.name // returns James, as an "xml" element, not a string 11 12
Numbers Strings No char type Integer and real numbers as IEEE 8 byte Quotes and double quotes Only double-precision numbers The Math object they are equal pay attention with (X)HTML Library of mathematical functions Concatenation Special values and many other “classic” operators Infinity Wrapper String NaN … Virtual “library”, à la Java (static functions) 13 14 Non-primitive types and Boolean references References are shared when performing assignment between non-primitive types Example false and true As strings var a = [1,2,3]; var b = a; Automatically converted in 0 and 1 a[0] = 99; alert(b); Numbers what does that do? Whenever needed… Try it! (IE, Mozilla, Opera, Safari/Konqueror) javascript: var a = [1,2,3]; var b = a; a[0] = 99; alert(b); what is the output? 15 16 Arrays Functions First-class objects can be passed as a parameter to other functions As objects… can be expressed as anonymous literal values Represented as lexically scoped closures var arr = new Array(1,2,3,4,5); Classic access Examples var four = arr[3]; function square(x) {return x*x;} var square = new Function(“x”, “return x*x;”}; var arr = [[2,3],[true,false],[“boh”,’mah’]]; var square = function(x) {return x*x;}; Fragmented and dynamic Function objects and properties you can do everything you want… The arguments object Wrapper Array caller and callee length and arity apply and call 17 18
Higher-order Objects programming Collections of properties (name-value pairs) Higher-order programming is the collection of The new operator is used to create objects techniques available when using function values E.g. passing functions as arguments var paper = new Object(); Definition of / access to properties function map(list, f) { var result = [] paper.title = “Hello JavaScript”; for (var i = 0; i < list.length; i++) Enumeration result[i] = f(list[i]) return result } for (var property in paper) alert(property); map([1, 2, 3], square) // returns [1, 4, 9] Methods are properties whose value is a function E.g. returning functions as results Prototypes function acc(n) { return function(i) { return n += i } } a = acc(10); a(7); a(6); // returns 23 Not (only) classes and inheritance E.g. putting functions into data structures In the 3rd standard, class and prototype properties… 19 20 Prototypes Browser integration Prototypes are used to supply general properties to a kind of objects, simulating classes The window object function Circle(x, y, r) { Window as a global execution context this.x = x; this.y = y; this.r = r; } var foo and window.foo are the same Circle.prototype.pi = 3.14159 Client-side object hierarchy Circle.prototype.area = function() { return this.pi * this.r * this.r } The window object contains var c = new Circle(0.0, 0.0, 1.0) var a = c.area() document , location , frames[] , forms[] , … Prototypes are also used as a mechanism to Event model support inheritance between classes of objects Event managers associated to (X)HTML tags No linguistic support is offered to effectively promote encapsulation 21 22 The SCRIPT tag Windows management You can control almost everything… <head> <script type="text/javascript" language="JavaScript"> but you need to study a little <!-- hide to very old browsers so it is better to start from existing examples… javascript code // --> A window objects hierarchy </script> screen , navigator , document , … <script type=”text/javascript” src=”outline.js”> </script> Example: </head> <body> function showBib(key) { <script type=”text/javascript”> bibtexWin=window.open(bibURL+key+".html","bibtexWindow", <!-- hide to very old browsers "resizable=yes,dependent=yes,height=300,width=600,location=no,menubar=no, � scrollbars=yes,status=no,toolbar=no"); JavaScript code � bibtexWin.focus(); // --> } </script> function showPDF(key) { <noscript><p>No JavaScript for you...</p></noscript> � top.location.href=pdfURL+key+".pdf"; </body> } 23 24
Recommend
More recommend
