Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
5 views

js lab

The document contains a series of JavaScript lab programs divided into three modules. Module 1 includes a simple calculator, a registration form, and examples of inline, internal, and external CSS. Module 2 features JavaScript programs for printing 'Hello World', dynamically changing HTML content, calculating factorials, and displaying growing and shrinking text. Module 3 includes programs for displaying alert messages, prompting user input, and checking for substrings in a string.

Uploaded by

S.Y Suprabhath
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

js lab

The document contains a series of JavaScript lab programs divided into three modules. Module 1 includes a simple calculator, a registration form, and examples of inline, internal, and external CSS. Module 2 features JavaScript programs for printing 'Hello World', dynamically changing HTML content, calculating factorials, and displaying growing and shrinking text. Module 3 includes programs for displaying alert messages, prompting user input, and checking for substrings in a string.

Uploaded by

S.Y Suprabhath
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

JAVASCRIPT Lab programs

MODULE 1

PROGRAM 1:design a simple calculator using html and css

<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{
padding: 0;
margin: 0;
font-family: 'poppins', sans-serif;
}
body{
background-color: #495250;
display: grid;
height: 100vh;
place-items: center;
}
.main{
width: 400px;
height: 450px;
background-color: white;
position: absolute;
border: 5px solid black;
border-radius: 6px;
}
.main input[type='text'] {
width: 88%;
position: relative;
height: 80px;
top: 5px;
text-align: right;
padding: 3px 6px;
outline: none;
font-size: 40px;
border: 5px solid black;
display: flex;
margin: auto;
border-radius: 6px;
color: black;
}
.btn input[type='button']{
width:90px;
padding: 2px;
margin: 2px 0px;
position: relative;
left: 13px;
top: 20px;
height: 60px;
cursor: pointer;
font-size: 18px;
transition: 0.5s;
background-color: #495250;
border-radius: 6px;
color: white;
}
.btn input[type='button']:hover{
background-color: black;
color: white;
}
</style>
<script>
function Solve(val) {
var v = document.getElementById('res');
v.value += val;
}
function Result() {
var num1 = document.getElementById('res').value;
var num2 = eval(num1);
document.getElementById('res').value = num2;
}
function Clear() {
var inp = document.getElementById('res');
inp.value = '';
}
function Back() {
var ev = document.getElementById('res');
ev.value = ev.value.slice(0,-1);
}
</script>
<title>Calulator</title>
</head>
<body>
<div class="main">
<input type="text" id = 'res'>
<div class="btn">
<input type="button" value = 'C' onclick = "Clear()">
<input type="button" value = '%' onclick = "Solve('%')">
<input type="button" value = '←' onclick ="Back('←')">
<input type="button" value = '/' onclick = "Solve('/')">
<br>
<input type="button" value = '7' onclick = "Solve('7')">
<input type="button" value = '8' onclick = "Solve('8')">
<input type="button" value = '9' onclick = "Solve('9')">
<input type="button" value = 'x' onclick = "Solve('*')">
<br>
<input type="button" value = '4' onclick = "Solve('4')">
<input type="button" value = '5' onclick = "Solve('5')">
<input type="button" value = '6' onclick = "Solve('6')">
<input type="button" value = '-' onclick = "Solve('-')">
<br>
<input type="button" value = '1' onclick = "Solve('1')">
<input type="button" value = '2' onclick = "Solve('2')">
<input type="button" value = '3' onclick = "Solve('3')">
<input type="button" value = '+' onclick = "Solve('+')">
<br>
<input type="button" value = '00'onclick = "Solve('00')">
<input type="button" value = '0' onclick = "Solve('0')">
<input type="button" value = '.' onclick = "Solve('.')">
<input type="button" value = '=' onclick = "Result()">
</div>
</div>
</script>
</body>
</html>
PROGRAM 2:Design a registration form using html and css, include image in it

<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="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Tech">B.Tech</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</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>

PROGRAM 3:IIUSTRATE 3 LEVELS OF STYLE SHEETS

1)Inline

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1 style="color: green; text-decoration: underline;">Cascade Style Sheets</h1>
<p style="font-size: 25px; font-family: 'Trebuchet MS';">Welcome to CSS</p>
</body>
</html>

2)Internal
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: orange;}

h1
{
color: green;
text-decoration: underline;
}
p{
font-size: 25px;
font-family: 'Trebuchet MS', sans-serif;
}
</style>
</head>
<body>
<h1>Cascade Style Sheets</h1>
<p>Welcome to CSS</p>
</body>
</html>
3)External

<!DOCTYPE html> k1.css


<html>
<head>
<link rel="stylesheet" href="k1.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

MODULE 2:

PROGRAM 1:Write a javascriptprgm to print hello world

<html>
<head>
<title>My First JavaScript code!!!</title>
<script type="text/javascript">
document.write(“HELLO WORLD");
</script>
</head>
<body>
</body>
</html>

PROGRAM 2:Write a javascript program to change thehtml content dynamically

<!DOCTYPE html>
<html>
<body>
<h4>Example - JavaScript can Change HTML</h4>
<p id="id-1">Engineering</p>
<script>
document.getElementById("id-1").innerHTML = "Computer Engineering";
</script>
</body>
</html>
PROGRAM 3: Write a javascript program to find the factorial of a number

<!DOCTYPE html>
<html>
<body>
<script>
function factorial()
{
var fact=1,i;
var a=prompt("enter a number:");
for(i=1;i<=a;i++)
{
fact=fact*i;
}
document.write("factorial of number "+a+" is:",fact);
}
</script>
<form>
<input type="button" value="factorial" onclick="factorial();">
</form>
</body>
</html>

PROGRAM 4:Write a JavaScript code that displays text “TEXT-GROWING” with increasing font size in the interval of 1000ms in RED
COLOR, when the font size reaches 50pt it displays “TEXT-SHRINKING” in BLUE color. Then the font size decreases to 5pt.

<html>
<head>
</head>
<body>
<center>
<p id="demo"/>
</center>
<script>
var var1=setInterval(inTimer,1000);
var size=5;
var ids=document.getElementById("demo");
function inTimer(){
size+=5;
ids.innerHTML="TEXT GROWING";
ids.setAttribute("style","font-size:"+size+"px; color:red");
if(size>=50)
{
clearInterval(var1);
var var2=setInterval(deTimer,1000);
}
}
function deTimer(){
size-=5;
ids.innerHTML="TEXT SHRINKING";
ids.setAttribute("style","font-size:"+size+"px; color:blue");
if(size<=5)
{
clearInterval(var1);

}
}
</script>
</body>
MODULE 3

1) Write A POPUP Message Program using Event


<!DOCTYPE html>
<html>

<head>
<script>
function showAlert() {
alert("Displaying an Alert box");
}
</script>
</head>
<body>
<button onclick="showAlert()">
Display Alert Box
</button>
</body>
</html>

2) Display Alert for Prompt Message Program

<!DOCTYPE html>
<html>
<body>
<h1>Demo: prompt()</h1>
<button onclick="myinput()">Click to enter your name</button>
<p id="msg"></p>

<script>
function myinput()
{
var name = prompt("Enter Your Name:");

if (name == null || name == "")


{
document.getElementById("msg").innerHTML = "You did not entert anything.Please enter
your name again";
}
else
{
document.getElementById("msg").innerHTML = "You enterted: " + name;
}
}
</script>
</body>
</html>

3)check whether a string contains a substring


<!DOCTYPE html>
<html>
<head>
<title>Substring Check</title>
<script>
function checkSubstring() {
let mainString = document.getElementById("mainStringInput").value;
let subString = document.getElementById("subStringInput").value;
let resultElement = document.getElementById("result");
if (mainString.includes(subString)) {
resultElement.textContent = "Substring found!";
} else {
resultElement.textContent = "Substring not found.";
}
}
</script>
</head>
<body>
<input type="text" id="mainStringInput" placeholder="Enter main string">
<input type="text" id="subStringInput" placeholder="Enter substring">
<button onclick="checkSubstring()">Check Substring</button>
<p id="result"></p>
</body>
</html>

You might also like