advanced javascript

How javascript works

  • The engine: a program that interprets, parses, and executes our source code. Popular JavaScript engines include: V8 (Chrome), SpiderMonkey (Navigator and Firefox), Chakra (Edge)
  • The runtime environment: provides built-in libraries that are available to your program at runtime. For JavaScript, it can be either Browser runtime (provides Web API) or Node.js runtime (provides FileSystem API)
  • Callback/Task Queue and Event Loop
  • Visualize how JavaScript works

Scopes in javascript

  • Global scope: variables defined outside of a function
  • Local scope: variables defined inside of a function
  • Lexical scope/static scope: in nested functions, the inner function has access to its outer function scope even if the outer function has returned; prerequisite for closure
  • NO block scope, but we can use const and let to simulate one

closure

  • A.k.a. lexical closure
  • The combination of the function and the lexical environment within which that function was declared
  • "If you are creating a function inside another function, you are using a closure"
  • Example
function makeAdder(x) {
    return function(y) {
        return x + y;
    };
}

// Both add5 and add10 are closures.
// They share the same function body definition,
// but store different environments.
// In add5's environment, x is 5.
const add5 = makeAdder(5);
// In add10's environment, x is 10.
const add10 = makeAdder(10);

console.log(add5(1)); // 6
console.log(add10(1)); // 11

web api: dom

  • Provided by the browser runtime environment
  • What is API anyway?
  • DOM (Document Object Model): an API for valid HTML and well-formed XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated (basically it allows us to manipulate HTML with JavaScript)

common dom Interfaces

  • Document
  • Element
  • Node
  • Event
  • Window
  • Text
  • There are more

assignment

  • Build a tic-tac-toe game. You can style it whatever you want, but the functionality must be there
  • Suggestions:
    • Build a game board in HTML first
    • Style it
    • Finally use JavaScript to add game logic
Made with Slides.com