CHAPTER ONE: INTRODUCTION TO WEB BASED INFORMATION SYSTEMS

A web based information system is a system that uses the internet to store, process and manage
data. It can be used to store and share information between different users or to allow users to
access information from a central location. Web based information systems are often used to create
and manage databases.

Web systems are used to control and connect to Internet-based applications and information
systems. The Internet provides services by transporting information over the Internet and
organizing it. This software system is based on hypertext principles and is used to publish and
manage data. An example is the booking, purchasing, and processing of a hotel room online. An
information system is a formal, sociotechnical, and organized set of tools for gathering, storing,
and distributing information. It is important to remember that information systems can be divided
into four types: transaction processing, management information systems, decision support
systems, and executive support systems. An online document management system is a piece of
software that allows users to manage their documents online.
To share and collaborate on projects, you can do so much more easily with web-based systems.
Users can collaborate on projects and share data in a single location, thanks to the centralized
storage of data. Furthermore, it is simpler to integrate web-based systems than to install and
maintain isolated desktop applications.

Information systems are made up of a variety of tools, such as laptops, databases, networks, and
smartphones.

The user creates a request for the web server via the application’s user interface, sending the
request over the Internet. This request is sent to the web application server by the web server. The
web application server executes the task, which results in the data required.

What Are The Types Of Web-based Information Systems?

Building Blocks’ systems integrate the Internet, intranets, and extranets as three major sources of
information for businesses.

Web-based information systems, which are based on various types of Internet protocol, enable the
collection, storage, and transmission of data. Web-based technology can have an impact on social
relations, social behavior, and various organizational issues. Organizations of all sizes are utilizing
WBIS to develop and run their businesses. Web-based information systems are a collection of
information and services that can be accessed via Internet web technologies. Data can be published
and maintained in hypertext by using this technology, which is a software system. To be eligible
for this program, you must have a web browser (for example, Internet Explorer, Firefox, and
Netscape). A community is a virtual space where people can communicate online, whether through
bulletin boards or blogs.

A variety of social and professional groups interact with one another via the internet via web-based
technologies. Using social networking services, users can create their own profiles. WBIS, in
addition to providing researchers with a broader range of information, has also made it easier to
access the internet. The WBIS allows students to access their course materials, class schedules, or
any other current information about their class. Government websites can be used to publish
various types of information, such as the budget of the country, the results of examinations, and so
on.

In order to provide effective and efficient means of communication and coordination among people
and computers, a system must be able to function and be reliable. Hardware must be able to
process data and respond quickly to user commands, whereas software must be able to store,
manage, and retrieve data. A database must be able to store data in an efficient manner that allows
it to be searchable and accessible, whereas a network must be able to send data quickly and reliably
across multiple departments. People play an important role in any information system, as they
input and process data, as well as provide feedback on software and databases.
When designing an effective information system, it must be able to meet the needs of a wide range
of organizations. A common system used to manage day-to-day operations, such as scheduling
employees, tracking inventory, and ordering supplies, is an operational-level system. Teams and
organizational resources, such as budgets and schedules, are managed by management-level
systems. Strategic systems plan and monitor the organization’s progress and make decisions based
on the data gathered by other systems.
A good information system must be able to meet the needs of a diverse set of users. It is critical
that operational users have access to the system in order to perform their tasks, whereas
management users have access to the system in order to manage an organization. Users at the
strategic level must be able to access the system in order to make decisions based on what is
gathered by other systems.
In order for an effective information system to function, it must be able to meet the needs of a wide
range of systems. The system should be able to communicate with other systems in addition to the
financial system, inventory system, and customer service system. Communication with users, such
as employees, managers, and customers, is also required.
To meet the needs of a diverse set of businesses, an effective information system must be able to
do so.

Wbmis: An Important Tool For Managing An Organization’s Information

It is one of the most important tools for managing an organization’s information because it is based
on the web. It enables organizations to manage data in a simple manner. Users can view and
manage data in a centralized location by using WBMIS. Furthermore, the WBMIS enables users to
share data with other organizations more easily.

What Is A Web-based Management System?

A web-based management system is a system that allows users to access and manage a website
from a central location. This type of system typically includes a web-based interface that provides
users with tools to manage the website, including adding and editing content, managing users, and
configuring the website.

Sylcle.net, a web-based patient management system, was created to assist hearing care
professionals in managing their patients. Clients report a 20% increase in hearing aid sales within
the first 3 to 6 months of implementing the system. In addition to the system’s ability to bill claims
electronically, Sycle clients will benefit from focusing more on their patients. Noah Hearing Aid
has a patient management system that manages nearly 1,000 clinics across North America. The
company intends to open a European office soon. The CEO of a healthcare company stated that
clinics are more likely to adopt web-based formats because they can access patient data, reports,
and schedules from any location.

The Benefits Of Wbmss For Businesses

A WBMS is becoming increasingly popular as a tool for website managers. Because they allow
business owners to manage their website with a business mindset, they can achieve greater
efficiency and improve customer service. As a result, WBMSs can improve compliance with safety
and quality standards, which can result in increased business productivity.

What Are The Components Of A Web-based Information System?

Web-based database applications come in three flavors: they include a web browser (or client), a
web application server, and a database server.

The five core components of a web-based application are the user interface, data visualization, data
analysis, and data cleansing. This paper examines approaches and implementation strategies for
spatial data infrastructure in Canada, Switzerland, Nigeria, and Malaysia, with particular attention
to developing countries. Figure 7 depicts the relationship between the core components of a web-
base system. Based on the study’s findings, it appears that the much anticipated ability to assess a
nation’s SDI performance through the use of a promising quantitative assessment model will be
realized. Developing nations must be regarded as a reliable partner for the development of SDIs
and their proper implementation. Some of the obstacles that may prevent successful GIT
implementation in developing countries can be identified. Developing countries face a slew of
obstacles when it comes to effective GIT implementation, particularly at the local level.

The open source and free web technologies can be extremely beneficial to overcome these barriers.
When you use FOS GIT, you can save money on software and assist in the development of local
GIT knowledge. A spatial-enabled society concept has not been implemented in bushfire recovery.
We must link with planning regimes in order to integrate bushfire datasets (spread and intensity),
and volunteer data can be used in recovery efforts. A lack of understanding about concept and
application of SDI, privacy issues, entrenched bureaucratic practices, cultural issues, and data
sharing issues are all discussed. The risks of natural disasters are deadly and destructive,
particularly in developing countries where economic, social, political, and cultural factors have an
impact on vulnerability. Geographic information systems (GIS), particularly those that serve as
spatial data gateways, have proven to be extremely effective in disaster management.

When there is an urgent need for reliable and up-to-date spatial data describing current emergency
situations, spatial data problems become more serious during disaster response. This paper
describes the development of a web-based GIS as part of the disaster response process using a SDI
framework. It asserts that an SDI model and consideration of SDI development factors and issues
can aid disaster management agencies in their efforts. To ensure NSDI success, each country’s
development policies and national agenda must be followed. To realize SDI potential as a
subsidiary for resolving sustainable local and global energy complications, reliable, well-
harmonized information must be available to SDI stakeholders. This study illuminates the
necessity of legal and regulatory changes in order to achieve the SDI framework. In addition, the
study examines the relationship between competition for energy resources and the tendency for
conflict in the future.

The paper proposes a prototype with a set of recommended practices for the development of SDI
based on transparency and political accountability. It was stated that the SDI model framework
design and implementation can assist the managing agencies in their efforts. According to this
study, organizations can manage their knowledge during a crisis.
The first step in any information system project is the capture of data. It entails collecting,
organizing, and formatting information from a variety of sources in order to process and analyze it.
In the second step, the data is transmitted. The collected data is forwarded to the appropriate
recipients by the organization for use.
Finally, data is stored. Collecting data necessitates organizing it so that it is accessible and useful
later on.
The fourth step is to retrieve data. This process involves extracting data that is currently stored.
The fifth and final step is to manipulate data. By doing so, the organization can use the data in the
most effective way possible.
The sixth and final step is to display the information. Data presentation should be simple and
understandable.

What Is Web-based System

A web-based system, like a computer-based system, can use the internet to access a software
system.

What Is Web-based Software Called?

The term “web application” refers to software programs that run within a web browser, rather than
locally and natively on the operating system (OS) of the device. The World Wide Web offers web
applications to users who have a strong network connection.

Characteristics Of Web-based Information System

There are many different characteristics that a web-based information system can have, but some
of the most common and important ones include being able to access and update information from
any location with an internet connection, being able to share information with others easily, and
having a system that is secure and reliable.

Web-based Information System Examples

There are many examples of web-based information systems. Some common examples include
online banking systems, online shopping systems, and online reservation systems. These systems
allow users to access information and perform tasks through a web browser.

A web-based information system (WBAS) can be thought of as a framework for web-based

information systems. Interoperability is the key to fostering collaboration within business ventures.
This project will concentrate on developing a web-based business information system framework.
The framework was developed based on business logic, ensuring that business rules remained in
effect in the real world. An enterprise that is expected to achieve a profit while also experiencing
risk of failure is known as a Business Venture. Business Ventures are typically non-centralized
decision-making organizations that allow their sub-units to become more autonomous. The
management of several business units has been a difficult task for Business Ventures.

It has also been identified as one of Business Ventures’ most pressing challenges in terms of record
keeping within businesses. The study seeks to create an interoperable Web Based Information
System (WBIS) framework for Business Ventures that can be adopted by business owners to
perform specific operations within their organizations. Organizations all over the world are
implementing information systems in order to increase revenue and lower costs. You can find out a
lot about the world from a variety of sources, including television, reading newspapers, books,
Internet surfing, and listening to the radio. Sousa and Oz recognized that the foundation of any
successful company is sound decision-making and problem solving. The Business Information
System (BITS) is made up of interrelated components that all work together to transform data into
tangible information that can be used for forecasting, organizing decision-making, and facilitating
operational activities in an organization. Because the primary focus of most companies is on
information and decision making, it helps to foster competitive advantage by providing support and
making timely decisions.

Information systems should avoid using SQL Server. The primary goal of the research was to
develop an efficient method for delivering information to the customer. This research encountered
a major stumbling block in that only one Business Organization was considered and used during
the implementation process. The system was built using technologies such as SQL Server 2008 as
the database, ASP.NET as the programing language, and Microsoft Information Services (IIS) as
the web server. We included subsystems or modules such as business management warehouse
management, distribution management, accounting management, and customer service in the
design system. The framework architecture is used to identify and structure available services for a
Business Venture application. The following are the five most fundamental elements of a business
relationship: the relationship between parts and services, the relationships between different
business types, and the relationships between different types of businesses.

Web servers include databases, messaging services, mailing services, and collaboration services, in
addition to messaging services and databases. The Business Venture solution is created, managed,
and controlled by a variety of tools. A message can be sent through email messaging and
discussions can take place between members of a news group. Protocols for internet technology
such as the Simple Mail Transfer Protocol (SMTP) or the Internet Message Access International
Journal of Computer Applications (0975 – 8887) are used in this service. The March 2018 11
Protocol (IMAP) was published in Volume 180 – No.26. The Business Venture application
infrastructure includes a variety of network services such as the internet, intranets, and extranet. It
was identified as one of the main reasons for information growth, that it is necessary for
organizations to have an Information System.

Tracking Business Units that form from one Business Venture to the next can be difficult. Figure 2
depicts the WBIS interoperable framework, which allows users to monitor and record these
machines. A peranchan website should be run by the operator, who should be familiar with the data
and tabungan. It necessitates a server that is capable of delivering web-based information services,
such as Web Server, Database Services, Message Services, Mailing Services, and Collaboration
Services. Despite the fact that academic information systems disciplines are plagued by a variety of
issues, one of the most serious is the lack of a defined definition of information systems. This
paper defines information systems as a subset of the work system as defined in Alter (1999a). The
paper examines the proposed IS definition using an evaluation system that includes simplicity,
clarity, scope, and power.
It describes how a Web site management information system, made up of ASP, is designed and
implemented by an enterprise. The customer interface and the management interface are the two
main parts of the entire site management system that handle data flow and other functions. The
fundamental functions of business information systems are summarized below.

Web System And Technologies

A web system is a set of components that work together to create a complete website. The most
common components of a web system are a web server, a database, and a web application.
Web technologies are the tools that a web developer uses to create a website. The most common
web technologies are HTML, CSS, and JavaScript.

Overview Of The Most Important Web Development Technologies

Furthermore, web technologies have become more widely used in the development and
deployment of software applications. Applications on the web can include a wide range of software
such as CRM, accounting, ordering, and payroll.
As a result of the growth of the web business, a variety of web development technologies have
been developed. Websites and web applications are built using these technologies. In this article,
we will go over the most important web development technologies.
Browsers can be found in the following menu. The most widely used method of accessing the
Internet is through a web browser. Almost all web browsers nowadays are based on the same core
technology. You must use your computer’s browser to access web pages. In addition to searching
the Internet for information, you can shop online using them.
HTML and CSS are the building blocks of web pages.
HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are the building blocks
of any website. A page’s content and structure are written in HTML, which is the language of
content. CSS is a code that is used to style a page’s content and appearance. CSS and HTML are
both written in a standard language, HTML.
Programming Languages: You can find a complete list of programming languages. Web
development technologies rely on a variety of programming languages to create applications. Web
applications are built using programming languages that specify the logic and functions of the
application. The Java, JavaScript, and ASP.NET programming languages can be used to create
complex web applications.
Web Development Technologies
Web development technologies are used to create websites and web applications. HTML, CSS,
JavaScript, and ASP.NET are the primary web development technologies. The content and
structure of a page are created using HTML, CSS, and JavaScript. This program is used to create
the page’s appearance and functionality using the ASP.NET platform.

Web-based Information Examples

Reservation systems, which allow you to book rooms, tickets, and other services online; online
payment systems; interactive Internet portals (which allow users to input their input like sign up);
and CRM systems, which handle multiple projects by combining massive amounts of data.
The Benefits of Web-Based Systems for Business

The Benefits of Web-Based Systems

Web-based applications used to be very limited in functionality. However, advances in technology,

security, and internet speeds have greatly increased the potential scope of web-based systems.
Today, we have web-based business accounting systems, web-based CRM systems, a web-based
Microsoft Office, and more. Web-based applications offer some significant advantages over native,
client-based software. Here are just some of the benefits of web-based apps for business.

What is a Web-Based System?

A web-based system is an application that is accessed via HTTP. The term web-based is usually
used to describe applications that run in a web browser. It can, though, also be used to describe
applications that have a very small component of the solution loaded on the client’s PC. The host
server for a web-based system could be a local server, or it could be accessed via the internet.

Lower Development Costs

A web-based application runs in a web browser. That means that a single, responsive web
application can be used across multiple device types. Although web apps will need to be tested on
different browsers, there is no need to test them on different operating systems. This makes
development and testing much easier. It cuts development costs and reduces development time.

Easy Installation and Maintenance

Unlike traditional software that is loaded on each device, web applications run from a host server.
There is no installation on local machines. Software upgrades are all completed centrally. That
reduces the costs of installing and upgrading software. It also ensures that all users are always
using the same version of the software.

Accessible Anywhere

Users can access a web-based system anywhere. So long as they have an internet connection, a
web browser, and the appropriate login details. This means that users can access the data they need
when they are away from the office. It also brings the possibility of staff working from home.

Easy Data Sharing and Collaboration

The sharing of data and collaborating on projects is made much easier with web-based systems.
Data is stored in one central location, so users can share data and work together on projects. It is
also easier to integrate web-based systems than isolated desktop applications.

Centralized Security

As web apps are installed on web servers, security is controlled by an IT professional. That avoids
sensitive corporate information being held on many local client PCs, which are not as secure.
Employees can access data when they are away from the office via a web application. So, it is not
necessary for data to be held anywhere other than the secure central location.

Reduced Hardware Costs

Web-based systems can eliminate the need for powerful client PCs. Processing is carried out on the
host server. The host server can be engineered to efficiently service simultaneous, peak demand.
So, the storage, processor, and memory requirements for client PCs can be reduced. Taken across
an entire organization, this can represent a large cost saving for some businesses.

Increased Efficiency

In most businesses, the deployment of web-based solutions leads to the streamlining of business
processes. Often, paper-based processes can be replaced by workflow-based solutions. Business
process improvements can lead to higher employee productivity and lower costs.

Adaptable to Changing Workloads

The deployment of web-based applications requires no software loading on the client’s PC. All that
is needed is the setting up of a new user and the relevant secure access controls. This can be a
major benefit for growing businesses, or for seasonal businesses. Users can be added or removed
very quickly.

Greater Availability of Information

Web-based systems make it easier to provide access to real-time information. The paper reports
that might take days to prepare and distribute can be replaced with online reports and digital
dashboards. That can improve the quality and the speed of decision-making, right across an
organization.

Web-based custom software development can provide businesses with significant cost savings and
productivity improvements. Now that internet access is almost universally available and internet
speeds have significantly improved, applications that previously had to be client-based can now be
deployed on the web.

Although this is the case in developed Western countries, it is not the case worldwide. In some
countries, internet access is unreliable. So, major deployment of web-based applications may still
not be possible. International organizations with overseas offices may not yet be able to take full
advantage of web-based solutions.

For domestic organizations, though, web-based systems have a promising future. From web-based
office applications, like content management systems and productivity applications, to custom
web-based software developed specifically for your organization, the foundation of many future
software solutions is likely to be web-based.
What is JavaScript

JavaScript is a programming language that executes on the browser. It turns static HTML web
pages into interactive web pages by dynamically updating content, validating form data,
controlling multimedia, animate images, and almost everything else on the web pages.

JavaScript is the third most important web technology after HTML and CSS. JavaScript can be
used to create web and mobile applications, build web servers, create games, etc.

JavaScript Example

JavaScript can be used in various activities like data validation, displaying popup messages,
handling events of HTML elements, modifying CSS, etc. The following sample form uses
JavaScript to validate data and change the color of the form.

The responsive UI and menu of this website is also using JavaScript. There is no website in this
world that does not use JavaScript or JavaScript-based frameworks.

JavaScript History

In early 1995, Brendan Eich from Netscape designed and implemented a new language for non-
java programmers to give newly added Java support in Netscape navigator. It was initially named
Mocha, then LiveScript, and finally JavaScript.

Nowadays, JavaScript can execute not only on browsers but also on the server or any device with a
JavaScript Engine. For example, Node.js is a framework based on JavaScript that executes on the
server.

JavaScript and ECMAScript

Often you will hear the term ECMAScript while working with JavaScript. Let's clear the confusion
before it arises.

As you now know, JavaScript was primarily developed to execute on browsers. There are many
different browsers from different companies. So, there was a need to standardize the execution of
the JavaScript code to achieve the same functionality in all the browsers.

Ecma International is a non-profit organization that creates standards for technologies. ECMA
International publishes the specification for scripting languages is called 'ECMAScript'.
ECMAScript specification defined in ECMA-262 for creating a general-purpose scripting
language.

JavaScript implements the ECMAScript standards, which includes features specified in ECMA-
262 specification as well as other features which are not based on ECMAScript standards.

There are different editions of ECMAScript. Most browsers have implemented ECMA-262 5.1
edition.

• ECMA-262 5.1 edition, June 2011

• ECMA-262, 6th edition, June 2015
• ECMA-262, 7th edition, June 2016
• ECMA-262, 8th edition, June 2017
• ECMA-262, 9th edition, June 2018
• ECMA-262, 10th edition, June 2019

JavaScript Engine

JavaScript engine interprets, compiles, and executes JavaScript code. It also does memory
management, JIT compilation, type system, etc. Different browsers use different JavaScript
engines, as listed in the below table.

Browser JavaScript Engine

Edge Chromium with Blink and V8 engines
Chrome V8
FireFox SpiderMonkey
Safari Nitro

Setup JavaScript Development Environment

Here, we are going to use JavaScript in developing a web application. So, we must have at least
two things, a browser, and an editor to write the JavaScript code.

Although we also need a webserver to run a web application, but we will use a single HTML web
page to run our JavaScript code. So, no need to install it for now.

Browser
Mostly, you will have a browser already installed on your PC, Microsoft Edge on the Windows
platform, and Safari on Mac OS.

You can also install the following browser as per your preference:

• Microsoft Edge
• Google Chrome
• Mozilla FireFox
• Safari
• Opera

IDEs for JavaScript Application Development

You can write JavaScript code using a simple editor like Notepad. However, you can install any
open-sourced or licensed IDE (Integrated Development Environment) to get the advantage of
IntelliSense support for JavaScript and syntax error/warning highlighter for rapid development.

JavaScript Advantages
Following are the advantages of JavaScript −

• Simple − JavaScript is simple to comprehend and pick up. Both users and developers will
find the structure to be straightforward. Additionally, it is very doable to implement, saving
web developers a tonne of money when creating dynamic content.
• Speed − JavaScript is a "interpreted" language, it cuts down on the time needed for
compilation in other programming languages like Java. Another client-side script is
JavaScript, which accelerates programme execution by eliminating the wait time for server
connections.

No matter where JavaScript is hosted, it is always run in a client environment to reduce

bandwidth usage and speed up execution.

• Interoperability − Because JavaScript seamlessly integrates with other programming

languages, many developers favour using it to create a variety of applications. Any
webpage or the script of another programming language can contain it.
• Server Load − Data validation can be done within the browser itself rather than being
forwarded to the server because JavaScript is client-side. The entire website does not need
to be reloaded in the event of any discrepancy. Only the chosen area of the page is updated
by the browser.

JavaScript Disadvantages
Following are the disadvantages of JavaScript −
 • Cannot Debug − Although some HTML editors allow for debugging, they are not as
effective as editors for C or C++. Additionally, the developer has a difficult time figuring
out the issue because the browser doesn't display any errors.
• Unexpected stop of rendering − The website's entire JavaScript code can stop rendering
due to a single error in the code. It appears to the user as though JavaScript is absent. The
browsers, however, are very forgiving of these mistakes.
• Client-side Security − The user can see the JavaScript code; it could be misused by others.
These actions might involve using the source code anonymously. Additionally, it is very
simple to insert code into the website that impair the security of data transmitted via the
website.
• Inheritance − JavaScript does not support multiple inheritance; only one inheritance is
supported. This property of object-oriented languages might be necessary for some
programmes.
• Browser Support − Depending on the browser, JavaScript is interpreted differently.
Therefore, before publication, the code needs to run on various platforms. We also need to
check the older browsers because some new functions are not supported by them.

HTML script Tag

The HTML script tag <script> is used to embed data or executable client side scripting language in
an HTML page. Mostly, JavaScript or JavaScript based API code inside a <script></script> tag.

The following is an example of an HTML page that contains the JavaScript code in a <script> tag.

Example: JavaScript in a <script> Tag

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> JavaScript Tutorials</h1>

<script>
//write JavaScript code here..
alert('Hello, how are you?')
</script>
</body>
</html>
In the above example, a <script></script> tag contains the JavaScript alert('Hello, how are you?')
that display a message box.

HTML v4 requires the type attribute to identify the language of script code embedded within script
tag. This is specified as MIME type e.g. 'text/javascript', 'text/ecmascript', 'text/vbscript', etc.

HTML v5 page does not require the type attribute because the default script language is
'text/javascript' in a <script> tag.

An HTML page can contain multiple <script> tags in the <head> or <body> tag. The browser
executes all the script tags, starting from the first script tag from the beginning.

Scripts without async, defer or type="module" attributes, as well as inline scripts, are fetched and
executed immediately, before the browser continues to parse the page. Consider the following page
with multiple script tags.

Example: Multiple <script> Tags

<!DOCTYPE html>
<html>
<head>
<script>
alert('Executing JavaScript 1')
</script>
</head>
<body>
<h1> JavaScript Tutorials</h1>

<script>
alert('Executing JavaScript 2')
</script>

<p>This page contains multiple script tags.</p>

<script>
alert('Executing JavaScript 3')
</script>
</body>
</html>

Above, the first <script> tag containing alert('Executing JavaScript 1') will be executed first, then
alert('Executing JavaScript 2') will be executed, and then alert('Executing JavaScript 3') will be
executed.

The browser loads all the scripts included in the <head> tag before loading and rendering the
<body> tag elements. So, always include JavaScript files/code in the <head> that are going to be
used while rendering the UI. All other scripts should be placed before the ending </body> tag. This
way, you can increase the page loading speed.
Reference the External Script File

A <script> tag can also be used to include an external script file to an HTML web page by using
the src attribute.

If you don't want to write inline JavaScript code in the <script></script> tag, then you can also
write JavaScript code in a separate file with .js extension and include it in a web page using
<script> tag and reference the file via src attribute.

Example: JavaScript in a <script> Tag

<!DOCTYPE html>
<html>
<head>
<script src="/MyJavaScriptFile.js" ></script>
</head>
<body>
<h1> JavaScript Tutorials</h1>

</body>
</html>

Above, the <script src="/MyJavaScriptFile.js"> points to the external JavaScript file using the
src="/MyJavaScriptFile.js" attribute where the value of the src attribute is the path or url from
which a file needs to be loaded in the browser. Note that you can load the files from your domain
as well as other domains.

Global Attributes

The <script> can contain the following global attributes:

Attribute Usage
Async <script async> executes the script asynchronously along with the rest of the
page.
crossorign <script crossorigin="anonymous|use-credentials"> allows error logging for sites
which use a separate domain for static media. Value anonymous do not send
credentials, whereas use-credentials sends the credentials.
Defer <script defer> executes the script after the document is parsed and before firing
DOMContentLoaded event.
Src <script src="uri\path to resource"> specifies the URI/path of an external script
file;
Type <script type="text\javascript"> specifies the type of the containing script e.g.
text\javascript, text\html, text\plain, application\json, application\pdf, etc.
referrerpolicy <script referrerpolicy="no-referrer"> specifies which referrer information to
send when fetching a script. Values can be no-referrer, no-referrer-when-
downgrade, origin, same-origin, strict-origin, etc.
 integrity <script integrity="sha384-oqVuAfXRKap7fdgc"> specifies that a user agent can
use to verify that a fetched resource has been delivered free of unexpected
manipulation.
nomodule <script nomodule> specifies that the script should not be executed in browsers
supporting ES2015 modules.

JavaScript Syntax
Learn some important characteristics of JavaScript syntax in this section.

As mentioned in the previous chapter, JavaScript code can be written inside HTML Script Tags or
in a separate file with .js extension.

Write JavaScript Code

<script>
//Write javascript code here...

</script>

Character Set
JavaScript uses the unicode character set, so allows almost all characters, punctuations, and
symbols.

Case Sensitive
JavaScript is a case-sensitive scripting language. So, name of functions, variables and keywords
are case sensitive. For example, myfunction and MyFunction are different, Name is not equal to
nAme, etc.

Variables
In JavaScript, a variable is declared with or without the var keyword.

Example: JavaScript Statements

<script>
var name = "Steve";
id = 10;
</script>

Semicolon
JavaScript statements are separated by a semicolon. However, it is not mandatory to end a
statement with a semicolon, but it is recommended.
Example: JavaScript Statements
<script>
var one = 1; two = 2; three = 3; //three different statements

var four = 4; //single statement

var five = "Five" //single statement without ;
</script>

Whitespaces
JavaScript ignores multiple spaces and tabs. The following statements are the same.

Example: Whitespaces in JavaScript

<script>
var one =1;
var one = 1;
var one = 1;
</script>

Code Comments
A comment is single or multiple lines, which give some information about the current program.
Comments are not for execution.

Write comment after double slashes // or write multiple lines of comments between /* and */

Example: Comment JavaScript Code

<script>
var one =1; // this is a single line comment

/* this
is multi line
comment*/

var two = 2;
var three = 3;
</script>

String
A string is a text in JavaScript. The text content must be enclosed in double or single quotation
marks.

Example: String in JavaScript

<script>
var msg = "Hello World" //JavaScript string in double quotes

var msg = 'Hello World' //JavaScript string in single quotes

</script>
Number
JavaScript allows you to work with any type of number like integer, float, hexadecimal etc.
Number must NOT be wrapped in quotation marks.

Example: Numbers in JavaScript

<script>
var num = 100;

var flot = 10.5;

</script>

Boolean
As in other languages, JavaScript also includes true and false as a boolean value.

Example: Booleans in JavaScript

<script>
var yes = true;

var no = false;
</script>

Keywords
Keywords are reserved words in JavaScript, which cannot be used as variable names or function
names.

The following table lists some of the keywords used in JavaScript.

JavaScript Reserved Keywords

var function if
else do while
for switch break
continue return try
catch finally debugger
case class this
default false true
in instanceOf typeOf
new null throw
void width delete
What is a Function? JavaScript Function Examples

Functions are one of the main parts of computer programs.

They are widely used and are one of JavaScript's fundamental building blocks.

What is a function in JavaScript?

A function is a block of code that encapsulates one isolated, self-contained behavior for the
computer to perform.
Functions are a set of of organised instructions that correspond to a certain task or specific
functionality a user wants to implement in their program to achieve a single desired outcome.

The code inside a function runs only when it is needed, meaning only when it is called.
Functions are an important and useful part of programming because they create reusable code.

Instead of copying, pasting, and repeating the same code throughout different parts of your
program, you can write that code only in one place using a function. Then you can use it over and
over again whenever you have to.

This also helps when you want to implement changes to your program or debug and try to fix an
error.

Instead of looking for the different parts where your code could be, you only have to look at one
particular place which makes your code more readable.

How to declare functions in JavaScript

The general syntax for creating a function in JavaScript looks like this:

function name(parameter1,parameter2,...) {
// the code statements to be executed
}
Let's break it down:

• You declare a function with the function keyword.

• Next, you give the function a name of your choosing. Function names in JavaScript are
case sensitive and a convention and best practice is to use camelCase.

• The function name is followed by a set of opening and closing parentheses.

Functions are able to take in data by taking inputs. These inputs are enclosed in the parentheses and
are called parameters.
Parameters act as local placeholder variables for the values that will be passed into the function as
inputs when the function is called. They are entirely optional and if there is more than one, you
separate them by a comma.

• Lastly comes the curly braces, and inside them the main body of the function with the code
statements to be executed when the function is called. This is where the inputs to the
function are processed.
How to declare and call a simple function in JavaScript
function greeting() {
console.log('Hello World!');
}
Above, we created a function called greeting.
This function is a very basic one and you can't do much with it. It doesn't take in any inputs and the
only thing that happens is the text Hello World! gets printed to the console.
Defining a function in and of itself doesn't run the code inside the function's body. For the code to
be executed, and in order to see that message in the console, the function has to be called. This is
also known as a function invocation.
To call a function that doesn't accept inputs, you just write the function's name followed by
parentheses and a semicolon at the end.

greeting();

//output
//Hello World!
Now you can reuse this function many times by just calling the function itself many times. This
helps you avoid repeating code:

greeting();
greeting();
greeting();

//output
// Hello World!
// Hello World!
// Hello World!
How to declare and call functions with parameters in JavaScript
We can modify the previous example to take inputs. We'll do this with parameters, as mentioned
earlier.

Parameters are values that you pass in to the function when the function is being declared.
function greeting(name) {
console.log('Hello ' + name + ' !' );
}
The function named greeting now accepts one parameter,name. That string is being concatenated
(+) with the string Hello and an exclamation mark at the end.
When calling functions that accept paraemeters, you need to pass arguments in.
Arguments are values that you supply when calling the function and they correspond with the
parameters that have been passed in the function's decalaration line.

For example:

greeting('Jenny');
//Output
// Hello Jenny !
The argument is the value Jenny and you can think of it as name = 'Jenny'. name, the parameter, is
the placeholder variable, and Jenny is the value you pass in when you call the function.
Functions can accept more than one parameter and can also return data back to the user of the
program:

function addNums(num1,num2) {
return num1 + num2;
}
The above code created a function named addNums that takes in two parameters
– num1 and num2, separated by a comma.
The same way functions have inputs, they also outputs outputs
The function returns as its output the sum of num1 and num2. This means that it processes the two
parameters, does the requested calculation, and returns the end value as a result back to the user.
When the function is called, two arguments have to be passed in since it accepts two parameters:

addNums(10,20);
//Output
// 30
// think of it as num1 = 10 and num2 = 20
Each time the function is called, you can pass in different arguments:

addNums(2,2);
// 4
addNums(3,15);
//18
Variable scope in JavaScript functions
Variable scope refers to how visible variables are to different parts of the program.
A variable defined outside and before a function block has a global scope and can be accessed
from inside a function:
const num = 7;

function myFunc() {
 console.log(num);
}

//Access the variable with a global scope from anywhere in the program:
console.log(num);
//Output
//7

//Call the function with the variable with global scope

myFunc();
//Output
// 7
But if that variable was defined inside the function, it would have local scope and it would be
limited and visible only in the function where it was defined.
You cannot access it from outside the function:

function myFunc() {
const num = 7;
console.log(num);
}

// Try to access the variable with local scope from outside the function scope:
console.log(num);
//Otput:
//Uncaught ReferenceError: num is not defined

//Call the function with the variable defined inside the function:
myFunc();
//Ouput
//7
Function Expressions
You can also create functions using expressions.

These functions are created inside an expression instead of being created with a function
declaration like you've seen so far.

const name = function(firstName) {

return 'Hello ' + firstName ;
 }
Here, we use the variable name to store the function.
To call the function, you use the variable name like this:

console.log(name('Jenny'));
//Output
//"Hello Jenny"
This type of function is also called an Anonymous function because they do not require a name.

The differences between a Named function and an Anonymous one are listed below:

//named
function name(firstName) {
console.log('Hello ' + firstName);
}

name('Jenny');

//anonymous
const name = function(firstName) {
return 'Hello ' + firstName ;
}
console.log(name('Jenny'));
The variables in anonymous functions can be used as values to other variables too:

const name = function(firstName) {

return 'Hello ' + firstName ;
}

const myName = name('Timmy');

console.log(myName);
//Ouput
//"Hello Timmy"
Conclusion
And there you have it! This marks the end of our introduction to JavaScript functions and some of
the ways you can create them.
If you want to learn more, arrow functions are a new and more efficient way to create functions in
JavaScript and they were introduced with ES6.

Arrow Function JavaScript Tutorial – How to Declare a JS Function with the New ES6
Syntax

You’ve probably seen arrow functions written a few different ways.

//example 1
const addTwo = (num) => {return num + 2;};

//example 2
const addTwo = (num) => num + 2;

//example 3
const addTwo = num => num + 2;

//example 4
const addTwo = a => {
 const newValue = a + 2;
return newValue;
};
Some have parentheses around the parameters, while others don’t. Some use curly brackets and
the return keyword, others don’t. One even spans multiple lines, while the others consist of a single
line.
Interestingly, when we invoke the above arrow functions with the same argument we get the same
result.

console.log(addTwo(2));
//Result: 4
How do you know which arrow function syntax to use? That’s what this article will uncover: how
to declare an arrow function.

A Major Difference
Arrow functions are another—more concise—way to write function expressions. However, they
don’t have their own binding to the this keyword.
//Function expression
const addNumbers = function(number1, number2) {
return number1 + number2;
};

//Arrow function expression

const addNumbers = (number1, number2) => number1 + number2;
When we invoke these functions with the same arguments we get the same result.

console.log(addNumbers(1, 2));
//Result: 3
There's an important syntactical difference to note: arrow functions use the arrow => instead of
the function keyword. There are other differences to be aware of when you write arrow functions,
and that’s what we’ll explore next.
Parentheses
Some arrow functions have parentheses around the parameters and others don't.

//Example with parentheses

const addNums = (num1, num2) => num1 + num2;

//Example without parentheses

const addTwo = num => num + 2;
As it turns out, the number of parameters an arrow function has determines whether or not we need
to include parentheses.

An arrow function with zero parameters requires parentheses.

const hello = () => "hello";
console.log(hello());
//Result: "hello"
An arrow function with one parameter does not require parentheses. In other words, parentheses
are optional.
const addTwo = num => num + 2;
So we can add parentheses to the above example and the arrow function still works.

const addTwo = (num) => num + 2;

console.log(addTwo(2));
//Result: 4
An arrow function with multiple parameters requires parentheses.
const addNums = (num1, num2) => num1 + num2;
console.log(addNums(1, 2));
//Result: 3
Arrow functions also support rest parameters and destructuring. Both features require
parentheses.
This is an example of an arrow function with a rest parameter.
const nums = (first, ...rest) => rest;
console.log(nums(1, 2, 3, 4));
//Result: [ 2, 3, 4 ]
And here’s one that uses destructuring.
const location = {
country: "Greece",
city: "Athens"
};

const travel = ({city}) => city;

console.log(travel(location));
//Result: "Athens"
To summarize: if there’s only one parameter—and you’re not using rest parameters or
destructuring—then parentheses are optional. Otherwise, be sure to include them.

The Function Body

Now that we’ve got the parentheses rules covered, let’s turn to the function body of an arrow
function.

An arrow function body can either have a “concise body” or “block body”. The body type
influences the syntax.
First, the “concise body” syntax.

const addTwo = a => a + 2;

The “concise body” syntax is just that: it’s concise! We don’t use the return keyword or curly
brackets.
If you have a one-line arrow function (like the example above), then the value is implicitly
returned. So you can omit the return keyword and the curly brackets.
Now let’s look at “block body” syntax.

const addTwo = a => {

const total = a + 2;
return total;
}
Notice that we use both curly brackets and the return keyword in the above example.
You normally see this syntax when the body of the function is more than one line. And that’s a key
point: wrap the body of a multi-line arrow function in curly brackets and use the return keyword.
Objects and Arrow Functions
There’s one more syntax nuance to know about: wrap the function body in parentheses when you
want to return an object literal expression.
const f = () => ({
city:"Boston"
})
console.log(f().city)
Without the parentheses, we get an error.

const f = () => {
city:"Boston"
}
//Result: error
If you find the arrow function syntax a bit confusing, you’re not alone. It takes some time to get
familiar with it. But being aware of your options and requirements are steps in that direction.