Practical Information on JavaScript¶

This short reading is less about the JS language and more about how to use it in practice.

How to Use JavaScript
Where to Place the SCRIPT Elements
Multiple SCRIPT Elements
JS Console

How to Use JavaScript¶

There are two main ways you will be integrating JavaScript into your HTML code:

Using the script tag
Using an external file

This is very similar to CSS, as you can use the <style> tag or link an external CSS file.

Below is how you would integrate JavaScript into HTML using the <script> tag. The JavaScript code is between the <script> tags. Examine the code below, then switch to the results tab to see it run in action.

Showing another way, below is how you would use an external JavaScript file named helloWorld.js. Examine the JavaScript and HTML files, then switch to the results tab to see it run in action. In CS 204, we will mostly be using external JavaScript files.

Note, you will sometime see examples of <script> tags where the type attribute is defined, like this:

<script type="text/javascript">
...
</script>

but the type attribute can be omitted; the default is fine.

Where to Place the SCRIPT Elements¶

There are several "best practice" approaches to the placement of the script elements.

In this course, we will put all the script elements at the end of the file, right before the closing body tag. Like this:

<body>
  <h1>My App</h1>
  <main>
     <!-- your page here -->
  ... 
  </main>
  <script src="useful.js"></script>
  <script src="myapp.js"></script>
</body>

That placement has the advantage that any HTML elements that our JS code might refer to will already exist. It has the disadvantage that it delays the loading of our external .js files by a few milliseconds, but for this course, our HTML is short and the delay is negligible, so the disadvantage is worth ignoring.

Therefore: put your script elements at the bottom of the page.

Multiple SCRIPT Elements¶

An HTML file can and often will have multiple script elements, and the code is all mutually accessible. That means we can have one file define some functions that are called by code in another file.

For example, the example HTML file above had two script elements:

<body>
  <h1>My App</h1>
  <main>
  ...
  </main>
  <script src="useful.js"></script>
  <script src="myapp.js"></script>
</body>

The useful.js file might have some useful functions in it:

/* returns the square of the input, which should be a number. */
function square(x) {
    return x*x;
}

/* prints the argument to the console. Just a simple shorthand. */
function print(x) {
    console.log(x);
}

/* whether to print debugging messages. Default is true. Set this 
to false to turn off debugging messages. */
var printDebugMessages = true;

/* prints a debug message if and only if printDebugMessages is true */
function debug(msg) {
    if(printDebugMessages) {
       console.log(msg);
    }
}

and the myapp.js file might use functions that are defined in useful.js:

function doStuff() {
    debug('starting doStuff');
    var num = Math.random();
    var num2 = square(num);
    if( num < num2 ) {
        print('num is less than its square');
    } else {
        print('num is not less than its square');
    }
    debug('finished doStuff');
    return num2;
}

Putting code in one file and referring to it from another is a common and useful technique. In fact, in some of the assignments, I will supply some code for you in a file that you can just load using a script tag. You don't need to copy the code to your own file. In fact, you should not copy it.

We will also load third-party libraries like jQuery and Plotly using this technique.

JS Console¶

(We saw this section before, but it bears repeating.)

It's nice to be able to try little bits of JS code (just as we might try little bits of Python code by running the Python interpreter). Fortunately, every browser has a JS console (interpreter) built-in so it's easy to test little snippets. I do this all the time.

Getting to the console in Chrome on a Mac:

At the top bar, go to view > developer > JavaScript Console, or Command-Option-J

Getting to the console in Firefox on a Mac:

At the top bar, go to tools > web developer > Web Console, or Command-Option-K

It might look like this:

JavaScript console

If you type any Javascript expressions into the console, it will works as well:

JavaScript console