Introduction to Javascript

Morning Activity: Merge and Implement our Intersection Code!

Phase 1: Talk it out (All hands)

• Outline the overarching goal and parameters
• Review and note each others control flow logic
  • does anything need to change to work together?
• Visualize the functions with props
• Each group should note some changes that they can make to their part of the program

Phase 2: Code it (In teams)

• Make the changes to your algorithms as per all hands discussion
• Simulate with props to test
• Write the code down (1 algorithm per page) and label each one clearly based on what it does
• Create any other props needed
• Decide on who will execute the program commands and who will operate as variables in the program
  • 1 command executor (declares the action)
  • 1-2 variables (does the action)
  • 1 logger (takes notes)

Phase 3: Run the Program (All hands)

• Now we’ll pull it all together!
• The ‘variable’ will play out the commands executed by the ‘functions’ using props
• Then let’s see how many times we crash the program!
• Document causes of crashes and note potential solutions

Phase 4: Bugfix and Optimize (In teams & all hands)

• (all hands) debrief on what worked and what needed to change
• (in teams) modify code to fix bugs noted by logger and in the all hands
• write alterted scripts out as declarative statements with logic

Phase 5: Test (all hands)

• We’ll finish up by running the program again
• Logger will note changes in outcomes and overall behavior
• Debrief on how the bugfixes worked

1. Introduction to Javascript

Key Takeaways

• The Browser Triad is HTML for content, CSS for presentation, and JS for behaviour
• Javascript runs in and out of the browser
• Add JS to HTML by using a <script src="" type=""></script> tag
• camelCase for multi word variables
• JS is case sensitive
• Use whitespace to make code readable

Activity: Create javascript variables

• we don’t need to go super deep with this, focus on declaring variables that do not change with const and ones that do change with let
• use strings and numbers for now

2. Demo: Using the Browser console

• Finding Your Browser’s Developer Console
• Useful Devtools tips and tricks

Activity: Experiment with the browser console

• Try using console.log() to print out text
  • try using words inside and outside of quotations
  • try using numbers inside and outside of qutotations
  • what are the differences
• Create a variable (use the following syntax)
  • const myName = "insert your name here" (use any sentence and variable name u want)
• Log the variable that you created with console.log(myName) (use the varaible name that you created)

Debrief

• What errors did you run into?
  • How did you solve them?

3. Declaring and assigning variables

Materials:

• Storing the information you need — Variables
• Handling text — strings in JavaScript
• Template literals

Key Takeaways (Variables)

• Declaration creates a variable in memory
• Assignment puts a value in a variable
• const variables can be reassigned
• let variables can be reassigned
• default to const
• use descriptive variable names with camelCase

Discussion

• Open up Scratch and take a look at what you’ve been working on
• What would be comparable to const and let variables in Scratch?

Key Takeaways (Types)

• Primitive types = numbers, strings, booleans, null, and undefined
• Complex types = arrays, objects, functions

Data Types Activity

• In the browser console, try making and logging one of each of these variable types.
  • string
  • number
  • boolean
  • array
  • object
• Use whatever names and content you want, I recommend to pick a movie, game, or something and pull from that