Scribd
Upload
6 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
6 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

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy