Jeevan Nagendra 1
Jeevan Nagendra 2
Jeevan Nagendra 3
Jeevan Nagendra 4
Jeevan Nagendra 5
JavaScript is not Java
• JavaScript has some features that resemble features in
Java:
– JavaScript has Objects and primitive data types
-- JavaScript has Events and event handlers
– Exception handling in JavaScript is almost the same
as in Java
• JavaScript has some features unlike anything in Java:
– Variable names are untyped: the type of a variable
depends on the value it is currently holding
– Objects and arrays are defined in quite a different
way
– JavaScript has with statements and a new kind of for
statement
Jeevan Nagendra 6
Jeevan Nagendra 7
Jeevan Nagendra 8
Jeevan Nagendra 9
Jeevan Nagendra 10
Comments
• Comments are as in C or Java:
– Between // and the end of the line
– Between /* and */
• Java’s javadoc comments, /** ... */, are treated just the
same as /* ... */ comments; they have no special
meaning in JavaScript
Jeevan Nagendra 11
Jeevan Nagendra 12
Jeevan Nagendra 13
Jeevan Nagendra 14
Jeevan Nagendra 15
Jeevan Nagendra 16
Jeevan Nagendra 17
Jeevan Nagendra 18
Jeevan Nagendra 19
Jeevan Nagendra 20
Jeevan Nagendra 21
Jeevan Nagendra 22
Jeevan Nagendra 23
Jeevan Nagendra 24
Jeevan Nagendra 25
Jeevan Nagendra 26
Jeevan Nagendra 27
Jeevan Nagendra 28
Jeevan Nagendra 29
Jeevan Nagendra 30
Jeevan Nagendra 31
Jeevan Nagendra 32
Jeevan Nagendra 33
Jeevan Nagendra 34
Jeevan Nagendra 35
Jeevan Nagendra 36
Jeevan Nagendra 37
Jeevan Nagendra 38
Jeevan Nagendra 39
Jeevan Nagendra 40
Jeevan Nagendra 41
Jeevan Nagendra 42
Functions & Objects
Jeevan Nagendra 43
Jeevan Nagendra 44
Jeevan Nagendra 45
Jeevan Nagendra 46
Jeevan Nagendra 47
<html>
<head>
<script language="javascript">
function add()
{
var a,b,c;
a=[Link];
b=[Link];
c=parseInt(a)+parseInt(b);
[Link]=c;
}
</script>
</head>
Jeevan Nagendra 48
<body>
<form name="calc">
enter text1:
<input type="text" name="val1" size=20><br>
enter text2:
<input type="text" name="val2" size=20><br>
<input type="button" value="SUBMIT"
onclick="add()"><br>
result :
<input type ="text" name="result"><br>
</form></body></html>
Jeevan Nagendra 49
• Find out factorial of a given number
without using Recursion
• Same function Using Recursion
• Maximum of 3 numbers using
Functions and also using predefined
function [Link]()
Jeevan Nagendra 50
Objects
• Objects have attributes and methods.
• Many pre-defined objects and object
types.
• Using objects follows the syntax of
Java:
[Link]
[Link]()
Jeevan Nagendra 51
The Math Object
• Access to mathematical functions and
constants.
• Constants: [Link]
• Methods: [Link]()
[Link](x), [Link](x)
[Link](x), [Link](x)
[Link](x), [Link](x)
[Link](x,y), [Link](x)
[Link](x,y), [Link](x),
[Link](x), [Link](x,y)
Jeevan Nagendra 52
Math object in use
// returns an integer between 1 and 6
function roll() {
var x = [Link]();
// convert to range [0,6.0)
x = x * 6;
// add 1 and convert to int
return parseInt(1+x );
}
[Link]("Roll is “ + roll() );
Jeevan Nagendra 53
The String Object
• Access to String functions
Methods:
var s1=“Information”,s2=“Technology”
charAt(index), Ex: [Link](2)
concat(string),Ex: [Link](s2)
slice(start,end), Ex: [Link](3,8)
Substr(start,length), Ex: [Link](1,4)
toLowerCase()Ex: [Link]()
toUpperCase()Ex: [Link]()
Jeevan Nagendra 54
The Date Object
• Access to Date functions
Methods:
var d= new Date()
getDate(); Ex: [Link]();
getDay(); getSeconds();
getFullYear(); getTime();
getHours(); getMonth();
getMilliseconds();getMinutes();
Jeevan Nagendra 55
Predefined Objects
• JavaScript also includes some
objects that are automatically
created for you (always available).
– document
– navigator
– window
Jeevan Nagendra 56
The document object
Methods:
• [Link]() like a print
statement – the output goes into the HTML
document.
[Link]("My title is" +
[Link]+ “URL is”
+[Link]); string concatenation!
Jeevan Nagendra 57
JavaScript Example
<HEAD>
<HEAD>
<TITLE>JavaScript
<TITLE>JavaScript isis Javalicious</TITLE>
Javalicious</TITLE>
</HEAD>
</HEAD>
<BODY>
<BODY>
<H3>I
<H3>I am
am aa web
web page
page and
and here
here is
is my
my
name:</H3>
name:</H3>
<SCRIPT>
<SCRIPT>
[Link]([Link]);
[Link]([Link]);
</SCRIPT>
</SCRIPT>
<HR>
<HR>
Jeevan Nagendra 58
JavaScript and
HTML Comments
<SCRIPT>
<!-- t
en
[Link]("Hi Dave"); m
m
co
[Link]="BLUE"; L
T M
--> H
</SCRIPT>
Jeevan Nagendra 59
The navigator Object
• Represents the browser. Read-only!
• Attributes include:
ine
t e rm i s
de e r
t o w s
appName e d
s of b r o
u
appVersion f t en ind
o t k ed E)
a I
platform wh g us e vs.
e i n ap
b tsc
(Ne
Jeevan Nagendra 60
navigator Example
• alert([Link]);
• alert([Link]);
• alert([Link]);
Jeevan Nagendra 61
The window Object
• Represents the current window.
• There are possible many objects of type
Window, the predefined object window
represents the current window.
• Access to, and control of, a number of
properties including position and size.
Jeevan Nagendra 62
window attributes
• document
• name
• status the status line
• parent
Jeevan Nagendra 63
some window methods
alert()
close()
prompt()
moveTo() moveBy()
open()
scroll() scrollTo()
resizeBy() resizeTo()
Jeevan Nagendra 64
Arrays
Jeevan Nagendra 65
Array literals
• JavaScript has array literals, written with brackets and
commas
– Example: color = ["red", "yellow", "green", "blue"];
– Arrays are zero-based: color[0] is "red"
• If you put two commas in a row, the array has an “empty”
element in that location
– Example: color = ["red", , , "green", "blue"];
– color has 5 elements
– However, a single comma at the end is ignored
– Example: color = ["red", , , "green", "blue”,]; still
has 5 elements
Jeevan Nagendra 66
Four ways to create an array
• You can use an array literal:
var colors = ["red", "green", "blue"];
• You can use new Array() to create an empty array:
– var colors = new Array();
– You can add elements to the array later:
colors[0] = "red"; colors[2] = "blue";
colors[1]="green";
• You can use new Array(n) with a single numeric
argument to create an array of that size
– var colors = new Array(3);
• You can use new Array(…) with two or more
arguments to create an array containing those values:
– var colors = new Array("red","green", "blue");
Jeevan Nagendra 67
The length of an array
• If myArray is an array, its length is given
by [Link]
• Array length can be changed by
assignment beyond the current length
– Example: var myArray = new Array(5);
myArray[10] = 3;
Jeevan Nagendra 68
Array functions
• If myArray is an array,
– [Link]() sorts the array alphabetically
– [Link](function(a, b) { return a - b; }) sorts
numerically
– [Link]() reverses the array elements
– [Link](…) adds any number of new
elements to the end of the array, and increases
the array’s length
– [Link]() removes and returns the last
element of the array, and decrements the array’s
length
– [Link]() returns a string containing the
values of the array elements, separated by
commas
Jeevan Nagendra 69
Array example code
• <script language="javascript">
• var a = [8,7,6,5];
• b = [Link]();
• [Link](b);
• </script>
Jeevan Nagendra 70
The with statement
• with (object) statement ; uses the object as the
default prefix for variables in the statement
• For example, the following are equivalent:
– with ([Link]) {
[Link] = compute([Link]) ;
}
– [Link] =
compute([Link]);
• One of my books hints at mysterious problems
resulting from the use of with, and recommends
against ever using it
Jeevan Nagendra 71
for .. in statement
• You can loop through all the properties of an object
with for (variable in object) statement;
• <script language="javascript">
• var a = new Array(4);
• for (i=0;i<[Link];i++)
• {
• a[i]=i;
• }
• for (j in a)
• {
• [Link](j);
• }
• </script>
Jeevan Nagendra 72
Jeevan Nagendra 73
Jeevan Nagendra 74
Jeevan Nagendra 75
Jeevan Nagendra 76
• DHTML stands for Dynamic HTML.
• DHTML is the art of making HTML
pages dynamic!
• DHTML is a combination of
technologies used to create dynamic
and interactive Web sites.
• To most people DHTML means a
combination of HTML, Style Sheets
and JavaScript.
Jeevan Nagendra 77
Event Occurs when...
onabort a user aborts page loading
onblur a user leaves an object
a user changes the value of an
onchange
object
onclick a user clicks on an object
ondblclick a user double-clicks on an object
onfocus a user makes an object active
onkeydown a keyboard key is on its way down
onkeypress a keyboard key is pressed
onkeyup a keyboard key is released
Jeevan Nagendra 78
Event Occurs when...
onload a page is finished loading.
onmousedown a user presses a mouse-button
onmousemove a cursor moves on an object
onmouseover a cursor moves over an object
onmouseout a cursor moves off an object
onmouseup a user releases a mouse-button
onreset a user resets a form
onselect a user selects content on a page
onsubmit a user submits a form
onunload a user closes a page
Jeevan Nagendra 79
Mousedown
• <body
onmousedown="[Link]='yellow'">
• <center> <h1> Welcome to DHTML Programs
</h1> </center>
• </body>
Jeevan Nagendra 80
Mouseover
• <body>
• <center> <h1> Using Dynamic Styles</h1>
• <span onmouseover="[Link]='48'">
This text gets bigger when U move the mouse
over it!
• </span></center>
• </body>
Jeevan Nagendra 81
DHTML using Javascript
• <body><center> <h1> Creating a Self
modifying webpage</h1>
• <script language="javascript">
• if(confirm("Do u want large image ?"))
• {
• [Link]("<br><img width=1024
height=1024 src='[Link]'>") }
• else
• {
• [Link]("<br><img width=120
height=120 src='[Link]'>")
• }
• </script></center></body>
Jeevan Nagendra 82
Change the Cursor
• <body>
• <center> <h1
onmouseover="[Link]='hand'"
onmouseout="[Link]='defalut'">
• Change the cursor with the mouse</h1>
• </center>
• </body>
Jeevan Nagendra 83
Mouseover & MouseOut
• <body>
• <center> <h1
onmouseover="[Link]='red'"
onmouseout="[Link]='blue'">
Turn me red with the mouse</h1>
• </center>
• </body>
Jeevan Nagendra 84
Mouseover & MouseOut (pictures)
• <body>
• <center> <h1> Mouse Over Image Handling </h1>
• <img src="[Link]" onmouseover="[Link]='[Link]'"
onmouseout="[Link]='[Link]'">
• </center>
• </body>
Jeevan Nagendra 85
Mouseover & MouseOut
• <body>
• <center> <h1
onmouseover="[Link]='red'"
onmouseout="[Link]='blue'">
Turn me red with the mouse</h1>
• </center>
• </body>
Jeevan Nagendra 86
Jeevan Nagendra 87