JavaScript

A reference

This reference guide will be very short because Javascript is used very little in this guide.

Just like Python JavaScript is a full programming language. It has variables, data structures, objects, and scope. But unlike Python, it can be called from within your HTML. The other difference from Python is that it requires the use of curly braces ({}) and semi-colons (;). We wont go into too much depth of the inner workings of Javascript, but lets lay out some of the basics.

Basics

var

Any variable you create in JavaScript should be preceded by var, to indicate that it is a variable. 


var x = "Hello, World!"

function

Functions are structured slightly different than in Python. 


function multiply(phrase, x) {
  var i = 0;
  var newPhrase = "";
  for (i = 0; i < x; i++) {
    newPhrase += phrase;
  }
  return newPhrase;
  }
}

So multiply("hello", 5); would return "hellohellohellohellohello".


document.getElementById

This will be used in JavaScript functions to get HTML elements. You can then modify the classes of the HTML element in the JavaScript to modify the visibility, for example. You just have to make sure you've given the HTML element you want to get an ID. 


...
<h1>Welcome</h1>
<div class="special-style" id="header1">
  <p>Do you like my stylish webpage?</p>
</div>
...

var ele = document.getElementById("header1");
ele.className = "not-special-style";

onClick

This is a very useful tool to use in your HTML. This is a keyword that says "when a user clicks on this element, perform this JavaScript function". Here's an example. 


...
<h1>Welcome</h1>
<img src="/static/img/funny.png" class="hide" id="image1" />
<p><a href="#" onClick="showImg()">Show</a> my funny picture</p>
...

function showImg() {
  var ele = document.getElementById("image1");
  ele.className = ""; // removes the 'hide' class to unhide
}