JavaScript Lab Notes (Full Concepts + Examples
Based on Lab Task 8)
Introduction
JavaScript is a client-side scripting language used to create dynamic, interactive,
and responsive web pages.
1 Placing JavaScript in a Webpage
JavaScript can be placed inside an HTML document in three ways: inline,
internal, and external scripting.
1.1 Internal Script (Inside ¡script¿ Tag)
<!DOCTYPE html>
<html>
<head>
<title>Internal Script Example</title>
<script>
function greet(){
alert("Hello from the HEAD section!");
}
</script>
</head>
<body>
<button onclick="greet()">Click Me</button>
</body>
</html>
1.2 Inline Script
<!DOCTYPE html>
1
<html>
<body>
<button onclick="alert(’Inline JS Running!’)">Click</button>
</body>
</html>
1.3 External Script File
<!DOCTYPE html>
<html>
<head>
<title>External Script</title>
<script src="[Link]"></script>
</head>
<body>
<button onclick="runCode()">Execute</button>
</body>
</html>
[Link]
function runCode(){
alert("External JavaScript working!");
}
2 JavaScript Functions
Functions allow reusable blocks of logic.
<!DOCTYPE html>
<html>
<body>
<script>
function addNumbers(a, b){
return a + b;
}
[Link]("Sum = " + addNumbers(5, 7));
</script>
</body>
</html>
2
3 Arithmetic Operations
Lab Task 8 uses arithmetic operators to compute expressions.
<!DOCTYPE html>
<html>
<body>
<script>
let x = 5;
let y = 3;
[Link]("x + y = " + (x + y) + "<br>");
[Link]("x -= y → " + (x -= y) + "<br>");
[Link]("x *= y → " + (x *= y) + "<br>");
</script>
</body>
</html>
4 Using prompt() and alert()
Task 4 requires taking three inputs using prompt().
<!DOCTYPE html>
<html>
<body>
<script>
let a = parseInt(prompt("Enter first number:"));
let b = parseInt(prompt("Enter second number:"));
let c = parseInt(prompt("Enter third number:"));
let sum = a + b + c;
let avg = sum / 3;
alert("Sum = " + sum + "\nAverage = " + avg);
</script>
</body>
</html>
5 DOM Manipulation with Textboxes
Used in Task 5 (3-input NaN checker).
3
<!DOCTYPE html>
<html>
<body>
First Number: <input id="n1"><br>
Second Number: <input id="n2"><br>
Result: <input id="res" readonly><br>
<button onclick="calc()">Compute</button>
<script>
function calc(){
let a = parseInt([Link]("n1").value);
let b = parseInt([Link]("n2").value);
if(isNaN(a) || isNaN(b)){
[Link]("res").value = "NaN";
} else {
[Link]("res").value = a + b;
}
}
</script>
</body>
</html>
6 Event Handling (onclick, onkeyup, onchange,
onselect)
JavaScript reacts to user-triggered events.
6.1 onclick Example
<button onclick="alert(’Button Clicked!’)">Click Me</button>
6.2 onkeyup Example
<!DOCTYPE html>
<html>
<body>
<input id="t" onkeyup="update()">
<p id="show"></p>
<script>
4
function update(){
[Link]("show").innerHTML =
[Link]("t").value;
}
</script>
</body>
</html>
6.3 onchange Example
<select onchange="alert(’Changed!’)">
<option>Red</option>
<option>Blue</option>
<option>Green</option>
</select>
6.4 onselect Example (Task 8)
<!DOCTYPE html>
<html>
<body>
<input id="box" onselect="showSelected()">
<p id="output"></p>
<script>
function showSelected(){
let box = [Link]("box");
let s = [Link]([Link], [Link]);
[Link]("output").innerHTML = "Selected: " + s;
}
</script>
</body>
</html>
7 Form Validation (Tasks 7 and 9)
<!DOCTYPE html>
<html>
<body>
Name: <input id="name"><br>
Email: <input id="email"><br>
5
<button onclick="validate()">Submit</button>
<script>
function validate(){
if([Link]("name").value == ""){
alert("Name is required.");
return;
}
if([Link]("email").value == ""){
alert("Email is required.");
return;
}
alert("Form Submitted Successfully!");
}
</script>
</body>
</html>
8 Replacing Dropdown with Textbox (Task 6)
<!DOCTYPE html>
<html>
<body>
<div id="menu">
<select>
<option>Apple</option>
<option>Orange</option>
</select>
</div>
<button onclick="replaceMenu()">New Entry</button>
<script>
function replaceMenu(){
[Link]("menu").innerHTML =
"<input type=’text’ placeholder=’Enter new item’>";
}
</script>
</body>
</html>
6
9 Image Switching (Picture Album - Task 10)
<!DOCTYPE html>
<html>
<body>
<button onclick="showPic(’birthday’)">Birthday</button>
<button onclick="showPic(’pets’)">Pets</button>
<button onclick="showPic(’cars’)">Cars</button>
<br><br>
<img id="photo" src="[Link]" width="300">
<script>
function showPic(category){
if(category == "birthday")
[Link]("photo").src = "[Link]";
if(category == "pets")
[Link]("photo").src = "[Link]";
if(category == "cars")
[Link]("photo").src = "[Link]";
}
</script>
</body>
</html>