Yesterday was your first day learning JavaScript!
Setting the stage:
You learned this great feedback technique:
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 be able to build & invoke a simple JavaScript function from pseudo code
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
makeTurkeySandwich
Add one slice of bread.
Add turkey.
Add a slice of bread on top.
makeTurkeySandwich!
function makeTurkeySandwich
Add one slice of bread.
Add turkey.
Add a slice of bread on top.
makeTurkeySandwich!
How do we paraphrase this step for our checklist?
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!
truthy/falsy:
The function keyword comes after the function name.
The keyword function is capitalized.
All JavaScript keywords are lowercase.
function makeTurkeySandwich()
Add one slice of bread.
Add turkey.
Add a slice of bread on top.
makeTurkeySandwich!
How do we paraphrase this step for our checklist?
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!
truthy/falsy:
There is a space between the function name and the parens.
function makeTurkeySandwich() {
Add one slice of bread.
Add turkey.
Add a slice of bread on top.
}
makeTurkeySandwich!
How do we paraphrase this step for our checklist?
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!
truthy/falsy:
The open bracket is placed on the same line as the beginning of the function.
[compare/contrast JS and English grammar]
function makeTurkeySandwich() {
console.log('Add one slice of bread.');
console.log('Add turkey.');
console.log('Add a slice of bread on top.');
}
makeTurkeySandwich!
How do we paraphrase this step for our checklist?
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!
truthy/falsy:
English sentences end in semi-colons.
JavaScript statements end in semi-colons.
(Use english punctuation & grammar as a metaphor)
function makeTurkeySandwich() {
console.log('Add one slice of bread.');
console.log('Add turkey.');
console.log('Add a slice of bread on to.');
}
makeTurkeySandwich();
How do we paraphrase this step for our checklist?
4. console.log() each instruction
3. Enclose with Curly Braces {}
2. Add Parenthesis ()
1. Add the function keyword
5. Invoke with ()
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 to.');
}
makeTurkeySandwich();
truthy/falsy:
Parenthesis are required to be invoked.
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
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)
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
makeCheesePizza
Get a pizza crust.
Add sauce.
Add cheese.
Cook until done.
makeCheesePizza!
Let's turn this Pseudo Code function with invokation into JavaScript using our checklist
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
makePbjOnWheat
Get a slice of wheat bread.
Add peanut butter.
Add jelly.
Add a slice of wheat bread on top.
MakePbjOnWheat!
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();
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
Learning Objectives
Students will be able to build & invoke a simple JavaScript function from pseudo code
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 v2
By Ric McLaughlin
