Scribd
Upload
4 views

Experiment No 11

The document outlines an experiment to develop a simple calculator using JavaScript, focusing on mathematical operators, the Document Object Model (DOM), and event handling. It includes code examples for HTML and JavaScript, demonstrating how to create a user interface for basic arithmetic operations. The conclusion emphasizes the integration of HTML, CSS, and JavaScript to create a functional application.

Uploaded by

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

Experiment No 11

The document outlines an experiment to develop a simple calculator using JavaScript, focusing on mathematical operators, the Document Object Model (DOM), and event handling. It includes code examples for HTML and JavaScript, demonstrating how to create a user interface for basic arithmetic operations. The conclusion emphasizes the integration of HTML, CSS, and JavaScript to create a functional application.

Uploaded by

vanshpatel3175
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

Web Programming(3160713) 220180107055

Experiment No: 11

Develop simple calculator for addition, subtraction, multiplication and


division operation using java script.

Date:

Competency and Practical Skills:

Relevant CO: 2

Objectives:

1. To understand the use of mathematical operators in javascript.


2. To understand the use of document object model.
3. To understand javascript event handling.
Theory:

Javascript Syntax

How to create and use variables?

var x,y,z;

x=5;

y=5

z=x+y;

document.write(“total is : ”+z)

The HTML DOM (Document Object Model)

- When a web page is loaded, the browser creates a Document Object Model of the
page.
- The HTML DOM model is constructed as a tree of Objects:
- Using DOM Javascript can
o change all the HTML elements in the page
o change all the HTML attributes in the page
o change all the CSS styles in the page
o remove existing HTML elements and attributes
Web Programming(3160713) 220180107055

o add new HTML elements and attributes


o react to all existing HTML events in the page
o create new HTML events in the page

Figure 1 Document Object Model

DOM Examples

Example 1: following example changes the content of <p> element


Web Programming(3160713) 220180107055

<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

</body>
</html>

Here getElementById is a method, while innerHTML is a property.

Example 2: Validate Numeric Input


Web Programming(3160713) 220180107055

Implementation:

Develop simple calculator for addition, subtraction, multiplication and division operation
using java script.

Calculate.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Simple Calculator</title>
Web Programming(3160713) 220180107055

<link rel="stylesheet" href="styles.css">

</head>

<body>

<div class="calculator">

<input type="text" id="result" readonly>

<div class="buttons">

<button onclick="clearResult()">C</button>

<button onclick="appendNumber('1')">1</button>

<button onclick="appendNumber('2')">2</button>

<button onclick="appendNumber('3')">3</button>

<button onclick="appendNumber('+')">+</button>

<button onclick="appendNumber('4')">4</button>

<button onclick="appendNumber('5')">5</button>

<button onclick="appendNumber('6')">6</button>

<button onClick="appendNumber('-')">-</button>

<button onclick="appendNumber('7')">7</button>

<button onclick="appendNumber('8')">8</button>

<button onclick="appendNumber('9')">9</button>

<button onclick="appendNumber('*')">*</button>

<button onclick="appendNumber('0')">0</button>

<button onclick="appendNumber('.')">.</button>

<button onclick="calculateResult()">=</button>

<button onclick="appendNumber('/')">/</button>

</div>

</div>

<script src="script.js"></script>

</body>

</html>
Web Programming(3160713) 220180107055

Script.js

function clearResult() {

document.getElementById('result').value = '';

function appendNumber(number) {

document.getElementById('result').value += number;

function calculateResult() {

const result = document.getElementById('result').value;

document.getElementById('result').value = eval(result);

Output:

Conclusion:

This simple calculator program demonstrates basic HTML, CSS, and JavaScript integration,
providing a functional and user-friendly interface for performing essential arithmetic operations.

Quiz:

1. Explain Document Object Model.


Ans: The DOM is a programming interface for web documents, representing the document as a tree
of objects. It allows developers to manipulate the structure, style, and content of web pages
Web Programming(3160713) 220180107055

dynamically using JavaScript. The DOM also enables event handling and interaction with HTML
elements.

Suggested Reference:

● https://www.w3schools.com/js/js_htmldom.asp

● https://www.w3schools.com/js/js_validation.asp

References used by the students:

● https://www.w3schools.com/js/js_htmldom.asp

Rubric wise marks obtained:

Rubrics 1 2 3 Total

Marks

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