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!

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. Here’s a made-up example:

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:

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 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.