JavaScript I

• JavaScript is an object oriented programming language used to add interactivity to web pages.

• Different from Java, even though bears some syntactic resemblance.

• Enables control of the content of web pages, browsers and HTML forms.

• It is a case-sensitive language.

Uses of JavaScript Client side validation of form data, prior to submission Performing arbitrary computations Controlling document appearance and content In combination with CSS, for creating DHTML (Dynamic

HTML).

Enabling user interactivity by displaying messages or alert boxes in response to user input.

Read and write client state with cookies Producing animation effects with images Interaction with Java applets

Comments in JavaScript// for single line comments

/*….*/ for multiple line comments

LiteralsA literal is a data value that appears directly in a program e.g.

“a string of text” or a numeric value.

Identifiers• An identifier is simply a name.• Used to name variables and functions in JavaScript.• Rules for identifiers are similar to those in Java and other

programming languages• The first character must be a letter, an underscore ‘_’, or $• Subsequent characters can be a letter or digit.

Reserved wordsThese are words that can not be used as identifiers, as they are

part of the language syntax. Include words such as break, case, catch, continue, default, delete, do, else, false, finally, for, function, if, in, new, null, return, switch, this, throw, true, try, var, void and while.

Data Types• The types of values that can be represented and manipulated

by a programming language• JavaScript supports:• Numbers• Strings (strings of text)• Boolean values• Object: An object is a composite data type that represents a

collection of values such as numbers and strings, or other objects.

Numbers Most basic data type. Represented in JavaScript as floating-point values Can represent numbers as large as

1.7976931348623157*10308 and as small as 5*10-324

Strings A sequence of Unicode letters, digits and punctuation marks

enclosed in matching pairs of single or double quotation marks.

Double-quote character should be enclosed in single quotation marks

Single-quote enclosed in double quotation marks

Escape sequences in string literals \n creates a new line \’ represents the single quote or apostrophe e.g ‘You\’re not’

would translate to ‘You’re not’ \\ represents backslash, and \r represents carriage return.

Working with Strings• Concatenation: JavaScript has a built-in feature that allows

joining one string to another with the ‘+’ operator e.g “We have “ + “moved on to JavaScript”; results in “We have moved on to JavaScript”

• Length: Determines the numbers of characters contained in a string. E.g. to determine the number of characters in a variable called s, the syntax is s.length

• To get the last character in a string: last_char = s.charAt(s.length – 1);

• To find the position of the first letter ‘a’ in a string s, position_of_a = s.indexOf(‘a’);

Boolean Values• Has only 2 possible values (True or False)• Generally the result of comparisons made within a script.• Typically used in control structures e.g if/else statements

perform one action if a boolean value is true and another action if the value is false.

Functions Piece of executable code that is defined by a JavaScript

program, or predefined by the JavaScript implementation. Defined only once, but can be executed or invoked any

number of times. May be passed arguments or parameters that specify

value(s) upon which it is to perform its computation.

Functions (contd.) May return value that represents the results of computation. JavaScript implementations provide many predefined

functions, such as Math.sin() function that computes the sine of an angle.

Example:

function square(x) // the function is named square and expects { // one argument, x. The body is enclosed in

return x*x; // curly brackets. This function squares its

} // argument and returns the value.

Invoking Functions b = square(x); y = Math.sin(x)

Objects• Collection of named values• The named values are usually referred to as properties of the

object. • The properties are usually represented as the name of the

object followed by a period (.), followed by the name of the property e.g. if an object named image has properties named width and height, they’ll be represented as image.width and image.height, respectively.

Creating Objects

Objects are created by invoking special constructor functions.

var o = new Object();

Once created, you can use and set its properties e.g.

var point = new Object(); point.x = 2.3; point.y = 4.5;

Object LiteralsAlso called object initializer.The point object can be created and initialized with the

following code: var point = {x:2, y:4};Object literals can also be nested. E.g.var rectangle = { upperLeft: { x:2, y:4 }, lowerRight: { x:6, y:10 } }; The property values used in object literals do not have to be

constants, i.e. they could be expressions e.g.var rectangle = { upperLeft: { x:point.x, y:point.y }, lowerRight: { x:(point.x + ln), y:(point.y + ln2)} };

Arrays• Collection of data values, similar to an object.• While each data value in an object has a name, each data

value in an array has an index.• The index is a positive integer.• Arrays may contain any type of JavaScript data, including

references to other arrays or objects• Example: If an array is named a, and n is a positive integer,

a[n] is an element of the array.• Array indexes begin with zero, therefore a[2] is the third

element of the array a.

References: Dietel, Dietel & Nieto Chapter 8

JavaScript The Definitive guide 4th Ed. David Flanagan. Chapters 1, 2 & 3