Functions, Arrays and Struct like Objects

• Our Goal for the day
  • The stars.js code.
• The HTML file
  • Nothing special here
  • Note that stars.js is included with the delay attribute
  • A canvas
  • A button
• We will represent stars as rectangles.
  • We can do better later, but this will do for now.
  • a reference
  • There are three version
    • rect(x,y,width, height) which needs a .fill or .stroke to complete.
    • fillRect(x,y,width, height)
      • Uses context.fillStyle = color
    • strokeRect(x,y,width, height)
      • Uses context.strokeStyle = color

    • <script>
      "use strict"
      let canvas = document.getElementById("rectDemo")
      let context = canvas.getContext('2d');
      
      context.fillStyle="green";
      context.fillRect(10,10, 30,40);
      
      context.strokeStyle="blue";
      context.strokeRect(60,60, 20, 5);
      
      context.beginPath();
      context.rect(120,20, 40,40);
      context.fill()
      context.stroke()
      context.beginPath();
      context.rect(120,120, 40,40);
      context.fill()
      context.beginPath();
      context.rect(120,220, 40,40);
      context.stroke()
      </script>
                 

• Arrays
  • reference.
  • Think vector
  • But of mixed object types.
  • New instance with
    • let ary = []
    • let ary = [1, "hello", x] (assuming x is defined)
    • let ary = new Array(length)
    • let ary = new Array(1, "hello", x) (assuming x is defined)
    • .length is a property
    • Many methods:
      • .push, .pop, [] or at
  • A structure like item
    • let item = {label1: value, label2:value ... };
    • item.label1 = "fred"
    • Labels can be any valid identifier.
    • They can be added after declaration.