CPNT 262 Day 4 - Function fundamentals

Housekeeping

Goals of the day

• Tip Calculator using functions
  • Defining and invoking functions
  • Define and invoke a function with parameters
• Eat and Drink click handlers

1. Spoiler demo: String methods

• Strings and Dates in HTML

2. Defining and invoking functions

Knowledge of functions is a key skill in software development, especially in Javascript. An important concept to understand is that code inside a function is not run when a function is defined; only when the function is invoked.

Materials

• MDN:
  • Functions - reusable blocks of code
  • Build your own function
  • Function expression
• Takeaways: Function terminology
• Gist: Defining functions
• Gist: Invoking functions

Activity

• Tip Calculator: Defining and invoking functions

3. Arguments and parameters

A core goal of programming is to write DRY (Do Not Repeat yourself) code. In this session, we will remove repetitive code with the use of functions.

Materials

• MDN:
  • Build your own function
  • Function return values
• Gist: Function arguments and parameters
• Gist: Function return values

Activity

• Tip Calculator: Define and invoke a function with parameters

4. Event listeners

Materials

• Codepen:A simple click handler
• Introduction to events
• EventTarget.addEventListener()

Activity

• Codepen: A simple click handler
• Activity: Eat and Drink click handlers

Prep

Functions

• Read: Functions - reusable blocks of code
• Read: Build your own function
• Read: Function return values
• Read: Function expression
• Watch (by Steve Griffith):
  • Introduction to Functions in JavaScript
  • JavaScript Function Parameters
  • JavaScript Function Return Statements

Events and Element.addEventListener()

• Read: Introduction to events
• EventTarget.addEventListener()
• Watch: Introduction to JavaScript Event Listeners by Steve Griffith
• Reference: MDN Event Reference

Free Code Camp Exercises

• Javascript basics: Exercises 47-55
  • Start: Write Reusable JavaScript with Functions
  • Stop: Stand in Line