JavaScript

Introduction to Dynamic Websites Using JavaScript

Section-1: Introduction to JavaScript

Section-2: Data Types and Variables

Section-3: Operators

Section-4: Dialog Boxes

Section-5: Decision making using if and switch

Section-6: Looping Structure

1. History

History JavaScript was developed in 1995 by Brendan Eich, at Netscape, and first released with
Netscape 2 early in 1996. It was initially called Live Script, but was renamed JavaScript to capitalize
the popularity of sun Microsystems’s Java language. The basic purpose of JavaScript language was to
enable web authors to design interactive sites. JavaScript can interact with HTML source code,
enabling web authors to modify their sites with dynamic contents. JavaScript is supported by a
number of software companies and is an open language that anyone can use without purchasing a
license. JavaScript language is interpreted and executed by the browser.

1.1 What is JavaScript?

JavaScript is a dynamic computer programming language. It is lightweight and most commonly used
as a part of web pages, whose implementations allow client-side script to interact with the user and
make dynamic pages. It is an interpreted programming language with object-oriented capabilities.

 It was originally implemented as a part of web browser so that client-side scripts could interact
with the user, control the browser, communicate asynchronously, and alter the contents of the
document.

 It is tightly integrated with HTML code but executed by the JavaScript Interpreter built into the
browser.

 JavaScript contains a core set of objects such as array, date, Math, and a core set of language
elements like operators, control structures, and statements.
Standards
In November 1996, Netscape announced JavaScript to European computer Manufacturers
association (ECMA) for consideration as on industry standard and subsequent work resulted in the
standardized version named ECMAScript. ECMA is an international standard organization for
information and communication system

.  In June 1997, ECMA International published the first edition of ECMA-262 specification

A year later, in June 1998, some modifications were made to adapt it to the ISO/IEC-16262 standard,
and the second edition was released

.  The third edition of ecMa-262 is the version most browsers are currently using

 Fourth edition of ECMAScript standard was not released and does not exist in practice

Fifth edition of the ECMAScript standard was released in December 2009.

 The current edition of ECMAScript standard is 5.1 and it was released in June 2011. This way,
JavaScript has become one of the most popular programming language on the web. JavaScript was
formalized in the ECMAScript language standard and primarily used as a part of web browsers
(client-side JavaScript). This enables programmer to access the computational objects within a host
environment. JavaScript gained widespread success instantly/quickly as a client-side scripting
language for web pages. Microsoft introduced JavaScript support in its own web browser, internet
explorer, and inversion 3.0, released in August 1996

Features
JavaScript can handle simple as well as complex tasks that makes it a robust language. it is also a
good language for web designers & learners who wish to learn computer programming as it supports
both Object Oriented and function-oriented concepts and to use it, you just need a browser and a
text editor. Some specific features of JavaScript are discussed below.

1. Browser Support: all browsers accept JavaScript as a scripting language and provide integrated
support for it. For example, to access flash content, you need to install flash and plug-in in your
browser. But to use JavaScript, you don’t have to use any plug-in at all.

2. Client and Server-Side Support: JavaScript can be used on client side as well as on server side:
JavaScript has access to Document Object Model (DOM) of the browser. You can change the
structure of web pages at a runtime. Thus, JavaScript can be used to add different effects to web
pages. On the other hand, JavaScript can be used on the server side as well.

3. Functional Programming Language: in JavaScript, a function can be assigned to variables just like
any other data types. A function can accept another function as a parameter and can also return a
function. This provides you the ability to code in functional programming style.

4. Support for Objects: JavaScript is an object-oriented language. However, the way JavaScript
handles objects and inheritance is a bit different from the conventional object-oriented
programming languages like c++/ Java. JavaScript supports most of the object-oriented concepts
while being simple to learn and use.

5. Run-Time Environment: JavaScript typically relies through upon a run-time environment (e.g., in a
web browser) to provide objects and methods by which scripts can interact with the outside world.
In fact, it relies upon the environment to provide the ability to include/import scripts (e.g. HTML

Applications/Uses of JavaScript
1. Developing Multimedia Applications: the users can use JavaScript to add multimedia elements.
With JavaScript you can show, hide, change, resize images and create images rollovers. you can
create scrolling text across the status bar, thus making multimedia applications more interactive.

2. Create Pages dynamically: based on the user’s choice, JavaScript can generate pages that are
customized by the user.

3. Interact with the user: JavaScript can do some processing of forms and can validate user input
when the user submits the form.

4. JavaScript objects are similar to dictionaries: in JavaScript, objects are just a collection of name-
value pairs. JavaScript objects are considered as a dictionary with string keys. The users can get and
set the properties of an object using either the familiar “.” (Dot) operator, or the “()” operator, which
is typically used when dealing with a dictionary.

5. Extension: JavaScript can be extended for different purposes by supplementing it with additional
objects.

6. Client-Side JavaScript: It extends the core language by supplying objects to control a browser
(navigator or another web browser) and its document object Model (DOM). For example, client-side
extensions allow an application to place elements on an HTML form and respond to the user events
such as mouse clicks, form input and page navigation.

7. Server-Side JavaScript: extends the core language by supplying objects relevant to running
JavaScript on a server. For example, server-side extensions allow an application to communicate
with a relational database, which provide continuity of information from one invocation to another
of the application, or perform file manipulations on a server.
 1.2 Advantages of JavaScript
1. JavaScript gives HTML designers a programming tool with a very simple syntax. Sothat the
designers can put small “snippets” of code into their HTML pages.

2. JavaScript can put dynamic text into an HTML page.

3. JavaScript can react to events. For eg. a JavaScript can be set to execute when something
happens, like when a page has finished loading or when a user clicks on an HTML element.

4. JavaScript can read and change the contents of an HTML element.

5. JavaScript can be used to validate data of the form before it is submitted to a server. It saves the
server from extra processing.

6. JavaScript can be used to create cookies. For example, a JavaScript can be used to store and
retrieve information from the visitor’s computer.

7. JavaScript is widely used for developing modern web applications with the capabilities of desktop
applications.

8. JavaScript supports the best practices for code organization, modularization, and reuse.

9. Using JavaScript, you can divide your application into different layers of responsibility.

10. JavaScript build efficient, self-describing hypermedia Application Programming interface (APIs)
with node.js.

11. JavaScript can be used to test, integrate, and deploy software updates in rapid cycles.

12. JavaScript control resource access with user authentication and authorization.

Advantages of JavaScript
 Speed - JavaScript tends to be very fast because it is often run immediately within the client's
browser. So long as it doesn't require outside resources, JavaScript isn't slowed down by calls to a
backend server. Also, major browsers all support JIT (just in time) compilation for JavaScript,
meaning that there's no need to compile the code before running it.
 Simplicity - JavaScript's syntax was inspired by Java's and is relatively easy to learn compared to
other popular languages like C++.
 Popularity - JavaScript is everywhere on the web, and with the advent of Node.js, is increasingly
used on the backend. There are countless resources to learn JavaScript. Both StackOverflow and
GitHub show an increasing amount of projects that use JavaScript, and the traction it's gained in
recent years is only expected to increase.
 Interoperability - Unlike PHP or other scripting languages, JavaScript can be inserted into any
web page. JavaScript can be used in many different kinds of applications because of support in
other languages like Pearl and PHP.
 Server Load - JavaScript is client-side, so it reduces the demand on servers overall, and simple
applications may not need a server at all.
 Rich interfaces - JavaScript can be used to create features like drag and drop and components
such as sliders, all of which greatly enhance the user interface and experience of a site.
 Versatility - There are many ways to use JavaScript through Node.js servers. If you were to
bootstrap Node.js with Express, use a document database like MongoDB, and use JavaScript on
the frontend for clients, it is possible to develop an entire JavaScript app from front to back using
only JavaScript.
 Updates - Since the advent of ECMAScript 5 (the scripting specification that JavaScript relies
on), ECMA International has been dedicated to updating JavaScript annually. So far, we have
received browser support for ES6 in 2017 and look forward to ES7 being supported in the future.


Disadvantages of JavaScript
 Client-Side Security - Since JavaScript code is executed on the client-side, bugs and oversights
can sometimes be exploited for malicious purposes. Because of this, some people choose to
disable JavaScript entirely.
 Browser Support - While server-side scripts always produce the same output, different browsers
sometimes interpret JavaScript code differently. These days the differences are minimal, and you
shouldn't have to worry about it as long as you test your script in all major browsers.

1.3 Basic tools for JavaScript Web application

A biggest advantage of the JavaScript is that there is no need to purchase any tool to develop the
JavaScript application. These tools are freely available and can be easily obtained. Development
Tools
 A simple text editor like window notepad is required to create the JavaScript code.
 An advance text editor can be used alternatively which can provide line numbering, search,
replace etc. functionality.
 A HTML editor is another tool which can edit the HTML source code and add the JavaScript code in
the web page. An example of HTML editor is Dreamweaver which has lots of features and drag and
drop facilities to make the task easy.
 Microsoft Visual Web Developer Express is a advance page editor which can coloring the important
JavaScript words and validate the code and load the page into web browser to view the changes or
contents.
Note: Although number of handy tools are available but it is advised for the beginners that write the
code by hand which helps you the fundamentals of the language and then you can attempt advance
logic by using other tools.

JavaScript role in Web Development

HTML Language is used to create web documents or web pages. JavaScript is embedded in the
HTML code. It is required to inform the browser about JavaScript code in the HTML code. One way
to do this is uses the tag your document. A Complete web page can be visualized as three separate
layers which allows the designer to concentrate on particular part and programmer can tweak the
code in JavaScript application. Following is the brief discussion of these layers:

1. Content: It contains the part which is seen by viewers and consist text, image and links which
enable the user to navigate through the different pages or whole website. HTML tags are used to
define the structure of the document to display which is seen by browser as a tree-like structure.
This document tree defines the hierarchical logic of the document for the DOM to create the
dynamic contents.
2. Presentation: This layer describes how document will appear. For example set the font color,
background image, border and alignment etc, comes under this layer. These activities can be done
either by using the HTML tags in the page or by using the cascading style sheet (CSS). Former is
complicated if we have to make the changes in many places in the page or pages while same CSS can
be used with the thousands of pages. A combination of CSS, JavaScript and DOM is called DHTML
(Dynamic HTML).
3. Behavior: This layer describes the action that can be performed by the page. A user can interact
with the web page by using the individual keystroke, moving, rolling or clicking the mouse,
submitting form input etc. JavaScript makes it easy by handling the events that happened on the
web page and show the response accordingly
Web Browser:
A browser is an application program with a graphical user interface for displaying HTML files, used
to navigate the World Wide Web which provides a way to look at and interact with all the
information on the World Wide Web.
The two most popular browsers are Microsoft internet explorer and Firefox. Other major browsers
include google chrome, apple safari and opera. JavaScript is integrated into the browsing
environment, which can get information about the browser and HTML pages, and can modify this
information to, thus changing how things are presented on your screen.
Enabling JavaScript in Browsers
All the modern browsers are available with built-in support for JavaScript. However, sometimes you
may need to enable or disable this support manually. Here we explain the procedure of enabling and
disabling the JavaScript support in different browser such as internet explorer, Firefox, chrome, and
opera. Setting JavaScript in internet explorer following are the simple steps to turn on or turn off
JavaScript in your internet explorer
1. Select tools → internet options from the menu.
2. Select Security tab from the dialog box.
3. Click the Custom level button
. 4. Scroll down till you find Scripting option.
5. Select Enable radio button under active scripting.
6. Finally click oK to disable JavaScript support in your internet explorer, you need to select disable
radio button under active scripting.
Setting JavaScript in Firefox
Here are the steps to turn on or turn off JavaScript in Firefox:
1. Open a new tab → type about: config in the address bar.
2. Then you will find the warning dialog. Select i’ll be careful, i promise!
3. Then you will find the list of configure options in the browser.
4. In the search bar, type JavaScript enabled.
5. Now, you will find an option to enable or disable JavaScript by rightclicking on the value of that
option → select toggle. If JavaScript enabled is true; it converts to false by clicking toggle. If
JavaScript is disabled; it gets enabled by clicking toggle.

Setting JavaScript in Chrome

Here are the steps to turn on or off JavaScript in chrome:
1. Click the chrome menu at the top right corner of your browser.
2. Select Settings.
3. Click Show advanced settings at the end of the page.
4. Under the Privacy section, click the content settings button.
5. In the “JavaScript” section, select “do not allow any site to run JavaScript” or “allow all sites to
run JavaScript (recommended)”

1.4 Basic Structure of JavaScript program

Client-side JavaScript code is embedded in HTML code between the either<head></head>tag
or <body></body> tag surrounded by<script></script> tag. If code contains the object,
functions definitions then it is preferred to add the code between the<head></head>< tags.
If code have to place one or multiple scripts in a document then <body></body>tag is used.

Javascript Syntax:

<!DOCTYPE>

<html>

<head><title></title></head>

<body >

<script type="text/javascript">

Add javascript code here

</script>

</body>

</html>

JavaScript syntax is the set of rules that define a structured JavaScript.

Here are some tips to remember when writing your first JavaScript program.

Case Sensitivity: JavaScript is case sensitive i.e., upper case letter and lower-case letter has
different meaning. For example, the word “alert” has a lower case “a”. so, if we type the wordwith
an uppercase “a” then JavaScript will show an error and the alert box will not be displayed

. Whitespace & Semi Colon: JavaScript ignores spaces, tabs, and newlines that appear in
JavaScript programs. You can use spaces, tabs, and newlines freely in your program and you are free
to format and indent the programs in a neat and consistent way that makes the code easy to read
and understand.
The following code could be written without semicolons.

<script language=“javascript” type=“text/javascript”>

<!--

var1 = 10

var2 = 20

//-->

</script>

But when formatted in a single line as follows, you must use semicolons –

<script language=“javascript” type=“text/javascript”>

<!--

var1 = 10; var2 = 20;

//-->

</script>

Example explained
Whitespaces (usually spaces & tabs) are used for the better understanding & read ability of the code
to the user. Therefore, it is a good programming practice to leave spaces and write code legibly. a
semicolon is a line or statement terminator in JavaScript. It is optional and you may skip to use
semicolons in your program. JavaScript will not show an error unless two statements are merged
into a single line

Comments
Comments, written by preceded with two forward slashes are used to improve the Comments

Comments, written by preceded with two forward slashes are used to improve the readability of
program and will be ignored by the interpreter. There are two kind of comments in JavaScript:
Single line and Multi line comments.

1. single line comment begins with two forward slashes // this is a single line comment

2. Multiline comments begin with /* and ends with */

e.g., /* this is a multiline comment and may continue across multiple lines */

Comments are ignored by the interpreter and are not executed. Comments
Play an important role in helping the programmer to understand complex logic
While writing JavaScript code.
Line Break:
line breaks are ignored except when it is used within a statement.
The write () and writeln() Methods
A HTML document which contains the script is termed as current document and defines as a
document object. When document object is referred in the document then object name is appended
with a dot and the name of the method which manipulate the document object. Method names are
generally following the parentheses and hold the arguments.

For example: Documentobect.methodname(argument)

The write()Method
This method is used to write a string value to the page. Following code write the “Hello JavaScript” in
the body HTML document.

<body>

<script type="text/javascript">

document.write("Hello JavaScript");

</script>

</body>

The writeln() Method

This method is same as the write() method with one exception that is adds a JavaScript
newline character (\n) at the end of the statement. However, it does not affect the appearance
of page. Following code shows the concept which print the “Hello JavaScript” in two lines.

The writeln() Method

This method is same as the write() method with one exception that is adds a
JavaScript newline character (\n) at the end of the statement. However, it does not
Affect the appearance of page.

Following code shows the concept which print the“Hello JavaScript” in two lines.

<body>
<script type="text/javascript">
document.writeln("Hello");
document.writeln(" JavaScript");
</script></body>
1.5 Using internal and external JavaScript files HTML

HTML <Script> Tag

<script> tags tells the browser about beginning and ending of the scripting language
in the HTML document. It is looks like as following:

<script>

JavaScript code here

</script>

Following are some common attribute of

src: It defines the address of the external file which can be absolute or relative URL

type: Define the MIME-type of the script.

charset: Define the character encoding of the external JavaScript file.

Here are four different place in the HTML document where scripts can be
used.
1. Body of the page: In this case when page is loaded in the browser then output is displayed as the
part of the HTML document.

2. Header of the page: In this case code is written in the form of function (groups of JavaScript
statement but treated as single unit) and referred in the other script in the same page.

3. Within HTML tag: When JavaScript is used as a event handler (will be discussed later) then it work
with HTML elements.

4. As external file: In this case JavaScript code is written in another file having .js extension. This file
is included in a script tag by specifying the file name.

Writing first Java Program JavaScript is written in the same way as HTML, in a text-editor like
notepad. JavaScript implementation is quite similar to CSS (cascading style sheets). the user can
link it to the outside files (with the file extension .js), or write blocks of code into their HTML
documents with the

<html>

<head>

<title>My JavaScript Page</title>

</head>
<body>

<script type=“text/javascript”>

document.write("Hello"); (“Welcome to my world!!!”);

</script>

</body>

</html>

output: Welcome to my world!!!

Example explained How to save and run your first program in JavaScript

1. open any editor such as notepad and write the program

2. save the program with .html extension in a proper folder or subfolder on a drive like
c:\Javascript\myprograms.

3. open the web browser like internet explorer or Mozilla

. Open the file you have created and saved in step 2, and execute the program.

For eg. execute C:\JavaScript\firstprogram.html Where C is the drive, JavaScript is the folder name
and firstprogram.html is the name of program which is saved in the JavaScript folder.

Using External JavaScript File

External scripts are supported by all browser. To use external script just specify the filename in the

<script language=”JavaScript” type=”text/javascript” src=”filename.js”>

</script>

You can create .js file using any text editor which contains one or more JavaScript commands. Don’t
use <script> tag in this file. Then add the file in the HTML document in the script tag as shown above.

Following are the steps to add the external file in the HTML document.
1. Open the notepad editor and type following commands
2. document.write(“Hello JavaScript”);
3. Save the file with the name demo.js in the same folder where HTML
document is saved in which this file will be embedded.

4. Now open the new file in the notepad editor and add the following code
<html>
 <head>

<script type="text/javascript" src="demo.js"></script>

</head>

<body>

<p>Welcome to JavaScript</p>

</body>

</html>

Save the file as msg.html in the same folder where .js file is saved. . Execute the
msg.html in the browser.

Answer the following questions

Q.1: What is an editor?

Q.2: What do you understand by a web browser?

Q.3: What are the major types of browser available today?

Q.4: What is the advantage of using JavaScript over HTML?

Q.5: What are the steps needed to create and run a simple program using

JavaScript?

Q. 6: Which attribute of the <script> tag helps you include an external JavaScript

file?

Q. 7: What are the three ways in which JavaScript can be included?

Q. 8: JavaScript is “interpreted” - what does this imply?

Q. 9: explain the role of case sensitivity in JavaScript.

Q. 10: how to use multiple line comments in JavaScript.

Q. 11. Fill in the blanks
(a) A file which ends with .js is an.................................

(b) Js programs are included within................................ & ................................

of a HTML document.

(c) Generally HTML is preferred for creating................................ While CSS is

Preferred for................................ and JavaScript is preferred for .................

...............

(d) JavaScript Syntax is a set of............................. That define a structured

JavaScript.

(e) Comments are used to................................ in JavaScript program.