Scribd
Upload
3 views3 pages

Advanced JavaScript Lab Experiment Full Code

The document outlines an Advanced JavaScript Lab Experiment with various sections demonstrating JavaScript functionalities such as manipulating CSS, z-index stacking, textarea control, pull-down menus, list boxes, and canvas drawing. It includes interactive elements like buttons to change styles, show selected courses, and trigger alerts through event handlers and listeners. The HTML structure is complemented by CSS for styling and JavaScript for functionality.

Uploaded by

prottoysaha10
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views3 pages

Advanced JavaScript Lab Experiment Full Code

The document outlines an Advanced JavaScript Lab Experiment with various sections demonstrating JavaScript functionalities such as manipulating CSS, z-index stacking, textarea control, pull-down menus, list boxes, and canvas drawing. It includes interactive elements like buttons to change styles, show selected courses, and trigger alerts through event handlers and listeners. The HTML structure is complemented by CSS for styling and JavaScript for functionality.

Uploaded by

prottoysaha10
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Advanced JavaScript Lab Experiment

<!DOCTYPE html>
<html>
<head>
<title>Advanced JavaScript Lab Experiment</title>
<style>
body {
font-family: Arial;
margin: 20px;
}
section {
border: 1px solid #aaa;
padding: 15px;
margin-bottom: 30px;
}
/* CSS Manipulation */
#text {
color: red;
font-size: 20px;
}

/* z-index stacking */
.stack-container {
position: relative;
height: 200px;
}
.box1 {
width: 120px;
height: 120px;
background: lightblue;
position: absolute;
top: 20px;
left: 20px;
z-index: 1;
}

.box2 {
width: 120px;
height: 120px;
background: salmon;
position: absolute;
top: 60px;
left: 60px;
z-index: 2;
}

canvas {
border: 1px solid black;
}
</style>
</head>

<body>
<h1>Advanced JavaScript Lab Experiment</h1>

<!-- 1. Manipulating CSS -->


<section>
<h2>1. Manipulating CSS with JavaScript</h2>
<p id="text">This text will change color and size</p>
<button onclick="changeStyle()">Change Style</button>
</section>

<!-- 2. z-index -->


<section>
<h2>2. z-index Stacking</h2>
<div class="stack-container">
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
</div>
</section>

<!-- 3. Textarea -->


<section>
<h2>3. Textarea Control</h2>
<textarea rows="4" cols="40" placeholder="Type something..."></textarea>
</section>

<!-- 4. Pull-down Menu -->


<section>
<h2>4. Pull-Down Menu</h2>
<select onchange="showCourse([Link])">
<option>Select Course</option>
<option>JavaScript</option>
<option>HTML</option>
<option>CSS</option>
</select>
<p id="course"></p>
</section>

<!-- 5. List Box -->


<section>
<h2>5. List Box</h2>
<select multiple size="3">
<option>Apple</option>
<option>Banana</option>
<option>Orange</option>
</select>
</section>

<!-- 6. Canvas -->


<section>
<h2>6. Canvas and Drawing</h2>
<canvas id="myCanvas" width="200" height="120"></canvas>
<button onclick="draw()">Draw</button>
</section>

<!-- 7. Event Handler -->


<h3>7. Event Handler</h3>
<button onclick="handlerExample()">Click (Handler)</button>
<hr>

<!-- 8. Event Listener -->


<h3>8. Event Listener</h3>
<button id="listenerBtn">Click (Listener)</button>

<script>
function changeStyle() {
let t = [Link]("text");
[Link] = "blue";
[Link] = "28px";
}

function showCourse(course) {
[Link]("course").innerText =
"Selected course: " + course;
}

function draw() {
let c = [Link]("myCanvas");
let ctx = [Link]("2d");
[Link] = "green";
[Link](20, 20, 100, 60);
}
/* 7. Event Handler */
function handlerExample() {
alert("Event Handler Triggered");
}
/* 8. Event Listener */
[Link]("click", function () {
alert("Event Listener Triggered");
});
</script>

</body>
</html>

You might also like