Scribd
Upload
8 views

Lab03 Javascript 2021

This document contains instructions for two JavaScript tasks. Task 1 demonstrates how to write JavaScript code in the HTML body and use the getElementById() method to manipulate the innerHTML property of an element. Task 2 shows how to use variables, operators, arithmetic, assignments and functions in JavaScript. It includes examples of block and inline comments, functions that return values, and buttons that call functions to demonstrate changing element content and alerts.

Uploaded by

jl289173
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

Lab03 Javascript 2021

This document contains instructions for two JavaScript tasks. Task 1 demonstrates how to write JavaScript code in the HTML body and use the getElementById() method to manipulate the innerHTML property of an element. Task 2 shows how to use variables, operators, arithmetic, assignments and functions in JavaScript. It includes examples of block and inline comments, functions that return values, and buttons that call functions to demonstrate changing element content and alerts.

Uploaded by

jl289173
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

KK24603: WEB ENGINEERING

Faculty of Computing and Informatics


Semester 2 2020/2021
LAB 03: BASIC JAVASCRIPT
1. Task 1: First JavaScript in HTML body

a) Write the following code in a file called lab03_1.html

<!DOCTYPE html>
<html>
<body>

<h2>Executing JavaScript in HTML Body</h2>

<script>
document.write("Hello World, I’m writing my First
JavaScript");
</script>

</body>
</html>

b) Add the following line getElementById() method to return the element that has the ID
attribute (i.e. <p id=”demo”> inside the <script> tag. Use it together with the innerHTML
property to set or return the HTML content of an element. Add the line <p id="demo"
style="color:blue"></p> inside the body. Can you see the output? Change the position of
the <p> element to test your script.

<script>
document.getElementById("demo").innerHTML = "This output is
written using innerHTML";
</script>

<p id="demo" style="color:blue"></p>

1
2. Task 2: JavaScript: Variables, Operators, Arithmetic, Assignments and Functions.

a) Write the following code in a file called Lab03_2.html and observe the behaviors.

<!DOCTYPE html>
<html>
<head>
<script>
/*Block comment*/
function myFunction1() {
document.getElementById("p1").innerHTML = "Paragraph changed
using p1.";
}
//this is one-line comment
function myFunction2(str) {
document.getElementById("p2").innerHTML = str;
}

function myFunction3(num1, num2) {


var add = num1 + num2;
var sub = num1 - num2;
var mul = num1 * num2;
var mod = getMod(num1, num2); //call a function
document.getElementById("p3").innerHTML = num1+" add "+num2+" =
"+add;
}
function myFunction4(){
alert("This is basic alert!");
}
//this is function that return value
function getMod(x,y){
return x%y;
}
</script>
</head>
<body>
<h1>Example of JavaScript: Variables, Operators, Arithmetic,
Assignments and Functions.</h1>
<p id="p1">Paragraph p1</p>
<p id="p2">Paragraph p2</p>
<p id="p3">Paragraph p3</p>
<button type="button" onclick="myFunction1()">Change p1</button>
<button type="button" onclick="myFunction2('p2 value
changed')">Change p2</button>
<button type="button" onclick="myFunction3(4,2)">Change p3</button>
<button type="button" onclick="myFunction4()">Alert</button>
</body>
</html>

You might also like