An Industrial Training Report

on
“Web Components Using JavaScript”
Submitted in partial fulfilment for
the award of the Degree of
Bachelor of Technology
in
Department of Computer Science & Engineering

Submitted To: Submitted By:

Mr. Rahul Shandilya Ritika Khandelwal
Assistant Prof. (CSE) 20EMCCS106

Department of Computer Science & Engineering

Modern Institute of Technology & Research Centre
Bikaner Technical University, Bikaner
July, 2022
 UNDERTAKING

I declare that the work presented in this report titled “Web Development in JavaScript”,
submitted to the Computer Science and Engineering Department, Modern Institute of
Technology and Research Centre, Alwar, for the award of Bachelor of Technology degree
in Computer Science and Engineering, is my original work. I have not plagiarized or
submitted the same work for the award of any other degree. In case this undertaking is
found incorrect, I accept my mistake.

July, 2022 Ritika Khandelwal

20EMCCS106
 ACKNOWLEDGEMENT

Firstly, I would like to express my gratitude to my advisor for the beneficial comments and
remarks.
I express my sincere thanks to Prof. S. K. Sharma (Director), Modern Institute of
Technology and Research Centre, Alwar and Dr. NK Yadav, Dean of Academics, Modern
Institute of Technology and Research Centre, Alwar.
I pay my deep sense of gratitude to Dr. J.R Arun Kumar (HOD) of CSE department, Modern
Institute of Technology and Research Centre, Alwar to encourage me to the highest peak
and to provide me the opportunity to present the seminar.
I feel to acknowledge my indebtedness and deep sense of gratitude to my guide Mr. Rahul
Shandilya, Assistant Professor (CSE Department) whose valuable guidance and kind
supervision given to me.
I am immensely obliged to my friends for their elevating inspiration, encouraging guidance
and kind supervision.
Last, but not the least, my parents are also an important inspiration for me. So, with due
regards, I express my gratitude to them.

Ritika Khandelwal
20EMCCS106
 Certificate

Certified that this project report “Web Components Using JavaScript”is the original work
of “Ritika Khandelwal” student of B. Tech. Third Year, V-Semester (CSE) who carried out
the project work under my supervision.

SIGNATURE SIGNATURE
Dr. J.R. Arunkumar Mr. Rahul Shandilya
HEAD OF THE DEPARTMENT SUPERVISOR
CSE Dept, MITRC, Alwar Assistant Prof, CSE
CSE Dept, MITRC, Alwar
 Contents

Undertaking......................................................................................................ii
Acknowledgment.............................................................................................iii
Certificate.........................................................................................................iv
Table of Content...............................................................................................v
List of Table....................................................................................................vii
List of Figures.................................................................................................vii
Chapter-1 HTML Tutorial..............................................................................1
1.1 Introduction.....................................................................................................................1
1.2 Getting Started With HTML...........................................................................................1
1.3 Line Break.......................................................................................................................1
1.4 Comments in HTML.......................................................................................................2
1.5 Special Character............................................................................................................2
Chapter-2 Attributes in HTML......................................................................3
2.1 Aling Attribute................................................................................................................3
2.2 Core Attribute.................................................................................................................3
2.2.1 ID Attribute........................................................................................................4
2.2.2 The Title Attribute.............................................................................................4
2.3 Bold Text........................................................................................................................4
2.4 Italic Text........................................................................................................................5
2.5 Underlined Text..............................................................................................................5
Chapter-3 Introduction to CSS.......................................................................7
3.1 Introduction.....................................................................................................................7
3.2 Selector in CSS...............................................................................................................7
3.3 Hierarchy in CSS............................................................................................................8
Chapter-4 Overview of Java Script................................................................9
4.1 About Java Script............................................................................................................9
4.2 Client-Side Java Script....................................................................................................9
4.3 Advantages......................................................................................................................9
4.4 Limitation of Java Scripts.............................................................................................10
Chapter-5 JavaScript Variable.....................................................................11
5.1 Java Script Datatypes....................................................................................................11
5.2 Java Script Variable......................................................................................................11
5.3 Java Script Variable Scope...........................................................................................11
5.4 Java Script Variable Name...........................................................................................12
Chapter-6 Syntaxes of Java Script...............................................................13
6.1 Case Sensitive..............................................................................................................13
6.2 Comments in Java Script..............................................................................................13
6.3 White space in Java Script............................................................................................14
Project-1 BMI CALCULATOR....................................................................15
HTML CODE...................................................................................................15
CSS CODE.......................................................................................................15
JS CODE...........................................................................................................16

Project-2 ROMAN NUMERAL CONVERTER..........................................17

HTML CODE...................................................................................................17
CSS CODE.......................................................................................................17
JS CODE...........................................................................................................18

FUTURE SCOPE...........................................................................................19

CONCLUSION...............................................................................................20

REFERENCE..................................................................................................21
 List of Table & Figures

Table No. 1.5.1.............................................................................................................................................2

Figure. 5.2...................................................................................................................................................11
Figure. P-1..................................................................................................................................................16
Figure. P-2..................................................................................................................................................18
 Chapter-1

HTML Tutorial

1.1 Introduction
Hypertext Markup Language (HTML) is one of the three main components of modern webpages, along
with Cascading Style Sheets (CSS) and JavaScript. HTML indicates to the browser what elements should
be included in the webpage (and in what order). CSS indicates how each element should be styled.
JavaScript provides a means for webpage authors to manipulate these elements programmatically and in
response to actions by the end user. Tutorials and reference material covering all three components are
available here.
In these pages, we describe HTML further. Text used within HTML, CSS or JavaScript files is generally
shown in courier new (i.e. a fixed space) font. The pages contain links to an extensive body of reference
material explaining HTML, CSS and JavaScript in detail.
The markup used by HTML includes tags, like <p>…</p>, to demarcate different HTML elements within
the same webpage. In this case the <p> tag opens the relevant element and the </p> closes it.
<p> elements are typically used to delimit paragraphs in HTML.
HTML elements can be nested within other elements. Most elements can also be qualified by a range of
attributes. For example, if we want to make the text within a <p> element appear red we can ascribe it a
CSS style, along the lines of <p style="color:red;">.
1.2 Getting Started with HTML
As explained in HTML and other markup languages, there are various ‘dialects’ of HTML. This means
that some examples of HTML may be understood by some browsers but rejected by others. The following
text, when put into a text editor and saved with a .html file extension, will usually successfully render a
web page that says “Hello World (using HTML)” if the file is viewed in Microsoft Edge.
Note that HTML largely ignores page breaks; if you want to include a page break in the text shown to the
user then you need to add a <br> element (or a <br /> element if you are using XHTML, which is a modern
variant of HTML that involves a cross between classic HTML and XML).
Example
<html>
<body>
Hello World (using HTML)
</body>
</html>

1.3 Line Break

HTML markup largely ignores carriage returns (i.e. line breaks) within marked up files. Instead, if you
want to insert a carriage return you need to insert a <br> tag. By ‘largely ignores’ we mean that browsers
do not render carriage returns as line breaks as such (except if certain styles apply to the element within
which they appear, see e.g. the default formatting of the <pre> element). However, carriage returns do
affect how HTML handles spaces at the end of the line and at the start of the following line.

Leading spaces (i.e. ones on a line before any non-space characters) are typically ignored, as are trailing
spaces (i.e. ones on a line after the last non-space character). However, browsers typically insert a 'breaking
space' at the end of each line, which often then shows up as a single space. Multiple spaces one after the
other are interpreted as a single space. To include more than one space in such instances you need to include
a ‘non-breaking space’ as a special character.

1.4 Comments in HTML

It can be helpful to include comments in HTML documents that are not displayed but help readers of the
underlying markup text you to understand what the HTML is trying to do. Comments in HTML take the
form <!-- comment --> and ignore line breaks within the opening and closing tags of the comment element.
For example, markup as follows: <!-- material explaining how commenting in HTML
works--> creates the following output (i.e. nothing):

1.5 Special Characters

The underlying markup of a webpage typically contains many more ampersand characters (i.e. &) than
appear in the rendered output. This is because the & character is part of the way in which HTML marks up
'special' characters, i.e. ones that would otherwise be understood by HTML to relate to markup. In HTML,
each special character is preceded by an ampersand, followed by the HTML markup name for that character
followed by a semicolon. Perhaps the most common special characters are:

Special character Meaning HTML code

ampersand & &amp;

&nbsp;
space (technically a ‘non-breaking’ space) (e.g. in Hello again) (e.g.as in Hello &nbsp; &nbsp; &nbsp; again)

less than sign < &lt;

greater than sign > &gt;

quotation mark " &quot;

apostrophe "'" &apos;

Table No 1.5.1 Characters of HTML

 Chapter-2
Attributes of HTML

We have seen few HTML tags and their usage like heading tags <h1>, <h2>, paragraph tag <p> and other
tags. We used them so far in their simplest form, but most of the HTML tags can also have attributes, which
are extra bits of information.
An attribute is used to define the characteristics of an HTML element and is placed inside the element's
opening tag. All attributes are made up of two parts: a name and a value:
The name is the property you want to set. For example, the paragraph <p> element in the example carries
an attribute whose name is align, which you can use to indicate the alignment of paragraph on the page.
The value is what you want the value of the property to be set and always put within quotations. The below
example shows three possible values of align attribute: left, centre and right.

2.1 Aling Attributes

Aling attribute is used to set the alignment of the text used by the user or programmer. Let us take an
example to understand the concept of Aling attribute with the help of given example provided
Example:
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align="left">This is left aligned</p>
<p align="centre">This is centre aligned</p>
<p align="right">This is right aligned</p>
</body>
</html>
This will give the following result:
This is left aligned
This is centre aligned

This is right aligned

2.2 Core Attribute

The four core attributes that can be used on the majority of HTML elements (although not all) are:
1 Id
2 Title
3 Class
4 Style

2.2.1 ID Attribute
The id attribute of an HTML tag can be used to uniquely identify any element within an HTML page. There
are two primary reasons that you might want to use an id attribute on an element:
If an element carries an id attribute as a unique identifier, it is possible to identify just that element and its
content.
If you have two elements of the same name within a Web page (or style sheet), you can use the id attribute
to distinguish between elements that have the same name.

2.2.2 The Title Attribute

The title attribute gives a suggested title for the element. They syntax for the title attribute is similar as
explained for id attribute:
The behaviour of this attribute will depend upon the element that carries it, although it is often displayed
as a tooltip when cursor comes over the element or while the element is loading.
Example:
<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title="Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>

Titled Heading Tag Example

2.3 Bold Text
If you use a word processor, you must be familiar with the ability to make text bold, italicized, or
underlined; these are just three of the ten options available to indicate how text can appear in HTML and
XHTML
Anything that appears within <b>...</b> element, is displayed in bold as shown below
Example:
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface. </p>
</body>
</html>
Output:
The following word uses a bold typeface.

2.4 Italic Text:

Anything that appears within <i>...</i> element is displayed in italicized as shown below:
Examples;
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses a <i>italicized</i> typeface. </p>
</body>
</html>
Output:
The following word uses an italicized typeface.

2.5 Underlined Text

Anything that appears within <u>...</u> element, is displayed with underline as shown below:
Example:
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses a <u>underlined</u> typeface. </p>
</body>
</html>

Output:
The following word uses an underlined typeface.
 Chapter-3
Introduction to CSS

3.1 Introductions
Cascading Style Sheets (CSS) is one of the three main components of modern webpages, along with
Hypertext Markup Language (HTML) and JavaScript. HTML indicates to the browser what elements
should be included on the page (and in what order). CSS indicates how each should be styled. JavaScript
provides a means for webpage authors to manipulate these elements programmatically and in response to
actions by the end user.
CSS instructions can be:
(a) included within an individual HTML element (as part of the mark-up relating to that element), i.e. as
‘in-line’ CSS
(b) included in the HTML file where the relevant element(s) are located, but not directly within the
elements concerned, i.e. as ‘in-file’ CSS
(c) included in external CSS files, i.e. as ‘external’ CSS, with a HTML <link> element used to indicate
where any such CSS files applicable to a given HTML file are located.

3.2 Selectors in CSS

CSS is typically set out in the form of ‘rule-sets’, which involve a selector and a declaration block. Usually
CSS is applied to types of elements. For example, the style rule
h3 {color: blue; text-align: center;}
has a selector which is h3 and a declaration block which is {color: blue; text-align: center;}. It tells the
browser that any <h3> element (to which the rule applies) should be centre-aligned and appear in blue. As
with HTML, line breaks and multiple spaces are ignored.
However, within HTML you can also define classes of elements with common formatting styles using the
element’s class attribute. For example, the style rule
.center {color: red; text-align: center}
It would indicate that any element with a class attribute equal to center should be centre-aligned and appear
in red.
You can also apply CSS to elements of a specific type and class.
For example, the style rule h3.center {color: green;}
would indicate that <h3> elements that have their class attribute equal to center should be green.
In-file CSS can also be applied to individual elements, if the id attribute of the HTML element has been
set (the id attribute should be unique within any given page). If you want to use this type of CSS then
precede the id value by a hash (#) character.
For example, the style rule
#para1 {color: yellow}
would be applied to the HTML element with id equal to para1 (provided there is such an element) and it
would appear yellow (unless overridden by a later style rule).
You can also group together rules for elements with the same style definitions, separating each selector
with a comma. For example,
h1 {color: red;}
h2 {color: red;}
h3 {color: red;}
can be grouped together as follows to minimise code and make it easier to follow:
h1, h2, h3 {color: red;}

3.3 Hierarchy in CSS

More specific rules override more general ones. Specificity is defined based on how many IDs, classes and
element names are involved as well as by whether there is an !important declaration.
When even these do not differentiate between styles then whichever one appears last is the one that is
applied.
For example, without the !important flag, <h3> elements using the following styles would appear green
(as the green style rule is after the red one), but with the !important flag it is the red one that applies in this
instance:
h3 {color: red !important}
h3 {color: green}
 Chapter-4
Overview of Java Script

4.1 About Java Script

JavaScript is a dynamic computer programming language. It is lightweight and most commonly used as a
part of web pages, whose implementations allow client-side script to interact with the user and make
dynamic pages. It is an interpreted programming language with object-oriented capabilities.
JavaScript was first known as Live Script, but Netscape changed its name to JavaScript, possibly because
of the excitement being generated by Java. JavaScript made its first appearance in Netscape 2.0 in 1995
with the name Live Script.
The general-purpose core of the language has been embedded in Netscape, Internet Explorer, and other
web browsers.
• Designed for creating network-centric applications.
• Complementary to and integrated with Java.
• Complementary to and integrated with HTML.
• Open and cross-platform

4.2 Client-Side Java Script

Client-side JavaScript is the most common form of the language. The script should be included in or
referenced by an HTML document for the code to be interpreted by the browser.
It means that a web page need not be a static HTML, but can include programs that interact with the user,
control the browser, and dynamically create HTML content.
The JavaScript client-side mechanism provides many advantages over traditional CGI server-side scripts.
For example, you might use JavaScript to check if the user has entered a valid e-mail address in a form
field
The JavaScript code is executed when the user submits the form, and only if all the entries are valid, they
would be submitted to the Web Server.
JavaScript can be used to trap user-initiated events such as button clicks, link navigation, and other actions
that the user initiates explicitly or implicitly.

4.3 Advantages of Java Script

• Less server interaction: You can validate user input before sending the page off to the server. This
saves server traffic, which means less load on your server.
• Immediate feedback to the visitors: They don't have to wait for a page reload to see if they have
forgotten to enter something.
• Increased interactivity: You can create interfaces that react when the user hovers over them with a
mouse or activates them via the keyboard.
• Richer interfaces: You can use JavaScript to include such items as drag-and-drop components and
sliders to give a Rich Interface to your site visitors.
4.4 Limitation of JavaScript’s
We cannot treat JavaScript as a full-fledged programming language. It lacks the following important
features: Client-side JavaScript does not allow the reading or writing of files.
This has been kept for security reason. JavaScript cannot be used for networking applications because there
is no such support available. JavaScript doesn't have any multithreading or multiprocessor capabilities.
Once again, JavaScript is a lightweight, interpreted programming language that allows you to build
interactivity into otherwise static HTML pages.
 Chapter-5
Java Script Variable

5.1 JavaScript Datatypes

One of the most fundamental characteristics of a programming language is the set of data types it supports.
These are the type of values that can be represented and manipulated in a programming language.
JavaScript allows you to work with three primitive data types:
1 Numbers, e.g., 123, 120.50, etc.
2 Strings of text, e.g. "This text string" etc.
3 Boolean, e.g. true or false.
JavaScript also defines two trivial data types, null and undefined, each of which defines only a single value.
In addition to these primitive data types, JavaScript supports a composite data type known as an object.

5.2 Java Script Variable

Like many other programming languages, JavaScript has variables. Variables can be thought of as named
containers. You can place data into these containers and then refer to the data simply by naming the
container.
Before you use a variable in a JavaScript program, you must declare it. Variables are declared with the var
keyword as follows

Fig 5.2.1 declare multiple variables with the same var keyword

JavaScript is untyped language. This means that a JavaScript variable can hold a value of any data type.
Unlike many other languages, you don't have to tell JavaScript during variable declaration what type of
value the variable will hold. The value type of a variable can change during the execution of a program
and JavaScript takes care of it automatically.

5.3 JavaScript Variable Scope

The scope of a variable is the region of your program in which it is defined. JavaScript variables have only
two scopes.
 • Global Variables: A global variable has global scope which means it can be defined anywhere in
your JavaScript code.
• Local Variables: A local variable will be visible only within a function where it is defined. Function
parameters are always local to that function.
Within the body of a function, a local variable takes precedence over a global variable with the same name.
If you declare a local variable or function parameter with the same name as a global variable, you
effectively hide the global variable.

5.4 JavaScript Variable Names

While naming your variables in JavaScript, keep the following rules in mind.

• You should not use any of the JavaScript-reserved keywords as a variable name. These keywords
are mentioned in the next section. For example, break or Boolean variable names are not valid.
• JavaScript variable names should not start with a numeral (0-9). They must begin with a letter or
an underscore character. For example, 123test is an invalid variable name but _123test is a valid
one.
• JavaScript variable names are case-sensitive. For example, Name and name are two different
variables.
 Chapter-6
Syntaxes of Java Script

Java Script can be implemented using JavaScript statements that are placed within the <script>... </script>
HTML tags in a web page.
You can place the <script> tags, containing your JavaScript, anywhere within you web page, but it is
normally recommended that you should keep it within the <head> tags.
The <script> tag alerts the browser program to start interpreting all the text between these tags as a script.
A simple syntax of your JavaScript will appear as follows.
<script ...>
Java Script code
</script>

The script tag takes two important attributes:

1 Language: This attribute specifies what scripting language you are using. Typically, its value will be
JavaScript. Although recent versions of HTML (and XHTML, its successor) have phased out the use
of this attribute.
2 Type: This attribute is what is now recommended to indicate the scripting language in use and its value
should be set to "text/JavaScript".

6.1 Case Sensitivity

JavaScript is a case-sensitive language. This means that the language keywords, variables, function names,
and any other identifiers must always be typed with a consistent capitalization of letters.
So, the identifiers Time and TIME will convey different meanings in JavaScript.
NOTE: Care should be taken while writing variable and function names in JavaScript.

6.2 Comments in Java Script

Java Script supports both C-style and C++-style comments. Thus:
Any text between a // and the end of a line is treated as a comment and is ignored by Java Script.
Any text between the characters /* and */ is treated as a comment. This may span multiple lines.
Java Script also recognizes the HTML comment opening sequence <! --. JavaScript treats this as a single-
line comment, just as it does the // comment.
The HTML comment closing sequence --> is not recognized by JavaScript so it should be written as //-->.
6.3 Whitespace in Java Script
Java Script ignores spaces, tabs, and newlines that appear in JavaScript programs. You can use spaces,
tabs, and newlines freely in your program and you are free to format and indent your programs in a neat
and consistent way that makes the code easy to read and understand.
 Project-1

BMI Calculator:

HTML CODE:

CSS CODE:
JS CODE:

OUTPUT:

Fig. P-1: BMI Calculator

 Project-2

ROMAN NUMERAL CONVERTER:

HTML CODE:

CSS CODE:
JS CODE:

OUTPUT:

Fig. P-2: ROMAN NUMERAL CONVERTER

 FUTURE SCOPE

1. Web Developers Are Always Learning- Technology changes quickly, which means Web Developers
have to stay on top of any important new programming language, web development software, or trend.
Even coding experts with advanced computer science degrees will need to continually upskill in this field
to stay ahead.
2. CMS- The scope of web development encompasses all related development activities, such as client-
side scripting, server-side scripting, server and network security settings, ecommerce development, and
content management system (CMS) development, in addition to web markup and code.
3. Key Skill- Key skills to be successful in web development include:

❖ Computer literacy.

❖ Strong numeracy skills.

❖ Strong creative ability.

❖ Attention to detail.

❖ Strong communication skills.

❖ Excellent problem-solving skills.

❖ A logical approach to work.

❖ The ability to explain technical matters clearly.

4. Successful in Life- Web developers with 1-4 years of experience can make around Rs 3,04,000 per
annum. With 5-9 years of experience, you can earn around Rs 5,89,000 per annum. If you have an
experience of over 10 years in the field, you can earn around Rs 1,000,000 per annum or even more
depending on different factors.
5. How web design trends will impact web development in 2023? In 2023 you can expect web design to
have travelled even further down this path, with smarter sites that steer clear of ‘standard’ layouts and tired
formats. Responsive design is just one branch of this tree. Other trends such as voice-optimized interfaces,
chatbots, and context-specific page adaptations are set to be increasingly common.
 CONCLUSION

The end of this module brought with it new techniques and tools for:
• organizing websites
• identifying & grouping specific elements within websites
• including & embedding multi-media content
• adding metadata to further define our webpages
At this point, you should be feeling comfortable with HTML and the ways that this markup language allows
developers and content creators to build and create webpages.
Starting in week-3, we have started with the absolute basics of HTML and moved through many topics
showing you how to leverage this language for content structuring and presentation. As with any new
language, your comfort level and familiarity with HTML will increase with practice and use. This not only
includes your own writing of webpages with HTML, but the necessary step of reading other’s HTML to
understand how they use the language to present content and solve problems. This latter task is greatly
facilitated by the open nature of the Internet, and the fact that all content is sent as documents to your web
browser, allowing you to view others source code.
Remember to stay patient with yourself as you assimilate all of this new information you have learned and
begin to create you own webpages. Learning a new language is not an easy task.
For your homework, you will be asked to practice the specific topics presented this week, while continuing
to incorporating techniques introduced the previous four weeks.
As you work on your assignments for the week, pay particular attention to:
• structure
• legibility
• clarity
• readability
This also means spending time thinking about grouping similar types of elements and identifying
particularly important elements with the use of the id and class attributes. This is a crucial step to increased
structural organization of your documents. This will be particularly true as we start looking at how to style
our documents. Spending time thinking about clarity, readability, efficiency, understandability of
organization this will pay dividends in future
 References

1 https://www.w3schools.com/html/
2 https://www.w3schools.com/html/html_css.asp
3 https://www.javatpoint.com/html-tutorial
4 https://www.javatpoint.com/html-tags
5 https://www.javatpoint.com/css-tutorial
6 https://developer.mozilla.org/en-US/docs/Web/JavaScript