Journeys in Javascript: Part 1

Posted by Roan Lavery on Jun 25

Astute readers of the blog will know that I resolved to start learning JavaScript a short while ago. It's always been one of those things where, in the past, I've stole adapted other people's code in order to get the desired result. In fact you can almost always get away with this, and I once swore blind that nobody actually learns JavaScript properly. The internet is a fantastic place, full of lots of clever people (no, really), and you can bet if you're thinking of doing something, then somebody else has already done it and posted it on their website to show the world how clever they are. It's brilliant, you almost never have to think for yourself.

There comes a time however, when you no longer feel happy eating the crumbs from other peoples tables, and you want to strike out on your own. For me it was a combination of the need to learn something new, and the realisation that JavaScript is no longer the sad twat at the Christmas party that nobody talks to. Actually it probably never was, people are just realising how to use it in lots of cool new ways, and I'm hoping to become one of them.

I'm making this series of posts mainly so I've got a record of the things that I've learned. I always learn better by writing thnigs down. As such it's going to be about a interesting as cricket for those of you with any knowledge of JavaScript. Complete n00bs like myself might pick something up, and you can always just laugh at my pathetic attempts at scripting regardless.

Note: If I've got anything wrong, please let me know so I can fix it.

Create the first Script

It's somewhat of a tradition in programming circles to start with the Hello World script, so let's do that. The first thing we've got to do is alert our web pages to the fact that we're going to be adding some script to the page. We do this with the <script> tag, and there are a number of scripting languages which we could use so we have to specify which one.

<script type="text/javascript">
<!--

Our JavaScript code will go here!!

-->
</script>

This alerts the HTML page that we'll be scripting and it can be placed either in the body of the page or in the head section depending on what you are doing. I'll come back to this in a bit but for the minute I'm going to stick it somewhere in the body. The HTML comments are used so older browsers that don't support JavaScript won't display the code on screen. I'm not really sure if these are still necessary though, as you're going to have to go way back to legacy browsers before it becomes an issue.

Ok let's add the first script:

<script type="text/javascript">
<!--

document.write("Hello World");

-->
</script>

As you can see it's a fairly straightforward script, all it does it output a bit of text (we call this a text "string") to the page.

It does this by first accessing the entire page using the document object, and then output some text using the write() command. JavaScript can access other parts of the document as well (such as form elements, divs etc) and we call this technology DOM (Document Object Model). You can do lots of cool things by combining JavaScript, CSS and the DOM and it's one of the reasons I'm learning JavaScript in the first place. I'll talk about the DOM more in the next article. Once I understand it a bit better :)

Let's add some more content into our script. We can even add HTML tags into the document.write() command.

<script type="text/javascript">
<!--

document.write("<p>Hello World</p>");
document.write("<p>This is <em>great</em></p>");

-->
</script>

Notice how the end of each statement ends with a semicolon. This is the case for most JavaScript statements. We've also got to be careful that we don't have any line breaks in the middle of a command, as this will create problems.

We've also got to be careful with quotes inside our string. Take the following example:

<script type="text/javascript">
<!--

document.write("<p align="center">Hello World</p>");
document.write("<p>This is <em>great</em></p>");

-->
</script>

Try it. It won't work. Why? Because we've included quotes inside the string (with the align="center"), so it's telling the write command that the string is finished, when it's not. If we want to include attributes we should use single quotes as in:

<script type="text/javascript">
<!--

document.write("<p align='center'>Hello World</p>");
document.write("<p>This is <em>great</em></p>");

-->
</script>

This has caught me out a couple of times so it's one to watch out for.

Ok so that's my first script. It's hardly a killer app, but it's a start. Stay tuned for more JavaScript for idiots.

FreeAgent sign-up