A Certification Course Report

on
Introduction to Programming Using JavaScript

Submitted in partial fulfillment of requirement for the award of degree of

BACHELOR OF TECHNOLOGY
in
BRANCH
by

Name : BATHINI RAGHAV

Roll No : 15K41A0504
 Attach Certificate

(Xerox Copy of MTA/Labview/others certificate )

 CERTIFICATE

This is to certify that this Certification course entitled “Introduction to Programming

Using JavaScript”” is a bonafide work carried out by Mr. Bathini Raghav
(15K41A0504), in partial fulfillment of the requirements for the award of the degree of
Bachelor of Technology in Computer Science and Engineering during the academic
year 2018-2019 under our guidance and supervision.

M.Sheshikala Srinivas Aluvala

Asst.Prof, Professor & HOD,
SR Engineering College, SR Engineering College,
Ananthasagar, Warangal. Ananthasagar, Warangal.
 ACKNOWLEDGEMENT

I wish to take this opportunity to express my sincere gratitude and deep sense of
respect to our beloved Principal, Dr. V. MAHESH, for his continuous support and
guidance to complete this certification course in the institute.

I express my heartfelt thanks to our Head of the department, A.SRINIVAS, for

providing me with necessary infrastructure and thereby giving me freedom to carry out
the certification course.

I express my heartfelt thanks to coordinator M.SHESHIKALA for his/her

encouragement and support.

I express my gratitude to MICROSOFT TECHNOLOGY ASSOCIATE for their guidance

and support.

Finally I would like to thank all the teaching and non-teaching staff of the department
for their suggestions and timely support.

iv
 CONTENTS
ACKNOWLEDGEMENT iv
OBJECTIVE v
LIST OF ACRONYMS vi

Chapter No. Title Page No.

1. INTRODUCTION 01
2. CERTIFICATION COURSE (MTA) 02
3. OUTCOME OF THE COURSE 03
4. CASE STUDY OF CERTIFICATION 04
5. CONCLUSION 05
6. BIBLIOGRAPH 06

iii
 OBJECTIVE

The main objectives of this course are:

• Understand the fundamentals of HTML5,CSS3 and JavaScript.

• Build the User Interface by using HTML5.

• Choose and configure HTML5 tags such that to display text, graphics, play
media, organize contents and forms and also for input and validation.

• Format the User Interface by Using CSS3.

• Arrange UI content by using CSS3.

• Manage the graphical interface by using CSS3.

• Code animations by using JavaScript.

• Code server-side programming (Jquery).

v
 LIST OF ACRONYMS

S.NO ACROYNM NAME PAGE NO.

1. (MTA)Microsoft Technology Associate 1
2. (UI)User Interface 1
3. (HTML)Hyper Text Markup Language 3
4. (CSS)Cascading Style Sheets 3
5. (OOP)Object Oriented Programming 3
6. (DOM)Document Object Model 3
7. (BOM)Browser Object Model 3

vi
 INTRODUCTION
1.1 HTML5:-

HTML5 is a markup language used for structuring and presenting content on the World
Wide Web. A HTML document is a plain text file which is encoded in HTML language. A
browser is used to decode the HTML document and display it to the user. All contents
within the html document is surrounded by tags. These tags enable the browser to
determine the formatting, layout and other specifications related to the html webpage.

1.2 CSS3:-

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to
simplify the process of making web pages presentable.
CSS handles the look and feel part of a web page. Using CSS, you can control the color of
the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid
out, what background images or colors are used, layout designs, variations in display for
different devices and screen sizes as well as a variety of other effects.
CSS is easy to learn and understand but it provides powerful control over the presentation
of an HTML document. Most commonly, CSS is combined with the markup languages
HTML or XHTML.

1.3 JAVASCRIPT:-

In this course we learnt about how JavaScript is used to enhance existing web pages.
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 website
and web application. JavaScript is very easy to implement because it is integrated with
HTML. It is open and cross-platform.

1
 CERTIFICATION COURSE

2.1 The topics discussed in this course are

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

Brief discussion on syntax of CSS, selector tags, input elements (color, padding,
margin, Borders, etc..), font properties, display properties, position properties, sample
programs on CSS.

3. JavaScript

Brief discussion on 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.

2.2 The programs discussed in this course are :

1. Sample programs on attributes, drop down, frames, graphics, multimedia, text area
using html.
2. Sample programs to implement inline, internal, external CSS.
3. Sample programs to implement concept of tables, navbar using padding, margin
concepts in CSS.
4. Sample programs for pop-up alert box using JS.
5. Sample programs implementing DOM attributes, forms, elements, event listeners
using JavaScript.
6. Sample program to implement concept of stack, queues, functions, timer functions
using JavaScript.

2
 OUTCOME OF THE COURSE
Upon completion of this course, we can develop ability to :

• Build the User Interface using HTML (5) + CSS programming.

• Program with JavaScript Operators , Methods, Keywords, Variable, DataTypes and

Functions.

• Program with OOP in JavaScript.

• Implement and Analyze Decisions and Loops.

• Creating basic dynamic web pages using client - Jquery (Javascript).

• Interaction with DOM and BOM.

• Interaction with HTML forms.

3
 CASE STUDY OF CERTIFICATION

The skills gained from the MTA certification are been applied on the following project :

4.1 PROJECT NAME: Registration form

This project is done by applying the concepts of HTML, CSS and JAVASCRIPT.

Index.html :-

<html>

<head>

<style>

#main{

heigth:650px;

width:1000px;

background-color:silver;

#first{

heigth:250;

width:1000;

background-color:silver;

#second{

heigth:350px;

width:1000px;

background-color:skyblue;
}

#third{

heigth:50px;

width:1000px;

background-color:red;

</style>

</head>

<body>

<script language="javascript">

function srec()

var name = document.forms["RegForm"]["Name"];

var email = document.forms["RegForm"]["EMail"];

var phone = document.forms["RegForm"]["Telephone"];

var what = document.forms["RegForm"]["Subject"];

var password = document.forms["RegForm"]["Password"];

var address = document.forms["RegForm"]["Address"];

if (name.value == "")

window.alert("Please enter your name.");

name.focus();

return false;

}
if (address.value == "")

window.alert("Please enter your address.");

name.focus();

return false;

if (email.value == "")

window.alert("Please enter a valid e-mail address.");

email.focus();

return false;

if (email.value.indexOf("@", 0) < 0)

window.alert("Please enter a valid e-mail address.");

email.focus();

return false;

if (email.value.indexOf(".", 0) < 0)

window.alert("Please enter a valid e-mail address.");

email.focus();

return false;
 }

if (phone.value == "")

window.alert("Please enter your telephone number.");

phone.focus();

return false;

if (password.value == "")

window.alert("Please enter your password");

password.focus();

return flase;

if (what.selectedIndex < 1)

alert("Please enter your branch.");

what.focus();

return false;

return true;

}
function check()

if(srec()==1)

alert("Registered");

</script>

<form name="RegForm" onsubmit="return srec()" method="post">

<center>

<div id="main">

<div id="first">

<h1 style="text-align: center"> REGISTRATION FORM </h1>

</div>

<div id="second">

<table>

<tr>

<td><b> User Name </td>

<td><input type="text" name="Name" length="20"></td>

</tr>

<tr>

<td><b> Address </td>

<td><input type="text" name="Address" length="20"></td>

</tr>

<tr>

<td><b> E-mail Address: </td>

<td><input type="text" name="EMail" length="20"></td>

</tr>
<tr>

<td> <b>Password</td>

<td><input type="password" name="Password" length="20"></td>

</tr>

<tr>

<td><b> Telephone:</td>

<td><input type="text" name="Telephone" length="20"></td>

</tr>

<tr>

<td><b>Select your course </td>

<td><select type="text" value="" name="Subject">

<option>-</option>

<option>CIVIL</option>

<option>MECH</option>

<option>EEE</option>

<option>ECE</option>

<option>CSE</option>

</select></p><br><br>

</td>

</tr>

<tr>

<td> <b>Comments</td>

<td><textarea cols="68" name="Comment"> </textarea></td>

</tr>

<tr>

<td> <b>submit</td>

<td><input type="submit" onclick="check()" value="click me" name="Submit"></td>

<td><input type="reset" value="reset" name="Reset"></td>

</tr>

</table>

</div>

<div id="third">

<h1>

<marquee behavior="scroll" direction="left">Welcome to Registration Page

</marquee>

</h1>

</div>

</div>

</center>

</form>

</body>

</html>
OUTPUT

1.Registration form looks like

2.Validation of email address

3.Validation of password

4.Upn successful submission

 CONCLUSION

Introduction to Programming Using JavaScript validates the skills and knowledge to

recognize and write syntactically correct JavaScript code, use data types supported by
JavaScript, and be able to recognize and write JavaScript code that will logically solve a given
problem. Furthermore, this course will help anyone who is looking to improve their
employability prospects in the area of designing and building web pages. The MTA program
provides an appropriate entry point to a future career in technology. Feels extremely well
prepared for certification due to CDE content. It is extremely likely to enroll in MTA
certification.
 BIBILOGRAPH

1. https://www.louisianabelieves.com/docs/default-source/jumpstart/microsoft-
technology-associate.pdf
2. http://www.tutorialspark.com/html5/HTML5_Introduction.php
3. https://www.w3schools.com/Html/html5_intro.asp
4. https://www.w3schools.com/js/js_intro.asp
5. https://www.tutorialspoint.com/css/index.htm
6. https://www.microsoft.com/en-us/learning/exam-98-382.aspx