CIT041J Index > Lecture Notes 1 - Part 2

CIT041J Lecture Notes 1 - Part 2

Indenting Style

There are two major styles of indenting. The first one, used by the book, and the one I personally favor, looks like this:

if (age < 18)
{
  console.log("Cannot vote.");
}

The other style, known as K&R style after Brian W. Kernighan and Dennis Ritchie, who wrote a classic book about the C programming language, looks like this:

if (age < 18) {
  console.log("Cannot vote");
}

I do not care which style you use as long as you use a consistent style. I insist upon proper indenting! The innner workings of an if or a loop must be indented by at least two spaces. The following sort of nonsense will lose you points, guaranteed. This means you.

if (age < 18)
         {
  console.log("Cannot vote");
entry_fee = 0.85 * entry_fee;
      student_discount = true;
    }

Invoking JavaScript

What if you want JavaScript to be invoked only when the user does some action, rather than being executed as soon as it is encountered? One method is to use a hypertext link that goes nowhere (href="#") for really old browsers without JavaScript capability (or browsers with JavaScript turned off), and with an onclick attribute for browsers that will handle JavaScript. Here is such a link: Say hello. Try it and see it in action. Here’s the code. We put a semicolon at the end of the statement to be consistent, but, frankly, in this instance, it would look better without. (Also, it uses alert() so that you don’t have to have your web console open.)

<a href="#" onclick="alert('Hello');">Say hello</a>

(This is not the best way to activate a click, because it is mixing program with content, much as an inline style="..." attribute mixes presentation with content. You will soon learn a better way of doing this, but I don’t want to overload you with information right now.)

There is theoretically no limit on the number of JavaScript statements you can put in the onclick attribute of the link, but the law of diminishing returns sets in rapidly. Clearly, you want to collect the multiple statements into a function and just call the function.

JavaScript Functions

A JavaScript function begins with, naturally enough, the word function, followed by an argument list in parentheses. Even if there are no arguments to the function, you must include the parentheses! Do not prefix the argument names with the word var; they are arguments, not true variables. Following the function declaration is the body of the function enclosed in curly braces. Any var declarations that you make in the body of the function are local variables; their values cannot be accessed from outside the function, and they vanish when the function exits.

A function can exit early at any time by using the return statement. If you follow the return by an expression, then that is the value that the function will return. Always put function declarations in the <head> of the HTML document. This ensures that the function will be declared and “ready to go” when you invoke it. Functions may call other functions.

The following example shows two functions, one of which returns a result. The only reason that this has been split into two functions is that we are trying to prove a point. Try it. See how old a 12-year-old is in days.

<script type="text/javascript">
function calc_age( years )
{
  var days;
  days  = years * 365;
  return days;
}

function show_age( years )
{
  var result;
  result = calc_age( years );
  alert("A twelve-year old is " + result + " days old.");
}
</script>

<a href="#" onclick="show_age(12)">See how old a 12-year-old is in days.</a>