Skip to main content

Introduction

By this point you should be feeling pretty good about HTML and CSS. You don't have to be a master at them, just have a good feel and be able to do basic things should suffice.

Once you're feeling comfortable with HTML and CSS, you can start learning Javascript (not to be confused with Java which is a completely different programming language).

We've learned that HTML gives pages structure and that CSS makes them look prettier. Now, with Javascript you'll be able to make your web pages interactive. And that includes making web-based games too!

Unlike HTML and CSS, javascript is a "real" programming language, so typically more difficult to learn, but not impossible.

Comments​

// single line comment, use double forward slashes

/*
 this is
 a
 multiline
 comment!
*/

Data types​

Primitives​

  1. Number
  2. String
  3. Boolean
  4. Null
  5. Undefined
  6. BigInt
  7. Symbol

Number​

// Number
43;
-32;
3.5;
-54.999;
Infinity;
NaN;
23e3;
0b101;
0x11;
0o11;

String​

// String
''; // empty string
"hello there";
'i am cool';
`we are all cool`;
"The Year 2000";
'3 little piggies.';
"555555"; // numeric

Boolean​

// Boolean
true;
false;

Null​

// Null
null;

Undefined​

// Undefined
undefined;

BigInt (Big Integer)​

// BigInt
4353454353454543543n;
-3435345435435435433534563n;
34n;
-3n;

Symbol​

// Symbol
Symbol("hello");
Symbol("yum");
Symbol();
Symbol(); // looks just like the previous, however, they're completely different!

Objects​

  1. Objects
  2. Arrays
  3. Functions

Inspection​

As a javascript programmer you'll want to take a peak at what's going in your program. To do that we can use console.log. For now don't worry too much about it, just know you can use it like this:

// console.log(DATA);
console.log(4);
console.log("hello world");
console.log(false);
console.log(null);
console.log(undefined);
console.log(Symbol("yo"));
// etc...

Variables​

  • var
  • let
  • const

Logic​

Short-circuiting​

Repetition (loops)​

  • for
  • while
  • do while
  • for...in
  • for...of
  • .forEach

More about arrays​

Re-using code​

  • functions
    • invoking / calling

API (Application Programming Interface)​

DOM (Document Object Model)​

The DOM is a browser API.

  • every webpage behind the scenes is a DOM tree structure, check it out