silliecelia / 2019-spring-06-javascript-functions

CoderBabez

Week Six - More Javascript

Objectives

Update the Puppy Fun House page to responds to more event handlers and selectors.

Vocab

• Javascript event handler
• JQuery
• Functions

Review

• What do we use JavaScript for?
• How do we connect JavaScript to our html?
• What is an event handler?

Lesson

Take a look at the live site:

• What are the html elements?
• What changes when the button is clicked?

Take a look at the html:

• What's in the html?
• How is the content initialized?
• How is the content changed when the button is clicked?

What are functions?

Functions are reusable sections of code. They are given 0, 1, or many parameters and operate on the page.

Functions look like:

function functionName(parameter) {
  // code
}

Functions are called like:

 functionName(value);

Don't worry too much about them now. Just know that you can call existing functions.

Find the functions in this project. Look in all the JavaScript files!

Homework: Update this project

• Add a second button in the header that changes the body color of the page.

  • What function would you call to get a new color?
  • Align it to the right side of the page

• Add a 4th column

  • Have it update when the other 3 columns are updated
  • How are the columns being selected
  • How will the width of the columns change?
  • Can you create a new function that will update all 4 columns in 1 call?

• Update functions

  • Add 2 more dogs to the randomDog function
  • Add 2 more colors to the randomBodyColor function

• Publish your page on github (gh-pages!)

Reference:

• https://api.jquery.com/click/
• https://api.jquery.com/nth-child-selector/
• https://www.w3schools.com/js/js_functions.asp