Lesson 7: Javascript Programming

Basic concepts in programming: What is programming?

In Part 1 of this series, our goal is to get you used to some of the concepts found in JavaScript programming. These concepts are also applicable to many other programming languages like Java and PHP among several others.

With this fundamental understanding you will be able to more easily learn how to program (as taught in Part 2 and Part 3), create web pages, use DHTML and even use software more easily. I know it seems unrelated, but once you start catching on, you will see how it is connected! Soon Java, Java Script, .NET, ASP, PHP, and many other languages and technologies will be very approachable.

A side note:

Before you artists get spooked and run off; I started out as a graphic designer with no technical background except for a basic understanding of HTML. I made the decision and slowly picked up Java Script and then several other languages. If I can do it, so can you!

Every time you learn something new, you elevate yourself. Learning programming will just make you a more valuable person to have around, thus you will be giving yourself more options.

Let's start with the very basics:

Programming is like talking to the computer in a language the computer understands. And like spoken languages, there are many languages that computers can speak. In the world of the Internet, the key language is arguably JavaScript, just as in the United States it is English and in France it is French. You use programming to tell the computer what to do.

Basic Programming Concepts: continued

Like spoken languages (ex: French, English) programming languages have rules (grammar, spelling, etc) and meaning for certain special key words. In English the word 'throw' has a meaning; it means to 'toss', 'pitch', 'fling', something or someone.

One such 'key word' in JavaScript is the word 'function'; this keyword tells the computer that this is the beginning of code (programming code) that does something, or in other words, takes an action. (However, do not make a common mistake and confuse 'JavaScript' with 'Java' - they are two totally different things!!) Here's a made-up example for JavaScript:

function: Pop up a box and say: 'What's up Jimmy? '

This made up example (not real programming!) is telling the computer to pop open a box and say: 'What's up Jimmy?'

Just for the curious, I will now show you the real way to do this with Javascript:

function popupMessage()
{
	alert(“What's up Jimmy?”);

}

What's that supposed to mean? I know that for many of you this is already very confusing, but hold on, it's well worth it!

Programming languages have other words (besides 'function') that have special meaning - special meaning that tells the computer what to do. So when you are programming, you are using special keywords to tell the computer what to do.

You use programming to write (in other words: create or build) software (ex: Mircrosoft Word, Internet Explorer, and even Windows!) and software enables you to more easily control your computer.

Computers are really, really stupid. So stupid in fact that if you were talking to a computer directly, you would have to use a very simple language that is so slow to write, that it becomes very difficult to get anything done since you have to explain every single step to the computer. How simple you ask? So simple that even something like printing the letter 'A' on screen could take you days to build because of all the code you would have to write!

Basic Programming Concepts: continued

Computers can only understand 'yes' and 'no' - without the help of software/programs. If we go into a little more nerd detail, we see that computers actually see 'yes' and 'no' as 1 and 0. Once again we can say that programs are sets of written instructions telling computers what to do.

Because of how stupid computers really are, programmers (a.k.a.: nerds) over the years have written programs that make it much easier for us to 'talk' to computers. One of these programs that make our lives easier is the web browser.

Built into Internet Explorer, Netscape, and most other web browsers is the ability to understand a programming language called JavaScript. With JavaScript we can indirectly control the computer.

I hope that this basic explanation of programming clears things up a little for all of you reading.

Ok, that is a lot of abstract information to take in, let's look at something a little more concrete.

Are HTML and CSS programming?

We know by now that HTML and CSS are used to build web pages. This is a question that comes up from time to time; since HTML and CSS are essentially just lots of code that is used to tell the browser what to display (HTML) and how to display it (CSS), isn't it programming? The answer is 'NO', and this is why:

The fundamental difference between coding (ex: HTML, CSS) and programming (JavaScript, Java) is that in programming you can make decisions based on something happening.

For instance, you can write a little JavaScript that causes a small message box to appear if the user (the person looking at your page) does something. This can be clicking on a button or pressing on the 'C' key on the keyboard etc.

This is of course a simplification of the situation but it essentially covers it. It can get confusing because in the world of the Internet there can be a 'gray' area where without using programming you can get the browser to do something on its own. An example of this is the META tag 'refresh'. This tag allows you to tell the web page to reload itself or to load an entirely new page after a specified number of seconds or minutes. Here's what the META tag 'refresh ' looks like:

This tag tells the browser to load the page: http://www.killersites.com after 3 seconds.

Some people will get a little confused and say that since the META tag code is telling the browser to do something, it is programming. Right? Wrong!! The reason that it is not programming is because there is no decision being made. No matter what else may happen (as long as they stay on the page for at least 3 seconds) the page will automatically load the website in the Meta tag (in this case: http://www.killersites.com ).

To make this example act like it was truly programmed, you would have to be able to (for example) control if the browser would reload the page or some other page depending on, say, what the user did on the page.

An easy example: say you had a box on your web page where the user could enter in a number, and depending on the number entered, the browser would load a particular page.

This shows how programming allows you to make decisions based on as many possibilities you want.

One more example: you can, with JavaScript, check to see what browser the user is using to view your web page and what time of the day it is. So with this information you can send people to a particular website if it is, say, before 12 pm and they are using Internet Explorer as their browser. And you can also program to send them to another web site if it is past 12 pm and they are using Netscape. Any combination is possible and that is the power of programming!

A final point

This is just the first part of this series, in Part Two I will slowly introduce you to more concepts that will give you the foundation you need to get into some real programming. With just a little patience, in no time, you all will be programming!

Object Oriented Programming

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 these 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 (I 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.

Our eventual goal: to use the DOM

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 them 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) has its own function (things that he/it does) and together they make 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:

Object Oriented Programming - continued

What are the other ways of programming?

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.

Why would you program the OOP way?

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 boxes 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 in web pages using JavaScript.

A web page contains 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 a browser's window 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) you will see the word 'method' used a lot.

Object Oriented Programming - continued

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.

The first line of code is 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 its 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 cas, 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 a 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 sit 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 tounderstand that objects can have several built-in methods, and that methods are identified by placing a couple of round brackets '()' in front of them.

We are just about finished except for one little thing!

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.