Scribd
Upload
29 views12 pages

Assign 4

Uploaded by

Lalita Kshirsagar
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
29 views12 pages

Assign 4

Uploaded by

Lalita Kshirsagar
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
You are on page 1/ 12

Web Technology Lab Manual

Assignment No. - 04
TITLE

HTML, CSS AND JAVASCRIPT .

OBJECTIVES

Understand about basic concepts of HTML, CSS AND JAVASCRIPT .

PROBLEM STATEMENTS

1. Implement an application in Java Script using following:


a) Design UI of application using HTML, CSS etc.
b) Include Java script validation.
c) Use of prompt and alert window using Java Script.

OUTCOMES

Students will be able to:


1. Design and implement a simple calculator using Java Script .

a) Design calculator interface like text field for input and output, buttons for numbers and
operators etc.

b) Validate input values .


c) Prompt/alerts for invalid values etc .

SOFTWARE NEEDED

1. Any Operating System


2. Notepad, Notepad ++ or VS Code
3. Web browser

Page 25
Web Technology Lab Manual

THEORY - CONCEPT

HyperText Markup Language (HTML)

 HTML stands for Hyper Text Markup Language.

 HTML is the standard markup language for creating Web pages.

 HTML describes the structure of a Web page.

 HTML consists of a series of elements.

 HTML elements tell the browser how to display the content.

How HTML works ?

HTML is a text file containing specific syntax, file and naming conventions that show the computer
and the web server that it is in HTML and should be read as such. By applying these HTML
conventions to a text file in virtually any text editor, a user can write and design a basic webpage, and
then upload it to the internet.

The most basic of HTML conventions is the inclusion of a document type declaration at the
beginning of the text file. This always comes first in the document, because it is the piece that
affirmatively informs a computer that this is an HTML file. The document header typically looks like
this: <!DOCTYPE html>. It should always be written that way, without any content inside it or
breaking it up. Any content that comes before this declaration will not be recognized as HTML by a
computer.

Example:-

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

Page 26
Web Technology Lab Manual

Cascading Style Sheet(CSS)


 CSS (Cascading Style Sheet) describes the HTML elements which are displayed on screen,
paper, or in other media.
 It saves a lot of time. It controls the layout of multiple web pages at one time.
 It sets the font-size, font-family, color, background color on the page.
 It allows us to add effects or animations to the website.
 We use CSS to display animations like buttons, effects, loaders or spinners, and also animated
backgrounds.

There are 3 types of CSS which are below:

1. Internal CSS
The Internal CSS has <style> tag in the <head> section of the HTML document. This CSS style
is an effective way to style single pages.

2. External CSS
In external CSS, we link the web pages to the external .css file. It is created by text editor. The CSS
is more efficient method for styling a website. By editing the .css file, we can change the whole site at
once.

2. Inline CSS
Inline CSS is used to style a specific HTML element. Add a style attribute to each HTML tag
without using the selectors

Example of inline CSS :-

1. <!DOCTYPE html>
2. <html>
3. <body style="background-color:white;">
4. <h1 style="color:Red;padding:20px;">CSS Tutorials</h1>
5. <p style="color:blue;">It will be useful here.</p>
6. </body>
7. </html>

Page 27
Web Technology Lab Manual

Javascript
 JavaScript is a dynamic programming language that's used for web development, in web
applications, for game development, and lots more.
 It allows you to implement dynamic features on web pages that cannot be done with only
HTML and CSS.
 JavaScript (js) is a light-weight object-oriented programming language which is used by
several websites for scripting the webpages.
 It is an interpreted, full-fledged programming language that enables dynamic interactivity on
websites when applied to an HTML document.

Features of JavaScript
There are following features of JavaScript:

1. All popular web browsers support JavaScript as they provide built-in execution environments.
2. JavaScript follows the syntax and structure of the C programming language. Thus, it is a structured
programming language.
3. JavaScript is a weakly typed language, where certain types are implicitly cast (depending on the
operation).
4. JavaScript is an object-oriented programming language that uses prototypes rather than using classes
for inheritance.
5. It is a light-weighted and interpreted language.
6. It is a case-sensitive language.
7. JavaScript is supportable in several operating systems including, Windows, macOS, etc.
8. It provides good control to the users over the web browsers.

Example :

<script>

document.write("Hello JavaScript by JavaScript");

</script>

Output:- Hello JavaScript by JavaScript

Page 28
Web Technology Lab Manual

DESIGN / EXECUTION STEPS

Following steps are used to Create and Execute web applications,


1. Design html ,css and js files with an extension of.html, .css and .js .
2. Run html file on any browser.

TEST CASES

Manual testing is used to validate the fields like username, password, mobile number and email
id’s of the users entered by user is in correct format.
CONCLUSION / ANALYSIS

Hence, we have performed the javascript program to develop a calculator for performing operations
like addition,subtraction,multiplication,etc.

PROGRAM CODE & OUTPUT

Following pages required to run this application:


1. calc.html
2. calc.css
3. calc.js

Page 29
Web Technology Lab Manual

HTML CODE
calc.html

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
<meta charset="utf-8">
<title>Simple Calculator using HTML, CSS and JavaScript</title>
<link rel="stylesheet" href="calc.css">
</head>

<body>

<table class="calculator" >


<tr>
<td colspan="3"> <input class="display-box" type="text" id="result" disabled /> </td>

<!-- clearScreen() function clears all the values -->


<td> <input type="button" value="C" onclick="clearScreen()" id="btn" /> </td>
</tr>
<tr>
<!-- display() function displays the value of clicked button -->
<td> <input type="button" value="1" onclick="display('1')" /> </td>
<td> <input type="button" value="2" onclick="display('2')" /> </td>
<td> <input type="button" value="3" onclick="display('3')" /> </td>
<td> <input type="button" value="/" onclick="display('/')" /> </td>
</tr>
<tr>
<td> <input type="button" value="4" onclick="display('4')" /> </td>
<td> <input type="button" value="5" onclick="display('5')" /> </td>
<td> <input type="button" value="6" onclick="display('6')" /> </td>
<td> <input type="button" value="-" onclick="display('-')" /> </td>
</tr>
<tr>
<td> <input type="button" value="7" onclick="display('7')" /> </td>
Page 30
Web Technology Lab Manual
<td> <input type="button" value="8" onclick="display('8')" /> </td>
<td> <input type="button" value="9" onclick="display('9')" /> </td>
<td> <input type="button" value="+" onclick="display('+')" /> </td>
</tr>
<tr>
<td> <input type="button" value="." onclick="display('.')" /> </td>
<td> <input type="button" value="0" onclick="display('0')" /> </td>

<!-- calculate() function evaluates the mathematical expression -->


<td> <input type="button" value="=" onclick="calculate()" id="btn" /> </td>
<td> <input type="button" value="*" onclick="display('*')" /> </td>
</tr>
</table>

<script type="text/javascript" src="calc.js"></script>

</body>

</html>

Page 31
Web Technology Lab Manual

CSS FILE
calc.css
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');

.calculator {
padding: 10px;
border-radius: 1em;
height: 380px;
width: 400px;
margin: auto;
background-color: #191b28;
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.display-box {
font-family: 'Orbitron', sans-serif;
background-color: #dcdbe1;
border: solid black 0.5px;
color: black;
border-radius: 5px;
width: 100%;
height: 65%;
}

#btn {
background-color: #fb0066;
}

input[type=button] {
font-family: 'Orbitron', sans-serif;
background-color: #64278f;
color: white;
border: solid black 0.5px;
width: 100%;
border-radius: 5px;
Page 32
Web Technology Lab Manual
height: 70%;
outline: none;
}

input:active[type=button] {
background: #e5e5e5;
-webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
-moz-box-shadow: inset 0px 0px 5px #c1c1c1;
box-shadow: inset 0px 0px 5px #c1c1c1;
}

Page 33
Web Technology Lab Manual

JAVASCRIPT CODE
calc.js
// This function clears all the values
function clearScreen() {
document.getElementById("result").value = "";
}

// This function displays the values


function display(value) {
document.getElementById("result").value += value;
}

// This function evaluates the expression and returns the result


function calculate() {
var p = document.getElementById("result").value;
var q = eval(p);
document.getElementById("result").value = q;
}

Page 34
Web Technology Lab Manual

OUTPUT

Page 35
Web Technology Lab Manual

ORAL QUESTIONS

1. What is HTML ?
2. What is CSS ?
3. What is the Javascript ?
4. Understand the use of prompt and alert window using Java Script .
5. Explain JS validation.

Page 36

You might also like