Prep
- Read What are Functions in Javascript
- For Discussion: Browse the web and find 5 examples of actions that you can do
- if you can’t find examples on websites, try web apps and video games
Scrum Retrospective
- How has your work gone this week?
- What topics are making sense? and which ones arent? - elaborate
- What do you feel like you need more of for your learning?
- What did you do well / what are your proud of?
Calculator Demo
- Walk through our code from where we left off
- Note things that are working, not working, buggy, poorly designed, or in a general state of disrepair
- Plan what your goals are
- Outline your brute force method
- Implement your code
- After the bruteforce code demo, we will take 20 minutes for everyone to work on their own implementations
Optimization Phase
- Walk through your code and note things to improve
- look for disorganized code
- look for error handling needs
- look for logic that needs to be expanded
- Decide on optimizations to make and begin doing them
- do them 1 at a time
- pick the most important or one that others are dependent upon to start with
- decide on how far you want to go
- do any needed research
- Improve your code
- walk through the code and fix things up in order
- if you need to stop, leave TODO: messages so you remember later
- avoid jumping around or starting new things while doing this
1. Introduction to Functions
Key Takeaways
- Functions make code re-usable and portable
- Functions make code safer
- Declare a function to make it invocable, invoke it to use it
- JS has traditional and fat-arrow syntax for functions
- Functions can take parameters as arguments
- Functions return values
Activity: Create Calculator Helper Functions
- Review your code and look for logic that can be extracted into functions (ie: math operations)
- try to extract a few pieces of logic (2-5) into helper functions
- implement the functions where your logic was previously
- Push your code (and submit to the dailies codebox for day 5 if you would like it reviewed)
2. Naming Conventions
There are some patterns for naming conventions for variables and functions that can be really helpful for readability
Booleans
- prefix with is and has
- ie:
isActive
,hasId
- ie:
Functions
- prefix with a verb, use a descriptive noun
- ie:
getUserName()
,calculateTotalCost()
- ie:
Variables
- treat like nouns, be clear and concise
- ie:
userName
,currentSlide
- ie:
- avoid super general names
- sometimes it’s convention to use single letter names
- ie:
i
for a loop iterator,e
for event
- ie:
Today's Achievement
End of Day Activity DRYing code with functions
DRY → Don’t Repeat Yourself
Phase 1: Dry out code
- copy this code (fork or download) and have it inialized as a repo in github
- follow the refactor instructions
- make sure that the right values are logged
Phase 2: Render values to an html page
- create an index.html file and connect the js file to it
- use
document.querySelector()
in js with ids in html to display the values on the page
Phase 3: Make it interactive
- Add input fields
- Refactor the code so that the input data is calculated follow the in class repo
- Add error handling so the user cannot calculate non numbers
Phase 4: Show it off!
- deploy the page and send a link to it as well as the repo in the dailies drop box for today