What is JavaScript

What is JavaScript?

For our purposes, JavaScript is instructions (code) that can be understood by web browsers. Browsers are designed to interpret and understand two other types of code used in web development: HyperText Markup Language (HTML), which provides the structure of a web document and Cascading Style Sheets (CSS), which is used to control the way a web page is displayed and styled.

How can I get my browser to "read" JavaScript?

Well, one very direct way is to type it directly into the browser address bar, try it now, open a new tab and type

 javascript: alert("Hi, I'm a program.");

into the address bar and hit return. Congratulations, you have just executed a Javascript program in your browser!

Now hop over to JSBin (a simple tool that emulates web browsers) and paste

alert("Hi, I'm a program.");

into the left hand window. Press "preview" (the browser emulation runs the code) and you see the same result as rendered previously.

Now make a copy of the HTML in the right window and save it to a .html file on your own computer (eg "javascriptTemplate.html) so you can use it as a template for testing, assignments and so on.

How do in I link JavaScript to my HTML template?

Include it in the pages HTML

Like other elements that are used in HTML pages, JavaScript has its own set of opening/closing tags. The code goes between them like this:

<script type="text/javascript">

alert("Hi, I'm a program."); 

</script>

Very often (but not always) the above is inserted between the head tags on the page. Try it now, paste the above anywhere between the head tags in a copy of your template and open it in your browser.

Link to the JavaScript from a file

The best way to include JavaScript in a web page is to put the code in it's own file and referenece the script from the bottom of your .html document.

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</body>

</html>

This makes it easier to edit the code, reuse the same file in other web pages plus It helps for quick page loading where speed is crucial to your user's. You may also notice there is no need for a type attribute(type="text/javascript") on our script tag as we already know it will be javascript.

Create a file with extension .js (eg. yourfile.js) and put your lines of JavaScript code in it. Store the .js file in the same folder as your HTML template, then in the HTML template file make a call to the .js file as we witnessed in the example above:

<script src="yourfilename.js"> 

</script>

Now if you open the file in a web browser, the code gets executed just as in the previous examples.

This is the same way that third party libraries such as JQuery get included in web pages. ( Don't worry right now if you don't know what a library or JQuery is ). Notice that this is also what is happening in JS Bin, the code from the left "JavaScript" pane is being executed as if it were in a separate file.

What's going on in my code?

The program consists of a statement which is a call to the function that is the value of the property named alert of the global object.

If this doesn't make too much sense to you right now, all will become clear later on.

Find out more about JavaScript

Watch Douglas Crockford's video at http://yuiblog.com/crockford/
Watch more of Crockford's videos at http://developer.yahoo.com/yui/theater/
Watch the Javascript from the Ground Up presentation and assignment.
- Those of you feeling a bit rusty on HTML or CSS should have a look at those presentations as well).
Start working your way through the early examples (Examples 1.1 to 2.5) in Rebecca Murphey's jQuery Fundamentals. You should have some familiarity with all these lessons as soon as possible.

Activities - What is JavaScript?

Then put up a page on your site with answers to the following and any other thoughts you might have had up to now:-

When parsing a String into a number using the parseInt() method, we are advised to always provide the radix. Why is this?
Why do we lose precision when performing operations with decimal numbers in Javascript? Can you think of a few implications of why this would be a problem?
Do you understand why the next operation produces the given result 115 * 4 - 4 + 88 / 2 = 500?
What is a type, and why do you think types are useful in writing programs?
What does typeof(4.5); do, and why does typeof(typeof(4.5)); return "string" ?
"+" in Javascript is overloaded, what does this mean?

Share your responses by linking to your blog in the comments below.

You might be interested in how your peers commented on this and other matters in the previous incarnation of this course, here http://bit.ly/hic9F4.