Extended Review

Data Types in JavaScript

  1. Primitives in JS
  2. Objects

7 Primitive Data Types




Objects

An object is a collection of related data and/or functionality (which usually consists of several variables and functions — which are called properties and methods when they are inside objects.)


Class: A Key Part of Object Oriented (OOP) JavaScript

A class is a template for the creation of objects. from p5.js reference

Constructors 👉🏿 are a special method for creating and initializing an object created within a class.
Game Sketch using functions to construct objects
Game Sketch using class to construct objects


JavaScript and the DOM

The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web.
The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them you can change the document’s structure, style, or content.

DOM Tree
<!DOCTYPE HTML>
<html>
<head>
<!-- We would place the 'settings' for the computer to read here -->
  <title>Test 1 2</title>
</head>
<body>
  <h1>Saying Hello</h1>
  <p id="myid"></p>
  <script>
    let str = "Hello ";
    let elem = document.getElementById("myid");
    elem.innerHTML = str.repeat(10);     
    elem.style.fontFamily = "Helvetica"; // Modifying style
  </script>
</body>
</html>

Common Document methods

p5 Sketch with basic DOM manipulation
Examples of DOM Manipulation in vanilla JS

Supervised Reading

Using the MDN and p5.js references, create some simple:

10 mins:
while 👉🏿 and do while 👉🏿 loops,
10 mins:
switch statements 👉🏿,

// p5.sketch to move circle up and down with switch statement

let y = 200;
function setup() {
  createCanvas(400, 400);
  ellipseMode(CENTER);
}

function draw() {
  background(220);
  
  if(y >= height) y = height;
  if(y <= 0)  y = 0;
  
  ellipse(200, y, 50);
  if (keyIsPressed) {
    switch(keyCode) {
      case UP_ARROW:
        y -= 4;
        break;
      case DOWN_ARROW:
        y += 4;
        break;
      default:
        y = 200;
        break;
    }
  }
}

45 mins:

Read Chapter 10 from Getting Started with Processing by Lauren McCarthy and complete the exercise

If there is still time left: Read Chapter 13 section ‘p5.dom’Getting Started with Processing by Lauren McCarthy and:
- create a simple sketch manipulating the DOM with p5js. - create another file manipulating the DOM using some of the common vanilla JS DOM APIS. For example:

document.getElementById(id)
document.getElementsByTagName(name)
document.createElement(name)
parentNode.appendChild(node)
element.innerHTML
element.style.left
element.setAttribute()
element.getAttribute()
element.addEventListener()
window.content
window.onload
window.scrollTo()