A tour of javascript
26 Aug Admin
Let’s start with a quick tour of the major features of JavaScript. This chapter is intended to be a showcase of what JavaScript can do, not an in depth investigation into the deeper concepts, so don’t worry too much if you get lost or don’t understand the code you’re typing in!
Project –
- Our JavaScript is all going to be written using NotePad. Open NotePad and save the resulting empty document in your user drive as chapter_4.html.
- Begin by creating a basic HTML page in your blank document. It doesn’t have to be anything fancy – the following will be more than sufficient:
<html> <head>
<title>Chapter 4: A Tour of JavaScript</title>
</head>
<body>
<h1>A Tour of JavaScript</h1>
</body>
</html>
- As a convention, when the notes intend that you should enter code all on one line, they will use an arrow as above to indicate that you should not take a new line at that point. With HTML, this is rarely important, but with JavaScript, a new line in the wrong place can stop your code from working.
Save your new webpage, and view it in your web browser. For the moment, use Internet Explorer to view this page. To do this, find your saved file on your user drive, and double-click on it. This will open the file in Internet Explorer by default, and let you see the header you’ve just created.
- So far, we haven’t done anything beyond the scope of HTML. Let’s add some JavaScript to the page.
- There are (generally speaking) three places in a web page where we can add JavaScript. The first of these is between a new set of HTML tags. These script tags take the following form:
<script language=”JavaScript” type=”text/JavaScript”>
… code …
</script>
o The script element above can be placed virtually anywhere you could place any element in an HTML page – in otherwords, in either the head element or the body element. It is most commonly placed in the former, though this is usually so that all your code can be easily found on the page.
o Note too that there is no arbitrary limit on the number of script elements that can be contained in an HTML page. There is nothing stopping you from having a hundred of these dotted around your pages, except perhaps prudence.
o Let’s add our opening and closing script tags to the head element of the page, like so:
<html>
<head>
<title> … </title>
<script language=”JavaScript” type=”text/JavaScript”>
</script>
</head>
…
Save the file, and then try refreshing your page in the browser window. Note that nothing has happened. This is what we expected – all we have done so far is to set up an area of the page to hold our JavaScript.
Go back to NotePad and enter the following text between the opening and closing script tags:
window.alert(“Hello world!”);
Save your changes, and again refresh your page in the browser window. Welcome to the world of JavaScript!
Go back to notepad and remove the window.alert line you just added. Now add the following, slightly more complex code:
if ( confirm(“Go to Google?”) ) {
document.location = “http://www.google.com/”;
}
o Again, save your changes and refresh the page. For those with an eye to future chapters, this is an example of a conditional statement, where we ask JavaScript to check the condition of something (in this case, our response to a question) and then to alter its behaviour based on what it finds.
o Now, both of these bits of JavaScript have run uncontrollably when the page has loaded into the browser. In most cases, we will want to have more control over when our JavaScript does what we ask it to.
o This control is the domain of events. In a browser, every element of an HTML document has associated with it a number of events that can happen to it. Links can be clicked, forms can be submitted, pages can be loaded and so on.
o Modify the previous lines of JavaScript in your script element to match the following:
function go_to_google() {
if ( confirm(“Go to Google?”) ) {
document.location =“http://www.google.com/”;
}
}
Be careful with your brackets here!
o Save and refresh, and note that nothing happens this time. This is because we have enclosed the previous action (popping up a question and acting on the response) within a function. A function is a block of code that is given a name – in this case, the name is go_to_google() – and is only run when that name is “called”. It can be useful to think of functions as magic spells that can be invoked when their name is said.
o To invoke this spell, we need to choose an element on the page to trigger it. A natural candidate is a link element, so add the following HTML to the body section of your page:
<p>A quick <a href=”#”>test</a>.</p>
o The # link is a common HTML trick that allows us to create a “link to nowhere”.
o Save and refresh, and check that the link appears on the page, and that it goes nowhere when clicked.
o Now, we want to have our page ask us if we want to “Go to Google?” when we click on that link. Here’s how
o Take the link element, and modify it as follows:
<a href=”#” onclick=”go_to_google();”>test</a>
o Save and refresh, and then click on the link. This is an example of an event handler. When the link is clicked (onclick), our browser says the “magic words” go_to_google(), and our function is invoked.
o For our final trick, add the following code to the body section of the page, after the paragraph containing the link:
<body>
…
<script language=”JavaScript” type=”text/JavaScript”>
document.write(“<h2>Here’s another ↵ header!</h2>”);
</script>
o Note that the line of code should be all on one line! Save the page and refresh the browser. Note that we now have a new line of text on the page – another header! We’ve used JavaScript to create HTML and tell the browser to display it appropriately. In this example, JavaScript has done nothing that we couldn’t have done with a line of HTML, but in future chapters we will see how we can use this to write the current date and more.
Recent Comments