Loading lesson path
JavaScript
Go deeper into object behavior, classes, callbacks, closures, async flows, and modern JavaScript patterns.
- First the idea - Then how to make them - Then how to use them
- What is JavaScript Temporal? - Temporal vs JavaScript Date - Temporal Duration - Temporal Instant - Temporal PlainDateTime - Temporal PlainDate - Temporal PlainYearMonth - Temporal PlainMonthDay -…
JavaScript loops repeat executing a block of code a number of times.
These chapters are best after you understand basic functions (calling, parameters, return values, expressions, and arrows).
Objects are variables that can store both values and functions .
Temporal is the new standard for date and time in JavaScript.
Iterable can be iterated over with for...of loops
Function definition is a general term for defining a function.
A JavaScript object is a collection of properties
- Date months are 0-based, Temporal months are 1-based - Date arithmetic is manual, Temporal is built-in - Date mutates values, Temporal does not - Date mixes UTC and time zones, Temporal separates t…
An Iterator is an object that provides a standard way to access elements sequentially .
A JavaScript callback is a function passed as an argument to another function, which is then executed (or "called back") at a later point in time to complete a specific task.
Methods are actions that can be performed on objects.
The Temporal.Duration object represents a length of time.
A JavaScript Function can only return one value .
When the this keyword is used in a function, it refers to an Object .
The this keyword refers to an object.
The Temporal.Instant object represents an exact moment in UTC time .
The call() method can be used to call a function with a specific this .
Displaying a JavaScript object will output [object Object] .
The Temporal.PlainDateTime object is a pure date and time object .
The apply() method lets you write a method that can be used on different objects.
Sometimes we need to create many objects of the same type .
The Temporal.PlainDate object represents a calendar date without a time.
Like with call() and apply() , the bind() method can borrow a method from another object.
The Temporal.PlainYearMonth object is a year and month object.
An IIFE is short for an Immediately Invoked Function Expression .
The Temporal.PlainMonthDay object is a month and day object.
JavaScript variables can belong to:
The Temporal.PlainTime object is a time object without a date .
- Using an Object Literal - Using the new Keyword - Using an Object Constructor - Using Object.assign() - Using Object.create() - Using Object.fromEntries()
The Temporal.ZonedDateTime object represents a date and time with a time zone.
- Using an Object Literal - Using the new Keyword - Using an Object Constructor - Using Object.assign() - Using Object.create() - Using Object.fromEntries()
The Temporal.Now object provides 5 methods to get the system's date and time.
When used in an object method, this refers to the object .
The Temporal API provides methods for easy and reliable date and time arithmetic .
The Object.assign() method copies properties from one or more source objects to a target object.
The since() method calculates the since duration between two dates.
Getters and setters allow you to define Object Accessors (Computed Properties).
In JavaScript, objects cannot be compared using operators like <, >, ==, or === .
The Object.defineProperty() method can be used to:
The table below shows how Temporal types can be converted.
The most common way to protect an object from being changed is by using the const keyword.
Temporal dates can be serialized as strings in different ways:
All JavaScript objects inherit properties and methods from a prototype:
Temporal is a powerful API, but it can be confusing at first.
ECMAScript 2015, also known as ES6, introduced JavaScript Classes.
JavaScript Temporal was designed to replace the old Date object .
To create a class inheritance, use the extends keyword.
Temporal is based on the following standards:
Static class methods are defined on the class itself.
- First: Async Programming - Then: Async Timeouts - Then: Async Callbacks - Then: Async Promises - Then: Async Await - Then: Async Fetch - Then: Async Debugging - Then: Async Reference
Async code allows a program to start a long-running task (like fetching data from a file). and continue with other tasks before the first one finishes.
The setTimeout() method schedules a function to run after a delay in milliseconds.
A callback is a function that runs later .
JavaScript Promises were created to make asynchronous JavaScript easier to use.
async and await make promises easier
fetch() is the modern way to request data from a server
Async bugs are difficult because the code runs later.
Modules are code blocks that can export and/or import functions and values.
A module uses the export keyword to share values with other files.
You can import modules in two ways, based on if they are named exports or default exports .
When you use the syntax: import * as name from " module "; JavaScript creates a module namespace object . This is an immutable object that contains all the exported bindings from that module.
Dynamic Import uses the syntax:
Metaprogramming refers to a number of ways a program can manipulate itself :
Reflect is a object with methods for low-level operations on JavaScript objects.
A Proxy is a JavaScript object that can wrap other objects .
Typed arrays was designed for handling Binary Data .
The from() method creates a new typed array from any iterable object:
An ArrayBuffer is fixed a block of memory, often used to store typed arrays .
The DataView Object lets you read and write multiple numeric types in an ArrayBuffer , at any byte offset, with optional control over endianness (byte order).
The Atomics Object provides low-level atomic operations on shared memory.
With the HTML DOM, you can navigate the node tree using node relationships.
Adding and Removing Nodes (HTML Elements)
The getElementsByTagName() method returns an HTMLCollection object.
A NodeList object is a list (collection) of nodes extracted from a document.
The Browser Object Model (BOM) allows JavaScript to "talk to" the browser.
The window.screen object contains information about the user's screen.
The window.location object can be used to get the current page address (URL) and to redirect the browser to a new page.
The window.history object contains the browsers history.
The navigator object contains information about the visitor's browser.
JavaScript has three kinds of popup boxes:
The window object allows execution of code at specified time intervals.
Cookies let you store user information in web pages.
A Web API is a developer's dream.
The Fetch API interface allows web browser to make HTTP requests to web servers.
The HTML Geolocation API is used to get the geographical position of a user.
The Web History API provides easy methods to access the windows.history object.
The Pointer Events API is a modern web standard that provides a unified input model for handling various pointing devices, such as a mouse, pen/stylus, and touch (finger).
The Web Storage API is a simple syntax for storing and retrieving data in the browser. It is very easy to use:
If an input field contains invalid data, display a message:
A web worker is a JavaScript running in the background, without affecting the performance of the page.
AJAX is a developer's dream, because you can:
The keystone of AJAX is the XMLHttpRequest object.
The XMLHttpRequest object is used to request data from a server.
The responseText property returns the server response as a JavaScript string, and you can use it accordingly:
AJAX can be used for interactive communication with an XML file.
AJAX is used to create more interactive applications.
AJAX is used to create more interactive applications.
AJAX can be used for interactive communication with a database.
This chapter demonstrates some HTML applications using XML, HTTP, DOM, and JavaScript.
JSON stands for J ava S cript O bject N otation.
JSON syntax is derived from JavaScript object notation syntax:
Both JSON and XML can be used to receive data from a web server.
In JSON, values must be one of the following data types:
A common use of JSON is to exchange data to/from a web server.
A common use of JSON is to exchange data to/from a web server.
This is a JSON string:
This is a JSON string:
A common use of JSON is to read data from a web server, and display the data in a web page.
JSON can very easily be translated into JavaScript.
JSONP is a method for sending JSON data without worrying about cross-domain issues.
jQuery was created in 2006 by John Resig. It was designed to handle Browser Incompatibilities and to simplify HTML DOM Manipulation, Event Handling, Animations, and Ajax.
jQuery was created in 2006 by John Resig. It was designed to handle Browser Incompatibilities and to simplify HTML DOM Manipulation, Event Handling, Animations, and Ajax.
jQuery was created in 2006 by John Resig. It was designed to handle Browser Incompatibilities and to simplify HTML DOM Manipulation, Event Handling, Animations, and Ajax.
jQuery was created in 2006 by John Resig. It was designed to handle Browser Incompatibilities and to simplify HTML DOM Manipulation, Event Handling, Animations, and Ajax.
JavaScript libraries to use for all kinds of graphs:
HTML Canvas is perfect for Scatter Plots
Plotly.js is a charting library that comes with over 40 chart types:
Chart.js is an free JavaScript library for making HTML-based charts. It is one of the simplest visualization libraries for JavaScript, and comes with the many built-in chart types:
From simple line charts to complex hierarchical tree maps, the Google Chart gallery provides a large number of ready-to-use chart types:
D3.js is a JavaScript library for manipulating HTML data. D3.js is easy to use.
A tool that will help you get ready for your next interview.