MANUAL
MANUAL
Institute,………………………………………………………………………………………………………………
Client Side Scripting languages (22519) for the academic year .................... to
Seal of Institution
Program Outcomes (POs) to be achieved through Practical of this Course:-
PO 1.Basic knowledge: Apply knowledge of basic mathematics, sciences and basic engineering
to solve the broad-based Computer engineering problem.
PO 3.Experiments and practice: Plan to perform experiments and practices to use the results to
solve broad-based Computer engineering problems.
PO 4.Engineering tools: Apply relevant Computer technologies and tools with an understanding
of the limitations.
PO 5.The engineer and society: Assess societal, health, safety, legal and cultural issues and the
consequent responsibilities relevant to practice in field of Computer engineering.
PO 7. Ethics: Apply ethical principles for commitment to professional ethics, responsibilities and
norms of the practice also in the field of Computer engineering.
PO 8.Individual and team work: Function effectively as a leader and team member in diverse/
multidisciplinary teams.
PO 10.Life-long learning: Engage in independent and life-long learning activities in the context
of technological changes in the Computer engineering field and allied industry.
Content Page
Total
Practical No 1: Write simple JavaScript with HTML for arithmetic expression
evaluation and message printing.
Practical Outcome(PrOs):
Write simple JavaScript with HTML for arithmetic expression evaluation and message printing.
o simple syntax
JavaScript How To
– The HTML <script> tag is used to insert a JavaScript into an HTML page
<script type=“text/javascript”>
</script>
line JavaScript can be inserted within the head, the body, or use external JavaScript file
<script type=“text/javascript”>
<!—
document.write(“Hello World!”)
// -->
</script>
Syntax :
1) var variable_name; eg. var a
2) var variable _name1,variable _name2,…..,variable_name N; eg, var a,b,c
3) var variable_name= value eg. var a=10
4) var variable_name1=value1,variable_name2=value2,……..,variable_nameN=value N;
eg .var a=10,b=20,c=30;
JavaScript Expressions
An expression is a combination of values, variables, and operators, which computes to a value. The
computation is called an evaluation. The values can be of various types, such as numbers and strings.
Operator is special symbol that indicates a certain action operation when used with one or two
operands.
Javascript supports following type of operators.
1.Arithmetic.
2.comparision operator
3.Logical Operator
4.Bitwise Operator
5.Assignment Operator
6.conditional Operator
Operator Description
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus (Remainder)
++ Increment
-- Decrement
1. Simple Java Script Program
<html>
<script language="JavaScript">
document. write("Hello World!");
alert("Hello World!");
</script>
</html>
<html>
<script language="JavaScript">
var ans = 0;
ans1=first_num/second_num;
document.write(ans);
document.write(ans1);
</script>
</html>
Exercise :
Practical Outcome(PrOs):
Develop JavaScript to use decision making and looping statements
document.write("Hello ");
Statements define what the script will do and how it will be done.Program is not limited
to linear sequence of instructions. During its process it may diverge,repeat code or take
decisions .For these purpose control statements specify what has to be done to perform
the program.
Control statements are designed to allow you to create scripts that can decide which lines
of code are evaluated, or how many times to evaluate them. There are two different
types of control statements: conditional statements and loop statements.
Conditional Statements:
1. The if Statement
Use the if statement to specify a block of JavaScript code to be executed if a condition is true.
Syntax
if (condition) {
// block of code to be executed if the condition is true
}
2. The If…. else Statement
Use the else statement to specify a block of code to be executed if the condition is false.
Syntax
if (condition) {
// block of code to be executed if the condition is true
}
else
{
// block of code to be executed if the condition is false
}
Use the else if statement to specify a new condition if the first condition is false.
Syntax
if (condition1) {
// block of code to be executed if condition1 is true
} else if (condition2) {
// block of code to be executed if the condition1 is false and condition2 is true
} else {
// block of code to be executed if the condition1 is false and condition2 is false
}
4. TheSwitch Statement
Use the switch statement to select one of many code blocks to be executed.
Syntax
switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}
JavaScript Loops
1. for loop
Loops are handy, if you want to run the same code over and over again, each time with a different value.
Syntax:-
for (initialization condition; testing condition; increment/decrement)
{
statement(s)
}
Or for objects
for (variableName in Object)
{
statement(s)
}
2. do while:
do while loop is similar to while loop with only difference that it checks for condition after executing the
statements, and therefore is an example of Exit Control Loop.
Syntax:
do
{
statements..
}while (condition);
3. While loop
A while loop is a control flow statement that allows code to be executed repeatedly based on a given
Boolean condition. The while loop can be thought of as a repeating if statement.
Syntax :
while (boolean condition)
{
loop statements...
}
Programs:
1.for loop
<script type = "text/javascript">
// JavaScript program to illustrate for loop
var x;
// for loop begins when x=2
// and runs till x <=4
for(x = 2; x <= 4; x++)
{
document.write("Value of x:"+ x + "<br />");
}
< /script>
2. for..in loop
// creating an Object
var languages = { first : "C", second :
"Java", third : "Python", fourth :
"PHP", fifth : "JavaScript"};
< /script>
3. do ..while loop
var x = 21;
do
{
// The line while be printer even
// if the condition is false
document.write("Value of x:"+ x + "<br />");
x++;
} while(x < 20);
< /script>
4. while loop
var x = 1;
< /script>
5. if…else
var i = 10;
< /script>
6. switch case
var i = 9;
switch(i)
{
case 0:
document.write("i is zero."); break;
case 1:
document.write("i is one.");
break;
case 2:
document.write("i is two.");
break;
default:
document.write("i is greater than 2.");
}
</script>
Practical Related Questions:
4.Write a javascript program which accepts N as input and print first N odd number in
tabular format
6 Write a JavaScript conditional statement to sort three numbers. Display an alert box to show the
result
Exercise:
1. Write a javascript for loop that will iterate from 1 to 15.For each iteration ,it will check if the current
number is odd or even and display a message to the screen
Sample output:
“1 is odd”
“2 is even”
………………..
………………..
3.Write a JavaScript conditional statement to find the largest of five numbers. Display an alert box to show
the results.
4.Write a JavaScript program that iterates integers from 1 to 100. But for multiples of three print "Fizz"
instead of the number and for multiples of five print "Buzz". For numbers multiples of both three and five
print "FizzBuzz".
6.Write a JavaScript program to construct the following pattern, using a nested for loop.
*
**
***
****
*****
Practical Outcome(PrOs):
Develop JavaScript to implements Array functionalities
What is an Array?
An array is a special variable, which can hold more than one value at a time.
Creating an Array
3 ways to construct array in JavaScript
1. By array literal
2. By creating instance of Array directly (using new keyword)
3. By using an Array constructor (using new keyword)
By array literal
<html>
<body>
<script>
var emp=["Sonoo","Vimal","Ratan"];
for (i=0;i<emp.length;i++)
{ document.write(emp[i] + "<br/>");
}
JavaScript Array directly (new keyword)
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br>");
}
</script>
</body>
</html>
find() It returns the value of the first element in the given array that satisfies the specified
condition.
findIndex() It returns the index value of the first element in the given array that satisfies the
specified condition.
indexOf() It searches the specified element in the given array and returns the index of the first
match.
lastIndexOf() It searches the specified element in the given array and returns the index of the last
match.
pop() It removes and returns the last element of an array.
push() It adds one or more elements to the end of an array.
reverse() It reverses the elements of given array.
shift() It removes and returns the first element of an array.
sort() It returns the element of the given array in a sorted order.
Questions:
Exercise:
1. Write JavaScript to create array named color and display the value of each element of the color array.
The color of the font matches the value.
2.Write a JavaScript that initializes an array called flowers with names of 3 flowers. The script then
displays array elements
3. Write a JavaScript that find and displays number of duplicate values in an array
4. Write JavaScript program that will display list of students in ascending order according to the marks
and calculate performance of the class.
Student Name Marks
Amit 70
Sumit 78
Abhishekh 71
5.Write a JavaScript to find maximum number in array.
6.Write JavaScript program to print even numbers from array.
7.Write java script program to find common items from two lists.
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
Marks Obtained Dated Signed of
teacher
Process Product Total(50)
Related(35) Related(15)
Practical No-4.Develop Javascript to implement functions
Practical Outcome(PrOs):
Develop Javascript to implement functions
Function
JavaScript functions are used to perform operations. We can call JavaScript function many times to
reuse the code.
<html>
<body>
<script>
functionmsg()
{
alert("hello! this is message");
}
</script>
<input type="button" onclick="msg()" value="call function"/>
</body>
</html>
Questions:
1.Write a javascript function that takes a number as a parameter and check the number is prime or not.
2.Write javascript function to check whether entered number is palindrome or not.
3.Write a javascript function to implement binary search.
4.Write a javavscript function to check number is Amrstrong or not.
5. Write a javascript function that accepts a string as a parameter and find the length of the string
6.Write a Javascript function to find factorial of N .The value of N will be input from user.
7. Write a JavaScript function that reverses a number
8. How to change the value of a global variable inside of a function using JavaScript ?
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
Practical Outcome(PrOs):
Develop javascript to implement Strings.
JavaScript String
The JavaScript string is an object that represents a sequence of characters.
There are 2 ways to create string in JavaScript
1. By string literal
2. By string object (using new keyword)
1) By string literal
The string literal is created using double quotes. The syntax of creating string using string literal is given
below:
var stringname="string value";
Example:
<!DOCTYPE html>
<html>
<body>
<script>
varstr="This is string literal";
document.write(str);
</script>
</body>
</html>
Example
<!DOCTYPE html>
<html>
<body>
<script>
varstr="javascript";
document.write(str.charAt(2));
var s1="javascript ";
var s2="concat example";
var s3=s1.concat(s2);
document.write(s3);
var s1="javascript from javatpoint indexof";
var n=s1.indexOf("from");
document.write(n);
var s1="javascript from javatpoint indexof";
var n=s1.lastIndexOf("java");
document.write(n);
var s1="JavaScript toLowerCase Example";
var s2=s1.toLowerCase();
document.write(s2);
var s1="JavaScript toUpperCase Example";
var s2=s1.toUpperCase();
document.write (s2);
</script>
</body>
</html>
Questions:
1. a. Create a String object containing “Jose lived in San Jose for many years.”
b. Find the index for the second Jose.
2.Write a JavaScript to convert a string to number.
3. What is string? Enlist some commonly used methods for manipulating string.
4.How to retrieve a position of desired word from string.
5. Develop JavaScript to convert the given character to Unicode and vice versa/ Which methods are used to
find the Unicode of character.
6.Write javascript to explain use of substr () and substring() in javascript.
Exercise:
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
Practical Outcome(PrOs):
Create web page using Form Elements.
Los Angeles
San Jose
San Francisco
Submit Clear
Text input
A text field:
<input type="text" name="textfield" value="with an initial value" id=”txt” />
Buttons
A submit button:send data
<input type="submit" name="Submit" value="Submit" />
A reset button:restore all form elements to their initial state
<input type="reset" name="Submit2" value="Reset" />
A plain button:take some action as specified by JavaScript
<input type="button" name="Submit3" value="Push Me" />
Radio buttons
Radio buttons:<br>
<input type="radio" name="radiobutton" value="myValue1" />male<br>
<input type="radio" name="radiobutton" value="myValue2” checked="checked" />female
If two or more radio buttons have the same name, the user can only select one of them at a time. This is
how you make a radio button “group”.
If you ask for the value of that name, you will get the value specified for the selected radio button
as with checkboxes, radio buttons do not contain any text.
Labels
A label tag will bind the text to the control
<label><input type="radio" name="gender" value="m" />male</label>
Checkboxes
A checkbox: <input type="checkbox" name="checkbox" value="checkbox" checked="checked">
type: "checkbox"
name: used to reference this form element from JavaScript
value: value to be returned when element is checked
Example
<html><body>
<form action="">
User name:<br>
<input type="text" name="userid"><br>
User password:<br>
<input type="password" name="psw"><br>
<input type="submit" value="Submit"><br>
<input type="reset"><br>
<input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="other">Other<br>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike
<input type="checkbox" name="vehicle2" value="Car"> I have a car <br>
</form>
</body></html>
Questions:
1.Write HTML script that will display dropdown list containing options such as Red, Green, Blue & Yellow.
2.Write a javascript program to design HTML page with books information in tabular format,
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
Practical Outcome(PrOs):
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.
Developers can use these events to execute JavaScript coded responses, which cause buttons to close
windows, messages to be displayed to users, data to be validated, and virtually any other type of
response imaginable.
HTML allows event handler attributes, with JavaScript code, to be added to HTML elements.
With single quotes:
<element event='some JavaScript'>
With double quotes:
<element event="some JavaScript">
Examples
Click Events:-
1. onclick Event
<html>
<head>
<script type = "text/javascript">
function sayHello()
{
alert("Hello World")
}
</script>
</head>
<body>
<form><input type = "button" onclick = "sayHello()" value = "Say Hello" />
</form>
</body>
</html>
2. ondblclick event
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</head>
<body>
<p ondblclick="myFunction()">
Double click this paragraph to trigger a function.</p>
<p id="demo"></p>
</body>
</html>
Mouse Events:-
<!DOCTYPE html>
<html>
<body>
<h1 onmouseover="style.color='red'" onmouseout="style.color='black'">Mouse over this text</h1>
</body>
</html>
<html>
<head>
<script>
function myFunction(elmnt, clr)
{ elmnt.style.color = clr;
}
</script>
</head>
<body>
<p onmousedown="myFunction(this,'red')" onmouseup="myFunction(this,'green')">
hi how r u?
</p>
</body>
</html>
Questions:
1. Write a HTML script which displays 2 radiobuttons to the users for first year CM and second
year CM and 1 option list. When user select first year radio button option list should present
only subject name of first year to the user & when user select second year radio button option
list should present only subject names of second year to the user
2. Write HTMl code to design a form that display textboxes for expecting two numbers,one
textbox for accepting result and two buttons as ADDITION and SUBTRACTION.Write proper
javascript such that when the user clicks on any one of the button,respective operation will be
performed on two numbers and result will be displayed in result textbox.
3. Write a JavaScript program that implements a "form" validation that displays an error message
if a required field is left empty when submitting the form.
4. Write JavaScript code to change size of image when mouse is move over the image and image is
get back to its original size when mouse is taken away from image.
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
Marks Obtained Dated Signed of
teacher
Process Product Total(50)
Related(35) Related(15)
Practical No-8: Create web page to implement Form Events. Part II
Relevant Course outcome:
Create event based web forms using javascript
Competency and practical Skill:
Develop general purpose programming using JavaScript to solve problems.
Practical expected to develop following skills:
Write simple JavaScript program to demonstrate the use of web forms and form events
Practical Outcome(PrOs):
Load Events:-
1.onload event
<html>
<head>
<script>
function myFunction() { alert("Page is loaded");
}
</script>
</head>
<body onload="myFunction()">
<h2>Hello World!</h2>
</body>
</html>
2.unload event
<html>
<head>
<script>
function myFunction()
{
alert("Thank you for visiting My page!");
}
</script>
</head>
<body onunload="myFunction()">
</body>
</html>
Key Events
1.onkeypress event
<html>
<head>
<script> function myFunction() {
alert("You pressed a key inside the input field");
}
</script>
</head>
<body>
<input type="text" onkeypress="myFunction()">
</body>
</html>
2. onkeyup event
<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" onkeyup="myFunction()">
</body>
</html>
3. onkeydown event
<html>
<head>
<script>
function myFunction() {
alert("You pressed a key inside the input field");
}
</script>
</head>
<body>
<input type="text" onkeydown="myFunction()">
</body>
</html>
Other Events
1.onchange event
<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" onchange="myFunction()">
</body>
</html>
2. onselect event
<html>
<head>
<script> function myFunction()
{
document.write("selected some text");
}
</script>
</head>
<body>
Some text: <input type="text" value="Hello world!" onselect="myFunction()">
</body>
</html>
3. onfocus event
<html>
<head>
<script> function myFunction(x)
{
x.style.background = "yellow";
}
</script>
</head>
<body>
Enter your name: <input type="text" onfocus="myFunction(this)">
</body>
</html>
4. onblur event
<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()">
</body>
</html>
5. onreset event
<html>
<head>
<script>
function message() {
alert("This alert box was triggered by the onreset event handler");
}
</script>
</head>
<body>
<form onreset="message()">
Enter your name: <input type="text" size="20">
<input type="reset">
</form>
</body>
</html>
6. onsubmit event
<html>
<head>
<script>
function confirmInput()
{
fname = document.forms[0].fname.value;
alert("Hello " + fname + "! You will now be redirected to My Page");
}
</script>
</head>
<body>
<form onsubmit="confirmInput()" action="https://google.com/">
Enter your name: <input id="fname" type="text" size="20">
<input type="submit">
</form>
</body>
</html>
Question:
1. Write an javascript code that takes a number from one text field in the range of 0 to 999 and shows it in
another text field in words. if the number is out of range, it should show “out of range” and if it is not a
number, it should show “not a number” message in the result box.
2. Write an javascript that has one input, which can take multi line text and a submit button. Once the user
clicks the submit button, it should show the number of characters, words and lines in the text entered using an
alert message. Words are separated with white space and lines are separated with new line character
3.Write an javascript code that contains a selection box with a list of 5 countries. When the user selects a
country, its capital should be printed next to the list. Add CSS to customize the properties of the font of the
capital (color, bold and font size).
4. Write HTML Script that displays dropdownlist containing options NewDelhi, Mumbai, Bangalore. Write
proper JavaScript such that when the user selects any options corresponding description of about 20 words
and image of the city appear in table whichappears below on the same page
5. Write a java script that displays textboxes for accepting name & email ID & a submit button. Write java script
code such that when the user clicks on submit button (1) Name Validation (2) Email ID Validation.
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
Marks Obtained Dated Signed of
teacher
Process Product Total(50)
Related(35) Related(15)
Practical No:-9 .Develop a webpage using intrinsic java functions
Intrinsic Functions
Intrinsic functions means the built in functions that are provided by JavaScript.
The JavaScript provides the intrinsic functions for Submit or Reset button. One can use
these functionalities while submitting the form or resetting the form fields.
The submit() method of the form object can be used to send the form to the server in
exactly same way as if the user has pressed the Submit button.
JavaScript Example
<!DOCTYPE html>
<html>
<body>
<form name=”myform”>
Roll Number:<input type=”text” name=”roll”/>
<br/> <br/>
Name :<input type=”text” name=”name”/>
<br/><br/>
<img src =”submit.gif” onlclik=”javascript:document.forms.myform.submit()”/>
<br/><br/>
</form>
</body>
</html>
Disabling Elements
Read-Only Elements
Sometimes we need to set some value to a field which user should not change.to restrict user
from changing the value of perticular field we make that element readonly by setting
readonly=true.
If the readonly attribute is set false ,then anyone ,including the user entering information into
the form ,can change the value of the elemet.
Following example illustrates the use of readonly element
JavaScript Example
<!DOCTYPE html>
<html>
<head>
<script type =”text/javascript”>
Function ReadOnlyFunction()
{ document.forms.myform.name.readOnly=true
}
</script>
</head>
<body>
<form name=”myform”>
Username: <input type=”text” name=”name”/>
<br/> <br/>
<input type=”button” value=”Read-only Name Field” onclick=” ReadOnlyFunction())”/>
</form>
</body>
</html>
Question:
1.What is intrinsic function. Write a javascript program to demonstrate java intrinsic function
2.Explain how to change attribute values dynamically?
3.How to disable particular element on the form?
4. Make a link that changes the background color to light blue when the mouse pointer is rolled over it.
5.What is the use of read-only element in JavaScript.
6.write difference between read only and disabled property?
1.Write HTML Script that displays textboxes for accepting Name, middlename, Surname of the user and a
Submit button. Write proper JavaScript such that when the user clicks on submit button all texboxes must get
disabled and change the color to “RED”. and with respective labels.Constructs the mailID as [email protected] and
displays mail ID as message. (Ex. If user enters Rajni as name and Pathak as surname mailID will be constructed
as [email protected])
2. Write javascript code to enter roll number and name. The registration id for the student can be formed by
taking first two characters of ‘ name’ followed by the roll number. Initially the registration id field is kept
hidden and at the time of submitting the form this value is assigned to registration field.
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
A cookie is a piece of data that is stored on your computer to be accessed by your browser. You also
might have enjoyed the benefits of cookies knowingly or unknowingly.Cookies are data, stored in small
text files, on your computer.
How It Works ?
Your server sends some data to the visitor's browser in the form of a cookie. The browser may accept
the cookie. If it does, it is stored as a plain text record on the visitor's hard drive. Now, when the visitor
arrives at another page on your site, the browser sends the same cookie to the server for retrieval.
Once retrieved, your server knows/remembers what was stored earlier.
Cookies are a plain text data record of 5 variable-length fields −
Expires − The date the cookie will expire. If this is blank, the cookie will expire when the visitor
quits the browser.
Domain − The domain name of your site.
Path − The path to the directory or web page that set the cookie. This may be blank if you want
to retrieve the cookie from any directory or page.
Secure − If this field contains the word "secure", then the cookie may only be retrieved with a
secure server. If this field is blank, no such restriction exists.
Name=Value − Cookies are set and retrieved in the form of key-value pairs
Create a Cookie with JavaScript
You can create cookies using document.cookie property.
document.cookie = "cookiename=cookievalue"
You can even add expiry date to your cookie so that the particular cookie will be removed from the
computer on the specified date. The expiry date should be set in the UTC/GMT format. If you do not set
the expiry date, the cookie will be removed when the user closes the browser.
Storing Cookies
The simplest way to create a cookie is to assign a string value to the document.cookie object, which
looks like this.
document.cookie = "key1 = value1;key2 = value2;expires = date";
Note − Cookie values may not include semicolons, commas, or whitespace. For this reason, you may
want to use the JavaScript escape() function to encode the value before storing it in the cookie. If you do
this, you will also have to use the corresponding unescape() function when you read the cookie value.
Example
<html>
<head>
<script type = "text/javascript">
functionWriteCookie() {
if(document.myform.customer.value == "" )
{
alert("Enter some value!");
return;
}
cookievalue = escape(document.myform.customer.value) + ";";
document.cookie = "name=" + cookievalue;
document.write ("Setting Cookies : " + "name=" + cookievalue );
}
</script>
</head>
<body>
<form name = "myform" >
Enter name: <input type = "text" name = "customer"/>
<input type = "button" value = "Set Cookie" onclick = "WriteCookie();"/>
</form>
</body>
</html>
You can access the cookie like this which will return all the cookies saved for the current domain
var x = document.cookie
Reading a cookie is just as simple as writing one, because the value of the document.cookie object is the
cookie. So you can use this string whenever you want to access the cookie. The document.cookie string
will keep a list of name=value pairs separated by semicolons, where name is the name of a cookie and
value is its string value.You can use strings' split() function to break a string into key and values
Example
<html>
<head>
<script type = "text/javascript">
function ReadCookie()
{ var allcookies = document.cookie;
Example
<html>
<head>
<script type = "text/javascript">
functionWriteCookie() {
var now = new Date();
now.setMonth(now.getMonth() + 1 );
cookievalue = escape(document.myform.customer.value) + ";"
To delete a cookie, you just need to set the value of the cookie to empty and set the value of expires to
a passed date.
document.cookie = "cookiename= ; expires = Thu, 01 Jan 1970 00:00:00 GMT"
Example
<html>
<head>
<script type = "text/javascript">
function WriteCookie() {
var now = new Date();
now.setMonth(now.getMonth() - 1 );
cookievalue = escape(document.myform.customer.value) + ";"
document.cookie = "name=" + cookievalue;
document.cookie = "expires=" + now.toUTCString() + ";"
document.write("Setting Cookies : " + "name=" + cookievalue );
}
</script>
</head>
<body>
<form name = "myform" action = "">
Enter name: <input type = "text" name = "customer"/>
<input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
</form>
</body>
</html>
Questions:
1. Write a webpage that displays a form that contains an input for username & password. User is prompted
to entre the input & password & password becomes the value of the cookie. Write a JavaScript function for
storing the cookie. It gets executed when the password changes.
2. Write a JavaScript function that will open new window when the user will clicks on the button
3. Write a JavaScript that creates a persistent cookies of Itemnames. Write appropriate HTML script for the
same.
4.Write javascript code to display list of colors .As per selection of color from list background color should
changed .Last selected color from list will be saved as cookie when user reload page or open in new window
Last selected color will be background color of reloaded page.
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
Practical Outcome(PrOs):
Develop a webpage for placing the window on the screen and working with child window.
The window object represents an open window in a browser. If a document contain frames (< iframe >
tags), the browser creates one window object for the HTML document, and one additional window
object for each frame.
Syntax
window.open(URL, name, specs, replace)
Parameter Description
URL Optional. Specifies the URL of the page to open. If no URL is specified, a new window/tab with
about:blank is opened
name Optional. Specifies the target attribute or the name of the window. The following values are
supported:
_blank - URL is loaded into a new window, or tab. This is default
_parent - URL is loaded into the parent frame
_self - URL replaces the current page
_top - URL replaces any framesets that may be loaded
name - The name of the window
specs Optional. A comma-separated list of items, no whitespaces. The following values are supported:
channelmode=yes|no|1|0 Whether or not to display the window in theater mode. Default is no. IE
only
directories=yes|no|1|0 Obsolete. Whether or not to add directory buttons. Default is yes. IE
only
fullscreen=yes|no|1|0 Whether or not to display the browser in full-screen mode. Default is
no. A window in full-screen mode must also be in theater mode. IE only
height=pixels The height of the window. Min. value is 100
left=pixels The left position of the window. Negative values not allowed
location=yes|no|1|0 Whether or not to display the address field. Opera only
menubar=yes|no|1|0 Whether or not to display the menu bar
resizable=yes|no|1|0 Whether or not the window is resizable. IE only
scrollbars=yes|no|1|0 Whether or not to display scroll bars. IE, Firefox & Opera only
status=yes|no|1|0 Whether or not to add a status bar
titlebar=yes|no|1|0 Whether or not to display the title bar. Ignored unless the calling
application is an HTML Application or a trusted dialog box
toolbar=yes|no|1|0 Whether or not to display the browser toolbar. IE and Firefox only
top=pixels The top position of the window. Negative values not allowed
width=pixels The width of the window. Min. value is 100
replace Optional. Specifies whether the URL creates a new entry or replaces the current entry in the
history list. The following values are supported:
true - URL replaces the current document in the history list
false - URL creates a new entry in the history list
<!DOCTYPE html>
<html>
<body>
<p>Click the button to open an about:blank page in a new browser window that is 200px wide and
100px tall.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var myWindow = window.open("", "", "width=200,height=100");
}
</script>
</body>
</html>
Window.close()
This method is used to close the window which are opened by window.open() method.
Syntax
window.close()
Window print() Method
The print() method prints the contents of the current window.The print() method opens the Print Dialog
Box, which lets the user to select preferred printing options.
window.print();
The resizeBy() method resizes a window by the specified amount, relative to its current size.
Syntax:
resizeBy(width, height)
The moveBy() method moves a window a specified number of pixels relative to its current
coordinates.
Syntax:
window.moveBy(x, y)
The resizeTo() method resizes a window to the specified width and height.
Syntax:
window.resizeTo(width, height)
The scrollBy() method scrolls the document by the specified number of pixels.
Syntax
window.scrollBy(xnum, ynum)
The setInterval() method calls a function or evaluates an expression at specified intervals (in
milliseconds).The setInterval() method will continue calling the function until clearInterval() is
called, or the window is closed.The ID value returned by setInterval() is used as the parameter
for the clearInterval() method.
Tip: 1000 ms = 1 second.
Tip: To execute a function only once, after a specified number of milliseconds, use the setTimeout()
method.
Syntax:
setInterval(function, milliseconds, param1, param2, ...)
Parameter Description
function Required. The function that will be executed
milliseconds Required. The intervals (in milliseconds) on how often to execute the code. If
the value is less than 10, the value 10 is used
param1, param2, ... Optional. Additional parameters to pass to the function
The setTimeout() method calls a function or evaluates an expression after a specified number of
milliseconds.
Syntax:
setTimeout(function, milliseconds, param1, param2, ...)
Parameter Values
Parameter Description
function Required. The function that will be executed
milliseconds Optional. The number of milliseconds to wait before executing the code. If
omitted, the value 0 is used
param1, param2, ... Optional. Additional parameters to pass to the function
Example
<html>
<body>
<p>Click the button to open a new window and close the window after three seconds (3000
milliseconds)</p>
<button onclick="openWin()">Open "myWindow"</button>
<script>
function openWin() {
var myWindow = window.open("", "myWindow", "width=200, height=100");
myWindow.document.write("<p>This is 'myWindow'</p>");
setTimeout(function(){ myWindow.close() }, 3000);
}
</script>
</body>
</html>
Questions.
1. Write a function that prompts the user for a color and uses what they select to set the background color of
the new webpage opened.
2. Write a javascript to create option list containing list of images and then display images in new window as
per selection.
3. Write a JavaScript code that displays text “TEXT-GROWING” with increasing font size in the interval of 100ms
in RED COLOR, when the font size reaches 50pt it displays “TEXTSHRINKING” in BLUE color. Then the font size
decreases to 5pt.
4.Write HTML code to design a form that displays two buttons START and STOP.Write a javascript code such
that when user clicks on START button, real time digital clock will be displayed on screen.When user clicks on
STOP button clock will stop displaying time (use Timer methods)
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
Practical Outcome(PrOs):
Develop a web page for validation of form fields using regular expressions.
Syntax
/pattern/modifiers;
Example
var patt = /w3schools/i;
Example explained:
/w3schools/i is a regular expression.
w3schools is a pattern (to be used in a search).
i is a modifier (modifies the search to be case-insensitive).
Using String Methods
In JavaScript, regular expressions are often used with the two string methods: search() and replace().
The search() method :
uses an expression to search for a match, and returns the position of the match.
The replace() method
returns a modified string where the pattern is replaced.
Example
Use a string to do a search for "W3schools" in a string:
var str = "Visit W3Schools!";
var n = str.search("W3Schools");
Quantifiers
Quantifier Description
n+ Matches any string that contains at least one n
n* Matches any string that contains zero or more occurrences of n
n? Matches any string that contains zero or one occurrences of n
n{X} Matches any string that contains a sequence of X n's
n{X,Y} Matches any string that contains a sequence of X to Y n's
n{X,} Matches any string that contains a sequence of at least X n's
n$ Matches any string with n at the end of it
^n Matches any string with n at the beginning of it
?=n Matches any string that is followed by a specific string n
?!n Matches any string that is not followed by a specific string n
Property Description
constructor Returns the function that created the RegExp object's prototype
global Checks whether the "g" modifier is set
ignoreCase Checks whether the "i" modifier is set
lastIndex Specifies the index at which to start the next match
multiline Checks whether the "m" modifier is set
source Returns the text of the RegExp pattern
Method Description
Using test()
The following example searches a string for the character "e":
Example
var patt = /e/;
patt.test("The best things in life are free!");
Since there is an "e" in the string, the output of the code above will be:
true
You don't have to put the regular expression in a variable first. The two lines above can be shortened to
one:
/e/.test("The best things in life are free!");
Using exec()
The exec() method is a RegExp expression method.
It searches a string for a specified pattern, and returns the found text as an object.
If no match is found, it returns an empty (null) object.
The following example searches a string for the character "e":
Example 1
/e/.exec("The best things in life are free!");
Question
1. Develop a web page for validation of form fields using regular expressions.
2. Write a JavaScript program that checks whether the string entered by the user contains digits or not.
3. How will you specify the range of characters using a regular expression?
4. Describe regular expression. Explain search () method used in regular expression with suitable example
5. How to replace a text using regular expression? Explain with example
Name
Pin Code
Submit
Write the JavaScript code for below operations : (1) Name, Email & Pin Code should not be blank. (2) Pin
Code must contain 6 digits & it should not be accept any characters
2. Construct regular expression for validating the phone number in following format only :
(nnn)-nnnn-nnnn OR nnn.nnnn.nnnn
3. Write a webpage that accepts Username and adharcard as input texts. When the user enters adhaarcard
number ,the JavaScript validates card number and displays whether card number is valid or not. (Assume valid
adhaar card format to be nnnn.nnnn.nnnn or nnnn-nnnn-nnnn)
4. Write a JavaScript program to validate email ID of the user using regular expression.
5.Write JavaScript code to find non matching characters.
6.Write JavaScript code to validate date format dd/mm/yyyy using regular expression.
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
Marks Obtained Dated Signed of
teacher
Process Product Total(50)
Related(35) Related(15)
Practical No.13.Create web page with Rollovers effect.
Relevant Course outcome:
Create interactive web page using rollover
Competency and practical Skill:
Develop general purpose programming using JavaScript to solve problems.
Practical expected to develop following skills:
Write simple JavaScript program to demonstrate the use rollover effect
Practical Outcome(PrOs):
Create web page with Rollovers effect.
Rollover means a webpage changes when the user moves his or her mouse over an object on
the page. It is often used in advertising. There are two ways to create rollover, using plain HTML or using
a mixture of JavaScript and HTML. We will demonstrate the creation of rollovers using both methods.
The keyword that is used to create rollover is the <onmousover> event. For example, we want to
create a rollover text that appears in a text area. The text “What is rollover?” appears when the user
place his or her mouse over the text area and the rollover text changes to “Rollover means a webpage
changes when the user moves his or her mouse over an object on the page” when the user moves his or
her mouse away from the text area.
<HTML>
<head></head>
<Body>
<textarea rows=”2″ cols=”50″ name=”rollovertext” onmouseover=”this.value=’What is rollover?'”
onmouseout=”this.value=’Rollover means a webpage changes when the user moves his or her mouse
over an object on the page'”></textarea>
</body>
</html>
We create a rollover effect that can change the color of its text using the style attribute.
<html>
<head>
<title>Rollover Effect</title>
</head>
<body>
<table>
<tbody>
<tr valign=”top”>
<td width=”50″>
<a><img src=”vb2010book.jpg” name=”book”></a>
</td>
<td><img height=”1″ width=”10″></td>
<td><a onmouseover=”document.book.src=’vb2010book.jpg'”><b>Visual Basic 2010 Made
Easy</b></a>
<br>
<a onmouseover=”document.book.src=’vb2008book.jpg'”><b>Visual Basic 2008 Made Easy</b></a>
<br>
<a onmouseover=”document.book.src=’vb6book.jpg'”><b>Visual Basic 6 Made Easy</b></a>
<br>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Though HTML can be used to create rollovers, it can only performs simple actions. If you wish to create
more powerful rollovers, you need to use JavaScript. To create rollovers in JavaScript, we need to create
a JavaScript function.
In this example, we have created an array MyBooks to store the images of three book covers. Next, we
create a ShowCover(book) to display the book cover images on the page. Finally, we call
the ShowCover function using the onmouseover event.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<script language=”Javascript”>
MyBooks=new Array(‘vb2010book.jpg’,’vb2008book.jpg’,’vb6book.jpg’)
book=0
function ShowCover(book)
{
document.DisplayBook.src=MyBooks[book]
}
</script></head>
<body>
<P align=”center”><img src=”vb2010book.jpg” alt=”no image” name=”DisplayBook”/><p>
<center>
<table border=0>
<tr>
<td align=center><a onmouseover=”ShowCover(0)”><b>Visual Basic 2010 Made Easy</b></a><br>
<a onmouseover=”ShowCover(1)”><b>Visual Basic 2008 Made Easy</b></a><br>
<a onmouseover=”ShowCover(2)”><b>Visual Basic 6 Made Easy</b></a><br>
</td>
</tr>
</table>
</body>
</html>
Question.
1.What are the methods used most commonly during the rollover?
2.Explain any four regular expression object properties.
3.What is rollover. Explain text rollover with suitable example
4. Write a javascript program to design HTML page with books information in tabular format, use rollovers to
display the discount information.
5. Write a JavaScript program to create rollover effect for three images
1.Write a JavaScript in which when user rolls over the name of fruit, the corresponding image should be
displayed. Along with the appropriate image display, additional window should pop up displaying the benefit of
each fruit
2. Write a script for creating following frame structure :
Frame1
Frame2 Frame3
Fruits
Flower
Cities
Fruits, Flowers and Cities are links to the webpage fruits.html, flowers.html, cities.html respectively. When
these links are clicked corresponding data appears in “FRAME3”
3. Write a JavaScript function to check whether a given value is valid IP value or not.
4. Write a script for creating following frame structure
Frame1
SPORTS MUSIC DRAMA
Frame2 Frame3 Frame4
.
Frame1 contains three button SPORT,MUSIC and DANCE that will perform following action
When user clicks SPORT button,sport.html web page will appear in Frame 2
When user clicks MUSIC button,music.html web page will appear in Frame 3
When user clicks DANCe button,dance.html web page will appear in Frame 4
5. Write a javascript to open a new window and the new window is having two frames. One frame containing
buthon as “click here !”, and after clicking this button an image should open in the second frame of that child
window.
Practical Outcome(PrOs):
Develop a webpage for implementing Menus
Minimum Theoretical Background
The <select> element is used to create a drop-down list. The <option> tags inside the <select> element
define the available options in the list.
Example
<html>
<body>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
To create an interdependent select list, where selecting the options of one select element changes the
options of another with corresponding content.
Example
<html>
<head>
<script language="javascript" type="text/javascript">
function dynamicdropdown(listindex)
{
switch (listindex)
{
case "manual" :
document.getElementById("status").options[0]=new Option("Select status","");
document.getElementById("status").options[1]=new Option("OPEN","open");
document.getElementById("status").options[2]=new Option("DELIVERED","delivered");
break;
case "online" :
document.getElementById("status").options[0]=new Option("Select status","");
document.getElementById("status").options[1]=new Option("OPEN","open");
document.getElementById("status").options[2]=new Option("DELIVERED","delivered");
document.getElementById("status").options[3]=new Option("SHIPPED","shipped");
break;
}
return true;
}
</script>
</head>
<title>Dynamic Drop Down List</title>
<body>
<div class="category_div" id="category_div">Source:
<select id="source" name="source" onchange="javascript:
dynamicdropdown(this.options[this.selectedIndex].value);">
<option value="">Select source</option>
<option value="manual">MANUAL</option>
<option value="online">ONLINE</option>
</select>
</div>
<div class="sub_category_div" id="sub_category_div">Status:
<script type="text/javascript" language="JavaScript">
document.write('<select name="status" id="status"><option value="">Select
status</option></select>')
</script>
<select id="status" name="status">
<option value="open">OPEN</option>
<option value="delivered">DELIVERED</option>
</select>
</div>
</body>
</html>
Question.
1.Develop a web page which validating menu Selection.
2.What is tab menu? Explain it with diagrammatic representation.
3.Write a JavaScript to create a simple pulldown menu
4.Develop JavaScript for chain select menu.
1. Write a Javascript to create a pull – down menu with three options [Google, MSBTE, Yahoo] once the
user will select one of the options then user will be redirected to that site.
2. Write HTML script that will display dropdown list containing options such as Red, Green, Blue & Yellow.
Write a JavaScript program such that when the user selects any options. It will change the background
colour of webpage
3. Write a JavaScript for the folding tree menu.
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
Practical Outcome(PrOs):
Develop a webpage for implementing Status bars and web page protection.
Minimum Theoretical Background
JavaScript gives you the ability to modify the status bar. For example it can be useful to display
information about a link, when the user moves his mouse over it or you can display a small amount of
information about the page the user is on in the status bar. You can also trick people into clicking a link,
so be careful how you use it. If you play too many tricks on your visitors, they might not come back.
<html>
<head>
</body>
</html>
onLoad tells the browser that as soon as your page finished loading, it will display in your current
window’s status bar (window.status) the message “Welcome!”. The return true is necessary because
without, it won’t work.
<html>
<head>
<title>JavaScript Status Bar</title></head>
<body>
<a href="http://www.htmlcenter.com"
onMouseOver="window.status='HTMLcenter';return true"
onMouseOut="window.status='';return true">
HTMLcenter
</a>
</body>
</html>
Our second script listening shows how to modify the status bar using onMouseOver and onMouseOut
with links. When the user moves his mouse over the link, it will display “HTMLcenter” in the status bar.
When he moves his mouse away from the link the status bar will display nothing.
You could also have another message displayed in the status bar, when the user moves his mouse cursor
away from the link. You have to change the onMouseOut statement in the link to for example:
onMouseOut=”window.status=’You moved your cursor away from the link.’;return true”.
<html>
<head>
<title>Scrolling Text</title>
<script language="JavaScript">
var scrollPos = 0
var maxScroll = 100
var blanks = ""
There are so many ways for users to get around this method of protection that it shouldn't even
really be considered a method of protecting your data. Disable JavaScript. For this to work, JavaScript
must be enabled on the browser. View the source code and locate the image or text they want to copy
in the source code. Drag the image from the browser and drop it into the desktop, file manager, or
another open program. Disable the ability for user to highlight text, copy, and paste it elsewhere.
Example
<html>
<head>
<script language="JavaScript">
function function2() {
alert("This image is copyrighted")
}
</script>
</head>
<body oncontextmenu="function2()">
<p>Right click in the image.</p>
<img oncontextmenu="function2()"
src="http://www.java2s.com/style/logo.png"
alt="www.java2s.com"
width="99"
height="76">
</body>
</html>
If you want to disable the context menu, add the following code to the <body>:
oncontextmenu="function2(); return false;"
Question.
1.Write a JavaScript to scroll the status bar message horizontally.
2.Explain sliding menu and scrollable menu.
3.What is the use of status bar in a web application.
4.Explain chain select menu with necessary illustration.
5. List ways of Protecting your webpage and describe any one of them.
1 .Write a Java script to modify the status bar using onMouseOver and onMouseOut with links. When the user
moves his mouse over the link, it will display “MSBTE” in the status bar. When the user moves his mouse away
from the link the status bar will display nothing.
2.Write a JavaScript to display moving message on the status line of a window using javascript.
3.Write JavaScript code to disable the right mouse button.
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………
Marks Obtained Dated Signed of
teacher
Process Product Total(50)
Related(35) Related(15)
Client Side Scripting Languages (22519)
Rotating banners ads comprises several banner images that constantly rotate on a webpage at a
fix time interval. You can create these banner images using standard graphics tools.
<html>
<head>
<script language="Javascript">MyBanners=new
Array('banner1.jpg','banner2.jpg','banner3.jpg','banner4.jpg')
banner=0
function ShowBanners()
{ if (document.images)
{ banner++
if (banner==MyBanners.length) {
banner=0}
document.ChangeBanner.src=MyBanners[banner]
setTimeout("ShowBanners()",5000)
}
}
</script>
<body onload="ShowBanners()">
<center>
<img src="banner1.jpg" width="900" height="120" name="ChangeBanner"/>
</center>
</body>
</html>
Creating rotating banner images will provide the visitor to your webpage with some basic
information. However, if you want the visitor to get more information by clicking on the banner images,
you need to create rotating banner ads that contain URL links.
<html>
<head>
<script language="Javascript">MyBanners=new
Array('banner1.jpg','banner2.jpg','banner3.jpg','banner4.jpg')
MyBannerLinks=new
Array('http://www.vbtutor.net/','http://www.excelvbatutor.com/','http://onlinebizguide4you.com/','htt
p://javascript-tutor.net/')
banner=0
function ShowLinks(){
document.location.href="http://www."+MyBannerLinks[banner]
}function ShowBanners()
{ if (document.images)
{ banner++
if (banner==MyBanners.length) {
banner=0}
document.ChangeBanner.src=MyBanners[banner]
setTimeout("ShowBanners()",5000)
}
}
</script>
<body onload="ShowBanners()">
<center>
<a href="javascript: ShowLinks()">
<img src="banner1.jpg" width="900" height="120" name="ChangeBanner"/></a>
</center>
</body>
</html>
Slide Show
The JavaScript code for the slideshow is almost similar to the JavaScript code of the rotating
banners but it gives control to the user to choose the banner ads he or she wants to see by clicking on
the forward and backward buttons.
To create the JavaScript slideshow, first of all, you need to create a few banner images using
some graphics tools, or you can snap some photos with your digital camera or your smartphone.
<html >
<head>
<script language=”Javascript”>
MySlides=new Array(‘banner1.jpg’,’banner2.jpg’,’banner3.jpg’,’banner4.jpg’)
Slide=0
function ShowSlides(SlideNumber){
{ Slide=Slide+SlideNumber
if (Slide>MySlides.length-1){
Slide=0
}
if (Slide<0) {
Slide=MySlides.length-1
}
document.DisplaySlide.src=MySlides[Slide]
}
}
</script>
</head>
<body>
<P align=”center”><img src=”banner1.jpg” name=”DisplaySlide” width=”900″ height=”120″ /><p>
<center>
<table border=0>
<tr>
<td align=center>
<input type=”button” value=”Back” onclick=”ShowSlides(-1)”>
<input type=”button” value=”Forward” onclick=”ShowSlides(1)”>
</td>
</tr>
</table>
</center>
</body>
</html>