Interactivity, shminteractivity. Most web pages that claim interactivity really mean you can click on hyperlinks to go to new pages. Even web pages that have CGI scripts behind them don’t really seem all that interactive: Fill out a form, hit the Submit button, and wait. It’s more like throwing bottles into an ocean and hoping for a meaningful reply.
Happily, we have JavaScript. With JavaScript, images can
swap when you move a cursor over them, form elements can
influence each other on the fly, and
calculations can be made without having to resort to a CGI script. There’s none of this submit-and-wait stuff — everything happens on your web page while you’re playing with it.
One of the best things about JavaScript is that you can do a great deal with very little programming. You don’t need a fancy computer, you don’t need any software other than a word processor and a web browser, and you don’t need access to a web server; you can do all your work right on your own computer.
Even though it’s simple to work with, JavaScript is a complete programming language, so as you learn more complicated JavaScript, you’re also learning the basics of computer programming. If you want to move on to other programming languages, like Perl, C, C++, or Java, JavaScript is a great introduction.
Enough hype about JavaScript. On to hype about this tutorial.
All About This Tutorial
This five-part tutorial aims to get you writing useful JavaScripts immediately. And not just silly JavaScripts — this tutorial will teach you how to build the browser of your dreams. As we go through the examples in the course, you will build a fancier and fancier browser that you can tweak to your heart’s content.
Here’s a brief outline of what you will learn each day, with an example of what you’ll be able to do by the end of that lesson.
- Part 1: Introductions, some examples, and your first JavaScript (example)
- Part 2: Variables, if-then branching, link events, and image swaps
- Part 3: Windows, frames, and the Document Object Model
- Part 4: Loops, arrays, and functions
- Part 5: Forms, forms, and more forms
Before we jump in, here are few important things to note about JavaScript and this tutorial.
First, JavaScript is not
Java.
Second, sometimes JavaScript isn’t JavaScript! It turns out that different browsers deal with JavaScript differently. In fact, different versions of the same browser handle JavaScript differently. So always double-check your JavaScripted pages on as many different browsers (or even platforms) as possible.
Third, this tutorial is not a substitute for a good reference book. JavaScript is very rich, and although you’ll learn most of the grammar of JavaScript here, you won’t learn the entire language. So, if you like what you’ve learned here and are serious about writing your own JavaScripts, go out and get a book. Whatever book you get should have an extensive reference section. I suggest
JavaScript: The Definitive Guide by David Flanagan, or, ahem, Dave Thau’s
The Book of Javascript: A Practical Guide to Interactive Web Pages.
Fourth, view source! The best way to learn JavaScript is to look at scripts other people have written. JavaScript, just like HTML, can be viewed by selecting View Source on your browser. Do it frequently!
Finally, as with HTML, the best way to learn JavaScript is to experiment freely and often. At several places in this tutorial, you’ll be given the opportunity to try things out. Don’t be afraid to expand beyond the exercise to try new things.
All right, enough with the disclaimers. Let’s write some JavaScript.
Down to Business
Click here to see an example of JavaScript in action!
If you view source, you’ll see something that looks like this:
09 | Thau's JavaScript Tutorial |
15 | <script language="JavaScript"> |
23 | alert("Soon, I will rebuild my browser!"); |
Here are the key things to notice:JavaScript usually goes between the </title> tag and the </head> tag. Like HTML, JavaScript is just text that can be typed into a word processor. It goes right into the HTML that describes your page. (Although I’ve only shown JavaScript in the header of the HTML page, you can also put JavaScript in the body. You’ll see an example of this in the next lesson.)
The beginning of a bit of JavaScript begins with <script language="JavaScript">
Right now, you don’t really have to put the language="JavaScript" element in there because JavaScript is the default script language for all browsers. However, this could change, so it’s a good idea to include the language element.
Everything between // and the end of a line is a comment and will be ignored.
Comment, comment, comment! A basic rule of good programming style is that you should always think about the next person who has to look at your script. It might be a friend, a co-worker, an employer, or it could be you in three months. The easiest way to make sure you’ll understand your own script in three months is to comment freely and often. If you want to comment a huge block of text, you can put it between /* and */ like this:
alert("Soon, I will rebuild my browser!"); calls up a simple dialog box with the words “Soon, I will rebuild my browser!” inside.
Here’s your first piece of JavaScript:the alert method. You’ll learn more about how this line works in the next lesson. For now, you just need to know that you should end it with a semicolon, and put the text you want in the alert box between quotes.
The beginning of a bit of JavaScript begins with <script language=”JavaScript”> tag. No rocket science here. Easy as HTML. Simple, right? Well … actually, there’s one complication.
Hiding JavaScript
The following discussion on hiding JavaScript is obsolete since all modern browsers understand the <script> tag. Further, using this technique to hide a script is NOT XHTML compliant. It is, however, an interesting (historical) hack that’s worth a read.
The problem with the last example is that some old browsers don’t understand the <script> tag. These browsers will treat your JavaScript just like HTML, so the page will come out like this:
5 | alert("Soon, I will rebuild my browser!"); |
Which isn’t great. Luckily, there’s a trick involving HTML comments:
09 | <title> blah blah blah </title> |
13 | <script language="JavaScript"> |
17 | <!-- hide this stuff from other browsers |
The reasons why this trick works evaded me for a while, and you can use it without understanding why it works. However, if you really want to know,
here’s why the comment trick works.
Once you’ve conquered that assignment, take a minute to read our review of Lesson 1.
OK! You’re well on your way to understanding JavaScript. Here’s a quick review of what was covered today:
- The greatness of JavaScript
- Browser-compatibility problems
- Other ways to learn JavaScript
- Where JavaScript goes on a page
- How to comment (freely and often!)
- Hiding your JavaScript from unsavvy browsers
- How alert boxes work
Today was just an introduction to give you a feel for how things work. Next time we’ll start getting serious.
Topics for next time:
- What sorts of information JavaScript knows about
- How JavaScript stores that information
- How JavaScript decides what to do
- How to do those nifty image swaps
No comments:
Post a Comment