Lesson 1 - Getting The Language Out Of The Way

Basic Lingo

These are just some key terms we'll be using throughout the tutorial which you should understand:

Object
Essentially anything on the webpage including the webpage document itself, a table within the webpage, a button on a webpage or a link on a webpage. Each object has certain properties, such as color or background color. For example, the web page background color is defined by "document.style.background"; in order to change that, you would type something like "document.style.background="red"". Each object can also be accessed through a hierarchy called the document object model. If you have text a box called "apple" within a form with an id of "banana", then the contents would be accessed by "document.getElementById('banana').apple.value", because the document is at the top of the hierarchy, then you have a form, which you access using getElementById, which, as the wording suggest, gets an element by the id, then the text box, and then the text box has a property, "value" -which is whatever is inside the text box (we'll explain all this in more detail later - that's just an example to get you started).
Method
A method is an action that can be done with an object. For example, you can open a new document with "document.open()" - where open() is the method. You can write "hello world" in the document with "document.write("Hello World")", where write() is the method. In that case you would also have an argument, "Hello World"; an argument is a variable in a program, to which a value will be assigned when the program is run. (Again, this will be explained a bit later.)
Event
An event is something that happens on the page (often used to trigger methods). The page loading, the user clicking a button, and the user scrolling down the page are all events. Pretty much everything that happens on the page is an event. Events are most often used to trigger methods. If you want to write "hi" to a page when a user clicks something, you would type "onclick="document.write("hi")""; the event is onclick, and you say once the event happens, the document will have "hi" written to it by the method write() (again, this will all be explained in subsequent lessons).
Form
A form, defined by <form action="text/javascript">, is an area that contains form elements.

Input
Input is the most common form element - defined by <input/>. It must be surrounded by divs inside the form tag (for validation purposes). Some different types of inputs are text fields (<input type="text"/>), radio buttons (type="radio"), checkboxes (type="checkbox"), and it can also have a submit button (type="submit").

Basic Format

Javascript is divided into two sections of an html page - the head and body. In the head you define your javascript functions, and you call them in the body. Here's a basic format.

So, like in any html page, you start with HTML tags:

<?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">
<html>
</html>

Now first we'll focus on the head part (which you introduce with head tags). Here's where you say that the page will have javascript - you do that with script tags.

<?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">
<html>
<head>

    <script type="text/javascript">

    (all of your JavaScript functions)

    // - End of JavaScript - -->
    </script>

</head>

And then you have the body tags, just like any other HTML page:

<body>

    (The actual contents of your page.)

</body>
</html>

Inside the body tags, you'll have things called forms and inputs which will be explained in chapter two.

You can also set up your javascript externally. If you've read "Getting Down with XHTML" - you know that you can externally do css by creating a .css page, and then linking to that page in the head. The same goes with javascript - let's say we've created a javascript file, called ourjavascript.js

<html>
<head>

    <script type="text/javascript" src="ourjavascript.js" ></script>

</head>

Before you continue on to the next chapter we'll give you a short taste of javascript which will be explained in detail in chapter 2. Look it over and see if you can work out any part of it on your own.

Example

Code

<?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">
<html>
<head>

<script type="text/javascript">
function MsgBox(textstring) {
	alert(textstring);
}
</script>

</head>

<body>

<form action="text/javascript" id="aform">
<div>
<input name="text1" type="text"  value="Type Some Text"/>
<input name="submit" type="button" value="Show Me" onclick="MsgBox(document.getElementById('aform').text1.value)"/>
</div>
</form>

</body>
</html>

Result

Congratulations, you have finished Lesson 1;

next lesson | home page