THE NEXT :: Free Ebook | Programming and Web Tutorial | Online Marketing | Forex

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

This is only the 2^nd 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:

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:

<META http-equiv=’refresh’ content=’3; URL=http://www.killersites.com’>

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!