Home Fun Games Blog CDCRIFD CDRD Utilities About

Background Info

This is the boring part. But it's also important.

HTML stands for Hypertext Markup Language. Its partners, CSS and JS, stand for Cascading Style Sheets and JavaScript, respectively.

DOM stands for Document Object Model. BOM stands for Browser Object Model (BOM is also very fun to say.).

The DOM is an object tree that enables JavaScript to dynamically change HTML.

The BOM enables the webpage to talk to the browser.

The window object tree enables JavaScript to dynamically change the browser window.

An HTML comment looks like this:

        <!--I'm a comment!-->
      

Here is an example (note that HTML inside comments will not be rendered):

        <!DOCTYPE html>
<html>
  <head></head>
  <body>
    <p>I am visible.</p>
    <!--<p>But I am not.</p>-->
    <!--And I am a comment.-->
  </body>
</html>

An HTML comment will not be displayed in the webpage.

JavaScript

JavaScript can either be stored in <script> tags or in an empty <script> tag with an src attribute.

        <!--Script from an external file from the same website-->
<script src="/myscript.js"></script>
<!--Script from an external file from a different website-->
<script src="https://example.com/javascript_library.js"></script>
<!--Inline script-->
<script>
alert("Hello world!");
</script>
<!--Event script-->
<button onclick="Hello world!">Click me!</button>

A variable stores information that can be accessed from the variable name. For example:

        <script>
var x = 5;
</script>

From now on the <script> tags will be omitted in JavaScript-only snippets.

A JavaScript comment looks like this:

        // I'm a comment (this syntax not recommended)
/*
I am
a multi-line
comment.
*/
/*I'm also a comment (recommended for single line comments)*/

JavaScript also supports the mathematical operators , +, -, *, and /. It also supports other operators, as shown below:

        var x = 3;
var y = 2;
var z = x + y; /*z is 5*/
var m = x - y; /*m is 1*/
var n = x * y /*n is 6*/
var p = x / y; /*p is 1.5*/

A variable name can also contain multiple letters, but it cannot start with a number.

        var superHugeVariableName = "The quick brown fox jumped over the lazy dog.";
      

Variables have many types, as shown below.

        var objectVar = {
  property: "value",
  anotherProperty: 3,
  yetAnotherProperty: {
    andAnotherProperty: "another-value!!!"
  }
};
var arrayVar = ["a value", "another value", number, [1, 1, 2, 3, 5, 8]];
var stringVar = "A string of text!!!";
var myFavoriteNumber = 5;
var myFunction = function() {alert("Hello world!");};
/*Preferred syntax for the above is:*/
function myFunction() {
  alert("Hello world!");
}

Continue →