YOU ARE HERE: HOME
> WEB DESIGN ARTICLES > BEGINNERS JAVASCRIPT-PART
2
November 25th, 2003 : by Stefan Mischook
Forward:
This is only the 2nd installment of a series of articles designed to teach total beginners how to program, providing a foundation to learning many of today's most prominent languages that include JavaScript, PHP, Java and several others.
The eventual goal is to teach you how to program using the DOM. I move fairly slowly in the articles, attempting to cover any stumbling blocks that may hinder people.
When learning something new, things may not be clear at first. You just need to push on because sooner than you think, things will 'snap' into place for you. Soon you will be wondering why you thought it was hard in the first place!
One of the reasons people find programming so challenging is that they do not get a good enough grasp of the basics. In my own process of learning to program (have picked up 8 languages so far) I have always found that every time I got confused was because there was some basic concept I did not grasp. The solution is always to go back to the basics, because once you have them, everything else is easy! Why did I mention all this? I wanted to explain the reasoning behind my approach to teaching programming in these articles. The first two articles are theory heavy and I take my time to slowly introduce these core concepts of programming. There are some actual programming examples but they are short. Once the basic concepts are understood, we will jump into practical usable programming examples, which by that time will be much easier for you than if I would have jumped in right away.
The DOM (stands for: Document Object Model ) is a framework that allows you to have total control over your web pages using JavaScript. What do I mean by 'total control'? I am talking about being able to add, remove, and edit text, images, and tables and any other element on the page on the fly.
Easily build dynamic menus, change the font size of a paragraph on your page when someone clicks a link or image etc. I won't go on, but you can do all this and much more and it will work with all the modern browsers since the DOM is a standard that the browsers adhere to well.
Introduction to Object Oriented Programming
Object-oriented programming is the 'in way' to write software and is the foundation of many languages including JavaScript. To truly understand how to use JavaScript you must understand some of the basic concepts of object-oriented programming.
I will only be teaching you what you need to work with JavaScript so don't worry! But what you will learn about object-oriented programming is applicable to every object-oriented programming language out there, and that's a good thing.
OOP (OOP is short for: O bject O riented P rogramming) is a style of programming that is used in many of today's most prominent languages that include Java, PHP, C++, JavaScript and several others. In a nutshell, OOP attempts to build programs by conceptually breaking it up into a series of individual objects (programmed objects) that interact with each other to create a program. In a sense, these objects are like mini-programs inside one big program.
Another way you can think of it, is as a business (like Microsoft or McDonalds) where the business is the program and the objects are the people who work at this business and with each other to get the work done.
So for example, let's say at a McDonalds we have Wang who works the cash, Tyrone who makes the burgers and John who washes the floors. These three guys are in of themselves individual objects (a little insulting I know, but hey this is just an example!) and each of these guys (objects) have their own function (things that they do) and together they make that McDonalds work. Of course there are several others working at McDonalds, but the point is that all these individuals work together to do the job of running the restaurant.
So when you're Object Oriented Programming you are creating a bunch of individual objects that work together to make the program as a whole. I will get to an example in just a minute, but before I have two questions that must be answered:
The most prominent of the old styles of programming is procedural programming where software was designed based on processes. Ok what does that mean? It means that we just built programs in the order that they would do things. I don't want to go into details because it would only serve to confuse you, and today you want to learn OOP anyway! The bottom line is that this old style of programming got messy really fast and made for buggy software that was (and still is) hard to maintain.
You build software in the OOP style to save time and money; OOP based software is easier to build and easier to maintain. Humans like to put things in box's or categories to help them organize them; OOP is essentially doing that.
Since this is a website about building websites we are going to concentrate on programming with web pages using JavaScript. In web pages there are many objects that we can manipulate with JavaScript. One of the base objects is the window object. This object represents the browser window and as such provides ways to affect changes to browsers' windows with JavaScript.
As I mentioned above, each of these objects (inside the program) have things that they do. These 'things' in programming talk are called 'functions'. So basically a function is a thing that an object can do. Objects can potentially do many things; as such you will often find objects that have many functions.
Ok, I don't want to confuse you, but I need to clarify something: functions can also be called 'methods'. So why call them functions or methods when they have the same meaning, why not just call them functions? The reason is simple and rather nerdy: functions are just slightly different from methods! For our purposes, it is sufficient to say that when a function exists inside an object, it is called a method. I will not go beyond that explanation because to know the ultra-nerd details will have no impact on your ability to program. The only reason I mention it is because when you start reading about JavaScript (and other OOP languages) your will see the word 'method' used a lot.
An example of a built in method/function:
One function (technically a method) of the window object is 'alert'. Here is a simple example of how to actually use the alert function:
window.alert("This is an alert box!");
This simple line has a lot of stuff going on. Once you understand what this line is actually doing, you will be well on your way to becoming a JavaScript programmer.
Since we are programming for use in the web browser (like Internet Explorer for example) all of our programming code is being written to 'talk' to the browser and tell it what to do. In the line of code above we are first telling the browser that we want to use the built in window object. We do this by starting with the keyword 'window'. Ok fine, the browser knows now that we are using it's built in object 'window'. Like most objects, the window object has built in functions/methods. So to tell the browser what method we want to use (that the window object has), we do this by naming it. In this case we want to use the 'alert' method so we type in a period after the keyword 'window' and then the name of the method that we want to use, in this case it is 'alert':
window.alert
The period in-between the words 'window' and 'alert' acts like pointer for the browser to use and understand. Essentially by inserted the period between the words, the browser knows that the second word (in this case 'alert') is a method inside of the window object. If you were to do this:
window alert
The browser would have no idea what 'alert' was about. So in other words the period (.) in-between the words, joins them together. This is called dot notation and is used a lot.
Next part of this line of code is much easier to understand:
("This is an alert box!");
Taken from this:
window.alert("This is an alert box!");
All methods can be fed information that the method can do something with it, hold on to that thought. You feed the method this information by placing it inside the brackets () that sits in front of the method name. In the above example we are feeding the alert method the text:
"This is an alert box!"
The browser knows it is text because the text: 'This is an alert box!' is sitting in-between quotes (""). In programming, anything in-between quotes tells the computer that it is plain text and that there are no special key words telling it to do something.
When you are feeding a method/function information this way, it is called 'passing arguments'. In this example the 'argument' is the text "This is an alert box!" and you are 'passing' it by placing it in-between the double brackets at the end of the method name:
window.alert("This is an alert box!");
More details about the double brackets:
At the end of every method/function in JavaScript you need to put 2 round brackets that face each other like so:
()
So with the alert method we do this:
alert()
By having the two facing brackets at the end of a method/function, we are telling the browser that this is a function/method. It is also a good way for you to recognize functions when you see them; they always have a couple of brackets () at the end.
So for example, the following are all methods of the window object or in other words, they are methods contained in the window object. Some programmers will say the same thing by saying: 'alert () belongs to the window object.':
Open()
Close()
Focus()
There are several other methods that I have not listed. I want you to understand that objects can have several built in methods, and that methods are identified by placing a couple of round brackets '()' in front of them.
In JavaScript and several other languages, we need to tell the computer that we have reached the end of the line of programming code. To do this we use the semi-colon:
;
So in our example we have this completed line:
window.alert("This is an alert box!");
So when the computer is reading this line it knows we are done when it finds the semi-colon.
Ok, that is enough theory for now. Copy this code template into a blank HTML page and practice by changing the arguments passed to the alert method:
<html>
<head>
<script language='javaScript'>
function callAlert() {
window.alert("This is an alert box!");
}
</script>
</head>
<body>
<h3>Our first function</h3>
<a href='#' onClick='callAlert(); return false';>Click here to call the function</a>
</body>
</html>
There are other things happening in this page that I haven't spoken about yet, but do it anyway. The more you look at programming code and the more you write it the easier it becomes, so I would strongly suggest that you type it out by hand and get it to work then change things and see how it breaks.