2. Java Script
● JavaScript (JS) is an interpreted , untyped
computer programming language.
● It is a scripting language produced by
Netscape, was originally called Live Script
(later renamed to Java Script) and was first
used in Netscape browsers for use within HTML
Web pages.
3. Why Java Script?
● HTML to specify the content of web pages,
● CSS to specify the presentation of those pages,
● JavaScript to specify their behavior.
4. DHTML – Dynamic HTML
● DHTML is a term used to characterize the
dynamic effects that arise from using HTML,
CSS, and JavaScript on a webpage
5. Names and Versions
● Netscape(now Mozilla) submitted the Java Script language
for standardization to ECMA (European Computer
Manufacturer’s Association)
● Due to trademark issues, cthe standardized version of the
language is called “ECMAScript”
● Again due to trademark reasons, Microsoft’s version of the
language is formally known as “JScript”
● Most supported version ECMA Script 3(ES3) and Latest
version is ECMA Script 5(ES 5), and corresponding Mozilla’s
Java Script version 1.5 is basically ECMAScript 3
6. Core Java Script
● JavaScript programs are written using the
Unicode character set and is Case Sensitive.
● Core JavaScript contains a core set of objects,
such as Array, Date, and Math, and a core set of
language elements such as operators, control
structures, and statements.
● Core JavaScript can be extended for a variety of
purposes by supplementing it with additional
objects. Eg: Client-side JS, Server-Side JS.
7. Client-Side and Server-Side
● Client-side JavaScript extends the core
language by supplying objects to control a
browser (Navigator or another web browser)
and its Document Object Model (DOM).
● Server-side JavaScript (Node JS)extends the
core language by supplying objects relevant to
running JavaScript on a server.
8. JavaScript and Java
● JavaScript is an object-based language based on prototypes, rather than
being class-based like Java.
● Class-based object-oriented languages, involve the use of classes and
instances, but a prototype-based language, such as JavaScript, does not
make this distinction: it simply has objects.
– A prototype-based language has a prototypical object, used as a template from
which to get the initial properties for a new object.
– Any object can specify its own properties, when created or at run time.
– Any object can be associated as the prototype for another object, allowing
the second object to share the first object's properties.
9. Java Script Syntax
● A JavaScript consists of JavaScript statements
that are placed within the <script>... </script>
HTML tags in a web page.
● <script language="javascript"
type="text/javascript">
– JavaScript code
● </script>
11. Including Java Script in a Web page
● There are four standard ways to include script
in an (X)HTML document:
– Within the <script> element
– As a linked file via the src attribute of the <script>
element
– Within an XHTML event handler attribute such as
onclick
– Via the pseudo-URL javascript: syntax referenced
by a link
12. Comments
● JavaScript supports two styles of comments.
● Single Line Comment - // comments...
● Multiline Comment - /* comments in multiple lines */ but may not
be nested
// This is a single-line comment.
/* This is also a comment */ // And here is another.
/*
* This is yet another comment.
* It has multiple lines.
*/
13. Optional Semicolons
● Like many programming languages, JavaScript
uses the semi-colon (;) to separate statements
from each other
● Semicolon can be omitted between two
statements if
– those statements are written on separate lines.
– at the end of a program or
– if the next token in the program is a closing curly
brace }
14. Types
● The kinds of values that can be represented
and manipulated in a programming language
are known as types.
● JavaScript types can be divided into two
categories:
– Primitive types
– Object types.
15. Primitive Types
● JavaScript’s primitive types include
– Number
– String
– Boolean
● Special JavaScript values null and undefined are
primitive values, but they are not numbers, strings,
or booleans.
● Each value is considered to be the sole member of
its own special type.
16. Object Types
● Any JavaScript value that is not a number, a string, a
boolean, or null or undefined is an object
● An object (that is, a member of the type object) is a
collection of properties where each property has a
name and a value (either a primitive value, such as a
number or string, or an object).
● Object types in Java Script - objects, arrays, and
functions
17. Variables
● A variable defines a symbolic name for a value and allows
the value to be referred to by name.
● Variables are declared with the var keyword.
● JavaScript variables are untyped: we can assign a value of
any type to a variable, and we can later assign a value of a
different type to the same variable.
● JavaScript uses lexical scoping.
– Global Variables - Variables declared outside of a function visible
everywhere in JS
– Function Scope - Variables declared inside a function and visible
only to code that appears inside that function
18. Identifiers and Reserved Words
● An identifier is used to name variables and
functions and to provide labels for certain loops
in JavaScript code
● A JavaScript identifier must begin with a letter,
an underscore (_), or a dollar sign ($)
● Java Script reserved keywords cannot be used
as identifiers.
19. Java Script Reserved Keywords
●
break
●
case
●
catch
●
continue
●
debugger
●
default
●
delete
●
do
●
else
●
false
●
finally
●
for
●
return
●
switch
●
this
●
throw
●
true
●
Try
● function
● if
● in
● instanceof
● new
● class
● const
● enum
● export
● extends
● import
● super
●
void
● while
● With
●
Null
●
typeof
●
var
21. ●
ECMAScript 3 reserved all the keywords
of the Java language:
●
static
● super
●
synchronized
●
throws
● class
●
const
● abstract
●
boolean
●
byte
●
char
●
double
●
enum
●
export
●
extends
●
goto
●
implements
●
import
●
int
●
native
●
package
●
private
●
protected
Java Script Reserved Keywords
● final
● float
● interface
● long
● public
● short
● transient
● volatile
22. Numbers
● Java-Script represents numbers using the 64-bit floating-point
format defined by the IEEE 754 standard - [digits][.digits][(E|e)
[(+|-)]digits]
● JavaScript programs work with numbers using the arithmetic
operators that the language provides.
● These include + for addition, - for subtraction, * for
multiplication, / for division, and % for modulo (remainder after
division).
● Infinity (Divide by zero)
● NaN(zero divided by zero, divide infinity by infinity, square root
of a negative number, use of arithmetic operators with
nonnumeric operands that cannot be converted to numbers)
28. Miscellaneous Operator
● Conditional Operator (?:)
– (If true)? X : Y
● typeof Operator
– The typeof is a unary operator that is placed before
its single operand, which can be of any type.
– Its value is a string indicating the data type of the
operand.
29. Control Statements
● if statement
if (expression){
Statement(s) to be executed if expression is true
}
● if...else statement
if (expression){
Statement(s) to be executed if expression is true
}else{
Statement(s) to be executed if expression is false
}
30. Control Statements
● if...else if... statement
if (expression 1){
Statement(s) to be executed
}else if (expression 2){
Statement(s) to be executed
}else if (expression 3){
Statement(s) to be executed
}else{
Statement(s) to be executed
}
31. Control Statements
● switch statement
switch (expression) {
case condition 1: statement(s)
break;
case condition 2: statement(s)
break;
...
case condition n: statement(s)
break;
default: statement(s)
}
32. Control Statements
● while Loop
while (expression){
Statement(s) to be executed if expression is true
}
● do...while Loop
do{
Statement(s) to be executed;
} while (expression);
33. Control Statements
● for Loop
for (initialization; test condition; iteration statement){
Statement(s) to be executed if test condition is true
}
● for...in Loop
for (variablename in object){
statement or block to execute
}
34. Control Statements
● break Statement
is used to exit a loop early, breaking out of the
enclosing curly braces
● continue Statement
The continue statement tells the interpreter to
immediately start the next iteration of the loop and
skip remaining code block.
35. Function Definition
● Function in JavaScript is by using the function keyword, followed by
a unique function name, a list of parameters (that might be empty),
and a statement block surrounded by curly braces.
<script type="text/javascript">
<!--
function functionname(parameter-list)
{
statements
}
//-->
</script>
37. Exceptions
● Exceptions can be handled with the common try/catch/finally block structure.
<script type="text/javascript">
<!--
try {
statementsToTry
} catch ( e ) {
catchStatements
} finally {
finallyStatements
}
//-->
</script>
38. Exceptions
<html> <head>
<script type="text/javascript">
<!--
function myFunc() {
var a = 100;
try {
alert("Value of variable a is : " + a );
}catch ( e ) {
alert("Error: " + e.description );
}finally {
alert("Finally block will always
execute!" );
} }
//-->
</script>
</head>
<body>
<p>Click the following to see the
result:</p>
<form>
<input type="button" value="Click
Me" onclick="myFunc();" />
</form>
</body>
</html>
39. Throw Statement
● throw statement is used to
raise built-in exceptions or
customized exceptions
<html> <head>
<script type="text/javascript">
<!--
function myFunc() {
var a = 100;
var b = 0;
try{
if ( b == 0 ){
throw( "Divide by zero error." );
}else{
var c = a / b; }
}catch ( e ) {
alert("Error: " + e );
} } //-->
</script>
</head>
<body>
<p>Click the following to see the
result:</p>
<form>
<input type="button" value="Click Me"
onclick="myFunc();" />
</form>
</body>
</html>
40. Alert Dialog Box
● An alert dialog box is mostly used to give a
warning message to the users.
<script type="text/javascript">
<!--
alert("Warning Message");
//-->
</script>
41. Confirmation Dialog Box
● A confirmation dialog box is mostly used to take user's consent on any
option.
● It displays a dialog box with two buttons: OK and Cancel.
<script type="text/javascript">
<!--
var retVal = confirm("Do you want to continue ?");
if( retVal == true ){
alert("User wants to continue!");
return true;
}else{
alert("User does not want to continue!");
return false;
}
//-->
</script>
42. Prompt Dialog Box
● To get user input
<script type="text/javascript">
<!--
var retVal = prompt("Enter your name : ", "your name
here");
alert("You have entered : " + retVal );
//-->
</script>
43. Page Re-direction
● To do a page redirect using JavaScript at client
side.
<script type="text/javascript">
<!--
window.location="http://www.newlocation.com";
//-->
</script>
44. Example
<script type="text/javascript">
<!--
var browsername=navigator.appName;
if( browsername == "Netscape" ) {
window.location="http://www.location.com/ns.htm";
}
else if ( browsername =="Microsoft Internet Explorer") {
window.location="http://www.location.com/ie.htm";
}
else {
window.location="http://www.location.com/other.htm";
}
//-->
</script>
45. SetTimeOut function
● setTimeout() is a built-in JavaScript function which can be used
to execute another function after a given time interval.
<script type="text/javascript">
<!--
function Redirect() {
window.location="http://www.newlocation.com";
}
document.write("You will be redirected to main page in 10 sec.");
setTimeout('Redirect()', 10000);
//-->
</script>
46. The void Keyword
● The void is an important keyword in JavaScript
which can be used as a unary operator that
appears before its single operand, which may
be of any type.
● This operator specifies an expression to be
evaluated without returning a value.
47. Page Printing
● JavaScript helps you to
implement this
functionality using print
function of window
object.
● The JavaScript print
function window.print()
will print the current web
page when executed.
● <head>
● <script type="text/javascript">
● <!--
● //-->
● </script>
● </head>
● <body>
● <form>
● <input type="button" value="Print"
onclick="window.print()" />
● </form>
● </body>
48. Cookies
● Creating Cookies
– The simplest way to create a cookie is to assign a string value to the
document.cookie object
– document.cookie = "key1=value1;key2=value2;expires=date";
● Reading Cookies
– The value of the document.cookie object is the cookie.
– The document.cookie string will keep a list of name=value pairs
separated by semicolons, where name is the name of a cookie and
value is its string value.
49. Global Object
● Global Object is a regular JavaScript object whose properties
are the globally defined symbols that are available to a
JavaScript program.
● In top-level code (JS code that is not part of a function) we can
use the JavaScript keyword this to refer to the global object:
var global = this; // /refer to the global object
● In client-side JavaScript, the Window object serves as the
global object.
● This global Window object has a self-referential window
property that can be used to refer to the global object.
