cndylee2

[cndylee2]

Class 13 HW 1: Creating WebVR using A-Frame

Didn’t work on Chrome, but worked on Opera and Firefox. In the 1st guide, we made a basic scene. In the 1st screenshot, I couldn’t get this to work with <assets>, so I used “src” to make the box and sky textured instead. Then, I got rid of the textures and made the box plain red and put it in a forest environment. (I later put it in a different environment and changed the box color to blue in my html.) I added the ground and a green hue. I made the box and its sphere pop out when the central dot touches either of them. In the 3rd screenshot, I added “Hello Aframe.” Following the instructions in the Image Gallery guide, I made a city image appear in the browser. The 3 black "thumb” images can all make a clicking sound when I click on them. I added “alt” to the images. For the Minecraft demo guide, first there was only a grey ground, then I added the black sky and a sphere. I added 4 boxes in front of the sphere; the top box is constantly rotating.

[cndylee2]

Class 14 HW 2 Final Codecademy Progress

I picked up where I left off (MC quiz at the end of Loops) and ended with Iterators. I did not already learn about Iterators from Khan’s tutorial and it was getting late, so I probably wasn’t as productive as before. For Iterators, there were 2 interactive lessons: Higher-order functions and Iterators. I learned that .forEach() returns undefined, and is used to execute the same code on every element in an array w/o changing the array. The .findIndex( ) returns the index of an array’s 1st element, and returns -1 if none of the elements in the array satisfies the condition. I used .findIndex to find the 1st element that starts with “s.” .reduce( ) returns a single value. We also learned about .map and .filter. Codecademy’s js tutorial has fewer sections than Khan’s, but each one contains more information, so I only completed at least 2/4 of Codecademy’s tutorial.

[cndylee2]

Class 14 HW 1 Final Khan Progress

I picked up where I left off (Debugging Programs) and ended on Writing Clean Code. I learned how to figure out where errors are using println( ). Khan taught about While loops: while (how long to repeat) {what I wanna repeat; what I wanna change each time}. I used these loops to complete the loopy ruler challenge of making evenly spaced numbers across the screen. I also used while loops for the Loopy Landscape Challenge of making evenly spaced trees. Then we did For loops: For (starting point; how long to repeat; what i wanna change each time) {what i wanna repeat}. I used For loops for the lined paper challenge. We also saw nested For loops. For writing clean code, I completed the quiz on how to make the code look less hard to read. There are still 4 sections left, but I’ve completed at least 3/4 of Khan’s Intro to JS.

[cndylee2]

Class 13 HW 4 Codecademy Progress

I picked up where I left off (Functions) and stopped at Loops. I recalled what Khan Academy taught about functions, so I got through Functions (declarations, expressions, parameters, return) quickly, but there were still some things about functions Codecademy taught that Khan didn’t e.g. formatting them differently as arrow functions (func = (day) => {return num*num}, instead of func (day) {}) or concise body arrow functions (func = day => num*num). Then, I did Scope. The 1st screenshot shows that the console.log result is different b/w inside the if () {} block vs. outside the if block but still within the function. Then, I did Arrays. I did console.log (a variable that equals a constant [index of the array]) to log a string from the array. I tried push, pop, and other array methods, which can add or remove strings to the array. Khan did not mention do while loops, but these were taught in Codecademy’s loops tutorial. In the last screenshot, we used nested loops to add bob and tina’s mutual followers to a 3rd variable, mutualFollowers, which was set to an empty array.

[cndylee2]

Class 13 HW 3 Khan Progress

I continued from where I left off (start of Functions) and ended on the end of Logic and If Statements. Khan taught us how to use variable drawWinston equals a function to draw Winston many times at random points; I completed the challenge of using a function to greet myself many times at random points. I learned about adding parameters into func (param) {} so that faceX & faceY won’t be drawn at random points anymore. I learned about doing var _ = func (donuts) {return donuts*365 days} & text ( _ (age) ) to show how many donuts Winston has eaten; I did the calculator challenge. I learned about local vs. global variables & special JS functions. For Logic and If Statements, I used if statements to make the ball bounce away from the edges. Khan taught about using mouseIsPressed to increase interactivity, and I used this method to draw a treble clef. I used Booleans in my if statements for the number analyzer challenge. Then, I did logical operators to make the button change color only when I clicked the space within it. I learned about If followed by Else to complete the Flash Card challenge.

[cndylee2]

Class 12 HW 2 JavaScript Tutorials

Khan: You can see others’ comments directly under the videos on the site. It’s convenient that the videos are on Youtube, b/c you can fast-forward. This tutorial is both easier and more fun, b/c videos are designed for kids e.g. videos call the coded face ��Winston.” You can see the resulting images on the right. I skipped some projects, but the challenges were helpful for checking understanding of concepts. Khan gives hints for challenges. 

vs. Codecademy: Unlike Khan, you need to log in. My main dislike is that, unlike Khan, this site seems to not be free, but it did offer a free trial for Pro membership. Also, unlike Khan, you must open a tab to view the forums/comments for Codecademy. If you open a new tab, you might get temporarily disconnected from CodeAcademy, but it’s ok, since it saves your code. Solutions are given if you need them. For projects, your answers are not automatically checked for accuracy; after you manually check your work using the hints, you check off each instruction’s box. This site was less fun and also harder to get used to at first, since it had some more reading and no videos. Codecademy more quickly gets to console.log ( ) and other topics. I liked Codecademy’s straightforward tutorial more than Khan’s kid-friendly one, but I think it’s good to start with Khan. If I had to pick only 1 to continue, I’d pick Codecademy’s, b/c it seems to teach more actual code.

[cndylee2]

Class 11 HW

HW 1 JavaScript Grammar and types: 

I learned that the undefined value converts to NaN, and a null value behaves as 0 when used in numeric contexts. When you declare a variable outside of any function, it is called a global variable, cuz it’s available to any code in that doc. Hoisting is when you refer to variables in JavaScript declared later without getting an exception, but hoisted variables return a value of undefined, so all var statements in functions should be put close to the top of the function. Only the function declaration, not function expression, gets hoisted to the top. You can’t declare a constant with the same name as a function or variable in the same scope, etc. 

HW 2 What went wrong? Troubleshooting JavaScript: If unsure of the correct spelling of a part of syntax, search for mdn name-of-feature. Must capitalize addEventListener correctly. Got lowOrHi.textContent = 'Last guess was too high!'; error after clicking submit guess button. After adding console.log(lowOrHi) under var lowOrHi = document . querySelector ('lowOrHi'); line, we found that the value was null, cuz it should be var... ('.lowOrHi'); with the dot. Write Math.floor(Math.random()*100) + 1; to make a random #. Be sure to use the right one between = and ===.

HW 3 Storing the info you need -- Variables: Declaring a variable (e.g. #, string, object, etc.) after initializing it is bad, so it’s good that changing var to let would cause an error.  Unlike var, when using let, you can’t declare the same variable as many times as you like. When you give a variable a # value, don't include quotes. Once an array (containing values in square brackets & split by commas) is defined, you can access each value by their location 0+ within the array. An object can represent a person, & contain their name, age, etc. Once declared, a constant can never be given a new value. 

HW 4 Basic math in JavaScript — numbers and operators: Floats are decimals. Doubles are floats that are accurate to a greater # of decimal places. 8 % 3 (result is 2, since 8/3 has remainder 2). 5 ** 5 (result is 5^5.) With increment (++) & decrement(--) operators, browser returns the current value, then increments the variable. Assignment operators (e.g. x=10 y=5 x/=y results in x=x/y=2) assign a value to a variable. Use comparison operators to act depending on result of T/F tests.

HW 5 Control flow and error handling: JavaScript supports control flow statements to include interactivity. {Block statements} group statements, & are often preceded by control flow statements (if, for, while, etc.) If you must use an assignment in a conditional expression, put extra parentheses around the assignment. A switch statement lets a statement be executed if a match is found b/w an expression's value & a case label. We can throw exceptions using throw statement & handle them using try...catch statements. Finally block has statements to execute after try & catch blocks execute but b4 statements after t&c statement.

[cndylee2]

Class 11 Step 4

Valid HTML5 code: I used the validator. It validated the given code.

Invalid HTML5 code: I removed Doctype and meta tag. I wrote title tags as “titles” instead of “title.”

Valid CSS Code: I added inline CSS in the body and internal CSS in the head. The inline CSS makes a border and internal CSS makes the heading and paragraphs different colors. It was validated.

[cndylee2]

Class 10 HW 1

1. Adding Variables to Store Out Data: I learned that variables are containers for values (#s, or strings of text.) Variable are made with let/var followed by a name for the variable. Constants store values that you won't change. Constants are created with const. 

2. Functions: We learned to make a function that makes an alert when we call it. Functions are reusable code blocks that run again. This saves the need to repeat the code. We can define a function by using function followed by a name, then parentheses, then two curly braces ({ }) containing code we want to run whenever we call the function.

3. Operators: We learned that JavaScript operators let us perform tests, do math, join strings, etc. I learned how to open the developer tools JavaScript console. name += ‘hello’; means name = name + ‘hello.’ There are comparison operators e.g. inputting 6>10 or 5 === 2 + 4 gives you false, and  5 !== 2+4 gives you true.

4. Conditionals:  “let userGuess = Number(guessField.value);” declares a variable called userGuess. It sets its value to the value entered in the text field. We run this value through the Number() constructor to ensure the value is a number. A conditional code block can start with if and lets us run code depending on whether a certain condition is true or not.

5. Events: checkGuess() function won't do anything, b/c we haven't called it yet. We want to call it when the "Submit guess" button is pressed, so we must use an event. Event listeners listen out for events (things occuring in the browser e.g. button clicked, page loaded, etc.) Event handlers are code blocks that run in response to the event firing.

6. Finishing Game Functionality: We now define the setGameOver() function. It will be run once the game is over. We then define the resetGame function. It will empty everything and generate a new random #.

7. Loops: Loops let you keep running a code until a condition is met. A for loop takes 3 input values. They are a starting value, exit condition, and an incrementor. The loop in this game is inside the resetGame function.

8. Small discussion on objects: guessField.focus(); uses the focus() method to put the text cursor into the <input> text field as soon as the page loads. This improves usability. In JavaScript, everything is an object, a collection of related functionality stored in a single grouping. guessField contains a reference to an <input> element, so it will have access to properties and methods e.g. focus().

9. Playing with Browser Objects: 

For guesses.value, browser will return undefined. That is b/c paragraphs don't have the “value” property. guesses.textContent = 'Where is my paragraph?'; makes a sentence appear on the page. guesses.style.backgroundColor = 'yellow'; makes that sentence yellow.

10-11. Finished for Now/What it Took: The final game works. It matches their source code. The explanations of what each part of the code does confused me. I think it took >2 hours because i kept getting distracted

[cndylee2]

Class 10, HW 2: Grow and Shrink

I took the script from class 10 step 8. I put it into the head and into the img tags of the store products page. All but one of the images now grow and shrink.

[cndylee2]

Class 10 video embedding

[cndylee2]

My scripts are great again

class 10 step 6

[cndylee2]

Class 9, Homework 2: What it took

I thought the 1st (internal) and 4th (comments) parts were straightforward with just copy-pasting. I got confused on step 2, since I just dumped everything into html without making a script.js, but I realized my mistake. For step 3, I only needed to paste what it said was not recommended, right? Since we did most of this hw during class time, it took half/less than an hour after class to finish. edit: oh i forgot to use validator--will need to go back and do that

[cndylee2]

Class 9, Homework 2: Comments

We learned how to write comments for computers to skip over. Comments are useful for reminding yourself how the code looked originally. There are 1 line comments with //. There are multi line comments between strings  /* and */.

[cndylee2]

Class 9, Homework 2: Inline JavaScript handlers

Each button in the body has “onclick” added to it. The site says this is what not to do, since it pollutes html with javascript. It is also inefficient. I learned that internal with “addEventListener” and external with “defer” are both better. “asyn” can also be used to bypass blocking script.

[cndylee2]

Class 9, Homework 2: External JavaScript

I learned to defer to an external javascript. they end in “.js.” This method makes the html file less cluttered. Deferring is good for telling browser to continue downloading the html once script tag is reached.

[cndylee2]

Class 9, Homework 2: Internal JavaScript

When you click the button, the text appears. We learned about applying internal javascript to html. It goes inside the script element in the head. javascript is case sensitive