JS Core

JavaScript is an interpreted programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-paradigm.

Includes knowledge areas

ES6+

ECMA means European Computer Manufacturer's Association. ECMAScript is a programming language standard that web browsers follow while interpreting Javascript.

Asynchronous js

Using asynchronous JavaScript (such as callbacks, promises, and async/await), you can perform long network requests without blocking the main thread.

Primitive types, Object

The meaning of every primitive type is obvious except of undefined and null which are almost the same. In JavaScript, objects can be seen as a collection of properties.

Function context

Functions in JavaScript run in a specific context, and using the "this" variable we have access to it. All standard functions in the browser run under the Window context. Functions defined under an object or a class (another function) will use the context of the object it was created in. However, we can also change the context of a function at runtime, either before or while executing the function.

Scope, Closures

A scope in JavaScript defines what variables you have access to. There are two kinds of scope – global scope and local scope. Whenever you create a function within another function, you have created a closure. The inner function is the closure. This closure is usually returned so you can use the outer function’s variables at a later time.

Modules

A module is a piece of program that specifies which other pieces it relies on and which functionality it provides for other modules to use (its interface).

Asynchronous code, Event Loop

In general JavaScript is running code in a non-blocking way. This means that code which is is taking some time to finish (like accessing an API, reading content from the local file system etc.) is being executed in the background and in parallel the code execution is continued. This behaviour is being described by term asynchronous programming. An Event loop is browser’s mechanism to perform non-blocking operations by providing WebAPIs (setTimeout, setInterval, etc.) which are capable of maintaining callback references in memory.

Callbacks, Promises

You can achieve results from performing asynchronous operations using the callback approach or by using promises. But there are some minor differences between the two.

Regular Expressions

A regular expression is a sequence of characters that forms a search pattern. When you search for data in a text, you can use this search pattern to describe what you are searching for. A regular expression can be a single character, or a more complicated pattern. Regular expressions can be used to perform all types of text search and text replace operations.

DOM, Event handling, bubbling & delegation

DOM - Document Object Model. Event delegation is a better technique to handle events in our web app. This is possible because JavaScript has an event bubbled up (propagated) in the hierarchy in the DOM tree.

Modern browser APIs

Application Programming Interfaces (APIs) are constructs made available in programming languages to allow developers to create complex functionality more easily. They abstract more complex code away from you, providing some easier syntax to use in its place.

Cookies, LocalStorage/SessionStorage

localStorage is a way to store data on the client’s computer. It allows the saving of key/value pairs in a web browser and it stores data with no expiration date. stores data only for a session, meaning that the data is stored until the browser (or tab) is closed. Stores data that has to be sent back to the server with subsequent XHR requests. Its expiration varies based on the type and the expiration duration can be set from either server-side or client-side.

JSON Web Token

JSON Web Token (JWT) is an easy way to secure an API. When a user authenticates first on a server, using for instance a standard login form, the server creates a token. This token includes some personal data, such as username or email address. Then, this token is signed server-side (to prevent token integrity), and sent back to the user. Within each next request, user sends the token to establish emitter identity.

Modular JavaScript

JavaScript modules are a way to structure JavaScript code. Code in a module is isolated from code in other modules and is not in the global scope. JavaScript has had modules for a long time. However, they were implemented via libraries, not built into the language. ES6 is the first time that JavaScript has built-in modules.

Prototype

When a function is created in JavaScript, the JavaScript engine adds a prototype property to the function. This prototype property is an object (called a prototype object) that has a constructor property by default. The constructor property points back to the function on which prototype object is a property. We can access the function’s prototype property using functionName.prototype.

Web Components (HTML Templates, Custom elements, Shadow DOM)

Web Components are a collection of building blocks. Templates are where we define reusable code. Custom Elements allow us to define our own element. ShadowDOM provides a DOM encapsulation within DOM.

Performance (Lazy Loading)

Lazy Loading is an approach through which you can prioritize content, delaying loads for less relevant or visible content. Consequently, your apps or websites load faster, delivering an enhanced user experience.

Design patterns in JS

A design pattern is a term used in software engineering for a general, reusable solution to a commonly occurring problem in software design.

Is a part of:

Angular

Explore

React.js

Explore

Vue.JS

Explore

Heading

HeadingHeading

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.