A Wired.com user account lets you create, edit and comment on Webmonkey articles. You will also be able to contribute to the Wired How-To Wiki and comment on news stories at Wired.com.
It's fast and free.
processing...Retrieve Sign In
Please enter your e-mail address or username below. Your username and password will be sent to the e-mail address you provided us.
processing...Welcome to Webmonkey
- edit articles
- add to the code library
- design and write a tutorial
- comment on any Webmonkey article
Sign In Information Sent
Understand the Basics of JavaScript
/skill level/
/viewed/
JavaScript is an object-oriented scripting language used for web page development. JavaScript was developed under the specifications of the ECMA, and is called client-side scripting. As with any scripting language, there is an object that contains methods, as well as functions that retain their parameters as well as any control flow structures within braces. Normally, JavaScript is embedded between the <HEAD> and </HEAD> tags of a web page. The best way to learn JavaScript is read well-written scripts. We will examine a basic script that states "Hello, World!". While this text string can easily be displayed by using pure HTML, we use JavaScript to exemplify how it works with HTML:
<html> <body> <script type="text/javascript"> </script> </body> </html>
Normally the <SCRIPT> AND </SCRIPT> tags contain the functionality of JavaScript (<Script language="JavaScript">), but in this example we are just declaring
the use javascript as a script type. When using a web developer, you will not get XHTML 1.1 support with the <script type = "text/javascript"> element.
The document object is the currently loaded HTML document, that provides methods for displaying HTML output to the user. The document object's methods are, of course, write(), writeln(), open(), close(), and handleEvent(). The document object's event handlers are onClick, onDblClick, onKeydown, onkeyPress, onKeyUp, onMouseDown, and on onMouseUp.
Here is another sample script:
<script type="text/javascript"> //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("Good morning"); } </script>
The Date object is an object that let's you create, manipulate, and format date and time values. This object is created as follows:
aDate = new Date(), which make its properties that of constructor, prototype. Note that a variable d is assigned to the created object. this created object is stored in variable d, which is then used in syntax using the dot syntax for one of the many methods of the Date object, getHours(). The if statement then tries a condition. If it is true, then the document object's write() method outputs a string "Good Morning" in bold text ().
The for loop is one of the typical control flow structures in any programming reference. Here is a little script to exemplify how JavaScript works with HTML by literally iterating over a header element:
<script type="text/javascript"> for (i = 1; i <= 6; i++) { document.write("<h" + i + ">This is header " + i); document.write("</h" + i + ">"); } </script>
Inserting the corresponding <HTML>, <HEAD>, <BODY>, </HEAD>, </BODY> and </HTML> tags on the top and bottom of this script will enable the user to copy and paste this script into a notepad file with an .html file extension. Once saved in someplace like the Documents folder, fire up a browser like Internet Explorer and type the following in the URL address bar: file:///c:\users\username\documents\myfile.html and hit the F5 button.
- This page was last modified 09:47, 29 January 2009.
Special Offer For Webmonkey Users
WIRED magazine:
The first word on how technology is changing our world.
Registration on or use of this site constitutes acceptance of our User Agreement (Revised 4/2/2009) and Privacy Policy (Revised 4/2/2009).
Wired.com © 2009 Condé Nast Digital. All rights reserved.
The material on this site may not be reproduced, distributed, transmitted, cached or otherwise used, except with the prior written permission of Condé Nast Digital.