Why Use JavaScript?

        A Programming language for creating active user interface on Web pages

        JavaScript script is added in an HTML page, browser independent

        Add interactivity to Web pages and browser (dynamic, interactive)


Integrating JavaScript and HTML

        Active user interface

        User input information validation (checking form data)

        Display alert boxes

        Display custom message

        Object controls: forms, forms, buttons, and check boxes

        Generate clocks, calendars, timestamps

        Web page Redirection

        Interact with a Java applet on a Web page

        Event handling


Object-Oriented JavaScript

        Object-Oriented Language

o       Methods (actions: subroutines, procedures, functions)

o       Properties (attributes: variables)


What is an object?

        Have states, behavior, and identity

        Instances of classes

        Examples of real-world objects:

o       Person objects: Jack, Paul, Jim; age, owner, job; change_job()

o       File object: file_name, size_in_bytes, last_up_date; print()

o       Controller object: DCMotorController, ACMotorController, PLC

o       Window, browser


Role of an object

        Actor (active object), or

        Server (never operates upon other object), or

        Agent (both actor and server)


JavaScript Client-Side Object Hierarchy

The Current Window (main object)



Features of JavaScript

        Case sensitive

        White space

        Semicolons termination (optional)


o       /* This is a comment. */

o       // This is a comment.

        Keywords are all lower case

        Identifiers: variables, functions and label names

        Variables: declared and optionally initialized, with the "var" element

        Function names must be typed with a consistent capitalization

        Data types:

o       Numbers

o       Booleans

o       Strings

o       Objects

o       Arrays

o       Function and methods

o       Null and undefined

        Operators (C/C++/Java style): math, assignment, relational

        Statements: a sequence of statements to form a program

o       Declaration: var, function

o       Expression statements: formed by combining literal values and variables


         (n1 + n2)/2

         Name = "Hello World"

         x = Math.sqrt(10);


o       Compound statements

o       Empty statements

o       Label statements

o       Other statements


         Decision making (if/else)

         Control structure (break, continue, for, for/in, with, while, do/while, switch, case, default)

         function, return

         import, export

        Regular expressions support (matching and searching techniques defined in UNIX environment)



Basic Language Rules


<SCRIPT> tag



Specifies the scripting language "JavaScript"


Gives the URL of an external script to be loaded and executed



Specifies the URL of a JAR file that contains the script specified by the SRC attributes



Where to place JavaScript Codes


1. Include External JavaScript Code


<SCRIPT language =`"javascript" SRC = "src.js">







Noscript Option:








[JavaScript is not supported]




2. JavaScript Entities




<TITLE> JavaScript Entities </TITLE>

<SCRIPT language = "javascript">

<!-- linkTo = ""

// -->




<A HREF ="&{linkTo};" Click Here. </A>





3. Define JavaScript Functions





<!-- Js_function.html -->


<TITLE> Define JavaScript Functions </TITLE>



function Greeting()


alert("Hello World!");



function Say(message)







<H1 ALIGN = "CENTER"> Define and Use JavaScript Function </H1>




<INPUT TYPE="BUTTON" VALUE = "Click Here" onClick="Greeting()">

<INPUT TYPE="BUTTON" VALUE = "ECET" onClick="Say('Electrical and Computer Engineering Technology')">





document.write("Last modified on: " + document.lastModified);






JavaScript Keywords


break case continue default delete

do else export false for

function if import in new

null return switch this true

typeof var void while with


Reserved Keywords for future extensions

catch class const debugger

enum extends finally super

throw try





Variables and Values


Value Types


Type Description Example


Number Any numeric value 10.145

String Character inside quotation marks "Web Prog"

Single quotes or double quotes 'testing'

Boolean True or False false

NULL Empty value


Objects Compound data types that contains methods and properties


Examples of Number





0377 // Octal number; or 255 in decimal

0xFF // Hex number; or 255 in decimal


Examples of String

'ECET Dept'


'Name = "thisform"'


Variable Declaration


var n, m; // uninitialized

var x = 100, message = 'Hello you';



Escape Sequence

\b Backspace

\f Form feed

\n New line

\r Carriage return

\t Tab

\' Apostrophe or single quote

\" Double quote

\\ Back slash

\ddd Three octal digits (d: 0,1, through 7)

\xdd Two hexadecimal digits (d;0, 1,2,..,9, A,B,C,D,E,F)

\udddd Unicode encoding by four hex degits






var n = new Array(); // Empty array

var b = new Array(20); // 20 elements

var k = new Array(1, 2, 3); // Initialized with three elements


JavaScript 1.2

var k = [1, 2, 3];

var anyobjet = [1, true, [1,2], {x:1, y:2}, "Hello"];


Null and Undefined

null - no value


Conditional Operator (? : )

Math.abs(x) or

x < 0? -x: x


typeof operator

Evaluate the type of object: "number", "string", or "boolean"


new operator

Creating new objects

delete operator

Delete existing objects



+ x + y Add and assign

+ x + y String concatenation

- x - y Subtraction

* x * y Multiplication

/ x / y Division

% x%y Modulus of x and y (remainder operation)

++ x++, ++x Increment

-- x--, --x Decrement

- x Negate (change sign)


Bitwise Operators

& x & y bitwise AND; both x and y are unsigned integer

| x | y bitwise OR; both x and y are unsigned integer

^ x ^ y bitwise XOR; both x and y are unsigned integer

~ ~x bitwise NOT

<< x << 2 Shift left 2 bit (times 4)

>> x >> 2 Shift right 2 bit (div by 4)

>> x >> 2 Shift right zero fill (div 4)


Assignment Operators

= x = y Assignment, copy value

+= x += y Add and assign; x = x +y

-= x -= y Sub and assign; x = x -y

*= x *= y Multiply and assign; x = x * y

/= x /= y Divide and assign; x = x / y

%= x %= y Modulus and assign; x = x % y

<<= a <<= b a = a << b

>>= a >>= b a = a >> b

>>>= a >>>= b a >>>= b

&= a & b a = a & b

|= a |= b a = a | b

^= a ^= b a = a ^ b


Relational Operators


== x == y Equal to; return true if x and y are equal


!= x != y Not equal; return true if x and y are not equal


> x > y Greater than; return true if x is greater than y


>= x >= y Greater than or equal to ; return true if x is greater

than or equal to y


< x < y Less than; return true if x is less than y


<= x <= y Less than or equal to; return true if x is less than or

equal to y


&& x && y Logical AND; Return true if both x and y are true


|| x || y Logical OR; return true if either x or y is true


! !x Logical NOT; return true if x is false



Where to Place JavaScripts



<!-- firstjavacript.htm -->


<TITLE> First JavaScript </TITLE>






document.write("Hello, JavaScript")









Global Constant




NaN - not a number


Global Functions















parseInt(s, radix)