CS45: Javascript basics and creating games Javascript Fundamentals Running Javascript

Running Javascript

There are a few ways to run javascript.

Embedding Javascript before the end of the body tag

Create a new html file and drag that file to the browser.

Within your html file, you can have javascript instructions by using a <script> tag right before the end of the html <body>. For example,

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
</head>
<body>

<script>
var output = "World";
var number = 10;
console.log('hello', output);
</script>
</body>
</html>

Then using Chrome, right click and go to 'Inspect'. Go to 'Console' where you will see the output. From there, you could also run additional javascript instructions. For example, go ahead and run console.log(number) or number = number + 15 and then console.log(number).

Linking an external Javascript file

You could also create an external javascript file and have your html call that file using the <script> tag inside your html <head>.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <script src="myScript.js"></script>
</head>
<body>
</body>
</html>

Within your myScript.js file (which needs to be in the same folder as your html file) you could have

var output = "World";
var number = 10;
console.log('hello', output);

Typically, for me, if I am working alone and want to do something very simple, I start out by adding Javascript into the html file directly and once things are fine tuned, then I copy those instructions as a separate Javascript file. You could follow a similar approach or if you want, you could always try to add Javascript instructions through an external file.

Running Javascript through sites like JSBin

You can also use sites such as JSbin.com to run Javascript instructions. These sites are great for running simple javascript instructions especially when you're trying new javascript methods you've learned.

For this course, we want you to use the first or the second method above.

Prev Next