Course info
Dec 21, 2016
2h 6m

Practicing with variables, loops, switches, and operators is key to building an authentic web delivered application. In this course, Hands-on JavaScript Project: Solar Calculator, you will create several small projects that explore the features of JavaScript concepts in isolation. To start off, you'll get some practice with functions and loops. Next, you'll brush up on using HTML selectors in conjunction with JavaScript switch statements and explore how to interrogate the DOM. Finally, this course will wrap up with by using what you learned to build a real world solar calculator that calculates the number of solar panels required based on the your monthly electricity usage, where you live, and which panels you select. By the end of this course, you'll be able to apply the principles you learned here to other JavaScript projects you may work on.

About the author
About the author

Paul Cheney is a professor of Web Design and Development at Utah Valley University, where he teaches Responsive Design. He also owns his own web design company, which allows him to keep current in the field and share the latest technology with his students.

More from the author
Hands-on JavaScript Project: JSON
1h 16m
Oct 26, 2018
Best Practices for Responsive Web-forms
1h 10m
May 31, 2018
Hands-on Responsive Web Design 4: Navigation
1h 36m
Jan 22, 2018
More courses by Paul Cheney
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hello, my name is Paul Cheney. Let me tell you about this great hands-on JavaScript course. I believe that the best learning comes when you and I work together to build projects that you might see in the real world. In this Pluralsight course we will be learning about JavaScript functions, loops, switch statements, and gathering information from the Document Object Model, or DOM, using an authentic hands-on approach. Next we'll apply everything we have learned to create a web app that allows customers to calculate how many solar panels they need to power their home. Now I realize you may not need a solar calculator for your next client, but the information you learn here will transfer to other JavaScript projects you work on. As you do so you will remember what you learned so you can apply it in the future. That's the power of hands-on learning, so join me as we work together to learn the fundamentals of JavaScript.

Exploring Functions
Let's take a good hard look at functions. In this module, we will first create a function and then look at several ways to call a function. Next we will pass values into the function and then return values from the function. Finally we will call a function from another function as we build a project that calculates the material needed for a round room. A function is simply a block of code that contains one or more statements that complete a task. The statements inside a function are not triggered until the function is called. To call this function, I use test with a left and right parentheses. The result would be a pop-up on my browser screen. You can also pass values to a function. In this case when we call the test function we will include the name of Jane. Jane gets put into a basket and carried to the function where it is transferred to a new basket called userName. When we perform the alert, we pull the name Jane out of the userName basket and show it on the screen. You can also return values from a function back to a variable. In this case we're going to create a function that calculates the mother's age as 20 years more than her son. Down here we create a variable called motherAge and assign it to the name of the function. We put the son's age between the parentheses. When we call the test function we put a 12 into the basket, the 12 is then put into a variable called sonAge, we use a local variable x and add 20, then return the value of x, which is put into the mother's age variable. Once the program advances to the next line of code, an alert is called and we get a pop-up showing the mother's age as 32. Alright, it's time to get out of theory and start coding.

Exploring Loops
Hello, this is Paul Cheney. Let's take a good, hard look at loops. We will start with the structure of a while loop and then jump to a for loop. Next we will use a loop to extract data from elements inside the HTML. Finally, we will build a reusable function with parameters to loop through multiple HTML elements.

Exploring Switch Statements
Hey, I'm glad you're still with me because we're going to explore the switch statement. We'll start with the structure of a switch statement using strings, and then show you how you would switch on numbers. Finally we will see a fall-through switch statement. A switch statement is basically a bunch of if/then statements all glued together into a single code block. Let's take a look at the parts. A switch statement has a single variable that it checks. Each possible match is then set up as a case with a matching value. If there is a match, then the statements following the match are executed. In this case if my variable was morning, then the console would log the message, Time for Breakfast. Once a match is found there is no need to keep checking, so you break out of the statement and jump to the end. Just in case there is not a match found, you should provide a default option. In addition to switching on variables with a string you can also switch on a number. If the variable myNum is assigned to the number 3, you would be assigned to the Bear team. If the variable myNum is assigned to the number 1, then you would see an error message because myNum did not match any of the cases above. A switch statement can also have multiple cases with similar results. This is called a fall-through switch. In this statement a number of 1, or 3, or 5 will generate a message that these are odd numbers. A number of 2, or 4, or 6 will generate a message that these are even numbers. Let's try this out using the start JavaScript file from the demos provided with this module.

Interrogating the DOM
Hello and welcome back. We're getting really close to the solar calculator, however, before we get there we need to review how to access elements in the DOM. We will start by getting and changing text using five different methods of interrogation. Then we will use a combination of these five methods to refine our interrogation techniques. The first one will be GetElementById. Notice that the word Element is singular. This tells us that it returns a single object. Second, we will GetElementsByTagName. Elements in this case is plural, so we'll get a collection of items that we access using array notation. Third we will use getElementsByName, which also returns a collection. Next we will use getElementsByClassName, again, a potential collection of multiple items. Then we will use querySelectorAll, which is really awesome, and also returns a collection. Finally, we will combine these to really target our inquiry. Make sure you have the starter file from this module's demos, it contains lots of HTML code that we will be using. Let's get started.

Solar Calculator
Congratulations on making it this far. It's time to put everything we've learned together to build the solar calculator. We'll start by looking at the flow of the JavaScript program, and then we'll actually build the calculator. There are three things we need to get from the homeowner. First is how much electricity the home uses on average. This is calculated in kilowatts per hour. Second is how much sunlight they typically receive per day. Finally the homeowner needs to choose a solar panel. Each panel generates different amounts of energy. Solar panels are rated by how many watts they generate per hour, which is different than the kilowatt rating used by the home. So let's take a look at the program flow. First we gather the last 12 months of power usage from the form inputs and add them together, then we divide by 365 days, and this gives us the average kilowatts used per day. Next we find out what zone the homeowner lives in and get the number of hours of sunshine per day. Then we divide the home's daily need by the number of sunshine hours to see what we need to generate per hour. Then we have to adjust for bad weather that blocks the sun, so we increase the need by 25%. Then we multiply the kilowatts needed by 1, 000 to get watt hours, remember this is how panels are rated. Then we find out which panel the homeowner would like to use. This tells us how many watts that panel can generate in a single hour of sun. Finally we divide to see how many panels are needed to offset 100% of the electrical needs for the home. Let's see this in code.