Java Script

Introduction to
JavaScript
T.Shanmugapriya
Introduction
What is it?
How does it work?
What is Java?
Learning JavaScript
JavaScript Statements
JavaScript and HTML forms
What is JavaScript?
Browsers have limited functionality
Text, images, tables, frames
JavaScript allows for interactivity

Browser/page manipulation
Reacting to user actions
A type of programming language

Easy to learn
Developed by Netscape
Now a standard exists
www.ecma-international.org/publications/
standards/ECMA-262.HTM
JavaScript Allows Interactivity

Improve appearance
Especially graphics
Visual feedback
Site navigation
Perform calculations
Validation of input
Other technologies
javascript.internet.com
How Does It Work?

Embedded within HTML page
View source
Executes on client
Fast, no connection needed once loaded
Simple programming statements

combined with HTML tags
Interpreted (not compiled)
No special tools required
What is Java?
Totally different
A full programming language
Much harder!
A compiled language
Independent of the web
Sometimes used together
<html>
<head><title>My Page</title></head>
<body>
<script language="JavaScript">
document.write('This is my first JavaScript
Page');
</script>
</body>
</html>
<html>
<body>
<script language=JavaScript">
document.write('<h1>This is my first
JavaScript Page</h1>');
</script>
</body>
</html>
HTML written
inside JavaScript
<html>
<body>
<p>
<a href="myfile.html">My Page</a>
<br />
<a href="myfile.html"
onMouseover="window.alert('Hello');">
My Page</A>
</p>
</body>
JavaScript written
An Event
</html>
inside HTML
Example Statements
<script language="JavaScript">
window.prompt('Enter your name:','');
Another event
</script>
<form>
<input type="button" Value="Press"
onClick="window.alert('Hello');">
</form>
Note quotes: " and '
JavaScript Comments
Comments can be added to explain
the JavaScript, or to make the code
more readable.
Single line comments start with //.
The following example uses single
line comments to explain the code:
Example
<script type="text/javascript">
// Write a heading
document.write("<h1>This is a heading</h1>");
// Write two paragraphs:
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another
paragraph.</p>");
</script>
JavaScript Multi-Line
Comments
Multi line comments start with /* and
end with */.
The following example uses a multi
line comment to explain the code:
Example
/*
The code below will write
one heading and two paragraphs
*/
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another
paragraph.</p>");
</script>
Using Comments at the End of

a Line
Example
document.write("Hello"); // Write "Hello"
document.write(" Dolly!"); // Write "
Dolly!"
</script>
Simple Program: Printing a Line of

Text in a Web Page
Inline scripting
Written in the <body> of a document
<script> tag
Indicate that the text is part of a script
type attribute
Specifies the type of file and the scripting language use
writeln method
Write a line in the document
alert method
Dialog box
welcome.html
(1 of 1)
welcome2.html
(1 of 1)
welcome3.html
1 of 1
welcome4.html
1 of 1
welcome5.html
(1 of 2)
23
24
</head>
25
26
<body>
27
<p>Click Refresh (or Reload) to run this script again.</p>
28
</body>
29 </html>
welcome5.html
(2 of 2)
Adding Integers
Prompt user for two integers and
calculate the sum NaN (not a number)
parseInt
Converts its string argument to an
integer
Addition.html
(1 of 2)
Addition.html
(2 of 2)
Arithmetic
Many scripts perform arithmetic
calculations
Expressions in JavaScript must be written in
straight-line form
Arithmetic
Precedence and associativity
Arithmetic
Step 1. y = 2 * 5 * 5 + 3 * 5 + 7;
2 * 5 is 10
(Leftmost multiplication)
Step 2. y = 10 * 5 + 3 * 5 + 7;
10 * 5 is 50
(Leftmost multiplication)
Step 3. y = 50 + 3 * 5 + 7;
3 * 5 is 15
(Multiplication before addition)
Step 4. y = 50 + 15 + 7;
50 + 15 is 65
(Leftmost addition)
Step 5. y = 65 + 7;
65 + 7 is 72
Step 6. y = 72;
(Last addition)
(Last operationplace72intoy )
Adding Strings and Numbers

The rule is: If you add a number and a string, the result will
be a string!
Example
x=5+5;
document.write(x);
x="5"+"5";
document.write(x);
x=5+"5";
document.write(x);
x="5"+5;
document.write(x);
Decision Making: Equality and

Relational Operators
Decision based on the truth or falsity of a
condition
Equality operators
Relational operators


JavaScript Assignment Operators

Assignment operators are used to assign
values to JavaScript variables.
Increment and Decrement

Operators
Preincrement or predecrement operator
Increment of decrement operator placed before
a variable
Postincrement or postdecrement operator

Increment of decrement operator placed after
a variable

Operators

Operators
Logical Operators
More logical operators
Logical AND ( && )
Logical OR ( || )
Logical NOT ( ! )
Truth table for the && (logical AND) operator.
Logical Operators
Truth table for the || (logical OR) operator.
Truth table for operator ! (logical negation).
Logical Operators
Conditional Statements
In JavaScript we have the following conditional
statements:
if statement - use this statement to execute
some code only if a specified condition is true
if...else statement - use this statement to
execute some code if the condition is true and
another code if the condition is false
if...else if....else statement - use this
statement to select one of many blocks of code to
be executed
switch statement - use this statement to select
one of many blocks of code to be executed
If Statement
Use the if statement to execute some code only if
a specified condition is true.
Syntax
if (condition)
{
codetobeexecutedifconditionistrue
}
Example
//Write a "Good morning" greeting if
//the time is less than 10
var d=new Date();
var time=d.getHours();
if (time<10)
{
document.write("<b>Good morning</b>");
}
</script>
If...else Statement
Use the if....else statement to execute some code if a
condition is true and another code if the condition is not
true.
Syntax
if (condition)
{
codetobeexecutedifconditionistrue
}
else
{
codetobeexecutedifconditionisnottrue
}
Example
//If the time is less than 10, you will get a "Good morning"
greeting.
//Otherwise you will get a "Good day" greeting.
var d = new Date();
var time = d.getHours();
if (time < 10)
{
document.write("Good morning!");
}
else
{
document.write("Good day!");
}
</script>
If...else if...else Statement

Use the if....else if...else statement to select one of several
blocks of code to be executed.
Syntax
if (condition1)
{
codetobeexecutedifcondition1istrue
}
else if (condition2)
{
codetobeexecutedifcondition2istrue
}
else
{
codetobeexecutedifcondition1andcondition2arenot
true
}
Example
var d = new Date()
var time = d.getHours()
if (time<10)
{
document.write("<b>Good morning</b>");
}
else if (time>10 && time<16)
{
document.write("<b>Good day</b>");
}
else
{
document.write("<b>Hello World!</b>");
}
</script>
The JavaScript Switch Statement

Use the switch statement to select one of many blocks of
code to be executed.
Syntax
switch(n)
{
case 1:
executecodeblock1
break;
case 2:
executecodeblock2
break;
default:
codetobeexecutedifnisdifferentfromcase1and2
}
Example
//You will receive a different greeting based
//on what day it is. Note that Sunday=0,
//Monday=1, Tuesday=2, etc.
var d=new Date();
theDay=d.getDay();
switch (theDay)
{
case 5:
document.write("Finally Friday");
break;
case 6:
document.write("Super Saturday");
break;
case 0:
document.write("Sleepy Sunday");
break;
default:
document.write("I'm looking forward to this weekend!");
}
</script>
Function Definitions
Format of a function definition
function function-name( parameter-list )
{
declarationsandstatements
}
Function name any valid identifier

Parameter list names of variables that will
receive arguments
Must have same number as function call
May be empty
Declarations and statements

Function body (block of code)
Returning control
return statement
Can return either nothing, or a value

return expression;
No return statement same as return;

Not returning a value when expected
is an error
Writing a function to square two
numbers
for loop from 1 to 10
Pass each number as argument to

square
return value of argument multiplied
by itself
Display result
Calling function square and passing it the value of x.
22
// The following square function's body is executed
23
// only when the functionVariable

is explicitly
y gets called.
the value
of variable x.
24
25
// square function definition
26
function square( y )
27
28
return y * y;
29
30
// -->
31
</script>
32
33
</head><body></body>
34 </html>
The return statement passes the value of y * y back

to the calling function.
Finding the maximum of 3
numbers
Prompt for 3 inputs
Convert to numbers
Pass to maximum
Math.max
Prompt for the user to input three integers.
24
25
var maxValue = maximum( value1, value2, value3 );
26
27
document.writeln( "First number: " + value1 +
Call function maximum and pass it the value of

variables value1, value2 and value3.
28
"<br />Second number: " + value2 +
29
"<br />Third number: " + value3 +
30
"<br />Maximum is: " + maxValue );
Method max returns the larger of the two

integers passed to it.
31
32
// maximum method definition (called from line 25)
33
function maximum( x, y, z )
34
35
return Math.max( x, Math.max( Variables

y, z ) );x,
36
37
// -->
38
</script>
y and z get the value of variables value1,

value2 and value3, respectively.
39
40
</head>
41
<body>
42
43
<p>Click Refresh (or Reload) to run the script again</p>

</body>
44 </html>
JavaScript Loops
In JavaScript, there are two different kind
of loops:
for - loops through a block of code a
specified number of times
while - loops through a block of code
while a specified condition is true
The for Loop

The for loop is used when you know in
advance how many times the script should
run.
Syntax
for
(var=startvalue;var<=endvalue;var=var+i
ncrement)
{
codetobeexecuted
}
Example
<html>
<body>
var i=0;
for (i=0;i<=5;i++)
{
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html>
The while Loop

The while loop loops through a block of
code while a specified condition is true.
Syntax
while (var<=endvalue)
{
codetobeexecuted
}
Example
<html>
<body>
var i=0;
while (i<=5)
{
i++;
}
</script>
</body>
</html>
The do...while Loop

The do...while loop is a variant of the while
loop. This loop will execute the block of
code ONCE, and then it will repeat the loop
as long as the specified condition is true.
Syntax
do
{
codetobeexecuted
}
while (var<=endvalue);
Example
<html>
<body>
var i=0;
do
{
i++;
}
while (i<=5);
</script>
</body>
</html>
JavaScript Break and Continue

Statements
The break Statement
The break statement will break the
loop and continue executing the code that
follows after the loop (if any).
Example
<html>
<body>
var i=0;
for (i=0;i<=10;i++)
{
if (i==3)
{
break;
}
}
</script>
</body>
</html>
The continue Statement

The continue statement will break
the current loop and continue with
the next value.
Example
<html>
<body>
var i=0
for (i=0;i<=10;i++)
{
if (i==3)
{
continue;
}
}
</script>
</body>
</html>
JavaScript For...In Statement

The for...in statement loops through the
elements of an array or through the
properties of an object.
Syntax
for (variable in object)
{
codetobeexecuted
}
Example
<html>
<body>
var x;
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";
for (x in mycars)
{
document.write(mycars[x] + "<br />");
}
</script>
</body>
</html>
JavaScript Popup Boxes

JavaScript has three kind of popup
boxes:
Alert box,
Confirm box, and
Prompt box.
Alert Box
An alert box is often used if you want to
make sure information comes through to
the user.
When an alert box pops up, the user will
have to click "OK" to proceed.
Syntax
alert("sometext");
Example
<html>
<head>
function show_alert()
{
alert("I am an alert box!");
}
</script>
</head>
<body>
<input type="button" onclick="show_alert()" value="Show
alert box" />
</body>
</html>
Confirm Box
A confirm box is often used if you want the user
to verify or accept something.
When a confirm box pops up, the user will have
to click either "OK" or "Cancel" to proceed.
If the user clicks "OK", the box returns true. If
the user clicks "Cancel", the box returns false.
Syntax
confirm("sometext");
Example
<html>
<head>
function show_confirm()
{
var r=confirm("Press a button");
if (r==true)
{
alert("You pressed OK!");
}
else
{
alert("You pressed Cancel!");
}
}
</script>
</head>
<body>
<input type="button" onclick="show_confirm()" value="Show confirm box" />
</body>
</html>
Prompt Box
A prompt box is often used if you want the user
to input a value before entering a page.
When a prompt box pops up, the user will have to
click either "OK" or "Cancel" to proceed after
entering an input value.
If the user clicks "OK" the box returns the input
value. If the user clicks "Cancel" the box returns
null.
Syntax
prompt("sometext","defaultvalue");
JavaScript Functions
How to Define a Function
Syntax
function
functionname(var1,var2,...,varX)
{
somecode
}
Example
<html>
<head>
function displaymessage()
{
alert("Hello World!");
}
</script>
</head>
Example
Contd...
<body>
<form>
<input type="button" value="Click
me!" onclick="displaymessage()" />
</form>
</body>
</html>
Events
Events are actions that can be detected by
JavaScript.
Examples of events:
A mouse click
A web page or an image loading
Mousing over a hot spot on the web page
Selecting an input field in an HTML form
Submitting an HTML form
A keystroke
onLoad and onUnload

The onLoad and onUnload events are
triggered when the user enters or leaves
the page.
onFocus, onBlur and onChange
The onFocus, onBlur and onChange
events are often used in combination with
validation of form fields.
<input type="text" size="30" id="email"
onchange="checkEmail()">
onSubmit
The onSubmit event is used to validate
ALL form fields before submitting it.
<form method="post" action=abc.htm"
onsubmit="return checkForm()">
onMouseOver and onMouseOut

onMouseOver and onMouseOut are
often used to create "animated" buttons.
<a href="http://www.annauniv.edu" onmouseover="alert('An
onMouseOver event');return false"><img src=anna.gif"
alt=annauniv" /></a>
JavaScript Try...Catch Statement

The try...catch statement allows you to test a
block of code for errors.
Syntax
try
{
//Run some code here
}
catch(err)
{
//Handle errors here
}
Example
<html>
<head>
var txt="";
function message()
{
try
{
adddlert("Welcome guest!");
}
catch(err)
{
txt="There was an error on this page.\n\n";
txt+="Error description: " + err.description + "\n\n";
Example
Contd...
txt+="Click OK to continue.\n\n";
alert(txt);
}
}
</script>
</head>
<body>
<input type="button" value="View message"
onclick="message()" />
</body>
</html>
The Throw Statement

The throw statement allows you to create
an exception. If you use this statement
together with the try...catch statement,
you can control program flow and
generate accurate error messages.
Syntax
throw(exception)
Example
<html>
<body>
var x=prompt("Enter a number between 0 and 10:","");
try
{
if(x>10)
{
throw "Err1";
}
else if(x<0)
{
throw "Err2";
}
else if(isNaN(x))
{
throw "Err3";
}
}
Example
Contd...
catch(er)
{
if(er=="Err1")
{
alert("Error! The value is too high");
}
if(er=="Err2")
{
alert("Error! The value is too low");
}
if(er=="Err3")
{
alert("Error! The value is not a number");
}
}
</script>
</body>
</html>
JavaScript Objects
JavaScript is an Object Oriented
Programming (OOP) language.
An OOP language allows you to define
your own objects and make your own
variable types.
Introduction
Use JavaScript to manipulate every
element of XHTML document from a
script
Reference for several of JavaScripts
built-in objects
Demonstrates the capabilities
12.2 Thinking About Objects

Objects
Attributes
Behaviors
Encapsulate data and methods
Property of information hiding
Details hidden within the objects
themselves
Math Object
Allow the programmer to perform
many common mathematical
calculations
12.3
Math Object
Description
Example
Method
abs( x )
abs( 7.2 ) is 7.2

abs( 0.0 ) is 0.0
abs( -5.6 ) is 5.6
rounds x to the smallest ceil( 9.2 ) is 10.0
ceil( x )
integer not less than x
ceil( -9.8 ) is -9.0
trigonometric cosine of x cos( 0.0 ) is 1.0
cos( x )
(x in radians)
exp( x )
exponential method ex exp( 1.0 ) is 2.71828
exp( 2.0 ) is 7.38906
floor( x ) rounds x to the largest
floor( 9.2 ) is 9.0
integer not greater than x floor( -9.8 ) is -10.0
natural logarithm of x
log( x )
log( 2.718282 ) is 1.0
(base e)
log( 7.389056 ) is 2.0
max( x, y ) larger value of x and y max( 2.3, 12.7 ) is 12.7
max( -2.3,-12.7 ) is -2.3
.
absolute value of x
Math Object
min( x, y ) smaller value of x
and y
pow( x, y ) x raised to power y
(xy)
round( x ) rounds x to the
closest integer
trigonometric sine of
sin( x )
x (x in radians)
square root of x
sqrt( x )
min( 2.3, 12.7 ) is 2.3

min( -2.3, -12.7 ) is -12.7
pow( 2.0, 7.0 ) is 128.0
pow( 9.0, .5 ) is 3.0
round( 9.75 ) is 10
round( 9.25 ) is 9
sin( 0.0 ) is 0.0
sqrt( 900.0 ) is 30.0

sqrt( 9.0 ) is 3.0
trigonometric tangent tan( 0.0 ) is 0.0
tan( x )
of x
(x in radians)
Fig. 12.1 Math object methods.
Math Object
Constant
Math.E
Description
Base of a natural
logarithm (e).
Natural logarithm of 2.
Math.LN2
Natural logarithm of 10.
Math.LN10
Base 2 logarithm of e.
Math.LOG2E
Math.LOG10E Base 10 logarithm of e.
Math.PI
the ratio of a circles
circumference to its
diameter.
Math.SQRT1_2 Square root of 0.5.
Square root of 2.0.
Math.SQRT2
Fig. 12.2 Properties of the Math object.
Value
Approximately 2.718.
Approximately
3.141592653589793.
Date Object
Provides methods for date and time
manipulations
12.5 Date Object

Method
Description
getDay()
getUTCDay()
Returns a number from 0 (Sunday) to 6 (Saturday) representing the day of the week in local time or UTC,
respectively.
getFullYear()
getUTCFullYear()
getHours()
getUTCHours()
getMilliseconds()
getUTCMilliSeconds()
Returns the year as a four-digit number in local time or UTC, respectively.
getMinutes()
getUTCMinutes()
getMonth()
getUTCMonth()
getSeconds()
getUTCSeconds()
getTime()
Returns a number from 0 to 59 representing the minutes for the time in local time or UTC, respectively.
getTimezoneOffset()
Returns the difference in minutes between the current time on the local computer and UTCpreviously
known as Greenwich Mean Time (GMT).
setDate( val )
setUTCDate( val )
Fig. 12.8
Methods of the Date object.
Sets the day of the month (1 to 31) in local time or UTC, respectively.
getDate()
getUTCDate()
Returns a number from 1 to 31 representing the day of the month in local time or UTC, respectively.
Returns a number from 0 to 23 representing hours since midnight in local time or UTC, respectively.
Returns a number from 0 to 999 representing the number of milliseconds in local time or UTC, respectively.
The time is stored in hours, minutes, seconds and milliseconds.
Returns a number from 0 (January) to 11 (December) representing the month in local time or UTC,
respectively.
Returns a number from 0 to 59 representing the seconds for the time in local time or UTC, respectively.
Returns the number of milliseconds between January 1, 1970 and the time in the Date object.
12.5 Date Object

Method
Description
setHours( h, m, s, ms )
setUTCHours( h, m, s, ms )
Sets the hour in local time or UTC, respectively. The second, third and fourth
arguments representing the minutes, seconds and milliseconds are optional. If
an optional argument is not specified, the current value in the Date object is
used.
setMilliSeconds( ms )
setUTCMilliseconds( ms )
setMinutes( m, s, ms )
setUTCMinutes( m, s, ms )
Sets the number of milliseconds in local time or UTC, respectively.
setMonth( m, d )
setUTCMonth( m, d )
Sets the month in local time or UTC, respectively. The second argument
representing the date is optional. If the optional argument is not specified, the
current date value in the Date object is used.
setSeconds( s, ms )
setUTCSeconds( s, ms )
Sets the second in local time or UTC, respectively. The second argument
representing the milliseconds is optional. If this argument is not specified, the
current millisecond value in the Date object is used.
setFullYear( y, m, d )
setUTCFullYear( y, m, d )
Fig. 12.8
Sets the year in local time or UTC, respectively. The second and third
arguments representing the month and the date are optional. If an optional
argument is not specified, the current value in the Date object is used.
Sets the minute in local time or UTC, respectively. The second and third
arguments representing the seconds and milliseconds are optional. If an
optional argument is not specified, the current value in the Date object is
used.
12.5 Date Object

Method
Description
toLocaleString()
Returns a string representation of the date and time in a form specific to the
computers locale. For example, September 13, 2001 at 3:42:22 PM is
represented as 09/13/01 15:47:22 in the United States and 13/09/01
15:47:22 in Europe.
toUTCString()
Returns a string representation of the date and time in the form: 19 Sep
2001 15:47:22 UTC
toString()
Returns a string representation of the date and time in a form specific to the
locale of the computer (Mon Sep 19 15:47:22 EDT 2001 in the United
States).
valueOf()
The time in number of milliseconds since midnight, January 1, 1970.
setTime( ms )
Fig. 12.8
Sets the time based on its argumentthe number of elapsed milliseconds

since January 1, 1970.
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5


7
8
9
10
<html xmlns = "http://www.w3.org/1999/xhtml">

<head>
<title>Date and Time Methods</title>
11
12
DateTime.html
1 of 3
<script type = "text/javascript">
13

53
</script>
54
55
</head><body></body>
56 </html>
JavaScript Date Object

The Date object is used to work with dates
and times.
Date objects are created with the Date()
constructor.
There are four ways of instantiating a date:
new Date() // current date and time

new Date(milliseconds) //milliseconds since 1970/01/01
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds,
milliseconds)
To set a Date object to a specific date

(30th November 2010):
var myDate=new Date();
myDate.setFullYear(2010,10,30);
To set a Date object to be 5 days into the

future:
myDate.setDate(myDate.getDate()+5);
Compare Two Dates

myDate.setFullYear(2010,10,30);
var today = new Date();
if (myDate>today)
{
alert("Today is before 30th November 2010");
}
else
{
alert("Today is after 30th November 2010");
}
12.6 Boolean and Number

Objects
Object wrappers for boolean
true/false values and numbers

Objects
Method
toString()
valueOf()
Fig. 12.10
Description
Returns the string true if the value of the Boolean object is
true; otherwise, returns the string false.
Returns the value true if the Boolean object is true; otherwise,
returns false.
Boolean object methods.

Objects
Method or Property
toString( radix )
Description
Returns the string representation of the number. The optional radix
argument (a number from 2 to 36) specifies the numbers base. For
example, radix 2 results in the binary representation of the number,
8 results in the octal representation, 10 results in the decimal
representation and 16 results in the hexadecimal representation.
See Appendix E, Number Systems for a review of the binary, octal,
decimal and hexadecimal number systems.
Returns the numeric value.
valueOf()
This property represents the largest value that can be stored in a
Number.MAX_VALUE
JavaScript programapproximately 1.79E+308
This property represents the smallest value that can be stored in a
Number.MIN_VALUE
JavaScript programapproximately
2.22E308
This property represents not a numbera value returned from an
Number.NaN
arithmetic expression that does not result in a number (e.g., the
expression parseInt( "hello" ) cannot convert the string
"hello" into a number, so parseInt would return
Number.NaN. To determine whether a value is NaN, test the
result with function isNaN, which returns true if the value is
NaN; otherwise, it returns false.
This property represents a value less than
Number.NEGATIVE_INFINITY
-Number.MAX_VALUE.
This property represents a value greater than
Number.POSITIVE_INFINITY
Number.MAX_VALUE.
Fig. 12.11 Number object methods and properties.
JavaScript Boolean Object

The Boolean object is used to convert a
non-Boolean value to a Boolean value
(true or false).
The following code creates a Boolean
object called myBoolean:
-var myBoolean=new Boolean();
All the following lines of code create

Boolean objects with an initial value of
false:
var myBoolean=new Boolean();
var myBoolean=new Boolean(0);
var myBoolean=new Boolean(null);
var myBoolean=new Boolean("");
var myBoolean=new Boolean(false);
var myBoolean=new Boolean(NaN);
And all the following lines of code create

Boolean objects with an initial value of
true:
var myBoolean=new Boolean(1);
var myBoolean=new Boolean(true);
var myBoolean=new Boolean("true");
var myBoolean=new Boolean("false");
var myBoolean=new Boolean("Richard");
JavaScript Math Object

The Math object allows you to perform
mathematical tasks.
round()
How to use round().
random()
How to use random() to return a random number between 0
and 1.
max()
How to use max() to return the number with the highest value
of two specified numbers.
min()
How to use min() to return the number with the lowest value of
two specified numbers.
Mathematical Constants
Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E
Mathematical Methods
Few Examples:
document.write(Math.round(4.7));
document.write(Math.random());
document.write(Math.floor(Math.random()*11));
JavaScript Browser Detection
The Navigator object contains information about the visitor's browser.

Example
<html>
<body>
document.write("Browser CodeName: " + navigator.appCodeName);
document.write("<br /><br />");
document.write("Browser Name: " + navigator.appName);
document.write("Browser Version: " + navigator.appVersion);
document.write("Cookies Enabled: " + navigator.cookieEnabled);
document.write("Platform: " + navigator.platform);
document.write("User-agent header: " + navigator.userAgent);
</script>
</body>
</html>
Java Script String Object

Method
Description
anchor()
Creates an HTML anchor
big()
Displays a string in a big font
blink()
Displays a blinking string
bold()
Displays a string in bold
charAt()
Returns the character at a specified position
charCodeAt()
Returns the Unicode of the character at a specified

position
concat()
Joins two or more strings
fixed()
Displays a string as teletype text
fontcolor()
Displays a string in a specified color
fontsize()
Displays a string in a specified size
fromCharCod
e
()
indexOf()
Takes the specified Unicode values and returns a string

Returns the position of the first occurrence of a
specified string value in a string
String Object
italics()
Displays a string in italic
lastIndexOf()
Returns the position of the last occurrence of a specified

string value, searching backwards from the specified
position in a string
link()
Displays a string as a hyperlink
match()
Searches for a specified value in a string
replace()
Replaces some characters with some other characters in a

string
search()
Searches a string for a specified value
slice()
Extracts a part of a string and returns the extracted part in

a new string
small()
Displays a string in a small font
split()
Splits a string into an array of strings
strike()
Displays a string with a strikethrough
String object
sub()
Displays a string as subscript
substr()
Extracts a specified number of characters in a string, from a

start index
substring()
Extracts the characters in a string between two specified

indices
sup()
Displays a string as superscript
toLowerCase()
Displays a string in lowercase letters
toUpperCase()
Displays a string in uppercase letters
toSource()
Represents the source code of an object
valueOf()
Returns the primitive value of a String object
String Object Properties
constructor
A reference to the function that created

the object
length
Returns the number of characters in a

string
prototype
Allows you to add properties and

methods to the object
CharAt method
The charAt() method returns the character at a

specified position.
stringObject.charAt(index)
In the string "Hello world!", we will return the

character at position 1:
var str="Hello world!";
document.write(str.charAt(1));
</script>
Index of Method
The indexOf() method returns the position of the first
occurrence of a specified string value in a string.
stringObject.indexOf(searchvalue,fromindex)
Specifies a string value to search forfromindexOptional.

Specifies where to start the searchNote: This method
returns -1 if the string value to search for never occurs.
Example
In this example we will do different searches within a "Hello
world!" string:
document.write(str.indexOf("Hello") + "<br />");
document.write(str.indexOf("World") + "<br />");
document.write(str.indexOf("world"));
</script>
Substring method
The substring() method extracts the characters in a string
between two specified indices.
Syntax
stringObject.substring(start,stop)
we will use substring() to extract some characters from a string:
document.write(str.substring(3));
</script>
The output of the code above will be:
lo world!
document.write(str.substring(3,7));
</script>
lo w
toSource method
document.write(str.substring(3,7));
</script>
lo w
The toSource() method represents the source code of an object.
object.toSource()
function employee(name,jobtitle,born)
{this.name=name;
this.jobtitle=jobtitle;this.born=born;}
var fred=new employee("Fred Flintstone","Caveman",1970);
document.write(fred.toSource());
</script>
({name:"Fred Flintstone", jobtitle:"Caveman", born:1970})
Slice
The slice() method extracts a part of a string and returns
the extracted part in a new string.
Syntax
stringObject.slice(start,end)
Specify where to start the selection. Must be a
numberendOptional. Specify where to end the selection.
Must be a number.
In this example we will extract all characters from a string,
starting at position 6:
<script type="text/javascript">var str="Hello happy
world!";document.write(str.slice(6));</script>
happy world!
Search
The search() method is used to search a string
for a specified value.
Syntax
stringObject.search(searchstring)
The value to search for in a string. To perform a
case-insensitive search add an 'i' flag.
In the following example we will search for the word
"W3Schools":
<script type="text/javascript">var str="Visit
W3Schools!";document.write(str.search(/W3Scho
ols/));</script>
6
Replace
The replace() method is used to replace some characters with
some other characters in a string.
Syntax
stringObject.replace(findstring,newstring)
Specifies a string value to find. To perform a global search add a
'g' flag to this parameter and to perform a case-insensitive search
add an 'i' flagnewstringRequired.
Specifies the string to replace the found value from findstring.
In the following example we will replace the word Microsoft with
W3Schools:
<script type="text/javascript">var str="Visit
Microsoft!";document.write(str.replace(/Microsoft/,
"W3Schools"));</script>
Visit W3Schools!
Match method
document.write(str.match("world") +
"<br />");
document.write(str.match("World") +
"<br/>");
document.write(str.match("worlld") +
"<br />");
document.write(str.match("world!"));
</script>
worldnullnullworld!
Split method
<script type="text/javascript">var
str="How are you doing today?";
document.write(str.split(" ") + "<br />");
document.write(str.split("") + "<br />");
document.write(str.split(" ",3));
</script>
How,are,you,doing,today?H,o,w, ,a,r,e,
,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?How,are,you
JavaScript String Object

The String object is used to manipulate a
stored piece of text.
Examples:
var txt="Hello world!";
document.write(txt.length);
var txt="Hello world!";
document.write(txt.toUpperCase());
JavaScript Array Object

The Array object is used to store multiple
values in a single variable.
Create an Array
An array can be defined in three ways.
1)
var myCars=new Array(); // regular array (add an optional integer
myCars[0]="Saab";
// argument to control array's size)
myCars[1]="Volvo";
myCars[2]="BMW";
2)
var myCars=new
Array("Saab","Volvo","BMW"); // condensed
array
3)
var myCars=["Saab","Volvo","BMW"]; //
literal array
Access an Array
document.write(myCars[0]);
Modify Values in an Array

myCars[0]="Opel";
Array Object
concat()
Joins two or more arrays and returns the

result
join()
Puts all the elements of an array into a

string. The elements are separated by a
specified delimiter
pop()
Removes and returns the last element of

an array
push()
Adds one or more elements to the end of

an array and returns the new length
reverse()
Reverses the order of the elements in an

array
shift()
Removes and returns the first element of

an array
slice()
Returns selected elements from an

existing array
Array Object
sort()
Sorts the elements of an array
splice()
Removes and adds new elements to an array
toSource Represents the source code of an object

()
toString( Converts an array to a string and returns the result
)
unshift()
Adds one or more elements to the beginning of an

array and returns the new length
valueOf(
)
Returns the primitive value of an Array object
Array Examples - concat

The concat() method is used to join two or more arrays.
This method does not change the existing arrays, it only
returns a copy of the joined arrays.
Syntax
arrayObject.concat(arrayX,arrayX,......,arrayX)
One or more array objects to be joined to an array.
Here we create two arrays and show them as one using
concat():
var arr = new Array(3);
arr[0] = "Jani";arr[1] = "Tove";arr[2] = "Hege";var arr2 =
new Array(3);arr2[0] = "John";arr2[1] = "Andy";arr2[2] =
"Wendy";
document.write(arr.concat(arr2));</script>
Join method
The join() method is used to put all the elements of an
array into a string.
The elements will be separated by a specified separator.
Syntax
arrayObject.join(separator)
Specifies the separator to be used.
we will create an array, and then put all the elements in a
string:
<script type="text/javascript">var arr = new
Array(3);arr[0] = "Jani";arr[1] = "Hege";arr[2] =
"Stale";document.write(arr.join() + "<br
/>");document.write(arr.join("."));</script>

Jani,Hege,StaleJani.Hege.Stale
Push method
The push() method adds one or more elements to the end of an
array and returns the new length.
Syntax
arrayObject.push(newelement1,newelement2,....,newelementX)
The first element to add to the arraynewelement2Optional. The
second element to add to the arraynewelementXOptional.
Several elements may be added.
In this example we will create an array, and then change the
length of it by adding a element:
<script type="text/javascript">var arr = new Array(3);arr[0] =
"Jani";arr[1] = "Hege";arr[2] = "Stale";document.write(arr +
"<br />");document.write(arr.push("Kai Jim") + "<br
/>");document.write(arr);</script>
Jani,Hege,Stale
Jani,Hege,Stale,Kai Jim
Slice method
arr[0] = "Jani";arr[1] = "Hege";
arr[2] = "Stale";
document.write(arr + "<br />");
document.write(arr.slice(1) + "<br />");
document.write(arr);
</script>
Jani,Hege,Stale
Hege,Stale
Jani,Hege,Stale
Sorting
arr[0] = "Jani";
arr[1] = "Hege";
arr[2] = "Stale";
arr[3] = "Kai Jim";
arr[4] = "Borge";
arr[5] = "Tove";
document.write(arr + "<br />");
document.write(arr.sort());</script>
Splice method
The splice() method is used to remove and add new elements to an array.
Syntax
arrayObject.splice(index,howmany,element1,.....,elementX)
Specify where to add/remove elements.
Must be a numberhowmanyRequired
Specify how many elements should be removed. Must be a number, but
can be "0"element1Optional.
Specify a new element to add to the arrayelementXOptional. Several
elements can be added
In this example we will create an array and add an element to it:

<script type="text/javascript">var arr = new Array(5);arr[0] =
"Jani";arr[1] = "Hege";arr[2] = "Stale";arr[3] = "Kai Jim";arr[4] =
"Borge";document.write(arr + "<br />");arr.splice(2,0,"Lene");
document.write(arr + "<br />");</script>
Jani,Hege,Stale,Kai Jim,Borge
Jani,Hege,Lene,Stale,Kai Jim,Borge
Create an array and convert it into String
arr[0] = "Jani";arr[1] = "Hege";
arr[2] = "Stale";
document.write(arr.toString());
</script>
Jani,Hege,Stale
JavaScript Cookies
A cookie is a variable that is stored on the visitor's computer. Each
time the same computer requests a page with a browser, it will
send the cookie too. With JavaScript, you can both create and
retrieve cookie values.
Examples of cookies:
Name cookie - The first time a visitor arrives to your web page, he
or she must fill in her/his name. The name is then stored in a
cookie. Next time the visitor arrives at your page, he or she could
get a welcome message like "Welcome John Doe!" The name is
retrieved from the stored cookie
Password cookie - The first time a visitor arrives to your web
page, he or she must fill in a password. The password is then
stored in a cookie. Next time the visitor arrives at your page, the
password is retrieved from the cookie
Date cookie - The first time a visitor arrives to your web page, the
current date is stored in a cookie. Next time the visitor arrives at
your page, he or she could get a message like "Your last visit was
on Tuesday August 11, 2005!" The date is retrieved from the
stored cookie
JavaScript Cookies
A cookie is often used to identify a user.
Create and Store a Cookie
function setCookie(c_name,value,expiredays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" :
";expires="+exdate.toUTCString());
}
Using Cookies
Cookie
Data stored on users computer to maintain
information about client during and between
browser sessions
Can be accessed through cookie property
Set expiration date through expires property
Use escape function to convert nonalphanumeric characters to hexadecimal escape
sequences
unescape function converts hexadecimal escape
sequences back to English characters
cookie.html
1 of 4
cookie.html
2 of 4
cookie.html
3 of 4
74
75
76
<body>
<p>Click Refresh (or Reload) to run the script again</p>
</body>
77 </html>
cookie.html
4 of 4
Event Modeling
Event
Description
Keyboard events
onhelp
onkeydown
onkeypress
onkeyup
Marquee events
onbounce
onfinish
onstart
Mouse events
oncontextmenu
ondblclick
ondrag
ondragend
ondragenter
ondragleave
ondragover
ondragstart
Fires when the user initiates help (i.e., by pressing the F1 key).
Fires when the user pushes down a key.
Fires when the user presses a key.
Fires when the user ends a key press.
Fires when a scrolling marquee bounces back in the other
direction.
Fires when a marquee finishes its scrolling.
Fires when a marquee begins a new loop.
Fires when the context menu is shown (right-click).

Fires when the mouse is double clicked.
Fires during a mouse drag.
Fires when a mouse drag ends.
Fires when something is dragged onto an area.
Fires when something is dragged out of an area.
Fires when a drag is held over an area.
Fires when a mouse drag begins.
ondrop
Fires when a mouse button is released over a valid target
during a drag.
onmousedown
Fires when a mouse button is pressed down.
Fig. 14.10
Dynamic HTML events.
Event
onmouseup
Miscellaneous events
onafterprint
onbeforeeditfocus
onbeforeprint
onbeforeunload
Description
Fires when a mouse button is released.
Fires immediately after the document prints.

Fires before an element gains focus for editing.
Fires before a document is printed.
Fires before a document is unloaded (i.e., the window was closed or a link was
clicked).
onchange
Fires when a new choice is made in a select element, or when a text input is
changed and the element loses focus.
onfilterchange
Fires when a filter changes properties or finishes a transition (see Chapter 15,
Dynamic HTML: Filters and Transitions).
onlosecapture
Fires when the releaseCapture method is invoked.
onpropertychange
Fires when the property of an object is changed.
onreadystatechange Fires when the readyState property of an element
changes.
onreset
Fires when a form resets (i.e., the user clicks a reset button).
onresize
Fires when the size of an object changes (i.e., the user resizes a window or frame).
onscroll
Fires when a window or frame is scrolled.
onselect
Fires when a text selection begins (applies to input or
textarea).
onselectstart
Fires when the object is selected.
onstop
Fires when the user stops loading the object.
onunload
Fires when a page is about to unload.
Fig. 14.10
Dynamic HTML events.
onabort
Frequently used Events

Loading of an image is interrupted
onblur
An element loses focus
onchange
The user changes the content of a field
onclick
Mouse clicks an object
ondblclick
Mouse double-clicks an object
onerror
An error occurs when loading a document or an image
onfocus
An element gets focus
onkeydown
A keyboard key is pressed
onkeypress
A keyboard key is pressed or held down
onkeyup
A keyboard key is released
onload
A page or an image is finished loading
onmousedown
A mouse button is pressed
onmousemove
The mouse is moved
onmouseout
The mouse is moved off an element
onmouseover
The mouse is moved over an element
onmouseup
A mouse button is released
onreset
The reset button is clicked
onresize
A window or frame is resized
onselect
Text is selected
HTML Forms and JavaScript

JavaScript is very good at processing
user input in the web browser
HTML <form> elements receive input
Forms and form elements have
unique names
Each unique element can be identified
Uses JavaScript Document Object Model
(DOM)
Naming Form Elements in

HTML
<form name="addressform">
Name: <input name="yourname"><br />
Phone: <input name="phone"><br />
Email: <input name="email"><br />
</form>
Forms and JavaScript

document.formname.elementname.value
Thus:
document.addressform.yourname.value
document.addressform.phone.value
document.addressform.email.value
Using Form Data

Personalising an alert box
<form name="alertform">
Enter your name:
<input type="text" name="yourname">
<input type="button" value= "Go"
onClick="window.alert('Hello ' +
document.alertform.yourname.value);">
</form>
JavaScript Form Validation

JavaScript can be used to validate data in
HTML forms before sending off the content
to a server.
Required Field Validation

function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{
alert(alerttxt);return false;
}
else
{
return true;
}
}
}
E-mail Validation
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@");
dotpos=value.lastIndexOf(".");
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false;}
else {return true;}
}
}
JavaScript Animation
It is possible to use JavaScript to create
animated images.
The HTML code looks like this:
<a href="http://www.annauniv.edu"
target="_blank">
<img border="0" alt="Visit AnnaUniv!"
src="b_pink.gif" id="b1"
onmouseOver="mouseOver()"
onmouseOut="mouseOut()" /></a>
The changing between the images is done with

the following JavaScript:
function mouseOver()
{
document.getElementById("b1").src ="b_blue.gif";
}
function mouseOut()
{
document.getElementById("b1").src ="b_pink.gif";
}
</script>
JavaScript Timing Events

JavaScript can be executed in timeintervals.
This is called timing events.
The two key methods that are used are:
setTimeout() - executes a code some time in
the future
clearTimeout() - cancels the setTimeout()
The setTimeout() Method

Syntax
var t=setTimeout("javascript
statement",milliseconds);
The clearTimeout() Method

Syntax
clearTimeout(setTimeout_variable)
document Object
Method or Property
write( string )
Description
Writes the string to the XHTML document as
XHTML code.
Writes the string to the XHTML document as
writeln( string )
XHTML code and adds a newline character at
the end.
This property is a string containing the values
document.cookie
of all the cookies stored on the users computer
for the current document. See Section 12.9,
Using Cookies.
This property is the date and time that this
document.lastModified
document was last modified.
Fig. 12.12
Important document object methods and properties.
window Object
Provides methods for manipulating
browser window
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5


7
8
<head>
10 <title>Using the Window Object</title>

11
window.html
1 of 7
12 <script type = "text/javascript">

13

118 </script>
119
120 </head>
121
122 <body>
123 <h1>Hello, This is the main window</h1>
124 <p>Please check the features to enable for the child window<br/>
125
<input id = "toolBarCheckBox" type = "checkbox" value = ""
126
checked = "checked" />
127
<label>Tool Bar</label>
128
<input id = "menuBarCheckBox" type = "checkbox" value = ""
129
130
<label>Menu Bar</label>
131
<input id = "locationCheckBox" type = "checkbox" value = ""
132
133
<label>Address Bar</label><br/>
134
window.html
6 of 7
<input id = "scrollBarsCheckBox" type = "checkbox" value = ""
135
136
<label>Scroll Bars</label>
137
<input id = "statusCheckBox" type = "checkbox" value = ""
138
139
<label>Status Bar</label>
140
<input id = "resizableCheckBox" type = "checkbox" value = ""
141
142
<label>Resizable</label><br/></p>
143
144 <p>Please enter the text that you would like to display
145
in the child window<br/>
146
<input id = "textForChild" type = "text"
147
value = "<h1> Hello, I am a child window</h1> <br\>"/>
148
<input id = "createButton" type = "button"
149
value = "Create Child Window" onclick = "createChildWindow()" />
150
<input id= "modifyButton" type = "button" value = "Modify Child Window"
151
152
153
onclick = "modifyChildWindow()" disabled = "disabled"/>

<input id = "closeButton" type = "button" value = "Close Child Window"
onclick = "closeChildWindow()" disabled = "disabled"/></p>
154
155 <p>The other window's URL is: <br/>
156
<input id = "myChildURL" type = "text" value = "./"/>
157
<input id = "setURLButton" type = "button" value = "Set Child URL"
158
159
160
window.html
7 of 7
onclick = "setChildWindowURL()" disabled = "disabled"/>
<input id = "getURLButton" type = "button" value = "Get URL From Child"

onclick = "getChildWindowURL()" disabled = "disabled"/></p>
161
162 </body>
163 </html>
window Object
Method or Property
open( url, name, options )
Description
Creates a new window with the URL of the window set to
url, the name set to name, and the visible features set by
the string passed in as option.
Displays a dialog box asking the user for input. The text
prompt( prompt, default )
of the dialog is prompt, and the default value is set to
default.
Closes the current window and deletes its object from
close()
memory.
This method gives focus to the window (i.e., puts the
window.focus()
window in the foreground, on top of any other open
browser windows).
This property contains the document object representing
window.document
the document currently inside the window.
This property contains a boolean value that is set to true if
window.closed
the window is closed, and false if it is not.
This property contains the window object of the window
window.opener
that opened the current window, if such a window exists.
Fig. 12.14
Important window object methods and properties.
Final JavaScript Example

Combines concepts discussed
previously
<?xml version = "1.0"?>
4
5

-->
7
8
9
10

<head>
<title>Putting It All Together</title>
11
12
final.html
1 of 6
13

122
</script>
123
124
</head>
125
126
127
<body>
<p><a href = "JavaScript:allQuotes()">View all quotes</a></p>
128
129
<p id = "quizSpot">
130
<a href = "JavaScript:openQuiz()">Please take our quiz</a></p>
131
132
final.html
6 of 6
133
// variable that gets the last midification date and time
134
var modDate = new Date( document.lastModified );
135
136
// write the last modified date and time to the page
137
document.write ( "This page was last modified " +
138
139
modDate.toLocaleString() );
</script>
140
141
</body>
142 </html>
<?xml version = "1.0" encoding = "utf-8"?>
4
5


7
8
<head>
10 <title>Online Quiz</title>
11
12 <script type = "text/JavaScript">
13

29 </script>
30
31 </head>
32
33 <body>
34
35
36
37
38
39
<form id = "myQuiz" action = "JavaScript:checkAnswers()">

<p>Select the name of the tip that goes with the image shown:<br />
quiz2.html
2 of 3
<img src = "EPT.gif" width = "108" height = "100"

alt = "mystery tip"/>
<br />
40
<input type = "radio" name = "radiobutton" value = "CPE" />
41
<label>Common Programming Error</label>
42
43
<input type = "radio" name = "radiobutton" value = "EPT" />
44
<label>Error-Prevention Tip</label>
45
46
<input type = "radio" name = "radiobutton" value = "PERF" />
47
<label>Performance Tip</label>
48
49
<input type = "radio" name = "radiobutton" value = "PORT" />
50
<label>Portability Tip</label><br />
51
52
<input type = "submit" name = "Submit" value = "Submit" />
53
<input type = "reset" name = "reset" value = "Reset" />
54
</p>
55
</form>
56 </body>
57 </html>
quiz2.html
3 of 3
THANK YOU

Java Script

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Java Script

Загружено:

Авторское право:

Доступные форматы

Introduction to

JavaScript allows for interactivity

A type of programming language

JavaScript Allows Interactivity

How Does It Work?

Simple programming statements

Using Comments at the End of

Simple Program: Printing a Line of

<p>Click Refresh (or Reload) to run this script again.</p>

Precedence and associativity

(Multiplication before addition)

Adding Strings and Numbers

Decision Making: Equality and

Decision Making: Equality and

Decision Making: Equality and

JavaScript Assignment Operators

Increment and Decrement

Postincrement or postdecrement operator

Increment and Decrement

Increment and Decrement

Truth table for the && (logical AND) operator.

Truth table for operator ! (logical negation).

If...else if...else Statement

The JavaScript Switch Statement

Function name any valid identifier

Declarations and statements

Can return either nothing, or a value

No return statement same as return;

Pass each number as argument to

Calling function square and passing it the value of x.

// The following square function's body is executed

// only when the functionVariable

// square function definition

The return statement passes the value of y * y back

Prompt for the user to input three integers.

var maxValue = maximum( value1, value2, value3 );

document.writeln( "First number: " + value1 +

Call function maximum and pass it the value of

"<br />Second number: " + value2 +

"<br />Third number: " + value3 +

"<br />Maximum is: " + maxValue );

Method max returns the larger of the two

// maximum method definition (called from line 25)

return Math.max( x, Math.max( Variables

y and z get the value of variables value1,

<p>Click Refresh (or Reload) to run the script again</p>

The for Loop

The while Loop

The do...while Loop

JavaScript Break and Continue

The continue Statement

JavaScript For...In Statement

JavaScript Popup Boxes

onLoad and onUnload

onMouseOver and onMouseOut

JavaScript Try...Catch Statement

The Throw Statement

12.2 Thinking About Objects

abs( 7.2 ) is 7.2

min( 2.3, 12.7 ) is 2.3

sqrt( 900.0 ) is 30.0

12.5 Date Object

Returns the year as a four-digit number in local time or UTC, respectively.

12.5 Date Object