WT File of T.T

Panipat Institute of Engineering & Technology,
Samalkha, Panipat
Computer Science & Engineering Department
Lab Manual of Web Technology Lab

CSE-312N
Submitted To: Submitted By:
Ms. Shivani Gaba Tushar Tyagi
Associate professor 2816045
(CSE Department)
Affiliated to
Kurukshetra University Kurukshetra, India

INDEX
S.NO. NAME OF THE EXPERIMENT DATE SIGNATURE
08/02/2019
1. Create your own page with your favorite hobbies.
08/02/2019
2. Create a frameset that is divided into three
sections. The frameset should have three zones.
Create pages for each section. For the lowermost
section, create page that loads the content into the 08/02/2019
3. middle section. The topmost section should
contain a page describing the web page itself.
Create a web page, which displays the map of

4. your country Link, each city /state on the image 15/02/2019
map, such that the respective HTML page of the
city/state is displayed when the user selects an
area.
5. Add the tickertape applet to your page by

customizing it for the following settings:
- Increase the count by one.
- Accordingly update the message count.
- Change the text color to (237,192,171)
- Experiment with changing the scrolling 15/02/2019
speed.
- Customize the message text as per your
page requirement.
Incorporate a quest book into the Diary Food

Webpage and use Java Script to build validations 15/02/2019
6.
into the form.
7. Use Cascading Style sheets (CSS) to modify the

following:
a. Change background.
b. Change font type, face and color.
c. Align Text. 22/03/2019
d. Remove underlines from
hyperlinks.
8. Write the program for using JavaScript by using
for – loops (through a block of code a number of
times), for/in - loops (through the properties of an
object), while - loops (through a block of code 22/03/2019
while a specified condition is true), do/while -
loops (through a block of code while a specified
condition is true).
9. Write a program in Java Script for the following:

a. Copying, passing, and comparing by
value 22/03/2019
b. Copying, passing, and comparing by
reference
c. References themselves are passed by value
10. Write program in Java Script for pattern matching
using regular expressions and errors in scripts. 15/03/2019
11. Write a Python function/program that accepts
the lengths of three sides of a triangle as inputs. 15/03/2019
The program output should indicate whether or
not the triangle is an equilateral triangle.
12. Write the Python functions for linear search,
binary search, selection sort, Bubble Sort, 15/03/2019
Insertion Sort and converting Fibonacci to a linear
algorithm.
13. Write program in Python using Lists and
dictionaries, Control statements and Strings and 05/04/2019
text files.
PRACTICAL NO: 1
Aim: Create your own page with your favorite hobbies.

<HTML>
<HEAD>
<H2 ALIGN = CENTER> Hobbies Page</H2><BR><BR><BR>
<STYLE>
ul {
text-align: center;
padding: 0; }
</STYLE>
</HEAD>
<BODY >
<UL>
<U><B>My Hobbies Are:<BR ><BR></U></B>
<Li>Playing With Codes</LI><BR>
<Li>Cricket</LI><BR>
<Li>Blogging</LI><BR>
<Li>Travelling</LI>
</UL>
</BODY>
</HTML>
OUTPUT :
Short answer Questions:
Ques: What is the syntax difference between a bulleted list and numbered list?
Ans: Bulleted lists use the <ul> tag, which stands for “unordered,” whereas <ol> is used to create
an ordered list.
Ques: What are some of the common lists that can be used when designing a page?
Ans: Some of the common lists that can be used are:
a) Ordered list
b) Unordered list
c) Definition list
d) Menu list
e) Directory list
Ques: Is it possible to list elements straight in an html file?

Ans: Yes, it is possible with the use of indents.
Ques: What are the attributes of ul?

Ans: Attribute name - <ul type=” ”>
Values – disc , circle , square.
Ques: What are the attributes of ol?

Ans. Attribute name – type, start.
PRACTICAL NO: 2
Aim: Create a frameset that is divided into three sections. The frameset should have three zones.
• The Topmost section of the frameset should take up about just 15% of the
browser window. Name this frame title.
• The middle section should be 70% of the browser window. Name this frame title.
• The lower section should be 15% of the browser window. Name this frame menu.
Frame.html
<html>
<head>
<title>FRAMES</title>
</head>
<frameset rows="15%,75%,10%">
<frame name="frame1"src="a.html">
<frame name="frame2" src="b.html">
<frame name="frame3" src="c.html">
</frameset>
</frameset>
</html>
a.html
<html>
<head>
<title>FRAMES 1</title>
</head>
<body>
When you use frameset you split the visual real estate of a browser window into multiple frames. Each frame has it’s
own contents and the content in one don’t spill into the next.
An iframe, on the other hand, embeds a frame directly inline with the other elements of a webpage.
While both frames and iframes perform a similar function – embedding a resource into a webpage – they are
fundamentally different.
Frames are layout-defining elements.

Iframes are a content-adding elements.
</body>
</html>
b.html
<html>
<head>
</head>
<body>
<strong>The History and Future of Frames</strong>
Frames have been deemed obsolete by the W3C in HTML5. The reasoning given for this is that frames create
usability and accessibility issues. Let’s consider each of these charges.
<br>
<br>
The Problem with Frames
<br>Usability challenges: With the rise in popularity of mobile devices and tablets with small displays it’s more
important than ever that websites offer multiple views which change based on the size of the device viewport. While
frames can be manipulated to provide a certain degree of responsiveness, they are simply not well-suited to creating
responsive websites.
<br><br> Accessibility challenges: Screen readers and other assistive technologies have a very hard time
understanding and communicating websites that use frames.
In addition to the accessibility and usability issues created by frames, the trend within web design is to separate the
content of a webpage from its presentation.
<br>
Content should be added and defined by markup such as HTML.
<br> Presentation should be manipulated with languages like CSS and JavaScript.
<br>Using frames is primarily about creating a specific look and layout, a presentation task that should really be
handled with CSS.
<br>
<br>To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag defines, how to
divide the window into frames. The rows attribute of <frameset> tag defines horizontal frames and cols attribute
defines vertical frames. Each frame is indicated by <frame> tag and it defines which HTML document shall open
into the frame.
<br> <br> Note − The <frame> tag deprecated in HTML5. Do not use this element.
</body>
</html>
c.html
<html>
<head>
</head>
<body>
<strong>The Future of Frames</strong>
While all modern browser offer support for frames today, the W3C has unequivocally stated that frames “are not to
be used by Web developers” and that support for frames in web browsers is offered for historical purposes only.
If you have a website that makes use of frames you should start planning a website migration away from frames. At
some point in the future support for frames will be dropped by modern web browsers, and when that happens
websites build with frames will become unusable.
</body>
OUTPUT :
PRACTICAL NO: 3
Aim: Create pages for each section. For the lowermost section, create page that loads the content
into the middle section. The topmost section should contain a page describing the web page
itself.
<HTML>
<HEAD><title>mypage</title>
</HEAD>
<FRAMESET ROWS="15%,70%,15%">
<FRAME NAME="a" SRC="PRAC5.1.html">
<FRAME NAME="b" SRC="PRAC5.2.html">
<FRAME NAME="c" SRC="PRAC5.3.html">
</FRAMESET>
</HTML>
PRAC5.1.html
<HTML>
<BODY>
<B><U>Brief Introduction Of the Page:</B></U><BR>This is a frameset that is divided into three sections. The
frameset should have three zones.<BR>
• The Topmost section of the frameset should take up about just 15% of the browser window and should contain a
page describing the web page itself.<BR>
• The middle section should be 70% of the browser window loads the content as requested from the third
section.<BR>
• The lower section should be 15% of the browser window that loads the content into the middle section.</BR>
</BODY>
</HTML>
PRAC5.2.html
<HTML>
<HEAD>
<STYLE>
a{
text-decoration: none;
color:black;
margin-right:30px;
margin-left:20px;
}
</STYLE>
</HEAD>
PRAC5.2.html
<BODY>
<H3><U>Table of Content</U><BR>
<A HREF="prac1.1.html" TARGET="b">PRACTICAL 1</A>
<A HREF="prac2.html" TARGET="b">PRACTICAL 2</A>
<A HREF="Prac3.html" TARGET="b">PRACTICAL 3</A>
</H3>
</BODY>
</HTML>
Products.html
<HTML>
<HEAD>
<TITLE>
WELCOME TO DAIRY
</TITLE>
<STYLE>
a{ text-decoration: none;
}
</STYLE>
</HEAD>
<BODY>
<H1><U> <CENTER>
WELCOME TO MY DAIRY
</H1> </CENTER><BR> <BR>
<CENTER><CAPTION ALIGN=CENTER><B>OUR DAIRY PRODUCTS </B>
</CAPTION></CENTER><BR><BR></U>
<CENTER><TABLE BORDER=5 WIDTH=50%>
<TR ALIGN=CENTER>
<TH>PRODUCT CODE
<TH>PRODUCT NAME
</TR>
<TR ALIGN=CENTER>
<TD>001
<TD> <A HREF="milk.html">MILK</A>
</TR>
<TR ALIGN=CENTER>
<TD>002
<TD> <A HREF="cheese.html">CHEESE</A>
</TR>
<TR ALIGN=CENTER>
<TD>003
<TD> <A HREF="butter.html">BUTTER</A>
</TR>
<TR ALIGN=CENTER>
<TD>004
<TD> <A HREF="ice_cream.html">ICE CREAM</A>
</TR>
<TR ALIGN=CENTER>
<TD>005
<TD> <A HREF="milk_shakes.html">MILK SHAKES</A>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
Buymilk.html
<HTML>
<HEAD>
<TITLE>
WELCOME TO MY DAIRY
</TITLE>
</HEAD>
<BODY>
<H1><CENTER><U>
WELCOME TO MY DAIRY
</CENTER></H1>
<BR><BR>
<CENTER>
<CAPTION ALIGN=CENTER><B>MILK TYPES :</B></CAPTION></U><BR><BR>
<TABLE BORDER=5 WIDTH=50%>
<TR ALIGN=CENTER>
<TH>PRODUCT CODE
<TH>PRODUCT NAME
<TH>PRODUCT PRICE
<TH> BUY
</TR>
<TR ALIGN=CENTER>
<TD>MLK1
<TD>FULL CREAM MILK
<TD>Rs45 PER Kg
<td><A HREF="javascript.HTML">Buy</A>
</TR>
<TR ALIGN=CENTER>
<TD>MLK2
<TD>DOUBLE TONED MILK
<TD>Rs50 PER Kg
</TR>
<TR ALIGN=CENTER>
<TD>MLK3
<TD>TONED MILK
<TD>Rs55 PER Kg
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
Signin.html
<html>
<head>
</head>
<body>
<div>
<form name="RegForm" action="/submit.php" onsubmit="return formvalidation ()" method="post">
<h1>Sign In</h1>
<p>E-mail Address: <input type="text" size=65 name="EMail"> </p><br>
<p>Password: <input type="password" size=65 name="Password"> </p><br>
<p><input type="submit" value="Sign In" name="Submit"> <br><br>
</p>
</form>
</div>
</body>
</html>
Signup.html
<html>
<head>
</head>
<body>
<div>
<form name="RegForm" action="/submit.php" onsubmit="return formvalidation ()" method="post">
<h1>Registration Form</h1>
<p>Name: <input type="text" size=65 name="Name"> </p><br>

<p> Address: <input type="text" size=65 name="Address"> </p><br>
<p>E-mail Address: <input type="text" size=65 name="EMail"> </p><br>
<p>Password: <input type="password" size=65 name="Password"> </p><br>
<p>Telephone: <input type="text" size=65 name="Telephone"> </p><br>
<p><input type="submit" value="Sign Up" name="Submit"> <br><br>
<input type="reset" value="Existing User? Sign in" name="Reset">
</p>
</form>
</div>
</body>
</html>
OUTPUT 3:
Short Questions:
Ques: What are frames?

Ans: HTML frames allow authors to present documents in multiple views, which may be
independent windows or sub-windows. Multiple views offer designers a way to keep certain
information visible, while other views are scrolled or replaced.
Ques: What is Layout of frames?

Ans: An HTML document that describes frame layout (called a frameset document) has a
different makeup than an HTML document without frames. A standard document has one HEAD
section and one BODY. A frameset document has a HEAD, and a FRAMESET in place of the
BODY.
Ques:What is the advantage of using frames?

Ans: Frames make it easier to navigate through a site.
The links that appear in the frame can appear through out the site.
Ques: What bullet types are available?

Ans: With ordered lists, you can select to use a number of different list types including
alphabetical and Roman numerals. The type attribute for unordered lists can be set to disc,
square, or circle
Ques: What is the syntax of using frameset tag?

Ans: <frameset cols="50%,50%">
PRACTICAL NO: 4
Aim: Create a web page, which displays the map of your country Link, each city /state on the
image map, such that the respective HTML page of the city/state is displayed when the
user selects an area.


<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/India-map-en.svg/2000px-India-map-
en.svg.png" usemap="#image-map">
<map name="image-map">
<area target="" alt="Jammu and Kashmir" title="Jammu and Kashmir" href="pages/jnk.html"
coords="378,375,345,133,458,50,843,157,913,201,802,446,642,368,534,451" shape="poly">
<area target="" alt="Himachal Pardesh" title="Himachal Pardesh" href="pages/hp.html"
coords="685,588,552,449,639,380,792,454" shape="poly">
<area target="" alt="Punjab" title="Punjab" href="pages/punjab.html"
<area target="" alt="Uttarakhand" title="Uttarakhand" href="pages/uk.html"
<area target="" alt="Haryana" title="Haryana" href="pages/haryana.html"
coords="496,631,589,781,683,797,690,730,693,597,653,578" shape="poly">
</map>
OUTPUT :
Short Questions:
Ques: What is image map?

Ans: Image map lets you link to many different web pages using a single image. You can define
shapes in images that you want to make part of an image mapping.
Ques: What other ways can be used to align images and wrap text?
Tables can be used to position text and images. Another useful way to wrap text around an image
is to use style sheets.
Ques: When is it appropriate to use frames?

Frames can make navigating a site much easier. If the main links to the site are located in a frame
that appears at the top or along the edge of the browser, the content for those links can be
displayed in the remainder of the browser window.
Ques:What are some new HTML5 markup elements?

There are several: <article>, <aside>, <bdi>, <command>, <details>, <figure>, <figcaption>,
<summary>, <header>, <footer>, <hgroup>, <mark>, <meter>, <nav>, <progress>, <ruby>,
<rt>, <section>, <time>, and <wp>
PRACTICAL NO:5
Aim: Add the tickertape applet by customizing the following:

 Increase the count
 Update the message count
 Change text color to(237,192,171)
 Customize the message text
import java.applet.*;
import java.awt.event.*;
import java.awt.Graphics.*;
import java.awt.*;
// <applet code=TestApplet.class width=500 height=300></applet>

public class TestApplet extends Applet implements Runnable
{
private int secs;
private int mins;
private int hrs;
private Thread clock;
private static int count;
public void destroy()
{
clock.stop();
}
public void init()
{
if(clock == null)
{
clock = new Thread(this);
clock.start();
}
}
public void paint(Graphics g)
{
// Timer
++secs;
if(secs == 60)
{
mins++;
secs = 0;
}
if(mins == 60)
{
hrs++;
secs = 0;
mins = 0;
}
g.setColor(Color.black);
g.drawString("Timer:- "+ hrs + ":" + mins + ":" + secs, 10, 30);
//
int R = (int) (Math.random( )*237);
int G = (int)(Math.random( )*192);
int B= (int)(Math.random( )*171);
Color randomColor = new Color(R, G, B);
g.setFont(new Font("TimesRoman", Font.PLAIN,20));
g.setColor(randomColor);
g.drawString("Hello buddy"+(++count),10,70);
}
public void run()
{
while(true)
{
repaint();
try
{
clock.sleep(1000);
}
catch(InterruptedException e)
{
}
}
}
public void start()

{
clock.resume();
}
public void stop()

{
clock.suspend();
}
}
OUTPUT :
Ques: Which classes can an applet extend?

Ans: An applet can extend the java.applet.Applet class or the java.swing.JApplet class.
Ques: For what do you use the start() method?

Ans: the start() method is used when the applet must perform a task after it is initialized, before
receiving user input. The start() method either performs the applet's work or (more likely) starts
up one or more threads to perform the work.
Ques: An applet can make network connections to any host on the Internet?
Ans: An applet can only connect to the host that it came from.
Ques: Which class enables applets to interact with JavaScript code in the applet's web
page?
Ans: The netscape.javascript.JSObject class enables applets to interact with JavaScript code in
the applet's web page.
Ques: Applets can modify the contents of the parent web page?
Ans: Applets can modify the contents of the parent web page by using the getDocument method
of the com.sun.java.browser.plugin2.DOMclass and the Common DOM API.
PRACTICAL NO: 6
Aim: Incorporate a quest book into the Diary Food Webpage and use Java Script to
build validations into the form.
Dairy.html
<HTML>
<HEAD>
<TITLE>
WELCOME TO DAIRY
</TITLE>
<STYLE>
a{ text-decoration: none;
color:black;
}
</STYLE></HEAD>
<BODY>
<H1><U> <CENTER>
WELCOME TO DAIRY
</H1><BR> <BR>
<CAPTION ALIGN=CENTER><B>WHITE ENERGY DAIRY PRODUCTS:</B>
</CAPTION><BR><BR></U>
<TR ALIGN=CENTER>
<TH>PRODUCT CODE
<TH>PRODUCT NAME
</TR>
<TR ALIGN=CENTER>
<TD>001
<TD> <A HREF="milkitems.html">MILK</A>
</TR>
<TR ALIGN=CENTER>
<TD>002
<TD> <A HREF="Prac1.3.HTML">CHEESE</A>
</TR>
<TR ALIGN=CENTER>
<TD>003
<TD> <A HREF="Prac1.4.HTML">BUTTER</A>
</TR>
</TABLE>
<P> For placing your order
<BR>
Contact : abc@whitenergy.com
</CENTER>
</BODY>
</HTML>
Milkitems.html
<HTML>
<HEAD>
<TITLE>
WELCOME TO MILK DAIRY
</TITLE>
</HEAD>
<BODY>
<H1><CENTER><U>
WELCOME TO MILK DAIRY
</CENTER></H1>
<BR><BR>
<CENTER>
<CAPTION ALIGN=CENTER><B>MILK TYPES :</B></CAPTION></U><BR><BR>
<TR ALIGN=CENTER>
<TH>PRODUCT CODE
<TH>PRODUCT NAME
<TH>PRODUCT PRICE
<TH> BUY
</TR>
<TR ALIGN=CENTER>
<TD>1001
<TD>TONED MILK
<TD>Rs 12 PER Kg
<td><A HREF="javascript.HTML">PURCHASE</A>
</TR>
<TR ALIGN=CENTER>
<TD>1002
<TD>DOUBLE TONED MILK
<TD>Rs 10 PER Kg
</TR>
<TR ALIGN=CENTER>
<TD>1003
<TD>FULL CREAM MILK
<TD>Rs 16 PER Kg
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Web Engineering</TITLE>
<SCRIPT>
function validateForm() {
var x = document.myForm.fname.value;
var y=document.myForm.pass.value;
var len=y.length;
if (x == "" || y=="") {
alert("Fill in all details");
return false;
}
if(len<=4){
alert("Password Lenghth to be greater than 4");
return false;
}
var letters = /^[A-Za-z]+$/;
if(x.match(letters))
{
return true;
}
else
{
alert("Only Alphabets allowed in name");
return false;
}
}
</SCRIPT>
</HEAD>
<BODY>
<B><I>
<BR>
<BR>
<BR>
<FORM name="myForm" onsubmit="return validateForm()" method="post">
<PRE>
<H1><U>Login Page:</H1></U>
<H3>User Name &nbsp &nbsp:<INPUT TYPE="text" name="fname">
<BR>Password & nbsp: <INPUT TYPE="password" name="pass">
</B></I><INPUT TYPE="submit" VALUE="ok"> <INPUT TYPE="reset" value="Reset"> <INPUT
TYPE="submit" VALUE="cancel">
</FORM>
</BODY>
</HTML>
OUTPUT :
Ques: What bullet types are available?

Ans: With ordered lists, you can select to use a number of different list types including
alphabetical and Roman numerals. The type attribute for unordered lists can be set to disc,
square, or circle.
Ques: What is form get?

Ans: With GET the form data is encoded into a URL by the browser. The form data is visible in
the URL allowing it to be bookmarked and stored in web history. The form data is restricted to
ASCII codes. Because URL lengths are limited there can be limitations on how much form data
can be sent.
Ques: What is form post?

Ans: With POST all the name value pairs are submitted in the message body of the HTTP
request which has no restrictions on the length of the string. The name value pairs cannot be seen
in the web browser bar.
Ques: Name some tags which we use for creating forms

Ans: <input type="text">
<input type="radio">
<input type="submit">
Ques: What is the use of action attribute in form element?

Ans: The action attribute defines the action to be performed when the form is submitted.
PRACTICAL NO: 7
Aim: Use Style sheet to modify the following:

• Change background to modify the following.
• Change font type, face and color.
• Align Text.
• Remove underlines from hyperlinks.
<HTML>
<HEAD>
<STYLE>
#first{
width:800px;
height: 24px;
border:4px solid black;
border-style:dashed;
text-align: center;
}
#tw{
width: 810;
height: 30;
background-color :bisque;
color: brown;
border: 2px ridge blue;
text-align: center;
}
a{
}
#b1{
width:800px;
height: 240px;
border:4px solid black;
border-style:ridge;
text-align: center;
position: absolute;
top :100 px;
left: 50px;
}
#b2{
width: 600;
height: 200;
background-color :bisque;
color: brown;
border: 2px ridge blue;
text-align: center;
position: relative;
left: 95px;
top:19px;
}
</STYLE>
</HEAD>
<BODY>
<DIV id="first">
<A href="SignUp_page.html">SignUp Page</a>
</DIV>
<BR>
<DIV id="tw">
My data
</DIV>
<BR><BR>
<DIV id="b1">
<DIV id="b2">
My second data
</DIV>
</DIV>
</BODY>
</HTML>
<html>
<head>
<title>Web Engineering</title>
</head>
<body>
<b><i>
<br>
<br>
<pre>
<form><font size="5">
<form><font size="5">Name: <input type="text">Roll No: <input type="text">
Gender: <input type="RADIO" name="gender">Male <input type="RADIO" name="gender">Female
Contact Number: <input type="text">Semester: <select >
<option value="1">1st</option>
<option value="2">2nd</option>
<option value="3">3rd</option>
<option value="4">4rth</option>
<option value="5">5th</option>
<option>6th</option>
<option>7th</option>
<option>8th</option></select>Fav. Subject:<input type="checkbox" name="a">we <input type="checkbox"
name="a">se <input type="checkbox" name="a">nothing </p>Comments : <textarea rows="5"
cols="22"></textarea> <input type="submit" value="ok"> <input type="reset"
value="Reset"> <input type="submit" value="cancel">
</b></i> <a href="prac9.html">Go to the previous page....</a></pre></font>
</body>
</html>
OUTPUT :
Ques: What hierarchy is being followed when in style sheets?

Ans:- Inline style takes priority over embedded style sheets.
- Embedded style take priority over external style sheets.
- If a single selector includes three different style definitions, the definition that is closest to the
actual tag gets the priority.
Ques: Explain the difference between visibility:hidden; and display:none; ?
Ans: Visibility: Hidden; - It is not visible but takes up it's original space.
Display:None; - It is hidden and takes up absolutely no space as if it was never there.
Ques: Name three ways to define a color in html?

Ans: 1) Hex
2) RGB
3) Name (ie red)
colorMe {color:red;
color:#ff0000;
color:rgb(0,0,255);}
Ques: What is an ID selector and how is it used?

Ans: IDs are used to identify and apply styling to a single specific HTML element. IDs
are defined within the HTML page by inserting an ID selector in the HTML element:
Ques: What is a class selector and how is it used?

Ans: IDs are used to to apply style to multiple HTML identified with the same class.
PRACTICAL NO: 8
AIM:Write the program for using JavaScript by using for – loops (through a block of code a
number of times), for/in - loops (through the properties of an object), while - loops (through a
block of code while a specified condition is true), do/while - loops (through a block of code while
a specified condition is true).
JAVASCRIPT LOOPS
HTML FILE
<html>
<head>
<title>Loops in Javascript</title>
<link rel="stylesheet" type="text/css" href="loops.css">
<script>
var x
function loop()
{
var a="";
var i;
for(i=1;i<=5;i++)
{
a += "The number is " + i + "<br>";
}
document.getElementById("demo").innerHTML = a;
}
</script>
<style>
#demo
{
background-color: lightpink;
}
.button
{
background-color: black;
font-size: 14px;
cursor: pointer;
padding: 10px;
text-align: center;
color:aliceblue;
}
.button1
{
border-radius: 2px;
}
</style>
</head>
<body bgcolor="#cbc7c5">
<br>
<div id="l1" align="center">
<CENTER><BR>
<font face="ALLGERIAN" size="30" color="whitesmoke">LOOPS IN
JAVASCRIPT!</font>
</CENTER>
</div><br>
<table align="center">
<tr>
<td>
<div id="l2" align="center"><br>
<div id="l3" align="left"></div>
<br>
<div id="l4" align="left"><br>
<center>
<font face="stencil" size="15" color="black">FOR LOOP</font>
</center>
</div>
<br>

<br>
<hr color="black">
<strong> <font face="Verdana" color="red" size="4">Click the button to
loop through<br> a block of code five times.</font></strong>
<hr color="black">
<br>
<button class="button button1" onclick="loop()"> CLICK ME </button><br><br>
<div id="l5">
<strong> <font face="Verdana" color="darkblue" size="4">RESULT</font>
<p id="demo">
</p> <br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><div id="l3" align="left"></div>
</div>
</td>
<td></td> <td></td>
<td>
<br>
<br>
<center>
<font face="stencil" size="15" color="black">FOR/IN LOOP</font>
</center>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</td>
<td></td> <td></td>
<td>
<br>
<br>
<center>
<font face="stencil" size="15" color="black">WHILE LOOP</font>
</center>
</div>
<br>
<br>
<hr color="black">
<strong> <font face="Verdana" color="red" size="4">Write
your name <br> and it will be printed five times.</font></strong>
<hr color="black">
<br>
<form a
<input type="text">
<button class="button button1" onclick="loop()"> CLICK ME </button><br><br>
<div id="l5">
<strong> <font face="Verdana" color="darkblue" size="4">RESULT</font>
<p id="demo">
</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</td>
<td></td> <td></td>
<td>
<br>
<br>
<center>
<font face="stencil" size="10" color="black">DO WHILE LOOP</font>
</center>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><div id="l3" align="left"></div></div>
</td>
<td></td> <td></td> </tr>
</table>
</body>
</html>
CSS FILE
#l1
{
background-color: crimson;
height: 100px;
width: 1500px;
border-radius: 30px;
}
#l2
{
background-color: white;
height: 600px;
width: 350px;
}
#l3
{
background-color: powderblue;
height: 1px;
width: 350px;
}
#l4
{
background-color: yellow;
height: 130px;
width: 350px;
}
#l5
{
background-color: greenyellow;
height: 30px;
width: 350px;
}
AFTER CLICKING ‘CLICK ME’ BUTTTON

PRACTICAL NO: 9
AIM: Write a program in Java Script for the following:

a. Copying, passing, and comparing by value
b. Copying, passing, and comparing by reference
c. References themselves are passed by value
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Outputs are printed to console
<script type="text/javascript">
function add(op1, op2) {
if (op2 == 0) {
console.log("adding two zero would return in zero as well");
return;
}
return op1+op2;
}
// Pass by value
op1 = 10;
op2 = 20;
console.log(add(op1, op2));
// -----------------------------------------------------------------------------
function addByReference(op) {
// If you modify op object here, global op object will be modified as well
// e.g. op.op2 = 3000 will also change the value of op.op2 outside this
function
if (op.op2 == 0) {
console.log("cannot divide by zero");
return;
}
return op.op1+op.op2;
}
// Pass by Reference
op = {
"op1": 10,
"op2": 20
}
console.log(addByReference(op));
// -----------------------------------------------------------------------------
function modifyObj(o) {
o.hey = "modified value";
}
// references themselves as value
obj = {
"hey": "there"
}
obj2 = obj;
modifyObj(obj2);
console.log(obj.hey);
// -----------------------------------------------------------------------------
</script>
</body>
</html>
OUTPUT:
PRACTICAL NO: 10
AIM: Write program in Java Script for pattern matching using regular expressions and errors in
scripts.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Javascript Pattern Matching</title>
<style>
body {
font-family: Helvetica;
}
input {
padding: 5px 10px;
font-size: 1em;
}
</style>
</head>
<body>
<label>Pattern</label>
<input id="pattern" type="text" value="[0-9]{10}">
<label>Sample</label>
<input id="sample" type="text" value="">
<button onclick = "testPattern()" name="button">Test Expression</button>
<p><b id="result"></b></p>
<script type="text/javascript">
function testPattern() {
var pattern = document.getElementById("pattern").value;
var sample = document.getElementById("sample").value;
var pattern = new RegExp(pattern, "g");
if(pattern.test(sample)) {
document.getElementById("result").innerHTML = "Pattern Matched!!";
} else {
document.getElementById("result").innerHTML = "Pattern does not
Match!!";
}
}
</script>
</body></html>
OUTPUT:
PRACTICAL NO: 11
AIM: Write a Python function/program that accepts the lengths of three sides of a triangle as
inputs. The program output should indicate whether or not the triangle is an equilateral triangle.
print("Enter the three sides of the Triangle");

try :
side1 = int(input("Side #1 = "))
# Check if the triangle is equilateral or not
if side1 == side2 and side2 == side3 :
print("Triangle is Equilateral!!")
else:
print("Triangle is not Equilateral!!")
except Exception:
print("Invalid input (only integers are allowed)!!");
OUTPUT:
PRACTICAL NO: 12
AIM: Write the Python functions for linear search, binary search, selection sort, Bubble Sort,
Insertion Sort and converting Fibonacci to a linear algorithm.
CODE:
elements = [4, 2, 8, 9, 3, 7]
print("\nElements we have\n")
print(elements)
print("\n")
def linearSearch():
x = int(input("Enter number for linear search: "))
found = False
for i in range(len(elements)):
if(elements[i] == x):
found = True
print("%d found at position %d"%(x,i+1))
break
if(found == False):
print("%d is not in list"%x)
def binarySearch(elements):
item = int(input("Enter number for binary search: "))
first = 0
last = len(elements)-1
found = False
elements.sort()
print("\nSorted Elements are\n")
print(elements)
print("\n")
while first<=last and not found:
midpoint = (first + last)//2
if elements[midpoint] == item:
found = True
else:
if item < elements[midpoint]:
last = midpoint-1
else:
first = midpoint+1
if not found:
print("Element not found")
else:
print("Element Found at position %d"%(midpoint))
return found
def selectionSort(nlist):
for i in range(len(nlist)):
min_idx = i
for j in range(i+1, len(nlist)):
if nlist[min_idx] > nlist[j]:
min_idx = j
nlist[i], nlist[min_idx] = nlist[min_idx], nlist[i]
print("Sorted list is : ")
print(nlist)
def bubbleSort(nlist):
for passnum in range(len(nlist)-1,0,-1):
for i in range(passnum):
if nlist[i]>nlist[i+1]:
temp = nlist[i]
nlist[i] = nlist[i+1]
nlist[i+1] = temp
print(nlist)
def insertionSort(nlist):
for index in range(1,len(nlist)):
currentvalue = nlist[index]
position = index
while position>0 and nlist[position-1]>currentvalue:
nlist[position]=nlist[position-1]
position = position-1
nlist[position]=currentvalue
print(nlist)
def GenerateFibonaci(nterms):
n1 = 0
n2 = 1
count = 0
while count < nterms:
print(n1)
nth = n1 + n2
# update values
n1 = n2
n2 = nth
count += 1
choice = int(input("Enter your choice: \n Enter 1 for Linear Search. \n Enter 2 For Binary Search.
\n Enter 3 For Selection Sort. \n Enter 4 For Bubble Sort \n Enter 5 for Insertion Sort\n Enter 6
For Converting Fibonacci to linear.\n Enter 0 to stop.\n"))
if choice == 1 : linearSearch()
elif choice == 2 : binarySearch(elements)
elif choice == 3 : selectionSort(elements)
elif choice == 4 : bubbleSort(elements)
elif choice == 5 : insertionSort(elements)
elif choice == 6 :
print("\n\n")
print("Fibonacci Series is : ")
GenerateFibonaci(10)
else:
print("Invalid Option")
OUTPUT:

WT File of T.T

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

WT File of T.T

Încărcat de

Drepturi de autor:

Formate disponibile

Panipat Institute of Engineering & Technology,

Computer Science & Engineering Department

Lab Manual of Web Technology Lab

Kurukshetra University Kurukshetra, India

S.NO. NAME OF THE EXPERIMENT DATE SIGNATURE

Create a web page, which displays the map of

5. Add the tickertape applet to your page by

Incorporate a quest book into the Diary Food

7. Use Cascading Style sheets (CSS) to modify the

9. Write a program in Java Script for the following:

Aim: Create your own page with your favorite hobbies.

Ques: Is it possible to list elements straight in an html file?

Ques: What are the attributes of ul?

Ques: What are the attributes of ol?

Frames are layout-defining elements.

<p>Name: <input type="text" size=65 name="Name"> </p><br>

Ques: What are frames?

Ques: What is Layout of frames?

Ques:What is the advantage of using frames?

Ques: What bullet types are available?

Ques: What is the syntax of using frameset tag?

Ques: What is image map?

Ques: When is it appropriate to use frames?

Ques:What are some new HTML5 markup elements?

Aim: Add the tickertape applet by customizing the following:

// <applet code=TestApplet.class width=500 height=300></applet>

public void start()

public void stop()

Ques: Which classes can an applet extend?

Ques: For what do you use the start() method?

Ques: What bullet types are available?

Ques: What is form get?

Ques: What is form post?

Ques: Name some tags which we use for creating forms

Ques: What is the use of action attribute in form element?

Aim: Use Style sheet to modify the following:

Ques: What hierarchy is being followed when in style sheets?

Ques: Name three ways to define a color in html?

Ques: What is an ID selector and how is it used?

Ques: What is a class selector and how is it used?

<div id="l3" align="left"></div>

AFTER CLICKING ‘CLICK ME’ BUTTTON

AIM: Write a program in Java Script for the following:

print("Enter the three sides of the Triangle");

S-ar putea să vă placă și