The first program that is always created is a “hello world” program. So my first goal is to have a web page that says “hello world” That seems pretty basic doesn’t it. It turns out that web technology doesn’t stand still. There is this new version of HTML that is emerging called HTML5. Ok so I am going to go with that. I am also going to limit my programming to working with the Chrome browser although I will want to ensure that it works on a Mac and MS machine. I prefer Macs, but they are more expensive and I spend all my time at work on a MS machine. My thought was that I would have a blank document that would load everything from the server. This may not be the most efficient way to do things for many reasons, but from my point of view the whole world is so bloated it is hard to compare. So how would a program know when or where to start? How would the program know that changes had been made on the backend and it should make changes to what is displayed. It all boils down to user input -> display results. I could hit the browser refresh button if I wanted start over. OK so my program should launch and immediately ask the server what it should display. This is a little redundant because the program (or really web page) just came from the server, but I want to start down the dynamic (AJAX) path. So at a high level it should do something like this. Load page -> ask the server what to do -> display results (Hello World)
The first step is to tell the browser this is an HTML page and that it is based on HTML5. This is simply done with the
<!DOCTYPE html>
Browsers have been very good at letting people make mistakes and then browsers would fill in the undefined blanks and they started to diverge a little from each other. It is best to try and do things the way they were designed unless you have a really good reason not too.
Next I want to tell the browser that everything that follows is HTML and separate the head from the body and then unwind and close all the tags. So now I have
<!DOCTYPE html>
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
If I add Hello World in between the body tags like this:
<!DOCTYPE html>
<HTML>
<HEAD>
</HEAD>
<BODY>Hello World
</BODY>
</HTML>
Then I have accomplished my first task, but like everything from this point forward I am going to do things the hard way because I want to learn. So in my mind I should call the server and ask it what it wants me to do. I could put it in the body tag, but I am going to create a simple button (and this will have HTML5 attributes) that will simply say launch.
<button type=”button” autofocus=”autofocus”>Launch</button>
I put that in the body and I am not done because I want it to talk to the server and take directions from there. So first I have to tell the button to do something when I click it. The function (or attribute or is it method, I don’t know) is onclick and looks like this:
<button type=”button” autofocus=”autofocus” onclick=’TalkToTheServer()’>Launch!</button>
Now I have the function name in quotes. I am not sure what difference it makes, but when I took them out and explored around the onclick attribute I couldn’t find a difference. The problem is that browsers tend to have good memories and remembers stuff that they shouldn’t. I am going to leave them in. Well I called the function when I clicked the button, but I have to write the function. This will be added to the document (and therefore the document object model or DOM) in the HEAD section. So now my code looks like this
<!DOCTYPE html>
<HTML>
<HEAD>
<SCRIPT type=”text/javascript”>
function TalkToTheServer(){}
</SCRIPT>
</HEAD>
<BODY>
<button id=’mylaunch’ type=”button” autofocus=”autofocus” onclick=’TalkToTheServer()’ >Launch!</button>
</BODY>
</HTML>
Now I have to talk to the server. This is where I am going to go crazy because I know there are a lot of tools out there like jquery that would make this easy and would probably work better, but I am going to do it myself.
After all of this I scrapped what I was doing and started over. This won’t be the last time I do that.