CM5I CSS 22519 Nibe Sir, CM Dept.

Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

Institute Vision and Mission

Institute Vision:
To provide quality technical education to rural students.
Institute Mission:
M1: To impart trainings for developing hands on skills.
M2: To develop technical skills by practicing the best teaching-learning pedagogies.
M3: To enhance career opportunities through industry connect.

Department of Computer Technology: Vision and Mission

Program Vision:
To provide quality technical education in the computer engineering field that prepares the rural
students for socio-economic development
Program Mission:
M1: To impart technical skills to solve problems in the field of computer engineering.
M2: To mould the students as computer professionals through the teaching - learning process.
M3: To create career opportunities through industry interaction and higher education.

Department of Computer Technology: PSOs (Program Specific Outcomes)

PSO1: Use concepts of fundamental engineering, hardware and software to solve engineering
problems.
PSO2: Design and develop quality software product for multidisciplinary industry.
PSO3: Apply programming skills to meet the growing needs of computer profession.

Department of Computer Technology: PEOs (Program Educational Objectives)

PEO1: Provide programming skills to develop solutions for the ever changing information technology
field.
PEO2: Adapt broad based programming technologies to work in multidisciplinary work
environments.
PEO3: Create opportunities for higher education through teaching learning process.

1
 CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

Unit 1: Basics of JavaScript Programming (12 Marks)

CO1: C5-22519-1: Create interactive web pages using program flow control structure.

*What is JavaScript?
JavaScript is the Programming Language for the Web (web-based applications and web
browsers).
JavaScript can update and change both HTML and CSS.
JavaScript can calculate, manipulate and validate data.
JavaScript is a text-based programming language used both on the client-side and server-
side that allows you to make web pages interactive.
HTML and CSS are languages that give structure and style to web pages, JavaScript gives
web pages interactive elements that engage a user.
Example of JavaScript: the search box on Amazon.

 JavaScript is used for:

1. Adding interactive behaviour to web pages
 Show or hide more information with the click of a button
 Change the color of a button when the mouse hovers over it
 Slide through a carousel of images on the homepage
 Zooming in or zooming out on an image
 Displaying a timer or count-down on a website
 Playing audio and video in a web page
 Displaying animations
 Using a drop-down hamburger menu
2. Creating web and mobile apps
Developers can use various JavaScript frameworks for developing and building web and
mobile apps.
A few famous examples include Paypal, LinkedIn, Netflix, and Uber!
3. Building web servers and developing server applications
Beyond websites and apps, developers can also use JavaScript to build simple web servers
and develop the back-end infrastructure using Node.js.
4. Game development
JavaScript is used to create browser games.

2
 CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

 Features of JavaScript:
1. Validating User’s Input:
It has the capability to validate user input for errors and also saves time.
If the user leaves a required field empty or the information is incorrect, JavaScript checks for
them before sending the data over to the server.

2. Simple Client-side Calculations:

Since JavaScript is a client-side technology, it can perform basic calculations on the browser.
The browser does not need to ask server time for every task.

3. Greater Control:
JavaScript provides greater control to the browser rather than being completely dependent
on the web servers.

4. Platform Independent:
Since browsers interpret JavaScript, it can run on Windows, Macintosh, and other Netscape-
supported systems.

5. Handling Dates and Time:

Unlike other programming languages, JavaScript has built-in functions to determine the date
and time. Thus it is very easy to code only by using methods like .getDate().

6. Generating HTML Content:

JavaScript has very handy features to dynamically generate HTML content for the web. It
allows us to add text, links, images, tables, etc after an event occurrence.
(Ex: mouse click).

7. Detecting the User’s Browser and OS:

JavaScript is very capable in the detection of the user’s browser and OS information.

8. Let / Const:
JavaScript has introduced the keywords ‘let’ and ‘const’ that are available to replace ‘var’.
Unlike ‘var’, they are important due to their blocked scope i.e we can only access them in the
block we defined them in. Whereas ‘var’, even if we initialize it inside a function, we can
access it outside of the function.

3
 CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

*JavaScript Objects:
 Object:
Object is a real time entity. i.e. real-world object.
Example: car, person, student, etc.
JavaScript objects are containers for named values called properties or methods.
In real life, a car is an object.
Ex: var car; (“var” is used to declare the variable)

 Property:
A property is an association between a name and a value.
Name, color, model these are the properties of a car object.
Ex: car.type=”skoda”;
car.color=”black”;
car.model=”rapid”;

 Method:
A method is an action which an object is able to perform.
Start, stop these are the methods of car object.
Ex: car.start();
car.stop();

Program:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<script>
var car = {type:"skoda", model:"rapid", color:"black"}; //object creation
document.write("The car type is " + car.type+"</br>"); // display some data from the object
document.write("The car model is " + car.model+"</br>");
document.write("The car color is " + car.color+"</br>");
</script>
</body>
</html>

Output:
The car type is skoda
The car model is rapid
The car color is black

4
 CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

 Dot syntax:
To access an object, property, or method, its reference must include every object that
contains it, separated by a dot. This is called the "dot syntax".

Ex: car have a property name and method start, then

car.name; //the property can be accessed using dot(.)

car.start();

Program on dot syntax:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Getters and Setters</h2>
<script>
var car={price:1};
car.price=car.price+1;
document.write(""+car.price+"");
</script>
</body>
</html>

Output: 2

5
 CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

*Values and Variables (Data Type(s)) in JavaScript:

Data type used in JavaScript is “var” (variable).
JavaScript variables are containers for storing data values.
Ex: if x is variable then declare it as:
var x=17; (x is the variable declared by “var” and 5 is the value of that variable)
var car=”skoda”;
var car.type=”skoda”;

Sample Program:
For JavaScript coding follow the steps below:
Use Tryit editor OR
Open the Notepad, type the program and save the file as filename.html.
It creates the browser file, to run the program open the browser file.
For writing program use the <script> tag.

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Variables</h2>
<p>In this example, x, y, and z are variables</p>
<p id="demo"></p>
<script>
var x = 17; //declaration of variable and assigning value
var y = 6;
var z = x + y; //variable z stores the result
document.write("Addition of " + x +" and " + y +" is = " + z + ""); //document.write is used to
display the message or output (result)
</script>
</body>
</html>

Output:
JavaScript Variables
In this example, x, y, and z are variables.
Addition of 17 and 6 is = 23

6
 CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

*Prompt, alert and confirm box:

 Prompt box:
A prompt box is used to accept the values from user.
When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed
after entering an input value.
If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box
returns null.
 Alert box:
An alert box is used to display the messages.
 Confirm box:
A confirm box is often used if you want the user to verify or accept something.
When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed.
If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box
returns false.

Program on prompt, alert and confirm:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>prompt, alert and confirm </h2>
<script>
var a = parseInt(prompt("Enter value of a: ")); //accepts the input from user and convert to integer
var b = parseInt(prompt("Enter value of b: "));
var addition;
addition = a + b;
if (confirm("Do you want to display the result?")) //verify
{
alert("The addition is: "+addition+""); //display the message
}
else
{
document.write("You pressed Cancel");
}
</script>
</body>
</html>

7
 CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

*Operators in JavaScript:
1. Assignment Operators:
An assignment operator assigns a value to its left operand based on the value of its right
operand. The simple assignment operator is equal (=), which assigns the value of its right
operand to its left operand.
Ex: x = y; //assigns the value of y to x

2. Arithmetic Operators:
a. addition (+) e. remainder (%)
b. subtraction (-) f. increment (++)
c. multiplication (*) g. decrement (--)
d. division (/) h. Exponentiation operator (**) (power)

Arithmetic Operator Description Example

Addition Operator (+) “+” operator is used two or more values var x=6, y=4, z;
z=x + y; (z=10)
Subtraction Operator (-) “-” operator is used to subtract two or var x=6, y=4, z;
more values. z=x – y; (z=2)
Multiplication Operator “*” operator is used to multiply two or var x=6, y=4, z;
(*) more values. z=x * y; (z=24)
Division Operator (/) “/” operator is used to divide two or var x=6, y=4, z;
more values. z=x / y; (z=1.5)
Remainder (modulus) “%” operator is used to calculate the var x=6, y=4, z;
Operator (%) remainder after division. z=x % y; (z=2)
Increment Operator (++) “++” operator is used to increment the var x=6, z;
value. (by default, it increments the z=++x; (z=7)
value by 1) z=++x+1; (z=8)
Decrement Operator (--) “--” operator is used to decrement the var x=6, z;
value. (by default, it decrements the z=--x; (z=5)
value by 1) z=--x-1; (z=4)
Exponentiation operator “**” operator is used to calculate the var x=6, y=2, z;
(**) power of given number. z=x**y; (z=36)

8
 CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

Program on Assignment & Arithmetic operators:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Performing Arithmetic Operations </h1>
<script>
var a = 4, b = 2, c=5, d=6, x, y;
var addition, subtraction, multiplication, division, remainder, increment, decrement, power;
addition = a + b; //addition of 3 and 12
subtraction = a - b; //subtract 3 from 12
multiplication = a * b; //Multiplying both
division = a / b; //dividing 12 by 3 (number of times)
remainder = a % b; //calculation of the remainder
power= a**b; //a raise to b
x=++c; //increment
y=--d; //decrement
document.write("Addition of " + a +" and " + b +" is = " + addition + "<br />");
document.write("Subtraction of " + a +" and " + b +" is = " + subtraction + "<br />");
document.write("Multiplication of " + a +" and " + b +" is = " + multiplication + "<br />");
document.write("Division of " + a +" and " + b +" is = " + division + "<br />");
document.write("Remainder of " + a +" and " + b +" is = " + remainder + "<br />");
document.write("Power of " + a +" raise to " + b +" is = " + power + "<br />");
document.write("Increment value: "+x+" <br />");
document.write("Decrement value: "+y+" <br />");
</script>
</body>
</html>

Output:
Addition of 4 and 2 is = 6
Subtraction of 4 and 2 is = 2
Multiplication of 4 and 2 is = 8
Division of 4 and 2 is = 2
Remainder of 4 and 2 is = 0
Power of 4 raise to 2 is = 16
Increment value: 6
Decrement value: 5

9
 CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

3. Comparison Operators:
A Comparison operator compares its operands and returns a logical value based on whether the
comparison is true. The operands can be numerical, string, logical, or object values.

Comparison Operator Description Example

Equal (==) Returns true if the operands are equal. a==b;
Returns true if the operands are not
Not equal (!=) a!=b;
equal.
Returns true if the operands are equal
Strict equal (===) a===b;
and of the same type.
Returns true if the operands are of the
Strict not equal (!==) same type but not equal, or are of a!==b;
different type.
Returns true if the left operand is
Greater than (>) a>3;
greater than the right operand.
Returns true if the left operand is
Greater than or
greater than or equal to the right a>=4;
equal (>=)
operand.
Returns true if the left operand is less
Less than (<) a<3;
than the right operand.
Returns true if the left operand is less
Less than or equal (<=) a<=4;
than or equal to the right operand.

4. Logical Operators:
Logical operators are typically used with Boolean (logical) values; when they are, they return
a Boolean value. However, the && and || operators actually return the value of one of the
specified operands.

Logical Operator Description Example

Logical AND (&&) && returns true if both operands are true; expr1 && expr2
otherwise, returns false.
Logical OR (||) || returns true if either operand is true; if both are expr1 || expr2
false, returns false.
Logical NOT (!) Returns false if its single operand that can be !expr
converted to true; otherwise, returns true.

10
 CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

5. Conditional (ternary) Operator:

The conditional operator is the only JavaScript operator that takes three operands. The
operator can have one of two values based on a condition.

Ex: condition ? val1 : val2;

Program on Conditional Operator:

<!DOCTYPE html>
<html> <head>
<title>Javascript Conditional Operator</title>
</head>
<body>
<h1>Performing Conditional Operations </h1>
<script>
var age=17;
var status = (age >= 18) ? 'adult' : 'minor'; //ternary or conditional operator
document.write(status);
</script> </body> </html>

Output: minor

6. Delete Operator:
The delete operator deletes an object, an object's property, or an element at a specified index
in an array.

Ex: delete object;

delete object.property;
Program on Delete Operator:

<!DOCTYPE html>
<html> <body>
<h2>JavaScript Delete Operator</h2>
<script>
var person = {firstname:"John", lastname:"Doe", age:50, eyecolor:"blue"};
delete person.age; //deletes the age property of person object
document.write(" The age of john is "+person.age+"");
</script> </body>
</html>
Output:
The age of john is undefined //output is undefined as we delete the person.age

11
 CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

7. String Operator:
In addition to the comparison operators, which can be used on string values, the
concatenation operator (+) concatenates two string values together, returning another string
that is the union of the two operand strings.

Program on String Operator:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript string Operator</h2>
<script>
var x="hi ";
var y="sir";
var z=" how are you?";
document.write(""+x+y+z+" <br />"); //concatenate three strings

var mystring = 'alpha';

mystring += 'bet';
document.write(mystring); //concatenation of string
</script>
</body>
</html>

Output:
hi sir how are you?
alphabet

12
 CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

*Conditional Statements:
Conditional 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
 Use else to specify a block of code to be executed, if the same condition is false
 Use else if to specify a new condition to test, if the first condition is false
 Use switch to specify many alternative blocks of code to be executed

 IF statement:
Use the if statement to specify a block of JavaScript code to be executed if a condition is
true.
Syntax: if (condition) {
//block of code to be executed if the condition is true
}

 IF..ELSE statement:
Use the else statement to specify a block of code to be executed if the condition is false.
Syntax: if (condition) {
//block of code to be executed if the condition is true
} else {
//block of code to be executed if the condition is false
}

 IF..ELSEIF statement:
Use the else if statement to specify a new condition if the first condition is false. i.e multiple
conditions.
Syntax: if (condition1) {
//block of code to be executed if condition1 is true
} else if (condition2) {
//block of code to be executed if the condition1 is false and condition2 is true
.
.
} else {
//block of code to be executed if the condition1 is false and condition2 is false
}

13
 CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

Program on Nested If:

<!DOCTYPE html>
<html>
<body>
<h1>if..elseif statement</h1>
<script>
var greeting;
var time = new Date().getHours(); //gets the current time
if (time < 12)
{
greeting = "Good Morning";
}
else if (time < 17)
{
greeting = "Good Afternoon";
}
else
{
greeting = "Good Evening";
}
document.write(greeting);
</script>
</body>
</html>

Output:
Displays the greetings as per the time in clock (of PC).

14
 CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

Program on Nested IF:

Find the greatest number among given three numbers.
<!DOCTYPE html>
<html>
<body>
<h1>if..elseif statement</h1>
<script>
var a = window.prompt("Enter value of a: "); //take input from user
var b = window.prompt("Enter value of b: ");
var c = window.prompt("Enter value of c: ");
if (a>b && a>c)
{
document.write(+a+ " i.e a is greatest");
}
else if (b>a && b>c)
{
document.write(+b+ " i.e b is greatest");
}
else if (c>a && c>b)
{
document.write(+c+ " i.e c is greatest");
}
else
{
document.write("All numbers are equal");
}
</script>
</body>
</html>

15
 CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

 Switch..Case Statement:
The switch statement is used to perform different actions based on different conditions.
Use the switch statement to select one of many code blocks to be executed.
Syntax: switch(expression)
{
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}
Program on Switch Case:
Program to display the current day using switch case statement.
<!DOCTYPE html>
<html>
<body>
<h> Switch case statement</h><br />
<script>
var day;
switch (new Date().getDay())
{
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;

16
 CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
}
document.write("Today is "+ day+"");
</script> </body> </html>

Program on Switch Case:

Program to identify the given character is Vowel or Not Vowel:
<!DOCTYPE html>
<html><body>
<h> Switch case statement to identify vowels</h><br />
<script>
var x=window.prompt("Enter the character:");
switch (x) {
case "a":
text = "vowel";
break;
case "e":
text = "vowel";
break;
case "i":
text = "vowel";
break;
case "o":
text = "vowel";
break;
case "u":
text = "vowel";
break;
default:
text = "Not vowel";
}
document.write("The given character is "+text+"");
</script>
</body>
</html>

17
 CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

*Loop Statements:

JavaScript supports different kinds of loops:

 for - loops through a block of code a number of times

 for/in - loops through the properties of an object
 for/of - loops through the values of an iterable object
 while - loops through a block of code while a specified condition is true
 do/while - also loops through a block of code while a specified condition is true

 FOR Loop:
A for loop repeats until a specified condition evaluates to false.
Syntax: for (statement 1; statement 2; statement 3)
{
// code block to be executed
}
Program on FOR loop:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<script>
var i;
for (i = 0; i < 5; i++)
{
document.write(""+i+"<br>");
}
</script>
</body>
</html>
Output:
0
1
2
3
4

Program on FOR loop:

<!DOCTYPE html>
<html>

18
 CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i, len;
for (i = 0, len = cars.length; i < len; i++)
{
document.write(""+cars[i]+"<br>");
}
</script>
</body>
</html>

Output:
BMW
Volvo
Saab
Ford

 For..in Loop:
The JavaScript for/in statement loops through the properties of an object.
Program on For..in loop:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript for/in Loop to access property of an object</h2>
<script>
var person = {fname:"John", lname:" Doe", age:25};
var x;
for (x in person)
{
document.write(""+person[x]+"");
}
</script>
</body>
</html>

Output: JohnDoe25

19
 CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

 For..of Loop:
The JavaScript for/of statement loops through the values of an iterable objects or an array.
for/of lets you loop over data structures that are iterable such as Arrays, Strings, Maps,
NodeLists, and more.

Program on for..of loop using array:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript for/of Loop using array</h2>
<script>
var cars = ['BMW', 'Volvo', 'Mini'];
var x;
for (x of cars)
{ document.write(x + "<br >"); }
</script>
</body>
</html>

Program on for..of loop using string:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript for/of Loop using string</h2>
<script>
var text = 'Java';
var x;
for (x of text) {
document.write(x + "<br >");
}
</script>
</body>
</html>
Output:
J
a
v
a

20
 CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

 While Loop:
The while loop loops through a block of code as long as a specified condition is true.
Syntax: while (condition)
{
// code block to be executed
}
Program on while loop:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript While Loop</h2>
<script>
var i = 0;
while (i < 5)
{
document.write(""+i+"<br>");
i++;
}
</script>
</body>
</html>
Output:
0
1
2
3
4

 Do..While Loop:
The do/while loop is a variant of the while loop. This loop will execute the code block once,
before checking if the condition is true, then it will repeat the loop as long as the condition is
true.
Syntax: do
{
// code block to be executed
}
while (condition);

21
 CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

Program on Do..While Loop:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Do/While Loop</h2>
<script>
var i = 0;
do
{
document.write(""+i+"<br>");
i++;
}
while (i < 5);
</script>
</body>
</html>

Output:
0
1
2
3
4

 Continue Statement:
The continue statement breaks one iteration (in the loop), if a specified condition occurs,
and continues with the next iteration in the loop.

Program on continue statement:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Loops</h2>
<p>A loop with a <b>continue</b> statement.</p>
<p>A loop which will skip the step where i = 3.</p>
<script>
var i;
for (i = 0; i < 5; i++)
{

22
 CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

if (i === 3) { continue; }
document.write(""+i+"<br>");
}
</script>
</body>
</html>
Output:
A loop which will skip the step where i = 3.
0
1
2
4

23
 CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

*JavaScript Accessors:
JavaScript getters and setters:
Getters are used to get the value of the property of an Object.
Setters are used to set the value to the property of an Object.

 Get:
The get syntax binds an object property to a function that will be called when that property is
looked up.

Program on get:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Getters and Setters</h2>
<p>Getters and setters allow you to get and set properties via methods.</p>
<p>This example uses a lang property to get the value of the language property.</p>
<script>
var person = { firstName: "John", lastName : "Doe", language : "English",
get lang()
{
return this.language;
}
};
document.write("The language is: "+person.lang+"");
</script>
</body>
</html>

Output:
The language is: English

24
 CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

 Set:
The set syntax binds an object property to a function to be called when there is an attempt
to set that property.

Program on Set:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Getters and Setters</h2>
<p>Getters and setters allow you to get and set properties via methods.</p>
<p>This example uses a lang property to set the value of the language property.</p>
<script>
var person = {
firstName: "John",
lastName : "Doe",
language : "NO",
set lang(value) {
this.language = value;
}
};
person.lang = "English";
document.write("The language set to "+person.language+"");
</script>
</body>
</html>

Output:
The language set to English

25
 CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

Annexure

Declare the variable:

var x=5; or x=5; or var x, y, z; or var car={price:1, type:”skoda”);
Accept the value from user:
var x=parseInt(prompt(“Enter the value of x”)); or
var x=prompt(“Enter the value of x”);
Display the message:
alert(“You are logged in”);
Display the result in message:
alert(“The addition is:”+x+””);
Display the result:
Document.write(“The addition is:”+x+”<br/>”);
Display the contents as per our formatting:
<pre>
<script>
Your code, here use document.writeln to display the result
</script>
</pre>
Program using <pre> tag:
<html>
<body>
<pre> //preformatted text is used to display the text in output as entered by user in coding
<script>
x=5;
y=6;
document.writeln("The value of x is:"+x+""); //writeln takes the next sentence on new line
document.writeln("The value of y is:"+y+"");
</script>
</pre>
</body>
</html>

26
 CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

Unit 1: Assignment Questions

2 Marks Questions:
1. State the use of dot syntax in JavaScript with the help of suitable example.
2. List and explain two Logical operators in JavaScript.
3. List any four features of Java script. (Win 2019)
4. List the comparison operators in Java script. (Win 2019)
5. Write Java script to create person object with properties firstname, lastname,
age, eye color, delete eye color property and display remaining properties of person
object. (Win 2019)

4/6 Marks Questions:

1. Write a JavaScript function that checks whether a passed string is palindrome or not.
2. Write a JavaScript that displays first 20 even numbers on the document window.
3. Differentiate between prompt() and alert() methods.
1. Explain prompt () and confirm () method of Java script with syntax and example.
(Win 2019)
2. Explain getter and setter properties in Java script with suitable example. (Win 2019)
3. Write a program to print sum of even and odd numbers between 1 to 10 using for
loop.

27