Lesson 1: The Basics

Websites consist of many different technologies. HTML is the basis and CSS provides the complimentary design attributes to HTML. Javascript is a technology which allows you to let your website become more than just a page of text and images.

What is Javascript?

Javascript is a client-side scripting language. Client-side means that all of the processing and work is done on the client’s end, which means inside their Internet browser (instead of on your web server, with server-side scripting languages like PHP). A scripting language is a language in which you can script programs in. Scripting differs from other types of programming languages like C++, which is a compiled language, in that it is never compiled, but directly processed from the script itself.

Javascript allows you to do a number of things, from adding rollover effects, show pop-up messages, do math, show wacky messages, and a million other things. To use Javascript is to program in a programming language, so it would benefit you to read over the lessons in the program section as well, which discusses basic programming fundamentals and theories, which are common throughout all programming languages. The lessons in this section will be strictly different aspects of Javascript, so if you don’t, you’ll miss out on some very important areas of your development and knowledge.

One thing to keep in mind is that Javascript is a scripting language run within the Internet browser, so that means the scripts are limited to the amount of system power provided to the browser, so you have to be sure to write as efficient code as possible, and look for alternative ways to do certain things. Often times, if something is having difficulty working in Javascript, it may be better suited to a server-side scripting language like PHP, which can run substantially more powerful scripts.

Adding Javascript to HTML

There are two main ways to add Javascript to HTML. You can add “inline” Javascript which is embedded in your HTML document, either in the header or in the body elements, or in an external file which is linked to your HTML. It is usually best to do the latter, because you can reuse the code in multiple files without having to reload it each time.

To use either inline or external source, you’ll use the script element (<<>). Script elements aren't necessarily just for Javascript, so you have to specify the type attribute to be "text/javascript", which tells the browser that this code is Javascript code and not some other code.

The difference between the two methods is that with an external source file you supply a source ("src") attribute to the script element. To place it inline, you simply place the code directly within the opening and closing script elements. You can actually do both with a single script element, however the inline code can't communicate with any external files if you have them in the same element. This will be explained better when we cover functions and pseudo-classes.

Here is an example of: linking an external source file, having inline code, and doing both with one element:

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

<script type="text/javascript">
  alert("Hello World.");
</script>

<script type="text/javascript" src="mycode.js">
  alert("Hello World.");
</script>

Comments

In Javascript, as well as just about any other programming language, has a mechanism for leaving comments. Comments, just like other connotations, are simply messages left in the code that comments on what the code is meant to do, or explains more complex comments.

There are two methods for commenting Javascript. If you want to comment just a single line, you can use the double-slash comment (//) followed by your text. After the double-slash, any text that follows will be a comment and will not be run as code. You can have this at the beginning of the line, or near the end of a line.

The other method involves a pair of slashes and asterisks (/* */), where the comments go in-between the asterisks. You can have this be just a single line, or have it span multiple lines. In between the asterisks is just text and is never run as code. Anything outside of the slashes is run however.

Here are a few examples:

if (haveCode) // This is a comment that isn't run.
// This line is just a comment and ignored
  alert("Hi")

/* This is a multiple line
 comment. All of this is
 just a comment and not processed as
code.
*/

alert("hi") /* more comments */

/* This is valid, but is ugly to follow a comment by code*/ alert("Hi")

You should always comment your code. Ideally, every line (or group of lines) should have at least one short comment so you can remember what you meant, along with others who may work on your code after you.

Event-Based vs. Procedural-Based

In programming there are two main coding styles when it comes to when the code runs. There is event-based and procedural-based. In event-based, the code doesn’t do anything until the user does something to cause an event, such as clicking a button. Procedural-based runs as soon as it’s loaded without awaiting on users. You can also combine these two styles. Video games are an example of a combination; they have both things that move without the user (procedural-based) while they also have the characters which are moved when the user hits buttons (event-based).

We’ll cover these two styles in more depth in a Programming lesson. What I’d like to discuss in this section is how to utilize these two styles in Javascript.

Procedural-based code is fairly simple. You simply bring in your code from an external file, or place it inline, outside of any functions or classes. As soon as the code loads, it’ll do whatever you tell it. The brief example above is an example of procedural code. As soon as the code, it will bring up a pop-up box that says “Hello World.”.

Event-based code is a bit more complex, and requires the use of functions. We will cover functions in an upcoming lesson. You attach these functions to the HTML (such as links and buttons), but utilizing the “on” attributes. There are a number of on attributes, such as onclick and onsubmit. When the specific on event is performed, it will call the function which will run the specified code. We’ll cover on attributes in a lesson after we’ve covered functions.

What to Program With?

There are various IDEs (Integrated Development Environment) you can choose from for Javascript. However, we will simply be using Textpad or Dreamweaver (hand-coded) to create our Javascript. In the future, we’ll have a review up of various Javascript IDEs you can look at and discover which one works best for you.

Everyone makes mistakes, it’s inevitable. When they do, we need a way to figure out where the problem is. There are lots of error checkers available. Nearly all IDEs come built-in with one. However, there is a simple error checker which you are likely to have already, found in Firefox.

If you click “Tools” you’ll see “Error Console” in Firefox. In this console it will list various errors, including Javascript and CSS errors. If you want to check the errors in your Javascript, they will be shown when you run the HTML document containing or linking your code. Usually this console will get cluttered from errors from other sites you visited. An easy way to use it is to hit “Clear”, then run your file again and look at the Error Console. All that will be in the error console are errors in your code. It will even tell you the line number where the error is found.

We’ll look at common errors in a future lesson.

In this lesson we covered the basics of what Javascript is and how to get it in your HTML. In the next lesson we’ll create two different versions of the classic first program: Lesson 2: Hello World!