ELLIOT'S JAVASCRIPT NOTES

for future reference by me for me

variables

variables store information!!

var variableName = value;

value can be a number, a boolean, text formatted like "this", and many other things! very cool

fill

fills following code with color. much like the 'color' and 'background-color' tags in HTML.

fill(100,100,100);

each value corrisponds to a red, green, and blue rgb number. simple really

text

displays a message, either written in the command or from a variable.

the second and third values represent units from the left side of the screen and the top of the screen.

text("hi gabe!!", 50, 50);

var headphoneModel = "ATH M50X";

text("my headphones are the model " + headphoneModel + " !!"

this would output the text, 'my headphones are the model ATH M50X!!'

arrays

a way to store multiple values inside a single variable!! wow!!

arrays go inside [square brackets]

var arrayVariable = [value1, value2, value3];

again, values can be a number, boolean, text, and other things.

to access a value inside an array, first specify the variable name and then the number of the value you want to fetch insie square brackets [].

remember!! the first value is always represented by a 0, not a 1!!

var personaTwo = ["tsumi", "batsu"];

text( personaTwo[1], 10, 30); numbers featured here are just the numbers to place the theoretical text.

the above text would print "batsu", because it is the second value listed, and the text would be 10 units to the left, and 30 units from the top.

var headmanwolfCharacters = ["toby", "mole", "patchy", "lucy"];

text("my comic has " + headmanwolfCharacters.length + "main characters!!", 10, 30);

'my comic has 4 main characters!!'

by using the .length property, i can see how many values are in my array.

you can also change items in an array later in the code.

var favoriteGames = ["Catherine", "Stardew Valley", "Umineko No Naku Koro Ni"];

favoriteGames[1] = "Liquid Sweet Dream Emulator";

this replaces the second item in the array with the new item.

loops

repreats any code in it under set perameters. sweet!

the big three questions for loops:

// 1. what do i want to repeat?

// 2. what do i want to change each time?

// 3. how long should we repeat?

loops love arrays!! heres an example with a breakdown

var higurashiQuestionArcs = ["chapter 1", "chapter 2", "chapter 3", "chapter 4"];

var chapterValue = 0;

this sets the first value to be fetched from the array to be value 0, or 'chapter 1'

while(chapterValue < higurashiQuestionArcs.length) {

this checks that the chapterValue number is less than the total length of the array, so it knows to stop when it hits the end of the array.

text(higurashiQuestionArcs[chapterValue], 10, 30+chapterValue*30);

the first part of this string is set to print the itemn in the array that corrisponds wioth the chapterValue.

the second part makes the text go 10 units to the right.

the third part adds 30 to the chapterValue, and then multiplies that by 30 to make each list entry equally spaced as the loop runs.

chapterValue++; }

this adds 1 to the number that is stored in chapterValue. Now the code will loop back to the beguinning og the while(), until chapterValue is larger than higurashiQuestionArcs.length

heres the same code as a for() loop instead of a while() loop.

for(var chapterValue = 0; chapterValue < higurashiQuestionArcs.length; chapterValue++) {

text(higurashiQuestionArcs[chapterValue], 10, 30+chapterValue*30) }

push()

adds a new item to an array! it 'pushes' a new item into the end of said array. good way to remember.

var languagesLearning = ["Javascript", "Python", "HTML", "CSS"];

languagesLearning.push("Ruby");

adds 'Ruby' to the end of the array, making it number 4.

objects

holds multiple variables inside one variable!! very cool sumika

objects go inside {curly brackets}

var ginkoDuck = {

feet: 2,

color: "yummie white"

likes: ["cantonese", "coding"],

isDuck: true,

yarnUsed: {

body: "White Red Heart",

feetsies: "Scrap of yellow"

}

};

text("the gink has " + ginkoDuck.feet + " feetsies", 10, 50);

to access an object inside an object, it would look like this:

text("the gink's body was made using " + ginkoDuck.yardUsed.body + " yarn.");

so basically, object.smallerobject.evensmallerobject.tinyobject ect ect

its also quite easy to change an object value down the line.

ginkoDuck.feet = 3;

now the gink has 3 feetsies

you can also add new objects down the line also you can also

if (ginkoDuck.feet <= 4) {

ginkoDuck.toes = "lots"; };

object types

the constructer function type below helps combine similar variables into one, editable variable that can be used in instances !!

var Character = function(nickname, gpa, x, y, picture) {

this.nickname = nickname;

this.gpa = gpa;

this.x = x;

this.y = y;

this.picture = picture;

};

var tobyScott = new Character("toby", 3.01, 20, 50, "images new/toby.png");

var patchy = new Character("patchy", 3.8, 80, 50, "images new/patchouli.png");

/////

var drawCharacter = function(Character) {

var img = getImage(character.picture);
image(img, character.x, character.y);

var txt = character.nickname + ", " + "character.gpa" + " gpa.";
text(txt, character.x+20, character.y-10);

};

drawCharacter(tobyScott);

drawCharacter(patchy);

make sure all subvariables are inside the function(), lest they go undefined!!

object methods

the .prototype suffix is used to attach functions to variables !!

continuing under line 5 of our object types code...

...

this.picture = picture;

};

/////

character.prototype.draw = function() {

*** now we can just put our drawCharacter function right up in heyah ***

var img = getImage(this.picture);

image(img, this.x, this.y);

var txt = this.nickname + ", " + "this.gpa" + " gpa.";

text(txt, this.x+20, this.y-10);

};

this attaches our draw function above to our prototype.

also, above, notice that i changed the "character.whatever" to "this.whatever", because it does the same thing inside the object

var tobyScott = new Character("toby", 3.01, 20, 50, "images new/toby.png");

var patchy = new Character("patchy", 3.8, 80, 50, "images new/patchouli.png");

tobyScott.draw();

patchy.draw();

below is what the output would look like, via the 'script' html tag.

[not quite working rn but will fix l8r]

object inheritance

adds on top of one objects, like the inherit css property.

requires a super fun base variable!!! example below

shorthand

++ : + 1

=== : equals

<= : less than or equal to

>= : more than or equal to