CINF201-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/

 

 
•      Download the “Week-10-Lecture-Notes.zip” folder from Blackboard

•      Take the “js-challenges-2.html” file and the js-challenges.mp4 file and place them in a folder you can find.

o   Create a “Week-10” folder in your “Documents” folder or some other folder you can access easily

o   Place both files in this newly created “Week-10” folder

•      Open the “js-challenges-2.html” file with a text editor of your choice  

•      Open the “js-challenges-2.html” file with a web browser and read the instructions

•      After reading the instructions, watch the video (if you didn’t see my explanation in class) to understand what output I expect

•      Review the 6 challenges listed on the page and add code in the <script></script> tags of the HTML file to complete the challenges

•      Make sure to pay close attention to the tips I’ve provided in the comments of the HTML file