Intro to functions

Review: A JavaScript `function`¶

function introToFunctions() { // <-- This line before...
    "use strict"; // <--  REQUIRED IN ALL FUNCTIONS

    const DISCOUNT_LIMIT = 49.95;
    const DISCOUNT = 0.05;

    let totalPrice;
    let subTotalPrice = 54.99; // pretend this value was entered via prompt

    if (subTotalPrice < DISCOUNT_LIMIT) {
        totalPrice = subTotalPrice;
        document.write("Total: " + totalPrice);
    } else {
        totalPrice = subTotalPrice - (subTotalPrice * DISCOUNT);
        document.write("Total with discount: " + totalPrice);
    }

} // <-- This line after!

Parts of a `function`¶

The key word function.
Followed by the name of the function.
Followed by a set of parentheses with no space between the name and the left parentheses. (We'll put stuff in those parentheses later.)
After the parentheses, there is a space, followed by a left curly-brace.
Then, starting on a new line, comes the JavaScript code. Note that the lines of JavaScript begin indented in by four spaces. The first line of every function will be "use strict";. This is required for all from now on.
And finally, a right curly-brace on its own line. This terminates the function. Note that this closing brace is always vertically aligned with the letter "f" in the word "function" at the beginning of the function.

Moving the `function`¶

Our JavaScript functions will all reside in a .js file. They are located in the js directory located in our unit folder. Go ahead and take a look, it's full of .js files. You will have a one for each project part, lab, and exercise.

javascriptFiles

Inside each of the .js files, a controller function is set up for you. Here's what one looks like. There is a document.write() method built into each controller function that outputs the location of the file. This is there, so you can see the function call working. Once you start working in the file, this document.write() should be removed.

Below, you can see there is no output - our function is not working. Let's fix that.

/*
  This is the JavaScript code for
  "A Quick Introduction to Functions"
  File: /unit04/introToFunctions.html.
*/
function introToFunctions() {
    "use strict";

    // Your code goes in here.
    document.write("The JavaScript file for this page is: "
            + "\"unit4/unit04/js/introToFunctions.js\"");
}

Getting the function to work¶

Just like in our previous units, we need to call the function. It's also referred to as invoking or firing the function. However we refer to it, we need to make the code run. We call our function in the HTML file between <script> elements.

The name of the function is introToFunctions, and we have to use the name of our function when we call it. It has to be spelled exactly the same as the function name is spelled in the JavaScript file.
Following the name of the function, you need parentheses and a semicolon.
Now that I've called the function in the HTML document, you can see we have our output!

<script language="JavaScript" type="text/javascript">
     introToFunctions();
</script>

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 Chrome View > Developer > Page Source (right-click > View Page Source) menu item and view the top of the file we're looking at right now. You should see this line:

<script src=../js/introToFunctions.js"
        language="javascript"
        type="text/javascript">
</script>

* 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.

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

Intro to functions

Review: A JavaScript function¶

Parts of a function¶

Moving the function¶