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);

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)

Review of JS

By Xiaochen Du

Review of JS

  • 56
Loading comments...