JavaScript

 

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)

        Comments

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

         10+2

         (n1 + n2)/2

         Name = "Hello World"

         x = Math.sqrt(10);

         y++

o       Compound statements

o       Empty statements

o       Label statements

o       Other statements

         break

         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

Attributes:

LANGUAGE

Specifies the scripting language "JavaScript"

SRC

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

 

ARCHIVE

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">

</SCRIPT>

 

<HEAD>

<SCRIPT> </SCRIPT>

</HEAD>

 

Noscript Option:

 

<BODY>

<SCRIPT>

Statements

</SCRIPT>

 

<NOSCRIPT>

[JavaScript is not supported]

</BODY>

 

 

2. JavaScript Entities

 

<HTML>

<HEAD>

<TITLE> JavaScript Entities </TITLE>

<SCRIPT language = "javascript">

<!-- linkTo = "http://www.ipfw.edu"

// -->

</SCRIPT>

</HEAD>

<BODY>

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

</BODY>

</HTML>

 

 

3. Define JavaScript Functions

Functions

 

 

<HTML>

<!-- Js_function.html -->

<HEAD>

<TITLE> Define JavaScript Functions </TITLE>

<SCRIPT LANGUAGE ="JavaScript">

<!--

function Greeting()

{

alert("Hello World!");

}

 

function Say(message)

{

alert(message)

}

//-->

</SCRIPT>

</HEAD>

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

 

<DIV ALIGN ="CENTER">

<FORM>

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

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

</FORM>

</DIV>

<SCRIPT>

<!--

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

//-->

</SCRIPT>

</BODY>

</HTML>

 

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

10

3.1416

0.003

6.20E3

0377 // Octal number; or 255 in decimal

0xFF // Hex number; or 255 in decimal

 

Examples of String

'ECET Dept'

"3.1416"

'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

 

 

 

 

Arrays

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

 

Operators

+ 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

 

<HTML>

<!-- firstjavacript.htm -->

<HEAD>

<TITLE> First JavaScript </TITLE>

</HEAD>

<BODY BGCOLOR=WHITE>

<H1>

<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">

 

document.write("Hello, JavaScript")

 

</SCRIPT>

</H1>

 

</BODY>

</HTML>

 

 

Global Constant

 

Infinity

 

NaN - not a number

 

Global Functions

escape(s)

 

unescape(s)

 

eval(code)

 

getClass(javaobj)

 

isFinite(n)

 

isNaN(x)

 

parseFloat(s)

 

parseInt(s, radix)