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
Literals
A 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 words
These 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 Literals
Also 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