Working with Chinese Text in JavaScript

Language Fundamentals

Variables

Variables in JavaScript can be either primitives or references. Primitives are used for number and boolean types. References are used for objects and strings. Strings are immutable objects, which means that they cannot be changed. Scope rules in JavaScript are a little looser than strongly typed languages, such as Java or C++. Therefore, it is a good practice to always use the var keyword when declaring variables and declare them at the beginning of a script or function.

One interesting thing about JavaScript is the global object. This gives the particular interpreter the opportunity to put useful information about the execution environment. In browser client environments the window object is a synonym for the global object. Global variables can be thought of as properties of the global object.

Local variables, including function parameters and variables declared within functions are properties of a Call object. A Call object is created for the execution of a function and lives while that function is executing.

See the JavaScript: The Definitive Guide [FLAN] for more details about variables and scoping.

Execution Context

The Call object of a function exists within the execution context of the function. Similarly, the global execution context uses the variables associated with the global object. In browser client environments there is a different execution context for each window open, or for each frame within a window. The ability for the execution environments to access those from different windows leads to the need for security constraints to prevent abuses.

The ability in JavaScript to nest functions within other functions and, also, for functions to be variables in themselves leads to some interesting and complex possibilities. In the last few years there has been a trend for some developers to use this for a style of programming similar to functional programming languages, such as Scheme.

Functions

JavaScript functions are ways of creating reusable code, that is they can be executed many times by one script or shared between many different scripts. A simple function is demonstrated in file simple_function.html.

With the given argument s, assumed to be a string, the function isASCII examines the Unicode value of the first character and returns true if it is an ASCII value (ie less than 255). If the value is not less than 255 then it will return false. The function can be called like this:

One of the interesting things about JavaScript functions are values that can be manipulated by code on the fly. This capability is often used to assign functions to object properties, that behave like methods in object oriented programming. To enable this a different syntax is used to define functions. The syntax looks like this.

The HTML file simple_function2.html demonstrates this. It defines the function isASCII() again but then it assigns the function to variable myFunction, which can then be executed in exactly the same way:

Objects

An object is a collection of values, usually referred to as properties. The properties can be referred to with period notation, for example c.value for the propery value of object c. Objects can be created with a constructor and the new keyword. This is demonstrated in the simple_object.html page

This code defines the object c and assigns the propery value the value x. Another way to create an object is with the comma separated list of property / value pairs enclosed within parentheses {}. This is demonstrated by the page simple_object2.html, which uses the code

File radical_object.html has an example that is more useful in modeling Chinese language concepts. It defines an object variable called radical that represents Kangxi radical 147 (見 / 见) as shown in the JavaScript fragment below.

When the button is clicked the function showRadical() prints out information about the radical.

Arrays

Arrays are similar to objects in that they contain a collection of values but these values are usually referred to by index with the [] syntax. For example, characters[0] refers to the first (values start at zero) value in the array characters. Arrays can be created with the new keyword and an array constructor as demonstrated in the HTML page simple_array.html, which contains the code

When defining a large array it is more useful to use JavaScript Object Notation (JSON) syntax (explained in section JavaScript Object Notation).

Classes

JavaScript allows for an object-oriented class concept to provide a predefined structure for objects. This is useful for grouping properties and functions together in logical units. When functions are defined within a class they are called methods.

JavaScript object-oriented structure is based on a prototype concept which is different to that used in most strongly typed object-oriented languages like Java or C++. In JavaScript a function can act as a variable and can be associated with an object in an ad-hoc manner. The HTML page radical_class.html demonstrates a class Radical representing Chinese radicals. Here is the code.

The block function Radical() defines a constructor for the class. The block Radical.prototype.getAllForms = function() defines the method getAllForms() for the class. The prototype keyword is at the center of the JavaScript concept of object-oriented programming. In JavaScript a function can be added to any object but the use of the prototype keyword avoid having to repeatedly add functions to objects and also allows for inheritance. The function showRadical() is invoked when the button is clicked.

Modules and Namespaces

JavaScript does not formally include namespaces or modules as do other languages, such as C++ and Java (via Java packages). However, they can be constructed using JavaScript objects. For example, the class above can be modified to make use of the namespace chinesenotes. The HTML page radical_namespace.html demonstrates this with the code

These definitions within the namespace are in the file radical.js and the code that makes use of the namespace is within the HTML file radical_namespace.html:

While it seems a little verbose to use this convention it is important when developing and using JavaScript application programming interfaces (API's). API developers will define many variables and it would interfere with code written by users of the API's if they happened to use variables with the same names. In fact, it would be too burdensome for users of API's if they even had to research what all these 'off limits' variable names were.