Northcentral Technical College Introduction To Programming
10-152-310
Introduction to Programming with JavaScript NTC 10-152-310

Learning Plan 5 A Quick Introduction to Functions

# A Quick Introduction to Functions

#### File: /Learning Plan 5/introToFunctions.html

### It's Moving Day!

> We're moving on. We liked it in our old place but it got to be too cramped. We want space.

- We're going to move our JavaScript code out of our HTML files. This is done with functions.
- Functions are just a bunch of JavaScript code that is collected together in a location and given a name.
- We could also have functions in our HTML pages but that is not the industry standard. JavaScript code should go into a different file that is just JavaScript code.
- However, if we want to move JavaScript out of HTML we have to use functions.
- Here's some JavaScript code that is like we've been learning.

- To make this a function we add just two lines of code, one before and one after.
- That's it, it's a function! This is what makes it a function:
  1. The key word `function`.
  2. Followed by the name of the function.
  3. Followed by a set of parentheses with no space between the name and the left parentheses. (We'll put stuff in those parentheses later.)
  4. Followed by a space and a left curly-brace.
  5. Then comes the JavaScript code starting on the next line.
  6. And finally, a right curly-brace on its own line.

### Moving the `function`

- Once we have a function we can move it to another file. Here are the steps.
  1. We create a new text file, it can go anywhere but we want it close and part of our web site. We'll put them here:
  2. I've done that for you for this unit. Let's take a look in there. There's a bunch of files that end in `.js` (for JavaScript). There's one for each page, project part, and lab. Here's what the one for this page looks like:

### Getting the function to work

- Uh, why isn't that output above showing? Well, here is that spot in this HTML file where we would normally put our JavaScript code:

- It's empty, in order for our JavaScript code to work we have to do something called `calling` the function. It's also called `invoking` the function. Whatever we call it we need to make the code run. We do it like this:

- Look at the function listing above. It has this line:
- The name of the function is `introToFunctions`, it's the same as the name of the page we reading. It doesn't have to be that name, it can be any valid JavaScript name. In our course coding standards we'll use the same approach we use for variable names.
- We have to use the name of our function when we call it. And it has to be spelled exactly the same as it is in the file.
- Now I'll add this line to this file. I'll be back in a few minutes...
- There's the output!

### One last thing, the `<head>` tag.

- Is that it? Not quite, we have to do one more thing. We have to tell the browser where the file with the JavaScript is located.
- Use the Firefox "View->Page Source" menu item and view the top of the file we're looking at right now. You should see this line:
- That line in the `<head>` tag lets the browser know where to look for the file containing the function. It is also a `<script>` tag but this one just refers to a file. When the browser sees a JavaScript function call it looks for the function on the page. If it can't find it there then it looks for all the pages referred to by tags like this. It works a lot like a css file. All the files in this unit have this script tag in the head tag already. You don't need to do anything here.

### 5.1 Lab 1

> No amount of experimentation can ever prove me right; a single experiment can prove me wrong. -Albert Einstein

- 5.1 Lab 1