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.
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.
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.