3. Adv. JavaScript

Lesson No.3 Advanced JavaScript
For IT Online MOCK EXAM   link 1 link 2
Lesson Summary 

READ THE TOPIC NOTES AND THEN PRACTICE QUESTIONS ON 
 http://onlineITexam.com/fillups.php
http://exza.in/fillups.php
CHOOSE OPTION "ALL"  IN NO. OF QUESTION TO SEE ALL THE QUESTIONS


JavaScript
JavaScript is a web scripting language.
It is an object-oriented language.
Initially, It was called live script.
It was created by Brendan Eich at Netscape.
It was first available in the web browser Netscape Navigator version 2.
It is used along with the HTML pages either in the body section or head section inside the <script>   </script>  tags.
It is used for validations of data.
It is used to create dynamic web pages.
It can capture events (actions done by users) and execute a code.
JavaScript is case sensitive language.

Types of Scripting Languages
Client side Scripting
IT is executed on client machine by the browser. E.g. JavaScript, VBScript.
The source code of client side scripts can be viewed and altered in the browser without any authentication.
Client side scripts are used generally for validation purpose, they provide event driven interaction. 
Client side scripts are executed by the Client Browser. 
No network traffic generated.


Server side Scripting
It resides on the Web Server and executed on the Web Server.
It is activated by Client.
E.g. ASP, PHP, Perl, JSP, CGI
The server side scripts are protected by login authentication.
Server side scripts are used for collecting the data when it is submitted by the Client browser.
Client side scripts require Web Server Software to execute.
Network traffic is generated with Server-side scripting.

Attributes used in <script> tag.
src  -  To specify the URL of an external file containing the JavaScript source code.

language - indicates the language used in the script.

E.g.  <script language="JavaScript">

E.g.  <script src="scripts/validate.js">
       




Abbreviations
ASP - Active Server Pages
API - Appliction Programing Interface
JDBC - Java Database Connectivity 
DOM - Document Object Model 
BOM - Browser Object Model 
W3C - World Wide Web Consortium
NaN - Not a Number


Variables
JavaScript variables are containers for storing data values.
var keyword is used to declare variables.
All JavaScript variables must be identified with unique names.
The general rules for constructing names for variables (unique identifiers) are:

• Names can contain letters, digits, underscores, and dollar signs.
• Names must begin with a letter
• Names can also begin with $ and _
• Names are case sensitive (y and Y are different variables)
• Reserved words (like JavaScript keywords) cannot be used as names

 JavaScript variable names are case-sensitive.

 Local variable - variable declared within procedure or function.


Data types in JavaScript

JavaScript provides different data types to hold different types of values. There are two types of data types in JavaScript.

• Primitive data type
• Non-primitive (reference) data type

 

Primitive Data Types in JavaScript
There are five types of primitive data types in JavaScript. They are as follows:

Data Type	Description
String	represents sequence of characters e.g. "hello"
Number	represents numeric values e.g. 100
Boolean	represents boolean value either false or true
Undefined	represents undefined value
Null	represents null i.e. no value at all

Operators
JavaScript operators are symbols that are used to perform operations on operands.
There are following types of operators in JavaScript.

Arithmetic Operators
-      +        /     *
%(Modulus)     - To find remainder of  division of two numbers
++(increment)  
--(decrement)

Comparison (Relational) Operators   

==	Is equal to
===	Identical (equal and of same type)
!=	Not equal to
!==	Not Identical
>	Greater than
>=	Greater than or equal to
<	Less than
<=	Less than or equal to

Bitwise Operators

&	Bitwise AND
|	Bitwise OR
^	Bitwise XOR
~	Bitwise NOT
<<	Bitwise Left Shift
>>	Bitwise Right Shift
>>>	Bitwise Right Shift with Zero

Logical Operators

&&	Logical AND
||	Logical OR
!	Logical Not

Assignment Operators

=	Assign
+=	Add and assign
-=	Subtract and assign
*=	Multiply and assign
/=	Divide and assign
%=	Modulus and assign

Special Operators

(?:)	Conditional Operator returns value based on the condition. It is like if-else.
,	Comma Operator allows multiple expressions to be evaluated as single statement.
delete	Delete Operator deletes a property from the object.
in	In Operator checks if object has the given property
instanceof	checks if the object is an instance of given type
new	creates an instance (object)
typeof	checks the type of object.
void	it discards the expression's return value.
yield	checks what is returned in a generator by the generator's iterator.

Comments in JavaScript
//   - single line comments
/*    */    -   multiple line comments 


Functions

A JavaScript function is a block of code designed to perform a particular task.

A JavaScript function is executed when "something" invokes it (calls it).

It is a block of JavaScript code that performs a specific task and returns  a value. 

A function id defined by using keyword  "function".

E.g. 

<script>
function msg()     {
         alert("hello! this is message");
}
</script>  
 <input type="button" onclick="msg()" value="call function"/> 

Objects in JavaScript


In JavaScript, almost "everything" is an object.
An object is a software bundle of variables and related methods. You can represent real-world objects using software objects.

In JavaScript, An object is a collection of properties, 
and a property is an association between a name (or key) and a value. 
A property's value can be a function, in which case the property is known as a method.
The new keyword is used for creating objects in JavaScript.

 
Objects, methods and properties are the basic building blocks of Object oriented programming language. 

The object  binds data and functions(methods) together which works on data. Functions are called as methods.
Once Object is defined and it can be used as a template to create many objects of same type.
 JavaScript has predefined objects and it supports user defined objects also.

Core JavaScript contains a set of objects:

• Number
• Date
• Math
• Array
• String
• Boolean

 and language constructs such as operators, control structures, statements, etc.

Select object is the parent of option object.




In Client Side JavaScript, the Core JavaScript is extended by adding objects to control a Browser Object model and Document Object Model 

DOM and BOM standards are developed by W3C (World Wide Web Consortium)




DOM  (Document Object Model )
DOM is a platform or interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents.




Browser Object Model provides objects supported by Browsers. It allows JavaScript to "talk to" the browser. 

• Window Object
• Location Object
• History Object
• Document Object
• Navigator Object
• Screen Object

DOM (Document Object Model)
The  DOM is a standard object model and programming interface for HTML. It defines:

• The HTML elements as objects
• The properties of all HTML elements
• The methods to access all HTML elements
• The events for all HTML elements

In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML elements.


Window Object
Window object is  a top level client side object for each window or frame.
Properties:

Property	Description
location	Returns the Location object for the window
document	Returns the Document object for the window
name	Sets or returns the name of a window
status	Sets the text in the status bar of browser window
closed	Returns a Boolean value indicating whether a window has been closed or not

Methods:

Method Name	Description
parseInt( )	converts the string passed into number/integers.
alert( )	Displays an alert box with a message and an OK button
blur( )	Removes focus from the current window.
open( )	Opens a new Browser windwow.
close( )	Closes the current window
confirm( )	Displays a dialog box with a message and an OK & a Cancel button
focus( )	Sets the focus to the current window
print( )	Prints the content of the current window
prompt( )	Displays a dialog box that prompts the visitor for input.
setTimeout( )	Calls a function or evaluates an expression after a specified number of milliseconds.
setInterval( )	Calls a function or evaluates an expression at specified intervals.
clearInterval( )	clears a timer set with setInterval( ).
clearTimeout( )	clears a timer set with setTimeout( ).
parseFloat( )	converts the string passed into numbers with decimals (floating point numbers).

Navigator Object
The navigator object is used for browser detection and can return useful infromation about the visitor's browser and system. It can be used to get browser information such as appName, appCodeName, userAgent etc. 


Properties:

Property	Description
appCodeName	Returns the code name of the Client's browser
appName	Returns the name of the Client's browser
appVersion useragent	Returns the version information of the Client's browser userAgent property returns the user-agent header sent by the browser to the server

Document Object
Document object is created when HTML document is loaded into the browser.
Properties:

Property	Description
title	specifies the title of the document on the Browser's title bar.
bgcolor	Gives background color to the document.
URL	Specifies URL of the docuemtn.
fgcolor	Specifies the text color

Methods:  

Method Name	Description
write( )	Helps to display string into document windwow.
writeln( )	Displays string into docuement on new line

Events:
Event can be something the browser does, or something a user does.  
JavaScript's interaction with HTML is handled through events that occur when the user or the browser manipulates a page. 
When the page loads, it is called an event. 
When the user clicks a button, that click too is an event. Other examples include events like pressing any key, closing a window, resizing a window, etc.
Events are the signals generated when specific action occurs.

Events List
click
dblclick
mouseover
mouseout

blur
focus
abort
load
unload
reset
select

keypress
keydown
keyup


 
Event Handler
An event handler typically is a software routine that processes events - actions such as keystrokes and mouse movements.
Event handlers are triggered in the browser by user actions.

Frame/Object Events 
onload - The event occurs when an object is loaded. When a page is loaded into the Web Browser.
onunload - event occurs once a page has unloaded (user leaves)

onerror - The event occurs when an error happens during loading of a docuement or image.
onabort - event occurs when an image is stopped from loading before completely loaded.
onblur - event occurs when the focus is removed from an form element or window.
onfocus - event occurs when an element gets focus.
onselect - event occurs when user selects some text.
onchange -  The event occurs when the value of form field is changed by the user.
onsubmit - The event occurs when a form is submitted. 
onreset - event occurs when a form is reset.

Mouse Events
onclick  - event occurs when user clicks in the document or on a link or form element.
(is the only event handler for radio button) 
ondblclick - event occurs when the user clicks in the document twice .
onmouseover - The event occurs when the user moves the pointer over an object.
onmouseout - The event occurs when the user moves the pointer off a clickable area.
onmousedown - event occurs when the user presses a mouse button over an element.
onmouseup - event occurs when the user releases a mouse button over an element.

Keyboard Events
onkeydown - event occurs when the user is pressing a key.
onkeypress - event occurs when the user presses a key.
onkeyup - event occurs when the user releases a key. 


Important Functions
confirm( ) - Displays a dialog box with an OK and cancel button.
prompt( ) - Displays a dialog box that prompts the visitor to input.(accepts data from user)
alert( ) - Displays an alert box with a message and OK button.

eval( ) - used for evaluating a strin representing arithmetic expression.
indexOf( ) - used to search for the specified character in a string. Returns the index vlaue of the first occurence. Find a certain string is present within a given string.
lastindexOf( ) - used to search for the specified character in a string. Returns the index vlaue of the last occurence.
substring( ) - used to extract a subset or certain portion of string.

parseInt( ) - used to convert string into  number/integer. 
parseFloat( ) - used to convert string into floating point number.
getDay( ) - method of the Date object returns the weekday in number.
getMonth( ) - method of the Date object returns the month in number.
getYear( ) - method of the Date object returns  year part from the date.
charAt( ) - method of String returns the character at the specified index value.
toLowerCase( ) - method of String object returns string into lowercase. 
cInt( ) -converts character to number



Methods of form elements
click( ) - method of checkbox object emulates the action of clicking the checkbox.
blur( ) - method of button object emulates the action of removing focus on a button.
select( ) - method of password, textbox, textarea object selects the text in the field.
focus( ) - method of radio object gives focus to the radio button.
reset( ) - method of the form object resets the form.

Form Objects Methods

Name	Description
reset( )	Simulates a mouse click on a reset button for the calling form.
submit( )	Submits a form.

Button Objects Property

Name	Description
form	Refers to the associated form.
name	Indicate the name attribute.
type	Indicate the type attribute.
value	Indicate the value attribute.

Button Objects Methods

Name	Description
blur( )	Focus lost from the button.
click( )	Indicate a mouse click on the button.
focus( )	To get focus to the button.

Password Object Property

Name	Description
defaultValue	Specifies the value attribute.
form	Reflects the form containing the password object.
name	Specifies the name attribute.
type	Specifies the type attribute.
value	Specifies the current value of the password object's field.

Password Object Methods

Name	Description
blur( )	Removes focus from the object.
focus( )	Gives focus to the object.

select( )   Selects the text


Checkbox Object Property

Name	Description
checked	Indicate the current state of the checkbox.
defaultChecked	Indicate the checked attribute.
form	Form containing the checkbox object.
name	Indicate the name attribute.
type	Indicate the type attribute.
value	Indicate the value attribute.

Checkbox Object Methods

Name	Description
blur( )	Lost focus from the checkbox.
click( )	Indicates a mouse click on the checkbox.
focus( )	Set focus to the checkbox.

Radio Object Property

Name	Description
checked	Selects a radio button programmatically (property of the individual button).
defaultChecked	Specifies the checked attribute (property of the individual button).
form	Reflects the form containing the radio object (property of the array of buttons).
name	Reflects the name attribute (property of the array of buttons).
type	Reflects the type attribute (property of the array of buttons).
value	Reflects the value attribute (property of the array of buttons).

Radio Object Methods

Name	Description
blur( )	Removes focus from the radio button.
click( )	Simulates a mouse-click on the radio button.
focus( )	Gives focus to the radio button.

Textarea Object Property

Name	Description
defaultValue	Represents the value attribute.
form	Represents the form containing the Textarea object.
name	Represents the name attribute.
type	Represents that an object is a Textarea object.
value	Represents the current value of the Textarea object.

Textarea Object Methods

Name	Description
blur( )	Removes focus from the object.
focus( )	Gives focus to the object.
select( )	Selects the input area of the object.

Short Questions
1. What is JavaScript?
2. Explain Client-side Scripting.
3. Explain Server-side Scripting.
4. Give the difference between Client-side and server side scripts.
5. What is Document Object? List any 5 properties of doucment object
6. Explain any four built-in fucntions in JavaScript.
7. How to write function in JavaScript?

Write Program Questions

1.	Write JavaScript code to print subtraction of 2 numbers.
2	.Write JavaScript code to print addition of 2 numbers.
3	.Write JavaScript code to print multiplication of 2 numbers.
4	.Write JavaScript code to print division of 2 numbers.
5	.Write JavaScript code to print addition, subtraction, multiplication & division of 2 numbers.
6	.Write JavaScript code to display area, accept value from user.
7	.Write JavaScript code to print area of triangle.
8	.Write JavaScript code to calculate the average of three numbers.
9	.Write JavaScript code to print perimeter of rectangle.
10	.Write JavaScript code to print perimeter of trapezium.
11	.Write JavaScript code to check whether the number is odd or even.
12	.Write JavaScript code to print multiplication table of 3.
13	.Write JavaScript code to print numbers from 1 to 10.
14	.Write JavaScript code to print sum of 50 natural numbers.
15	.Write JavaScript code to print all even numbers from 10 to 50.
16	.Write JavaScript code when user click on button, it will display sum of even numbers from 1 to 10.
17	.Write JavaScript code to print all odd numbers from 50 to 100.
18	.Write JavaScript code to print factorial of 7 on button click.
19	.Write JavaScript code to print square of a accepted number.
20	.Write JavaScript code to count length of accepted string after click on the button.
21	.Write JavaScript code to accept two dates and find the difference in those dates.
22	.Write JavaScript code to take a input of string and reverse the string in output.
23.	Write JavaScript code to input 3 digit number and find sum and product of its digit of the number use onblur event for the program.
24	.Write JavaScript code to print factorial of accepted number.

For Objective Questions Practice LINK 1 LINK 2

For Appearing an IT TEST  link 1 link 2