4. Javascript

Lesson No.4 Client Side Scripting using JavaScript
Lesson Summary 

READ THE TOPIC NOTES AND THEN PRACTICE QUESTIONS ON 
 http://itonlineexam.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 TypeDescription
Stringrepresents sequence of characters e.g. "hello"
Numberrepresents numeric values e.g. 100
Booleanrepresents boolean value either false or true
Undefinedrepresents undefined value
Nullrepresents 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.
deleteDelete Operator deletes a property from the object.
inIn Operator checks if object has the given property
instanceofchecks if the object is an instance of given type
newcreates an instance (object)
typeofchecks the type of object.
voidit discards the expression's return value.
yieldchecks 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.


Importance of Lesson No. 4 in Exam


Online Exam   (Weight-age: 14  to 16 marks)

  • MCQ1 Select one Answer - 3 to 5 questions
  • Fill in the blanks -  1 or 2 questions
  • True or False - 1 or 2 questions
  • Rearrange the following - 1 question
  • Write Program - 1 question
  • MCQ2 Select two Answers   - 1 question 
  • MCQ3 Select three Answers -  1 question  (may come)
  • Short/Long Answers  -  1 question (may come)

For Objective Questions Practice LINK 1 LINK 2

For Appearing an IT TEST  link 1 link 2


9 comments:

  1. Are u sure that only this will be ask in exam?

    ReplyDelete
  2. Can you upload the answer of programs

    ReplyDelete
  3. i dont have program codes now coz server hard disk crashed in our college
    refer TPS book

    ReplyDelete
  4. Visit http://exza.in

    Since ITOnlineExam.com not working due to Bandwidth limit got exceeded yesterday....

    ReplyDelete

Bitcoins