Java Script
AN INTRODUCTION
What is JavaScript?
JavaScript was designed to add interactivity to HTML
pages
JavaScript is a scripting language
A scripting language is a lightweight programming
language
JavaScript is usually embedded directly into HTML pages
JavaScript is an interpreted language (means that scripts
execute without preliminary compilation)
Everyone can use JavaScript without purchasing a license
Introduction to Java Script
It Introduce Client-Side scripting which makes web page
more dynamic and interactive.
Alter a web page in response to user actions.
React to user events.
Capturing user inputs is typically done through a form –
need for client side form validation.
JavaScript is not Java.
– Developed by Netscape, not Sun.
– Only executed in a browser.
– Is not a full-featured programming language.
– However, the syntax is similar.
Unlike Java, which needs compilation; JavaScript is
dynamic and is interpreted in run-time.
Java script characteristics
Javascript is a scripting language
Scripting languages provide easy to access functionality
Javascript syntax is similar to “C“
Javascript is object based and not object oriented
Javascript doesn’t allow inheritance and sub classing
It is object based in that it depends on a collection of built-in objects for
functionality
You can also create your own objects
Javascript is event driven
Javascript is platform independent
Designed to be embedded within HTML
Run by popular browsers
Javascript enables quick development
Why Java Script?
Interpreted language
Can be embedded in HTML file or can be
included as an external file
Easy to learn
Quick development
Designed for simple, small programs
Performance
Procedural capabilities
Event handling
Debugging support
Platform independence/Architecture neutrality
Differences (JavaScript is not java)
Java was developed by Sun Microsystems while JavaScript was
developed by Netscape.
JavaScript is a high-level scripting language whereas Java is an
Object Oriented Programming language.
JavaScript is easy to learn and use whereas Java is comparatively
difficult.
In case of Java programming language the code is first written and
then compiled. In JavaScript the script can be executed without any
compilation.
JavaScript as conveyed can be directly embedded or placed in HTML
but it is not possible in case of Java. One cannot write Java code
directly into HTML.
Capturing user input
Web site interactivity starts from being able to capture the user input
<FORM> tag can be used in HTML to create a user input form
The HTML objects used in HTML form creation are Text, TextArea,
Radio Buttons, Push Buttons, Check Boxes and so on
These can be passed as values to the type attribute of <INPUT> tag
Once the form is coded, Javascript code can be embedded to perform
input validation. Javascript code can appropriately handle errors in
input
Once the input form is submitted to the server, the code on the server
processes it further and sends back a HTML document, that may be
dynamically generated
The HTML <script> tag is used to insert a JavaScript into an HTML
page.
Simple Program
<html> Scripting language
Type of the file
<head><title>My Java Script-page</title>
<script type="text/javascript">
<!--
document.write("Welcome to JavaScript World");
// -->
</script>
</head>
<body></body>
</html>
Note : Comment (<!-- -->) hide from older web browsers which do not support scripting)
Steps to write java script
Insert javascript command between <script
type="text/javascript"> and </script>
JavaScript-lines ends with a semi-colon. (optional)
Two locations for JavaScript serves different purposes
(internal)
JavaScript in the head element will react to user input and be called
from other locations (advisable)
JavaScript in the body element will be executed once as the page is
loaded
Call the script, using the "src" attribute, from any of your
pages. <script src=“hello.js"></script> The external script
cannot contain the <script> tag. (External).
Capital letters are different from non-capital letters.
document.write
Prints string on the web page
document.write(”String”);
Example
<script type="text/javascript">
document.write("WOW!!!");
</script>
Not only String , but HTML tags can include in “”
Example
<script type="text/javascript">
document.write("<h1>Printing Line with h1 tag inside js</h1>");
</script>
Can insert special characters (like " ' ; &) with the backslash
<script type="text/javascript">
document.write("<h1 style= \"color:red\"> Printing line with red color
inside js </h1>");
</script>
Windows dialog boxes using <alert>
Dialogs typically display important messages to users
browsing the web page.
It pop-up on the screen to grab the users attention.
A predefined dialog <alert> called alert dialog is used for
dialog boxes.
alert is a method of windows object.
Example
<script type="text/javascript">
alert("Hello Java Script");
document.write("Welcome to JavaScript World");
</script>
Note : Dialogs displays plain text
They do not render XHTML
Windows dialog boxes using confirm
box
The confirm box is a box that pops up with both an
OK and a Cancel button. The confirm box is used
to verify acceptance from the user. If the user
accepts, then the user presses the OK button and
the confirm box returns with a true value. If the
user rejects with the Cancel button, then the
confirm box returns false value.
General syntax for a confirm box is
confirm (“textmessage”)
Example for confirm box
<html> The confirm box pops up with the
message:
<body>
<script type="text/javascript"> Wish to accept or Cancel
if (confirm("Wish to accept or Cancel"))
{ Showing two buttons (OK and Cancel)
alert ("True value returned") that the user can choose from. If the
} user presses OK in the confirm box then
the value returned would be true,
else
executing the if block of statements. This
{ results in the alert box popping up with
alert ("False value returned") the message.
}
</script> True value returned.
</body>
</html> If the user presses the Cancel button in
the confirm box then the value returned
would be false, executing the else block
of statements. This results in the alert
box popping up with the message
False value returned.
Dynamic web page using <prompt>
Obtaining user input with prompt dialogs.
This allows user to input a value that script can use.
<html>
<head><title>My Java Script-page</title></head>
<script type="text/javascript">
var name;
name=prompt("Enter your name : ","name");
document.writeln("Hello "+name);
</script>
<body>
</body>
</html>
JavaScript data types & variables
JavaScript has five primitive data types
string : "foo" 'howdy do' "I said hi'." ""
number : 12 3.14159 1.5E6
Boolean : true false
undefined
null
assignments are as in C++/Java
message = “hello";
<html>
<head>
pi = 3.14159;
<title>Data Types and Variables</title>
</head> variable names are sequences of letters,
<body> digits, and underscores: start with a letter
<script type="text/javascript">
x = 1024;
document.write("<p>x = " + x + "</p>"); variables names are case-sensitive
x = "foobar";
document.write("<p>x = " + x + "</p>");
you don't have to declare variables, will
</script> be created the first time used
</body>
</html> variables are loosely typed, can assign
different types of values
Variables
Use var for creating variable in javascript.
Variable can contain any type of data, from string to
Boolean.
The variable name cannot be “reserved word” and first
char must be alphabetic letter or underscore.
Note : day ,Day,DAY and dAy ,would all be
different. (Case Sensitive).
Untyped!
Example:
var foo;
Can be created automatically by assigning a value:
foo=1; blah="Hi Dave";
Other Primitive Types
Null (trivial type)
A single value, null
null is a reserved word
A variable that is used but has not been declared
nor been assigned a value has a null value
Using a null value usually causes an error
Undefined (trivial type)
A single value, undefined
However, undefined is not, itself, a reserved word
The value of a variable that is declared but not
assigned a value
Java operators
standard Java operators are provided in JavaScript (same as
C++)
+, -, *, /, %, ++, --, …
==, !=, <, >, <=, >=
&&, ||, !
Simple program to add two numbers using
java script
Program Explanation
parseInt function converts it string argument to an integer values.
User can type anything in the text field of prompt dialog.
If user types non integer value or clicks Cancel button, a runtime logic
error will occur, and sum of the two values will appear in the document as
NaN (Not a Number).
Exercise (10 mins)
Write a Javascript to multiply three numbers and print the
result on the web page along with numbers.
