CINF-Week 10 Solved

Week 10: JS Part II

 

Agenda 
Overview o Previous Participation Questions/Responses
o Midterm Reminder o What’s Due?

More JS Concepts (Lecture/Class Activity) o Variable Scopes o Arrays o Objects o Working with the DOM
JS Challenges 2(CW/HW)
Participation Proof
Next Week
 

 
 

More JS Concepts (Lecture/Class Activity)
Variable Scope
In JavaScript, there are two major types of scopes for variables, local and global. Global variables are ones declared outside of functions while local variables are declared inside of functions.

 

The difference is that global variables can be accessed anywhere in the document. Local variables can only be manipulated inside of their function. In the example below, x is a global variable and y is local to “myFunction()”…this means we can use the x value in and outside of the function. However, we can only refer to y inside of the function it was created in.

 

var x = 5; // Globally declared x variable var myFunction = function() {

var y = 4; // Locally declared y variable

console.log(x); // X can be accessed inside this function

}

myFunction(); // Produces output

console.log(y); // Will cause an error because y is only defined inside of myFunction

 

There is also block scope which is when a variable is declared inside of a block of code. If that same variable name exists as a global variable, changing its value inside of a block will change the value of the global variable. In the example below, we declare x to be 5 and log it to the console. After that, we check to see if x is greater than 0, if it is, we redeclare it to be 4.

 

var x = 5;

console.log(x); // Will log 5

if (x > 0) { var x = 4; // Redeclare our variable

}

console.log(x); // Will log 4 since the value has been changed

 

Sometimes this is what we want, however, there are cases where we want to use the same variable name inside of a block of code without changing the value of the global variable. We can do that by using the let keyboard. Instead of using var x = 4, we can use let x = 4.

var x = 5;

console.log(x); // Will log 5

if (x > 0) { let x = 4; // Declare our variable using let instead of var

} console.log(x); // Will log 5 this time since using let doesn’t affect our global variable.

 

In the example above, I used let instead of var to declare a variable. As such, the global variable isn’t affected even though I used the same variable name. For the most part, we will deal with function/global variables and won’t need let but it’s a good thing to understand.

 

Arrays
Think of these as lists of any kinds of data (which can include other arrays). These data pieces are separated by commas and placed inside of square brackets. Every item inside of an array has an index number which is used to refer to that item. For example, we might have an array of house pets:

 

var housePets = [];

 

The one above is empty and has nothing in it.

 

var housePets = [‘cat’, ‘dog’, ‘bird’, ‘chinchilla’]

 

The above array has four items, but the index number only goes up to three. This is because the first item in any array has an index number of 0. The values are listed below:

 

housePets[0]; // Refers to cat housePets[1]; // dog housePets[2]; // bird

housePets[3]; // chinchilla

 

You can change values at any point by referring to the item and then assigning it a new value:

 

housePet[3] = “fish”;

 

The array would now be housePets[‘cat’, ‘dog’, ‘bird’, ‘fish’]

 

Like strings, arrays have their own set of methods/functions which can be used on them.

 

Using housePets.length; would produce 4 for our case.

 

We can also use things like pop() or push() to remove or add items to our array.

 

housePets.pop(); // Removes last item in our array – becomes cat, dog, bird

housePets.push(‘cow’); // Adds cow to the end of our array – becomes cat, dog, bird, cow

 

Overall, you should think of a variable as a box which holds a value. An array is like a box which contains many other boxes inside of it.

 

Objects
These are things in JS that have their own properties and methods which can be called upon using something called dot syntax. Dot syntax is used between objects and functions so that your code knows what to do.

 

For example, if you have a car, that car has multiple characteristics and things it can perform. We can create an object for a car with the following code:

 

var myCar = {

name: “Herbie”;          owner: “none”;            age: 58;

honk: function() {alert(“HONK HONK!”);}

};

 

All you need to do is say var variableName = {} and place all methods/properties inside of the curly brackets. Name, owner, and age are all properties while honk is a method. We separate these with a colon but refer to them as key/value pairs. To get these values and use them, we use dot syntax which utilizes a period and the property/method name.

 

console.log(myCar.name); // Refers to the name key but logs the value “Herbie” to the console

myCar.honk(); // Would cause an alert to appear with “HONK HONK!” myCar.age; // Refers to the age key and the value of 57

 

Objects in JS are powerful because almost everything is an object of some sort. Arrays, strings, and other types all have their own properties or methods (length, concat, push, pop, splice, etc.).

 

We have already worked with objects before. One example we have already seen is the console object. We can use the “log” method/function to create output in the Console.

 

console.log(“Hello World!”);

 

Console is the object we are using and then we place a period after it to signify that we are going to reference some method/function or property. In our example, we are using the log function and then providing “Hello World.” as the value for that function.

 

Similarly, we can do the same with strings or any other object in JS. In the example below, we create a string with a value of “Chris.” After this we create another variable which uses our previously defined string (myName) and the length property to get the length of that string. Just like with console or other objects, we use a period to separate the object and the method/function or property.

 

var myName = “Chris”; // Creates a string with a value of Chris

var myNameLength = myName.length;

 

Online Resources

https://www.w3schools.com/js/js_let.asp (Let vs var)
https://css-tricks.com/javascript-scope-closures/ (Only up to “function hoisting”, this goes very in-depth)
https://www.htmldog.com/guides/javascript/beginner/arrays/ (Arrays)
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Array (Array Methods - ignore let for now)

https://www.htmldog.com/guides/javascript/beginner/objects/ (Objects)
https://www.geeksforgeeks.org/objects-in-javascript/ (More Objects)
 

Working with the DOM
Follow along with me in a text editor as I demonstrate how to interact with items on the page. If I’m moving too fast, feel free to look through the code in today’s class examples. I’ve provided links to them below. Most of the work I do during my live demonstration will be pulled from these examples.

 

This example contains content which pertains directly to this week’s assignment. It demonstrates how to alter styles or text on a web page using JS.

 

Example 1: https://www.albany.edu/~cv762525/cinf201/examples/page-output-example.html

 

This link contains examples of previously discussed concepts from Week 9 in addition to examples from this week’s content.

 

Example 2: https://www.albany.edu/~cv762525/cinf201/examples/js-concepts-example-2.html

 

JS Challenges 2 (CW/HW)
Download the “JS-Challenges-2.zip” folder from Blackboard under today’s Lecture Notes or the Assignment folder. Extract everything from inside of this zip folder to some place where you will be able to find them easily. Inside of the zip folder will be an HTML file and an MP4 file (video) which will explain how the assignment should work and where to begin.

 

Your task is to read the challenges displayed on the HTML page and add JS as needed to complete them. Underneath each challenge description is a set of <script></script> tags where you will place your JavaScript.

 

Review the two examples from this week (listed above) as they both contain code that can be used for these challenges.

 

To view all other class examples, visit this link and click whatever you want to see. The js folder contains the various JS files used for the examples.

 

https://www.albany.edu/~cv762525/cinf201/examples/