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
- 530