|
Free webhosts Streetview photos |
| |||
IntroductionJavaScript is a well featured object oriented programming (OOP) language. It is *not* Java. It is a more light weight language used exclusively on web pages to manipulate objects on the page and embedded in the browser itself. Like all programming languages, JavaScript's basic purpose is to pick up on the actions of the user (your web page's viewers) and react to them. This is referred to as "interactivity" and JavaScript is a powerful tool to make your web pages interactive. JavaScript does this through a series of Events, Functions, and Objects. JavaScript uses Events to determine what the viewer is doing. There are all sorts of Events like the famous "onMouseOver" event that initiates the common image rollover or pop up menu. Events are added to HTML tags just like attributes and point to a function. When the action occurs to the element that has the Event coded in its tag, a JavaScript function is called and run. This is referred to as a "function call". JavaScript uses Functions to do things at the right time. An Event is detected and a function is "called" meaning it begins to run. A function contains JavaScript "statements" that manipulate an Object in some way. This is done dynamically in real time. An object is something on your web page or built into the browser that JavaScript recognizes. The browser window the viewer is using is referred to as "window". The page loaded in the window is the "document" or "window.document". An image on your page named with the NAME attribute to, say, NAME="pooky" would be referred to as "window.document.pooky". Notice the dots in the JavaScript reference above. That's what separates a "parent" object from a child object. Parent objects contain child objects. The "window" object contains the document which in turn contains the image named "pooky". Using this list of objects to point to a single object using names and dots (.) is called a JavaScript Object reference. Once we point to an object with a reference like above, we can use JavaScript Methods and Properties to manipulate that object. A method is something an object can *do* or *call on*. A property is a *characteristic* of an object that can be dynamically changed by JavaScript. Background Color Example - The EventLets make some JavaScript to better understand the Event, Function, and Object ideas described above. We'll be changing the background color of a web page when an event occurs. A page's background color is a Property of the "document" object. That means it's a property of the web page that can be manipulated by JavaScript. Lets start out by making a simple web page with a white background: <html> The above makes a pretty simple page with a white background color and some text. Now lets get cooking with JavaScript. First lets make up a name for our first function. I'm going to use "change_color". Not an exciting name, granted, but descriptive. It's a good idea to make your function names descriptive to help you keep up with your code. Now lets pick an Event to start our JavaScript. You don't know any Events at this point, so lets use the "onMouseOver" Event we mentioned above. To use this we'll add a link (<a>) and use the onMouseOver Event in the <a> tag to trap the onMouseOver Event and call our function: <html> Not overly complex. We just added a link below the paragraph. The HREF of the link goes only to the top of the current page ("#"). What's new is that we've added a JavaScript Event! We type in "onMouseOver" just like any other attribute. We set it equal to whatever function() we want to run when the event occurs. What the above Event will do is run the JavaScript function (that we still have to make) called "change_color()" when the mouse hovers over the link's text -- "Hover Here To Change Background Color". A couple of notes. First, JavaScript is case-sensitive. We can add an event using any type of capitalization we'd like, but that's all. The function "change_color()" is not the same as "Change_Color()". This is a big difference between JavaScript and HTML. Pay attention to capitalization. Secondly, notice the parentheses "()" after the function's name. These are essential and the JavaScript won't work without them. We'll learn how to use these later, but for now just remember to always include them in a function call. Finally, notice that the function is nested in quotes. This is essential as well. Oh yeah, what we just did adding the Event is a "function call". It "calls" on a Function when an event occurs. Background Color Example - The FunctionNow that we have the Event set up, we need to code the Function. We can put JavaScript right on our pages by using <script> tags in the <head> of our document:
<html> You can put the <script> and </script> tags anywhere in the <head>, but generally they're put at the end of the <head>. Notice the LANGUAGE="JavaScript" attribute in the <script> tag. That tells the browser to expect JavaScript as opposed to the less popular VB Script. It's not essential, but it sure doesn't hurt. Now lets make our function. No big problem here but pay special attention to the syntax:
<html> Begin making the function by typing in "function" between the <script> tags. Now make a space and type in the name you gave your function. This needs to be the same name as in the Event's function call. Add the parentheses. They are just as essential here as in your function call. Finally make a set of "curly braces" -- { }. Your JavaScript statements to change your page's background will go between these brackets. We'll wrap up the JavaScript by writing the statement that will change the page's background color. The background color is a Property of the "document" object and referred to as "document.bgColor". Remember that capital "C" in "bgColor" -- JavaScript is case sensitive. We'll change bgColor to red:
<html> That's it. Now when the link is hovered over, the page's background will turn red. Click here to see what we've got so far. There is a whole world of JavaScript Objects each with different Properties, Methods, and child, or sub-objects, to explore. Let's learn a way to change the color of our text on this same sample page when the background changes. Adding A New JavaScript Statement To Our FunctionThis couldn't be easier. We've already got an Event/Function set up. All we need to do is add a second statement in our current function. To change text color we'd add a statement to change the "document.fgColor". This stands for "foreground color". Don't forget to capitalize the "C" in "fgColor" -- JS is case-sensitive: NOTE: Netscape and some configurations of Opera won't show the change in "fgColor". Don't sweat it. We'll discuss all sorts of Netscape workarounds throughout the JavaScript tutorials.
<script language="JavaScript"> This new statement will change the text in the <p> tag green at the same time that the bgColor is turns to red. A couple of things to note. First, notice the semi-colon (;) at the end of our first statement. This is how we separate, or "delimit", JavaScript statements in the same function. Always separate JavaScript statements with a semi-colon (;). There is no space between the first statement and the semi-colon. In fact, it's a good practice to end all JavaScript statements with a semi-colon, even the last one in a function. Also notice that I used a line break to put each statement on different lines. This isn't essential, but it makes your code easier to read. Try making this function from scratch several times to get used to the syntax. JavaScript is much pickier than HTML or CSS. In fact, it's downright unforgiving with spelling, capitalization, and syntax. Adding A Second FunctionIn our current example, we changed the colors of the background and text, but we have to reload the page to change them back to white and black respectively. Lets add a second function that will reset our page when the mouse is moved away from our link. To do this we need to detect when the viewer has moved the mouse off of the link. We use the "onMouseOut" Event to do this. We'll add this Event to our current <a> tag: <a href="#" onMouseOver="change_color()" onMouseOut="change_back()">Hover Here To Change Background Color</a> I've called this new function "change_back()". You'll notice that we add onMouseOut just like we did onMouseOver. We can add as many Events to a tag as we want, but only one function per Event. Now lets add the second function in our <script> tags:
<script language="JavaScript"> You should be able to recognize what we've done. The change_back() function is a copy of the change_color() function except we've changed the values for the bgColor and fgColor Properties of the "document" Object back to white and black. Click here to see a sample of the finished page. |
|||
| |||