age 1 of 80

Lesson 15 – Create Interactive Website (Part 3)

Objectives:
1. Prepare code editor with appropriate web browsers.
2. Apply Document Object Model on web pages.
3. Apply JavaScript on the appropriate HTML areas.
4. Access backend data using web services/API
5. Apply basic JavaScript syntax to HTML/CSS page.

Content:

Code editor is prepared

A code browser is an editor, sometimes with folding or other advanced layout capabilities, designed to
structure source code or, by extension, other kinds of text file.

Introduction

A web browser is the second most important tool after interactive development environment (IDE) for
website developers. It’s simply indispensable for plenty of tasks, from searching the Web to debugging
scripts. Unfortunately, not all browsers are equally useful. To make them more productive, web
developers need a tool with analysis and debugging capabilities. In addition, websites are created for
users who visit them via browsers. Consequently, using a browser is essential for any web developer.

In this short review, we will take a look at the most advanced web browsers that will help you pinpoint
the best solution for developers. Be warned right away that our selection is a convention, not claiming a
true hierarchy of browsers from best to worst. And don’t forget about such cross-browser compatibility.

Cross-browser compatibility can be defined as the ability of your web resource to adjust to multiple
browsers at the same time, displaying correctly in them. Every front-end developer knows that a website
layout that doesn’t “sprawl” is credible to users, and audience loyalty is an important indicator.

This used to be a huge problem in website development back in the days—here was a real browser war,
and different technologies were used to win over users. However, recently, everything more or less
comes to a common denominator, though cross-browser compatibility still matters.

In order for a site to display correctly everywhere, vendor prefixes are commonly used: “-webkit” for
Chrome and Safari; “-moz” for Firefox; “-o” for Opera; “-ms” for Internet Explorer, etc. They help
browsers to correctly perceive element functions and do not affect its display in other programs. Also,
website builders make a special Coming Soon page that appears on the screen of users of unsupported
browsers. It usually suggests upgrading to a newer version or opening a web resource in a different app
to view it. You can test the cross-browser capability of a site via online testing services like Cross
Browser Testing, Browserling, etc.
 age 2 of 80

Which Browser to Choose?

So which browser is the best? It’s not that easy to give an unambiguous answer. Each app
for Internet surfing is, in some way, similar to its counterparts. Of course, they all have their own pros
and cons, which may vary depending on the requirements and preferences of the user.

However, we should not forget about people’s trivial tastes and the fact that a disadvantage for one
may be an advantage for another. Therefore, in order to determine a really great browser, we should
analyze the implementation of standard functions that are expected from the app, as well as support for
current trends in technology development.

Below is a list of the most popular and most efficient browsers, which are well-received by many web
developers.

Mozilla Firefox Developer Edition

Mozilla has been regularly delighting its users with new products. In
addition to the usual browser, there are versions designed for people
involved in the development and creation of new features in web
browsers. One of such products is Firefox Developer Edition.
This browser version has more features, compared to the standard
option, as well as higher performance and handy developer tools that
will be useful for building an open-source.

In terms of performance, Mozilla Firefox Developer Edition shows

impressive results, and therefore, the fastest possible page loads are
guaranteed. In some tests, such as WebGL, Asm.js, the browser
delivers the best performance among its counterparts. Not by a few points but as much as one and a
half or even two times.

At the moment, it’s the most popular browser for website developers and geeks. At least it leads in
many surveys among the developers themselves. And that’s quite justified since it’s a really powerful,
albeit underrated web browser. By the way, Mozilla Firefox Developer Edition can display your
resource’s CSS grid, which is quite rare if not unique.

Here are a few things that set this browser apart from its counterparts:

 Best JavaScript debugger;

 Master CSS Grid;
 Built-in Web IDE;
 Independence from corporations that manipulate user data;
 Browser support on a variety of OS;
 Great page load speed;
 Increased performance;
 Ability to synchronize devices;
 Modern solutions for browser interface/personalization;
 age 3 of 80

 Current list of add-ons and extensions;

 Detects inactive CSS on the page, etc.

Unlike other browsers, Firefox Developer Edition has a design tool called CSS grid. With its help,
developers can distribute areas on the screen into separate blocks containing information, change their
position and design.

Firefox Developer Edition is available for all known platforms. Achieving a faster program became
possible after its engine was completely redesigned. The developers practically wrote new code from
scratch. The new CSS engine is much faster and smarter than its predecessor, incorporating the best of
other popular browsers. High performance provides an algorithm that distributes the load evenly on all
cores of your computer. Thus, the speed can be increased by 2, 4, and, on some devices, up to 16 times.

The developers have tried to create a multifunctional browser and succeeded. Mozilla Firefox Developer
Edition is a truly unique product. Developer Edition has a number of useful tools that will be useful to
developers. They are distinguished by their flexibility and great functionality. For example, there’s a
built-in JavaScript debugger that emulates the activity of other browsers—this way you can check how
the page will display in other browsers. Working with code in Mozilla Developer Edition is much more
comfortable—all the necessary information and hints are displayed on the screen. To make your coding
process even easier use the right set of external tools like the code time tracker.

There are just as many, and sometimes more, opportunities for development in Mozilla than in Chrome.
At the same time, Mozilla is fully authentic and does not copy functions of Google’s product. Moreover,
Firefox is more respectful of user data and does not collect information on the scale of Google Chrome.

Here are few more features you might want to know about:

 Built-in Shape Path Editor. Developers can use the editor to customize and resize shapes. It’s
accessible through the CSS panel—to start editing an object, just click on it. At the moment, the
editor can work with shapes created with clip-patch and shape-outside.
 Fonts Panel. The panel gives you quick access to the fonts used in the elements. It contains
information such as font style and size, source, and more. The built-in editor can be used to
change font values at any time.
 Storage. Web pages use different types of storage. It’s not really cloud storage. Firefox
Developer Edition has a built-in panel that allows you to check the cache, cookies, session data,
and more. Right now the storage panel only provides memory reads, however, Mozilla promises
to expand the capabilities of this tool in the near future.
 Network Monitor. The tool called Network Monitor shows the user all the requests that are
performed through the browser, with detailed information about each of them. Reports can be
generated in the form of lists, graphs, and charts.
 Web Audio Editor. The experimental Web Audio Editor tool explores the audio context on pages
and displays information about it via graphs. At this time, the editor is still under development
and may have bugs that you can report.

These are not all of the features, of course, but we have a few other browsers to discuss. As for Firefox,
you should know that even if you don’t have the proper experience and are just learning how to develop
software, Mozilla has made sure that your learning curve is as easy as possible. The company’s website
 age 4 of 80

has the Toolbox section with detailed descriptions of how to work with each of the browser’s features.
In fact, Mozilla Developer Network contains a huge amount of useful information for developers.
Materials are published by professionals who are involved in creating new programs.

Mozilla Firefox Developer Editions is available for iOS/Android, Windows, macOS, and Linux.

Polypane

Polypane offers the perfect balance between a classic user browser

and a developer-oriented masterpiece. However, many would say that
this unique browser is designed primarily for website developers. This
means that it’s virtually stuffed with features that are useful for
website creators:

 Ability to model a website with multiple windows for different

screens, from mobile to 5K monitors;
 80 site accessibility tests to make it enjoyable for everyone;
 Support for most popular CMS;
 Support for popular frameworks extensions, e.g. React, Angular, Vue, Svelte, and many others.

Polypane is a browser built from scratch for creating websites and apps. It’s the only browser that allows
you to develop a website for all viewports and devices at once, providing a better overview of them. You
can use it in your everyday life as well, however, that way you won’t be able to understand all of its
powerful development functionality.

Interact with one panel—and all other panels will automatically follow your actions. Scrolling, clicking,
and hovering are automatically distributed among the panels. You can easily ensure that your site works
as intended in all browsing windows. A single click is all it takes to make a screenshot with a full view of
your site (at all screen sizes) and share it with anyone you want. Layout debugging, CSS stress testing,
and dev tools based on Chromium—Polypane has everything you need to build advanced websites and
custom mobile apps

Polypane pays special attention to making the resource affordable, therefore, it comes with a free trial
period. If you want to continue using the advanced features in the long run, however, you will have to
pay.

Polypane is available for Windows, macOS, and Linux.

 age 5 of 80

Sizzy

Sizzy is a browser with great functionality, focused on speeding up the

development workflow. Its developers promised to make this process
more productive, and it seems like they did a great job. The list of
features offered by Sizzy is quite long, but some of them deserve
special attention:

 Everything is in sync. Simulation and the ability to take a screenshot of a web page on multiple
devices simultaneously;
 Element analysis on all devices with Universal Inspect Element;
 Website speed tests under different conditions;
 Spotlight function to operate the website using the keyboard;
 Session Manager for switching between users.

If you’ve been looking for a feature-rich browser with tools no other browser has, Sizzy is your perfect
solution. It’s built for developers and used by employees at Philips, GoDaddy, Comcast, Basecamp,
Zapier, and others. However, the browser is only available on a monthly/annual paid subscription with a
two-week free period.

Sizzy is available for macOS, Windows, and Linux.

Blisk

Compared to Opera, Chrome, and Firefox, Blisk doesn’t get as much

attention on the Internet. Nevertheless, it’s worth considering if you
are a beginner. The browser was specifically designed by Ukrainian
developers to give web designers their first workspace where they
can develop and test modern apps as quickly as possible.
Blisk has all the features that can help you create a true web
masterpiece. Here are just a few of them:

 Displays mobile and desktop site version side by side and at

once;
 Shows how your resource will look on any smartphone;
 Developer tools are similar to Chrome;
 Built-in page inspector lets you check any element on the screen.

Blisk is the only developer-focused web browser that gives you access to all the features you need to
create a sensational online experience. You can see how your site or app will look on almost any phone,
from Google Pixel to iPhone. What’s more, there are options for viewing in landscape or portrait mode.
 age 6 of 80

Blisk also shows mobile and desktop designs side by side so you can compare the experience users get
when they visit a website, no matter what device they use. Other features include:

 Modern URL and scroll sync. Blisk automatically syncs scroll positions and URLs for desktops and
phones;
 Automatic updates. Whenever you save code changes while in the browser, Blisk will update
your tabs and update your CSS changes;
 DevTools. Blisk comes with DevTools similar to Chrome—you can run separate DevTools for
mobile and desktop and use them to check performance simultaneously;
 Error notifications. Blisk automatically monitors for potential page errors in JavaScript and
resources that won’t load;
 Page inspector. Blisk provides page inspector tools that allow you to quickly check any item on
your mobile device or desktop.

Brave

If you’re looking for a free open-source browser suitable for everyday

use, Brave is an excellent choice. It’s more than a browser! Developed
by Mozilla co-founder and JavaScript creator, Brendan Eich, it’s fast,
secure, and privacy-oriented, and well worth a try.
Brave is one of the most “stuffed” web browsers in our review, and it
offers a bunch of flexible out-of-the-box tools for network camouflage
and staying incognito online. The browser blocks trackers and web
counter, removes obtrusive banner ads, eliminates ubiquitous
monitoring systems and other data that might identify the user.

To make it even more convincing, the browser displays helpful

statistics on blocked items, cookies, and JavaScript that pose a threat to cybersecurity, complete with
information about the amount of traffic and time saved on page loads.

All of that is just the tip of the iceberg in Brave. The main feature of this browser is the built-in Onion
Router (TOR) client, which allows you to use online services while securely “hiding” behind a distributed
network of routers. They ensure that user information is transmitted in such a way that it’s impossible to
tell at any point where the encrypted data is coming from or going to.

In iOS, you can even enable “Private Browsing Only” mode with Face ID or Touch ID, unlocking and the
automatic deletion of all trackers, cookies, and history when you leave.

Brave will never collect, store, or sell any of your personal data, as your data is considered your personal
property, as stated in Brave’s terms of service.

Additionally, the IPFS companion allows you to upload content through the InterPlanetary file system,
which is a peer-to-peer transfer protocol designed for more decentralized uploads of large files.
 age 7 of 80

If that’s not enough, Brave offers full support for Google Chrome extensions, which make it easy to set
up a VPN connection and, thereby, build an additional echelon of protection against “eavesdropping” of
traffic by unauthorized parties.

Here are some of Brave’s strengths:

 Runs about 3x faster than Chrome, and is optimized to increase battery life and minimize
memory consumption;
 Comes with a built-in ad blocker and all the user safety features you need;
 Reduced traffic consumption due to the absence of ads (relevant for mobile devices);
 Easily syncs with your Android or iPhone;
 Availability of IPFS integration for web browsing without intermediaries;
 No personal data collecting;
 Ability to visit blocked sites (TOR);
 Ability to earn cryptocurrency for viewing ads;
 Blocking browser mining and hidden app installations.

The Brave Rewards feature is also worth mentioning—it gives you the opportunity to earn BAT (Basic
Attention Token). Brave is a great everyday browser, which is not only fast and safe but also free.

Brave is available for Windows 64-bit, Windows 32-bit, macOS Intel, macOS ARM64, and Linux.

Google Chrome

We simply couldn’t skip the world’s most popular browser. According

to StatCounter https://gs.statcounter.com/, Google Chrome has more
than 60% of users. Therefore, a web developer simply has to test code
in it before sending it to production. Let’s list the obvious benefits of
the #1 web browser in the world:

 One of the best browsers in terms of feature compatibility;

 High popularity, huge user community;
 Integration with the Google ecosystem;
 Industry standard with a huge number of extensions;
 Excellent DevTools.

Of course, we are more interested in the Developer Edition, which has a special toolkit and an advanced
console that allows you to edit code and activate hidden options. Chrome Developer Edition also has
special plugins for development:

 Octotree simplifies GitHub https://github.com/ by offering easy navigation and support for
private repositories;
 The Web Developer extension adds a toolbar button with various web developer tools;
 age 8 of 80

 PerfectPixel by WellDoneCode—with this extension, you can overlay other images on the page
with a translucent layer for precise element alignment;
 The Usersnap Chrome extension lets you capture and annotate any web page directly in your
browser;
 Code Cola shows the source code of the page, allowing you to edit the CSS by dragging and
dropping the slider—the finished code can be copied and pasted into the editor.

You can use the DevTools mode to modify the page once it loads, run Google Chrome console
commands to monitor and control the page, as well as speed and network tests to monitor web traffic.

You can also emulate other devices, including different OS and screen resolutions. This allows you to see
if the site has an adaptive web design and where content and site layouts will change based on
resolution or device type.

While these tools are intended for professional web developers or QAs, regular Chrome users are also
comfortable with the DevTools package. If you find a problem with a site that you can’t solve, switching
to web developer tools can help you determine if the problem is related to the site or browser.

The easiest way to open Google Chrome DevTools is from the Google Chrome menu. To do this, click the
three-dot menu icon in the upper right corner. In the menu that appears, select More tools > Developer
Tools.

Document object model (DOM) is applied on the web page

The DOM is a hierarchical structure composed of objects that make up a web page. Web browsers then
expose this DOM so that you can change the page structure, style, and content using JavaScript.

HTML DOM (Document Object Model)

HTML DOM (Document Object Model) is a hierarchical representation of HTML documents. It defines
the structure and properties of elements on a webpage, enabling JavaScript to dynamically access,
manipulate, and update content, enhancing interactivity and functionality.

Note: It is called a Logical structure because DOM doesn’t specify any relationship between objects.

Table of Content
 Why DOM is required?
 Structure of DOM
 Properties of DOM
 Methods of Document Object Model
 What DOM is not?
 Levels of DOM:

What is DOM?
 age 9 of 80

DOM, or Document Object Model, is a programming interface that represents structured documents
like HTML and XML as a tree of objects. It defines how to access, manipulate, and modify document
elements using scripting languages like JavaScript.

So basically, Document Object Model is an API that represents and interacts with HTML or XML
documents.

The DOM is a W3C (World Wide Web Consortium) standard and it defines a standard for accessing
documents.

The W3C Dom standard is divided into three different parts:

 Core DOM – standard model for all document types

 XML DOM – standard model for XML documents
 HTML DOM – standard model for HTML documents

HTML DOM

HTML DOM is a standard object model and programming interface for HTML documents. HTML DOM is
a way to represent the webpage in a structured hierarchical way so that it will become easier for
programmers and users to glide through the document.

With HTML DOM, we can easily access and manipulate tags, IDs, classes, attributes, or elements of
HTML using commands or methods provided by the document object.

Using DOM JavaScript, we get access to HTML as well as CSS of the web page and can also modify the
behavior of the HTML elements.

Why is DOM Required?

HTML is used to structure the web pages and JavaScript is used to add behavior to our web pages.
When an HTML file is loaded into the browser, the JavaScript cannot understand the HTML document
directly. So, it interprets and interacts with the Document Object Model (DOM), which is created by the
browser based on the HTML document.

DOM is basically the representation of the same HTML document but in a tree-like structure
composed of objects. JavaScript cannot understand the tags(<h1>H</h1>) in HTML document but can
understand object h1 in DOM.
JavaScript interprets DOM easily, using it as a bridge to access and manipulate the elements. DOM
JavaScript allow access to each of the objects (h1, p, etc.) by using different functions.

The Document Object Model (DOM) is essential in web development for several reasons:

 Dynamic Web Pages: It allows you to create dynamic web pages. It enables the JavaScript to access
and manipulate page content, structure, and style dynamically which gives interactive and
responsive web experiences, such as updating content without reloading the entire page or
responding to user actions instantly.
 age 10 of 80

 Interactivity: With the DOM, you can respond to user actions (like clicks, inputs, or scrolls) and
modify the web page accordingly.
 Content Updates: When you want to update the content without refreshing the entire page, the
DOM enables targeted changes making the web applications more efficient and user-friendly.
 Cross-Browser Compatibility: Different browsers may render HTML and CSS in different ways. The
DOM provides a standardized way to interact with page elements.
 Single-Page Applications (SPAs): Applications built with frameworks such as React or Angular,
heavily rely on the DOM for efficient rendering and updating of content within a single HTML page
without reloading the full page.

Structure of DOM

DOM can be thought of as a Tree or Forest (more than one tree). The term structure model is
sometimes used to describe the tree-like representation of a document.

Each branch of the tree ends in a node, and each node contains objects Event listeners can be added to
nodes and triggered on an occurrence of a given event. One important property of DOM structure
models is structural isomorphism: if any two DOM implementations are used to create a representation
of the same document, they will create the same structure model, with precisely the same objects and
relationships.

Why DOM is called an Object Model?

Documents are modeled using objects, and the model includes not only the structure of a document but
also the behavior of a document and the objects of which it is composed like tag elements with
attributes in HTML.

Properties of DOM

Let’s see the properties of the document object that can be accessed and modified by the document
object.

Representation of the DOM

 age 11 of 80

 Window Object: Window Object is object of the browser which is always at top of the hierarchy. It
is like an API that is used to set and access all the properties and methods of the browser. It is
automatically created by the browser.
 Document object: When an HTML document is loaded into a window, it becomes a document
object. The ‘document’ object has various properties that refer to other objects which allow access
to and modification of the content of the web page. If there is a need to access any element in an
HTML page, we always start with accessing the ‘document’ object. Document object is property of
window object.
 Form Object: It is represented by form tags.
 Link Object: It is represented by link tags.
 Anchor Object: It is represented by a href tags.
 Form Control Elements: Form can have many control elements such as text fields, buttons, radio
buttons, checkboxes, etc.

Methods of Document Object

DOM provides various methods that allows users to interact with and manipulate the document. Some
commonly used DOM methods are:

Method Description

write(“string”) Writes the given string on the document.

getElementById() Returns the element having the given id value.

getElementsByName() Returns all the elements having the given name value.

getElementsByTagName() Returns all the elements having the given tag name.

getElementsByClassName() Returns all the elements having the given class name.

Example: In this example, we use HTML element id to find the DOM HTML element.
HTML
<!DOCTYPE html>
<html>

<body>
<h2>GeeksforGeeks</h2>

<!-- Finding the HTML Elements by their Id in DOM -->

<p id="intro">
A Computer Science portal for geeks.
</p>
 age 12 of 80

<p>
This example illustrates the <b>getElementById</b> method.
</p>
<p id="demo"></p>
<script>
const element = document.getElementById("intro");
document.getElementById("demo").innerHTML =
"GeeksforGeeks introduction is: " + element.innerHTML;
</script>
</body>

</html>

Output:

Getting the HTML element by getElementById() Method

Example : This example describes the representation of the HTML elements in the tree structure.
html
<table>
<ROWS>
<tr>
<td>Car</td>
<td>Scooter</td>
</tr>
<tr>
<td>MotorBike</td>
<td>Bus</td>
</tr>
</ROWS>
</table>
 age 13 of 80

HTML elements in tree-like structure

What DOM is not?

 The Document Object Model is not a binary description where it does not define any binary source
code in its interfaces.
 The Document Object Model is not used to describe objects in XML or HTML whereas the DOM
describes XML and HTML documents as objects.
 The Document Object Model is not represented by a set of data structures; it is an interface that
specifies object representation.
 The Document Object Model does not show the criticality of objects in documents i.e it doesn’t
have information about which object in the document is appropriate to the context and which is
not.

Levels of DOM

DOM consisted of multiple levels, each representing different aspect of the document.

 Level 0: Provides a low-level set of interfaces.

 Level 1: DOM level 1 can be described in two parts: CORE and HTML.

o CORE provides low-level interfaces that can be used to represent any structured
document.
o HTML provides high-level interfaces that can be used to represent HTML documents.
 Level 2: consists of six specifications: CORE2, VIEWS, EVENTS, STYLE, TRAVERSAL, and RANGE.

o CORE2: extends the functionality of CORE specified by DOM level 1.

 age 14 of 80

o VIEWS: views allows programs to dynamically access and manipulate the content of the
document.
o EVENTS: Events are scripts that are either executed by the browser when the user reacts
to the web page.
o STYLE: allows programs to dynamically access and manipulate the content of style
sheets.
o TRAVERSAL: This allows programs to dynamically traverse the document.
o RANGE: This allows programs to dynamically identify a range of content in the
document.

 Level 3: consists of five different specifications: CORE3, LOAD and SAVE, VALIDATION, EVENTS,
and XPATH.

o CORE3: extends the functionality of CORE specified by DOM level 2.

o LOAD and SAVE: This allows the program to dynamically load the content of the XML
document into the DOM document and save the DOM Document into an XML
document by serialization.
o VALIDATION: This allows the program to dynamically update the content and structure
of the document while ensuring the document remains valid.
o EVENTS: extends the functionality of Events specified by DOM Level 2.
o XPATH: XPATH is a path language that can be used to access the DOM tree.

Example: This example illustrates the dom-manipulation using getElementById() Method.

HTML
<!DOCTYPE html>
<html>

<head>
<title>DOM manipulation</title>
</head>

<body>
<label>Enter Value 1: </label>
<input type="text" id="val1" />
<br />
<br />
<label>Enter Value 2: </label>
<input type=".text" id="val2" />
<br />
<button onclick="getAdd()">Click To Add</button>
<p id="result"></p>
<script type="text/javascript">
function getAdd() {

// Fetch the value of input with id val1

const num1 = Number(document.getElementById("val1").value);
 age 15 of 80

// Fetch the value of input with id val2

const num2 = Number(document.getElementById("val2").value);
const add = num1 + num2;
console.log(add);

// Displays the result in paragraph using dom

document.getElementById("result").innerHTML = "Addition : " + add;

// Changes the color of paragraph tag with red

document.getElementById("result").style.color = "red";
}
</script>
</body>

</html>

Output:

Manipulating the Document objects using getElementById() Method

JavaScript are applied on the appropriate HTML areas

To connect an HTML file to a JavaScript file, you will need to use a script tag in your HTML file. Inside the
script tag, you can either write your JavaScript code directly or you can refer to an external JavaScript
file using the src attribute.

How to Add JavaScript to HTML

JavaScript has been used to build some of the world’s most popular websites and apps, which is why
web developers who can code in this language are in such high demand.

This article will show you how to add JavaScript to HTML in two easy steps. We’ll also cover the
fundamentals of JavaScript and examine its many uses in the tech world.

What Is JavaScript?
 age 16 of 80

JavaScript (or JS) is a scripting or programming language that lets you implement dynamic and
interactive elements on web pages. JS is also used to build web apps and browser games. It’s versatile
enough for various applications, including servers, hardware controls, and software.

JavaScript facilitates interactions between the user’s web browser and the website the user is visiting.
All major web browsers have a dedicated JavaScript engine to execute JS code on users’ devices.

Essentially, JavaScript prevents web pages from being static and allows developers to add dynamic and
interactive elements to web pages. Some examples include inserting animation, audio, and video into
web pages (with stop, pause, and play buttons) and automatically placing the text cursor into the search
box when loading Google Search.

Together with HTML and CSS, JavaScript is part of the three core technologies needed to build
websites. HTML (which stands for Hypertext Markup Language) provides structure to web content.
Examples include defining headings, data tables, and lists of bulleted points.

CSS (Cascading Style Sheets) applies styling and layout to HTML content. Examples include setting
background and font colors, standardizing spacing between elements, and adding background images.

Even though Java and JavaScript have similar syntax and standard libraries, these two programming
languages are quite different—with Java being an OOP programming language (i.e., runs in a virtual
machine or browser). On the other hand, JavaScript is an OOP scripting language (i.e., it runs in the
browser only).

What Is JavaScript Used For?

You can use JavaScript to build complex websites, browser games, and apps. You can also use it to
connect servers to websites and web apps. Many of the most widely-used websites and apps on the
internet use JavaScript—including Facebook, Netflix, Google, and YouTube.
 age 17 of 80

Numerous technologies have sprung up in recent years to leverage the power of JavaScript. JS now has
an extensive collection of frameworks that you can use to build mobile and web apps.

Frameworks are libraries of pre-written JS code. They function similarly to blueprints and help
developers build apps and websites with greater functionality.

These are the three most popular JS application frameworks:

 React, which you can use to build user interfaces for web apps
 React Native, which you can use to build mobile apps
 Node.js, which enables two-way communication with servers for data exchange

JavaScript is needed to make web pages dynamic and interactive.

With JS baked into their coding, developers can implement the following features:

 Display timely and relevant content updates

 Display interactive maps
 Insert drop-down and hamburger-style menus
 Play audio and video
 Zoom in and out of images
 Add 2D/3D graphics and animation
 Display image galleries in a carousel format
 Insert hover effects
 Display and hide menus
 Alert users to invalid characters when typing passwords

JS is also used to create elaborate in-browser games. Some of the most popular browser-based games in
the world use JS, including Angry Birds, Bejeweled, and Tetris.

Due to its versatility and ubiquity as a web development tool, JavaScript remains the most widely used
programming language among developers, according to Statista. In 2021, nearly 65% of developers used
JavaScript. What’s more, an overwhelming 98% of websites use JS on the client side to handle web page
behavior, according to W3Techs.

How to Add JavaScript to HTML

We’ve already explored how HTML, CSS, and JavaScript are needed to build functional and dynamic web
pages. A cool metaphor would be to think of your website as a three-layered cake—with HTML as the
foundation, CSS as the middle layer, and JavaScript as the top layer.

You first structure your content on the web page with HTML, then add stylistic elements and a proper
layout with CSS. Next, you need to add dynamic and interactive functions with HTML.

There are two ways to add JavaScript to HTML: the first is to embed inline JS code into HTML, while the
second requires you to create an external JS file.
 age 18 of 80

1. Embed Inline JavaScript Code in HTML

When working with files for the internet, JS needs to be loaded and run alongside HTML markup. You
can do this inline within an HTML document. Click here for the steps to do that.

2. Create an External JavaScript File

Another way to load JS and run it alongside HTML markup is to create an external JS file. The browser
will download this JS file alongside the HTML document when a user visits a web page. Click here for the
steps to include external JavaScript.

How to Embed Inline JavaScript Code

JavaScript code can be embedded inline into an HTML document by using the dedicated HTML
tag <script>. This HTML tag wraps around the JS code.
The <script> tag can be placed either in the <head> section of your HTML or in the <body> section. The
placement entirely depends on when you want the JS code to load.

Add Javascript in the <Head> Tags

JS code can be inserted inside the HTML document’s <head> section. You do this to keep the function
contained and away from the main content of your HTML document.

This sample code from W3Schools shows you how to add the <head> tag into the HTML
document’s <head> section:

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById(“demo”).innerHTML = “Paragraph changed.”;
}
</script>
</head>
<body>
<h2>Demo JavaScript in Head</h2>

<p id=”demo”>A Paragraph</p>

<button type=”button” onclick=”myFunction()”>Try it</button>
</body>
</html>

Add Javascript in the <Body> Tags

 age 19 of 80

If your script needs to run at a specific point within your web page’s layout, you’ll need to insert it at the
point where it should call the function. The placement is usually within the <body> section.

In this sample code from W3School, the JS function is placed in the <body> section of the HTML
document:

<!DOCTYPE html>
<html>
<body>
<h2>Demo JavaScript in Body</h2>
<p id=”demo”>A Paragraph</p>
<button type=”button” onclick=”myFunction()”>Try it</button>
<script>
function myFunction() {
document.getElementById(“demo”).innerHTML = “Paragraph changed.”;
}
</script>
</body>
</html>

How to Include External JavaScript in HTML

If your script is large or you need to spread it across several web pages, you would usually add the JS
code to one or more JavaScript files, which are referenced within HTML documents.

Using separate JS files allows developers to separate the HTML markup from the JS code, preventing any
confusion. It also makes ongoing maintenance easier and allows web pages to load more quickly when
caching JS files.

Here is the sample external JS script, as provided by W3School:

function myFunction() {
document.getElementById(“demo”).innerHTML = “Paragraph changed.”;
}
To use this external script, you’ll need to add the name of the script file in the src (source) attribute of
a <script> tag:

<script src=”myScript.js”></script>

Note that JS files should have the file extension “.js”.

The external script can be placed in either the <head> or <body> section of the HTML document.

Tips for Adding JavaScript to HTML

 age 20 of 80

 You should add functions to the <head> section if scripts should only be triggered when they’re
called or an event is triggered. This way, the script doesn’t interfere with your page’s content.
 If your script writes page content, it should be within the <body> section. Ideally, the script should be
at the bottom of the <body> section to improve page load speeds.
 If your website uses HTML5, adding JS script in the <script> tag isn’t required.
 Some programmers recommend keeping your HTML, CSS, and JS scripts in separate folders. Just
make sure to link them correctly.

Backend data is accessed using web service/API

Backend services, also known as server-side services, refer to the part of a web application that is
responsible for managing the underlying functionality and data. This includes tasks such as processing
user requests, storing and retrieving data, and managing security and performance.

What is the role of a backend service?

Backend services are responsible for managing and processing data, and providing an API for the
frontend to access the data. They provide the logic and functionality needed to support the features
of a web or mobile application, such as user authentication, database management, and server-side
scripting. They run on a server, separate from the client-side (frontend), and are typically hidden from
the user. The goal of backend services is to enable the frontend to interact with the data and
functionality provided by the backend, creating a seamless user experience.

What are some common backend technologies?

 age 21 of 80

Some of the most common backend technologies include:

 Server-side languages such as PHP, Python, Ruby, and Java

 Web frameworks like Ruby on Rails, Django (for Python), Express (for Node.js), and Laravel (for PHP),
Spring (for JAVA)
 Databases such as MySQL, PostgreSQL, MongoDB, and Cassandra
 Serverless computing platforms like AWS Lambda and Google Cloud Functions
 Content Management Systems (CMS) like WordPress and Strapi and other
 Backend as a Service (BaaS) providers like Firebase and Parse Server

The choice of technology for a backend service depends on several factors such as the requirements of
the application, the developer's expertise, and the hosting infrastructure.

What are some common challenges in backend development?

Backend development involves creating the server-side components of a web application and can
pose several challenges, including:

 Scalability. Ensuring that the backend system can handle increased traffic and accommodate growth
is a major challenge in backend development. This requires careful design and implementation of the
architecture, as well as ongoing monitoring and tuning to ensure optimal performance and
scalability.
 Performance. Ensuring that the backend system responds quickly and efficiently to requests is
critical for delivering a good user experience. Performance optimization involves techniques such as
caching frequently used data and using efficient algorithms for processing data.
 Security. Protecting sensitive data and ensuring the confidentiality, integrity, and availability of the
data is a major challenge in backend development. This requires the implementation of appropriate
security measures, such as encryption and access control, as well as regular security updates.
 Data Management. Managing and storing large amounts of data in a secure and scalable manner is a
significant challenge in backend development. This requires the use of appropriate database
technologies and the implementation of efficient data management strategies, such as database
indexing and data partitioning.
 Integration. Integrating the backend system with other systems and other services, such as payment
gateways, social media platforms, and external APIs, can be complex and challenging. It requires a
deep understanding of the different systems and the ability to implement robust and reliable
integrations.
 Testing and Debugging. Testing and debugging the backend system can be challenging, especially
with the use of complex technologies and integrations. It requires the use of appropriate testing
frameworks and tools, as well as a systematic approach to debugging and problem-solving.

In summary, backend development involves the creation of complex and sophisticated systems that
require careful design, implementation, and ongoing maintenance to ensure optimal performance,
scalability, security, and reliability.

How does the backend communicate with the frontend?

 age 22 of 80

The backend and frontend communicate with each other through APIs (Application Programming
Interfaces). An API is a set of rules that specifies how data and functionality should be shared between
the backend and frontend. The backend exposes endpoints, which are URLs that the frontend can
access to retrieve or manipulate data. The frontend sends requests to these endpoints, and the
backend returns the response in a standardized format, such as JSON. The frontend can then use the
data received from the API to dynamically update the user interface. The communication between the
backend and frontend can happen over the internet using standard protocols like HTTP or HTTPS.

How is data stored and managed in a backend service?

Data is typically stored in a database in the backend service. There are several types of databases,
including SQL (relational) databases such as MySQL and PostgreSQL, and NoSQL (non-relational)
databases such as MongoDB and Cassandra.

The backend service manages the data by using server-side scripts to interact with the database. For
example, it can retrieve data from the database in response to a request from the frontend, or store
data submitted by the user. The backend service implements the business logic of the application,
such as user authentication, authorization, and data validation, and uses the database to persist the
data.

To secure the data, the backend service implements various security measures such as encryption,
access control, and data backup. Data is typically stored in a centralized location, making it easier to
manage and update. The backend service also ensures data consistency by implementing transactions
and database constraints.

How does security and performance impact a backend service?

Security and performance are critical factors for any backend service as they directly impact the user
experience and the trustworthiness of the application.
Security: Backend services handle sensitive data such as user passwords, financial information, and
personal data. It's important to ensure that this data is protected against unauthorized access and
malicious attacks such as SQL injection, cross-site scripting, and man-in-the-middle attacks. To
enhance security, backend services typically implement measures such as encryption, access control,
and regular security updates.

Performance: Backend services must respond to requests quickly and efficiently to provide a good
user experience. Poor performance can lead to slow load times and unresponsive mobile and web
applications. To improve performance, all the backend services can be optimized in several ways such
as caching frequently used data, using load balancing to distribute traffic across multiple servers, and
using efficient algorithms for processing data.

In summary, it's important to prioritize both security and performance in the design and
implementation of a backend service to ensure a reliable and trustworthy application.

What are the different components of a backend system?

 age 23 of 80

The different components of a backend system can vary depending on the specific requirements of an
application, but typically include the following:

 Database. A database is used to store and manage data. There are several types of databases, including
relational databases (SQL) and non-relational databases (NoSQL).
 Application Server. An application server is responsible for running the server-side code and executing
the application's business logic. It handles incoming requests from the frontend, communicates with the
database, and returns the results to the frontend.
 Web Server. A web server is responsible for serving web pages to the client. It acts as an intermediary
between the frontend and the application server, forwarding requests from the client to the application
server and returning the results to the client.
 API. An API (Application Programming Interface) provides a way for the frontend to access the backend
services and data. It specifies the rules for exchanging data between the frontend and backend,
including the format of the data and the methods for accessing the data.
 Cache. A cache is used to temporarily store frequently used data to improve performance. By storing the
data in memory, it can be quickly retrieved, reducing the number of requests to the database and
improving the responsiveness of the application.
 Load Balancer. A load balancer is used to distribute incoming requests across multiple servers to
improve scalability and availability. It helps to ensure that the backend system can handle large amounts
of traffic and respond to requests quickly and reliably.
 Security. Security measures are implemented to protect sensitive data and ensure the confidentiality,
integrity, and availability of the data. Examples include encryption, access control, and regular security
updates.

These components can be integrated and deployed on physical or virtual servers, or as cloud-based
services. The choice of components and deployment architecture depends on the specific requirements
of the application and the desired level of scalability, availability, and performance.

How do you scale a backend service to handle increased traffic?

Scaling a backend service to handle increased traffic involves making changes to the infrastructure
and architecture to accommodate the additional load. Here are some common strategies for scaling a
backend service:

 Load balancing. Load balancing distributes incoming traffic across multiple servers, reducing the load on
any single server and improving the responsiveness of the system. Load balancers can be used to
distribute traffic based on a variety of criteria, including geographic location, server utilization, and
request type.
 Caching. Caching temporarily stores frequently used data in memory to improve performance. By
reducing the number of requests to the database, caching can help to improve the responsiveness of the
application, even under heavy traffic conditions.
 Database sharding. Database sharding involves dividing a single database into multiple smaller
databases, each running on a separate server. This allows for the horizontal scaling of the database,
enabling it to accommodate larger amounts of data and handle more traffic.
 Vertical scaling. Vertical scaling involves upgrading the hardware components of a single server, such as
adding more memory or a faster processor, to improve its performance and capacity.
 age 24 of 80

 Horizontal scaling. Horizontal scaling involves adding more servers to the infrastructure, each running
the same application. This allows the system to handle more traffic by distributing the load across
multiple servers.
 Serverless computing. Serverless computing allows for the automatic scaling of backend services
without the need to manage and configure servers. This can be achieved using cloud-based serverless
computing platforms, such as AWS Lambda or Google Cloud Functions.

The choice of scaling strategy depends on the specific requirements of the application and the desired
level of scalability, availability, and performance. It may involve a combination of these strategies, as
well as ongoing monitoring and tuning to ensure optimal performance and scalability.

How does the choice of programming language impact the backend service?

The choice of programming language for a backend service can have a significant impact on the
development process, performance, and scalability of the system. Some of the factors to consider
when choosing a programming language for backend development include:

 Development Ecosystem. The availability of libraries, frameworks, and tools for the specific
programming language can make development easier, faster, and more efficient.
 Performance. Some programming languages are designed for performance and can handle large
amounts of data processing and computation more efficiently than others.
 Scalability. Some programming languages are better suited for building scalable systems, making it
easier to handle increased traffic and accommodate growth.
 Community. A large and active community can provide support and resources for developers, making it
easier to solve problems and implement new features.
 Hiring. The availability of web developers with expertise in a specific programming language can impact
the development process and the cost of hiring.
 Legacy Systems. If a company already has existing systems written in a specific programming language,
choosing a language that is compatible with those systems can make integration and maintenance
easier.

Some of the most popular programming languages for backend development include Java, Python,
Ruby, PHP, and JavaScript (with Node.js). The choice of programming language depends on the specific
requirements of the application and the goals of the development team. In some cases, a combination
of programming languages may be used to achieve the desired outcome.

Basic JavaScript syntaxes are applied on the HTML/CSS page

To be a front-end developer, you'll need to be proficient in all three of these languages, as they are
constantly working together. Ideally, you'll learn HTML first, then CSS, and then finish with JavaScript, as
they build on each other in that order.

HTML vs. CSS vs. JavaScript: What’s the Difference?

 age 25 of 80

While these three front end languages are all used to design websites, they each have their own specific
uses and intricacies. For example, the main difference between HTML and CSS is that HTML creates the
document structure of a webpage while CSS embellishes the webpage by adding formatting and style.
JavaScript, arguably the most complex of the three, is used to make websites more interactive, and
enables the development of more complex sites — pop-up boxes, buttons that change colors, and all the
other dynamic aspects of your favorite websites are likely enabled by JavaScript.

HTML: The Building Blocks of the Internet

HTML stands for Hypertext Markup Language. It is a relatively simple language that allows developers to
create the basic structure of a website. Even the most complex websites have HTML at their core. It’s
also the second-most-used programming language by developers, according to a recent Stack Overflow
survey.

You may be asking yourself why HTML is called a “markup language.” The reason is that instead of using
a programming language to perform the desired functions, HTML (like other markup languages) uses
tags to annotate, or “mark up,” different types of content on a web page and identify the purposes they
each serve to the page’s overall design. You likely see snippets of HTML more than you even realize.
Have you ever noticed text at the bottom of a printed-out email that reads something like “ ”? That’s
HTML. A markup language also helps web developers avoid formatting every instance of an item
category separately (e.g., bolding the headlines on a website), which saves time and avoids errors.

HTML uses “elements,” or tags, to denote things like the beginning of a paragraph, the bolding of a font,
or the addition of a photo caption. In this way, it controls how a webpage looks, how the text is
 age 26 of 80

separated and formatted, and what the user sees. For people who have never used programming
languages before, HTML is an excellent place to start.

CSS

If HTML represents the building blocks of a website, CSS is a way to shape and enhance those blocks. CSS
is a style sheet language used to specify the way different parts of a webpage appear to users. In other
words, it’s a way to add some style and additional formatting to what you’ve already built with HTML.

For example, perhaps you’ve used HTML to add header text, and now you want that header to have a
more pleasant font, a background color, or other formatting elements that make it more sleek,
professional, and stylish. That’s where CSS comes in. CSS also helps websites adapt to different device
types and screen sizes so that your pages render equally well on smartphones, tablets, or desktop
computers.

To understand the difference between HTML and CSS, it’s important to understand their histories. When
HTML was invented in 1990, it was only designed to inform a document’s structural content (e.g.,
separating headlines from body text). However, when stylistic elements like fonts and colors were
developed, HTML wasn’t able to adapt. To solve this issue, CSS was invented as a set of rules that can
assign properties to HTML elements, building off of the existing markup language to create a more
complex webpage.

JavaScript

JavaScript is the most complex of the three front end languages discussed in this article, building on top
of both HTML and CSS. If you’re trying to compare the languages, think of it like this: While HTML
creates the basic structure for a website, CSS adds style to that structure, and JavaScript takes all of that
work and makes it interactive and more functionally complex.

A classic example of how JavaScript works is the menu button that you’re used to seeing on the top
corner of most websites. You know the one — the three stacked lines that show a list of website
sections you can visit when clicked. These buttons and their functionality are all present thanks to
JavaScript. It can also help you develop keyboard shortcuts or change the color of a button when a
cursor hover over it.

JavaScript is crucial to all web development. It’s supported by all of the modern web browsers, and it is
used on almost every site on the web. According to a recent Stack Overflow survey, JavaScript is the
most commonly used programming language by developers around the world, with 67.7 percent of
developers putting it to use in their work. So, if you’re interested in learning web development —
whether professionally or even just as a hobby — you’d be smart to learn JavaScript.
 age 27 of 80

How Do HTML, CSS, and JavaScript Work Together?

As we’ve already discussed, HTML, CSS, and JavaScript build on one another — from the simplest
website structures to the most advanced interactive features. Like we mentioned earlier, HTML creates
and structures the website’s content, CSS adds style and formatting to these structures, and then
JavaScript turns those stylized components into something that a user can interact with.

Say you want to build a website where users can fill out a form for a contest. HTML will allow you to
designate the difference between the text that announces the contest and the text that asks questions
within the form such as a participant’s name, age, address, and so on. CSS will allow you to dress all this
text up, giving it formatting, color, and style while helping you build the boxes where users will input
their answers. JavaScript will then enable you to program a little box that pops up and says “Thanks for
entering!” when everything has been filled out and submitted. It can even insert the first name that the
person submitted in the form for a more personalized message.

Next Steps: Where to Learn HTML, CSS, and JavaScript

There are a variety of different ways to learn HTML, CSS, and JavaScript. These include bootcamps,
college degrees, and independent learning options. Each option has its benefits, just as every student
has their own set of needs, interests, and constraints. For those interested in flexibility, for
instance, web development bootcamps are a quick and easy way to learn these languages and gain a
certificate of completion. Bootcamps have become incredibly popular over the past decade, given their
flexibility and practical, career-minded curriculums. However, you should keep in mind that your career
goals will be an important factor in deciding how to learn these front-end languages.

How to Create a Website Using HTML, CSS, and JavaScript Step by Step

If you’ve ever wondered how long it takes to become a front end developer, it’s important to
understand how websites are built with these three basic languages. While some websites pull in more
 age 28 of 80

complicated coding languages, it’s completely possible to make an exciting, beautiful, interactive
website using just HTML, CSS, and JavaScript.

Here’s how it works:

First, you’ll use HTML to create the basic structure of your website. This includes deciding what your
main pages will be as well as how they’re laid out. HTML will help you build a main page consisting of a
header and some body text, as well as an image at the end. HTML, after all, denotes where things go,
how they are laid out, and what’s on the webpage.

Next, CSS will help you stylize what you’ve already built. You’ll add CSS tags to your existing HTML to add
color, stylization, and themes, such as background color. CSS can help you make your website feel like a
place, rather than just a grouping of information.

Once you’ve created the look, feel, and structure of your website, you’ll use JavaScript to make your
page more interactive and functionally complex. Maybe you want your buttons to change color when
someone hovers over them, or you want to animate an image. JavaScript can add these bits of flair to
give your website more personality and dynamism.

To be a front-end developer, you’ll need to be proficient in all three of these languages, as they are
constantly working together. Ideally, you’ll learn HTML first, then CSS, and then finish with JavaScript, as
they build on each other in that order.

HTML, CSS, and JavaScript Examples

Reading about web development is one thing, but sometimes you need to see it in action to really
understand it. We have put together a collection of code snippets and corresponding web pages below
so that you can better understand how these programming languages are used together, as well as what
the results will look like. If and when you learn these languages, you’ll be able to build similar and more
complex websites yourself — this is just a taste of what’s possible.

HTML Webpage Examples with Source Code

W3Schools is an excellent resource that offers a wide variety of simple HTML examples to help you
understand the scope of this language and the ways it enables you to format text and webpage
components.

In HTML, for example, you can create buttons like those you’re used to seeing all over the internet. Their
example is flexible, so you can get in there and customize the text, but the basic code is below:

W3Schools also has examples for HTML headings, HTML links, HTML lists, and more HTML examples.

CSS Examples with Source Code

 age 29 of 80

W3Schools also has a wide variety of CSS examples that can help you understand the slightly more
complex world of CSS and the ways you can style even a simple selection of text. Take the following
snippet of code, for example:
As you can see, it’s similar to the HTML, with additional “style=” syntax that indicates the color of both
the header and the paragraph text. The resulting page looks like this:

Again, you can play around with this CSS example to change the text and color. W3Schools also has
examples that will help you visualize other CSS elements like basic syntax or image backgrounds.

JavaScript Examples with Source Code

To understand what it looks like when HTML, CSS, and JavaScript come together to create an interactive
webpage, all you have to do is take a look at this JavaScript example from codepen.io. As you’ll see, the
HTML, CSS, and JavaScript are written out separately with corresponding lines. The JavaScript portion
looks like this:

The resulting interactive to-do list looks like this:

 age 30 of 80

HTML

<body>
<div class="container">
<div class="row">
<div class="intro col-12">
<h1>Work To-Dos</h1>
<div>
<div class="border1"></div>
<div c
</div>
</div>
</div>

<div class="row">
<div class="helpText col-12">
<p id="first">Enter text into the input field to add items to your list.</p>
<p id="second">Click the item to mark it as complete.</p>
<p id="third">Click the "X" to remove the item from your list.</p>
</div>
</div>

<div class="row">
<div class="col-12">
<input id="userInput" type="text" placeholder="New item..."
maxlength="27">
<button id="enter"><i class="fas fa-pencil-alt"></i></button>
</div>
</div>

<!-- Empty List -->

<div class="row">
<div class="listItems col-12">
<ul class="col-12 offset-0 col-sm-8 offset-sm-2">
</ul>
</div>
</div>

</div>
<script type="text/javascript" src="script_method3.js"></script>
</body>
</html>
CSS

body {
background: #04A1BF;
text-align: center;
font-family: 'Open Sans', sans-serif;
 age 31 of 80

}
.intro {
margin: 30px 0px;
font-weight: bold;
}
h1 {
color: #ffffff;
text-transform: uppercase;
font-weight: 800;
}
p{
font-weight: 600;
}
#first {
margin-top: 10px;
color: #FFCD5D;
}
#second {
color: #51DF70;
}
#third {
color: #025F70;
margin-bottom: 30px;
}
#enter {
border: none;
padding: 5px 15px;
border-radius: 5px;
color: #04A1BF;
background-color: #025F70;
transition: all 0.75s ease;
-webkit-transition: all 0.75s ease;
-moz-transition: all 0.75s ease;
-ms-transition: all 0.75s ease;
-o-transition: all 0.75 ease;
font-weight: normal;
}
#enter:hover{
background-color: #02798F;
color: #FFCD5D;
}
ul {
text-align: left;
margin-top: 20px;
}
li {
list-style: none;
padding: 10px 20px;
 age 32 of 80

color: #ffffff;
text-transform: capitalize;
font-weight: 600;
border: 2px solid #025f70;
border-radius: 5px;
margin-bottom: 10px;
background: #4EB9CD;
transition: all 0.75s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5 ease;
}
li:hover {
background: #76CFE0;
}
li > button {
font-weight: normal;
background: none;
border: none;
float: right;
color: #025f70;
font-weight: 800;
}
input {
border-radius: 5px;
min-width: 65%;
padding: 5px;
border: none;
}
.done {
background: #51DF70 !important;
color: #00891E;
}

.delete {
display: none;
}
JavaScript

var enterButton = document.getElementById("enter");

var input = document.getElementById("userInput");
var ul = document.querySelector("ul");
var item = document.getElementsByTagName("li");

function inputLength(){
return input.value.length;
}
 age 33 of 80

function listLength(){
return item.length;
}

function createListElement() {
var li = document.createElement("li"); // creates an element "li"
li.appendChild(document.createTextNode(input.value)); //makes text from input field the li text
ul.appendChild(li); //adds li to ul
input.value = ""; //Reset text input field

//START STRIKETHROUGH
// because it's in the function, it only adds it for new items
function crossOut() {
li.classList.toggle("done");
}

li.addEventListener("click",crossOut);
//END STRIKETHROUGH

// START ADD DELETE BUTTON

var dBtn = document.createElement("button");
dBtn.appendChild(document.createTextNode("X"));
li.appendChild(dBtn);
dBtn.addEventListener("click", deleteListItem);
// END ADD DELETE BUTTON

//ADD CLASS DELETE (DISPLAY: NONE)

function deleteListItem(){
li.classList.add("delete")
}
//END ADD CLASS DELETE
}

function addListAfterClick(){
if (inputLength() > 0) { //makes sure that an empty input field doesn't create a li
createListElement();
}
}

function addListAfterKeypress(event) {
if (inputLength() > 0 && event.which ===13) { //this now looks to see if you hit "enter"/"return"
//the 13 is the enter key's keycode, this could also be display by event.keyCode === 13
createListElement();
 age 34 of 80

}
}

enterButton.addEventListener("click",addListAfterClick);

input.addEventListener("keypress", addListAfterKeypress);

JavaScript Tutorial
JavaScript is the world's most popular programming language.

JavaScript is the programming language of the Web.

JavaScript is easy to learn.

This tutorial will teach you JavaScript from basic to advanced.

Why Study JavaScript?

JavaScript is one of the 3 languages all web developers must learn:

1. HTML to define the content of web pages

2. CSS to specify the layout of web pages

3. JavaScript to program the behavior of web pages

JavaScript Can Change HTML Content

One of many JavaScript HTML methods is getElementById().

The example below "finds" an HTML element (with id="demo"), and changes the element content
(innerHTML) to "Hello JavaScript":

Example

document.getElementById("demo").innerHTML = "Hello JavaScript";

JavaScript accepts both double and single quotes:

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change HTML content.</p>

 age 35 of 80

<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello

JavaScript!'">Click Me!</button>

</body>
</html>

JavaScript Can Change HTML Attribute Values

In this example JavaScript changes the value of the src (source) attribute of an <img> tag:

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can change HTML attribute values.</p>

<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>

<button onclick="document.getElementById('myImage').src='https://5.imimg.com/data5/WL/SG/MY-
8835990/10w-gls-light-bulb-1000x1000.jpg'">Turn on the light</button>

<img id="myImage" src="https://dictionary.cambridge.org/us/images/full/lightb_noun_002_21219.jpg?

version=6.0.27" style="width:100px">

<button onclick="document.getElementById('myImage').src='https://dictionary.cambridge.org/us/
images/full/lightb_noun_002_21219.jpg?version=6.0.27'">Turn off the light</button>

</body>
 age 36 of 80

</html>

JavaScript Can Change HTML Styles (CSS)

Changing the style of an HTML element, is a variant of changing an HTML attribute:

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change the style of an HTML element.</p>

 age 37 of 80

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click

Me!</button>

</body>
</html>

JavaScript Can Hide HTML Elements

Hiding HTML elements can be done by changing the display style:

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can hide HTML elements.</p>

<button type="button" onclick="document.getElementById('demo').style.display='none'">Click

Me!</button>

</body>
</html>
 age 38 of 80

JavaScript Can Show HTML Elements

Showing hidden HTML elements can also be done by changing the display style:

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can show hidden HTML elements.</p>

<p id="demo" style="display:none">Hello JavaScript!</p>

 age 39 of 80

<button type="button" onclick="document.getElementById('demo').style.display='block'">Click

Me!</button>

</body>
</html>

The <script> Tag

In HTML, JavaScript code is inserted between <script> and </script> tags.

<!DOCTYPE html>
<html>
<body>
 age 40 of 80

<h2>JavaScript in Body</h2>

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

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

</body>
</html>

Old JavaScript examples may use a type attribute: <script type="text/javascript">.

The type attribute is not required. JavaScript is the default scripting language in HTML.

JavaScript in <head> or <body>

You can place any number of scripts in an HTML document.
Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.

JavaScript in <head>

In this example, a JavaScript function is placed in the <head> section of an HTML page.

The function is invoked (called) when a button is clicked:

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
 age 41 of 80

</script>
</head>
<body>

<h2>Demo JavaScript in Head</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>
 age 42 of 80

JavaScript in <body>

In this example, a JavaScript function is placed in the <body> section of an HTML page.

The function is invoked (called) when a button is clicked:

<!DOCTYPE html>
<html>
<body>

<h2>Demo JavaScript in Body</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

</body>
</html>

Placing scripts at the bottom of the <body> element improves the display speed, because script
interpretation slows down the display.

External JavaScript

Scripts can also be placed in external files:

External file: myScript.js

function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}

External scripts are practical when the same code is used in many different web pages.

JavaScript files have the file extension .js.

To use an external script, put the name of the script file in the src (source) attribute of a <script> tag:

<!DOCTYPE html>
<html>
<body>

<h2>Demo External JavaScript</h2>

 age 43 of 80

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<p>This example links to "myScript.js".</p>

<p>(myFunction is stored in "myScript.js")</p>

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

</body>
</html>
 age 44 of 80

You can place an external script reference in <head> or <body> as you like.

The script will behave as if it was located exactly where the <script> tag is located.

External scripts cannot contain <script> tags.

External JavaScript Advantages

Placing scripts in external files has some advantages:

 It separates HTML and code

 It makes HTML and JavaScript easier to read and maintain
 Cached JavaScript files can speed up page loads

To add several script files to one page - use several script tags:

Example

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

External References

An external script can be referenced in 3 different ways:

 With a full URL (a full web address)

 With a file path (like /js/)
 Without any path

This example uses a full URL to link to myScript.js:

<!DOCTYPE html>
<html>
<body>

<h2>External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Click Me</button>

<p>This example uses a full web URL to link to "myScript.js".</p>

<p>(myFunction is stored in "myScript.js")</p>

<script src="https://www.w3schools.com/js/myScript.js"></script>

</body>
</html>
 age 45 of 80

This example uses a file path to link to myScript.js:

<!DOCTYPE html>
<html>
<body>

<h2>External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<p>This example uses a file path to link to "myScript.js".</p>

<p>(myFunction is stored in "myScript.js")</p>

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

</body>
</html>

This example uses no path to link to myScript.js:

<!DOCTYPE html>
<html>
<body>

<h2>Demo External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<p>This example links to "myScript.js".</p>

<p>(myFunction is stored in "myScript.js")</p>

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

</body>
</html>

JavaScript Output

JavaScript Display Possibilities

JavaScript can "display" data in different ways:

 Writing into an HTML element, using innerHTML.

 Writing into the HTML output using document.write().
 age 46 of 80

 Writing into an alert box, using window.alert().

 Writing into the browser console, using console.log().

Using innerHTML

To access an HTML element, JavaScript can use the document.getElementById(id) method.

The id attribute defines the HTML element. The innerHTML property defines the HTML content:

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>

<p>My First Paragraph.</p>

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

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html>

Changing the innerHTML property of an HTML element is a common way to display data in HTML.
 age 47 of 80

Using document.write()

For testing purposes, it is convenient to use document.write():

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>

<p>My first paragraph.</p>

<p>Never call document.write after the document has finished loading.

It will overwrite the whole document.</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>

Using document.write() after an HTML document is loaded, will delete all existing HTML:

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>

<p>My first paragraph.</p>

<button type="button" onclick="document.write(5 + 6)">Try it</button>

 age 48 of 80

</body>
</html>

The document.write() method should only be used for testing.

Using window.alert()

You can use an alert box to display data:

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>

 age 49 of 80

<p>My first paragraph.</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

You can skip the window keyword.

In JavaScript, the window object is the global scope object. This means that variables, properties, and
methods by default belong to the window object. This also means that specifying the window keyword is
optional:

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>

<p>My first paragraph.</p>

<script>
alert(5 + 6);
</script>

</body>
</html>
 age 50 of 80

Using console.log()

For debugging purposes, you can call the console.log() method in the browser to display data.

You will learn more about debugging in a later chapter.

<!DOCTYPE html>
<html>
<body>

<h2>Activate Debugging</h2>

<p>F12 on your keyboard will activate debugging.</p>

<p>Then select "Console" in the debugger menu.</p>
<p>Then click Run again.</p>

<script>
console.log(5 + 6);
</script>

</body>
</html>

JavaScript Print

JavaScript does not have any print object or print methods.

You cannot access output devices from JavaScript.

The only exception is that you can call the window.print() method in the browser to print the content of
the current window.

<!DOCTYPE html>
<html>
<body>

<h2>The window.print() Method</h2>

<p>Click the button to print the current page.</p>

<button onclick="window.print()">Print this page</button>

</body>
</html>
 age 51 of 80

JavaScript Statements

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Statements</h2>

<p>A <b>JavaScript program</b> is a list of <b>statements</b> to be executed by a computer.</p>

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

<script>
let x, y, z; // Statement 1
x = 5; // Statement 2
y = 6; // Statement 3
z = x + y; // Statement 4

document.getElementById("demo").innerHTML =
"The value of z is " + z + ".";
</script>

</body>
</html>
 age 52 of 80

JavaScript Programs

A computer program is a list of "instructions" to be "executed" by a computer.

In a programming language, these programming instructions are called statements.

A JavaScript program is a list of programming statements.

In HTML, JavaScript programs are executed by the web browser.

JavaScript Statements

JavaScript statements are composed of:

Values, Operators, Expressions, Keywords, and Comments.

This statement tells the browser to write "Hello Dolly." inside an HTML element with id="demo":

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Statements</h2>

<p>In HTML, JavaScript statements are executed by the browser.</p>

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

<script>
document.getElementById("demo").innerHTML = "Hello Dolly.";
</script>
 age 53 of 80

</body>
</html>

Most JavaScript programs contain many JavaScript statements.

The statements are executed, one by one, in the same order as they are written.

JavaScript programs (and JavaScript statements) are often called JavaScript code.

Semicolons ;

Semicolons separate JavaScript statements.

Add a semicolon at the end of each executable statement:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Statements</h2>

<p>JavaScript statements are separated by semicolons.</p>

<p id="demo1"></p>

<script>
let a, b, c;
a = 5;
b = 6;
 age 54 of 80

c = a + b;
document.getElementById("demo1").innerHTML = c;
</script>

</body>
</html>

When separated by semicolons, multiple statements on one line are allowed:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Statements</h2>

<p>Multiple statements on one line are allowed.</p>

<p id="demo1"></p>

<script>
let a, b, c;
a = 5; b = 6; c = a + b;
document.getElementById("demo1").innerHTML = c;
</script>

</body>
</html>
 age 55 of 80

On the web, you might see examples without semicolons.

Ending statements with semicolon is not required, but highly recommended.

JavaScript White Space

JavaScript ignores multiple spaces. You can add white space to your script to make it more readable.

The following lines are equivalent:

let person = "Hege";

let person="Hege";

A good practice is to put spaces around operators ( = + - * / ):

let x = y + z;

JavaScript Line Length and Line Breaks

For best readability, programmers often like to avoid code lines longer than 80 characters.

If a JavaScript statement does not fit on one line, the best place to break it is after an operator:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Statements</h2>

<p>
The best place to break a code line is after an operator or a comma.
</p>
 age 56 of 80

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

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

</body>
</html>

JavaScript Code Blocks

JavaScript statements can be grouped together in code blocks, inside curly brackets {...}.

The purpose of code blocks is to define statements to be executed together.

One place you will find statements grouped together in blocks, is in JavaScript functions:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Statements</h2>

<p>JavaScript code blocks are written between { and }</p>

<button type="button" onclick="myFunction()">Click Me!</button>

<p id="demo1"></p>
<p id="demo2"></p>
 age 57 of 80

<script>
function myFunction() {
document.getElementById("demo1").innerHTML = "Hello Dolly!";
document.getElementById("demo2").innerHTML = "How are you?";
}
</script>

</body>
</html>
 age 58 of 80

JavaScript Keywords

JavaScript statements often start with a keyword to identify the JavaScript action to be performed.

Our Reserved Words Reference lists all JavaScript keywords.

Here is a list of some of the keywords you will learn about in this tutorial:

Keyword Description

var Declares a variable

let Declares a block variable

const Declares a block constant

if Marks a block of statements to be executed on a condition

switch Marks a block of statements to be executed in different cases

for Marks a block of statements to be executed in a loop

function Declares a function

return Exits a function

try Implements error handling to a block of statements

JavaScript keywords are reserved words. Reserved words cannot be used as names for variables.

JavaScript Syntax

JavaScript syntax is the set of rules, how JavaScript programs are constructed:

// How to create variables:

var x;
let y;

// How to use variables:

x = 5;
y = 6;
let z = x + y;

JavaScript Values

The JavaScript syntax defines two types of values:

 age 59 of 80

 Fixed values
 Variable values

Fixed values are called Literals.

Variable values are called Variables.

JavaScript Literals

The two most important syntax rules for fixed values are:

1. Numbers are written with or without decimals:

10.50

1001

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Numbers</h2>

<p>Number can be written with or without decimals.</p>

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

<script>
document.getElementById("demo").innerHTML = 10.50;
</script>

</body>
</html>
 age 60 of 80

2. Strings are text, written within double or single quotes:

"John Doe"

'John Doe'

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Strings</h2>

<p>Strings can be written with double or single quotes.</p>

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

<script>
document.getElementById("demo").innerHTML = 'John Doe';
</script>

</body>
</html>

JavaScript Variables

In a programming language, variables are used to store data values.

JavaScript uses the keywords var, let and const to declare variables.

An equal sign is used to assign values to variables.

 age 61 of 80

In this example, x is defined as a variable. Then, x is assigned (given) the value 6:

let x;
x = 6;

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>In this example, x is defined as a variable.

Then, x is assigned the value of 6:</p>

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

<script>
let x;
x = 6;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

JavaScript Operators

JavaScript uses arithmetic operators ( + - * / ) to compute values:

(5 + 6) * 10
 age 62 of 80

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Operators</h2>

<p>JavaScript uses arithmetic operators to compute values (just like algebra).</p>

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

<script>
document.getElementById("demo").innerHTML = (5 + 6) * 10;
</script>

</body>
</html>

JavaScript uses an assignment operator ( = ) to assign values to variables:

let x, y;
x = 5;
y = 6;

<!DOCTYPE html>
<html>
<body>

<h2>Assigning JavaScript Values</h2>

<p>In JavaScript the = operator is used to assign values to variables.</p>

 age 63 of 80

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

<script>
let x, y;
x = 5;
y = 6;
document.getElementById("demo").innerHTML = x + y;
</script>

</body>
</html>

JavaScript Expressions

An expression is a combination of values, variables, and operators, which computes to a value.

The computation is called an evaluation.

For example, 5 * 10 evaluates to 50:

5 * 10

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Expressions</h2>

<p>Expressions compute to values.</p>

<p id="demo"></p>
 age 64 of 80

<script>
document.getElementById("demo").innerHTML = 5 * 10;
</script>

</body>
</html>

Expressions can also contain variable values:

x * 10

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Expressions</h2>

<p>Expressions compute to values.</p>

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

<script>
var x;
x = 5;
document.getElementById("demo").innerHTML = x * 10;
</script>

</body>
</html>
 age 65 of 80

The values can be of various types, such as numbers and strings.

For example, "John" + " " + "Doe", evaluates to "John Doe":

"John" + " " + "Doe"

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Expressions</h2>

<p>Expressions compute to values.</p>

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

<script>
document.getElementById("demo").innerHTML = "John" + " " + "Doe";
</script>

</body>
</html>
 age 66 of 80

JavaScript Keywords

JavaScript keywords are used to identify actions to be performed.

The let keyword tells the browser to create variables:

let x, y;
x = 5 + 6;
y = x * 10;

<!DOCTYPE html>
<html>
<body>

<h2>The <b>let</b> Keyword Creates Variables</h2>

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

<script>
let x, y;
x = 5 + 6;
y = x * 10;
document.getElementById("demo").innerHTML = y;
</script>

</body>
</html>
 age 67 of 80

The var keyword also tells the browser to create variables:

var x, y;
x = 5 + 6;
y = x * 10;

<!DOCTYPE html>
<html>
<body>

<h2>The var Keyword Creates Variables</h2>

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

<script>
var x, y;
x = 5 + 6;
y = x * 10;
document.getElementById("demo").innerHTML = y;
</script>

</body>
</html>
 age 68 of 80

In these examples, using var or let will produce the same result.

You will learn more about var and let later in this tutorial.

JavaScript Comments

Not all JavaScript statements are "executed".

Code after double slashes // or between /* and */ is treated as a comment.

Comments are ignored, and will not be executed:

let x = 5; // I will be executed

// x = 6; I will NOT be executed

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comments are NOT Executed</h2>

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

<script>
let x;
x = 5;
// x = 6; I will not be executed
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>
 age 69 of 80

JavaScript Identifiers / Names

Identifiers are JavaScript names.

Identifiers are used to name variables and keywords, and functions.

The rules for legal names are the same in most programming languages.

A JavaScript name must begin with:

 A letter (A-Z or a-z)

 A dollar sign ($)
 Or an underscore (_)

Subsequent characters may be letters, digits, underscores, or dollar signs.

Note

Numbers are not allowed as the first character in names.

This way JavaScript can easily distinguish identifiers from numbers.

JavaScript is Case Sensitive

All JavaScript identifiers are case sensitive.

The variables lastName and lastname, are two different variables:

let lastname, lastName;

lastName = "Doe";
lastname = "Peterson";
 age 70 of 80

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript is Case Sensitive</h2>

<p>Try to change lastName to lastname.</p>

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

<script>
let lastname, lastName;
lastName = "Doe";
lastname = "Peterson";
document.getElementById("demo").innerHTML = lastName;
</script>

</body>
</html>

JavaScript does not interpret LET or Let as the keyword let.

JavaScript and Camel Case

Historically, programmers have used different ways of joining multiple words into one variable name:

Hyphens:

first-name, last-name, master-card, inter-city.

 age 71 of 80

Hyphens are not allowed in JavaScript. They are reserved for subtractions.

Underscore:

first_name, last_name, master_card, inter_city.

Upper Camel Case (Pascal Case):

FirstName, LastName, MasterCard, InterCity.

Lower Camel Case:

JavaScript programmers tend to use camel case that starts with a lowercase letter:

firstName, lastName, masterCard, interCity.

JavaScript Character Set

JavaScript uses the Unicode character set.

Unicode covers (almost) all the characters, punctuations, and symbols in the world.

JavaScript Comments

JavaScript comments can be used to explain JavaScript code, and to make it more readable.

JavaScript comments can also be used to prevent execution, when testing alternative code.

Single Line Comments

Single line comments start with //.

Any text between // and the end of the line will be ignored by JavaScript (will not be executed).

This example uses a single-line comment before each code line:

// Change heading:
document.getElementById("myH").innerHTML = "My First Page";

// Change paragraph:
document.getElementById("myP").innerHTML = "My first paragraph.";

<!DOCTYPE html>
<html>
<body>

<h1 id="myH"></h1>
 age 72 of 80

<p id="myP"></p>

<script>
// Change heading:
document.getElementById("myH").innerHTML = "JavaScript Comments";
// Change paragraph:
document.getElementById("myP").innerHTML = "My first paragraph.";
</script>

</body>
</html>

This example uses a single line comment at the end of each line to explain the code:

let x = 5; // Declare x, give it the value of 5

let y = x + 2; // Declare y, give it the value of x + 2

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comments</h2>

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

<script>
let x = 5; // Declare x, give it the value of 5
let y = x + 2; // Declare y, give it the value of x + 2

// Write y to demo:
document.getElementById("demo").innerHTML = y;
</script>
 age 73 of 80

</body>
</html>

Multi-line Comments

Multi-line comments start with /* and end with */.

Any text between /* and */ will be ignored by JavaScript.

This example uses a multi-line comment (a comment block) to explain the code:

/*
The code below will change
the heading with id = "myH"
and the paragraph with id = "myP"
in my web page:
*/
document.getElementById("myH").innerHTML = "My First Page";
document.getElementById("myP").innerHTML = "My first paragraph.";

<!DOCTYPE html>
<html>
<body>

<h1 id="myH"></h1>
<p id="myP"></p>

<script>
/*
 age 74 of 80

The code below will change

the heading with id = "myH"
and the paragraph with id = "myP"
*/
document.getElementById("myH").innerHTML = "JavaScript Comments";
document.getElementById("myP").innerHTML = "My first paragraph.";
</script>

</body>
</html>

It is most common to use single line comments.

Block comments are often used for formal documentation.

Using Comments to Prevent Execution

Using comments to prevent execution of code is suitable for code testing.

Adding // in front of a code line changes the code lines from an executable line to a comment.

This example uses // to prevent execution of one of the code lines:

//document.getElementById("myH").innerHTML = "My First Page";

document.getElementById("myP").innerHTML = "My first paragraph.";

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comments</h2>

<h1 id="myH"></h1>
 age 75 of 80

<p id="myP"></p>

<script>
//document.getElementById("myH").innerHTML = "My First Page";
document.getElementById("myP").innerHTML = "My first paragraph.";
</script>

<p>The line starting with // is not executed.</p>

</body>
</html>

This example uses a comment block to prevent execution of multiple lines:

/*
document.getElementById("myH").innerHTML = "My First Page";
document.getElementById("myP").innerHTML = "My first paragraph.";
*/

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comments</h2>

<h1 id="myH"></h1>

<p id="myP"></p>
 age 76 of 80

<script>
/*
document.getElementById("myH").innerHTML = "Welcome to my Homepage";
document.getElementById("myP").innerHTML = "This is my first paragraph.";
*/
document.getElementById("myP").innerHTML = "The comment-block is not executed.";
</script>

</body>
</html>
 age 77 of 80

Teachers Activity:
Ask Question
Show Presentation
Demonstration
Show video:
https://www.youtube.com/watch?v=NO5kUNxGIu0
https://www.youtube.com/watch?v=quJzdnXuNDc

Reference:
Site:
https://www.google.com/
https://www.youtube.com/
https://youteam.io/blog/top-browsers-for-developers/
https://www.geeksforgeeks.org/dom-document-object-model/
https://www.codingdojo.com/blog/how-to-add-javascript-to-html
https://likims.com/services/backend-services
https://techbootcamps.utexas.edu/blog/html-css-javascript/#:~:text=To%20be%20a%20front
%20end,each%20other%20in%20that%20order.
https://www.w3schools.com/js/default.asp

eBook:
 JavaScript from Beginners to Professional by: Laurence Lars Svekis, Rob Percival and Maaike van
Putten
 JavaScript Language by: tutorialpoint.com
 age 78 of 80

Assessment 15-1:
Written Test

Test I: Multiple Choice: Write your chosen letter on the space provided.

__________ 1. The easiest way to open Google Chrome DevTools is from the Google
Chrome menu. To do this, click the _________ menu icon in the upper right
corner.
a. one-dot b. two-dot c. three-dot
__________ 2. Code Cola shows the source code of the page, allowing you to edit the CSS
by dragging and dropping the slider—the finished code can be copied and
pasted into the editor.
a. Code b. Coca c. Coke
__________ 3. The Web Developer ______________ adds a toolbar button with various
web developer tools.
a. expansion b. extension c. expectations
__________ 4. __________ is one of the most “stuffed” web browsers in our review, and it
offers a bunch of flexible out-of-the-box tools for network camouflage and
staying incognito online.
a. Blisk b. Brave c. Sizzy
__________ 5. __________ is the only developer-focused web browser that gives you
access to all the features you need to create a sensational online experience.
a. Blisk b. Brave c. Sizzy
__________ 6. __________ is a browser with great functionality, focused on speeding up
the development workflow. Its developers promised to make this process
more productive,
a. Blisk b. Brave c. Sizzy
__________ 7. ____________ offers the perfect balance between a classic user browser and
a developer-oriented masterpiece.
a. Google Chrome b. Brave c. Polypane
__________ 8. __________ Developer Edition is available for all known platforms. Achieving
a faster program became possible after its engine was completely
redesigned.
a. Firefox b. Chrome c. Sizzy
__________ 9. A code ___________ is an editor, sometimes with folding or other advanced
layout capabilities, designed to structure source code or, by extension, other
kinds of text file.

a. maker b. browser c. creator

__________ 10. Cross-browser compatibility can be defined as the ability of your web
resource to adjust to multiple browsers at the same time, displaying
correctly in them.
a. functionality b. compatibility c. accuracy
 age 79 of 80

Test II: True or False: Write the letter T if the statement is true and F if the statement is false on the
space provided.

_____________ 1. Some of the most popular programming languages for backend

development include Java, Python, Ruby, PHP, and JavaScript (with
Node.js).
_____________ 2. The choice of programming language for a backend service can have a
significant impact on the development process, performance, and
scalability of the system.
_____________ 3. Cache a backend service to handle increased traffic involves making
changes to the infrastructure and architecture to accommodate the
additional load.
_____________ 4. Security measures are implemented to protect sensitive data and ensure
the confidentiality, integrity, and availability of the data.
_____________ 5. Performance: Backend services must respond to requests quickly and
efficiently to provide a good user experience.
_____________ 6. Security and performance are critical factors for any backend service as
they directly impact the user experience and the trustworthiness of the
application.
_____________ 7. To secure the data, the frontend service implements various security
measures such as encryption, access control, and data backup.
_____________ 8. Managing and storing large amounts of data in a secure and scalable
manner is a significant challenge in backend development.
_____________ 9. Backend development involves creating the server-side components of a
web application and can pose several challenges,
_____________ 10. Backend services are responsible for managing and processing data, and
providing an API for the frontend to access the data.

Test III: Question and Answer

A: What is DOM?
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
___________________________________________

B: Why is DOM required?

_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
 age 80 of 80

_____________________________________________________________________________________
___________________________________________

C: What is JavaScript?
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
___________________________________________

D: What is JavaScript used for?

_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
___________________________________________

Activity

Objective: Perform the HTML, CSS and JavaScript codes.

Steps/Procedure:

1. Copy the codes given in Lesson 15.

2. Paste the codes in Notepad.
3. Save the file with the extension .html for HTML and CSS and .js for JavaScript.
4. Observe the output via browser.
5. Try to alter the codes base on your previous readings.