Scribd
Upload
37 views

Java Script&DHTML

The document discusses JavaScript arrays and objects. It describes how to create arrays using literals, the new Array() constructor, and predefined properties like length. Common array methods like sort(), reverse(), push(), and pop() are explained. The main JavaScript objects like Math, String, and Date are also introduced along with their common properties and methods.

Uploaded by

abhishek neti
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
37 views

Java Script&DHTML

The document discusses JavaScript arrays and objects. It describes how to create arrays using literals, the new Array() constructor, and predefined properties like length. Common array methods like sort(), reverse(), push(), and pop() are explained. The main JavaScript objects like Math, String, and Date are also introduced along with their common properties and methods.

Uploaded by

abhishek neti
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 87

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=document.calc.val1.value;
b=document.calc.val2.value;
c=parseInt(a)+parseInt(b);
document.calc.result.value=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 Math.max()

Jeevan Nagendra 50
Objects
• Objects have attributes and methods.
• Many pre-defined objects and object
types.
• Using objects follows the syntax of
Java:
objectname.attributename
objectname.methodname()

Jeevan Nagendra 51
The Math Object
• Access to mathematical functions and
constants.
• Constants: Math.PI
• Methods: Math.random()
Math.abs(x), Math.ceil(x)
Math.sin(x), Math.floor(x)
Math.cos(x), Math.exp(x)
Math.max(x,y), Math.log(x)
Math.min(x,y), Math.round(x),
Math.sqrt(x), Math.pow(x,y)
Jeevan Nagendra 52
Math object in use
// returns an integer between 1 and 6
function roll() {
var x = Math.random();

// convert to range [0,6.0)


x = x * 6;
// add 1 and convert to int
return parseInt(1+x );
}

document.writeln("Roll is “ + roll() );

Jeevan Nagendra 53
The String Object
• Access to String functions
Methods:
var s1=“Information”,s2=“Technology”
charAt(index), Ex: s1.charAt(2)
concat(string),Ex: s1.concat(s2)

slice(start,end), Ex: s1.slice(3,8)


Substr(start,length), Ex: s2.substr(1,4)
toLowerCase()Ex: s2.toLowerCase()
toUpperCase()Ex: s2.toUpperCase()

Jeevan Nagendra 54
The Date Object
• Access to Date functions
Methods:
var d= new Date()
getDate(); Ex: d.getDate();
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:
• document.write() like a print
statement – the output goes into the HTML
document.

document.write("My title is" +


document.title+ “URL is”
+document.URL); 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>
document.write(document.title);
document.write(document.title);
</SCRIPT>
</SCRIPT>
<HR>
<HR>

Jeevan Nagendra 58
JavaScript and
HTML Comments
<SCRIPT>
<!-- t
en
document.write("Hi Dave"); m
m
co
document.bgColor="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(navigator.appName);
• alert(navigator.appVersion);
• alert(navigator.platform);

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 myArray.length
• 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,
– myArray.sort() sorts the array alphabetically
– myArray.sort(function(a, b) { return a - b; }) sorts
numerically
– myArray.reverse() reverses the array elements
– myArray.push(…) adds any number of new
elements to the end of the array, and increases
the array’s length
– myArray.pop() removes and returns the last
element of the array, and decrements the array’s
length
– myArray.toString() 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 = a.reverse();
• document.writeln(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 (document.myForm) {
result.value = compute(myInput.value) ;
}
– document.myForm.result.value =
compute(document.myForm.myInput.value);
• 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<a.length;i++)
• {
• a[i]=i;
• }
• for (j in a)
• {
• document.writeln(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="document.bgColor='yellow'">

• <center> <h1> Welcome to DHTML Programs


</h1> </center>

• </body>

Jeevan Nagendra 80
Mouseover
• <body>

• <center> <h1> Using Dynamic Styles</h1>


• <span onmouseover="this.style.fontSize='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 ?"))
• {
• document.write("<br><img width=1024
height=1024 src='1.bmp'>") }
• else
• {
• document.write("<br><img width=120
height=120 src='1.bmp'>")
• }
• </script></center></body>
Jeevan Nagendra 82
Change the Cursor

• <body>
• <center> <h1
onmouseover="this.style.cursor='hand'"
onmouseout="this.style.cursor='defalut'">
• Change the cursor with the mouse</h1>
• </center>
• </body>

Jeevan Nagendra 83
Mouseover & MouseOut

• <body>

• <center> <h1
onmouseover="this.style.color='red'"
onmouseout="this.style.color='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="2.jpg" onmouseover="this.src='3.jpg'"
onmouseout="this.src='2.jpg'">

• </center>

• </body>

Jeevan Nagendra 85
Mouseover & MouseOut

• <body>

• <center> <h1
onmouseover="this.style.color='red'"
onmouseout="this.style.color='blue'">
Turn me red with the mouse</h1>
• </center>

• </body>
Jeevan Nagendra 86
Jeevan Nagendra 87

You might also like