bloominstituteoftechnology/web-foundations-module-6

Lambda Foundations

Module 6 - Javascript - Functions

Module 6 Project

Today we learned about the basics of Functions in Javascript. We now know that functions are the heart of all programming in Javascript. Functions also have their own behavior unique to them. This includes the concepts of Parameters and Arguments, as well as the concept of Scope.

Getting Started

In order to get started you will need to download this project as a .zip file and open it in VS Code (like Modules 1 and 2). Here are the instructions to do so:

1. Click on the Green button that says Code in the upper right-hand side of the screen.
2. You will see an option at the bottom called Download Zip.
3. You will need to find the place the .zip file is downloaded to. This will usually be the Downloads folder on your computer. Tip: if you are using Chrome, you should be able to click on the download itself in the bottom left-hand corner of your browse, this will open the location of the downloaded file in My Computer or Finder.
4. Double-click on the .zip file itself. Once you unzip the file you should see a Folder or Directory with the name "Web-Foundations-Module-3" next to the .zip file.
5. Either drag and drop the entire folder onto the VS Code icon, OR open VS Code -> click on File > Open -> Find the folder from step 4 -> Click open.
6. Open the index.html file in your browser. In most cases you can drag and drop the HTML file directly to your open browser screen.

Analyze the Code

Before you open the project, one thing to note. A LOT of code has already been written. This may be overwhelming at first, that's OK! Take a moment and just analyze the code that has already been written. Are there elements that you recognize? Are there elements that you've never seen before? Take note of these things. A major skill in software development is learning to read the code that is already there and figuring out where to insert your own code. We've done that step for you today but as an exercise try and answer the questions below:

1. On lines 1 - 7 in Analyze.js which level of scope are these variables being created in?

[Write Your Answer Here]

2. On which line in Analyze.js is the function zoo being called?

[Write Your Answer Here]

3. Is using the nameOfZoo variable in the function on line 13 of Analyze.js valid or will this produce an error?

[Write Your Answer Here]

4. What will be the result of the console.log on line 18 in Analyze.js?

[Write Your Answer Here]

5. In Analyze.js, how many arguments are being used?

[Write Your Answer Here]

6. In Analyze.js, how many parameters are being declared?

[Write Your Answer Here]

Try it out

The Try it Out portion of this project will take place in two parts.

Part One: The first part is located in the TryIt.js file.

• In this file you will create a function and name it addTwoItems.
• This function will take two parameters.
• This function will return those two parameters added together.
• When you are complete, make sure to link the TryIt.js file in the index.html file.
• After opening index.html in your browser you should see two input boxes and a button at the top of the screen.
• You may input any string or number into the boxes and click the button.
• If your function was written correctly you should see the two items added together and a message.
• If not, don't stress, go back to the TryIt.js file and keep working on the function until the button works!

Part Two:

• Now with your function working correctly and the index.html file open in your browser, answer the quiz questions. Be sure to pay attention to detail and read the code carefully.
• Once you get 28/30 questions correct, the password will appear at the bottom of the screen.
• You may need to work through the questions multiple times in order to get a passing score. This is by design, the more time you spend reading and analyzing code, the faster you will pick it up!

**Password: ** [Write Password Here]

Go further

In this section, we'd like you to take your learning into your own hands! It is an important skill to be able to find the answers you are seeking on the internet while working on a software project. In today's case, Google will be your friend. We've highlighted some potential Google search phrases, but try to think of how you would word your search on your own.

1. Functions. There are a few different ways to write a function. Today we learned one. Do some research and discover two other ways to write a function.

Method One: [Write Your Answer Here]

Method Two: [Write Your Answer Here]

2. There is another way to access arguments within a function (without relying on a parameter). See if you can dicover how to access these arguments. Don't worry about the details, we will be learning more about the concepts that present themselves in tomorrow's lesson.

[Write Your Answer Here]

In Your Own Words

An impactful technique in learning something new is attempting to reiterate the concepts you just learned from memory in your own words. This allows you to highlight areas you are not comfortable with and could study on a little more. We'll start this exercise off pretty simply. Just remember that this is merely an exercise, there are no right or wrong answers here. Please answer the following question in your own words

1. What is a function?

[Write Your Answer Here]

2. What is the difference between an argument and a parameter?

[Write Your Answer Here]

3. What is scope? What is function scope? Are there any other types of scope?

[Write Your Answer Here]

Complete the Assignment

Once you are completed with all of the above exercises, find the Folder Web-Foundations-Module-6 in your Finder or My Computer. Right-click on the folder and select "Compress Web-Foundations-Module-6". This will create a .zip file. Upload this .zip file to Canvas the same way you uploaded your .zip file from the last lesson.