Scribd
Upload
4 views

CSS_Practical_Answers[1]

The document contains various JavaScript code examples demonstrating arithmetic operations, finding the largest number, displaying numbers, calculating factorials, array manipulations, and form handling. It includes code snippets for creating web pages with different functionalities such as user input, event handling, and regular expressions. Additionally, it showcases how to create and manipulate new browser windows and use timing events.

Uploaded by

aditya.nimbalkar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

CSS_Practical_Answers[1]

The document contains various JavaScript code examples demonstrating arithmetic operations, finding the largest number, displaying numbers, calculating factorials, array manipulations, and form handling. It includes code snippets for creating web pages with different functionalities such as user input, event handling, and regular expressions. Additionally, it showcases how to create and manipulate new browser windows and use timing events.

Uploaded by

aditya.nimbalkar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 16

CSS Practical’s

1. Write Javascript code for arithmetic expression evaluation and print the result using
message box. (Accept the values from user)

<!doctype html>
<html>
<head>
</head>
<body>
<script>
var num1 =parseInt(prompt("Enter first number"));
var num2 =parseInt(prompt("Enter second number"));
var sum=num1+num2;
var mul=num1*num2;
document.write("Addition "+sum+ "</br>");
document.write("Multiplication "+mul);
</script>
</body>
</html>
OR by using getElementById methode
<html>
<head>
<script>
function add()
{
var a,b,c;
a=Number(document.getElementById("First").value)
b=Number(document.getElementById("Second").value)
c=a+b;
document.getElementById("result").value=c;
}
function Sub()
{
var a,b,c;
a=Number(document.getElementById("First").value)
b=Number(document.getElementById("Second").value)
c=a-b;
document.getElementById("result").value=c;
}
function Mul()
{
var a,b,c;
a=Number(document.getElementById("First").value)
b=Number(document.getElementById("Second").value)
c=a*b;
document.getElementById("result").value=c;
}
function Div()
{
var a,b,c;
a=Number(document.getElementById("First").value)
b=Number(document.getElementById("Second").value)
c=a/b;
document.getElementById("result").value=c;
}
</script>
</head>
<body>
Enter the First Number=<input id="First"><br><br><br>
Enter the Second Number=<input id="Second"><br><br><br>

Result(First+Second) <input id="result"><br><br><br><br><br><br>


<button onclick="add()">Add</button>
<button onclick="Sub()">Sub</button>
<button onclick="Mul()">Mub</button>
<button onclick="Div()">Div</button>
</body>
</html>

2.1 Write Javascript code for finding the largest number from given three numbers.
(accept numbers from user).
<!doctype html>
<html>
<head>
</head>
<body>
<script>
var input1 = parseInt(prompt("Enter first number:"));
var input2 = parseInt(prompt("Enter second number:"));
var input3 = parseInt(prompt("Enter third number:"));
if ((input1 == input2) && (input1 == input3)) {
document.write("All numbers are equal");
} else if ((input1 > input2) && (input1 > input3)) {
document.write(input1 + " is larger than " + input2 + " and " + input3);
} else if ((input2 > input1) && (input2 > input3)) {
document.write(input2 + " is larger than " + input1 + " and " + input3);
} else if ((input3 > input1) && (input3 > input2)) {
document.write(input3 + " is larger than " + input2 + " and " + input1);
}

</script>
</body>
</html>
2.2 Write Javascript code to display the numbers from 1 to 10 using for loop.

<!doctype html>
<html>
<head>
</head>
<body>
<script>
for (var i = 1; i <= 10; i++)
{
document.write(i+"</br>");
}

</script>
</body>
</html>
2.3 Write Javascript code to find the factorial of given number. (use while loop)
<!doctype html>
<html>
<head>
</head>
<body>
<script>
var n=prompt("Enter one Letter");
var i=1,fact=1;
do{
fact=fact*i;
i++;
}
while(i<=n);

document.write("Fact Result is="+fact);


</script>
</body>
</html>
3.1 Write Javascript code creating and display elements of an array using for loop.

<html>
<head>

</head>
<body>
<script>
var stud=["Ram","Gopal","Ganesh","Shree","Shyam"];
var i;
for(i=0;i<stud.length;i++)
{
document.write(stud[i]+"<br>");
}
</script>
</body>
</html>
3.2 Write Javascript code to sort given elements of an array.

<!DOCTYPE html>
<html>
<body>
<script>
var arr = [30,10,20,50,40];
for(var i=0; i<arr.length; i++)
{
document.write(arr[i] +"</br>");
}
document.write("The array is sorted"+"</br>");
arr.sort();
for(var i=0; i<arr.length; i++)
{
document.write(arr[i] +"</br>");
}
</script>
</body>
</html>
4.1 Write Javascript function to calculate the area of circle.

<html>
<head>
<title>Find the area and circumference of a circle</title>
</head>
<body>
<script language="JavaScript">
function CalculateArea(){
var radius =document.form1.Radius.value;
document.write("<P>The area of the circle is " + (radius * radius * Math.PI) + "</p>");

}
</script>
<form name=form1>
Enter the radius of circle:
<input type="text" name="Radius" size=10>
<br>
<input type="button" value="Calculate" onClick='CalculateArea();'>
</form>
</body>
</html>
4.2 Write Javascript function to perform addition of two numbers. (accept the values from
user)
<html>
<head>
<title>Add program</title>
</head>
<script language="javascript">
function addNumbers()
{
var val1 =parseInt(document.form1.value1.value);
var val2 =parseInt(document.form1.value2.value);
var add= val1 + val2;
document.write("<P>Addition is " + add + "</p>");
}
</script>
<body>
<form name=form1>
value1 = <input type="text" id="value1" name="value1" value=""/>
value2 = <input type="text" id="value2" name="value2" value=""/>
<input type="button" name="Sumbit" value="Click here" onclick="addNumbers()"/>
</form>
</body>
</html>
5.1 Write Javascript code to create the webpage using different form elements. (Design the
student registration form)

<html>
<head>
<title> Registration Page </title>
</head>
<body bgcolor="Lightskyblue">
<br>
<br>
<form>

<label> Firstname </label>


<input type="text" name="firstname" size="15"/> <br> <br>
<label> Middlename: </label>
<input type="text" name="middlename" size="15"/> <br> <br>
<label> Lastname: </label>
<input type="text" name="lastname" size="15"/> <br> <br>

<label> Course : </label>


<select>
<option value="Course">Course</option>
<option value="Computer">Computer</option>
<option value="Electronics">Electronics</option>
<option value="Mechanical">Mechanical</option>
<option value="Civil">Civil</option>
<option value="Automobile">Automobile</option>
<option value="Chemical">Chemical</option>
</select>
<br>
<br>
<label> Gender : </label><br>
<input type="radio" name="male"/> Male <br>
<input type="radio" name="female"/> Female <br>
<input type="radio" name="other"/> Other
<br>
<br>
<label> Phone : </label>
<input type="text" name="country code" value="+91" size="2"/>
<input type="text" name="phone" size="10"/> <br> <br>
Address
<br>
<textarea cols="80" rows="5" value="address">
</textarea>
<br> <br>
Email:
<input type="email" id="email" name="email"/> <br>
<br> <br>
Password:
<input type="Password" id="pass" name="pass"> <br>
<br> <br>
Re-type password:
<input type="Password" id="repass" name="repass"> <br> <br>
<input type="button" value="Submit"/>
</form>
</body>
</html>
5.2 Write Javascript code to accept values from user and display the result on button click.
<html>
<head>
<script type = “text/javascript”>
var firstName; //first name
var lastName; //last name
function getFirstName() { //when this function is called, I retrieve the values and display
them
return document.getElementById("first_name").value;
}
function getSecondName() {
return document.getElementById("last_name").value;
}
function display() {
firstName = getFirstName();
lastName = getSecondName();
window.alert(firstName + lastName);
}
</script>
</head>
<body>
<form id=”form” method = “post”>
<p> First Name: <input type='text' id = "first_name"/></p>
<p> Last Name: <input type='text' id = "last_name"/> </p>
<p><input id ="Submit" type = "button" value = 'clickme' onclick="display()" /></p>
</form>
</body>
</html>

6.1 Write Javascript code to create the login form using different form events
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Form Event</title>
</head>
<body>

<button type="button" onclick="alert('You have clicked a button!');">Click Me</button>


<a href="#" onclick="alert('You have clicked a link!');">Click Me</a>
<script>
function sayHello(){
alert('Hello World!');
}
document.getElementById("myBtn").onclick = sayHello;
function highlightInput(elm){
elm.style.background = "yellow";
}
</script><br><br>
<input type="text" onfocus="highlightInput(this)">
<button type="button">Button</button><br><br>
<button type="button" oncontextmenu="alert('You have right-clicked a button!');">Right
Click on Me</button>
<a href="#" oncontextmenu="alert('You have right-clicked a link!');">Right Click on
Me</a><br><br>
<button type="button" onmouseover="alert('You have placed mouse pointer over a
button!');">Place Mouse Over Me</button>
<a href="#" onmouseover="alert('You have placed mouse pointer over a link!');">Place
Mouse Over Me</a><br><br>
<button type="button" onmouseout="alert('You have moved out of the button!');">Place
Mouse Inside Me and Move Out</button>
<a href="#" onmouseout="alert('You have moved out of the link!');">Place Mouse Inside Me
and Move Out</a><br><br>
<textarea cols="30" onkeydown="alert('You have pressed a key inside
textarea!')"></textarea><br>
<input type="text" onkeyup="alert('You have released a key inside text input!')">
<p><strong>Note:</strong> Try to enter some text inside input box and textarea.</p>
<input type="text" onblur="alert('Text input loses focus!')">
<button type="button">Submit</button>
<p><strong>Note:</strong> First click inside the text input box then click outside to see
how it works.</p>
<select onchange="alert('You have changed the selection!');">
<option>Select</option>
<option>Male</option>
<option>Female</option>
</select>
<p><strong>Note:</strong> Select any option in select box to see how it works.</p>
<form action="/examples/html/action.php" method="post" onsubmit="alert('Form data will be
submitted to the server!');">
<label>First Name:</label>
<input type="text" name="first-name" required>
<input type="submit" value="Submit">
</form>
</body>
</html>
7.1 Write Javascript code to create the webpage. Use intrinsic function to enable and disable
the elements.
<!DOCTYPE html>
<html>
<head>
<script>
function EnableFunction() {
document.forms.myform.name.disabled=false;
}
function DisableFunction() {
document.forms.myform.name.disabled=true;
}
</script>
</head>
<body>
<form name = "myform">
Name: <input type = "text" name="name">
<br><br>
<input type="button" onclick="DisableFunction()" value="Disable Name Field">
<input type="button" onclick="EnableFunction()" value="Enable Name Field">
</form>
</body>
</html>

9.1. Write simple Javascript code to create window and open it in new blank page of browser.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to open an about:blank page in a new browser window that is 200px wide and
100px tall.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var myWindow = window.open("", "", "width=200,height=100");
}
</script>
</body>
</html>

9.2. Write Javascript code to create new window and set its position using different attributes.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to open a new window with some specifications.</p>
<button onclick="myFunction()">Open Window</button>
<script>
function myFunction() {
window.open("https://
www.google.com","_blank","toolbar=yes,scrollbars=yes,resizable=yes,top=0,left=0,width=400,heig
ht=400");
}
</script>
</body>
</html>

9.3. Write Javascript code to create new window with scroll attribute.
<!DOCTYPE html>
<html>
<head>
<style>
body {
width: 5000px;
}
</style>
</head>
<body>
<p>Click the button to scroll the document window 300 pixels horizontally and 500 pixels
vertically.</p>
<button onclick="scrollWin()">Click me to scroll</button>
<br>
<br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<script>
function scrollWin() {
window.scrollTo(300, 500);
}
</script>
</body>
</html>

9.4. Write Javascript code to create new window with timing events.

1. setTimeout
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
alert("Well Come");
}
</script>
</head>
<body>
<input type="button" value="Open Window" onclick="setTimeout(myFunction,4000);">
</body>
</html>

2. The setInterval()
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
alert("Well Come");
}
</script>
</head>
<body>
<input type="button" value="Open Window" onclick="setInterval(myFunction,4000);">
</body>
</html>

10.1. Write Javascript code to create regular expression using global, case insensitive modifier.
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var str = "Is this all there is?";
var patt1 = /is/g;
var patt2 = /All/i;
var result = str.match(patt1);
var result1 = str.match(patt2);
document.write(result+"<br/>");
document.write(result1);
}
</script>
</body>
</html>

10.2. Write Javascript code to check whether the string entered by user contains digit or not.
<!DOCTYPE html>
<html>
<head>
<script type= "text/javascript">
function myFunction(str) {
var re=/[^0-9]/;
if(re.test(str))
{
alert("String does not contain any digit");
}
else
{
alert("String contain any digit");
}
}
</script>
</head>
<body>
<script type= "text/javascript">
var input_str = prompt("Enter some input here");
myFunction(input_str);
</script>
</body>
</html>

10.3. Write Javascript code to search the digits in a given string.


<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
var str = "Give 100%!";
var patt1 = /\d/g;
var result = str.match(patt1);
document.write(result);
}
</script>
</head>
<body>
<button onclick="myFunction()">Try it</button>
</body>
</html>

11.1. Write Javascript code to create dynamically changing menu.

<html>
<head>
<script language="javascript" type="text/javascript">
function dynamicdropdown(listindex)
{
switch (listindex)
{
case "boys" :
document.getElementById("status").options[0]=new Option("Students","");
document.getElementById("status").options[1]=new Option("Sunil");
document.getElementById("status").options[2]=new Option("Aditya");
document.getElementById("status").options[3]=new Option("Siddharth");
break;
case "girls" :
document.getElementById("status").options[0]=new Option("Students","");
document.getElementById("status").options[1]=new Option("Archana");
document.getElementById("status").options[2]=new Option("Sharda");
document.getElementById("status").options[3]=new Option("Swati");
break;
}
return true;
}
</script>
</head>
<title>Dynamic Drop Down List</title>
<body>
<h2>Dynamically Changing Menu</h2>
<select id="source" name="source" onchange="javascript:
dynamicdropdown(this.options[this.selectedIndex].value);">
<option value="">Class</option>
<option value="boys">Boys</option>
<option value="girls">Girls</option>
</select>
<script type="text/javascript" language="JavaScript">
document.write('<select name="status" id="status"><option value="">Students</option></select>')
</script>
</body>
</html>

12.1. Write Javascript code to create advertisement banner with different images.
(1) We have created four images and we named them as bannerl.jpg, banner2.jpg, banner3.jpg, and
banner4.jpg.
(2) Save the images in the same folder as the HTML file which will be used to show the banners.
These images can be created by using some graphics tools or image files can be downloaded from
Internet.
Java Script
<!DOCTYPE html>
<html>
<head>
<script language="Javascript">
MyBanners =new Array('banner1.jpg','banner2.jpg', 'banner3.jpg');
banner_count=0;
function DisplayBanners()
{
if (document.images)
{
banner_count++;
if (banner_count==MyBanners.length)
{
banner_count=0;
}
document.BannerChange.src=MyBanners[banner_count];
setTimeout("DisplayBanners()",2000);
}
}
</script>
</head>
<body onload="DisplayBanners()">
<center> <h1> Displaying Banner </h1>
<img src="bannerl.jpg" width="900" height="120" name="BannerChange">
</center>
</body>
</html>

12.2. Write Javascript code to create slideshow of 5 images.

<html>
<head>
<script>
Silder=new
Array('download1.jpg','download2.jpg','download3.jpg','download4.jpg','download5.jpg');
i=0;
function display(sn)
{
i=i+sn;
if(i>Silder.length-1)
{
i=0;
}
if(i<0)
{
i=Silder.length-1;
}
document.SlideID.src=Silder[i];
}
</script>
</head>
<body>
<center>
<h1>Nature Photo</h1>
<img src="nature.jpg" name="SlideID" width="800" height="400"><br><br>
<button onclick="display(-1)">Back</button>
<button onclick="display(1)">Next</button></center>
</body>
</html>
8.1. Write Javascript code to delete the cookie after specific period.

Different ways to delete a Cookie


These are the following ways to delete a cookie:
1. A cookie can be deleted by using expire attribute.
2. A cookie can also be deleted by using max-age attribute.
3. We can delete a cookie explicitly, by using a web browser.

Example 1
In this example, we use expire attribute to delete a cookie by providing expiry date (i.e. any past
date) to it.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="button" value="Set Cookie" onclick="setCookie()">
<input type="button" value="Get Cookie" onclick="getCookie()">
<script>
function setCookie()
{
document.cookie="name=Martin ; expires=Sun, 20 Aug 2000 12:00:00 UTC";
}
function getCookie()
{
if(document.cookie.length!=0)
{
alert(document.cookie);
}
else
{
alert("Cookie not avaliable");
}
}
</script>
</body>
</html>
Example 2
In this example, we use max-age attribute to delete a cookie by providing zero or negative number
(that represents seconds) to it.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="button" value="Set Cookie" onclick="setCookie()">
<input type="button" value="Get Cookie" onclick="getCookie()">
<script>
function setCookie()
{
document.cookie="name=Martin ;max-age=0";
}
function getCookie()
{
if(document.cookie.length!=0)
{
alert(document.cookie);
}
else
{
alert("Cookie not avaliable");
}
}
</script>
</body>
</html>
Example 3
Let's see an example to delete a cookie explicitly.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="button" value="Set Cookie" onclick="setCookie()">
<input type="button" value="Get Cookie" onclick="getCookie()">
<script>
function setCookie()
{
document.cookie="name=Martin ";
}
function getCookie()
{
if(document.cookie.length!=0)
{
alert(document.cookie);
}
else
{
alert("Cookie not avaliable");
}
}
</script>
</body>
</html>

You might also like