K. K.

Wagh Polytechnic, Nashik-03

A Laboratory Manual for

Client Side Scripting

(22519)
Third Year Diploma in (CO/CM/IF)
Semester-V
 K. K. Wagh Education Society’s
K. K. Wagh Polytechnic, Nashik-03
Lab Manual for Students

Sr. Designation Team of Design

No.

1. Project Institution K. K. Wagh Polytechnic, Amrutdham, Panchavati, Nashik-03

2. Chief Project Prof. P. T. Kadave

Coordinator Principal

3. Project Coordinator Mr. G. B. Katkade

Head, Department of Computer Technology
Ms. M. S. Karande
Head, Department of Information Technology

4. Subject Experts Mrs. A. R. Sonawane

Lecturer, Department of Computer Technology
Mr. P. S. Chavan
Lecturer, Department of Computer Technology
Mrs. M. D. Patil
Lecturer, Department of Information Technology
Mrs. D. D. Pawar
Lecturer, Department of Information Technology

Note: No part of this Lab Manual be reproduced in any form or by any means, without
permission in writing to the Head, Project Institution
 K. K. Wagh Polytechnic, Nashik-03
MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
Certificate
This is to certify that Mr. / Ms. …………………………………………………..

Roll No. ………………………………. ……of Fifth Semester of Diploma in

Computer Technology/Information Technology of Institute, K. K. Wagh

Polytechnic (Code:0078/1103) has completed term work satisfactorily in course
Client Side Scripting Engineering (22519) for the academic year to as
prescribed in the curriculum.

Place :Nashik Enrolment No:…………….

Date:…………………. Exam Seat No:……………..

Course Faculty Head of Department Principal

Seal of
Institution
Institute Vision: - Strive to empower students with Quality Technical Education.
Institute Mission :- Committed to develop students as Competent and Socially Responsible Diploma
Engineers by inculcating learning to learn skills, values and ethics, entrepreneurial attitude, safe and eco-
friendly outlook and innovative thinking to fulfill aspirations of all the stakeholders and contribute in the
development of Organization, Society and Nation.
Department Vision :- (Version – 1.1)
To impart quality technical education for development of technocrats.
Department Mission :- (Version – 1.2)
M1- To provide quality in education and facilities for students to help them to achieve higher academic
career growths.
M2- To impart education to meet the requirements of the industry and society by technological solutions.
M3- Develop technical & soft skill through co–curricular and extra-curricular activities for improving
personality.
Program Educational Objectives:- (Version – 1.2)
PEO1: Provide socially responsible, environment friendly solutions to Computer engineering
related broad-based problems adapting professional ethics.
PEO2: Adapt state-of-the-art Computer engineering broad-based technologies to work in multi-disciplinary
work environments.
PEO3: Solve broad-based problems individually and as a team member communicating effectively in the
world of work
Program Specific Outcome:- (Version – 1.2)
PSO 1: Computer Software and Hardware Usage: Use state-of-the-art technologies for operation and
application of computer software and hardware.
PSO 2: Computer Engineering Maintenance: Maintain computer engineering related software and
hardware systems.
Program Outcomes:- (Version – 1.2)
PO 1: Basic knowledge: Apply knowledge of basic mathematics, sciences and basic engineering to solve
the broad-based Computer engineering problem.
PO 2: Discipline knowledge: Apply Computer engineering discipline - specific knowledge to solve core
computer engineering related problems.
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 6: Environment and sustainability: Apply Computer engineering solutions also for sustainable
development practices in societal and environmental contexts and demonstrates the knowledge
and need for sustainable development.
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 9: Communication: Communicate effectively in oral and written form.
PO10: 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.
 Practical –Course Outcome matrix

Course Outcomes (Cos):-

a) Create Interactive web pages using program flow control structure
b) Implement arrays and functions in Javascript
c) Create event based web forms using Javascript
d) Use Javascript for handling cookies
e) Create interactive webpage using regular expressions for validations
f) Create menus and navigations in web pages

Sr. Practical Outcome CO CO CO CO CO CO

No. a. b. c. d. e. f.

1. Write Simple JavaScript with HTML for ✔

- - - - -
Arithmetic Expression Evaluation and Message
Printing
2. Develop JavaScript to use Decision Making and ✔
- - - - -
Looping Statements

3. Develop JavaScript to implement array ✔

- - - - -
functionalities

4. Develop JavaScript to implement functions - ✔ - - - -

5. Develop JavaScript to implement Strings - - ✔ - - -

6. Create a webpage using Form Elements - - ✔ - - -

7. Create a webpage to implement Form Events-I - - ✔ - - -

8. Create a webpage to implement Form Events-II - - ✔ - - -

9. Develop a webpage using Intrinsic Java ✔

- - - - -
Functions

10. Develop a webpage for creating session and

- - - ✔ - -
persistent cookies. Observe the effects with
Browser Cookie settings
11. Develop a webpage for placing the window on
- - - ✔ - -
screen and working with child window

12. Develop a webpage for Validation of Form ✔ ✔

- - - -
Fields using Regular Expression

13. Create a webpage with rollover effect - - - - ✔ ✔

14. Develop a webpage for implementing Menus - - - - - ✔

15. Develop a webpage for implementing status bar ✔

- - - - -
and web page protection

16. Develop a Webpage for implementing ✔

- - - - -
Slideshow, Banner
 List of Industry relevant Skills
The following industry relevant skills of the competency “Client Side Scripting”are expected to
be developed in you by undertaking the practicals of this laboratory manual.

1. Develop Applications using Javascript

2. Write and Execute Javascript programs using functions, arrays.
3. Write and Execute Javascript programs using Forms, Cookies and Session
4. Write and Execute Javascript programs using Regular Expression, Rollover and Banner

Instructions for Students

1. For incidental writing on the day of each practical session every student should maintain a
dated log book for the whole semester, apart from this laboratory manual which he/she has to
submit for assessment to the teacher in next practical session.
2. For effective implementation and attainment of practical outcomes, in the beginning itself of
each practical, students need to read through the complete write up including the practical
related questions and assessment scheme of that practical sheet
3. Student ought to refer the reference books, lab manuals etc
4. Students should not hesitate to ask any difficulties they face during the conduct of practicals.
 Content Page
List of Practicals and Progressive Assessment Sheet

Assess
Date of Date of Dated
Sr. Page ment Remarks
Practical Outcome Performa Submis sign of
No. No marks (if any)
nce sion Teacher
(25)

1. Write Simple JavaScript with HTML for

Arithmetic Expression Evaluation and Message
Printing

2. Develop JavaScript to use Decision Making and

Looping Statements

3. Develop JavaScript to implement array

functionalities

4. Develop JavaScript to implement functions

5. Develop JavaScript to implement Strings

6. Create a webpage using Form Elements

7. Create a webpage to implement Form Events-I

8. Create a webpage to implement Form Events-II

9. Develop a webpage using Intrinsic Java

Functions

10. Develop a webpage for creating session and

persistent cookies. Observe the effects with
Browser Cookie settings

11. Develop a webpage for placing the window on

screen and working with child window

12. Develop a webpage for Validation of Form

Fields using Regular Expression

13. Create a webpage with rollover effect

14. Develop a webpage for implementing Menus

15. Develop a webpage for implementing status bar
and web page protection

16. Develop a Webpage for implementing

Slideshow, Banner
Total Marks
Total Marks(Scaled to 25 Marks)

* To be transferred to Performa of CIAAN-2017

Name and Sign of Student Name & Sign of Faculty

Practical No.1 : Write simple JavaScript with HTML for arithmetic expression

Evaluation and message printing.

I. Practical Significance

An arithmetic expression is an expression in code that consists of a numeric value. Arithmetic expressions
are extremely important in fundamental computer syntax because they provide numeric values that
support code functions. Message printing is an important part which is used for displaying outputs.

II. Relevant Program Outcomes (POs)

1. Discipline Knowledge: Apply Computer Programming knowledge to solve Computer

Group related problems.
2. Experiments and Practice: Plan to perform experiments and practices to solve Computer
Group related problems.
3. Engineering Tools: Apply relevant Computer Programming Technologies and Tools with
an understanding of the limitations.
4. Individual and team work: Function effectively as a leader and team member in
diverse/multidisciplinary teams
5. Life-long learning: Engage in independent and lifelong learning along with the
technological changes in CM/IT and allied industry.

III. Competency and Practical Skills:

This practical is expected to develop the following skills for the industry oriented competency
‘Write simple JavaScript with HTML for arithmetic expression evaluation and message printing’.

IV. Relevant Course Outcome(s)

Create interactive web pages using program flow control structure.

V. Practical Outcome(Pros)

Write a HTML Program using JavaScript to define different Arithmetic Expressions

VI. Relative Affective domain related Outcome(s)

1. Follow ethical practices

2. Demonstrate working as a leader/team member

VII. Minimum Theoretical Background

Arithmetic Expressions:
An operator, in computer programing, is a symbol that usually represents an action or process.
These symbols were adapted from mathematics and logic. An operator is capable of manipulating
a certain value or operand. Arithmetic operators perform Arithmetic Operations on numbers
(literals or variables).
Types of Operator:
JavaScript supports the following Arithmetic Operators:

Operator Meaning Example

+ Addition or Unary plus c=a+b
- Subtraction or Unary d=-a
minus
* Multiplication c=a*b
/ Division c=a/b
% Modulus c=a%b
++ Increment a++
-- Decrement a--

Dialog Boxes in JavaScript:

The following dialog boxes are supported by Javascript

1. Alert Dialog Box : An alert dialog box is mostly used to give a warning message to the
users. For example, if one input field requires to enter some text but the user does not
provide any input, then as a part of validation, you can use an alert box to give a warning
message.

Syntax: alert ("This is a warning message!");

2. Confirmation Dialog Box: A confirmation dialog box is mostly used to take user's consent
on any option. It displays a dialog box with two buttons: OK and Cancel. If the user clicks
on the OK button, the window method confirm() will return true. If the user clicks on the
Cancel button, then confirm() returns false.

Syntax: var retVal = confirm("Do you want to continue ?");

 3. Prompt Dialog Box: The prompt dialog box is very useful when you want to pop-up a text
box to get user input. Thus, it enables you to interact with the user. The user needs to fill in
the field and then click OK. This dialog box is displayed using a method called prompt()
which takes two parameters: (i) a label which you want to display in the text box and (ii) a
default string to display in the text box.This dialog box has two buttons: OK and Cancel. If
the user clicks the OK button, the window method prompt() will return the entered value
from the text box. If the user clicks the Cancel button, the window method prompt() returns
null.

Syntax: var retVal = prompt("Enter your name : ", "your name here");

VIII. Resources required

Sr.No. Name of Specification Quantity Remarks

Resource

1 Computer Operating System: Windows 7 or

System higher

Memory: 2 GB RAM or higher

Processor Speed: Intel core i3 or

higher

Hard Drive: 500 GB or larger

2 Software Notepad++, Chrome

IX. Precautions

1. Handle Computer System carefully

2. Start and shutdown system with proper procedure
X. Resources Used

Sr.No. Name of Resource Specification

1. Computer System with broad specifications

1. Software

1. Any other resource used

XI Result :

…………………………………………………………………………………………

…………………………………………………………………………………………

XII. Conclusion(s)

…………………………………………………………………………………………

…………………………………………………………………………………………

…………………………………………………………………………………………

XIII. Questions:-

1. State the features of JavaScript.

2. How to write a Hello World example of JavaScript?
3. How to write a comment in JavaScript?
XIV. Exercise:-

1. Write a program to read arithmetic expression from user, evaluate it and display the
answer using alert box.
2. Write a program to accept the name from user using prompt box and display a
message in format “Good Morning Adam” using alert box.
Blank Pages to Write
Blank Pages to Write
XV. References/Suggestions for further reading:-

1. https://www.w3schools.com/js/js_arithmetic.asp
2. https://codesjava.com/arithmetic-operators-javascript-js
3. https://www.digitalocean.com/community/tutorials/how-to-do-math-in-javascript-
with-operators
4. https://www.javatpoint.com/javascript-operators

XVI. Assessment Scheme:-

Performance Indicators Weightage

Process Related (35 Marks) 70%
1. Logic Formation 30%
2. Debugging ability 30%
3. Following ethical practices 10%
Product Related (15 Marks) 30%
4. Expected Output 10%
5. Timely Submission 10%
6. Answer to sample questions 10%
Total(50 Marks) 100%

Marks Obtained

Process Related Process Related Total Dated Sign of Teacher

(35) (15) (50)

Practical No. 2 : Develop JavaScript to use decision making and looping
statements.

I. Practical Significance

Decision making statements play an important role in deciding the flow of the program. It
includes statements of if, if-else and switch case. Also when the statements are to be executed
number of times then such iterations can be implemented using loops. Loops supported by
JavaScript includes for, for..in, while and do-while

II. Relevant Program Outcomes (POs)

1. Discipline Knowledge: Apply Computer Programming knowledge to solve

Computer Group related problems.
2. Experiments and Practice: Plan to perform experiments and practices to solve
Computer Group related problems.
3. Engineering Tools: Apply relevant Computer Programming Technologies and
Tools with an understanding of the limitations.
4. Individual and team work: Function effectively as a leader and team member in
diverse/multidisciplinary teams
5. Life-long learning: Engage in independent and lifelong learning along with the
technological changes in CM/IT and allied industry.

III. Competency and Practical Skills:

This practical is expected to develop the following skills for the industry oriented
competency ‘Develop JavaScript to use decision making and looping statements’.

IV. Relevant Course Outcome(s)

Create interactive web pages using program flow control structure.

V. Practical Outcome(Pros)

Develop JavaScript to use decision making and looping statements

VI. Relative Affective domain related Outcome(s)

1. Follow ethical practices

2. Demonstrate working as a leader/team member

VII. Minimum Theoretical Background

I. Decision Making Statements:

Conditional/Decision Making statements are used to perform different actions based on
different conditions.
In JavaScript we have the following conditional statements:
 · Use if to specify a block of code to be executed, if a specified condition is
true
if (condition)
{
//block of code to be executed if the condition is true
}

· Use else to specify a block of code to be executed, if the same condition is

false
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 else if to specify a new condition to test, if the first condition is false
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
}

· Use switch to specify many alternative blocks of code to be executed

switch(expression)
{
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}
II. Loops
Loops are used to repeat the statements a number of times.
Any loop is made of 4 basic parts:
a. the start value: An initial value is assigned to a variable, usually called i (but you can
call it anything you like). This variable acts as counter for the loop.
b. the end value or test condition: The loop needs a limit to be set: either a definite
number (loop 5 times) or a truth condition (loop until this condition evaluates to true).
Failing this, you run the risk of triggering an infinite loop.
This is very bad: it a never-ending repetition of the same code that stops users &
browsers from responding. Avoid infinite loops at all costs by making sure you set a
boundary condition to your loops;
c. the action or code to be executed: You type a block of code once and it'll be
executed the number of times between your start value and end value;
d. the increment: This is the part that moves the loop forward: the counter you initialize
has to move up (or down in case you opt for looping backwards). As long as the loop
does not reach the end value or the test condition is not satisfied, the counter is
incremented (or decremented). This is usually done using mathematical operators.

Loops in JavaScript:
a. FOR LOOP: Choose a for loop if you know in advance how many times your script
should run.
Syntax:
for (var=startvalue; var<=endvalue; var=var+increment)
{
//code to be executed
}
b. FOR..IN LOOP: The for/in statement loops through the properties of an object.
The block of code inside the loop will be executed once for each property.
Syntax:
for (var in object)
{
code block to be executed
}
c. WHILE LOOP: If you don’t know the exact number of times your code is supposed
to execute, use a while loop. With a while loop your code executes while a given
condition is true; as soon as this condition evaluates to false, the while loop stops.
Syntax:
while (variable <= endvalue)
{
//code to be executed
}

d. DO..WHILE LOOP : This kind of loop is similar to the while loop. The difference
between the two is this: In the case of the while loop, if the test condition is false from the
start, the code in the loop will never be executed. In the case of the do ... while loop, the
 test condition is evaluated after the loop has performed the first cycle. Therefore, even if
the test condition is false, the code in the loop will execute once.
Syntax:
do
{
//code to be executed
} while (variable <= endvalue)

VIII. Resources required

Sr.No. Name of Specification Quantity Remarks

Resource
1 Computer Operating System: Windows 7 or
System higher
2 Software Notepad++, Chrome
Memory: 2 GB RAM or higher

Processor Speed: Intel core i3 or

higher
IX. Precautions
Hard Drive: 500 GB or larger
1. Handle Computer System carefully
2. Start and shutdown system with proper procedure
X. Resources Used

Sr. Name of Resource Specification

No.
1 Computer System with broad specifications

2 Software

3 Any other resource used

XI Result:

…………………………………………………………………………………………

…………………………………………………………………………………………

XII. Conclusion(s)

…………………………………………………………………………………………

…………………………………………………………………………………………

…………………………………………………………………………………………

XIII. Questions:-

1. Explain for loop with example.

2. Explain switch case with example.
3. Explain nested if-else
XIV. Exercise:-

1. Write a program to display even and odd numbers.

2. Write a program to display prime numbers
3. Write a program to ask user whether he wants to change background colour.
If user says yes ask for the colour and change or else display alert box with
message “You decided not to change colour
Blank page for Answer to Write
Blank page for Answer to Write
XV. References/Suggestions for further reading:-

1. https://www.w3schools.com/js/js_switch.asp
2. https://www.w3schools.com/js/js_loop_for.asp
3. https://www.teaching-materials.org/javascript/exercises/forloops

XVI. Assessment Scheme:-

Performance Indicators Weightage

Process Related (35 Marks) 70%
1. Logic Formation 30%
2. Debugging ability 30%
3. Following ethical practices 10%
Product Related (15 Marks) 30%
4. Expected Output 10%
5. Timely Submission 10%
6. Answer to sample questions 10%
Total(50 Marks) 100%

Marks Obtained Dated Sign of Teacher

Process Related Process Related Total

(35) (15) (50)

 Practical No. 3: Develop JavaScript to implement array functionalities.

I. Practical Significance

An array is a special variable, which can hold more than one value at a time. An array can
hold many values under a single name, and you can access the values by referring to an index
number.

II. Relevant Program Outcomes (POs)

1. Discipline Knowledge: Apply Computer Programming knowledge to solve

Computer Group related problems.
2. Experiments and Practice: Plan to perform experiments and practices to solve
Computer Group related problems.
3. Engineering Tools: Apply relevant Computer Programming Technologies and
Tools with an understanding of the limitations.
4. Individual and team work: Function effectively as a leader and team member in
diverse/multidisciplinary teams
5. Life-long learning: Engage in independent and lifelong learning along with the
technological changes in CM/IT and allied industry.

III. Competency and Practical Skills:

This practical is expected to develop the following skills for the industry oriented
competency ‘Develop JavaScript to implement array functionalities’.

IV. Relevant Course Outcome(s)

Implement arrays and functions in Java script

VI. Relative Affective domain related Outcome(s)

1. Follow ethical practices

2. Demonstrate working as a leader/team member

VII. Minimum Theoretical Background

A. Basics of Array:
- An array is a numbered group of data items that you can treat as a single unit.
- For example, you might use an array called scores to store several scores for a
game.
- Arrays can contain strings, numbers, objects, or other types of data.
- Each item in an array is called an element of the array
B. Declaring & Initialising Array
Syntax :
name_of_array = new Array(size_of_array)
Eg : scores = new Array(4);
Assigning values to array
To assign a value to the array, you use an index in brackets. Indexes begin with 0
scores[0] = 39;
scores[1] = 40;
scores[2] = 100;
scores[3] = 49;
Initialising an array
An array can be initialised at the time of declaration also.
scores = new Array(39,40,100,49);
In JavaScript 1.2 and later, you can also use a shorthand syntax to declare an array
and specify its contents.
The following statement is an alternative way to create the scores array:
scores = [39,40,100,49];

C. Accessing array elements

Element s are accessed using index
scores[0] = 39; //sets element 39 at location 0
//following statement stores the elements at location 0,1,2 in a variable scoredisp
scoredisp = “Scores: “ + scores[0] + “,” + scores[1] + “,” + scores[2];
document.write(scoredisp);
D. Looping an Array
An array can be looped in 2 basic ways.
1. using standard loops
cars = {" alto", " verna" , " city" , "bolero" }
var i;
for (i = 0; i < cars.length; i++)
{
document.write(cars[i] + "<br>");
}
2. using forEach()
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value, index, array) {
txt = txt + value + "<br>";
}

Along with these, 2 more methods can be used as:

1. using Array.map()

The map() method creates a new array by performing a function on each array
element.
The map() method does not execute the function for array elements without values.
The map() method does not change the original array.
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}

2. using Array.filter()
The filter() method creates a new array with array elements that passes a test.
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
E. Methods used with Arrays
1. Push : It is used for adding elements at end of array
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
2. Unshift :It is used for adding elements at beginning of array
var list = ["foo", "bar"];
list.unshift("baz", "qux");
["baz", "qux", "foo", "bar"] // result
3. Splice: it is used for adding elements in between
var list = ["foo", "bar"];
list.splice( 1, 0, "baz"); // at index position 1, remove 0 elements, then add "baz"
to that position
["foo", "baz", "bar"]
4. Concat: it is used for adding array to another array
var list = ["foo", "bar"];
var newlist = list.concat( ["baz", "qux"] );
["foo", "bar", "baz", "qux"] // newlist result
5. Add an Array Element at a Particular Index
var list = ["foo", "bar"];
list[2] = "baz"; // add element "baz" to the index position 2 in the array
list[3] = "qux";
["foo", "bar", "baz", "qux"] // result
6. Sort: This method is used to sort the array elements
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
7. Reverse: This method is used to reverse an array
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
fruits.reverse();
8. Join: This method returns the array as a string. The elements will be separated by
a specified separator. The default separator is comma (,).
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join(" and ");
o/p Banana and Orange and Apple and Mango
9. Pop:It removes the last element from an array
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop(); // Removes the last element ("Mango") from fruits
10. Shift: This method removes the first array element and "shifts" all other elements
to a lower index.
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift(); // Removes the first element "Banana" from fruits
11. Unshift: This method adds a new element to an array (at the beginning), and
"unshifts" older elements:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon"); // Adds a new element "Lemon" to fruits
12. Delete is used to delete element from array
var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0]; // Changes the first element in fruits to undefined
 13. Splice : This method can be used to add new items to an array:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
New Array:
Banana,Orange,Lemon,Kiwi,Apple,Mango
14. Slice: This method slices out a piece of an array into a new array. The slice()
method creates a new array. It does not remove any elements from the source
array.
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1);
o/p Orange,Lemon,Apple,Mango

VIII. Resources required

Sr.No. Name of Specification Quantity Remarks

Resource

1 Computer Operating System: Windows 7 or higher

System
Memory: 2 GB RAM or higher

Processor Speed: Intel core i3 or higher

Hard Drive: 500 GB or larger

2 Software Notepad++, Chrome

IX. Precautions

1. Handle Computer System carefully

2. Start and shutdown system with proper procedure

X. Resources Used

Sr.No. Name of Resource Specification

1. Computer System with broad specifications

2. Software

3. Any other resource used

XI Result :

…………………………………………………………………………………………

…………………………………………………………………………………………
XII. Conclusion(s)

…………………………………………………………………………………………

…………………………………………………………………………………………

…………………………………………………………………………………………

XIII. Questions:-

1. Explain array with an example.

2. Explain any 4 methods that can be used with arrays for adding elements.
3. Explain splice and slice methods. Also state the difference between them.

XIV. Exercise:-

1. Write a program to perform all the array operations.

2. Write a program to Accept the marks of 10 subjects from the user and store it in
array. Sort them and display
Blank Pages to Write
Blank Pages to Write
XV. References/Suggestions for further reading:-

1. https://www.w3schools.com/js/js_arrays.asp
2. https://developer.mozilla.org/en-US/ docs/ Web/ JavaScript/ Reference/
Global_Objects/Array

XVI. Assessment Scheme:-

Performance Indicators Weightage

Process Related (35 Marks) 70%
1. Logic Formation 30%
2. Debugging ability 30%
3. Following ethical practices 10%
Product Related (15 Marks) 30%
4. Expected Output 10%
5. Timely Submission 10%
6. Answer to sample questions 10%
Total(50 Marks) 100%

Marks Obtained Dated Sign of Teacher

Process Related (35) Process Related (15) Total(50)

 Practical No. 4: Develop JavaScript to implement Functions.

I. Practical Significance

Functions are one of the fundamental building blocks in JavaScript. A function is a

JavaScript procedure i.e a set of statements that performs a task or calculates a value.

II. Relevant Program Outcomes (POs)

1. Discipline Knowledge: Apply Computer Programming knowledge to solve

Computer Group related problems.
2. Experiments and Practice: Plan to perform experiments and practices to solve
Computer Group related problems.
3. Engineering Tools: Apply relevant Computer Programming Technologies and
Tools with an understanding of the limitations.
4. Individual and team work: Function effectively as a leader and team member in
diverse/multidisciplinary teams
5. Life-long learning: Engage in independent and lifelong learning along with the
technological changes in CM/IT and allied industry.

III. Competency and Practical Skills:

This practical is expected to develop the following skills for the industry oriented
competency ‘Develop JavaScript to implement array functionalities’.

IV. Relevant Course Outcome(s)

Implement arrays and functions in Java script

VI. Relative Affective domain related Outcome(s)

1. Follow ethical practices

2. Demonstrate working as a leader/team member

VII. Minimum Theoretical Background

a. Function: A JavaScript function is a block of code designed to perform a

particular task. A JavaScript function is executed when “something” invokes it.
Function in JavaScript has following properties
- A JavaScript function is defined with the function keyword, followed by a name,
followed by parentheses ().
- Function names can contain letters, digits, underscores, and dollar signs (same
rules as variables).
- The parentheses may include parameter names separated by commas:(parameter1,
parameter2, ...)
- The code to be executed, by the function, is placed inside curly brackets: {}

Example:
function myFunction(p1, p2) {
return p1 * p2;
}
 b. Function Invocation
The code inside the function will execute when "something" invokes (calls) the
function:
• When an event occurs (when a user clicks a button)
• When it is invoked (called) from JavaScript code
• Automatically (self invoked)

c. Advantages of using Functions

• You can reuse code i.e define the code once, and use it many times.
• You can use the same code many times with different arguments, to produce
different results

VIII. Resources required

Sr.No. Name of Specification Quantity Remarks

Resource

1 Computer Operating System: Windows 7 or higher

System
Memory: 2 GB RAM or higher

Processor Speed: Intel core i3 or higher

Hard Drive: 500 GB or larger

2 Software Notepad++, Chrome

IX. Precautions

1. Handle Computer System carefully

2. Start and shutdown system with proper procedure

X. Resources Used

Sr.No. Name of Resource Specification

1. Computer System with broad specifications

2. Software

3. Any other resource used

XI Result :

…………………………………………………………………………………………

…………………………………………………………………………………………
XII. Conclusion(s)

…………………………………………………………………………………………

…………………………………………………………………………………………

…………………………………………………………………………………………

XIII. Questions:-

1. Explain function with parameters in JavaScript.

2. Explain local and global variables.

XIV. Exercise:-

1. Write a program to display even and odd numbers using function.

2. Write a program to display prime numbers using function
3. Write a program to perform stack operations of push and pop using function \
Blank Pages to Write
Blank Pages to Write
XV. References/Suggestions for further reading:-

1. https://www.w3schools.com/js/js_functions.asp
2. https://codeburst.io/javascript-functions-understanding-the-basics-207dbf42ed99

XVI. Assessment Scheme:-

Performance Indicators Weightage

Process Related (35 Marks) 70%
1. Logic Formation 30%
2. Debugging ability 30%
3. Following ethical practices 10%
Product Related (15 Marks) 30%
4. Expected Output 10%
5. Timely Submission 10%
6. Answer to sample questions 10%
Total(50 Marks) 100%

Marks Obtained Dated Sign of Teacher

Process Related (35) Process Related (15) Total(50)

 Practical No. 5: Develop JavaScript to implement Strings.

I. Practical Significance

JavaScript strings are used for storing and manipulating text.he String object lets you work
with a series of characters; it wraps JavaScript’s string primitive data type with a number of
helper methods.

II. Relevant Program Outcomes (POs)

1. Discipline Knowledge: Apply Computer Programming knowledge to solve

Computer Group related problems.
2. Experiments and Practice: Plan to perform experiments and practices to solve
Computer Group related problems.
3. Engineering Tools: Apply relevant Computer Programming Technologies and
Tools with an understanding of the limitations.
4. Individual and team work: Function effectively as a leader and team member in
diverse/multidisciplinary teams
5. Life-long learning: Engage in independent and lifelong learning along with the
technological changes in CM/IT and allied industry.

III. Competency and Practical Skills:

This practical is expected to develop the following skills for the industry oriented
competency ‘Develop JavaScript to implement strings.

IV. Relevant Course Outcome(s)

Implement strings Java script

VI. Relative Affective domain related Outcome(s)

1. Follow ethical practices

2. Demonstrate working as a leader/team member

VII. Minimum Theoretical Background

A. Basics of String:
- In computer programming, a string is traditionally a sequence of characters, either
as a literal constant or as some kind of variable
- Depending on programming language and precise data type used, a variable
declared to be a string may either cause storage in memory to be statically
allocated for a predetermined maximum length or employ dynamic allocation to
allow it to hold a variable number of elements.

B. Declaring & Initialising String

Syntax :
var carName1= "VolvoXC60";
var carName2 = 'Volvo XC60';
C. String length

var txt= "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

var sln = txt.length;

D. Special characters

To use special characters in string , they are preceded by \

Egvar x = "We are the so-called \"Vikings\" from the north.";

E. Methods used with Strings

1. indexOf() : It is used for returning the index of (the position of)

the first occurrence of a specified text in a string:
var str = "Please locate where 'locate' occurs!";
var pos = str.indexOf("locate");
2. lastIndexOf() :It is used for returning the index of the last occurrence of a
specified text in a string
var str = "Please locate where 'locate' occurs!";
var pos = str.lastIndexOf("locate");
3. search():This method searches a string for a specified value and returns the
position of the match
var str = "Please locate where 'locate' occurs!";
var pos = str.search("locate");
4. slice():extracts a part of a string and returns the extracted part in a new string
The method takes 2 parameters:
the start position, and the end position (end not included).
This example slices out a portion of a string from position 7 to position 12
varstr = "Apple, Banana, Kiwi";
var res = str.slice(7, 13);
5. Substring():This method is similar to slice(). The difference is that substring()
cannot accept negative indexes.
varstr = "Apple, Banana, Kiwi";
var res = str.substring(7, 13);
6. Substr():It is similar to slice(). The difference is that the second parameter
specifies the length of the extracted part.
varstr = "Apple, Banana, Kiwi";
var res = str.substr(7, 6);
7. replace():replaces a specified value with another value in a string.
str = "Please visit Microsoft!";
var n = str.replace("Microsoft", "W3Schools");
8. toUpperCase():Converts text into uppercase
var text1 = "Hello World!"; // String
var text2 = text1.toUpperCase(); // text2 is text1 converted to upper
9. toLowerCase():A string is converted to lower case
var text1 = "Hello World!"; // String
var text2 = text1.toLowerCase(); // text2 is text1 converted to lower
10. concat():joins two or more strings
var text1 = "Hello";
 var text2 = "World";
var text3 = text1.concat(" ", text2);
11. trim(): This method removes whitespace from both sides of a string
varstr = " Hello World! ";
alert(str.trim());
12. charAt(position): It returns the character at a specified index (position) in a string
varstr = "HELLO WORLD";
str.charAt(0); // returns H
13. charCodeAt() :This methodreturns the unicode of the character at a specified
index in a string
varstr = "HELLO WORLD";
str.charCodeAt(0); // returns 72
14. parseInt(),parseFloat() : It is used for converting string to integer/float values
15. toString() : It is used for converting number to String

VIII. Resources required

Sr.No. Name of Specification Quantity Remarks

Resource
1 Computer Operating System: Windows 7 or higher
System Memory: 2 GB RAM or higher
Processor Speed: Intel core i3 or higher
Hard Drive: 500 GB or larger
2 Software Notepad++, Chrome

IX. Precautions

1. Handle Computer System carefully

2. Start and shutdown system with proper procedure

X. Resources Used

Sr.No. Name of Resource Specification

1. Computer System with broad specifications
2. Software
3. Any other resource used

XI Result :

…………………………………………………………………………………………

…………………………………………………………………………………………

XII. Conclusion(s)

…………………………………………………………………………………………

…………………………………………………………………………………………

…………………………………………………………………………………………
XIII. Questions:-

1. Explain string with an example.

2. Explain the methods that can be used with string for searching a particular word or
character in string
3. Explain the difference between substring and slice method.

XIV. Exercise:-

1. Write a program to perform all the string operations.

2. Write a program that checks whether a passed string is palindrome or not.
3. Write a program to insert a string within a string at a particular position
Blank Pages to Write
Blank Pages to Write
XV. References/Suggestions for further reading:-

1. https://www.w3schools.com/js/js_arrays.asp
2. https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Array

XVI. Assessment Scheme:-

Performance Indicators Weightage

Process Related (35 Marks) 70%
1. Logic Formation 30%
2. Debugging ability 30%
3. Following ethical practices 10%
Product Related (15 Marks) 30%
4. Expected Output 10%
5. Timely Submission 10%
6. Answer to sample questions 10%
Total(50 Marks) 100%

Marks Obtained Dated Sign of Teacher

Process Related (35) Process Related (15) Total(50)

Practical No.6: Create a webpage using Form Elements.
What is Form Tag?
 Form is typical layout on the web page by which a user can interact with the web page.
 Typical components of forms are text, text area, checkboxes, radio buttons & push
buttons. These components of form are also called as form controls.
 HTML allows us to place these form components on the web page.
 All these form contents in the <form> tag.
 The form has an attributes action which gets executed user clicks a button on the
form.
Uses of form:
1. Forms are used to collect the information from customer for online registration.
2. Forms are used for online survey.
3. Forms are used for conduction online examination.
4. The information present in the forms is submitted to the server for further processing.
Properties & Methods Of Form:

Syntax:
<form name=“myform” action=“/myserverPage” method= “GET” target=“_blank”>
</form>

1. Text:

• Text is typically required to place one line text.

• This control is used for items that require only one line of user input is known as Single- line
text input controls.
• They are created using HTML <input> tag.

2. Textarea:

• This is used when the user is required to give details that may be longer than a single
sentence.
• Multi-line input controls are created using HTML <textarea> tag.

3. Button:

• There are various ways in HTML to create clickable buttons.

• You can also create a clickable button using <input>tag by setting its type attribute to
button.
4. Checkbox:

• Checkboxes are used when more than one option is required to be selected.
• They are also created using HTML <input> tag but type attribute is set to checkbox.

5. Radio button:

 Radio buttons are used when out of many options, just one option is required to be
selected.
 They are also created using HTML <input> tag but type attribute is set to radio.
 6. Select elements.
 A select box, also called drop down box which provides option to list downvarious
options in the form of drop down list, from where a user can select one or more
options.

Conclusion: We understand that how to create a webpage using form elements JavaScript.
Create a webpage using Form Elements:
<html>
<div class="container">
<form >

<label for="fname">First Name</label>

<input type="text" id="fname" name="firstname" placeholder="Your name.."><br>

<label for="lname">Last Name</label>

<input type="text" id="lname" name="lastname" placeholder="Your last name.."><br>
<label for="country">Country</label>
<select id="country" name="country">
<option value="india">India</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select><br>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.."
style="height:200px"></textarea><br>
<input type="submit" value="Submit">
</form>
</div>
</html>
******************************** OUTPUT
*************************************
VI. Resources required

Sr. No. Name of Specification Quantity Remarks

Resource
1 Compute Operating System: Windows 7 or
r System higher Memory: 2 GB RAM or higher
Processor Speed: Intel core i3 or
higher Hard Drive: 500 GB or larger
2 Software Notepad++, Chrome

VII. Precautions

1. Handle Computer System carefully

2. Start and shutdown system with proper procedure

VIII. Resources Used

Sr.No. Name of Resource Specification

1. Computer System with broad specifications
2. Software
3. Any other resource used

XI Result :

…………………………………………………………………………………………

…………………………………………………………………………………………

XII. Conclusion(s)

…………………………………………………………………………………………

…………………………………………………………………………………………

…………………………………………………………………………………………
XIII. Questions:-

1. Explain form methods.

2. Explain the difference between text area and textbox
3. Write a html code to generate dropdown list consisting of branches CM, IF, EJ, ME, EE and CE.

XIV. Exercise:-

1. Write a program to design a form for placing pizza order.

2. Write a program to design Registration form for College
3. Write a webpage that accepts Username and Aadhar Card as input texts.
Blank Pages to Write
Blank Pages to Write
 XV. References/Suggestions for further reading:-

1. https://www.w3schools.com/js/js_form.asp
2. https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Form

XVI. Assessment Scheme:-

Performance Indicators Weightag

e
Process Related (35 Marks) 70%
1. Logic Formation 30%
2. Debugging ability 30%
3. Following ethical practices 10%
Product Related (15 Marks) 30%
4. Expected Output 10%
5. Timely Submission 10%
6. Answer to sample questions 10%
Total(50 100%
Marks)

Marks Dated Sign of Teacher

Obtained
Process Related (35) Process Related (15) Total (50)
Practical No.7: Create a webpage to implement Form Events. Part-I.
Introduction:

An event is something that happens when user interact with the web page, such as when he clicked
a link or button, entered text into an input box or textarea, made selection in a select box, pressed
key on the keyboard, moved the mouse pointer, submits a form, etc. In some cases, the Browser itself
can trigger the events, such as the page load and unload events.

When an event occur, you can use a JavaScript event handler (or an event listener) to detect them
and perform specific task or set of tasks. By convention, the names for event handlers always begin
with the word "on", so an event handler for the click event is called onclick, similarly an event
handler for the load event is called onload, event handler for the blur event is called onblur, and so
on.

What is Form Event?

 Event is an activity that represent a change in the environment.

 A JavaScript event is an action that can be detected by JavaScript. Many of them are
initiated by user action but the browser generates some.

 Event is triggered & then it can be caught by JavaScript functions, which then do
something response.

 Event handler is a script that are executed in response to these events. Event handler enables
the web documents to respond the user activities through the browser window.

 Event are specified in lowercase & these are case sensitive.

Form Event:

A form event is fired when a form control receive or loses focus or when the user modify a form
control value such as by typing text in a text input, select any option in a select box etc. Here're
some most important form events and their event handler.

1. The Focus Event (onfocus)

The focus event occurs when the user gives focus to an element on a web page. You

can handle the focus event with the onfocus event handler.

2. The Blur Event (onblur)

The blur event occurs when the user takes the focus away from a form element or a window. You

can handle the blur event with the onblur event handler.

3. The Change Event (onchange)

The change event occurs when a user changes the value of a form element.

You can handle the change event with the onchange event handler.

4. The Submit Event (onsubmit)

The submit event only occurs when the user submits a form on a web page. You

can handle the submit event with the onsubmit event handler.

Document/Window Events:

Events are also triggered in situations when the page has loaded or when user resize the
browser window, etc. Here're some most important document/window events and their event
handler.

1. The Load Event (onload)

The load event occurs when a web page has finished loading in the web browser. You

can handle the load event with the onload event handler.

2. The Unload Event (onunload)

The unload event occurs when a user leaves the current web page. You

can handle the unload event with the onunload event handler.

3. The Resize Event (onresize)

The resize event occurs when a user resizes the browser window. The resize event also occurs in
situations when the browser window is minimized or maximized.

You can handle the resize event with the onresize event handler.

Conclusion: We understand that how to create a webpage using form events.

.
Programs on Various event handler.

JavaScript on onload event handler:

<!DOCTYPE html>
<html>
<body onload="myFunction()">
<h1>Hello World!</h1>
<script>
function myFunction()
{
alert("Page is loaded");
}
</script>
</body>
</html>

******************************** OUTPUT
*************************************
JavaScript on onclick event handler.
<!DOCTYPE html>
<html>
<body>
<button onclick="document.getElementById('demo').innerHTML=Date()">The time
is?</button>
<p id="demo"></p>
</body>
</html>

******************************** OUTPUT
*************************************
JavaScript on onblur event handler.
<!DOCTYPE html>
<html>
<body>

Enter your name: <input type="text" id="fname" onblur="myFunction()">

<p>When you leave the input field, a function is triggered which transforms the input text to
upper case.</p>
<script>
function myFunction()
{
var x = document.getElementById("fname"); x.value
= x.value.toUpperCase();
}
</script>
</body>
</html>

******************************** OUTPUT
*************************************
JavaScript on onblur & onfocus event handler.

<!DOCTYPE html>
<html>
<body>
<p>When you enter the input field (child of FORM), a function is triggered
which sets the background color to yellow. When you leave the input field, a
function is triggered which removes the background color.</p>
<form id="myForm">
<input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focus", myFocusFunction,
true); x.addEventListener("blur",
myBlurFunction, true); function
myFocusFunction() {
document.getElementById("myInput").style.backgroundColor = "yellow";
}
function myBlurFunction() {
document.getElementById("myInput").style.backgroundColor = "";
}
</script>
</body>
</html>

******************************** OUTPUT
*************************************
VI. Resources required

Sr. No. Name of Specification Quantity Remarks

Resource
1 Computer Operating System: Windows 7 or
System higher Memory: 2 GB RAM or higher
Processor Speed: Intel core i3 or
higher Hard Drive: 500 GB or larger
2 Software Notepad++, Chrome

VII. Precautions

1. Handle Computer System carefully

2. Start and shutdown system with proper procedure

VIII. Resources Used

Sr.No. Name of Resource Specification

1. Computer System with broad specifications
2. Software
3. Any other resource used

XI Result :

…………………………………………………………………………………………

…………………………………………………………………………………………

XII. Conclusion(s)

…………………………………………………………………………………………

…………………………………………………………………………………………

…………………………………………………………………………………………
 XIII. Questions:-

1. Explain form events.

2. Explain the difference between onblur and onfocus Event
3. Write a html code to handle onsubmit Event

XIV. Exercise:-

1. Write a program to design a form and handle onblur Event.

2. Write a program to design a form and handle onload Event.
Blank Pages to Write
Blank Pages to Write
 XV. References/Suggestions for further reading:-

1. Formhttps://www.w3schools.com/js/js_form.asp
2. https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/FormEvents

XVI. Assessment Scheme:-

Performance Indicators Weightag

e
Process Related (35 Marks) 70%
1. Logic Formation 30%
2. Debugging ability 30%
3. Following ethical practices 10%
Product Related (15 Marks) 30%
4. Expected Output 10%
5. Timely Submission 10%
6. Answer to sample questions 10%
Total(50 100%
Marks)

Marks Dated Sign of Teacher

Obtained
Process Related (35) Process Related (15) Total (50)
Practical No.8: Create a webpage to implement Form Events. Part-II. Mouse

Event:

 Mouse Event are used to capture the interaction made by the user by using mouse.

Attribute Value Description

onclick script Fires on a mouse click on the element
ondblclick script Fires on a mouse double-click on the element
onmousedown script Fires when a mouse button is pressed down on an element
onmousemove script Fires when the mouse pointer is moving while it is over an
element
onmouseout script Fires when the mouse pointer moves out of an element
onmouseover script Fires when the mouse pointer moves over an element
onmouseup script Fires when a mouse button is released over an element
onmousewheel script Deprecated. Use the onwheel attribute instead
onwheel script Fires when the mouse wheel rolls up or down over an element

1. Mousedown, mouseup, click:

If the user clicks on an element no less than three mouse events fire, in this order:

1. mousedown, user depresses the mouse button on this element

2. mouseup, user releases the mouse button on this element
3. click, one mousedown and one mouseup detected on this element

2. Dblclick:

The dblclick event is rarely used. Even when you use it, you should be sure never to register both an
onclick and an ondblclick event handler on the same HTML element. Finding out what the user has
actually done is nearly impossible if you register both.
 3. Mousemove:

The mousemove event works fine, but you should be aware that it may take quite some system time
to process all mousemove events. If the user moves the mouse one pixel, the mousemove event
fires. Even when nothing actually happens, long and complicated functions take time and this may
affect the usability of the site: everything goes very slowly, especially on old computers.

4. Mousing out of a layer:

In a layer-based navigation you may need to know when the mouse leaves a layer so that it can be
closed. Therefore you register an onmouseout event handler to the layer. However, event bubbling
causes this event handler to fire when the mouse leaves any element inside the layer, too.

5. Mouseover and mouseout:

Take another look at the example, switch the mouseovers on and try them. The example adds an
onmouseover event handler to ev3 only. However, you’ll notice that a mouseover event takes place
not only when the mouse enters ev3's area, but also when it enters the area of ev4 or the span. In
Mozilla before 1.3, the event even fires when the mouse enters the area of a text!

The reason for this is of course event bubbling. The user causes a mouseover event on ev4. There is
no onmouseover event handler on this element, but there is one on ev3. As soon as the event has
bubbled up to this element, the event handler is executed.

6. Mouseenter and mouseleave:

Microsoft has another solution. It has created two new events mouseenter and mouseleave. They are
almost the same as mouseover and mouseout except that they don’t react to event bubbling.
Therefore they see the entire HTML element they’re registered to as one solid block and don’t react
to mouseovers and –outs taking place inside the block.
Key Events:

 Key Event are used to capture the interaction made by the user by using key.

Attribute Value Description

onkeydown script Fires when a user is pressing a key
onkeypress script Fires when a user presses a key
onkeyup script Fires when a user releases a key

1. The Keydown Event (onkeydown):

The keydown event occurs when the user presses down a key on the keyboard. You can

handle the keydown event with the onkeydown event handler.

2. The Keyup Event (onkeyup):

The keyup event occurs when the user releases a key on the keyboard. You

can handle the keyup event with the onkeyup event handler.

3. The Keypress Event (onkeypress):

The keypress event occurs when a user presses down a key on the keyboard that has a character value
associated with it. For example, keys like Ctrl, Shift, Alt, Esc, Arrow keys, etc. will not generate a
keypress event, but will generate a keydown and keyup event.

Conclusion: We understand that how to create a webpage using form events.

JavaScript on mouse event handler.

<!DOCTYPE HTML>
<html>
<head>
<title>Example: Working with Mouse events</title>
<style>
body{font-family:Verdana; background:#44c767;
color:#fff;}
</style>
<script>
var count = 0; function
tracker(){ count++;
alert(count + " Mouse moves have been registered");
}
function popup1() {
alert("Event Registered : onMouseOver");
}
function popup2() {
alert("Event Registered : onMouseOut");
}
</script>
</head>
<body>
<p>Move the mouse over the link to trigger the event
<a href="#" onmouseover="popup1()"> onMouseOver</a></p>

<p>Move the mouse over the link to trigger the event

<a href="#" onmouseout="popup2()"> onMouseOver</a></p>

<p>Move the mouse over the button, it keeps a track of number of

times the mouse moves over the button</p>
<button onmouseover="tracker()">Move over this button </button>
</body>
</html>
******************************** OUTPUT
*************************************
JavaScript on Key event handler.

<!DOCTYPE HTML>
<html>
<head>
<title>Example: Working with form Events</title>
<style type="text/css">
p{font-family:Verdana;
background:#FA8B7C;
color:#fff;
padding:10px; border:4px solid #555;}
</style>
</head>
<body>
<form>
<p>
<label for="name"> Subject Name:
<input autofocus id="name" name="name" /></label>
</p>
<p>
<label for="nick"> Subject Abbrivation:
<input id="nick" name="nick" /></label>
</p>
<button type="submit">Submit</button>
</form>
<span id="output"></span>
</body>
<script>
var items = document.getElementsByTagName("input"); for
(var i=0; i < items.length; i++){
items[i].onkeyup = keyboardEventHandler;
}

function keyboardEventHandler(e){
document.getElementById("output").innerHTML = "Key pressed is: " +
e.keyCode + " Char:" + String.fromCharCode(e.keyCode);
}
</script>
</html>
 ******************************** OUTPUT
*************************************

VI. Resources required

Sr. No. Name of Specification Quantity Remarks
Resource
1 Computer Operating System: Windows 7 or
System higher Memory: 2 GB RAM or higher
Processor Speed: Intel core i3 or
higher Hard Drive: 500 GB or larger
2 Software Notepad++, Chrome

VII. Precautions

1. Handle Computer System carefully

2. Start and shutdown system with proper procedure

VIII. Resources Used

Sr.No. Name of Resource Specification
1. Computer System with broad specifications
2. Software
3. Any other resource used
XI Result :

…………………………………………………………………………………………

…………………………………………………………………………………………

XII. Conclusion(s)

…………………………………………………………………………………………

…………………………………………………………………………………………

…………………………………………………………………………………………
 XIII. Questions:-

1. Explain mouse events.

2. Explain the difference between onclick and ondblclick Event
3. Explain key events.

XIV. Exercise:-
1. Write a program to design a form and handle any 2 mouse Events.
2. Write a program to design a form and handle any 2 Key Events.
Blank Pages to Write
Blank Pages to Write
XV. References/Suggestions for further reading:-
1. Formhttps://www.w3schools.com/js/js_formevents.asp
2. https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/FormEvents

XVI. Assessment Scheme:-

Performance Indicators Weightag

e
Process Related (35 Marks) 70%
1. Logic Formation 30%
2. Debugging ability 30%
3. Following ethical practices 10%
Product Related (15 Marks) 30%
4. Expected Output 10%
5. Timely Submission 10%
6. Answer to sample questions 10%
Total(50 100%
Marks)

Marks Dated Sign of Teacher

Obtained
Process Related Process Related Total (50)
(35) (15)
Practical No.9: Develop a webpage using Intrinsic Java Function. Intrinsic Function:

 JavaScriprt provides some special set of built in function known sa Intrinsic function.

 The JavaScript provides the intrinsic function for Submit & Reset Button. It can be used
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.

Disabling Elements:

 JavaScript allows writing function to disable& enable elements on form.

 If disabled property of particular form element is set to true then user cannot edit that
element. Similarly, on setting property to false we can edit the field.
 An element can be disabled in HTML by setting property to true & enabled again by
setting disabled= false.

Read Only Elements:

 Some time we need to set some value to a field which user should not change.

 To restrict user form changing the value of particular field we make the element readonly by
setting readonly= true.

Conclusion: We understand that how to create a webpage using intrinsic

function.
JavaScript Intrinsic function.

<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.png" onclick
="javascript:document.forms.myforms.submit()"/><br><br/>
<img src= "Reset.png" onclick
="javascript:document.forms.myforms.submit()"/><br><br/>
</form>
</body>
</html>
******************************** OUTPUT
*************************************
JavaScript on Disabling Elements.

<html>
<script language="JavaScript"> function
Disable()
{
documents.forms.myform.name.disabled= true;
}
function Enable()
{
documents.forms.myform.name.disabled=false;
}
</script>
<form name="myform">
User Name : <input type= "text" name="name"/><br><br/>
<input type= "button" value="Disable Name Field" onclick="Disable()"/><br><br/>
<input type= "button" value="Enable Name Field"
onclick="Enable()"/><br><br/>
</form>
</body>
</html>
******************************** OUTPUT
*************************************
JavaScript Read Only Elements.

<html>
<head>
<script type="text/javascript">
function
ToggleReadOnlyState () {
var textarea = document.getElementById ("myText");
textarea.readOnly = !textarea.readOnly;
}
</script>
</head>
<body>
<textarea id="myText" rows="3" readonly="readonly">Change this
text!</textarea>

<br />
Click on the button to modify the editable state of the textarea element
<br />
<button onclick="ToggleReadOnlyState ();">Change read-only state!</button>
</body>
</html>

******************************** OUTPUT
*************************************
VI. Resources required
Sr. No. Name of Specification Quantity Remarks
Resource
1 Computer Operating System: Windows 7 or
System higher Memory: 2 GB RAM or higher
Processor Speed: Intel core i3 or
higher Hard Drive: 500 GB or larger
2 Software Notepad++, Chrome

VII. Precautions

1. Handle Computer System carefully

2. Start and shutdown system with proper procedure

VIII. Resources Used

Sr.No. Name of Resource Specification
1. Computer System with broad specifications
2. Software
3. Any other resource used

XI Result :

…………………………………………………………………………………………

…………………………………………………………………………………………

XII. Conclusion(s)

…………………………………………………………………………………………

…………………………………………………………………………………………

…………………………………………………………………………………………
 XIII. Questions:-

1. Explain intrinsic functions

2. Explain disabling of right mouse click with Example
Blank Pages to Write
Blank Pages to Write
XIV. References/Suggestions for further reading:-
1. Formhttps://www.w3schools.com/js/js_intrinsic.asp
2. https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Functions

XV. Assessment Scheme:-

Performance Indicators Weightag

e
Process Related (35 Marks) 70%
1. Logic Formation 30%
2. Debugging ability 30%
3. Following ethical practices 10%
Product Related (15 Marks) 30%
4. Expected Output 10%
5. Timely Submission 10%
6. Answer to sample questions 10%
Total(50 100%
Marks)

Marks Dated Sign of Teacher

Obtained
Process Related Process Related Total (50)
(35) (15)
 Practical No. 10: Develop a webpage for creating session and persistent cookies.

I. Practical Significance

Cookies are data, stored in small text files, on your computer. Cookies remember information about the
user. When a browser requests a web page from a server, cookies belonging to the page are added to the
request. This way the server gets the necessary data to "remember" information about users.

II. Relevant Program Outcomes (POs)

1. Discipline Knowledge: Apply Computer Programming knowledge to solve Computer Group

related problems.
2. Experiments and Practice: Plan to perform experiments and practices to solve Computer
Group related problems.
3. Engineering Tools: Apply relevant Computer Programming Technologies and Tools with an
understanding of the limitations.
4. Individual and team work: Function effectively as a leader and team member in
diverse/multidisciplinary teams
5. Life-long learning: Engage in independent and lifelong learning along with the technological
changes in CM/IT and allied industry.

III. Competency and Practical Skills:

This practical is expected to develop the following skills for the industry oriented competency
‘Develop a webpage for creating session and persistent cookies’.

IV. Relevant Course Outcome(s)

Create event based web forms using Java script.

VI. Relative Affective domain related Outcome(s)

1. Follow ethical practices
2. Demonstrate working as a leader/team member

VII. Minimum Theoretical Background

A. Cookies
• Cookies are data, stored in small text files, on the computer.
• Cookies remember information about the user like when a user visits a web page, his/her
name can be stored in a cookie, Next time the user visits the page, the cookie
"remembers" his/her name.

B. Contents of Cookie
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
C. CREATING A COOKIE

• JavaScript can create, read, and delete cookies with the document.cookie property.
Eg : document.cookie = "username=John Doe";
• You can also add an expiry date (in UTC time). By default, the cookie is deleted when the
browser is closed:
Eg : document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";
• With a path parameter, you can tell the browser what path the cookie belongs to. By default,
the cookie belongs to the current page.
Eg : document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00
UTC; path=/";
D. READING A COOKIE

• Reading a cookie is just as simple as writing one, because the value of the document.cookie
object is the cookie.
• 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.
E. DELETING A COOKIE

• Sometimes you will want to delete a cookie.

• To do this, you just need to set the expiry date to a time in the past.

F. TYPES OF COOKIE

• There are 2 types of Cookies available

1. Session Cookies: They are the cookies which do not have an expiry date. They are
deleted when the browser window is closed
2. Persistent Cookies : They are the cookies which have an expiry date and are deleted
on the date set.

VIII. Resources required

Sr.No. Name of Specification Quantity Remarks

Resource
1 Computer Operating System: Windows 7 or higher
System Memory: 2 GB RAM or higher
Processor Speed: Intel core i3 or higher
Hard Drive: 500 GB or larger
2 Software Notepad++, Chrome
IX. Precautions

1. Handle Computer System carefully

2. Start and shutdown system with proper procedure
X. Resources Used

Sr. No. Name of Resource Specification

1. Computer System with broad specifications
2. Software
3. Any other resource used

XI Result :

…………………………………………………………………………………………

…………………………………………………………………………………………

XII. Conclusion(s)

…………………………………………………………………………………………

…………………………………………………………………………………………

…………………………………………………………………………………………
XIII. Questions:-
1. Explain the types of Cookies.
2. Write a function to delete a cookie.
XIV. Exercise:-
1. Write a program to create a session cookie and display content of Cookie.
2. Write a JavaScript that creates persistent cookie.
Blank Pages to Write
Blank Pages to Write
XV. References/Suggestions for further reading:-
1. https://www.w3schools.com/js/js_cookies.asp
XVI. Assessment Scheme:-
Performance Indicators Weightage
1. Use of relevant tags and attributes 10%
2. Correctness of Coding 40%
3. Testing and Debugging of Program 30%
4. Appearance of Program Output 10%
5. Submission of Report on time 10%
Total(50 Marks) 100%

Marks Obtained Dated Sign of Teacher

Process Related (35) Product Related (15) Total(50)

 Practical No. 11. Develop a webpage for placing the window on screen
and working with child window.

I. Practical Significance

Windows play an important role in websites. Many a times it is required to open and display anew window
for displaying details or for doing some additional work. We can open a small window known as child
window by clicking a button or a link or a image of a main window.

II. Relevant Program Outcomes (POs)

1. Discipline Knowledge: Apply Computer Programming knowledge to solve Computer Group

related problems.
2. Experiments and Practice: Plan to perform experiments and practices to solve Computer
Group related problems.
3. Engineering Tools: Apply relevant Computer Programming Technologies and Tools with an
understanding of the limitations.
4. Individual and team work: Function effectively as a leader and team memberin
diverse/multidisciplinary teams
5. Life-long learning: Engage in independent and lifelong learning along with the technological
changes in CM/IT and allied industry.

III. Competency and Practical Skills:

This practical is expected to develop the following skills for the industry oriented competency
‘Develop a webpage for placing the window on screen and working with child window’.

IV. Relevant Course Outcome(s)

Use Java script for handling cookies.

VI. Relative Affective domain related Outcome(s)

1. Follow ethical practices
2. Demonstrate working as a leader/team member

VII. Minimum Theoretical Background

A. Window
• We can open a small window known as child window by clicking a button or a link or a image
of a main window. We can control the width, height and location (alignment from top left
corner of the screen) of the small window from the main window.
• Here we can control the status bar, tool bar and resize the child window from the main window.
By changing the value of status to 1 from 0 (status=1;) we can display the status bar for the
child window. Same way by making the toolbar=1; we can display the tool bars for the small
window.
• We can change the value of left to position the window horizontally. If we make the value of
left to 0 like left=0; to align the window to left edge of the screen. Same way by making the
top=0; we can place the window at the top of the screen.
It is possible to open a new browser window from a currently running JavaScript. One can
determine the size, location of this window, toolbar, scroll bar or any other style that normally
the browser windows have.
• Once the new browser window is set up, it is possible to change the contents within that
 window dynamically.
B. Opening a Window
• It is possible to open a new window from a JavaScript by simply clicking a button.
• For that purpose the window object is used. This window object has various useful
properties & methods.
• To open a new windows we use open() method of window object.
Syntax: window.open(url, name, style);
url: An URL to load into the new window.
Name: A name of the new window. Each window has a window.name, and here we can
specify which window to use for the popup. If there’s already a window with such name
the given URL opens in it, otherwise a new window is opened.
style: The style of window includes various parameters such as menubar, toolbar, location,
status, resizable, scrollbars, height & width of window

C. The Arguments:

• You have a number of options for the third argument. When you define any of
them, the remaining Boolean values (which can be true/false or yes/no or 1/0) are
all set to false/no/0.
• Whichever you choose to use, all of your options go into the same quoted string,
with commas between the values, and no spaces are allowed between them.
▪ Height: Defines the height of the window in pixels. Percentage values don't
work.
▪ Width: Defines the width. Again, you'll have no joy with percentages.
▪ Left: Supported by version 4 browsers and above, this sets how far removed
the window appears from the left of the screen. In pixels.
▪ Top: Partner to left, this pushes the window off the top of the screen.
▪ Resizable:Set to true or false, this may allow the user to resize the window.
▪ Scrollbars: Another Boolean value, this adds scrollbars to the new window.
If your content may be longer then the dimensions you've specified, make
sure this is set to yes.
▪ Toolbar: Specifies whether the basic back/forward toolbar should be visible.
If there are links to follow in your new page, set this to yes.
▪ Menubar: Specifies whether the main toolbar (File, Edit, ...) is shown.
▪ Location: Specifies whether the location toolbar (address bar) is shown.
▪ Status: Specifies whether the new window can have a status bar. Best set to
yes. For security reasons, Mozilla-based browsers always show the status
bar.
▪ Directories: Specifies whether the directories toolbar is shown (Links toolbar
in IE).
▪ Fullscreen: Internet Explorer-only Boolean attribute which may open the
window in fullscreen. It's annoying — don't use it.
▪ Dependent: Netscape 4-only attribute which makes the popup dependent on
the status of the main window. If the main window is closed, the popup
closes with it.
▪ screenX & screen: Old Netscape attributes for defining the window's position on the
page. Use left and top in their place.

D. The Methods: Following methods can be used with the window object.
Method Description
alert() Displays an alert box with a message and an OK button
atob() Decodes a base-64 encoded string
blur() Removes focus from the current window
btoa() Encodes a string in base-64
clearInterval() Clears a timer set with setInterval()
clearTimeout() Clears a timer set with setTimeout()
close() Closes the current window
confirm() Displays a dialog box with a message and an OK and a Cancel button
focus() Sets focus to the current window
getComputedStyle() Gets the current computed CSS styles applied to an element
getSelection() Returns a Selection object representing the range of text selected by the user
matchMedia() Returns a MediaQueryList object representing the specified CSS media query
string
moveBy() Moves a window relative to its current position
moveTo() Moves a window to the specified position
open() Opens a new browser window
print() Prints the content of the current window
prompt() Displays a dialog box that prompts the visitor for input
requestAnimationFrame() Requests the browser to call a function to update an animation before the next
repaint
resizeBy() Resizes the window by the specified pixels
resizeTo() Resizes the window to the specified width and height
scroll() Deprecated. This method has been replaced by the scrollTo() method.
scrollBy() Scrolls the document by the specified number of pixels
scrollTo() Scrolls the document to the specified coordinates
setInterval() Calls a function or evaluates an expression at specified intervals (in
milliseconds)
setTimeout() Calls a function or evaluates an expression after a specified number of
milliseconds
stop() Stops the window from loading

VIII. Resources required

Sr.No. Name of Specification Quantity Remarks

Resource
1 Computer Operating System: Windows 7 or higher
System Memory: 2 GB RAM or higher
Processor Speed: Intel core i3 or higher
Hard Drive: 500 GB or larger
2 Software Notepad++, Chrome
IX. Precautions

1. Handle Computer System carefully

2. Start and shutdown system with proper procedure
X. Resources Used

Sr. No. Name of Resource Specification

1. Computer System with broad specifications
2. Software
3. Any other resource used

XI Result :

…………………………………………………………………………………………

…………………………………………………………………………………………

XII. Conclusion(s)

…………………………………………………………………………………………

…………………………………………………………………………………………

…………………………………………………………………………………………
XIII. Questions:-
1. Explain any 4 methods used with window object along with their syntax.
2. Write a JavaScript to display digital clock in the new window.
XIV. Exercise:-
1. Write a program to design a form to accept height and width and 3 buttons as “Create Window”,
“Move Window” and “Resize window”
Blank Pages to Write
Blank Pages to Write
XV. References/Suggestions for further reading:-
1. https://www.w3schools.com/jsref/obj_window.asp
2. https://developer.mozilla.org/en-US/docs/Web/API/Window
XVI. Assessment Scheme:-
Performance Indicators Weightage
1. Use of relevant tags and attributes 10%
2. Correctness of Coding 40%
3. Testing and Debugging of Program 30%
4. Appearance of Program Output 10%
5. Submission of Report on time 10%
Total(50 Marks) 100%

Marks Obtained Dated Sign of Teacher

Process Related (35) Product Related (15) Total(50)

 Practical No. 12. Develop a webpage for validation of form fields using regular
expression.

I. Practical Significance

A regular expression is an object that describes a pattern of characters. The JavaScript RegExp class
represents regular expressions, and both String and RegExp define methods that use regular expressions
to perform powerful pattern-matching and search-and-replace functions on text. It has wide use in search
and replace applications.

II. Relevant Program Outcomes (POs)

1. Discipline Knowledge: Apply Computer Programming knowledge to solve Computer Group

related problems.
2. Experiments and Practice: Plan to perform experiments and practices to solve Computer
Group related problems.
3. Engineering Tools: Apply relevant Computer Programming Technologies and Tools with an
understanding of the limitations.
4. Individual and team work: Function effectively as a leader and team member in
diverse/multidisciplinary teams
5. Life-long learning: Engage in independent and lifelong learning along with the technological
changes in CM/IT and allied industry.

III. Competency and Practical Skills:

This practical is expected to develop the following skills for the industry oriented competency
‘Develop a webpage for validation of form fields using regular expression’.

IV. Relevant Course Outcome(s)

Create interactive webpage using regular expressions for validations.

VI. Relative Affective domain related Outcome(s)

1. Follow ethical practices
2. Demonstrate working as a leader/team member

VII. Minimum Theoretical Background

A. Regular Expression
• A regular expression is an object that describes a pattern of characters
• Syntax: A regular expression could be defined with the RegExp () constructor, as follows
var pattern = new RegExp(pattern, attributes);
var pattern = /pattern/attributes;
Here is the description of the parameters −
pattern − A string that specifies the pattern of the regular expression or another regular
expression.
attributes − An optional string containing any of the "g", "i", and "m" attributes that specify
global, case-insensitive, and multi-line matches, respectively
B. Language of Regular Expression
• The words of regular expression are called special character. Various special characters
that can be used in regular expression along with their meaning are shown in following
table:

C. Methods of Regular Expression:

• You have a number of methods that can be used with regular expressions as
follows:
VIII. Resources required

Sr.No. Name of Specification Quantity Remarks

Resource
1 Computer Operating System: Windows 7 or higher
System Memory: 2 GB RAM or higher
Processor Speed: Intel core i3 or higher
Hard Drive: 500 GB or larger
2 Software Notepad++, Chrome

IX. Precautions

1. Handle Computer System carefully

2. Start and shutdown system with proper procedure

X. Resources Used

Sr. No. Name of Resource Specification

1. Computer System with broad specifications
2. Software
3. Any other resource used

XI Result :

…………………………………………………………………………………………

…………………………………………………………………………………………

XII. Conclusion(s)

…………………………………………………………………………………………

…………………………………………………………………………………………

…………………………………………………………………………………………

XIII. Questions:-
1. Explain regular expressions with its syntax.
2. Explain the different metacharachters and quantifiers that can be used in regular expression.

XIV. Exercise:-
1. Write a program to perform form validation for a registration form using regular expressions
2. Write a JavaScript to count the number of vowels in a given string using regular expression
3. Write a JavaScript to check whether the first letter if the string is capitalized or not
Blank Pages to Write
Blank Pages to Write
XV. References/Suggestions for further reading:-
1. http://www.tutorialspark.com/javascript/JavaScript_Regular_Expression_Form_Validation.php
2. http://form.guide/snippets/javascript-form-validation-using-regular-expression.html

XVI. Assessment Scheme:-

Performance Indicators Weightage

1. Use of relevant tags and attributes 10%
2. Correctness of Coding 40%
3. Testing and Debugging of Program 30%
4. Appearance of Program Output 10%
5. Submission of Report on time 10%
Total(50 Marks) 100%

Marks Obtained Dated Sign of Teacher

Process Related (35) Product Related (15) Total(50)

 Practical No. 13. Create a webpage with rollover effect.

I. Practical Significance

Rollover is a JavaScript technique used by Web developers to produce an effect in which the appearance
of a graphical image changes when the user rolls the mouse pointer over it. Rollover also refers to a button
on a Web page that allows interactivity between the user and the Web page.It is mainly used by developers
for advertising purpose.

II. Relevant Program Outcomes (POs)

1. Discipline Knowledge: Apply Computer Programming knowledge to solve Computer Group

related problems.
2. Experiments and Practice: Plan to perform experiments and practices to solve Computer
Group related problems.
3. Engineering Tools: Apply relevant Computer Programming Technologies and Tools with an
understanding of the limitations.
4. Individual and team work: Function effectively as a leader and team member in
diverse/multidisciplinary teams
5. Life-long learning: Engage in independent and lifelong learning along with the technological
changes in CM/IT and allied industry.

III. Competency and Practical Skills:

This practical is expected to develop the following skills for the industry oriented competency
‘Create a webpage with rollover effect’.

IV. Relevant Course Outcome(s)

Create interactive webpage using regular expressions for validations.

VI. Relative Affective domain related Outcome(s)

1. Follow ethical practices
2. Demonstrate working as a leader/team member

VII. Minimum Theoretical Background

A. Concept of 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.
• Rollover is a JavaScript technique used by Web developers to produce an effect in which the appearance
of a graphical image changes when the user rolls the mouse pointer over it.
• Rollover also refers to a button on a Web page that allows interactivity between the user and the Web
page.
• Rollover effect is mainly used in web page designing for advertising purpose.  Rollover is triggered
when the mouse moves over the primary image, causing the secondary image to appear. The primary
image reappears when the mouse is moved away.
 B. Creating Rollover
• On many web pages JavaScript rollovers are handled by adding an onmouseover and
onmouseout event on image.
1. onmouseover : event occurs when a mouse pointer comes over an element.
2. onmouseout – event occurs when a mouse pointer leaves an element

C. Text Rollover:

• Text rollover is a technique in which whenever user rollover the text, Javascript
allows to change the page element usually some graphics.

D. Multiple Actions for Rollover:

• Suppose user is rolling the cursor over the text, then instead of simply changing
the image we can display more window displaying some features about the item
on which mouse is rolling over. This process is called as Multiple Actions For
Rollover.
• Duo to this effect visitor gets more information at a glance.
• We can open additional window using function Open(). This function is invoking
using the object window.
• The open() method opens a new browser window. The close() window closes the
window..

VIII. Resources required

Sr.No. Name of Specification Quantity Remarks

Resource
1 Computer Operating System: Windows 7 or higher
System Memory: 2 GB RAM or higher
Processor Speed: Intel core i3 or higher
Hard Drive: 500 GB or larger
2 Software Notepad++, Chrome
IX. Precautions

1. Handle Computer System carefully

2. Start and shutdown system with proper procedure

X. Resources Used

Sr. No. Name of Resource Specification

1. Computer System with broad specifications
2. Software
3. Any other resource used
XI Result :

…………………………………………………………………………………………

…………………………………………………………………………………………

XII. Conclusion(s)

…………………………………………………………………………………………

…………………………………………………………………………………………

…………………………………………………………………………………………
XIII. Questions:-
1. Explain what s rollover.
2. Which methods are used for generating the rollover effect. State the syntax
XIV. Exercise:-
1. Write a program to demonstrate the example of image rollover
2. Write a program to demonstrate the example of text rollover
3. Write a program to demonstrate the example of image and text rollover
Blank Pages to Write
Blank Pages to Write
XV. References/Suggestions for further reading:-
1. https://www.w3schools.com/jsref/event_onmouseover.asp
2. http://www.dhtmlgoodies.com/tutorials/javascript-rollovers/

XVI. Assessment Scheme:-

Performance Indicators Weightage
1. Use of relevant tags and attributes 10%
2. Correctness of Coding 40%
3. Testing and Debugging of Program 30%
4. Appearance of Program Output 10%
5. Submission of Report on time 10%
Total(50 Marks) 100%

Marks Obtained Dated Sign of Teacher

Process Related (35) Product Related (15) Total(50)

 Practical No. 14. Develop a webpage for implementing Menus.

I. Practical Significance

The Menu element represents a group of commands that a user can perform or activate. Menu may
contain multiple choices to select. User can choose one or more menu at a time depending on type of
menu. It is an important element to perform navigation.

II. Relevant Program Outcomes (POs)

1. Discipline Knowledge: Apply Computer Programming knowledge to solve Computer Group

related problems.
2. Experiments and Practice: Plan to perform experiments and practices to solve Computer
Group related problems.
3. Engineering Tools: Apply relevant Computer Programming Technologies and Tools with an
understanding of the limitations.
4. Individual and team work: Function effectively as a leader and team member in
diverse/multidisciplinary teams
5. Life-long learning: Engage in independent and lifelong learning along with thetechnological
changes in CM/IT and allied industry.

III. Competency and Practical Skills:

This practical is expected to develop the following skills for the industry oriented competency
‘Develop a webpage for implementing Menus’

IV. Relevant Course Outcome(s)

Create Menus and Navigations in Webpage..

VI. Relative Affective domain related Outcome(s)

1. Follow ethical practices
2. Demonstrate working as a leader/team member

VII. Minimum Theoretical Background

A. Menu
• Menus are an important element to provide navigations in WebPages
• It provides quick link for browsing the desired web pages
• Different types of Menus can be implemented depending on the requirements
.
B. Types of Menus
• It is possible to open a new window from a JavaScript by simply clicking a button.
1. Pull down Menu : Also called a drop-down menu, a menu of commands or options
that appears when you select an item with a mouse
2. Floating Menu: The menu which is fixed while scrolling the webpage is called as
floating menu. It can be created by setting style position of menu as fixed.
3. Chain Select Menu: A chain of pull-down menus can be created in which the option
selected from the first pull-down menu determines the options that are available in
the second pull-down menu. Likewise, the second pull-down menu selection
 determines options that are shown in the third pull-down menu.
4. Tab Menu: Tab menus display a one- or two-word description of the menu option
within a tab. A more complete description is displayed below the tab bar as the
visitor moves the mouse cursor over the tab
5. Popup Menu: A popup menu displays several top-level menu items. A popup menu
appears as the visitor moves the mouse cursor over a top-level menu item. The
popup menu contains lower-level menu items that are associated with the top-level
menu item.
6. Highlighted Menu: A highlighted menu, causes two kinds of highlights to appear
around an item on the menu. When the visitor moves the cursor over a menu item,
the browser displays a box around the item with a shadow at the bottom of the box.
If the visitor selects the item, the highlight shadow appears at the top of the box
rather than at the bottom of the box.
7. Folding Tree Menu: The folding tree menu should look familiar, because it is a
classic menu used in desktop applications to help you to navigate file folders. The
tree consists of one or more closed folders, each of which appears alongside the
folder's name. The tree expands when the visitor clicks a closed folder, showing one
or more menu options that are associated with the folder.
8. Context Menu :The context menu pops up on the web page when the visitor clicks
the right mouse button . The location of the context menu on the screen is
determined by the position of the mouse cursor. The mouse cursor sets the position
of the upper-left corner of the context menu. Each menu item is automatically
highlighted as the visitor scrolls through the menu by moving the mouse cursor. The
visitor clicks the name of the item to select that menu option. The context menu is
hidden from the screen by clicking the mouse cursor away from the menu. You can
link each of these options to another web page or to a bookmark within the web
page that contains the tree menu. The tree collapses when the visitor clicks an open
folder.
9. Scrollable Menu: If you are tight on space and have many menu items to present to
visitors to your web site, the scrollable menu is the solution to your problem. The
scrollable menu displays a limited number of menu item across the web page.
Although only a few items are shown, you can use as many menu items as your
application needs. Two arrowheads appear at both ends of the visible list of menu
items. Visitors can simply move the mouse cursor over one of the arrowheads and
the browser automatically scrolls the menu in the direction of the arrowhead The
visitor can then click the appropriate menu item once it scrolls into view.
10. Side Bar Menu: The side bar menu displays a menu on the side of the web page.
Options on this menu can be linked to other web pages or to other menu options.
11. Slide-In Menu/Sliding Menu: The slide-in menu appears as a vertical block that
floats on the left side of the web page. It seems to come alive when the visitor
moves the mouse cursor over the block.
VIII. Resources required

Sr.No. Name of Specification Quantity Remarks

Resource
1 Computer Operating System: Windows 7 or higher
System Memory: 2 GB RAM or higher
Processor Speed: Intel core i3 or higher
Hard Drive: 500 GB or larger
2 Software Notepad++, Chrome

IX. Precautions

1. Handle Computer System carefully

2. Start and shutdown system with proper procedure
X. Resources Used

Sr. No. Name of Resource Specification

1. Computer System with broad specifications
2. Software
3. Any other resource used

XI Result :

…………………………………………………………………………………………

…………………………………………………………………………………………

XII. Conclusion(s)

…………………………………………………………………………………………

…………………………………………………………………………………………

…………………………………………………………………………………………
XIII. Questions:-
1. Explain any 4 methods types of Menu.
2. State the difference between sidebar menu and sliding menu.
XIV. Exercise:-
1. Write a program to design pull down menu using JavaScript.
2. Write a program to design drop down menu using JavaScript.
Blank Pages to Write
Blank Pages to Write
XV. References/Suggestions for further reading:-
1. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown
2. https://www.w3schools.com/howto/howto_js_dropdown.asp
XVI. Assessment Scheme:-
Performance Indicators Weightage
1. Use of relevant tags and attributes 10%
2. Correctness of Coding 40%
3. Testing and Debugging of Program 30%
4. Appearance of Program Output 10%
5. Submission of Report on time 10%
Total(25 Marks) 100%

Marks Obtained Dated Sign of Teacher

Process Related (15) Product Related (10) Total(25)

 Practical No. 15. Develop a webpage for implementing Status bars
and Web Page Protection.

I. Practical Significance

The status bar is located at the bottom of the browser window and is used to display a short message to
visitors to your web page. Web page protection plays an important role in securing the data.

II. Relevant Program Outcomes (POs)

1. Discipline Knowledge: Apply Computer Programming knowledge to solve Computer Group

related problems.
2. Experiments and Practice: Plan to perform experiments and practices to solve Computer
Group related problems.
3. Engineering Tools: Apply relevant Computer Programming Technologies and Tools with an
understanding of the limitations.
4. Individual and team work: Function effectively as a leader and team member in
diverse/multidisciplinary teams
5. Life-long learning: Engage in independent and lifelong learning along with thetechnological
changes in CM/IT and allied industry.

III. Competency and Practical Skills:

This practical is expected to develop the following skills for the industry oriented competency
‘Develop a webpage for implementing Status bars and Web Page Protection’

IV. Relevant Course Outcome(s)

Create Menus and Navigations in Webpage.

VI. Relative Affective domain related Outcome(s)

1. Follow ethical practices
2. Demonstrate working as a leader/team member

VII. Minimum Theoretical Background

A. Status Bars
• A static message appears when the web page opens and remains on the status bar until the
web page is closed.
• The content of the status bar is the value of the window object's status property. To display a
message on the status bar, you'll need to assign the message to the status property of the
window object.
• The following statement assigns a string to the status property, which appears on the status
bar once the browser executes this statement:
• window.status=‘Welcome to Status Bar. This is Static Message.'
 B. Protecting web pages:

• The source code of a web page can be viewed by clicking right mouse button on the
webpage.
• Anyone can see the source code of a webpage which is not safe.
• We can hide the code by disabling right mouse click on webpage.
• Hiding source code is nothing but protecting the source code from viewing by other users.

VIII. Resources required

Sr. No. Name of Specification Quantity Remarks

Resource
1 Computer Operating System: Windows 7 or higher
System Memory: 2 GB RAM or higher
Processor Speed: Intel core i3 or higher
Hard Drive: 500 GB or larger
2 Software Notepad++, Chrome

IX. Precautions

1. Handle Computer System carefully

2. Start and shutdown system with proper procedure

X. Resources Used

Sr. No. Name of Resource Specification

1. Computer System with broad specifications
2. Software
3. Any other resource used

XI Result :

…………………………………………………………………………………………

…………………………………………………………………………………………

XII. Conclusion(s)

…………………………………………………………………………………………

…………………………………………………………………………………………

…………………………………………………………………………………………
XIII. Questions:-
1. Explain security in JavaScript.
2. State the use of status bars

XIV. Exercise:-
1. Write a JavaScript program that creates a scrolling text on the status line of a window.
2. Write a JavaScript program to disable right click of mouse.
Blank Pages to Write
Blank Pages to Write
XV. References/Suggestions for further reading:-
1. https://www.w3schools.com/jsref/prop_win_status.asp
2. https://stackoverflow.com/questions/737022/how-do-i-disable-right-click-on-my-web-page

XVI. Assessment Scheme:-

Performance Indicators Weightage

1. Use of relevant tags and attributes 10%
2. Correctness of Coding 40%
3. Testing and Debugging of Program 30%
4. Appearance of Program Output 10%
5. Submission of Report on time 10%
Total(50 Marks) 100%

Marks Obtained Dated Sign of Teacher

Process Related (35) Product Related (15) Total(50)

 Practical No. 16. Develop a webpage for implementing Banner,
Slideshow.

I. Practical Significance

The banner advertisement is the hallmark of every commercial web page. It is typically positioned near
the top of the web page, and its purpose is to get the visitor's attention. A slideshow is used to cycle
through element.

II. Relevant Program Outcomes (POs)

1. Discipline Knowledge: Apply Computer Programming knowledge to solve Computer Group

related problems.
2. Experiments and Practice: Plan to perform experiments and practices to solve Computer
Group related problems.
3. Engineering Tools: Apply relevant Computer Programming Technologies and Tools with an
understanding of the limitations.
4. Individual and team work: Function effectively as a leader and team member in
diverse/multidisciplinary teams
5. Life-long learning: Engage in independent and lifelong learning along with thetechnological
changes in CM/IT and allied industry.

III. Competency and Practical Skills:

This practical is expected to develop the following skills for the industry oriented competency
‘Develop a webpage for implementing Slideshow, Banner’

IV. Relevant Course Outcome(s)

Create Menus and Navigations in Webpage.

VI. Relative Affective domain related Outcome(s)

1. Follow ethical practices
2. Demonstrate working as a leader/team member

VII. Minimum Theoretical Background

A. Banner

• They are used for promoting advertisements in WebPages

• Nearly all banner advertisements are in a file format such as a GIF, JPG, TIFF, or other
common graphic file formats.
• Some are animated GIFs, which is a series of images contained in one file that rotate
automatically on the screen.
• Some are Flash movies that require the visitor to have a browser that includes a Flash plug-in.
• You need to do three things to incorporate a banner advertisement in your web page:
1. Create several banner advertisements using a graphics tool such as PhotoShop. You'll
want to make more than one advertisement so you can rotate them on your web page
using a JavaScript.
 2. Create an <img> element in your web page with the height and width necessary to
display the banner advertisement.
3. Build a JavaScript that loads and displays the banner advertisements in conjunction
with the <img> element.

B. Loading and Displaying Banner Advertisements:

• The banners should all be the same size so they look professional as they rotate on your web
page.create an image element on your web page using the <img> tag. You'll need to set four
attributes of the <img> tag: src, width, height, and name
• Set the src attribute to the file name of the first banner advertisement that you want to
display. Set the width and height attributes to the width and height of the banner. Set the
name attribute to a unique name for the image element.
• The image element (banner) should be centered in the page using the <center> tag within the
<body> tag of your web page.
• The final step is to build the JavaScript that will rotate the banners on your web page. You'll
define the JavaScript in the <head> tag of the web page. The JavaScript must do the
following:
1. Load banner advertisements into an array.
2. Determine whether the browser supports the image object.
3. Display a banner advertisement.
4.Pause before displaying the next banner advertisement.

C. SlideShow
• A slide show is a presentation of a series of still images on a projection screen or electronic
display device, typically in a prearranged sequence.
• It is generally used for display purpose where a set of images are displayed one after the
another. They may be used to convey information to user in pictorial forms

VIII. Resources required

Sr. No. Name of Specification Quantity Remarks

Resource
1 Computer Operating System: Windows 7 or higher
System Memory: 2 GB RAM or higher
Processor Speed: Intel core i3 or higher
Hard Drive: 500 GB or larger
2 Software Notepad++, Chrome

IX. Precautions

1. Handle Computer System carefully

2. Start and shutdown system with proper procedure
X. Resources Used
 Sr. No. Name of Resource Specification
1. Computer System with broad specifications
2. Software
3. Any other resource used

XI Result :

…………………………………………………………………………………………

…………………………………………………………………………………………

XII. Conclusion(s)

…………………………………………………………………………………………

…………………………………………………………………………………………

…………………………………………………………………………………………
XIII. Questions:-
1. Explain the use of banners in websites.
2. How to create a slide show in javascript?
Blank Pages to Write
Blank Pages to Write
XIV. Exercise:-
1. Develop a JavaScript Program to Create Rotating Banner Ads with URL Links.
2. Create a slideshow with the group of four images, also simulate the next and previous
transition between slides in your JavaScript.
XV. References/Suggestions for further reading:-
https://javascript-tutor.net/index.php/lesson-28-managing-banner-ads-in-javascript

XVI. Assessment Scheme:-

Performance Indicators Weightage
1. Use of relevant tags and attributes 10%
2. Correctness of Coding 40%
3. Testing and Debugging of Program 30%
4. Appearance of Program Output 10%
5. Submission of Report on time 10%
Total(25 Marks) 100%

Marks Obtained Dated Sign of Teacher

Process Related (15) Product Related (10) Total(25)