WBDV111 FINALSCS 1-YB-2 ➔ Time efficient as web browser cache.

Reduces
web loading time
➔ Allows to work with html and js files parallelly
and separately
JAVASCRIPT ➔ Length of code reduces

➔ Is a light-weight object oriented programming JAVASCRIPT COMMENT

language
➔ Used to script web pages
➔ Enables dynamic interactivity on websites ➔ Adds information about the code, warnings
when applied to an HTML document or suggestions
➔ Make the code easy to understand
➔ To avoid the unnecessary code
HISTORY OF JAVASCRIPT
➔ Single Line - //
➔ 1993 - Mosaic, first popular website ➔ Multiple Line - /* */
➔ 1994 - Netscape founded by Marc
Andreessen JAVASCRIPT GLOBAL VARIABLE
➔ He realized the web needed to be more
dynamic
➔ Declared outside the function
➔ 1995 - recruited Brendan Eich to implement
➔ Can be accessed by multiple functions
and embed Scheme programming language

➔ Company merged with Sun Microsystems to JAVASCRIPT DATA TYPES

add Java into its Navigator.
➔ Netscape decided to five similar anime to the
1. Primitive data type
scripting language as Java’s and led to
2. Non-primitive data type
“JavaScript”

➔ JavaScript is a dynamic type language, there

➔ 1995 - first code of JS is named “Mocha”
is no need to specify what data type, it will be
➔ Attempted to rename JavaScript to
automatically used by JavaScript engine
LiveScript, but due to copyright reasons, the
➔ Data type “var”, can hold any type of value
name “Javascript” was brought back

PRIMITIVE DATA TYPES:

RUNNING JAVASCRIPT
Data Type Description

➔ SublimeText, Notepad++, Atom, etc. String Sequence of character

Provides 3 places to put the code: Number Numeric values

1. Within body tag
Boolean Boolean value either false or true
2. Within head tag
3. In external file ( .js extension) Undefined Undefined value

Example of a basic JavaScript Code: Null No value

NON-PRIMITIVE DATA TYPES:

Data Type Description
● <script> - specifies that we are using
Object Instance through which we can
javascript access members
● type = “text/javascript” - provides info. To the
browser about the data Array Group of similar values
● document.write() - is a function used to
display dynamic content through JavaScript RegExp Regular expression

Advantages of External JavaScript File::

➔ Reusability in more than one HTML file
➔ Easy code readability
 JAVASCRIPT OPERATORS -= Subtract and Var a = 10; a-=20. Now,
assign a = 10
➔ Symbols used to perform operations on
*= Multiply and Var a = 10; a*=20. Now,
operands
assign a = 200
1. ARITHMETIC OPERATORS:
/= Divide and Var a = 10; a/=2. Now,
Operator Description assign a=2

+ Addition &= Modulus and Var a = 10; a%=2. Now,

assign a=0
- Subtraction

* Multiplication
JAVASCRIPT IF-ELSE
/ Division
➔ Used to execute the code whether the
% Modulo (Remainder)
condition is true or false
++ Increment (+1)
1. IF statement
-- Decrement (-1) - Evaluates the content only if
expression is true

2. COMPARISON OPERATORS:
2. IF ELSE statement
Operator Description Example - Evaluates the content whether the
expression is true or false
== Is equal to 10==20 = false
3. IF ELSE IF statement
=== Identical (equal and of 10==20 = false
- Evaluates the content only if
same type)
expression is true from several
!= Not equal to 10!=20 = true expressions

!== Not identical 20!==20 false

> Greater than 20>10 = true

>= Greater than or equal 20>=10 = true

to

< Less than 20<10 = false

<= Less than or equal to 20<=10 = false

3. LOGICAL OPERATORS:
Operator Description Example
JAVASCRIPT SWITCH

&& Logical AND (10==20 && 20==33) = false ➔ Used to execute one code from multiple
expressions
|| Logical OR (10==20 || 20==33) = false ➔ Same as else if statement, but more
convenient that if else if statement
! Logical Not !(10==20) = true

4. ARITHMETIC OPERATORS:

Operator Description Example

= Assign 10+10 = 20

+= Add and assign Var a = 10; a+=20. Now,

a = 30
 JAVASCRIPT LOOP WINDOW OBJECT

➔ Used to iterate the piece of code ➔ Default object of the browser is window,
➔ Makes the code compact representing the browser's window.
➔ Mostly used in arrays

1. FOR Loop
- Iterates for a fixed number of times
- Should be used if number of iteration
is known

2. WHILE Loop
- Iterated for a infinite number of times
- Should be used if number of iteration
is unknown
NOTE:
- Window is a browser’s object, while javascript’s
objects are string, array, date, etc.

METHODS OF WINDOW OBJECT:

Method Description

alert() Displays alert box with ok button

3. DO-WHILE Loop confirm() Displays confirm dialog box with ok

- Iterated for a infinite number of times, and cancel
but code is executed at least once
prompt() Displays dialog box to get input
whether condition is true or false
from user

open() Opens new window

close(0 Closes current window

setTimeout() Performs action after specified time

like calling function

HISTORY OBJECT
JAVASCRIPT FUNCTIONS
➔ Represents an array of URLs visited by the
➔ Used to perform operation user
➔ Can be called numerous of time to reuse
PROPERTIES OF WINDOW OBJECT:
Advantages of JavaScript Functions:
1. Reusability Property Description
2. Less Coding
Length Returns length of the history URLs

METHOD OF WINDOW OBJECT:

Method Description

forward() Loads next page

BROWSER OBJECT MODEL (BOM) back() Loads previous page

go)( Loads given page number

➔ Used to interact with the browser
 DOCUMENT OBJECT MODEL (DOM) getElementByTagName()

➔ Root element that represents the whole HTML

document

getElementByClassName(

METHODS OF DOCUMENT OBJECT:

Method Description

write(“string) Writes given string on document

writeln(“strin Writes given string on document

g) with new line on end
ACCESSING FIELD VALUE BY DOM
getElementB Returns element having the given if
yId() value

getElementB Returns element having the given if

yName() Name

getElementB Returns element having the given if

yTagName() TagName

getElementB Returns element having the given if

yClassName() ClassName

getElementById()

Form - is the name of the form

Name - is the attribute of the input text
Value - is the property that returns the value of the
input text

getElementByName()