A Mini-Review of Yesterday
Ric McLaughlin
You learned this great feedback technique:
Fist of falsy
finger of truthy
A Function Definition & Invokation Checklist
does one thing
can be invoked over and over
indented, simple instructions
short, camelCased, verby-name
makeTurkeySandwich
makeTurkeySandwich!
Add one slice of bread.
Add turkey.
Add a slice of bread on top.
To make a turkey sandwich, put turkey on bread.
Building Functions
Learning Objectives
Students will build & invoke a simple JavaScript function from pseudo code
fist of falsy/finger of truthy
Agenda
Create a "Turning Pseudo Code Function into JavaScript" Checklist
We will practice turning a Pseudo Code Function into JavaScript
You will turn a Pseudo Code function into JavaScript
fist of falsy/finger of truthy
makeTurkeySandwich
Add one slice of bread.
Add turkey.
Add a slice of bread on top.
makeTurkeySandwich!
1. Add the function keyword
Pseudo Code Function to JavaScript Checklist
function makeTurkeySandwich
Add one slice of bread.
Add turkey.
Add a slice of bread on top.
makeTurkeySandwich!
fist of falsy/finger of truthy
The function keyword comes after the function name.
The keyword function is capitalized.
All JavaScript keywords are lowercase.
truthy
falsy
falsy
2. Add Parenthesis ()
1. Add the function keyword
Pseudo Code Function to JavaScript Checklist
function makeTurkeySandwich()
Add one slice of bread.
Add turkey.
Add a slice of bread on top.
makeTurkeySandwich!
fist of falsy/finger of truthy:
There is a space between the function name and the parens.
falsy
3. Enclose with Curly Braces {}
2. Add Parenthesis ()
1. Add the function keyword
Pseudo Code Function to JavaScript Checklist
function makeTurkeySandwich() {
Add one slice of bread.
Add turkey.
Add a slice of bread on top.
}
makeTurkeySandwich!
fist of falsy/finger of truthy:
The opening bracket is placed on the same line as the name of the function.
A function has end punctuation.
truthy
falsy
4. console.log() each instruction
3. Enclose with Curly Braces {}
2. Add Parenthesis ()
1. Add the function keyword
Pseudo Code Function to JavaScript Checklist
function makeTurkeySandwich() {
console.log('Add one slice of bread.');
console.log('Add turkey.');
console.log('Add a slice of bread on top.');
}
makeTurkeySandwich!
fist of falsy/finger of truthy:
JavaScript strings are enclosed in double quotes.
JavaScript statements end in semi-colons.
truthy
falsy
5. Invoke with ()
4. console.log() each instruction
3. Enclose with curly braces {}
2. Add parenthesis ()
1. Start with the function keyword
Turning Pseudo Code into a JavaScript Function Checklist
function makeTurkeySandwich() {
console.log('Add one slice of bread.');
console.log('Add turkey.');
console.log('Add a slice of bread on to.');
}
makeTurkeySandwich();
fist of falsy/finger of truthy:
Functions invokations statements require parenthesis.
truthy
Pseudo Code function with invokation into JavaScript checklist
5. Invoke with ()
4. console.log() each instruction
3. Enclose with curly braces {}
2. Add parenthesis ()
1. Start with the function keyword
Fist of Five for understanding...
Let's turn this Pseudo Code function with invokation into JavaScript using our checklist
5. Invoke with ()
4. console.log() each instruction
3. Enclose with curly braces {}
2. Add parenthesis ()
1. Start with the function keyword
Now you get a chance to change Pseudo Code into JavaScript using our checklist
Raise your hand for assistance; When done contact me and we will review your code
function makePbjOnWheat() {
console.log('Get a slice of wheat bread');
console.log('Add peanut butter');
console.log('Add jelly');
console.log('Add a slice of wheat bread on top');
}
makePbjOnWheat();
Your Completed Function should like:
Turning pseudo code functions
into
JavaScript functions
Learning Objectives
Students will be able to build & invoke a simple JavaScript function from pseudo code
From: Parentheses, Exponents, Multiply, Divide, Add, and Subtract
From a long list to a easy phrase word-like thing
Mnemonics are great learning tools
To: Please Excuse My Dear Aunt Sally
Order of Operations
(If we had more time)
Intro to Function Lessons
Cake with frosting recipe -> introduce Single Responsibility Principle
"Customize" the recipe -> use arguments to change the bread and meat -> DRY
Recipes - Pseudo code definitions and invokation with a checklist -> exposure to SRP & TDD thinking
Building functions from Recipes -> from pseudo code to JS Functions -> ??
Building Functions
By Ric McLaughlin
