Javascript Introduction

February 10, 2021

Homework

Global: All code that is not inside a function.
Global Execution Context: The environment that is available everywhere in your app.
Lexical Environment: Where something sits physically in the code you write. In Javascript, where you write your code is important
Syntax Parser: A program that reads your code and determines what it does and if its grammar is valid
Object: A collection of name/value pairs (in terms of Javascript)
Property: A fancy term for a variable that lives inside an object and is most often accessed using dot notation
Method: A fancy term for a function that lives inside an object and is most often accessed using dot notation

Review the origin and history of Javascript.
- Define the Javascript run-time environment.
  - V8: Chrome and Node
  - Spider Monkey: Firefox
- Define the window object.
- Review the role of the Document Object Model.
Locate and display the browser Javascript Console.
- Identify syntax errors in the Javascript Console.
- Log messages and values to the Console using console.log().
Discuss examples of window object properties.
- innerWidth (aka. window.innerHeight)
- innerHeight (aka. window.innerWidth)
Understand Javascript coding conventions.

90% of Javascript is using the DOM API. The rest is actually programming in JS.
console.log() and or the Console should be your first step when debugging your code.
Get used to looking up DOM objects in the MDN.
The Codepen console is a little clunky. Open your scripts in Debug Mode and open the normal Console from there.

Define the document object.
- Review common HTML page anatomy in terms of Javascript.
  - <script> before </body>
  - <script> in <head>
  - Embedded JS vs external
- DOM and source order
Access the features of a DOM Element using dot notation in the Console.
- Examples:
  - element.className
  - element.classList
Discuss the concept of Javascript Events.
- CSS Toggle Example: click vs mouseover.

Pay attention to indentation. It tells you a lot about when and how JS code will execute.
The DOM needs to load before you can access its objects. For now, embed or link your code at the bottom of your page, just before the </body> tag. We’ll eventually move your code to the <head> of you HTML documents.
Get used to seeing code you don’t immediately understand. Start with the bits you do understand; we’ll cover the mystery bits as the course progresses.

Submit today’s Codepen/repo/gist to the Dailies section (in Assessments) in Brightspace.