Scribd
Upload
113 views

Javascript, Es6: Jordan Hayashi

This lecture covers JavaScript fundamentals including ES5/ES6 syntax, closures, immediately invoked function expressions, first-class functions, asynchronous JavaScript, callbacks, promises, async/await, and the this keyword. It also discusses how JavaScript interacts with browsers through the Document Object Model (DOM), allowing JavaScript to modify web pages. The assignment is to build a TODO app using JavaScript DOM manipulation.

Uploaded by

fuck
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
113 views

Javascript, Es6: Jordan Hayashi

This lecture covers JavaScript fundamentals including ES5/ES6 syntax, closures, immediately invoked function expressions, first-class functions, asynchronous JavaScript, callbacks, promises, async/await, and the this keyword. It also discusses how JavaScript interacts with browsers through the Document Object Model (DOM), allowing JavaScript to modify web pages. The assignment is to build a TODO app using JavaScript DOM manipulation.

Uploaded by

fuck
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 18

Lecture 1:

JavaScript, ES6
Jordan Hayashi
Previous Lecture
● Types
● Coercion
● Objects
● Prototypal Inheritance
● Scope
● JS Execution
● Global Object
● Closures...
ES5, ES6, ES2016, ES2017, ES.Next
● ECMAScript vs JavaScript
● What do most environments support?
● Transpilers (Babel, TypeScript, CoffeeScript, etc.)
● Which syntax should I use?
Closures
● Functions that refer to variables declared by parent
function still have access to those variables
● Possible because of JavaScript’s scoping
Immediately Invoked Function Expression
● A function expression that gets invoked immediately
● Creates closure
● Doesn’t add to or modify global object
First-Class Functions
● Functions are treated the same way as any other value
○ Can be assigned to variables, array values, object values
○ Can be passed as arguments to other functions
○ Can be returned from functions
● Allows for the creation of higher-order functions
○ Either takes one or more functions as arguments or returns a function
○ map(), filter(), reduce()
Synchronous? Async? Single-Threaded?
● JavaScript is a single-threaded, synchronous language
● A function that takes a long time to run will cause a page
to become unresponsive
● JavaScript has functions that act asynchronously
● But how can it be both synchronous and asynchronous?
Asynchronous JavaScript
● Execution stack
● Browser APIs
● Function queue
● Event loop
Execution Stack
● Functions invoked by other functions get added to the call
stack
● When functions complete, they are removed from the
stack and the frame below continues executing
Asynchronous JavaScript
● Execution stack
● Browser APIs
● Function queue
● Event loop
Asynchronous JavaScript
● Asynchronous functions
○ setTimeout()
○ XMLHttpRequest(), jQuery.ajax(), fetch()
○ Database calls
Callbacks
● Control flow with asynchronous calls
● Execute function once asynchronous call returns value
○ Program doesn’t have to halt and wait for value
Promises
● Alleviate “callback hell”
● Allows you to write code that assumes a value is returned
within a success function
● Only needs a single error handler
Async/Await
● Introduced in ES2017
● Allows people to write async code as if it were
synchronous
this
● Refers to an object that’s set at the creation of a new
execution context (function invocation)
● In the global execution context, refers to global object
● If the function is called as a method of an object, `this` is
bound to the object the method is called on
Setting `this` manually
● bind(), call(), apply()
● ES6 arrow notation
Browsers and the DOM
● Browsers render HTML to a webpage
● HTML defines a tree-like structure
● Browsers construct this tree in memory before painting the
page
● Tree is called the Document Object Model
● The DOM can be modified using JavaScript
Assignment
● Create a TODO app
● Will use JS DOM manipulation

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy