Introduction to JavaScript

It just occurred to me that I've been going on about how to make a HTML5 game, while there's people who want to make a game who haven't even started with programming/scripting at all yet.
Before you get started with games development, you're going to want to have a little bit of experience with the coding first.

So, what I'll do here is introduce you to the basics of JavaScript. I'll go into enough that will allow you to start learning to make HTML5 games.


JavaScript is not Java. This is something too many people get confused with. JavaScript is a scripting language, whereas Java is a compiled language. JavaScript is very loosely based off of the Java language.
And when I say that Java is a compiled language, what I mean by that is, once you write the code, you have to run a compiler to then get the file that you actually run as the program. Scripting languages on the other hand are run line-by-line without compiling the whole code into a file. This means all you have to do is write the code and run the program. (In JavaScript's case, you just write the code then open the web page, and it's running)



Ok so that's what JavaScript is, now let's get into how to write code.
Here is a little snippet of code, I'll then explain it:

<script type="text/javascript">
  var string = "Hello";
  function writeSomeText() 
     document.write(string+" World");
  }
</script>

<a onmouseover="this.style.cursor='pointer';" onclick="writeSomeText();">
CLICK HERE
</a>

So, you see the <script> HTML tags. That is where the JavaScript goes in.
The first line of JavaScript there is var string = "Hello";
That line creates a variable called string, and gives it a value of "Hello". The semi-colon at the end of the line is part of the JavaScript syntax, it splits the lines up so that when the code is run, it knows how to execute it.
JavaScript is quite good with variables, because it decides itself what type a variable is. In other languages, you may have to tell it what type it is, but JavaScript automatically knows that it is a string value. And if we gave the variable a value of 500 instead of "Hello", it would have known that it was a numeric value. However, "500" is counted as a string.

Now, the next block of code is creating a function.
To make a function, you do function functionName(params) { functionCode }
In my example, I didn't give it any params (parameters), but they are basically for the purpose of passing in a variable for the function to use when you call the function. I'll get to function calling later.
The function code in my example writes text to the document screen. document is an object which holds a function called write(). It takes a parameter which the function then takes and writes to the screen.
In my example, it takes the string variable that we set outside the function, and attaches " World" to it. It joins up to make a string value of "Hello World", but does not change the value of the variable.

Function calling: Outside the <script> tags, we see an <a> element. Since there is no href attribute given, I had to manually add the code that makes the mouse cursor change to the pointer when you mouse over the link. This was done with a line of JavaScript triggered by an event. The event was onmouseover.
The other event I used was onclick, which I used to trigger a line of JavaScript which called our writeSomeText() function. This is where the JavaScript calls up the function with that name and executes the code inside the function.


So, that's my Intro to JavaScript. It's purpose is to show you the syntax, and hopefully allow you to better understand my HTML5 game development guides.
You can move onto this Full HTML5 Game Development Tutorial if you want.