%% generate tags start %%
#software-engineering
%% generate tags end %%
#software-engineering/javascript
## What is Javascript?
I wish I can elaborate js in one sentence but it is certainly not possible. If you want to understand js completely, you cannot go straight into js. Instead you need to read through a lot of relevant concepts to get a brief concept of what it exactly is.
It is a programming language that is one of the core technologies of the [[world wide web]], alongside [[html]]and [[CSS]]. Over 97% of website use JavaScript on the [[clients|client]] side for [web page] behavior, often incorporating third-party [libraries]. All major [web browsers] have a dedicated [JavaScript engine] to execute the [code] on [users]' devices.
## How to Use Javascript?
You use javascript by inserting a script tag in the dom tree.
```html
<!DOCTYPE html>
<html>
<head>
<script src="https://fb.me/react-15.2.0.js"></script>
<script src="https://fb.me/react-dom-15.2.0.js"></script>
</head>
<body>
<div id="app"></div>
<script>
var HelloMessage = React.createClass({
displayName: 'HelloMessage',
render: function render() {
return React.createElement('div',null,'Hello ',this.props.name);
}
});
ReactDOM.render(React.createElement(HelloMessage,{ name: 'John' }), document.getElementById('app'));
</script>
</body>
</html>
```
## The Relationship with [[ECMAScript]]
> Javascript is **a general purpose scripting language that conforms to the ECMAScript specification.**
> [!info]
> ECMAScript is the specification it's based on. By reading the [ECMAScript specification](https://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf), you learn how to **create** a scripting language. By reading the [JavaScript documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript), you learn how to **use** a scripting language.
When people call JavaScript a "dialect of the ECMAScript language," they mean it in the same sense as when talking about English, French, or Chinese dialects. A dialect derives most of its lexicon and syntax from its parent language, but deviates enough to deserve distinction.
JavaScript mostly implements the ECMAScript specification as described in ECMA-262, but a handful of differences do exist. Mozilla outlines JavaScript's non-ECMAScript language features [here] :
Although `JavaScript` and `ECMAScript` It is basically a synonym in normal use, but JavaScript is far from limited to what parts are defined in ecma-262. The complete JavaScript implementation consists of the following parts:
- Core (ECMAScript)
- [[Document object model]] (DOM)
- [[browser object model]] (BOM)
Although there is no a standard javascript because different host environment kind of have its own js engine and read js in different ways, thanks to es, javascript are more or less the same and programmers can have less headache.
> [!danger] Javascript gives programmers a lot of headache, configuring the node js env, browser env is a hell, they never consistent 🫠
## A JavaScript Engine in a Web Browser
**A program or interpreter that understands and executes JavaScript code.**
**Synonyms**: JavaScript interpreter, JavaScript implementation
JavaScript engines are commonly found in web browsers, including [[V8]] in Chrome, [[SpiderMonkey]] in Firefox, and [[Chakra (js engine)]] in Edge. Each engine is like a language module for its application, allowing it to support a certain subset of the JavaScript language.
A JavaScript engine to a browser is like language comprehension to a person. If we re-visit our example of the actions "walk", "run", "jump", a JavaScript engine is the **part** of an "entity" that actually understands what these actions mean.
> [!important] difference in browser performance
> Two people may recognize the command "jump", but one may react to the command faster because the person can understand and process the command faster than the other person. Similarly, two browsers can understand JavaScript code, but one runs it faster because its JavaScript engine is implemented more efficiently
> [!important] difference in browser support (ECMAScript compatibility vs js compatibility)?
> Consider the differences that exist between people who speak the same language. Even if many people speak English, some may know some words, expressions, and syntax rules that others don't, and vice versa. Browsers are the same way. Even though the JavaScript engines of browsers all understand JavaScript, some browsers have a greater understanding of the language than others. There are differences in the way browsers support the language.
>
> If a new edition of ECMAScript comes out, JavaScript engines do not integrate the entire update at one go. They incorporate the new ECMAScript features incrementally. Take firefox as example, see their js changlog:
>
> Releasing a new edition of ECMAScript does not mean that all JavaScript engines in existence suddenly have those new features. It is up to the groups or organizations who are responsible for JavaScript engines to be up-to-date about the latest ECMAScript specification, and to adopt its changes. Therefore, some browsers incorporate more ES feature than others, and their javascript is "newer" because their javascript engine understand "newer" javascript.
>
> Therefore, developers tend to ask questions like, "What version of ECMAScript does this browser support?" or "Which ECMAScript features does this browser support?" They want to know if Google, Mozilla, and Microsoft have gotten around to updating their browsers' JavaScript engines — for example [[V8]], [[SpiderMonkey]], and [[Chakra]], respectively — with the features described in the latest ECMAScript.
>
> The [ECMAScript compatibility table](https://compat-table.github.io/compat-table/es6/) is a good resource for answering those questions. ^279yo5
You might need to config the js engine to use different es standard such that js engine understand what you code is about. For example, when you do js programming in vscode, you can config your `jsconfig.json` such that vscode know which standard you are using and will not show syntax error.
> [!info] why do you need to care about es compatibility?
>
> ==The browser of your computer or the browser of someone else's computer might not have the same version as you== (for example, their chrome is not updated or they are using internet explorer), and it is impossible to tell their browsers which standard to use because this is their environment but not your environment. Therefore you need to make sure the source code of your build can run on their host environment.
> Javascript is a mess, the inconsistency make so much trouble
## Javascript Runtime
==**The environment in which the JavaScript code runs and is interpreted by a JavaScript engine.The runtime provides the host objects that JavaScript can operate on and work with.**==
**Synonyms**: Host environment
The JavaScript runtime is the "existing entity or system" mentioned in the scripting language definition. Code passes through the JavaScript engine, and once parsed and understood, an entity or system performs the interpreted actions. A dog walks, a person runs, a video game character jumps (or in the case of the above image, wrecks).
Applications make themselves available to JavaScript scripting by providing "host objects" at runtime. For the client side, the JavaScript runtime would be the web browser, where host objects like windows and HTML documents are made available for manipulation.
Have you ever worked with the window or document host objects? The window and document objects are not actually a part of the core JavaScript language. They are Web APIs, objects provided by a browser acting as JavaScript's host environment. For the server side, the JavaScript runtime is Node.js. Server-related host objects such as the file system, processes, and requests are provided in Node.js.
An interesting point: different JavaScript runtimes can share the same JavaScript engine. V8, for example, is the JavaScript engine used in both Google Chrome and Node.js — two very different environments.
## Relationship with [[700 Knowledge/Typescript]]
It is a superset of javascript, adding optional static type systems and many that have not yet been officially released `ECMAScript`.
![[700 Knowledge/Typescript#What is typescript]]