Scribd
Upload
5 views3 pages

JavaScript Lab: Dynamic HTML Tasks

This document provides instructions for two tasks to create simple web pages using JavaScript. The first task involves creating a page with buttons that dynamically update the content, image source, and style of different elements on the page. The second task creates a basic addition calculator that accepts two user inputs and displays their sum. Code snippets are provided for sample HTML pages that implement each task.

Uploaded by

funny videos
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
5 views3 pages

JavaScript Lab: Dynamic HTML Tasks

This document provides instructions for two tasks to create simple web pages using JavaScript. The first task involves creating a page with buttons that dynamically update the content, image source, and style of different elements on the page. The second task creates a basic addition calculator that accepts two user inputs and displays their sum. Code snippets are provided for sample HTML pages that implement each task.

Uploaded by

funny videos
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

06/03/2019 Lab5_JS_Intro.

html

LAB 5: WORKING WITH JAVAS CRIP T

In this lab we will create some simple HTML pages that use JavaScript to implement dynamic behaviour in the
web page.

TASK 1: CHANGING HTM L E L E M E NT S CONT E NT, AT T R I B U T E A N D S T Y L E


In this task you will create a simple HTML page, which has a heading element, an image element, and a
paragraph element. The page will show three buttons which the user can click to change each of these three
elements:

The first button replaces the content of the heading with the current date and time
The second button changes the image from triangle to circle
The third button changes the paragraph alignment from left to right

This is how the page looks when first loaded:

W 1 :

W 2 :

[Link] 1/3
06/03/2019 Lab5_JS_Intro.html

W 3 :

E T 1

<!DOCTYPE html>
<html>
<body>

<h2 id="timestamp">Today's date and time</h2>

<img id="myimg" src="[Link]" />

<p id="mypara" style="max-width:400px">This is a paragraph. </p>

<button type="button"
onclick="[Link]('timestamp').innerHTML = Date()">
Show datetime in heading</button><br>

<button onclick="[Link]('myimg').src='[Link]';">
Change image</button><br>

<button onclick="[Link]('mypara').[Link]='right';">

[Link] 2/3
06/03/2019 Lab5_JS_Intro.html

Right align paragraph</button>

</body>
</html>

TASK 2: MAKING A SIMP L E ADDIT ION CAL CUL ATOR

In this task you will create an HTML page which allows the user to enter two numbers and display their sum.
We'll use JavaScript functions to implement this task.

Output for Task 1 when the page is first loaded:

Output for Task 1 when user enters two numbers and clicks the button:

E T 1

<!DOCTYPE html>
<html>

<head>
<script>
function add(field1id, field2id) {
var a = [Link](field1id).value;
var b = [Link](field2id).value;

return parseInt(a) + parseInt(b);


}

function showResult(elementId, value) {


[Link](elementId).innerHTML = value;
}
</script>
</head>

<body>

Number 1: <input id="num1" /><br>


Number 2: <input id="num2" /><br>
Result: <div id="result">Show result here ...</div>
<button onclick="showResult('result', add('num1', 'num2')); ">Add and show result</button>

</body>
</html>

[Link] 3/3

You might also like