Intro to JavaScript 

Title Text

• Bullet One
• Bullet Two
• Bullet Three

Draw basics

• rect(100, 150, 200, 100);
• ellipse(200, 100, 80, 100);
• line(100, 50, 300, 175);
• triangle(100, 100, 300, 100, 200, 300);

Documentation

Color

• background(255,0,0);
• fill(255,0,0);
• noFill();
• stroke(255,0,0);

animation

draw = function() {

}

mouse

• Mouse state:
  • mouseX, mouseY
  • mouseIsPressed
• Mouse events:
  • mousePressed()
  • mouseClicked()

text and string

• text("Hello \nWorld!", 50, 100);
• "Hello " + "World"
• var f = createFont("monospace");
  textFont(f);
• textSize(50);

function

var sayHello = function(xPos, yPos) {
   text("Halllllllo!", xPos, yPos);
};

sayHello(200,200);

if

var answer = floor(random(0, 8));
if (answer === 0) {
    fill(0, 255, 0);
    text("YES", 186, 229);
}else if (answer === 1) {
    fill(0, 255, 0);
    text("CERTAINLY", 164, 229);
}

loop

• three questions:
  • what is repeating
  • what is changing
  • when to stop
• while
• for 

array

• fruits = ["orange", "apple","pear","grape"]

object

var book =
    {
        title: "Harry Potter",
        stars: 5,
        author: "J.K. Rowling"
    };

book.title

book.stars

object type (a.k.a class)

var Book = function(title, author, numPages) {
  this.title = title;
  this.author = author;
  this.numPages = numPages;
};, 

var book = new Book("Harry Potter", "J.K.Rowling", 500)

method

Book.prototype.readItAll = function() {
  this.currentPage = this.numPages;
  println("You read " + this.numPages + " pages!");
};

var book = new Book("Harry Potter", "J.K.Rowling", 500);

book.readItAll(); 

inheritence

var PaperBack = function(title, author, numPages, cover) {
  Book.call(this, title, author, numPages);
  this.cover = cover;
};

PaperBack.prototype = Object.create(Book.prototype);

var book = new PaperBack("Harry Potter", "J.K.Rowling", 500, cov)