1 of 29

Chapter 1

Basics of JavaScript Programming

2 of 29

�Overview of JavaScript: �

  • It is dynamic Computer Programming language
  • Lightweight and most commonly used for web pages.
  • It interact with user and make a web page dynamic.
  • Using HTML only static pages can be created.
  • No user interaction with HTML
  • JavaScript was developed by Netscape in 1995.
  • Its initial name was LiveScript.
  • Later on Sun Microsystems joined Netscape and the name is changed to JavaScript.

3 of 29

�Features of JavaScript: �

  • Browser Support: No plug-in needed. Almost all browsers support
  • Structure Programming Syntax: Similar to ‘C’
  • Automatically inserts ‘;’ at the end of statement. No need to write.
  • Dynamic Typing: Data type is bound to value not to variable. Ex: one can assign integer value to any variable say ‘a’ and later can assign string value to same variable ‘a’.
  • Run time Evaluation: ‘eval’ function can be used in expression

4 of 29

�Features of JavaScript cont.: �

  • Support for object: It is Object Oriented Programming language
  • Regular Expression: Supports use of regular expression using which text-pattern matching can be done.
  • Function Programming: In this functions can be used. One function can use other or can be assigned to a variable just like some data type.

5 of 29

�Enabling JavaScript for various Browsers: �

6 of 29

�Enabling JavaScript for various Browsers: �

7 of 29

�Enabling JavaScript for various Browsers: �

8 of 29

�Writing a JavaScript Document : �

  • The javascript can be directly embedded within HTML document or it can be stored as external file.
  • Syntax:
  • <script type=“text/javascript”>

------------

-------------

</script>

Two attributes of <script> tag are:

  • type: <script type=“text/javascript”>

</script>

  • language: <script language=“javascript”>

</script>

​

9 of 29

�Writing a First Program: �

<html>

<head></head>

<body>

<script type="text/javascript">

document.write("HELLO WORLD");

</script>

<p>this is web page body</p>

</body>

</html>

10 of 29

�Explanation of Program: �

  • We have embedded a javascript within

<script type=“=“text/javascript”>

----------

</script>

  • A comment can be

//

/* */ or can use XHTML comment

<! -- > and < -->

  • document.write is used to display desired message on web browser.
  • To run the program

Open any web browser and type complete name of file on the

address bar.

​

11 of 29

�Object Properties: �

  • Object Name:
  • Object is entity. In JavaScript document, window, forms, fields, buttons are some properly used objects.
  • Each object is identified by ID or name.
  • Array of objects or Array of collections can also be created.
  • Property:
  • It is the value associated with each object.
  • Each object has its own set of properties.
  • Method:
  • It is a function or process associated with each object.
  • Ex: for document object write is a method.
  • Dot Syntax: Used to access properties and methods of object.
  • Main Event: Event causes JavaScript to execute the code. In JavaScript when user submits form, clicks button, writes something to text box the corresponding event gets triggered and execution of appropriate code is done through Event Handling.

12 of 29

�Values: �

  • Values:

It uses six types of values:

  • Number: It is numeric value can be integer or float.
  • String: It is a collection of characters. Enclosed within single or double quote.
  • Boolean: It contains true and false values. Values can be compared with variables and can be used in assignment statement.
  • Null: This value can be assigned by reserved word ‘null’. It means no value. If we try to access null value error will occur.
  • Object: It is the entity that represents some value. Ex: Form is an object on which some components can be placed and used.
  • Function: It is intended for execution of some task. There are predefined and user defined functions. The ‘function’ keyword is used to define function.

13 of 29

�Keywords: �

  • These are the reserved words having some special meaning associated with it.

abstract else instanceof super

boolean enum int switch

break export interface synchronized

byte extends let this

case false long throw

catch final native throws

char finally new transient

class float null true

const for package try

continue function private typeof

debugger goto protected var

default if public void

delete implements return volatile

do import short while

double in static with

​

​

14 of 29

�Operators and Expressions: �

​

​

Sr. No.

Type

Operator

Meaning

Example

1.

Arithmetic

+

Addition or Unary plus

c=a+b

-

Subtraction or Unary minus

d=-a

*

Multiplication

c=a*b

/

Division

c=a/b

%

Mod

c=a%b

2.

Logical

&&

AND Operator

0&&1

||

OR Operator

0 | | 1

3.

Increment

++

Increment by one

++i or i++

4.

Decrement

--

Decrement by one

--i or i--

5.

Conditional

? :

Conditional Operator

a>b?true:false

15 of 29

�Operators and Expressions cont.: �

​

​

Sr. No.

Type

Operator

Meaning

Example

6.

Assignment

=

Is assigned to

a=5

+=

Add a value then assign

a+=5 (a=a+5)

-=

Subtract a value then assign

a-=5(a=a-5)

*=

Multiply a value then assign

a*=5(a=a*5)

/=

Divide a value then assign

a/=5(a=a/5)

7.

​

​

Relational

<

Less than

a<4

>

Greater than

a>4

<=

Less than equal to

a<=4

>=

Greater than equal to

a>=4

==

Equal to

a==4

!=

Not Equal to

a!=4

===

equal value and equal type

a===5

!==

not equal value or not equal type

a!==5

16 of 29

�AWT Classes: �

AWT Classes form three catagories:

1) Graphics: Color, Font, Images, Polygons, etc.

2) Components: GUI Components: Button, Menus, Panel, Frame

Container class contains Components, LayoutManagers

3)LayoutManager: Gives rules for graphical layout of components in a container.

​

​

​

17 of 29

Decision Making and Branching

  1. if Statement
  2. if-else Statement
  3. if-else if Statement
  4. switch Statement

​

​

​

18 of 29

Decision Making and Branching Cont.

  1. if Statement

if (Condition) OR if (Condition)

{ statement(s); statement;

}

Condition contains Relational operators as well as Logical Operators.

Ex: if (i > 0)

{

- - - - - - - ;

}

if (i > 1 || j!=5)

{

- - - - - - - ;

}

​

​

19 of 29

Decision Making and Branching Cont.

2) if else Statement

if (condition)

{

stmt(s) for true case;

}

else

{

stmt(s) for true case;

}

Or

if (condition)

stmt for true case;

else

stmt for true case;

20 of 29

Multiple Alternative if Statements

if (score >= 90)

grade = ‘A’;

else

if (score >= 80)

grade = ‘B’;

else

if (score >= 70)

grade = ‘C’;

else

if (score >= 60)

grade = ‘D’;

else

grade = ‘F’;

21 of 29

switch Statements

switch (variable-name)

{

case value1:

Execute stmt1;

break;

case value2:

Execute stmt2;

break;

case valueN:

Execute stmtN;

break;

default:

Execute last;

}

22 of 29

Decision Making and Looping

1) While Loop

​

while (condition is true)

{

// loop-body;

}

e.g.

int a = 20;

while(a>10)

{

document.write(“JPR”);

a--;

}

​

​

​

23 of 29

Decision Making and Looping

2) do while Loop

​

do

{

// Loop body;

}

while (condition is true);

e.g.

int a = 0;

do

{

document.write(a);

a++;

}while(a<50);

​

​

24 of 29

Decision Making and Looping

3) for Loop

for(initialization; condition; incr/decrement)

{

// Loop body;

}

e.g.

int a;

for(a=0;a<10;a++)

{

document.write(a);

}

OR

int a;

for(a=0;a<10;a++)

document.write(a);

​

25 of 29

Decision Making and Looping

4) for in Loop

  • The for/in statement loops through the properties of an object.
  • The block of code inside the loop will be executed once for each property.
  • Syntax:

for (var in object)

{

code block to be executed

}

​

  • Parameter Values

Parameter Description

var Required. A variable that iterates over properties of an object

object Required. The specified object that will be iterated

26 of 29

�break Statement�

  • The break statement can also be used to jump out of a loop.
  • The break statement breaks the loop and continues executing the code after the loop (if any):

Syntax:

jump-statement;    

break;

Ex:

for (i = 0; i < 10; i++)

{

if (i === 3)

{ break; }

text += "The number is " + i + "<br>";

}

27 of 29

�break Statement�

Output:

The number is 0

The number is 1

The number is 2

28 of 29

�continue Statement�

  • The continue statement breaks one iteration (in the loop), if a specified condition occurs, and continues with the next iteration in the loop.
  • Syntax:

jump-statement;    

break;

Ex:

for (i = 0; i < 10; i++)

{

if (i ==3)

{ continue; }

text += "The number is " + i + "<br>";

}

29 of 29

�continue Statement�

Output:

The number is 0

The number is 1

The number is 2

The number is 4

The number is 5

The number is 6

The number is 7

The number is 8

The number is 9