Events, Statements, & Expressions

Morning Activity: Plan out an App feature

1. Choose from one of the following:
   • accordion toggle
   • carousel
   • dark mode toggle
   • mobile nav menu
2. pseudocode how you assume this should work
   • start with your current knowledge of js
   • step through each phase as you view them
3. Note unknowns for practice
   • pay attention to what you didn’t know how to do
   • research into behaviours that seem unfamiliar
4. Adjust pseudocode to reflect new knowledge

Creating a proof of concept of this will be your afternoon activity

1. Statements vs Expressions

Key Takeaways

• statements contain expressions
• if a chunk of js returns undefined, it’s a statement (otherwise it’s an expression)
• all the operators we’ve covered are functions that return values —> expressions

Events

Activity

• Create 2 functions that log different things to the console
• connect 1 to a button using an event listener
• connect 1 to a button using onclick

3. matchMedia and classListToggle

matchMedia

• mdn documentation
• javacript media queries
• matchMedia is how javascript hooks into media quieries

classList

• mdn documentation
• used to change and manipulate an html elements css classes
• useful especially for darkmode and other such features

Syntax and Concept Review

• string, array, object, or Math methods
• Manipulating things with functions
• Variables and displaying them on an html page

Demonstrations

• finished example: Responsive Navigation
  • follow up with things we’ve started
  • demo using matchMedia and classList