Scribd
Upload
2 views41 pages

Script Programming

Uploaded by

abinaya20
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
2 views41 pages

Script Programming

Uploaded by

abinaya20
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

TABLE OF CONTENT

[Link] Date Title Page No. Sign

1 15.09.2021 Ordered List and Unordered List 1

2 15.09.2021 College Course Details 3

3 22.09.2021 College Website Using CSS 5

4 22.09.2021 Fibonacci Series 8

5 29.09.2021 Leap Year or Not 10

6 29.09.2021 Marks and Grade 12

7 11.10.2021 Natural Numbers 14

8 11.10.2021 Sorting 16

9 02.11.2021 Vowels 18

10 02.11.2021 List of Countries and their 20


Capitals
11 11.11.2021 Set the background colour of a 23
paragraph
12 11.11.2021 To Check Whether a Given Value 25
is IP Value or Not
13 17.11.2021 Scientific Calculator 27

14 17.11.2021 Cookies 32

15 24.11.2021 Display Number in Words 34

16 24.11.2021 Registration form 37

0
Ex. No : 1
ORDERED LIST AND UNORDERED LIST
15.09.2021

Aim:
To design a html webpage to show various confectionary items using ordered list, unordered list and
text styles (like bold, underline Italic, h1, h2, h3, h4, h5, h6 etc.).
Software requirement:
1. Notepad or Adobe Dreamweaver
2. Web browser
Theory:
1. Ordered List
Ordered List or Numbered List displays elements in numbered format. The HTML ol tag is
used for ordered list. We can use ordered list to represent items either in numerical order
format or alphabetical order format, or any format where an order is emphasized. There can
be different types of numbered list:
 Numeric Number (1, 2, 3) -Type "1"
 Capital Roman Number (I II III) - Type "I"
 Small Roman Number (i ii iii) - Type "i"
 Capital Alphabet (A B C) - Type "A"
 Small Alphabet (a b c) - Type "a"

2. Unordered List
Unordered List or Bulleted List displays elements in bulleted format. We can use unordered
list where we do not need to display items in any particular order. The HTML ul tag is used
for the unordered list. There can be 4 types of bulleted list:
 Disc (Type "disc")
 Circle (Type "circle")
 Square (Type "square")
 None (Type "none")
Algorithm:
Step 1: Start the program using <html> tag and define title of the webpage name inside the <head>
tag. (Here its contains Meta information about the HTML page.
Step 2: Using <title> --</title> tag to specify a title for the HTML page. (Which is shown in the
browser's title bar or in the page's tab)
Step 3: An ordered list starts with the <ol> tag. Each list item starts with the <li> tag and end with
</li> tag. Here we have to mention ordered list type.
Step 4: An ordered list starts with the <ul> tag. Each list item starts with the <li> tag and end with
</li> tag. Here we have to mention ordered list type.
Step 5: Using heading tags (<h1>,…<h6>) to display tile and subtitle of the webpage.
Step 6: Using Bold <b> tag to display bold text without any extra importance.
Step 7: Using Italic <i> tag to display the content in italic style.
Step 8: Close the program using </html> tag.
Step 9: Save the program using .html extension.
Program:

1
<html>
<head>
<title>
Confectionary items
</title>
</head>
<body>
<h1><u>Sweets </u></h1>
<ol type = “1”>
<li><i> Cake </i></li>
<li> Candy </li>
</ol>
<ul type= “disc”>
<li>Rasakula</li>
<li>Jamun</li>
</ul>
</html>

Output

Result:
Thus the HTML webpage was successfully created.

Ex. No : 2 COLLEGE COURSE DETAILS

2
15.09.2021

Aim:
To design a html webpage for college course details with row span and colspan.
Software Requirement:
1. Notepad or Adobe Dreamweaver
2. Web browser
Theory:
A table is divided into rows and each row is divided into cells. In some situations, we need the Table
Cells span across (or merged) more than one column or row. In these situations, we can use Colspan
or Rowspan attributes
1. Rowspan: The rowspan attribute specifies the number of rows a cell should span vertically.
That is, you want to merge two or more Cells in the same column as a single Cell vertically.
Syntax:
<td rowspan = "value">table content...</td>

2. Colspan:Thecolspan attribute defines the number of columns a cell should span (or merge)
horizontally. That is, you want to merge two or more Cells in a row into a single Cell.
Syntax:
<td colspan = "value">table content...</td>
Algorithm:
Step 1: Start the program using <html> tag and define title of the webpage name inside the <head>
tag. (here its contains meta information about the HTML page.
Step 2: To use <table> tag to create table.
Step 3: Using <caption> tag to give caption for table
Step 4: Using <th> tag to give header for table.
Step 5: Using <tr> tag to enter data in table row
Step 6: Using <td> tag to enter the data in table cell.
Step 7: The rowspan and colspan attribute when used with <td> tag determines the number of
standard cells it should span
Step 8: Close the program using </html> tag.
Step 9: Save the program using .html extension.
Program:
<html>
<head>
<title> College course details</title>
</head>
<body>
<h1><center> CPA COLLEGE </center></h1>
<table border="2">
<caption> Course details </caption>

<tr><th rowspan="2"> Arts </th>


<td> BA(Tamil) </td>

3
<td> BA(English) </td>
</tr>

<tr>
<td> BA(History) </td>
<td> BA(Economics) </td>
</tr>

<tr><th rowspan="2"> Science </th>


<td>[Link](CS) </td>
<td>[Link](Mathematics) </td>
</tr>

<tr>
<td>[Link](Chemistry) </td>
<td>[Link](IT)</td>
</tr>

<tr><td colspan="3"><center> Admission open </center></td></tr>

</table>
</body>
</html>

Output:

Result:
Thus the html webpage was successfully created.

Ex. No : 3 COLLEGE WEBSITE USING CSS

4
22.09.2021

Aim:
To design a CSS to create dropdown menu. (College website)
Software Requirement
1. Notepad or Adobe Dreamweaver
2. Web browser
Algorithm:
Step 1: Firstly, we have to type the Html code in any text editor in which we want to use the Internal
CSS for making a dropdown menu.
Step 2: Now, we have to place the cursor just after the closing of title tag in the head tag of the Html
document and then define the styles inside the <style> tag.
Step 3: Now, we have to create the drop-down menu itself. So, first we have to define a class dropbtn
with the different attributes
Step 4: Then, we have to use another class which define the dropdown.
Step 5: Now, we have to create another class which is used to describe how the drop-down menu
appears. This class contains various attributes ( background, position, display, etc.)
Step 6: Now we have to add another class for defining the color and size of a text in the drop-down
menu.
Step 7: And at last in a style tag, we have to edit the hover behaviour of drop-down menu.
Step 8: Now, we have to place the cursor in the body tag where we want to show the drop-down
menu.
Step 9: And, at last, we have to save the Html file and then run the file in the browser.

Program:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}

.dropdown {
display: inline-block;
position: relative
}

.dropdown-content {
position: absolute;

5
background-color: #f1f1f1;
min-width: 160px;
display: none;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: orange;
}

.dropdown:hover .dropdown-content {
display: block;
}

.dropdown:hover .dropbtn {
background-color: grey;
}

</style>
</head>

<body bgcolor="lightgrey">

<h2>CPA College</h2>

<div class="dropdown">
<button class="dropbtn">Menu</button>
<div class="dropdown-content">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#Department">Department</a>
<a href="#contact">Contact</a>
</div>
</div>
</body>
</html>

6
Result:
Thus the dropdown menu was successfully created.

7
Ex. No : 4
FIBONACCI SERIES
22.09.2021

Aim:
To write a VB script program for a Fibonacci series using for looping.
Software Requirement
1. Notepad or Adobe Dreamweaver
2. Web browser
Theory:
 VB Script: The VBScript stands for Visual Basics Script language. Basically it is the
combination of Visual Basic programming language and JavaScript language. VBScript was
invented and maintained by Microsoft. It is used to develop dynamic web pages. It is much
lighter compared to Visual Basic programming language but works as a scripting language
like JavaScript. To run VBScript on the client-side, the client must have to use Internet
Explorer because other browsers are still not supported by the VBScript.
VBScript currently runs on below mentioned environments:
 Internet Information Server (IIS) – It is a Microsoft web server.
 Windows Script Host(WSH) – It is a native hosting environment of Windows
operating system.
 Internet Explorer (IE) – It is the simplest hosting environment where we can
run VBScript code.
 Fibonacci series– it is the one in which you will get your next term by adding previous two
numbers.
 Initializing first and second number as 0 and 1.
 Print first and second number.
 From next number, start your loop. So third number will be the sum of the
first two numbers.

Algorithm:
Step 1: Start the program using <html> tag and define title of the webpage name inside the <head>
tag. (here its contains meta information about the HTML page.
Step 2: Using <title> tag to give title for the page.
Step 3: Using <script> tag to specify the script type (vbscript/javascript).
Step 4: Using Dim statement to declare the variables.
Step 5: [Link] command for writing output to a page.
Step 6: Save the program with .html format.
Step 7: To right click the vbscript file and choose internet explorer to view the output. (Settings->To
click the F12 Developer tools option->Click on Emulation to open emulation setting->To set the
Document mode->10)

Program:

<html>
<head>
<title>

8
Fibonacci series
</title>
</head>
<body>
<p> Output</p>
<script type="text/vbscript">
dim a,b,c,i
a=0
b=1
for i=1 to 10
c=a+b
[Link](b&"<br/>")
a=b
b=c
next
</script>
</body>
</html>

Output:

Result:
Thus the Fibonacci vbscript program was successfully created.

9
Ex. No : 5
LEAP YEAR OR NOT
29.09.2021

Aim:
To write a vbscript program for finding out where the given year is a leap year or not.
Software Requirement
1. Notepad or Adobe Dreamweaver
2. Web browser
Theory:
A year that has 366 days is called a leap year. It means an extra day in the year which will be 29 Feb
and it comes in every 4 years.A year is leap year if following conditions are satisfied:
 Year is multiple of 400.
 Year is multiple of 4 and not multiple of 100.

Algorithm:

Step 1: Start the program using <html> tag and define title of the webpage name inside the <head>
tag. (here its contains meta information about the HTML page.
Step 2: Using <title> tag to give title for the page.
Step 3: Using <script> tag to specify the script type (vbscript/javascript).
Step 4: Using Dim statement to declare the variables.
Step 5: Using Inputbox to get input data.
Step 6: [Link] command for writing output to a page.
Step 7: Save the program with .html format.
Step 8: To right click the vbscript file and choose internet explorer to view the output. (Settings->To
click the F12 Developer tools option->Click on Emulation to open emulation setting->To set the
Document mode->10)

Program:

<head>
<title>
Leap year or not
</title>
</head>
<body>
<script type="text/vbscript">
dim year
year=inputbox("enter a year")
If(((year mod 4 = 0) AND NOT (year mod 100 = 0)) OR (year mod 400 = 0)) Then
[Link](year& " is leap year")
Else
[Link](year& " is not leap year")
End If
</script>

10
</body>
</html>

Output:

Result:
Thus the Leap year VB script program was successfully created.

11
Ex. No : 6
MARKS AND GRADE
29.09.2021

Aim:
To write a VB Script program for 4 subjects marks: calculate the Total marks and grade.
Software Requirement
1. Notepad or Adobe Dreamweaver
2. Web browser
Algorithm:
Step 1: Start the program using <html> tag and define title of the webpage name inside the <head>
tag. (here its contains meta information about the HTML page.
Step 2: Using <title> tag to give title for the page.
Step 3: Using <script> tag to specify the script type (vbscript/javascript).
Step 4: Using Dim statement to declare the variables.
Step 5: Using Inputbox to get input data.
Step 6: [Link] command for writing output to a page.
Step 7: Save the program with .html format.
Step 8: To right click the vbscript file and choose internet explorer (Allow the blocked content->Yes)
to view the output. (Settings->To click the F12 Developer tools option->Click on Emulation to open
emulation setting->To set the Document mode->10)

Program:
<html>
<body>
<script type="text/vbscript">
Dim mark1, mark2, mark3, mark4, total, avg
mark1=inputbox("enter the first mark")
mark2=inputbox("enter the second mark")
mark3=inputbox("enter the third mark")
mark4=inputbox("enter the fourth mark")
total=cint(mark1)+cint(mark2)+cint(mark3)+cint(mark4)
avg=total / 4
[Link]("mark1 is " & mark1 & "<br />")
[Link]("mark2 is " & mark2 & "<br />")
[Link]("mark3 is " & mark3 & "<br />")
[Link]("mark4 is " & mark4 & "<br />")
[Link]("total marks is " & total & "<br />" )
[Link]("average is " &avg& "<br />" )
If avg>=90 Then
[Link]("A grade")
ElseIfavg>=80 Then
[Link]("B grade")
ElseIfavg>=70 Then
[Link]("C grade")
ElseIfavg>=60 Then

12
[Link]("D grade")
ElseIfavg>=50 Then
[Link]("E grade")
Else
[Link]("Fail")
End If
</script>
</body>
</html>

Output:

Result:
Thus the VB Script program was successfully created.

13
Ex. No : 7
NATURAL NUMBERS
11.10.2021

Aim:
To write a VB Script program to display natural numbers up to n and write in text file.
Software Requirement
1. Notepad or Adobe Dreamweaver
2. Web browser
Theory:
Natural numbers are a part of the number system, including all the positive integers from 1 to infinity.
Natural numbers are also called counting numbers because they do not include zero or negative
numbers. They are a part of real numbers including only the positive integers, but not zero, fractions,
decimals, and negative numbers.
Algorithm:
Step 1: Start the program using <html> tag and define title of the webpage name inside the <head>
tag. (here its contains meta information about the HTML page.
Step 2: Using <title> tag to give title for the page.
Step 3: Using <script> tag to specify the script type (vbscript/javascript).
Step 4: Using Dim statement to declare the variables.
Step 5: Using Inputbox to get input data.
Step 6: [Link] command for writing output to a page.
Step 7: Save the program with .html format.
Step 8: To right click the vbscript file and choose internet explorer (Allow the blocked content->Yes)
to view the output. (Settings->To click the F12 Developer tools option->Click on Emulation to open
emulation setting->To set the Document mode->10)

Program:
<html>
<head>
<title>
Natural Numbers
</title>
<body>
<p> Natural Number </p>
<script type="text/vbscript">
dim n,i
n=inputbox("enter the limit")
for i=1 to n
c=a+b
[Link](i&"<br/>")
next
</script>
</body>
</html>

14
Output:

Result:
Thus the VB Script program was successfully created.

15
Ex. No : 8
SORTING
11.10.2021

Aim:
To write a Javascript program to user defined function to get array of values and sort them in
ascending order.
Software Requirement
1. Notepad or Adobe Dreamweaver
2. Web browser
Theory:
The [Link]() method is used to sort the array in place in a given order according to the compare()
function. If the method is omitted, then the array is sorted in ascending order.
Syntax:
[Link](compareFunction)
Parameters: This method accept a single parameter as mentioned above and described below:
 Comparefunction:This parameters is used to sort the elements according to different
attributes and in the different order.
o comparefunction(a,b) < 0
Then a comes before b in the answer.
o compareFunction(a,b) > 0
Then b comes before a in the answer.
o compareFunction(a,b) = 0
Then the order of a and b remains unchanged.
 Return value: This method returns the reference of the sorted original array.
Algorithm:
Step 1: Start the program using <html> tag and define title of the webpage name inside the <head>
tag. (here its contains meta information about the HTML page.
Step 2: Using <head> tag to give head portion of the page.
Step 3: Using <script> tag to specify the script type (vbscript/javascript).
Step 4: Javascript to show sort () function.
Step 5: Using [Link]() function to sort the given input data.
Step 6: Save the program with .html extension.
Step 7: Run the program using web browser.

16
Program:
<html>
<head>
<script type = "text/javascript">
function s() {
vararr=new Array(4,8,2,5,1);
var sorted=[Link]();
[Link] ("Output of the sorting is : " +sorted);
var arr1=new Array("mango","banana","Apple","cake");
var sorted=[Link]();
[Link] ("</br> Output of the sorting string is : " +sorted);
}
s();
</script>
</head>
</html>

Output:

Result:
Thus the javascript sorting program was successfully executed.

17
Ex. No : 9
VOWELS
02.11.2021

Aim:

To Write a JavaScript program to count the number of vowels in a given string.


Software Requirement
1. Notepad or Adobe Dreamweaver
2. Web browser
Theory:
using a user defined function called 'noOfVowels()', reads an input string and compares that string
with another string which contains only vowels( 'aAeEiIoOuU'). It takes the help of indexOf() method
to proceed the task.
The indexOf() method displays index of a character whenever the character is common to both the
strings, in unmatched case it displays '-1' as the output. Here it compares each and every character of
the input string to the vowel string and whenever vowels got matched, it internally increments a user
defined variable called "vowelsCount", which is initially 0. Eventually, the value in the
"vowelsCount" is displayed as the output.
Algorithm:
Step 1: Start the program using <html> tag and define title of the webpage name inside the <head>
tag. (here its contains meta information about the HTML page.
Step 2: Using <head> tag to give head portion of the page.
Step 3: Using <script> tag to specify the script type (vbscript/javascript).
Step 4: Using noOfVowels() and indexOf() function to count the no of vowels from given input data.
Step 5: Save the program with .html extension.
Step 6: Run the program using web browser.

18
Program:

<html>
<body>
<p> Total number of vowels </p>
<script type="text/javascript">
function noOfVowels(string)
{
varlistOfVowels = 'aAeEiIoOuU';
varvowelsCount = 0;
for(vari = 0; i<[Link] ; i++)
{
if ([Link](string[i]) !== -1)
{
vowelsCount += 1;
}
}
return vowelsCount;
}
[Link](noOfVowels("welcome II BCA"));
</script>
</body>
</html>

Output:

Result:
Thus the javascript program was successfully created.

19
Ex. No : 10
LIST OF COUNTRIES AND THEIR CAPITALS
02.11.2021

Aim:

To write an HTML page that contains a selection box with a list of 5 countries. When the
user selects a country, its capital should be printed next to the list. Add CSS to customize the
properties of the font of the capital (color, bold and font size).
Software Requirement
1. Notepad or Adobe Dreamweaver
2. Web browser
Algorithm:
Step 1: Start the program using <html> tag and define title of the webpage name inside the <head>
tag. (here its contains meta information about the HTML page.
Step 2: Using <head> tag to give head portion of the page.
Step 3: Using <style>tag to definecolor, font-weight and font-size.
Step 4: Using <script> tag to specify the script type (vbscript/javascript).
Step 5: Using function capital to get the country value and using if condition to check country and
capital.
Step 6: Save the program with .html extension.
Step 7: Run the program using web browser.

Program:
<html>
<head>
<title>capitals of countries</title>
<style>
{
color:red;
font-weight:bold;
font-size:50;
}
</style>
<script language="javascript">
function capital()
{
var cunt=[Link]["frm1"].[Link];
var capital=" Please select any country ";
if( cunt=="india")
{
capital="NEW DELHI";
}
if( cunt=="china")
{
capital="BEIJING";

20
}
if( cunt=="pakistan")
{
capital="ISLAMABAD";
}
if( cunt=="bangladesh")
{
capital="DHAKA";
}
if( cunt=="japan")
{
capital="TOKYO";
}

if( cunt=="select")
{
capital="Please select any country";
}
[Link]("capt").innerHTML=capital;
}
</script>
</head>
<body>
<form name="frm1">
<br/>
<center>
Select a Country :<select name="country" onchange="capital()">
<option value="select">--SELECT--</option>
<option value="india">INDIA</option>
<option value="china">CHINA</option>
<option value="pakistan">PAKISTAN</option>
<option value="bangladesh">BANGLADESH</option>
<option value="japan">JAPAN</option>
</select>
<br/>
<br/>
<font color="green" size="6">Capital is :</font><p id="capt"></p>
</center>
</form>
</body>
</html>

21
Output:

Result:
Thus the Javascript program was successfully created.

22
Ex. No : 11
SET THE BACKGROUND COLOR OF A PARAGRAPH
11.11.2021

Aim:

To Write a JavaScript program to set the background color of a paragraph.


Software Requirement
1. Notepad or Adobe Dreamweaver
2. Web browser
Algorithm:
Step 1: Start the program using <html> tag and define title of the webpage name inside the <head>
tag. (here its contains meta information about the HTML page.
Step 2: Using <head> tag to give head portion of the page.
Step 3: Using form to get the input data
Step 4: Using <script> tag to specify the script type (vbscript/javascript).
Step 5: Using getElementByTagName to method returns a collection of all elements in the document
with the specified tag name.
Step 6: Save the program with .html extension.
Step 7: Run the program using web browser.

Program:
<html>
<head>
<meta charset=utf-8 />
<title>Set the background color of a paragraph</title>
</head>
<body>
<input type="button" value="Click to set paragraph background color" onclick="set_background()">
<p>JavaScript Exercises</p>
<p>VBscript Exercises</p>
</body>
<script type="text/javascript">
function set_background()
{
docBody = [Link]("body")[0];
myBodyElements = [Link]("p");
myp1 = myBodyElements[0];
[Link] = "rgb(255,0,0)";
myp2 = myBodyElements[1];
[Link] = "rgb(255,255,0)";
}
</script>
</body>
</html>

23
Output

Result:
Thus the javascript program was successfully executed

24
Ex. No : 12
TO CHECK WHETHER A GIVEN VALUE IS IP VALUE OR NOT
11.11.2021

Aim:

To write a JavaScript function to check whether a given value is IP value or not.


Software Requirement
1. Notepad or Adobe Dreamweaver
2. Web browser
Algorithm:
Step 1: Start the program using <html> tag and define title of the webpage name inside the <head>
tag. (here its contains meta information about the HTML page.
Step 2: Using <head> tag to give head portion of the page.
Step 3: Using <p> tag to define the id name, style, font size, font weight and color.
Step 4: Using <script> tag to specify the script type (vbscript/javascript).
Step 5: Using getElementById to method returns the element that has the ID attribute with the
specified value.
Step 6: Save the program with .html extension.
Step 7: Run the program using web browser.

Program:
<!DOCTYPE HTML>
<html>
<head>
<title>
How to check for IP address using regular expression in javascript?
</title>
</head>
<center>
<body style="text-align:center;">
<h1 style="color:green;"> IP ADDRESS </h1>
<p id="GFG_UP" style="font-size: 15px; font-weight: bold;">
</p>
<button onclick="GFG_Fun()"> click here </button>
<p id="GFG_DOWN" style="font-size: 24px; font-weight: bold; color: green;">
</p>
<script>
var up = [Link]('GFG_UP');
var down = [Link]('GFG_DOWN');
varaddr = '[Link]';
[Link] ="Click on the button to validate the IP Address.<br>"+ addr;
function GFG_Fun()
{
[Link] =

25
/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|
[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(addr);
}
</script>
</body>
</center>
</html>

Output:

Result:
Thus the javascript program was successfully executed.

26
Ex. No : 13
SCIENTIFIC CALCULATOR
17.11.2021

Aim:

To design the scientific calculator and make event for each button using JavaScript.
Software Requirement
1. Notepad or Adobe Dreamweaver
2. Web browser
Algorithm:

Step 1: Create HTML Code.


Step 2: Create JavaScript SCIENTIFIC Calculation Code.
Step 3: Create CSS Code for Design.
Step 4: Save the program with .html extension.
Step 5: Run the program using web browser.

Program:

<html>
<head>
<title></title>
</head>
<style type="text/css">
*{
padding: 0;
margin: 5px;
text-align: center;
}
body {
background-color:#ff9933;
}
.calculator {
width: 350px;
height: 320px;
background-color: #c0c0c0;
box-shadow: 0px 0px 0px 10px #666;
border: 5px solid black;
border-radius: 10px;
}
#display {
width: 320px;
height: 40px;
text-align: right;
background-color: black;
border: 3px solid white;
font-size: 18px;

27
left: 2px;
top: 2px;
color: #7fff00;
}
.btnTop{
color: white;
background-color: #6f6f6f;
font-size: 14px;
margin: auto;
width: 50px;
height: 25px;
}
.btnNum {
color: white;
background-color: black;
font-size: 14px;
margin: auto;
width: 50px;
height: 25px;
}
.btnMath {
color: white;
background-color: #ff4561;
font-size: 14px;
margin: auto;
width: 50px;
height: 25px;
}
.btnOpps {
color: white;
background-color: #ff9933;
font-size: 14px;
margin: auto;
width: 50px;
height: 25px;
}
</style>
<body>
<form name="sci-calc">
<table class="calculator" cellspacing="0" cellpadding="1">
<tr>
<td colspan="5"><input id="display" name="display" value="0" size="28" maxlength="25"></td>
</tr>
<tr>
<td><input type="button" class="btnTop" name="btnTop" value="C"
onclick="[Link]= 0 "></td>
<td><input type="button" class="btnTop" name="btnTop" value="<--"
onclick="deleteChar([Link])"></td>
<td><input type="button" class="btnTop" name="btnTop" value="="
onclick="if(checkNum([Link])) { compute([Link]) }"></td>

28
<td><input type="button" class="btnOpps" name="btnOpps" value="&#960;"
onclick="addChar([Link],'3.14159265359')"></td>
<td><input type="button" class="btnMath" name="btnMath" value="%" onclick="
percent([Link])"></td>
</tr>
<tr>
<td><input type="button" class="btnNum" name="btnNum" value="7"
onclick="addChar([Link], '7')"></td>
<td><input type="button" class="btnNum" name="btnNum" value="8"
onclick="addChar([Link], '8')"></td>
<td><input type="button" class="btnNum" name="btnNum" value="9"
onclick="addChar([Link], '9')"></td>
<td><input type="button" class="btnOpps" name="btnOpps" value="x&#94;"
onclick="if(checkNum([Link])) { exp([Link]) }"></td>
<td><input type="button" class="btnMath" name="btnMath" value="/"
onclick="addChar([Link], '/')"></td>
<tr>
<td><input type="button" class="btnNum" name="btnNum" value="4"
onclick="addChar([Link], '4')"></td>
<td><input type="button" class="btnNum" name="btnNum" value="5"
onclick="addChar([Link], '5')"></td>
<td><input type="button" class="btnNum" name="btnNum" value="6"
onclick="addChar([Link], '6')"></td>
<td><input type="button" class="btnOpps" name="btnOpps" value="ln"
onclick="if(checkNum([Link])) { ln([Link]) }"></td>
<td><input type="button" class="btnMath" name="btnMath" value="*"
onclick="addChar([Link], '*')"></td>
</tr>
<tr>
<td><input type="button" class="btnNum" name="btnNum" value="1"
onclick="addChar([Link], '1')"></td>
<td><input type="button" class="btnNum" name="btnNum" value="2"
onclick="addChar([Link], '2')"></td>
<td><input type="button" class="btnNum" name="btnNum" value="3"
onclick="addChar([Link], '3')"></td>
<td><input type="button" class="btnOpps" name="btnOpps" value="&radic;"
onclick="if(checkNum([Link])) { sqrt([Link]) }"></td>
<td><input type="button" class="btnMath" name="btnMath" value="-"
onclick="addChar([Link], '-')"></td>
</tr>
<tr>
<td><input type="button" class="btnMath" name="btnMath" value="&#177"
onclick="changeSign([Link])"></td>
<td><input type="button" class="btnNum" name="btnNum" value="0"
onclick="addChar([Link], '0')"></td>
<td><input type="button" class="btnMath" name="btnMath" value="&#46;"
onclick="addChar([Link], '&#46;')"></td>
<td><input type="button" class="btnOpps" name="btnOpps" value="x&#50;"
onclick="if(checkNum([Link])) { square([Link]) }"></td>
<td><input type="button" class="btnMath" name="btnMath" value="+"
onclick="addChar([Link], '+')"></td>

29
</tr>
<tr>
<td><input type="button" class="btnMath" name="btnMath" value="("
onclick="addChar([Link], '(')"></td>
<td><input type="button" class="btnMath" name="btnMath" value=")"
onclick="addChar([Link],')')"></td>
<td><input type="button" class="btnMath" name="btnMath" value="cos"
onclick="if(checkNum([Link])) { cos([Link]) }"></td>
<td><input type="button" class="btnMath" name="btnMath" value="sin"
onclick="if(checkNum([Link])) { sin([Link]) }"></td>
<td><input type="button" class="btnMath" name="btnMath" value="tan"
onclick="if(checkNum([Link])) { tan([Link]) }"></td>
</tr>
</tabel>
</form>
</body>
<script>
function addChar(input, character) {
if([Link] == null || [Link] == "0")
[Link] = character
else
[Link] += character
}
function cos(form) {
[Link] = [Link]([Link]);
}
function sin(form) {
[Link] = [Link]([Link]);
}
function tan(form) {
[Link] = [Link]([Link]);
}
function sqrt(form) {
[Link] = [Link]([Link]);
}
function ln(form) {
[Link] = [Link]([Link]);
}
function exp(form) {
[Link] = [Link]([Link]);
}
function deleteChar(input) {
[Link] = [Link](0, [Link] - 1)
}
var val = 0.0;
function percent(input) {
val = [Link];
[Link] = [Link] + "%";
}
function changeSign(input) {
if([Link](0, 1) == "-")

30
[Link] = [Link](1, [Link])
else
[Link] = "-" + [Link]
}
function compute(form) {
[Link] = eval([Link]);
}
function square(form) {
[Link] = eval([Link]) * eval([Link])
}
function checkNum(str) {
for (var i = 0; i < [Link]; i++) {
var ch = [Link](i);
if (ch < "0" || ch > "9") {
if (ch != "/" && ch != "*" && ch != "+" && ch != "-" && ch != "."
&& ch != "(" && ch!= ")" && ch != "%") {
alert("invalid entry!")
return false
}
}
}
return true
}
</script>
</html>

Output:

Square root

Result:
Thus the scientific calculator was successfully created.

31
Ex. No : 14
COOKIES
17.11.2021

Aim:

To write a JavaScript program to store current date-time in a COOKIE.


Software Requirement
3. Notepad or Adobe Dreamweaver
4. Web browser
Theory:
Cookies are data, stored in small text files, on your computer. When a web server has sent a web page
to a browser, the connection is shut down, and the server forgets everything about the user. Cookies
were invented to solve the problem "how to remember information about the user":
 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.
Cookies are saved in name-value pairs like:
username = John Doe
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.
Algorithm:
Step 1: Create HTML Code.
Step 2: Create JavaScript to display current date and time in a cookie.
Step 3: Save the program with .html extension.
Step 4: Run the program using web browser.

Program:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>JavaScript creating cookies - example1</title>
</head>
<body>
<h1 style="color: red">JavaScript creating cookies - example1</h1>
<hr />
<script>

var currentDate = new Date(),


day = [Link](),
month = [Link]() + 1,
year = [Link]();
[Link](day + "/" + month + "/" + year)

var currentTime = new Date(),

32
hours = [Link](),
minutes = [Link]();

if (minutes < 10)


{
minutes = "0" + minutes;
}
var suffix = "AM";
if (hours >= 12)
{
suffix = "PM";
hours = hours - 12;
}
if (hours == 0)
{
hours = 12;
}
[Link](" "+hours + ":" + minutes + " " + suffix)
</script>
</body>
</html>

Output:

Result:
Thus the JavaScript program was successfully executed.

33
Ex. No : 15
DISPLAY NUMBER IN WORDS
24.11.2021

Aim:

To Write an HTML page including any required JavaScript that takes a number from one text
field in the range of 0 to 999 and shows it in another text field in words. If the number is out
of range, it should show “out of range” and if it is not a number, it should show “not a
number” message in the result box.
Software Requirement
1. Notepad or Adobe Dreamweaver
2. Web browser
Algorithm:

Step 1: Create HTML Code.


Step 2: Create JavaScript to number in words.
Step 3: Save the program with .html extension.
Step 4: Run the program using web browser.

Program:

<html>
<head>
<title>Number in words</title>
<script language="javascript">
function convert()
{
var num=[Link]["frm1"].[Link];
[Link]["frm1"].[Link]="";
if(isNaN(num))
{
alert("Not a Number");
}
else if (num<0 || num>999)
{
alert("Out of Range");
}
else
{
var len=[Link];
var words="";
for(var i=0;i<len;i++)
{
var n=[Link](i,1);
switch(n)
{
case '0':words+="Zero ";break;

34
case '1':words+="One ";break;
case '2':words+="Two ";break;
case '3':words+="Three ";break;
case '4':words+="Four ";break;
case '5':words+="Five ";break;
case '6':words+="Six ";break;
case '7':words+="Seven ";break;
case '8':words+="Eight ";break;
default:words+="Nine ";
}
}
[Link]["frm1"].[Link]=words;
}
}
</script>
</head>
<body>
<form name="frm1">
<center><h3>NUMBER IN WORDS</h3></center>
<br/>
<center>Enter a Number :<input type="text" name="num"</input><br/></center>
<br/>
<center><input type="button" name="inwords" value="In Words"
onclick="convert()"></input></center>
<br/><br/><center>Number in Words :<input type="text" name="words"</input></center>
<br/>
</form>
</body>
</html>

Output:

35
Result:
Thus the JavaScript program was successfully executed.

36
Ex. No : 16
REGISTRATION FORM
24.11.2021

Aim:

To design a user registration form in html (like gmail, naukri) with javascript validation.
Software Requirement
1. Notepad or Adobe Dreamweaver
2. Web browser
Algorithm:

Step 1: Create HTML Code.


Step 2: Create JavaScript to validate the registration form.
Step 3: Save the program with .html extension.
Step 4: Run the program using web browser.

Program:

<!DOCTYPE html>
<html>
<head>
<title>Welcome To Registration Form</title>

<script type="text/javascript">
function registration()
{

var name= [Link]("t1").value;


var email= [Link]("t2").value;
var uname= [Link]("t3").value;
var pwd= [Link]("t4").value;
var cpwd= [Link]("t5").value;

//email id expression code


var pwd_expression = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-])/;
var letters = /^[A-Za-z]+$/;
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

if(name=='')
{
alert('Please enter your name');
}
else if(![Link](name))
{
alert('Name field required only alphabet characters');
}
else if(email=='')

37
{
alert('Please enter your user email id');
}
else if (![Link](email))
{
alert('Invalid email');
}
else if(uname=='')
{
alert('Please enter the user name.');
}
else if(![Link](uname))
{
alert('User name field required only alphabet characters');
}
else if(pwd=='')
{
alert('Please enter Password');
}
else if(cpwd=='')
{
alert('Enter Confirm Password');
}
else if(!pwd_expression.test(pwd))
{
alert ('Upper case, Lower case, Special character and Numeric letter are required in Password
filed');
}
else if(pwd != cpwd)
{
alert ('Password not Matched');
}
else if([Link]("t5").[Link] < 6)
{
alert ('Password minimum length is 6');
}
else if([Link]("t5").[Link] > 12)
{
alert ('Password max length is 12');
}
else
{
alert('Thank You for Registration & You are Redirecting to Website');
// Redirecting to other page or webste code.
[Link] = "[Link]
}
}
</script>
</head>

<body>

38
<!-- Main div code -->
<div id="main">
<div class="h-tag">
<h2>Register Your Account</h2>
</div>
<!-- create account div -->
<div class="login">
<table cellspacing="2" align="center" cellpadding="8" border="0">
<tr>
<td align="right">Enter Name :</td>
<td><input type="text" placeholder="Enter user here" id="t1" class="tb" /></td>
</tr>
<tr>
<td align="right">Enter Email ID :</td>
<td><input type="text" placeholder="Enter Email ID here" id="t2" class="tb" /></td>
</tr>
<tr>
<td align="right">Enter Username :</td>
<td><input type="text" placeholder="Enter Username here" id="t3" class="tb" /></td>
</tr>
<tr>
<td align="right">Enter Password :</td>
<td><input type="password" placeholder="Enter Password here" id="t4" class="tb" /></td>
</tr>
<tr>
<td align="right">Enter Confirm Password :</td>
<td><input type="password" placeholder="Enter Password here" id="t5" class="tb" /></td>
</tr>
<tr>
<td></td>
<td>
<input type="reset" value="Clear Form" id="res" class="btn" />
<input type="submit" value="Create Account" class="btn" onclick="registration()" /></td>
</tr>
</table>
</div>
<!-- create account box ending here.. -->
</div>
<!-- Main div ending here... -->
</body>
</html>

39
Output:

Result:

Thus the user registration form in html (like gmail, naukri) with javascript validation was
successfully created and executed.

40

You might also like