Basics of Javascript

Note:
My recent posts about basics or overview of something
mostly cite select matirials of sources listed in the Resources section of every
post. It only serves for personal study and learning. And if you like, you can
take any part or all of them as desired. It would be my pleasure.

Overview

Javascript is an html scripting language. In the official specification it is
called ECMAScript.

Built-in Features

Datatypes and Values

All numbers in JavaScript are represented as 64-bit floating-point values
(i.e., similar to double in java and C++).

Conversion between Strings and Numbers can be done in several ways in both
direction. Numbers are automatically converted to strings when needed, so are
strings converted to numbers.

Numbers to strings:

var n = 100;
var s = n + " bottles of beer.";

var n_as_string = n + "";

var string_value = String(number);

string_value = number.toString();

Strings to numbers:

var product = "21" * "2"; // get number 42

var number = string_value - 0;
(Note: adding zero to a string value
results in string concatenation)

var number = Number(string_value);

// And parseInt(), parseFloat.

In JavaScript, functions are values that can be manipulated
by JavaScript code. It means that functions can be stored in variables, arrays,
and objects, and it means that functions can be passed as arguments to other
functions.

Functions can be defined in three ways:

function square(x) { return x*x;}

var square = function(x) { return x*x; }
// function name here is
optional.

var square = new Function("x", "return x*x");
// awkward, less useful and
less efficient.

An object is a collection of named values. These named values are usually
referred to as properties of the object. Properties of objects are, in
many ways, just like JavaScript variables; they can contain any type of data,
including arrays, functions, and other objects. Objects in JavaScript can serve
as associative arrays (recall the same concept in Delphi/Pascal, if you
know that language); that is, they can associate arbitrary data values with
arbitrary strings.

image.width
image.height

image["width"]
image["height"]

Arrays may contain any type of JavaScript data, including references to other
arrays or to objects or functions. Also note that
JavaScript does not support multidimensional arrays,
except as arrays of arrays. Finally, because JavaScript is an untyped language,
the elements of an array do not all need to be
of the same type, as they do in typed languages like Java.

A corresponding object class is defined for each of the three key
primitive datatypes. That is, besides supporting the number, string,
and boolean datatypes, JavaScript also supports Number, String, and Boolean
classes. JavaScript can flexibly convert values from one type to another. When
you use a string in an object contexti.e., when you try to access a property or
method of the string, JavaScript internally creates a String wrapper
object for the string value. Note that the String object created when
you use a string in an object context is a transient one.

Primitive types are manipulated by value, and reference types, as the
name suggests, are manipulated by reference. Numbers and booleans are
easily manipulated at the low levels of the JavaScript interpreter. Objects, on
the other hand, are reference types. Arrays and functions, which are specialized
types of objects, are therefore also reference types.

Since strings (primitive type, not the wrapper) are immutable in JavaScript,
there is no way to tell whether strings are passed by value or by reference.

Variables

There's no fundamental difference in JavaScript between variables and
the properties of objects.

When the JavaScript interpreter starts up, one of the first things it
does, before executing any JavaScript code, is create a global
object. The properties of this object are the
global variables of JavaScript programs. When you declare a global JavaScript
variable, what you are actually doing is defining a property of the global
object.

The JavaScript interpreter initializes the global object with a number of
properties that refer to predefined values and functions. For example, the
Infinity, parseInt, and Math properties refer to the
number infinity, the predefined parseInt( ) function, and the
predefined Math object, respectively.

In top-level code (i.e., JavaScript code that is not part of a function), you
can use the JavaScript keyword this to refer to the global
object.

In client-side JavaScript, the Window object
serves as the global object for all JavaScript code contained in the
browser window it represents. This global Window object has a self-referential
window property that can be used instead of this to refer to
the global object. The Window object defines the core global properties, such as
parseInt and Math, and also global client-side properties,
such as navigator and screen.

For local variables, while the body of a function is executing, the function
arguments and local variables are stored as properties of another special
object. This object is known as the call object.

Each time the JavaScript interpreter begins to execute a function, it creates
a new execution context for that function. Thus,
JavaScript code that is not part of any function runs in an execution context
that uses the global object for variable definitions. A JavaScript
implementation may allow multiple "global" execution contexts. The
obvious example is client-side JavaScript, in which each separate browser
window, or each frame within a window, defines a separate global execution
context.

Object Support

ECMAScript does not contain proper classes such as those in C++, Smalltalk,
or Java. An ECMAScript object is an unordered collection of properties each with
zero or more attributes.

It turns out that every JavaScript object includes an internal
reference to another object, known as its prototype object. All
functions have a prototype property that is automatically created and
initialized when the function is defined. The initial value of the
prototype property is an object with a single property. This property
is named constructor and refers back to the constructor function with
which the prototype is associated.

Property inheritance occurs only when you read property values, not
when you write them. If you set the property p in an
object o that inherits that property from its prototype, what
happens is that you create a new property p directly in
o. Now that o has its own property named
p, it no longer inherits the value of p from
its prototype.

Navigator Object

The JavaScript
navigator object is the object representation of the client internet browser
or web navigator program that is being used. This object is the top level object
to all others.

DOM Object

Overview

The goal of the DOM group is to define a programmatic interface for XML and
HTML. It is platform- and language-neutral interface. The DOM is separated into
three parts: Core, HTML, and XML. The Core DOM provides a low-level set of
objects that can represent any structured document.

DOM is being designed at several levels:

• "Level 1. This concentrates on the actual core, HTML, and XML document
  models. It contains functionality for document navigation and manipulation.


• Level 2. Includes a style sheet object model, and defines functionality for
  manipulating the style information attached to a document. It also enables
  traversals on the document, defines an event model and provides support for XML
  namespaces.


• Level 3. Will address document loading and saving, as well as content models
  (such as DTDs and schemas) with document validation support. In addition, it
  will also address document views and formatting, key events and event groups.
  First public working drafts are available.


• Further Levels. These may specify some interface with the possibly
  underlying window system, including some ways to prompt the user. They may also
  contain a query language interface, and address multithreading and
  synchronization, security, and repository."

Resources

1. ECMAScript
   Language Specification 3rd edition


2. Ajax
   in Action


3. The
   CTDP JavaScript Manual Version 0.6.0, December 31, 2000


4. W3C Document Object Model
   (DOM)


5. DOM
   objects and methods


6. JavaScript - The Definitive Guide, 5th Edition

This is a rough draft and published temporarily.

Study XSLT Tutorial

Overview

XSL = XML Style Sheets

XSL consists of three parts:

• XSLT - a language for transforming XML documents


• XPath - a language for navigating in XML documents


• XSL-FO - a language for formatting XML documents

The root element that declares the document to be an XSL style sheet is <xsl:stylesheet> or <xsl:transform>.

Note: <xsl:stylesheet> and <xsl:transform> are completely synonymous and either can be used!

More Color On The Overview

An XSLT style sheet consists of a set of template rules, each of which takes the form "if this condition is encountered in the input, then generate the following output." The order of the rules is immaterial, and there is a conflict-resolution algorithm applied when several rules match the same input. One respect in which XSLT differs from serial text processing languages, however, is that the input is not processed sequentially line by line. Rather, the input XML document is treated as a tree structure, and each template rule is applied to a node in the tree. The template rule itself can decide which nodes to process next, so the input is not necessarily scanned in its original document order. [via]

Use XSL To Transform a XML Document

First declare the a xsl document and then define templates:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
<html>
<body>
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th>Title</th>
<th>Artist</th>
</tr>
<xsl:for-each select="catalog/cd">
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="artist"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>

</xsl:stylesheet>

Then specify the stylesheet in your xml source document, simply like this: <?xml-stylesheet type="text/xsl" href="cdcat.xsl"?>.

The match attribute is used to associate a template with an XML element. But match="/" defines the whole document by associating the template with the root of the xml source document, in which the value of the match attribute is an XPath expression.

In the element <xsl:for-each select="catalog/cd">, "catalog/cd" matches (case-sensitive match, after all an xsl instance is an xml document.) the data structure in the xml document, i.e., the value of the select attribute (a little bit like "select" in SQL) is an XPath expression.

We can also filter the output from the XML file by adding some criterions to the select attribute in the <xsl:for-each> element.

<xsl:for-each select="catalog/cd[artist='Bob Dylan']">

Legal filter operators are:

• = (equal)


• != (not equal)


• < less than


• > greater than

Note: 'Bob Dylan' should match exactly what is between the <artist> and </artist>, including white spaces and line breaker.

We can use an <xsl:sort> element inside the <xsl:for-each> to sort the output.

To add an if statement use the syntax below:

<xsl:if test="expression">
...
...some output if the expression is true...
...
</xsl:if>

For example:

<xsl:for-each select="catalog/cd">
<xsl:if test="price > 10">
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="artist"/></td>
</tr>
</xsl:if>
</xsl:for-each>

See here for more conditional tests to filter the output by using <xsl:choose> and <xsl:when>.

Without its select attribute specified, <xsl:apply-templates> is used to apply any relevant template(s) to the matched node(s)'s children. While using this element's select attribute, you can be pickier about exactly which children of a node should be processed and in what order.

Referring to the xsl file directly in an xml docuemt requires that there be a XSLT aware browser.Actually, we could have alternatives for the transformation. First, we can use javascript on the client side to invoke a stand alone xml parser, such as MS XML Parser, to do the transformation. Second, we can also use server side scripting language (e.g., asp, jsp, python, etc) to do the transformation, which meets the cross browser needs.

The xsl:attribute element can be used to add attributes to result elements whether created by literal result elements in the stylesheet or by instructions such as xsl:element.

Little Tricks

1. Use <...select="@width"> to identify the attribute of an element, in which case width is the attribute name. The XPath expression ../@title selects the title attribute of the element that is the parent of the current node.

2. Use curly braces ({}) surrounding an expression to specifiy an attribute value template. e.g., ＜h1＞＜a href="{../link}"＞＜xsl:apply-templates/＞＜/a＞＜/h1＞ (".." may be meant to go to parent node of the current node). And see the following example for more details:

The following example creates an img result element from a photograph element in the source; the value of the src attribute of the img element is computed from the value of the image-dir variable and the string-value of the href child of the photograph element; the value of the width attribute of the img element is computed from the value of the width attribute of the size child of the photograph element:

<xsl:variable name="image-dir">/images</xsl:variable>

<xsl:template match="photograph">
<img src="{$image-dir}/{href}" width="{size/@width}"/>
</xsl:template>

With this source

<photograph>
<href>headquarters.jpg</href>
<size width="300"/>
</photograph>

the result would be

<img src="/images/headquarters.jpg" width="300"/>

3. The order in which various template rules appears in the stylesheet mean nothing to the XSLT processor.

4. The XSLT processor uses the most specific template it can find to process each node of the source tree. So template: <xsl: template match="*|@*|text()"> might do nothing if any other templates are defined, since it just matches any element, attribute and text nodes. And another example, in the existence of <xsl:template match="channel/title">, <xsl:template match="title"> might do nothing also.

Conclusion

Conceptually (the fact is almost the same most of the time), you can think of the transformation process with XSLT like this: the input xml source document is parsed as a source tree structure (DOM?), and another input, the style sheet is also parsed as a tree stucture, then it's the XSLT Processor's job to write the source tree as the result tree according to the stylesheet (mostly, template rules). Figure 1 illustrates the process.

Figure 1. Operation of an XSLT Processor

Resources:

1. XSLT Tutorial

2. XSL Transformations (XSLT) Version 1.0

3. 使用XML: XSLT 2.0和XQuery对比

4. What kind of language is XSLT?

5. Book: XSLT Quickly

6. Saxon: Anatomy of an XSLT processor

A Little Trick: XML Data Embedded in HTML

You can embed xml which contained data you want to display in a html document. The line of code does this embeding thing is like this:

<xml id="cdcat" src="cd_catalog.xml"></xml>

But there's a little trick. It requires that the xml source document's name reflect the structure of the xml document. For example, below is a fragment of the source document:

<?xml ...?>
<CATALOG>
<CD>
<...

For the xml document containing this fragment of codes should be referred as "cd_catalog.xml" in the embeding html document. So below is the whole example.

The XML document containing the data:

<?xml version="1.0" encoding="ISO-8859-1"?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>

<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>

<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD> ... </CATALOG>

The HTML document embeding the xml data:

<html>
<body>

<xml id="cdcat" src="cd_catalog.xml"></xml>

<table border="3" datasrc="#cdcat">

<tr>
<td><span datafld="ARTIST"></span></td>
<td><span datafld="TITLE"></span></td>
</tr>

</table>

</body>
</html>

Click this link to see the live example. And as the tutorial mentioned, it seems it only functions on IE 5.0 or later version, but not functions on Firefox.

Resourses:

XML Data Island

The Java SE 6 Platform Quiz

The following quiz answers cites The Java SE 6
Platform Quiz:

1. What scripting language can you use in the Java SE 6 platform?

Answer (E): The Mozilla
Rhino engine implements the JavaScript technology
scripting language and is available in the core Java Runtime Environment (JRE).
However, the scripting API allows you to use any scripting engine that conforms
with JSR 223.

2. What is the normalization of Unicode text?
Answer (C):
The Java SE 6 platform provides the public java.text.Normalizer
class, which allows you to convert text data to common composed or decomposed
forms, allowing for accurate comparisons and searches on text. Before the Java
SE 6 platform release, the Normalizer class had been hidden in the
Java platform. The class is now a public API.

3. How do you launch your host’s default browser to view a specific
URL?
Answer (B): The Desktop
API allows your program to launch applications associated with certain file
types on the host platform. The current implementation can launch a web browser,
text editor, and email application.

4. How can I sort JTable content?
Answer
(D): A javax.swing.table.TableRowSorter wraps your existing
TableModel. You can configure it to filter or sort your
JTable contents.

5. What is the correct annotation to use to export a method as a web
service operation using Java API for XML Web Services (JAX-WS), version
2.0?
Answer (B): The @WebMethod annotation is used to
mark a method that is exposed as a web service operation. Note that the
@WebService annotation is used to specify that the class is a web
service or that the interface defines a web service. The programmer will likely
use the @WebService annotation in conjunction with the
@WebMethod annotation. See the article “Introducing
JAX-WS 2.0 With the Java SE 6 Platform, Part 1” for more information.

6. In JDK 6, the JMX Monitor API now uses a thread pool to increase
performance. What is the purpose of the JMX Monitor API?
Answer (D):
The JMX
Monitor API allows an application to sample an attribute property of an
MBean periodically and send a notification event if it passes a given threshold.
It now uses a thread pool instead of creating a thread for each monitor. Another
improvement is the ability to monitor a value within a complex type.

7. JDK 6 incorporates an advanced version of the
SwingWorker class into core Java technology. What is the purpose of
the SwingWorker class?
Answer (D): Since the 1998
publication of SwingWorker in the article “Threads
and Swing,” developers have continuously requested that it be moved into
core. At the 2004 JavaOne conference, the Desktop team presented a new version
of SwingWorker that included generification, use of the concurrency
package, and PropertyChangeListener support. Much of this
functionality assists with interthread communication. The Java SE 6 platform
release incorporates a similar version of SwingWorker
that greatly assists developers in processing GUI-driven functionality off the
event-dispatching thread, indicating status and progress and aggregating the
results.

8. What is the best Java platform to use with the upcoming release of
the Microsoft Windows Vista operating system?
Answer (A): The Java
SE 6 platform release works best with the latest user interface (UI)
enhancements of Windows Vista. According to a recent blog entry by Chet Haase: “The
primary delivery of Java for Vista is Java SE 6; that release has received most
of our focus during the Vista beta release timeframe.” Go to the JDK 6 Project site to download the most
recent version. The release is pretty close to final, so it is working very well
at this point. All of the serious Windows Vista problems have been fixed in this
release for months, so it is a particularly good test vehicle for Java
technology on Vista.

9. In the Java SE 6 platform, what key tuning option(s) are needed to
achieve high performance?
Answer (D): See the blog entry “No Tuning
Required: Java SE Out-of-Box Vs. Tuned Performance” for a comparison of
out-of-box and hand-tuned performance.

10. The Java SE 6 platform delivers a technology that can greatly
improve performance by reducing unnecessary synchronization overhead. It allows
a thread to lock and unlock an object with minimal use of atomic operations.
What is this technology called?
Answer (B): The technique called
store-free biased locking eliminates all synchronization-related atomic
operations on uncontended object monitors. The technique supports the bulk
transfer of object ownership from one thread to another, and the selective
disabling of the optimization where unprofitable, using epoch-based bulk
rebiasing and revocation. It has been implemented in the production version of
the Java HotSpot virtual machine (VM) and has yielded significant performance
improvements on a range of benchmarks and applications.

Three ways of validating a xml document with Java

With the rollout of Java 5.0 last year, JAXP 1.3 was in place for use. And one of the new features provided by JAXP 1.3 is a brand new Schema Validation Framework.

The newly provided framework decouples the validation of an instance document as a process independent of parsing. The Validation APIs are in the new package javax.xml.validation and let developers obtain from a compiled schema a Validator or/and a Validator Handler which are used to validate xml against the given schema. Alternatively, a compiled schema instance could also be passed to any Reader/Parser to validate xml. So there're roughly two ways provided by the new Schema Validation Framework. And besides these two, setting the uncomplied schema source on Reader/Parser is also available due to the issue of backward compatibility. As we can see in the first article and the accompanying example codes listed in the Resources section, the newly introduced Validation Frame improves the performance, effiency and flexibility.

Below are simple code snippets to respectively illustrate how validating xml documents is done in these three ways.

1. Set uncompiled schema (since JAXP 1.2):

private static void saxParseJAXP1_2(String xmlFile, DefaultHandler dh,
String schemaFile) {
try {
SAXParserFactory spf = SAXParserFactory.newInstance();
spf.setNamespaceAware(true);
spf.setValidating(true);
SAXParser sp = spf.newSAXParser();
sp.setProperty(
http://java.sun.com/xml/jaxp/properties/schemaLanguage,
XMLConstants.W3C_XML_SCHEMA_NS_URI);
sp.setProperty(
"http://java.sun.com/xml/jaxp/properties/schemaSource",
schemaFile);
sp.parse(new File(xmlFile), dh);
} catch (ParserConfigurationException e) {
e.printStackTrace();
} catch (SAXException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}

2. Set compiled schema instance (since JAXP 1.3, FIX ME HERE)

private static void saxParseSetSchemaJAXP1_3(String xmlFile, DefaultHandler dh,
String schemaFile) {
try {
SchemaFactory sf = SchemaFactory.newInstance(
XMLConstants.W3C_XML_SCHEMA_NS_URI);
Schema schema = sf.newSchema(new File(schemaFile));
SAXParserFactory spf = SAXParserFactory.newInstance();
spf.setNamespaceAware(true);
spf.setSchema(schema);
SAXParser sp = spf.newSAXParser();
sp.parse(new File(xmlFile), dh);
} catch (ParserConfigurationException e) {
e.printStackTrace();
} catch (SAXException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
}

3. Validator (since JAXP1.3)

private static void saxParseValidateJAXP1_3(String xmlFile,
ErrorHandler dh, String schemaFile) {
try {
SchemaFactory sf = SchemaFactory.newInstance(
XMLConstants.W3C_XML_SCHEMA_NS_URI);
Validator validator = sf.newSchema(
new File(schemaFile)).newValidator();
validator.setErrorHandler(dh);
validator.validate(new StreamSource(xmlFile));
} catch (Exception e) {
e.printStackTrace();
}

It's noteworthy that the first way and the second way can apply for both DOM source and SAX source, while the third way is usually only used to validate a SAX stream (FIX ME HERE).

Update (20061113):

Basics of using Schema

Be aware of the concept of xml target namespace and "source namespaces". The name defined in a schema are said to belong to its target namespace. Definitions and declarations in a schema can refer to names that may belong to other namespaces. In the fourth article those namespaces are referred to as "source namespaces". And here follows a little colour as to simple type and complex type. An element that doesn't contain attributes or other elements can be defined to be of a simple type, predefined or user-defined, such as string, integer, decimal, time, etc. Elements with attributes and embeded elements must have a complex type. There're a huge amount of details about XML Schema definition that are not covered here but can be found here.

Simple example

A xml instance document:

<?xml version = "1.0" encoding = "utf-8"?>
<SONGS xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance'
xsi:noNamespaceSchemaLocation='mySong.xsd'>
<SONG genre = "pop">
<TITLE > Hot Cop </TITLE>
<COMPOSER > Jacques Morali
</COMPOSER>
<COMPOSER>Henri Belolo</COMPOSER>
<COMPOSER>Victor Willis</COMPOSER>
<PRODUCER>Jacques Morali</PRODUCER>
<PUBLISHER>PolyGram Records</PUBLISHER>
<LENGTH>6:20</LENGTH>
<YEAR>1978</YEAR>
<ARTIST>Village People</ARTIST>
</SONG>
</SONGS>

The corresponding schema definition:

<?xml version="1.0" encoding="UTF-8" ?>
<xsd:schema xmlns:xsd='http://www.w3.org/2001/XMLSchema'>
<xsd:element name="SONGS">
<xsd:complexType>
<xsd:sequence>
<xsd:element ref="SONG" minOccurs='1' maxOccurs='unbounded' />
</xsd:sequence>
</xsd:complexType>
</xsd:element>
<xsd:element name="SONG">
<xsd:complexType>
<xsd:sequence>
<xsd:element name="TITLE" type="xsd:string" />
<xsd:element name="COMPOSER" type="xsd:string" maxOccurs='unbounded' />
<xsd:element name="PRODUCER" type="xsd:string" maxOccurs='unbounded' />
<xsd:element name="PUBLISHER" type="xsd:string" maxOccurs='unbounded' />
<xsd:element name="LENGTH" type="xsd:string" />
<xsd:element name="YEAR" type="xsd:gYear" />
<xsd:element name="ARTIST" type="xsd:string" maxOccurs='unbounded' />
</xsd:sequence>
<xsd:attribute name="genre" type="xsd:string" />
</xsd:complexType>
</xsd:element>
</xsd:schema>

Resources:

1. Easy and Efficient XML Processing: Upgrade to JAXP 1.3

2. Java 2 Platform Standard Edition 5.0 API Specification

3. Java 2 Platform Standard Edition 1.4.2 API Specification

4. The basics of using XML Schema to define elements

5. XML Schema Part 0: Primer Second Edition