Project by: Henry Toll (10th Grade)
Project Advisor: Jacob Farkas
Student(s)’s Advisor(s): Shauna Finn

Description of the Project:

This Honors Project is proposing to teach me coding in JavaScript with help from Jacob Farkas. We will mainly focus on working on the principles, and syntax of code. I would like to take this honors work on, because I have worked on the hardware side of engineering previously, and would like to try out the software side. I believe coding is also useful to learn, because it’s a valuable resource in life, even if I don’t pursue it in college. My goals in this project are to learn JavaScript as a language of code and use that knowledge to make some coding projects. I would like to be prepared for the AP coding subject matter test, to show my understanding of coding in a universal format. 

This project is a yearlong project,

So here is a brief review of the work I did in trimester 1 and 2:

In Trimester 1
I worked on some types of basic graphics using SVG and then moving that into p5.js. I used this time to learn how to make shapes and attach colors to them using SVG. It sounds rather simple, but it requires a lot of code and math to make an actual design. You have to work with things like canvas, and understand how to use its axis. I ended the trimester by moving into p5,js.

In Trimester 2
I worked on using my learned knowledge of SVG to translate it into p5.js and make some more advanced graphics with functions. I used some of p5.js online instruction video, to learn about how to make graphics that scale better for different web page sizes. I learned how to connect graphics with inputs from the user. For example, a code that would allow the person to click on a color and then be able to draw using that color. This used some more advanced functions that took from the user’s input and would scale everything according to the requirements of the person. I ended this trimester with a good understanding of SVG graphics and using them in p5.js. I decided to practice from the basics again to prepare for one of the Coding AP subject tests.

In the first 3 weeks of trimester three, I worked on the cementing the basics of JavaScript. I started in week 1 by going over the basic data types or primitive data types:

Numbers: / Integers any numbers

String: are Words or letters for English

Boolean: logical operator true vs false

Char: is a string that is one letter

I then moved onto to work on memorizing the basic operators and the basic logical operators:

Basic operators:

• Add
• Subtract

* Multiply

/ Divide

% Reminder

++ Adds one

— Subtracts one

+= Adds an amount to the previous var

 -= Subtracts an amount to the previous var

Logical operators:

Turns it into a boolean

=== equal

= makes it that

The basic operators have mostly to do with math, and the logical operators had to do with Booleans. In week two, I work on using Variables with If and loop statements. I started by going over the basics of what creating a variable means, and how it’s information is stored in memory. I then practiced using If statements, and Loop statements with different types of data types. 

If statement

var x = 3;

var y = “Henry”

var z = true;

var answer = “Hello “

if(x > -1){

 answer = answer + ” True”

 if(z === true){

   answer += “Mine”;

 }

}

Loop statement

while(x < 15){

 x += 1;

 console.log(x)

}

for(var i = x; i < 10; i++){

 }

var num_stars = 10;

var starter = “*”

for(i = 1; i < num_stars; i++){

 starter = starter + “*”;

}

I finished that week by taking a brief refresher on Arrays, and Dictionaries. 

Array

Var myArr = [1,2,3];

for(i = 0; i < myArr.length; i++){

console.log(myArr[i])

 } 

Dictionary

var myFirstDictionary = {

 “key”:5,

 “secondkey”:”Hello World”

};

Arrays and Dictionaries are more complex data types, referred to as data structures. I started week 3, by making codes using Arrays and commands related to them. I then moved towards understanding the pass by reference vs pass by value. Pass by value is when the value of a variable is defined by values, rather than a reference to any other context in which they are defined. All basic primitive data types I know of are pass by value. This means that a variable’s current value is what’s being referred to when being used. This means that if you write a code like this,

Var x = 2;

console.log(x);

Var x = 3;

Then it will print 2, not 3 because the variable x is just whatever value x is currently. On the other hand, pass by reference is when you refer to a variable by its memory slot. So that means if you change it down the road, it will print the newest value for that variable. Arrays are one of the data types, that use this reference. I ended week 3, by briefly using functions in a few codes to refresh my memory of them. A function is a reusable piece of code, that usually takes in something, does something to it, and returns something else. 

Some important commands for a function are:

Name -> the name of the function, you’ll use this to reference it later

Arguments – > what goes into the function, these are user-defined

Logic, what to do when the function is called

Return statement, which says to return

function myAdd(arg1,arg2) {

 return arg1 + arg2 

}

P.S. The pass by reference vs pass by value will also be affected by something called scopes, which I’ll touch on in update two.

Update on Progress from Weeks 4-6:

For week 4 I worked on practicing harder functions in arrays. A function is a reusable piece of code that usually takes in a variable. I didn’t really learn anything in week 4, but I practiced a lot of functions. I worked on a lot of different functions, here are two. This function which multiplies everything in a array by 2. 

//[1,2,3] – > [2,4,6]

var array = [1,2,3];

function multiplyArray(arg1){

 var x = arg1.length;

 for(i = 0; i < x; i++){

   arg1[i] = arg1[i] * 2;

 }

 return arg1;  

};

This function applies a new function to the array you put in.

function doToArray(myArr, myFnction){

 for(i = 0; i < myArr.length; i++){

   myArr[i] = myFnction(myArr[i])

 }

 return myArr;

}

console.log( multiplyArray(array) ) ;

For week 5, I worked on some more Functions using Dictionaries. I worked on some more advance functions using dictionaries. A new code U used was forEach. ForEach applies a function to everything in a array, one by one, starting at the beginning, ending at the end. For example here is a function that works with the user dictionary above it. 

user = {

 lizardNames:[“Tod”,”Brian”],

 printLizardFood:function(name){

   if(name === “Tod”){

     console.log(“5 lbs of food needed”);

     return

   }

   console.log(“2 lbs of food needed (Brian’s smaller)”)

 }

}

function how_many_lizards(user){

console.log(user.lizardNames);

[“Tod”,”Brian”].forEach (function(elem){

 user.printLizardFood(elem);

});

For week 6, I worked on a new type of function called a recursive function. A recursive function is a function that is basically a Elegant way to write a loop in a functions. You make the function run it’s self inside the function, until a certain if statement is met. In recursive functions you need to make a base case. A base case is the simplest case or ‘the lowest case’ of the function. You provide a value that the function should return for the base case. So that basically means if one of your inputs are 0 or 1 the function won’t be messed up by it. This is one of the recursive functions I made. It raises two by a power of something.

function powersOfTwo(raiseTo){

 if(raiseTo === 1){

  return 2;

 }else {

   return 2 * powersOfTwo(raiseTo – 1);

 }

}

console.log(powersOfTwo(2))

Update on Progress from Weeks 7-9:

For Week 7 I worked on using command prompt. Command prompt is the terminal of coding for a windows computer. Command prompt is how old fashion computers worked, they used only typed commands to make things work. I was exploring command prompt to understand how severs worked. Severs are basically a computer that gives code to your computer when you do a certain thing like go to a website. I could use my computer to explore this idea by running a code I written at a certain URL, but I was the only person that could go to that website. I used JavaScript to write my code for the website, but command prompt is written bash. This is the code I used in command prompt. 

Basic Bash Codes:

c:/ 

Is main harddrive

/ folders

What Command Prompt looks like:

Microsoft Windows [Version 10.0.18362.778]

(c) 2019 Microsoft Corporation. All rights reserved.

C:\Users\coolk>

C:\Users\coolk>ce

‘ce’ is not recognized as an internal or external command,

operable program or batch file.

C:\Users\coolk>CD

C:\Users\coolk

C:\Users\coolk>cd

C:\Users\coolk

C:\Users\coolk>cd ..

C:\Users>ls

‘ls’ is not recognized as an internal or external command,

operable program or batch file.

C:\Users>dir

 Volume in drive C is OS

 Volume Serial Number is 14EE-6EDD

Using bash in command prompt took me a long time to understand. So this all I worked on in week 7. 

For week 8 I worked on using some more advance functions. This helped me think more like a coder making it easier to write theses types of function. I tried two new things, writing functions inside of other functions, and using a multiArray. An multiarray is a array that has a array as one of the values inside the array.

Multi array

///single dimensional array

//[1,2,3]

// var mymultiArray = [[1,2,3],[4,5,6],[7,8,9]];

myArray[0][1] === 2

myArray[1][2] === 6

 

For example:

Here is a code that uses a second function 

function reduce(myArr, accumulator_function){

var x = 0;

if(myArr.length === 0){

return myArr[0]

} else{

function (for(i = 0; i < myArr.length; i++){

 accumaltor_function(myArr[i] );

  accumulator_function(for(i));

}

}

Here is a code that uses multi Arrays.

function flatten(myMultiArray){

var newArray = [];

 for(i = 0; i < myMultiArray.length; i++){

   for(b = 0; b < myMultiArray[i].length; b++){

    newArray.push(myMultiArray[i][b]);

   }

 }

return newArray;

}

In week 9 I worked on using classes. Classes are a type of special dictionary that you can do various things in. One of the most useful is how you can use a class to make custom made dictionary, and arrays. That means you can make something called a constructor function inside a class that will make it easier to make new dictionary with the keys, but new values. You can also make functions inside of the class that use the code this which I can use to connect to the specific use I’m referring to. So here is a example of a class I made that is about a person netflix account. When I initialize a new user I can make them part of this class which is where I can store their account info like Id, Password, FavoriteMovies. Then I can apply the special function to them. Classes become more more important when you have more users. For example, if you have a million users. By knowing all their keys and functions to find them are the same, make everything much easier.

//I’m aware some of theses movies aren’t on Netflix

class user

{

 constructor(Id, Password, FavoriteMovies){

   this.Id = Id;

   this.Password = Password;

   this.FavoriteMovies = FavoriteMovies;

 }

 findId(){

   console.log(this.Id);

 }

  findPassword(){

   console.log(this.Password)

 }

  findFavoriteMovies(){

   for(var i = 0; i < this.FavoriteMovies.length; i++){

   console.log(this.FavoriteMovies[i] + ” “) 

   }

 }

findFavorites(arr){

 for(var i = 0; i < this.FavoriteMovies.length; i++){ 

 var x = 0;

 var c = arr.indexOf(this.FavoriteMovies[i]);

 c -= arr.length;

 x = c + 1;

 }

 return x

 }

}

var user1 = new user(“bobK”, “1234”,[“Star Wars 7”,“Star Wars 1”,“Star Wars 2”]);

var user2 = new user(“kellyS”, “drowssap”,[‘The Room’,‘The Birds’]);

user1.findId()

user2.findId()

user1.findFavoriteMovies()

user1.findFavorites([“Star Wars 1”,“Titanic”,“Jurassic Park”])

Even though this Honors Project is ending I’m going to keep the same coding work schedule for over the summer. I think I’m well on my way to be able to take one of the AP Coding Tests next year. I’m also considering making a quadcopter Drone Hybrid this summer. Which I will have to program, but most of the work will be soldering.