LNCTE/CSE/V/CS504(A)

Internet and Web Technology

Unit III

lncte/cse/cs504(A)
Outline
•Introduction to javascript
•Objective of Javascript
•Core syntax and structure of Javascript
•Popular function

lncte/cse/cs504(A)
History of JavaScript
 JavaScript was initially developed by Brendan Eich as
part of the Netscape release 2.0.
 At that time it is named as LiveScript then name
change to JavaScript just to gain the hype since Java
language is very popular.
 There are strong similarities between the core syntaxes
of JavaScript and Java, C++.

lncte/cse/cs504(A)
History of JavaScript
 JavaScript became popular because of the rollover
effect used by most of the web developers that time.
 In competition Microsoft come with its own Scripting
language known as JScript in 1996.
 Then Netscape and Sun Microsystems went
approached an Organization known as
ECMA(European Computer manufacturers association
to produce a standard for JavaScript and as result of it
the ECMA-262 standard was released in the year 1999.
 ECMAScript 6 (released in June 2015) is the latest
official version of JavaScript
lncte/cse/cs504(A)
What is JavaScript?
 The growth of the WWW has resulted in a demand for
dynamic and interactive web sites.
 Browsers have limited functionality
 Text, images, tables, frames
 JavaScript introduces a quotient of interactivity
 Browser/page manipulation
 Reacting to user actions
 A type of scripting language which is
 Easy to learn
 Developed by Netscape
 Now a standard
www.ecma-international.org/publications/
standards/ECMA-262.HTM

lncte/cse/cs504(A)
JavaScript Allows Interactivity
 Improve appearance
 Especially graphics
 Visual feedback
 Site navigation
 Perform calculations
 Validation of input
 Other technologies
javascript.internet.com

lncte/cse/cs504(A)
How Does It Work?
 JavaScript is Embedded within a HTML page
 View source
 Executes on client
 Fast, no connection needed once loaded
 Simple programming statements combined with
HTML tags
 Interpreted by web browser
 No special tools required

lncte/cse/cs504(A)
Uses of JavaScript
 JavaScript can be used effectively for interaction with the
end user as it supports form elements such buttons,
textboxs, menus etc.
 Easily create pop-up alert, windows etc.
 JavaScript also support Event driven Programming.
 Whenever a user clicks the mouse or hits the keys on the
keyboard or even submit the form then these events and
responses to them can be handled by JavaScript.
 JavaScript mainly used in web development for Form
validation and input validation etc. This validity checking
is done at the client side only. The server does not have to
waste time in validity checking and hence improve Client
server communication.

lncte/cse/cs504(A)
JavaScript Versions
 JavaScript 1.0
 Supported by Netscape 2.0 and IE 3.0
 JavaScript 1.1
 Supported by Netscape 3.0 and IE 4.0
 JavaScript 1.2
 Supported by Netscape 4.0 and IE 4.0
 JavaScript 1.3
 Supported by Netscape 4.5 and IE 5.0
 JavaScript 1.5
 Supported by Netscape 6.0 and IE 5.5 and later
lncte/cse/cs504(A)
The Future of JavaScript
 ECMA standard brings JavaScript and Jscript
together.
 ECMA - An International industry association dedicated
to standardize information and communication systems.
 Both Netscape and Microsoft have pledged that
they will support and develop JavaScript in the
future.
 It is future-proof, and it is not going to disappear
in the near future. 

lncte/cse/cs504(A)
JavaScript three parts
 Core: It includes operators, expressions, statements
and subprograms.
 Client-side: It is a collection of objects using which one
can have control over the browser and user-browser
interaction is possible.
 Server-side: It is a collection of objects using which
one can access the database on the server.

lncte/cse/cs504(A)
 Difference between JavaScript and
Java JavaScript Java
JavaScript is a scripting language Java is a Programming language

JavaScript is not an object oriented Java is an object oriented

Programming language Programming language

No need to declare data types Data types must be declared

Code is embedded in HTML Code is not integrated in HTML

Limited by the browser functionality Java applications are standalone

lncte/cse/cs504(A)
 A Simple Script
<html>
<head> <title>First JavaScript Page</title> </head>
<body>
<h1>First JavaScript Page</h1>
<script type="text/javascript">
<!--
document.write("<hr>");
document.write("Hello World Wide Web");
document.write("<hr>");
-->
</script>
</body>
</html>

lncte/cse/cs504(A)
Embedding JavaScript
<html>
<head>
<title>First JavaScript Program</title>
</head>
<body>
<script language=“JavaScript” src=“your_source_file.js”></script>
</body>
</html>

 A <script> tag can be placed either within the

<head> or <body> tag of an HTML document.

lncte/cse/cs504(A)
JavaScript Source File
<script language=“JavaScript”
src=“your_source_file.js”></script>

 SRC – specifies the location of an external script

 LANGUAGE – specifies the scripting language of the
script.

lncte/cse/cs504(A)
Need for a source file
 If the JavaScript code is fairly short, you are
recommended to include the code in the HTML
document.
 To add clarity to an HTML document.
 To share JavaScript code across multiple HTML
documents.
 To help you hide your JavaScript code.
 Spent lot of time for JavaScript coding.
 Viewer can only see the location of the source file but
not the contents.

lncte/cse/cs504(A)
Using the alert() Method
<head>
<script language=“JavaScript”>
alert(“An alert triggered by JavaScript”);
</script>
</head>

 It is the easiest methods to use amongst

alert(), prompt() and confirm().
 You can use it to display textual information
to the user (simple and concise).
 The user can simply click “OK” to close it.
WT kirtiraj 17
Using the confirm() Method
<head>
<script language=“JavaScript”>
confirm(“Are you happy with the class?”);
</script>
</head>

 This box is used to give the user a choice either

OK or Cancel.
 It is very similar to the “alert()” method.
 You can also put your message in the method.

WT kirtiraj 18
Using the prompt() Method
<head>
<script language=“JavaScript”>
prompt(“What is your student id number?”);
prompt(“What is your name?”,”No name”);
</script>
</head>

 This is the only one that allows the user to

type in his own response to the specific
question.
 You can give a default value to avoid
displaying “undefined”.
WT kirtiraj 19
Three methods
<script language="JavaScript">
alert("This is an Alert method");
confirm("Are you OK?");
prompt("What is your name?");
prompt("How old are you?","20");
</script>

WT kirtiraj 20
Function of JavaScript with Display
Possibilities

JavaScript can "display" data in different ways:

 Writing into an alert box, using window.alert().
 Writing into the HTML output using
document.write().
 Writing into an HTML element, using innerHTML.
Using window.alert() function
Example
You can use an alert box to display data:
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
Using document.write() function
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
innerHTML Function
 To access an HTML element, JavaScript can use the
document.getElementById(id) method.
 The innerHTML property defines the HTML content.
 The id attribute defines the HTML element.
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>