Permalink Overview of JavaScript

JavaScript is a programming language that allows you to implement complex things on web pages. Every time a web page does more than just sit there and display static information for you to look at—displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, or more—you can bet that JavaScript is probably involved.

Read: Reference

Permalink Create your first JavaScript file!

Create www/main.js with the following content

1
2

// This will create a popup when the page loads
alert("Hello world!");

Permalink Create an html page that uses the JavaScript 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<!DOCTYPE html>
<html>
  <head>
    <title>Webpage</title>
  </head>
  <body>
    <h1>Main heading</h1>
    <p>This page will use JavaScript!</p>
    <script src="main.js"></script>
  </body>
</html>

Permalink Load the page, what do you see?

link

Click Ok, and you’ll see something like:

link

Permalink What is/are browser Developer Tools?

When working with web technology, you need to learn about browser “Developer Tools”. For simplicity sake I’ll refer to this as DevTools going forward. DevTools is a panel that opens in the browser, and sits along side the web page you are looking at.

You can use the DevTools feature to do all kinds of things. A few examples:

  1. View JavaScript errors
  2. Interact with JavaScript globals
  3. View HTTP requests and their details
  4. Inspect DOM elements and their style

Permalink Open DevTools

  1. Click the “Hamburger” icon in the upper right of your browser, it looks kinda like this: ≡
  2. Navigate to: “More Tools”
  3. Navigate to: “Developer Tools” or “Web Developer Tools”
  4. Note the keyboard shortcut used, it’s usually: Ctrl+Shift+i

Permalink DevTools on Firefox

link

  • This happens to be on Linux
  • Firefox here happens to have a DarkMode extension installed
  • Here DevTools is docked on the bottom
  • Here DevTools is defaulting to the Console menu (see the blue line above it)

Permalink DevTools on Google Chrome

link

  • This happens to be on Linux
  • Here DevTools is docked on the right
  • Here DevTools is defaulting to the Elements menu (see the blue line under it)

Permalink Learn how to use DevTools for JavaScript

So the first thing is we want to modify our JavaScript to write to the console. So make www/main.js look like this:

1
2
3
4

// This will create a popup when the page loads
// alert("Hello world!");

console.log("Hello world");

Note:

  • Line 2 is commented out with a preceding: //
  • Line 4 adds a new console log

With DevTools set to the Console menu (circled), load the page and this is what you should see:

link

Firefox

link

Chrome

Do you see where the log line “Hello world!” shows up in DevTools? In the picture for reference, it has a red arrow pointing at it.

Permalink Bonus

The DevTools panel can be docked on the bottom, right or left. This is changed by using the ≡ menu in the upper right of DevTools itself. See if you can move it from the bottom to the right, or visa versa. Leave it where you prefer :)

Permalink Let’s try some JavaScript

Let’s make a page that has a little person, that kinda looks like they walk around wherever your mouse goes :)

Permalink First add an image to your web page page 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<!DOCTYPE html>
<html>
  <head>
    <title>Webpage</title>
  </head>
  <body>
    <img id="person" style="position:absolute; top:0px; left:0px"
         src="https://rockfloat.com/images/stickman.png" />
    <script src="main.js"></script>
  </body>
</html>

Permalink Next add the JavaScript

Make www/main.js look like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// The object to move
const person = document.querySelector('#person');
let move = false;

// Track mouse movements
document.onmousemove = function(e) {
  if (move) {
    person.style.left = e.x - 45 + "px";
    person.style.top = e.y - 35 + "px";
  }
};

// Move when a key is held down
document.onkeydown = function(e) {
  person.src = "https://rockfloat.com/images/stickman-dance.gif";
  move = true;
};

// Stop moving otherwise
document.onkeyup = function(e) {
  person.src = "https://rockfloat.com/images/stickman.png";
  move = false;
};

Permalink Try the demo!

Load the page and you should see a little stick person.

  1. Move the mouse around and nothing should happen
  2. Hold down Shift while moving the mouse and the person should follow!

Tip: If it doesn’t work, look at Console in DevTools for errors :(