Some more JavaScript

Eventually, we will want to get the input from the user and then paste it back on the page formatted as a concert ticket (not a very elegant ticket, but a useful exercise).

This will take several lines of instruction. We don't want to paste several lines inside the "onclick" attribute, so we'll move them elsewhere and give that group of lines a name. In this case, we'll call them "printTicket".

NOTICE: this is a very important and useful strategy that you'll frequently encounter in programming: the strategy of giving something a name, and then using the name to refer to that "thing" elsewhere in the code.

1. In the <head> section of your HTML document, type opening and closing <script> tags (i.e <script> and </script>). This tells the browser that it's going to see something other than HTML inside these tags.

2. In this, case, it's going to see JavaScript. To tell it that, insert the attribute type="text/javascript" to the opening tag so it looks like this:

<script type="text/javascript">

A packaged list of instructions written in JavaScript (or any other programming language) is called a "function". To announce to the browser that it is about to see a function, we write the word "function" and follow it with the name we've invented for that function...

3. Type this between the script tags:

function printTicket() {
}

"printTicket" is a name we invented. The parentheses after the name are there in case we want to give the function some data to work with. In this case we don't so the parentheses are empty.

The curly brackets announce when the list of instructions starts and stops (it's empty since we haven't written any instructions yet).

NOTE: Inserting curly brackets is another thing that's very easy to forget and the error can be hard to spot. So now you have two major things to look for when your code doesn't run:

; 1. Does each line end with a semicolon?

{} 2. Are the opening and closing brackets in the right place (in this case, are they at the beginning and end of the list of instructions)?
Note: The lines that end with an opening curly bracket don't have a semi-colon after them because they're aren't really 'finished', they're leading into the next lines. And the lines that end with a closing curly bracket like this } don't need a semi-colon because that closing curly bracket also acts like a period and ends the statement.

4. Make a blank line between the curly brackets and type the alert statement (but this time change it slightly so it's different than before):

alert('You clicked on the button, and it ran the function');

The function is complete, though not very interesting, it just has one line. But we'll change that soon. First we need to tell the button to use the function.

5. Scroll down the page to your button and replace the alert statement with the name of the function so the line looks like this:

<input type="button" value="print ticket" onclick="printTicket();" />

6. Save your page and view it in a browser. When you click on the button, you should see this:

If it didn't work, don't despair, just read this page again carefully and follow the instructions. When it does work - congratulations!

7. Go to the Catalyst quiz and answer question #6.

previous page

next page