Embed Size (px)
Citation preview
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 Objectdocument.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 ConfirmationsAlert 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.comonMouseOver=“msg(‘Click here for Yahoo!’); return true;”
Altering the Status BaronMouseOut = “msg(‘ ’); return true;”</a></body></html>
