Sei sulla pagina 1di 17

Creating Simple JavaScripts

Formatting Scripts
Date and time Entry
Determining Browser Information
Objects
Linking Scripts to Windows Events
Altering the status Bar
Formatting Scripts
JavaScript scripts are set apart from the rest of the html in a web page by
using the <script> tag.
<script>
Here is some JavaScript
</script>
The script accepts a parameter called Language, which is used to specify
the type of scripting language that is being used.
<script Language=JavaScript> </script>
The html comment takes the form of <!-- To mark the beginning of a
comment and -- > to mark the end of a comment.
<!-- This an Html Comment.
It will be ignored by the browser -- >
Formatting Scripts
Browsers that understand the script tag ignore the Html comment and
execute the script.
If you need to make comments inside the script tag, you can do so using
JavaScript comment.
Date and Time Entry
The Date object is used to work with dates and times.
Date objects are created with new Date().
<script Language=JavaScript>
rightNow = new Date()
</script>
Methods of Date() object
getDate() - Returns the day of the month (from 1-31)
getDay() Returns the day of the week (from 0-6)
getFullYear() Returns the year (four digits)
getHours() Returns the hour (from 0-23)
getMilliseconds() Returns the milliseconds (from 0-999)
Date and Time Entry
getMinutes() Returns the minutes (from 0-59)
getMonth() Returns the month (from 0-11)
getSeconds() Returns the seconds (from 0-59)
setDate() Sets the day of the month (from 1-31)
setFullYear() Sets the year (four digits)
setHours() Sets the hour (from 0-23)
setMilliseconds() Sets the milliseconds (from 0-999)
setMinutes() Set the minutes (from 0-59)
setMonth() Sets the month (from 0-11)
setSeconds() Sets the seconds (from 0-59)
Date and Time Entry
Example
<Html>
<head> <Title> Date and Time Example </Title> </head>
<body>
<script language=JavaScript>
<!--
rightNow = new Date();
var status;
hour = rightNow.getHours()
minute = rightNow.gteMinutes()
if (hour > = 13 )
status = PM;
else
status = AM;
if (hour>12) hour = hour 12;

Date and Time Entry
Document.write (hour, :, minute,status);
Month = rightNow.getMonth();
Month = month + 1;
Day = rightNow.getDate();
Year = rightNow.getYear();
Document.write( , month, /, day, /, year, );
-- >
</script>
</body>
</html>

Determining Browser Information

The navigator object contains functions that are designed to return
information about the browser, including the name and version of the
browser and even the installed plug-ins.
Objects

JavaScript is an object oriented programming language
That means that elements within the language are treated as objects that
can be used in different scripts.
Another advantage of objects is that they have methods and properties
associated with them.
In javascript, the syntax for using objects is:
Object.Method.Property
Using the Navigator Object
JavaScript has an object called navigator, which contains properties and
methods that can be used to find information about the version,
configuration, and features of the current browser.
Using javascript to determine information about the browser
<html>
<head> <title> Navigator installed plug-ins </title>
<h2> Navigator </h2>
<script Language=JavaScript>
var plug_count = navigator.plugins.length;
for(var counter=0; counter < plug_count; counter++)
{
var plugin_num = counter + 1;
document.write( Plug In Number : + plugin_num);
document.write(navigator.plugins[counter].name);


Using the Navigator Object
document.write(navigator.plugins[counter].filename);
}
</script>
</head>
<body> </body>
</html>


Linking Scripts to Windows Events
In addition to Javascripts that are executed immediately when a page
loads, it might also be useful to have a scripts that executes when a
specific task occurs.
Example
<html>
<head> <Title> Alert on Unleaving </title>
<body onUnload = alert(Leave this page at your own peril!);>
. </body>
</html>
Alert Boxes and Confirmations
Alert Box
An alert box is often used if you want to make sure information comes
through to the user.
Example
<html>
<head>
<script type="text/javascript">
function show_alert()
{
alert("I am an alert box!");
}
</script>
</head>
<body>

<input type="button" onclick="show_alert()" value="Show alert box" />

</body>
</html>
Alert Boxes and Confirmations
A confirm box is often used if you want the user to verify or accept
something.
Example
<html>
<head>
<script type="text/javascript">
function show_confirm()
{
var r=confirm("Press a button");
if (r==true)
{
document.write("You pressed OK!");
}
else
{
document.write("You pressed Cancel!");
}
}
</script>
</head>

Alert Boxes and Confirmations
<body>

<input type="button" onclick="show_confirm()" value="Show confirm box" />

</body>
</html>

Altering the Status Bar
JavaScript allows to manipulate the text that appears in the status bar.
The JavaScript window object contains properties and methods for
manipulating the text in the staus bar.
Example
<html>
<head> <title> Changing the Status Bar </title>
<script Language = JavaScript>
function msg(text)
{ window.status = text; }
</script>
</head>
<body>
<h2> Manipulating Text in the Status Bar. </h2>
<a href=http://www.yahoo.com
onMouseOver=msg(Click here for Yahoo!); return true;

Altering the Status Bar
onMouseOut = msg( ); return true;
</a>
</body>
</html>

Potrebbero piacerti anche