Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
on
Introduction to Programming Using
JavaScript
BACHELOR OF TECHNOLOGY
in
Electronics and Communication Engineering
by
T.MANASA
15K41A0450
Attach Certificate
()
CERTIFICATE
Ms.G.Renuka, Dr.J.THARUNKUMAR,
Asst. Prof. & Supervisor, Professor & HOD(ECE),
OBJECTIVE v
LIST OF ACRONYMS vi
1. INTRODUCTION 01
2. CERTIFICATION COURSE 02
3. OUTCOME OF THE COURSE 03
4. CASE STUDY OF CERTIFICATION 04
5. CONCLUSION 14
6. BIBLIOGRAPH 15
ACKNOWLEDGEMENT
Finally I would like to thank all the teaching and non-teaching staff of
the department for their suggestions and timely support.
iv
OBJECTIVE
Choose and configure HTML5 tags such that to display text, graphics, play media,
organize contents and forms and also for input and validation.
v
LIST OF ACRONYMS
vi
INTRODUCTION
In this course we learnt about how JavaScript is used to enhance existing web pages and
also howHTML5 and CSS3 are used to build UI.
JavaScript is a programming language that drives the web: from front-end user interface
design, to backend server-side programming, we find JavaScript at every stage of a web site and
web application. In this course, we learnt the fundamental programming concepts and syntax of
the JavaScript programming language, JavaScript operators, keywords, and methods, using
variables, data types, and functions, implementing decisions and loops, interacting with the
DOM (Document Object Model), BOM (Browser Object Model)and interacting with forms.
Furthermore, this course will help anyone who is looking to improve their employability
prospects in the areas of designing and building web pages.
1
CERTIFICATION COURSE
1. HTML5
Brief discussion on syntax of html, form tags, form attributes, form elements,
graphics , multimedia, input elements(height, width, pattern, list, etc..), sample programs on
html.
2. CSS3
3. JavaScript
2
OUTCOME
• Program with JavaScript Operators , Methods, Keywords, Variable, DataTypes and Functions.
3
CASE STUDY OF CERTIFICATION
(JavaScript Tip Calculator)
A calculator for Tip is developed with inputs such as bill amount, number of members
sharing the bill and select button with attributes like Outstanding, Good,It was OK,Bad and
Terrible is given.If calculate button is clicked then the amount for tip is calculated and shown in
below
HTML PROGRAM
div id="container">
<h1>Tip Calculator</h1>
<div id="calculator">
<form>
<p>
<p>
<select id="serviceQual">
</select>
4
</form>
</div>
<!--calculator end-->
<div id="totalTip">
<sup>$</sup><span id="tip">0.00</span>
<small id="each">each</small>
</div>
<!--totalTip end-->
</div>
<!--container end-->
CSS PROGRAM
body {
font-family: Roboto;
background: #8E0E00;
5
background: -webkit-linear-gradient(to left, #8E0E00, #1F1C18);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
#container {
height: 525px;
width: 360px;
background: #f7f7f7;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
h1 {
background: #1F030C;
color: white;
margin: 0;
text-transform: uppercase;
font-size: 18px;
font-weight: normal;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
6
p{
padding-left: 20px;
form input[type="text"] {
width=90px;
input {
padding-left: 20px;
#billamt {
font-size: 14px;
/*color: #2980b9;*/
color: #red;
background-color: #f7f7f7;
width: 60%;
#billamt:focus {
background: #fff;
outline: none;
#peopleamt {
width: 60%;
margin-left: 20px;
7
color: #red;
background-color: #f7f7f7;
font-size: 14px;
.dollarSign {
display: inline;
#serviceQual {
margin-left: 20px;
font-size: 25px;
button {
text-transform: uppercase;
font-weight: bold;
display: block;
background: #AD133A;
border-radius: 5px;
width: 200px;
height: 50px;
font-size: 17px;
color: white;
button:hover {
8
background: #4c2827;
border-bottom-color: #111;
button:active {
position: relative;
top: 1px;
#totalTip {
font-size: 30px;
margin-top: 5px;
text-align: center;
#totalTip:before {
font-size: 20px;
font-weight: bold;
display: block;
text-transform: uppercase;
#totalTip sup {
font-size: 20px;
top: -18px;
#totalTip small {
font-size: 20px;
font-weight: bold;
9
display: block;
JavaScript program
//Calculate Tip
function calculateTip() {
//validate input
return;
numOfPeople = 1;
document.getElementById("each").style.display = "none";
} else {
document.getElementById("each").style.display = "block";
//Calculate tip
//next line allows us to always have two digits after decimal point
10
total = total.toFixed(2);
document.getElementById("totalTip").style.display = "block";
document.getElementById("tip").innerHTML = total;
document.getElementById("totalTip").style.display = "none";
document.getElementById("each").style.display = "none";
document.getElementById("calculate").onclick = function() {
calculateTip();
};
11
12
13
CONCLUSION
14
BIBILOGRAPH
1. https://www.nhneworleans.com/about-us/case-studies
2. https://www.louisianabelieves.com/docs/default-source/jumpstart/microsoft-technology-
associate.pdf
15