Introduction to JavaScript Fall 2009 Class 2
Contents
Introduction
This week, I'll be covering the most basic aspects of JavaScript. In short, this is what you'll need to get up and running. If you have any experience with JavaScript, you are probably already familiar with most of what I'm going to cover this week. However, I think there are some bad practices that get propagated by many (let's say most) JavaScript introductions. I'll talk about not only what you should do, but also what you shouldn't do when writing JavaScript.
Browser Based JavaScript
The first thing I want to make note of is that this class will focus on JavaScript being run in the browser. This is probably the only type of JavaScript that most people have experienced. However, there is are a significant number of other applications for JavaScript that do not rely on running in the browser. We probably won't get into those applications in this introductory class, but many of the concepts learned in this class will apply to both browser based and non-browser based JavaScript.
Including your JavaScript
The first thing that you need to do when writing JavaScript for the browser is include the script on your webpage. As you may already know, JavaScript is included on the page using the <script> tag. Unfortunately, it's not quite as simple as that. There are several ways of using the <script> tag and some ways have advantages over others.
A Basic Script Tag
Let's start with a basic script tag:
<script type=”text/javascript”>
// your code here
alert(‘hello’);
</script>
Nothing too complicated. The code section opens with a <script> tag and closes with a </script>, and your code goes between the opening and closing tags. One other important thing to note: the type attribute of your script tag needs to be set to text/javascript. You may notice that some browsers let you get away with not adding this attribute. Don’t count on this being the case. Always include the type attribute. It’s required by the standard and it guarantees your code will run.
But what if you wanted to include another file that contains your JavaScript? To do this, you simply add the src attribute and set it to the name of the file that you want to include:
<script type=“text/javascript” src=“hello.js”> </script>
The code for your page is no longer between the opening and closing script tags. Instead it's in the file hello.js, which contains just the code for your page:
// your code here alert(‘hello’);
This last method, including the JavaScript from an external file, is the method that will use in class.
Placing the Script Tag
So now you have a <script> tag. But where does it go?
Technically, the <script> tag can go anywhere in the head or the body of your page. All of these techniques will work:
At the top of the body
<html>
<head>
</head>
<body>
<script></script>
<p>some content</p>
</body>
Or at the bottom of the body
<html>
<head>
</head>
<body>
<script></script>
<p>some content</p>
</body>
Or in the head of your document
<html>
<head>
<script></script>
</head>
<body>
<p>some content</p>
</body>
You may see people recommend putting the script tag at the bottom of the body. However, there is somewhat of a consensus from web experts that the script tag belongs in the head of your page.
The last method, putting the tag in the head for the page is the one we will use for class
How NOT to Include JavaScript
There are also ways to add JavaScript that technically work, but are not recommended. Adding JavaScript using these techniques will be unacceptable for this class. Below, I have listed some of those techniques:
Inline JavaScript Handlers
<a onclick=“doSomething()”>Bad</a> <img onmouseover=“hover()” onmouseout=“unhover()” /> <a onclick=“MM_badJavaScript(true)“>Bad</a>
Abusing Anchor Tags
<a href=“javascript:void(0)”>Bad</a> <a href=“#” onclick=“doSomething(); return false;”>
I want to repeat what I said before: adding JavaScript using these techniques will be unacceptable for this class.
Progressive Enhancement and Unobtrusive JavaScript
In the sections above, I may have sounded somewhat opinionated about the right and wrong ways to include JavaScript. In truth, some of it is opinion. After all, if the JavaScript works like you wanted, who's to say that you did it the wrong way?
Web development, like any profession, has it's own best practices that have developed over time. In the bad old days of the web, people where somewhat careless about how they organized their web pages. This often led to pages that were hard to maintain in the long run. Often, these pages worked great under the best of circumstances, but once one thing went wrong they fell completely apart.
To help combat these types of sites, web experts decided that pages should start out with a core of solid functionality, with the fancy things added on top to enhance the user epxerience. In a nutshell, this idea is known as progressive enhancement. The following series of articles from the (fantastic) web development magazine A List Apart summarize the concepts, and hopefully give you an idea of why this class will follow the rules that it does.
Progressive Enhancement Articles
- Understanding Progressive Enhancement
- Progressive Enhancement with CSS
- Progressive Enhancement with JavaScript
Activities
Activity 1
Getting started with Firebug
- 1. Install Firebug
- 2. Click on the little bug that appears in the bottom right corner
- 3. Go to the CSS Zen Garden
- 4. Use Firebug to explore the page. Notice that you can select elements, see their HTML and the HTML
rules applied to them. You can also change the HTML and the CSS.
Activity 2
Let's create a very basic page with some JavaScript
- 1. Create a folder for the page called page (or whatever you want to call it)
- 2. Create a new document called index.html
- 3. Add the following code to index.html and save it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd%22>
<html>
<head>
</head>
<body>
</body>
</html>
Note: make sure that there is no whitespace beforethe DOCTYPE declaration. You would be surprised (or maybe you wouldn't be) how many problems develop if you forget this rule.
