Scribd
Upload
5 views

internet_material_-_unit_4%20(javaScript)

The document provides an overview of JavaScript, highlighting its role as a popular scripting language for creating interactive web pages. It covers key concepts such as variables, operators, conditional statements, and how to embed JavaScript in HTML. Additionally, it explains the use of control structures like if statements and switch statements for decision-making in programming.

Uploaded by

viveksandpa7
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

internet_material_-_unit_4%20(javaScript)

The document provides an overview of JavaScript, highlighting its role as a popular scripting language for creating interactive web pages. It covers key concepts such as variables, operators, conditional statements, and how to embed JavaScript in HTML. Additionally, it explains the use of control structures like if statements and switch statements for decision-making in programming.

Uploaded by

viveksandpa7
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W.

College

Q.1. WRITE A NOTE ON JAVASCRIPT. (3 OR 5 MARKS)  JavaScript is the most popular scripting language on the internet, and works in all major
browsers, such as Internet Explorer, Firefox, Chrome, Opera, and Safari.
 JavaScript is a language that is used to make web pages interactive.

UNIT-4  It runs on your user's computer and so does not require constant downloads from your
web site.
 JavaScript was designed to add interactivity to HTML pages.
JAVASCRIPT  JavaScript is a scripting language.

 INTRODUCTION TO JAVASCRIPT  A scripting language is a lightweight programming language.


 VARIABLES  JavaScript is usually embedded directly into HTML pages.
 OPERATORS
 CONDITIONAL STATEMENTS  JavaScript is an interpreted language (means that scripts execute without preliminary
 LOOPING STATEMENTS compilation).
 BREAK AND CONTINUE STATEMENTS
 DIALOG BOXES  Everyone can use JavaScript without purchasing a license.
 ARRAYS  Using JavaScript user can add events on your website.
 USER DEFINED FUNCTIONS(UDF)
 BUILT IN FUNCTIONS  Using JavaScript user can check the data before it is submitted to the server.
 EVENTS
 DOM OBJECT How to write JavaScript code into html page?
 HISTORY OBJECT
 FORM AND EMAIL VALIDATION  The HTML <script> tag is used to insert a JavaScript into an HTML page.
 Inside <script> tag type attribute is used to specify the scripting language.
 JavaScript can write into two sections either between <HEAD> tag or between <BODY>
tag.
 If user writes code in <body> section then JavaScript code will be executed immediately
after the page has been load.
 If user writes code in <head> section then JavaScript code will be executed depends on
user’s requirement.

Prepared By – APKubavat Networking & Internet Environment 1 Prepared By – APKubavat Networking & Internet Environment 2 Prepared By – APKubavat Networking & Internet Environment 3
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)

Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College

Syntax:
<HTML>
Q.2. EXPLAIN JAVASCRIPT VARIABLES (2 OR 3 MARKS)
<BODY>
VARIABLE MEANS :  A variable declared within a JavaScript function becomes LOCAL and can only be accessed
<SCRIPT TYPE = “TEXT/JAVASCRIPT”> NAME
.... Between these two “CONTAINER “– THAT within that function. (The variable has local scope).
tags All JavaScript USED TO STORE VARIABLE CAN  You can have local variables with the same name in different functions, because local
code will VALUE HAVE VALUE
Be written variables are only recognized by the function in which they are declared.
</SCRIPT>
 Local variables are destroyed when you exit the function.
</BODY> ADDRESS
</HTML>  Variables declared outside a function become GLOBAL, and all scripts and functions on
the web page can access it.
You can also write like <SCRIPT LANGUAGE = “JAVASCRIPT”>.
 Global variables are destroyed when you close the page.
The document.write() command is used to display the messages on the screen.
 If you declare a variable, without using "var", the variable always becomes GLOBAL.
For Example:
1 Word Question – Answer
SR.NO. QUESTION ANSWER
<Html> 1 Variable is used to store different types of values
<Body> 2 Variable can store on different Memory Location
<script language = "JavaScript"> 3 Variable can have Unique Address
document.write('hello word');
</script>
</body>
</html>

This code will display hello word on browser.

 Variable is container for storing the information.


1 MARKS Question – Answer
 Variable names are case sensitive. (x and X are two different variable).
SR.NO. QUESTION ANSWER  Variable names must be started with letter or underscore.
1 WHAT IS JAVASCRIPT? CLIENT SIDE SCRIPTING
LANGUAGE  To declare variable in JavaScript VAR statement is used.
2 WHY WE USE JAVASCRIPT IN OUR WEBSITE? ADD CONTENT TO A WEBPAGE  Syntax: VAR <variable name>
DYNAMICALLY
NOTE: it is not compulsory to declare variable in JavaScript before its use.
3 WHICH TAG IS USE TO INSERT JAVASCRIPT CODE IN <SCRIPT> TAG
HTML?  If you assign values to variables that have not yet been declared, the variables will
4 IS JAVASCSRIPT IS LIGHTWEIGHT?(YES OR NO) YES
automatically be declared.
5 IS JAVASCRIPT IS FREE FOR ALL?(YES OR NO) YES

Prepared By – APKubavat Networking & Internet Environment 4 Prepared By – APKubavat Networking & Internet Environment 5 Prepared By – APKubavat Networking & Internet Environment 6
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)

Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College

Q.3 EXPLAIN JAVASCRIPT OPERATOR (3 OR 5 MARKS) document.write("Too young");


ASSIGNMENT OPERATOR:
Operator means to “Operate something”. o Assignment operators are used to assign values to JavaScript variables. LOGICAL OPERATOR:
Operator can have different Operand or Values o Given that x=10 and y=5, the table below explains the assignment operators: o Logical operators are used to determine the logic between variables or values.
o Given that x=6 and y=3, the table below explains the logical operators:
Operator Example Same As Result Operator Description Example
= x=y x=5 && and (x < 10 && y >
+= x+=y x=x+y x=15 1) is true
-= x-=y x=x-y x=5 || or (x==5 || y==5)
Operators *= x*=y x=x*y x=50 is false
/= x/=y x=x/y x=2 ! not !(x==y) is true
%= x%=y x=x%y x=0
CONDITIONAL OPERATORS:
COMPARISION OPERATOR: o JavaScript also contains a conditional operator that assigns a value to a
Arithmetic Assignment
o Comparison operators are used in logical statements to determine equality or variable based on some condition.
difference between variables or values. Syntax:
Relational Conditional
Logical Increment & o Given that x=5, the table below explains the comparison operators: <Variable name> = <condition>? value1: value2
decrement
Example:
Operator Description Example x = (y == 5)? “x is true”:”x is false”
== is equal to x==8 is false
Here if value of y is 5 then value of x = “x is true”
=== is exactly equal to (value x===5 is true
ARITHMATIC OPERATOR: and type) x==="5" is false If value of y is not 5 then value of = “x is false”
!= is not equal x!=8 is true
o Arithmetic operators are used to perform arithmetic between variables and/or > is greater than x>8 is false
values. < is less than x<8 is true 1 Word Question – Answer
>= is greater than or equal to x>=8 is false
o Given that y=5, the table below explains the arithmetic operators: <= is less than or equal to x<=8 is true SR.NO. QUESTION ANSWER
Operator Description Example Result 1 Conditional Operator in c language can be and ? and :
+ Addition x=y+2 x=7 How Can it be Used
- Subtraction x=y-2 x=3 2 operator can find how many bytes an Sizeof
* Multiplication x=y*2 x=10 Comparison operators can be used in conditional statements to compare values and operand can occupies
/ Division x=y/2 x=2.5 3 operator can used to link related Comma
take action depending on the result:
% Modulus (division x=y%2 x=1 expression together.
remainder) For Example: 4 operator is known as assignment operator =(equal to)
++ Increment x=++y x=6 5 If condition is false , logical operator can return 0
If (age<18)
-- Decrement x=--y x=4 6 Precedence of operator is known as Hierarchy

Prepared By – APKubavat Networking & Internet Environment 7 Prepared By – APKubavat Networking & Internet Environment 8 Prepared By – APKubavat Networking & Internet Environment 9
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)
Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College

 Conditional statements in JavaScript are used to perform different actions based on IF...ELSE STATEMENT:
Q.4. EXPLAIN CONDITIONAL STATEMENTS (3 OR 5 MARKS) different conditions. o If you want to execute some code if a condition is true and another code if

 Very often when you write code, you want to perform different actions for different the condition is not true, use if ... else statement.

Control Structure :- “It used to control Flow of the Program” decisions. You can use conditional statements in your code to do this.
Syntax:
 In JavaScript we have the following conditional statements:
if (condition){
Code to be executed if condition is true}
⯌ if statement - use this statement if you want to execute some code only if
else{
a specified condition is true
Code to be executed if condition is not true }
⯌ if...else statement - use this statement if you want to execute some code

if the condition is true and another code if the condition is false


⯌ if...else if.... else statement - use this statement if you want to select one
Example:
of many blocks of code to be executed
<script language = "javascript">
⯌ switch statement - use this statement if you want to select one of many x = 5;
y = 6;
blocks of code to be executed.
if (x > y) {
IF STATEMENT: document.write('x is greater');
}else
You should use if statement if you want to execute some code only if a
{document.write('y is greater');}</script>
specified condition is true.

Syntax:
If <condition>{ IF…ELSE IF…ELSE STATEMENT:
JavaScript code executed if condition becomes true. }
It is used when user have two or more condition to check for execution
of code.

Example: <script language = "javascript"> Syntax:


x = 5; y = 6; if <condition1>
if (x<6){ {
document.write(' x is greater'); } Code if condition 1 is true;
If Statement :-
</script> }else if <condition2>{
“ To check condition & return result ”
Code if condition 2 is true;
}else
IF types / Flavors :-
{
Code if no condition becomes true;}
1.Simple If 2. If….Else Note that if is written in lowercase letters. Using uppercase letters (IF) will
3. If…Else if…Else 4.Nested If generate a JavaScript error!

Prepared By – APKubavat Networking & Internet Environment 10 Prepared By – APKubavat Networking & Internet Environment 11 Prepared By – APKubavat Networking & Internet Environment 12
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)

Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College

o If there is a match, the block of code associated with that case is executed.
SWITCH STATEMENT: o Use break to prevent the code from running into the next case automatically.

1 Word Question – Answer


SWITCH CASE :- 1 Word Question – Answer
SR.NO. QUESTION ANSWER “ MULTI WAY DECISION STATEMENT”
SR.NO. QUESTION ANSWER
1 How Many Control Structures available in JS ? Give 5 (two)
1 Switch represent Multiway Decision Statement
name. If Statement CASE :- WE CAN CREATE ANY NUMBER OF CASE VALUES INSIDE SINGLE 2 If no any case value match with condition then Default
Switch Statement SWITCH STATEMENT. statement following will execute.
2 If any condition become false ,statement following Else
will be execute. 3 statement is used to terminate Break
DEFAULT :- IT EXECUTE WHEN NO ANY CASE VALUE BECOME TRUE particular case.
3 In nested if first of all condition will be Outer
4 In switch case statement , any case value will be : (Colon)
checked.
followed by sign.
4 How mamy flavors/types of If statement.Give name. 4(four)
5 Write down syntax to represent switch statement Switch(Expression)
Simple if
If….else
If…else..if…else Q.5. EXPLAIN JAVASCRIPT BREAK & CONTINUE STATEMENTS (3 MARKS)
Nested if
5 Which indicate easy way to represent multiple Else…if o use the switch statement to select one of many blocks of code to be executed
conditions at the same time?

Syntax:
switch (n)
{
case 1:
Execute code block 1
break;
case 2:
Execute code block 2
break;
default:
Code to be executed if n is
Different from case 1 and 2} BREAK STATEMENTS
 The break statement "jumps out" of a loop.
 The continue statement "jumps over" one iteration in the loop.
o First we have a single expression n (most often a variable), that is evaluated
 The Break Statement
once.
 You have already seen the break statement used in an earlier chapter of this
o The value of the expression is then compared with the values for each case in
tutorial. It was used to "jump out" of a switch() statement.
the structure.
 The break statement can also be used to jump out of a loop.

Prepared By – APKubavat Networking & Internet Environment 13 Prepared By – APKubavat Networking & Internet Environment 14 Prepared By – APKubavat Networking & Internet Environment 15
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)

Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College

 The break statement breaks the loop and continues executing the code after ⯌ CONFORM BOX
the loop (if any): 1 Word Question – Answer  A confirm box is often used if you want the user to verify or accept
Example SR.NO. QUESTION ANSWER something.
for (var i = 0; i < 10; i++) { 1 How many jumping statements available in c? 3(Break ,Continue,Goto)  When a confirm box pops up, the user will have to click either "OK" or
if (i == 3) {break;} 2 statement is used to terminate from Break
"Cancel" to proceed.
the loop.
text += "The number is " + i + "<br>"; 3 statement is used to pass control to Continue  If the user clicks "OK", the box returns true. If the user clicks "Cancel", the
} the next iteration. box returns false.
4 statement is used to jump from one Goto
 Since the if statement has only one single line of code, the braces can be point to another point.
Syntax:
omitted: confirm(“sometext”)
for (var i = 0; i < 10; i++) { Q.6. EXPLAIN DIALOG BOXES IN JAVASCRIPT (5 MARKS)(MIMP)
if (i == 3) break; i) In JavaScript we can create three kinds of popup boxes: Alert box, Confirm box, and
text += "The number is " + i + "<br>"; Prompt box. Example:
<script type="text/javascript">
} ⯌ Alert Box a = confirm('press ok button');
 An alert box is often used if you want to make sure information comes if (a==true)
alert('you press ok button');
CONTINUE STATEMENT through to the user. else
 When an alert box pops up, the user will have to click "OK" to proceed. alert('you press cancel button');
 The continue statement breaks one iteration (in the loop), if a specified </script>

condition occurs, and continues with the next iteration in the loop. Syntax:
alert("sometext");
 This example skips the value of 3:
⯌ PROMPT BOX
 A prompt box is often used if you want the user to input a value before
Example
Example: entering a page.
for (var i = 0; i <= 10; i++) {
<html>
<body>  When a prompt box pops up, the user will have to click either "OK" or
if (i == 3) continue;
<script type="text/javascript"> "Cancel" to proceed after entering an input value.
text += "The number is " + i + "<br>";
alert("Hello! I am an alert box!");
} </script>  If the user clicks "OK" the box returns the input value. If the user clicks
</body> "Cancel" the box returns null.
</html>

Syntax:
prompt (“sometext”, “default value”);

Prepared By – APKubavat Networking & Internet Environment 16 Prepared By – APKubavat Networking & Internet Environment 17 Prepared By – APKubavat Networking & Internet Environment 18
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)
Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College

 Looping refers to the ability of a block of code to repeat itself.


Where,
Example:  This repetition can be for a predefined number of times or it can go until certain
 Expression1 sets up a counter variable and assigns the initial value.
conditions are met.
<script type="text/javascript">  Condition specifies the final value for the loop to fire (i.e. the loop fires till
name=prompt("Please enter your name","tejas");  For instance, a block of code needs to be executed till the value of a variable becomes 20
condition evaluates to true).
document.write("Hello " + name + "! How are you today?"); (Conditional Looping), or a block of code needs to be repeated 7 times.
</script>  Expression2 specifies how the initial value in expression1 is incremented.
 For this purpose, JavaScript offers 2 types of loop structures:
1) For Loops - This loop iterate a specific number of times as specified. Example:
2) While Loops – This is Conditional Loops, which continue until a condition is met. <script language = "javascript">
for(n=10; n>=1; n--)
Q.7. EXPLAIN LOOPING STRUCTURE IN JAVA SCRIPT (3 OR 5 MARKS)(IMP) FOR LOOP: {
document.write(n);
Loop Means “ to execute block of code }
repeatedly”. </script>
Looping statements also called
“Iterative statements”.
WHILE LOOP:

WHILE LOOP

DO WHILE LOOP LOOP TYPES FOR LOOP

Syntax:
for (expression1; condition; expression2)
LOOP EXECUTION :- {
// Javascript commands…
}

Prepared By – APKubavat Networking & Internet Environment 19 Prepared By – APKubavat Networking & Internet Environment 20 Prepared By – APKubavat Networking & Internet Environment 21
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)

Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College

<Statements> <Statements>
} } While (<condition>; Q.8. EXPLAIN ARRAY IN JAVA SCRIPT (3 MARKS)(IMP)
Syntax: Give difference between While loop & For loop.
while (condition)
{
While Loop For Loop
Javascript code…
1)While loop is bit slower than for loop. 1)For loop is faster than while loop.
}
2) While loop is not suitable for simple 2)For loop is more suitable when there is
initialization. simple initialization.
3)Syntax : 3)Syntax :
 Where, the condition is a valid JavaScript expression that evaluates to a Boolean While (<condition> For(<Initialization>;<Condition>;
{ <Inc./Dec.>)
value. <Statements> {
 The JavaScript commands execute as long as the condition is true. } <Statements>
}

Example: Give difference between Break & Continue.


<script language ="javascript">
var n=1; While Loop For Loop
while (n<=10) 1)Break is used to terminate the block & get 1)Continue is used to get the control to the
{ the control out of the loop. next iteration of theloop.
document.write(n); 2) Break statement can be used in both switch 2)Continue statement can be only used with
n++; case & loop. looping statement.
} 3)Syntax : 3)Syntax :
</script> <break>; <continue>;

1 Word Question – Answer

SR.NO. QUESTION ANSWER


Give difference between While loop & Do .. While loop. 1 Looping statements are also known as Iterative
statements
While Loop Do..While Loop 2 Loop is known as Entry Control Loop. While
1)While loop is known as Entry Controlled 1)Do..While loop is known as Exit controlled 3 Loop is known as Exit control Loop. Do While
Loop. Loop.
4 In Do while Loop condition will be terminated with Semi Colon(;)
2) In While loop if condition become false then 2)n Do..While loop if the condition become
.
no any output will be given. true than atleast one loop will be execute &
5 Loop is known as faster loop in c. For
output will be display.
3)There is no terminating semicolon(;) at the 3)There is terminating semicolon(;) at the end
end of loop. of do..while loop.
4)Syntax : 4)Syntax :
While (<condition> do
{ {

Prepared By – APKubavat Networking & Internet Environment 22 Prepared By – APKubavat Networking & Internet Environment 23 Prepared By – APKubavat Networking & Internet Environment 24
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)

Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College

1 Word Question – Answer


 An array is a special variable, which can hold more than one value, at a time. SR.NO. QUESTION ANSWER
 If you have a list of items (a list of car names, for example), storing the cars in single 1 What is Array? Group of Elements having same
name and type.
variables could look like this:
2 Array is datatype. Derived
var car1="Saab"; 3 Array is used to represent Collection
var car2="Volvo"; 4 Types of array can be & Single/One dimension&
Multi/Two dimension
var car3="BMW";

 However, what if you want to loop through the cars and find a specific one? And what if Q.9. WRITE A NOTE ON USER DEFINED FUNCTION(UDF) (3 MARKS OR 5 MARKS)

you had not 3 cars, but 300?


 The best solution here is to use an array!
 An array can hold all your variable values under a single name. And you can access the
values by referring to the array name.
 Each element in the array has its own ID so that it can be easily accessed.  Functions offer the ability to group together JavaScript program code that performs a
 An array can be defined in three ways. specific task into a single unit that can be used repeatedly whenever required in a

The following code creates an Array object called myCars: JavaScript program.
1) var myCars=new Array(); // regular array  A user defined function first needs to be declared and coded.
myCars[0]="Saab";  Once this is done the function can be invoked by calling it using the name given to the

myCars[1]="Volvo"; function when it was declared.

myCars[2]="BMW";  Functions can accept information in the form of arguments and can return results.
2) var myCars=new Array("Saab","Volvo","BMW"); // condensed array  Appropriate syntax needs to be followed for declaring functions, invoking them,
3) var myCars=["Saab","Volvo","BMW"]; // literal array passing them values and accepting their return values.
Access an Array
 You can refer to a particular element in an array by referring to the name of Declaring Function:
the array and the index number.  Functions are declared and created using the function keyword. A function
 The index number starts at 0. contain the following:
 A name for the function.
EXAMPLE: document.write(myCars[0]);  A list of parameters (arguments) that will accept values passed to
the function when called.

Prepared By – APKubavat Networking & Internet Environment 25 Prepared By – APKubavat Networking & Internet Environment 26 Prepared By – APKubavat Networking & Internet Environment 27
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)
Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College

 A block of JavaScript code that defines what the function does. Passing Parameters: Q.10. BUILT IN FUNCTION IN JAVASCRIPT (2 , 3 OR 5 MARKS)
 Values can be passed to function parameters when a ‘parameterized’ function is STRING FUNCTION:
Syntax: called. Values are passed to the function by listing them in the parentheses
function <function name>(parameter1,parameter2,..)
{ following the function name.
// JavaScript code…
 Multiple values can be passed, separated by commas provided that the function
}
has been coded to accept multiple parameters.
The return Statement
 A <function name> is case sensitive, can include underscore (_), and has to start  The return statement is used to specify the value that is returned from the
with a letter. function.
 The list of parameters passed to the function appears in parentheses and  So, functions that are going to return a value must use the return statement.
commas separate members of the list.
Example:
function prod(a, b)
Place of Declaration: {
i) Functions can be declared anywhere within an HTML file. x=a*b;
return x;
ii) Preferably, functions are created within the <HEAD>…<HEAD> tags of the HTML }
file. Product=prod (2, 3);
Now variable product contains the 6;
iii) This ensures that all functions will be parsed before they are invoked or called.
iv) If the function is called before it is declared and parsed, it will lead to an error
condition. 1 Word Question – Answer
1) charAt()
SR.NO. QUESTION ANSWER
Example: 1 FULL FORM OF UDF USER DEFINE FUNCTION Syntax: <string>.charAt(num);
<html> 2 USE OF UDF CREATE OUR OWN FUNCTION
<head> 3 WHICH KEY WORD IS USED TO CREATE UDF? FUNCTION KEYWORD Purpose:
<script language=”javascript”>
function printnm()  This function returns the character located at position passed in to the
{
argument.
var user=”shri”;
document.write(“name is : ”);  This indexing is done from left to right starting with the 0 (zero) position.
document.write(user);
 If the num passed is not a valid index in the string, -1 is returned.
}</script>
</head>
<body onLoad=”printnm();”></body>
</html>

Prepared By – APKubavat Networking & Internet Environment 28 Prepared By – APKubavat Networking & Internet Environment 29 Prepared By – APKubavat Networking & Internet Environment 30
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)

Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College

o Here index in argument is optional if it is not defined that start form Purpose:
zero position. o This method is used to replace the string from main string with
Example:
new string.
<script language = "javascript">
var x = "This is a test, small test."; Example:
y = x.charAt(5); <script language="JavaScript"> Example:
document.write('character at 5th position is '+y); x = "Hello World!"; <script language="JavaScript1.2">
</script> document.write("index of l is from 5th position x = "This is main string to be replace"
Output: character at 5th position is i "+x.indexOf("l",5)+'<br>'); y = x.replace("string","text");
document.write("index of l is "+x.indexOf("l")); document.write("new string is "+y);
</script> </script>
2) concat() Output: index of l is from 5th position 9 index of l is 2 Output: new string is This is main text to be replace
Syntax: <string>.concat(string2);
4) lastIndexOf(): 6) Search:
Purpose:
Syntax: <string>.lastIndexOf(<string or char to search>, [index]); Syntax: <string>.search(<string to be search> or <regular expression>);
o This function is used to join more than one string with string1.
o In argument of this function user can give more than one string.
Purpose: Purpose:
o This method is used to find the position of specified string or char o This method is used to find the specified string position of main string.
Example: starting from specified index. o If string is match then it will return the position.
<script language = "javascript">
var x = "hi"; o This method starts to find string from ending position (right to left). o If string is not match then it will return -1.
var y = "hw r u?";
var z = x.concat(y); Example:
document.write('final string is '+z); <script language="JavaScript"> Example:
</script> x = "Hello World!"; <script language="JavaScript1.2">
Output: final string is hi hw r u? document.write("index of l is from 5th position x = "This is main string to be replace"
"+x.lastIndexOf("l",5)+'<br>'); y = x.search("string");
document.write("index of l is "+x.lastIndexOf("l")); document.write("the position is "+y);
</script> </script>
3) indexOf():
Output: index of l is from 5th position 3 index of l is 9 Output: the position is 13

Syntax: <string>.indexOf(<string or char to search>, [index]);


5) Replace: 7) substr():
Purpose:
Syntax: <string>.replace(<string to replace> or [regular exp], <new string>); Syntax: <string>.substr([num1], [num2]);
o This method is used to find the position of specified string or char
starting from specified index.
o This method starts to find string from starting position (left to right).

Prepared By – APKubavat Networking & Internet Environment 31 Prepared By – APKubavat Networking & Internet Environment 32 Prepared By – APKubavat Networking & Internet Environment 33
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)

Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College

Purpose:
o This method returns the string from position specified in num1 with no
of character specified with num2.
Example: Example:
o If num1 is not specified then it starts to count character from 0. <script language="JavaScript1.1"> <script language="JavaScript1.1">
o If num1 is negative then num2 is optional and it starts to count from x = "This is a test"; x = "THIS IS A TEST";
y = x.substring(5,10); y = x.tolowerCase();
last character of string. document.write('the substring from position 5 to 10 is: '+y); document.write(y);
</script> </script>

Example: Output: the substring from position 5 to 10 is: is a


<script language="JavaScript1.1">
MATHS
x = "This is a test";
y = x.substr(5,10);
document.write('the substring from position 5 to 10 is: 9) toUpperCase():
FOR 1 MARKS
'+y);
</script> Syntax: <string>.toUpperCase();
Output: the substring from position 5 to 10 is: is a test
Purpose:
This method returns all the characters of string in to uppercase.
8) substring():

Syntax: <string>.substring([num1], [num2]); Example:


<script language="JavaScript1.1">
Purpose: x = "This is a test";
y = x.toUpperCase();
o The substring() method returns the characters starting with the indexed document.write(y);
position num1 and ending with the character before num2. </script>
Output: THIS IS A TEST
o The string's first character is in position 0.
o If you pass num1 as a negative number, it will be treated as 0.
10) toLowerCase():
o If you pass num2 as a value greater than the string.length property, it will
be treated as string.length. Syntax: <string>.toLowerCase();
o If num1 equals num2, an empty string is returned.
Purpose:
o It is also possible to pass a single index location to the method.
This method returns the all characters of string in lower case.

Prepared By – APKubavat Networking & Internet Environment 34 Prepared By – APKubavat Networking & Internet Environment 35 Prepared By – APKubavat Networking & Internet Environment 36
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)
Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College

1) abs() 3) floor():
Example:
Syntax: Math.abs(num) Syntax: Math.floor(num) <script language="JavaScript">
x= Math.random();
Purpose: document.write(x);
Purpose:
</script>
o The abs() method is used to calculate the absolute value of num. o Get the largest integer number, which is equivalent to or less than Output: 0.45678993
the number passed as the parameter.
Example: 6) round():
<script language="JavaScript1.1"> Example:
x = Math.abs(-10); <script language="JavaScript"> Syntax: Math.round(num)
document.write(x); x= Math.floor(2.9);
</script> document.write(x);
Output: 10 Purpose:
</script>
Output: 2 o The round() method rounds a number to its nearest integer value.

4) pow(): o If the fractional portion of the number is .5 or greater, the result is rounded
Note: for all math function user have to user Math object before all
to the next highest integer.
function. Syntax: Math.pow(num1, num2)
o If the fractional portion of number is less than .5, the result is rounded to the

2) Ceil(): Purpose: next lowest integer.

o The pow() method of the Math object is used to calculate an


Syntax: Math.ceil(num)
exponent power. Example:
<script language="JavaScript">
Purpose: x= Math.round(3.4);
Example: document.write(x);
o The ceil() method calculates the smallest integer that is greater
<script language="JavaScript"> </script>
than or equal to the number passed in as a parameter. x= Math.pow(2, 3); Output: 3
document.write(x);
</script>
Example: Output: 8 7) max():
<script language="JavaScript">
x= Math.ceil(2.1); Syntax: Math.max(num1, num2, num3…numn)
document.write(x); 5) random():
</script>
Purpose:
Output: 3 Syntax: Math.random()
o The max() method of the Math object gets the given number of the two

Purpose: parameters passed to it.

o The random() method of the Math object is used to obtain a o The larger value is returned as the result.

random number between values 0 and 1.

Prepared By – APKubavat Networking & Internet Environment 37 Prepared By – APKubavat Networking & Internet Environment 38 Prepared By – APKubavat Networking & Internet Environment 39
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)

Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College

2) getDate():
DATE
Example: FOR 1 MARKS Syntax: <date object>.getDate();
<script language="JavaScript">
x= Math.max(3,4,1,2); Purpose:
document.write(x);
</script> o The getDate() method returns the day of the month expressed as an integer from
1 to 31.
8) min():
o To access this function user must have to create date object.
Syntax: Math.min(num1, num2…numn)
o Date object is created as follows.
o x = new Date (); here we create date object named x.
Purpose:
o The min() method of the Math object gets the minimum number of
Example:
the given parameters passed to it. <script language="JavaScript">
x= new Date();
o The larger value is returned as the result.
document.write(x.getDate());
</script>
Example: Output: 30
<script language="JavaScript">
x= Math.min(3,4,1,2);
document.write(x); 3) getDay():
</script>
Output: 1 Syntax: <date object>.getDay();

1) Date()
Purpose:
Syntax: <variable name> = new Date() o This method returns the current day of the week in integer form from 0 to
6
Purpose:
o Sunday is starting from 0 and onwards.
It is used to get the current system date and time.

Example:
Example: <script language="JavaScript">
<script language="JavaScript"> x= new Date();
x= new Date(); document.write(x.getDay());
document.write(x); </script>
</script> Output: 6
Output: Tue Apr 12 2011 09:04:37 GMT+0530 (India Standard Time)

Prepared By – APKubavat Networking & Internet Environment 40 Prepared By – APKubavat Networking & Internet Environment 41 Prepared By – APKubavat Networking & Internet Environment 42
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)

Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College

6) getFullYear(): Purpose:
4) getMonth(): Syntax: <date object>.getFullyear(); Thi s method returns the current minute of the date expressed as an integer
from 0 to 59.
Syntax: <date object>.getMonth();
Purpose:
Purpose: This method returns the year portion of the date with four digit Example:
<script language="JavaScript">
o The getMonth() method returns the month portion of the Date object number.
x= new Date();
expressed as an integer from 0 (January) to 11 (December). document.write(x.getMinutes());
</script>
Example:
Output: 19
Example: <script language="JavaScript">
<script language="JavaScript"> x= new Date();
x= new Date(); document.write(x.getFullYear());
document.write(x.getMonth()); </script>
9) getSeconds():
</script> Output: 20 11
Output: 3 Syntax: <date object>.getSeconds();

5) getYear(): 7) getHours(): Purpose:


o The getSeconds() method returns the seconds portion of the Date
Syntax: <date object>.getYear(); Syntax: <date object>.getHours();
object expressed as an integer from 0 to 59.
Purpose: Purpose:
o The getYear() method returns the year portion of the Date object. o The getHours() method returns the hour portion of the date expressed as Example:
<script language="JavaScript">
o The year is represented as either a two-digit number or a four-digit number, an integer from 0 (12:00 a.m. midnight) to 23 (11:00 p.m.). x= new Date();
depending on the browser version. document.write(x.getSeconds());
Example: </script>
<script language="JavaScript"> Output: 29
Example: x= new Date();
<script language="JavaScript"> document.write(x.getHours());
x= new Date(); 10) getMiliSeconds():
</script>
document.write(x.getYear()); Output: 6
</script> Syntax: <date object>.getMilliSeconds();
Output: 11
8) getMinutes(): Purpose:
o The getMilliseconds() method returns the millisecond portion of the date
Syntax: <date object>.getMinutes();
expressed as an integer from 0 to 999.

Prepared By – APKubavat Networking & Internet Environment 43 Prepared By – APKubavat Networking & Internet Environment 44 Prepared By – APKubavat Networking & Internet Environment 45
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)
Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College

Example:
<script language="JavaScript"> Example: Example:
x= new Date(); <script language="JavaScript"> <script language="JavaScript">
document.write(x.getMilliSeconds()); x= new Date(); x= new Date();
</script> document.write(x.setMonth(6)); document.write(x.setFullYear(1987));
Output: 299 </script> </script>
Output: 1309618547995 Output: 546793593059

11) setDate():
13) setYear(): 15) setHours():
Syntax: <date object>.setDate(Day);
Syntax: <date object>.setYear(Year); Syntax: <date object>.setHours(Hours);
Purpose:
Purpose: Purpose:
o The setDate() method sets the day of the month in the Date object to the argument
o The setYear() method sets the year in the Date object to the argument year. o The setHours() method sets the hour in the Date object to the argument
day, an integer from 1 to 31.
The argument can be either a four-digit or two-digit integer. hours, an integer from 0 (12:00 a.m. midnight) to 23 (11:00 p.m.).
o The method returns an integer representing the number of milliseconds between
o The method returns an integer representing the number of milliseconds o The method returns an integer representing the number of milliseconds
midnight January 1, 1970 (GMT) to the date and time specified in the Date object
between midnight January 1, 1970 (GMT) to the new date. between midnight January 1, 1970 (GMT) to the new date.
after the day of the month has been adjusted.

Example:
Example: <script language="JavaScript"> Example:
<script language="JavaScript"> x= new Date(); <script language = "javascript">
x= new Date(); document.write(x.setYear(1987)); x = new Date();
document.write(x.setDate(17)); </script> x.setHours(4);
</script> Output: 546793593059 document.write(x);
Output: 1303051102710 </script>
Output: Sat Apr 30 2011 04:50:07 GMT+0530 (India Standard Time)
14) setFullYear():
12) setMonth():
Syntax: <date object>.setFullYear(year);
Syntax: <date object>.setMonth(month);
16) setMinutes():
Purpose:
Purpose: Syntax: <date object>.setMinutes(minutes);
o The setFullYear() method sets the year in the Date object to the argument
o The setMonth() method sets the month in the Date object.
year, a four-digit integer. Purpose:
o The argument month is an integer from 0 (January) to 11 (December).
o The method returns an integer representing the number of milliseconds o The setMinutes() method sets the minutes in the Date object to the
o The method returns an integer representing the number of milliseconds
between midnight January 1, 1970 (GMT) to the new date after setting. argument minutes, an integer from 0 to 59.
between midnight January 1, 1970 (GMT) to the new date.

Prepared By – APKubavat Networking & Internet Environment 46 Prepared By – APKubavat Networking & Internet Environment 47 Prepared By – APKubavat Networking & Internet Environment 48
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)

Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College

o The method returns an integer representing the number of milliseconds 3) pop():


ARRAY
between midnight January 1, 1970 (GMT) to the new date. Syntax: <array object>.pop();
1) join()

Example: Syntax: <array object>.join(string); Purpose:


<script language = "javascript"> Purpose:
x = new Date(); o The pop () method deletes the last element of the array and sets the array's
o The join () method converts all the elements to strings and then concatenates
x.setMinutes(4); length property to one less than its current value.
document.write(x); all the strings into a longer string.
</script> o This last element is returned from the method.
o If an argument is provided in the parameter list, it is used to separate the
Output: Sat Apr 30 2011 04:58:07 GMT+0530 (India Standard Time)
elements in the string returned by the method. Example:
<script language = "javascript">
17) setSeconds(): Example: x = new Array("a","b","c");
<script language = "javascript"> y = x.pop();
Syntax: <date object>.setSeconds(seconds);
fruit = new Array("A","B","C"); document.write(y," was removed from the pile.");
aString = fruit.join("-"); </script>
document.write("The fruit array contains: ",aString);
Purpose: Output: c was removed from the pile.
</script>
o The setSeconds() method sets the seconds in the Date object to the Output: The fruit array contains: A-B-C
argument seconds, an integer from 0 to 59. 4) push()
2) reverse()
o The method returns an integer representing the number of milliseconds Syntax: <array object>.push(arg1, arg2…argn);
between midnight January 1, 1970 (GMT) to the new date. Syntax: <array object>.reverse();

Purpose:
Example: Purpose:
o The push () method "pushes" the elements to the end of the array in the
<script language = "javascript"> o The reverse () method reverses the order of the elements in the array
x = new Date(); order they were listed.
x.setSeconds(30); according to the array index numbers.
o arg1,...argN are elements to be pushed to the end of the array
document.write(x);
</script> o It returns the last element added to the end of the array, which is also the
Output: Sat Apr 30 2011 04:58:30 GMT+0530 (India Standard Time) Example:
last argument in the parameter list.
<script language = "javascript">
x = new Array ("A","B","C");
x.reverse(); Example:
document.write("x[0]=",x[0],"<br>"); <script language = "javascript">
document.write("x[1]=",x[1],"<br>"); x = new Array("A","B");
document.write("x[2]=",x[2],"<br>"); y = x.push("C","D");
</script> document.write(x[2],"<BR>");
Output: document.write(x[3]);
x [0]=C </script>
x [1]=B Output: C D
x [2]=A

Prepared By – APKubavat Networking & Internet Environment 49 Prepared By – APKubavat Networking & Internet Environment 50 Prepared By – APKubavat Networking & Internet Environment 51
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)

Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College

5) shift() OR

Syntax: <array object>.shift (); Function x (a, b) // this is for descending order
{
Purpose: return b - a;
o The shift () method deletes and returns the first element of the array. }
o Once deleted, all the remaining elements are shifted down one spot.
o The first position is filled by the element that was previously in the second Example:
position. <script type="text/javascript">
function x(a,b)
{
Example:
return a - b;
<script language = "javascript">
}
x = new Array("A","B","C");
var n = ["10", "5", "40", "25", "100", "1"];
document.write("before shift: ",x[0],"<br>");
document.write(n.sort(x));
y = x.shift();
</script>
document.write("after shif: ",x[0],"<br>");
Output: 1, 5, 10, 25, 40, 100
</script>
Output: before shift: A after shift: B

6) sort():

Syntax: <array object>.sort([sort function]);

Purpose:
o The sort () method rearranges the elements of the array based on a sorting
order.
o If the method has no parameters, JavaScript attempts to convert all the
elements of the array to strings and then sort them alphabetically.
o If array contains numeric value then following function is needed for sorting
an array.
Function x (a, b) // this is for ascending order
{
return a - b;
}

Prepared By – APKubavat Networking & Internet Environment 52 Prepared By – APKubavat Networking & Internet Environment 53 Prepared By – APKubavat Networking & Internet Environment 54
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)
Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College

Q.11. EXPLAIN EVENTS IN JAVA SCRIPT (5 MARKS)(IMP)(2 OR 3 MARKS EACH)


1. onblur Event : When a user leaves an input field
FOR 1 MARKS
HOW EVENTS WORKS <!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</head>
<body>
Enter your name: <input type="text" id="fname" onblur="myFunction()">
<p>When you leave the input field, a function is triggered which
transforms the input text to upper case.</p>
</body>
</html>
Note : When you leave the input field, a function is triggered which transforms the input text
to upper case.

2. onblur Event : When a user changes the content of an input field


<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();

Prepared By – APKubavat Networking & Internet Environment 55 Prepared By – APKubavat Networking & Internet Environment 56 Prepared By – APKubavat Networking & Internet Environment 57
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)

Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College

} <select id="browsers" onchange="preferedBrowser()"> <html>


</script> <option value="Chrome">Chrome</option> <head>
</head> <option value="Internet Explorer">Internet <script>
<body> Explorer</option> function confirmInput() {
Enter your name: <input type="text" id="fname" <option value="Firefox">Firefox</option> fname = document.forms[0].fname.value;
onblur="myFunction()"> </select> alert("Hello " + fname + "! You will now be redirected to
<p>When you leave the input field, a function is triggered which </form> www.w3Schools.com");
transforms the input text to upper case.</p> </body> }
</html> </script>
</body> </head>
</html> 4. onfocus Event : When an input text field gets focus <body>
When you leave the input field, a function is triggered which transforms the input text to upper <!DOCTYPE html> <form onsubmit="confirmInput()"
case. <html> action="http://www.w3schools.com/">
<head> Enter your name: <input id="fname" type="text" size="20">
3. onchange Event : When a user selects a dropdown value <script> <input type="submit">
<!DOCTYPE html> function myFunction(x) { </form>
<html> x.style.background = "yellow"; </body>
<head> } </html>
<script> </script>
function preferedBrowser() { </head> 6. onreset Event : When a user clicks the reset button
prefer = document.forms[0].browsers.value; <body> <!DOCTYPE html>
alert("You prefer browsing internet with " + Enter your name: <input type="text" onfocus="myFunction(this)"> <html>
prefer); <p>When the input field gets focus, a function is triggered which changes <head>
} the background-color.</p> <script>
</script> </body> function message() {
</head> </html> alert("This alert box was triggered by the onreset event
<body> handler");
<form> 5. onsubmit Event : When a user clicks the submit button }
Choose which browser you prefer: <!DOCTYPE html> </script>

Prepared By – APKubavat Networking & Internet Environment 58 Prepared By – APKubavat Networking & Internet Environment 59 Prepared By – APKubavat Networking & Internet Environment 60
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)

Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College

</head> <html> </head>


<body> <head> <body>
<form onreset="message()"> <script> <p>Click the button to trigger a function.</p>
Enter your name: <input type="text" size="20"> function myFunction() { <button onclick="myFunction()">Click me</button>
<input type="reset"> var x = document.getElementById("fname"); <p id="demo"></p>
</form> x.value = x.value.toUpperCase(); </body>
</body> } </html>
</html> </script>
</head> 10. ondblclick Event : When a text is double clicked
7. onkeypress Event : When a user is pressing / holding down a key <body> <!DOCTYPE html>
<!DOCTYPE html> <p>A function is triggered when the user releases a key in the input field. <html>
<html> The function transforms the character to upper case.</p> <head>
<head> Enter your name: <input type="text" id="fname" <script>
<script> onkeyup="myFunction()"> function myFunction() {
function myFunction() { </body> document.getElementById("demo").innerHTML = "Hello
alert("You pressed a key inside the input field"); </html> World";
} Note : A function is triggered when the user releases a key in the input field. The function }
</script> transforms the character to upper case. </script>
</head> </head>
<body> 9. onclick Event : When button is clicked <body>
<p>A function is triggered when the user is pressing a key in the input <!DOCTYPE html> <p ondblclick="myFunction()">Doubleclick this paragraph to trigger a
field.</p> <html> function.</p>
<input type="text" onkeypress="myFunction()"> <head> <p id="demo"></p>
</body> <script> </body>
</html> function myFunction() { </html>
Note : A function is triggered when the user is pressing a key in the input field. document.getElementById("demo").innerHTML = "Hello
World";
8. onkeyup Event : When the user releases the key }
<!DOCTYPE html> </script>

Prepared By – APKubavat Networking & Internet Environment 61 Prepared By – APKubavat Networking & Internet Environment 62 Prepared By – APKubavat Networking & Internet Environment 63
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)
Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College

11. onload Event : When the page has been loaded </html>
 Form object: Everything enclosed in the <form>...</form> tags sets the form
<!DOCTYPE html>
object.
<html> Q.12 EXPLAIN DOCUMENT OBJECT (2 OR 3 MARKS)(IMP)
 Form control elements: The form object contains all the elements defined for that
<head>
object such as text fields, buttons, radio buttons, and checkboxes.
<script>
 Here is a simple hierarchy of few important objects:
function myFunction() {
alert("Page is loaded");
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
</body>
</html>

12. onunload Event : When the browser closes the document


<!DOCTYPE html>
Every web page resides inside a browser window which can be considered as an object.
<html>
<head> 1 Word Question – Answer
 A Document object represents the HTML document that is displayed in that window. The
<script> Document object has various properties that refer to other objects which allow access to and SR.NO. QUESTION ANSWER
function myFunction() { modification of document content. 1 FULL FORM OF DOM DOCUMENT OBJECT MODEL
alert("Thank you for visiting W3Schools!"); 2 LIST OUT ALL OBJECTS OF DOM OBJECT 1. WINDOW
 The way that document content is accessed and modified is called the Document Object 2. DOCUMENT
} 3. FORM
Model, or DOM. The Objects are organized in a hierarchy. This hierarchical structure applies
</script> 4. FORM CONTROL
to the organization of objects in a Web document.
3 WHAT IS THE USE OF DOM OBJECT? A DOCUMENT OBJECT
</head>
 Window object: Top of the hierarchy. It is the outmost element of the object REPRESENTS THE HTML
<body onunload="myFunction()"> DOCUMENT THAT IS DISPLAYED
hierarchy. IN THAT WINDOW
<h1>Welcome to my Home Page</h1>
 Document object: Each HTML document that gets loaded into a window becomes
<p>Close this window or press F5 to reload the page.</p>
a document object. The document contains the content of the page.
</body>

Prepared By – APKubavat Networking & Internet Environment 64 Prepared By – APKubavat Networking & Internet Environment 65 Prepared By – APKubavat Networking & Internet Environment 66
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)

Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College

Q.13 EXPLAIN HISTORY OBJECT(3 MARKS)(MIMP)  Property of History Object:  The back() method of the history object takes the user to the previous page. The
1. length: functionality results in the same as pressing the back button of the browser.
HOW HISTORY OBJECT WORKS
 The length property of the history object returns the number of elements in the  General syntax of back method of history Object:
history list. o history.back()
 General syntax of length property of history Object:
 history.length 2. forward():
 An example to understand the length property of history object:  The forward() method of the history object loads the next URL in the History list. The
2. current: functionality results are the same as pressing the forward button of the browser.
 This property contains the complete URL of the current History entry.  General syntax of forward method of history Object:
 General syntax of current property of history Object: o history.forward()
o history.current
3. next: 3. go():
 The next property of history object contains the complete URL of the next element in  If the programmer wishes to load a specified URL from the History list, then the go
the History list. This functionality or the URL visited is the same as pressing the method of history object can be used.
forward button or menu.  General syntax of go method of history Object:
 General syntax of next property of history Object: o history.go(number)
o history.next o or

 The history property has the return value as history object, which is an array of history 4. previous: o history.go(URL)

items having details of the URL’s visited from within that window. Also, note that the  The previous property of history object contains the complete URL of the previous  The back method seen above is the same as history.go(-1) in terms of go method of

History object is a JavaScript object and not an HTML DOM object. element in the History list. This functionality or the URL visited is the same as history object. The forward method seen above is the same as history.go(1)

 General syntax of history property of window object: pressing the back button or menu.
1 MARKS Question – Answer
 window.history  General syntax of previous property of history Object:
o history.previous SR.NO. QUESTION ANSWER
 The JavaScript runtime engine automatically creates this object.
1 WHAT IS HISTORY OBJECT? HISTORY OBJECT USED TO
 An introduction on the history object and the properties and methods associated with it WORK WITH BROWSER HISTORY
was covered in an earlier section.  Methods of History Object: 2 LIST OUT PROPERTY OF HISTORY OBJECT 1. LENGTH
2. CURRENT
1. back():
3. NEXT
 There may be scenarios where the programmer wishes to load the previous URL present 4. PREVIOUS
3 LIST OUT METHODS OF HISTORY OBJECT 1. BACK
in the history list. In this case, the programmer can make use of the back() method of
2. FORWARD
the history object. 3. GO

Prepared By – APKubavat Networking & Internet Environment 67 Prepared By – APKubavat Networking & Internet Environment 68 Prepared By – APKubavat Networking & Internet Environment 69
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)

Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College

Q.14 EXPLAIN NAVIGATOR OBJECT.(2 OR 3 MARKS)(IMP)  Character . ( period, dot or fullstop) provided that it is not the first or last character
6. }
 The Navigator object of JavaScript returns useful information about the visitor's and it will not come one after the other.
7. alert("You have entered an invalid email address!")
browser and system.  The domain name [for example com, org, net, in, us, info] part contains letters,
8. return (false)
Properties digits, hyphens and dots.
9. }
 Example of valid email id
Properties Description
appCodeName The code name of the browser.  [email protected]  To get a valid email id we use a regular expression /^\w+([\.-]?\w+)*@\w+([\.-
appName The name of the browser (ie: Microsoft Internet Explorer). ]?\w+)*(\.\w{2,3})+$/.
[email protected]
appVersion Version information for the browser (ie: 5.0 (Windows)).
cookieEnabled Boolean that indicates whether the browser has cookies enabled.  [email protected]
 Flowchart
language Returns the default language of the browser version (ie: en-US). NS and Firefox
 Example of invalid email id
only.
mimeTypes[] An array of all MIME types supported by the client. NS and Firefox only.  mysite.ourearth.com [@ is not present]
platform[] The platform of the client's computer (ie: Win32).  [email protected] [ tld (Top Level domain) can not start with dot "." ]
Plugins An array of all plug-ins currently installed on the client. NS and Firefox only.
systemLanguage Returns the default language of the operating system (ie: en-us). IE only.  @you.me.net [ No character before @ ]
userLanguage Returns the preferred language setting of the user (ie: en-ca). IE only.  [email protected] [ ".b" is not a valid tld ]

[email protected] [ tld can not start with dot "." ]


Q.15 EXPLAIN EMAIL VALIDATION & FORM VALIDATION (5 MARKS WITH EXAMPLE OR 3 MARKS)
[email protected] [ an email should not be start with "." ]
EMAIL VALIDATION
 Validating email is a very important point while validating an HTML form. In this page we  mysite()*@gmail.com [ here the regular expression only allows character, digit,
have discussed how to validate an email using JavaScript : underscore and dash ]
 An email is a string (subset of ASCII characters) separated into two parts by @ symbol. a
[email protected] [double dots are not allowed]
"personal_info" and a domain, that is personal_info@domain. The length of the
personal_info part may be up to 64 characters long and domain name may be up to 253  JavaScript code to validate an email id

characters.
1. function ValidateEmail(mail)
 The personal_info part contains the following ASCII characters.
2. {
 Uppercase (A-Z) and lowercase (a-z) English letters.
3. if (/^\w+([\.-]?\w+)*@\w+([\.-
 Digits (0-9).
]?\w+)*(\.\w{2,3})+$/.test(myForm.emailAddr.value))
 Characters ! # $ % & ' * + - / = ? ^ _ ` { | } ~
4. {
5. return (true)

Prepared By – APKubavat Networking & Internet Environment 70 Prepared By – APKubavat Networking & Internet Environment 71 Prepared By – APKubavat Networking & Internet Environment 72
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)
Shri MatruMandir B.S.W. College Shri MatruMandir B.S.W. College

FORM VALIDATION  JavaScript Number Validation


 Let's validate the textfield for numeric value only. Here, we are using isNaN() function.
<script>
 It is important to validate the form submitted by the user because it can have inappropriate function validate()
values. So validation is must. {
var num=document.myform.num.value;
 The JavaScript provides you the facility the validate the form on the client side so processing will if (isNaN(num))
be fast than server-side validation. So, most of the web developers prefer JavaScript form {
document.getElementById("numloc").innerHTML="Enter Numeri
validation. c value only";
 Through JavaScript, we can validate name, password, email, date, mobile number etc fields. return false;
}else
 In this example, we are going to validate the name and password. The name can’t be empty and {
password can’t be less than 6 characters long. return true;
} }
 Here, we are validating the form on form submit. The user will not be forwarded to the next </script>
page until given values are correct. <form name="myform" onsubmit="return validate()" >
Number: <input type="text" name="num"><span id="numloc"></span><br/>
<input type="submit" value="submit">
<script> </form>
function validateform()
{  JavaScript Retype Password Validation
var name=document.myform.name.value; <script type="text/javascript">
var password=document.myform.password.value; function matchpass()
if (name==null || name=="") {
{ var firstpassword=document.f1.password.value;
alert("Name can't be blank"); var secondpassword=document.f1.password2.value;
return false; if(firstpassword==secondpassword)
}else if(password.length<6) {
{ return true;
alert("Password must be at least 6 characters long."); }
return false; Else
} {
} alert("password must be same!");
</script> return false;
<body> }
<form name="myform" method="post" action="abc.jsp" onsubmit="return valid }
ateform()" > </script>
Name: <input type="text" name="name"><br/> <form name="f1" action="register.jsp" onsubmit="return matchpass()">
Password: <input type="password" name="password"><br/> Password:<input type="password" name="password" /><br/>
<input type="submit" value="register"> Re-enter Password:<input type="password" name="password2"/><br/>
</form> <input type="submit">
</form>

Prepared By – APKubavat Networking & Internet Environment 73 Prepared By – APKubavat Networking & Internet Environment 74
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)

You might also like