Web Tech

Program No.
3
Objective: Use javascript to develop the following programs:
a) To calculate multiplication and division of two numbers(input from
user):-
Theory:- HTML tags used in this program are :
i. The <h1> to <h6> tags are used to define HTML headings.<h1> defines the

most important heading. <h6> defines the least important heading.
ii. <p>:- Defines a paragraph.
iii. <style>:- The <style> tag is used to define style information (CSS) for a

document.
iv. <form>:- The <form> tag is used to create an HTML form for user input.
v. <div>:- The <div> tag defines a division or a section in an HTML

document.The <div> tag is used as a container for HTML elements - which is
then styled with CSS or manipulated with JavaScript.The <div> tag is easily
styled by using the class or id attribute.
vi. <input>:- The <input> tag specifies an input field where the user can enter
data.
vii. <span>:- The <span> tag is an inline container used to mark up a part of a text,

or a part of a document.The <span> tag is easily styled by CSS or manipulated
with JavaScript using the class or id attribute.
viii. <script>:- The <script> tag is used to embed a client-side script

(JavaScript).The <script> element either contains scripting statements, or it
points to an external script file through the src attribute.
Source Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body div{
margin: 4px 0px;
}
</style>
</head>
<body>
<p>Sample form:</p>
<form>
<div>
1st Number:<input type="number" id="firstNumber" >
</div>
<div>
2nd Number:<input type="number" id="secondNumber">
</div>

<input type="button" onClick="multiplyBy()"
Value="Multiply" />

<input type="button" onClick="divideBy()"
Value="Divide" />
</form>
<p>The Result is : <br>
<span id = "result"></span>
</p>
<script>
function multiplyBy()
{
num1 = document.getElementById(
"firstNumber").value;
"secondNumber").value;
document.getElementById(
"result").innerHTML = num1 * num2;
}
function divideBy()
{
"firstNumber").value;
"secondNumber").value;
document.getElementById(
"result").innerHTML = num1 / num2;
}
</script>
</body>
</html>
Output:-
Multiplication O/P:
Divide O/P:
b) To accept a string as a parameter and counts the number of vowels

within the string:-
Theory:- HTML tags used in this program are :-
i. The <h1> to <h6> tags are used to define HTML headings.<h1> defines

the most important heading. <h6> defines the least important heading.
ii. <div>:- The <div> tag defines a division or a section in an HTML

document.The <div> tag is used as a container for HTML elements -
which is then styled with CSS or manipulated with
JavaScript.The <div> tag is easily styled by using the class or id
attribute.
iii. <input>:- The <input> tag specifies an input field where the user can
enter data.
iv. <span>:- The <span> tag is an inline container used to mark up a part
of a text, or a part of a document.The <span> tag is easily styled by
CSS or manipulated with JavaScript using the class or id attribute.
v. <script>:- The <script> tag is used to embed a client-side script

(JavaScript).The <script> element either contains scripting statements,
or it points to an external script file through the src attribute.
Source Code:-
<html>
<head>
<style>
body div{
margin: 4px 0px;
}
</style>
</head>
<body>
<div>
String:<input type="text" id="String" placeholder="Enter the string" >
</div>
<input type="button" onClick="CountVowels()" Value="Result" />
</p>
<script>
function CountVowels()
{
var s1 = document.getElementById("String").value;

var m = s1.match(/[aeiou]/gi);
var c = null ? 0 : m.length;
document.getElementById("result").innerHTML =c;

}
</script>

</body>
</html>
Output:-
After operation:-
c) Using function to validate whether a given value in the textbox is

number or not:-
Theory:- :- HTML tags used in this program are :-

i. The <h1> to <h6> tags are used to define HTML
headings.<h1> defines the most important
heading. <h6> defines the least important heading.
ii. <div>:- The <div> tag defines a division or a section in an HTML

document.The <div> tag is used as a container for HTML
elements - which is then styled with CSS or manipulated with
JavaScript.The <div> tag is easily styled by using the class or id
attribute.
iii. <input>:- The <input> tag specifies an input field where the

user can enter data.
iv. <span>:- The <span> tag is an inline container used to mark up

a part of a text, or a part of a document.The <span> tag is
easily styled by CSS or manipulated with JavaScript using the
class or id attribute.
v. <script>:- The <script> tag is used to embed a client-side script

(JavaScript).The <script> element either contains scripting
statements, or it points to an external script file through the src
attribute.
Source Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
VALUE:<input id="value" placeholder="enter the value">
</div>
<input type="button" onClick="Check()" Value="Result" />
</p>
<script>
function Check()
{
var a=document.getElementById("value").value;
// if(isNaN(a))
// {document.getElementById("result").innerHTML ="not a number";}
// else
// {document.getElementById("result").innerHTML ="number";}
// if(typeof a == 'number'){
// document.getElementById("result").innerHTML ="number";
// }else{
// document.getElementById("result").innerHTML ="not a number";
// }
if(a%1 == 0){
document.getElementById("result").innerHTML ="number";
}else{
document.getElementById("result").innerHTML ="not a number";
}
}
</script>
</body>
</html>
Output:-
After operation:-

Web Tech

Uploaded by

Copyright:

Available Formats

You might also like

Web Tech

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Tech

Uploaded by

Copyright:

Available Formats

Program No.

i. The <h1> to <h6> tags are used to define HTML headings.<h1> defines the

ii. <p>:- Defines a paragraph.

iii. <style>:- The <style> tag is used to define style information (CSS) for a

v. <div>:- The <div> tag defines a division or a section in an HTML

vii. <span>:- The <span> tag is an inline container used to mark up a part of a text,

viii. <script>:- The <script> tag is used to embed a client-side script

b) To accept a string as a parameter and counts the number of vowels

Theory:- HTML tags used in this program are :-

i. The <h1> to <h6> tags are used to define HTML headings.<h1> defines

ii. <div>:- The <div> tag defines a division or a section in an HTML

v. <script>:- The <script> tag is used to embed a client-side script

c) Using function to validate whether a given value in the textbox is

Theory:- :- HTML tags used in this program are :-

ii. <div>:- The <div> tag defines a division or a section in an HTML

iii. <input>:- The <input> tag specifies an input field where the

iv. <span>:- The <span> tag is an inline container used to mark up

v. <script>:- The <script> tag is used to embed a client-side script

You might also like