work
This commit is contained in:
Ilya Kantor
parent
7f1283bdbc
commit
6522852dc7
97 changed files with 75 additions and 4221 deletions
|
|
@ -18,51 +18,44 @@ When JavaScript was created, it initially had another name: "LiveScript". But Ja
|
|||
But as it evolved, JavaScript became a fully independent language, with its own specification called [ECMAScript](http://en.wikipedia.org/wiki/ECMAScript), and now it has no relation to Java at all.
|
||||
```
|
||||
|
||||
At present, JavaScript can execute not only in the browser, but also on the server, or actually on any device where a special program called [an interpreter]("http://en.wikipedia.org/wiki/Interpreter_(computing)") is installed. The execution process is called "an interpretation".
|
||||
At present, JavaScript can execute not only in the browser, but also on the server, or actually on any device where exists a special program called [the JavaScript engine](https://en.wikipedia.org/wiki/JavaScript_engine).
|
||||
|
||||
The browser has an embedded JavaScript interpreter, sometimes it's also called a "JavaScript engine" or a "JavaScript virtual machine".
|
||||
The browser has an embedded engine, sometimes it's also called a "JavaScript virtual machine".
|
||||
|
||||
Different engines have different "codenames", for example:
|
||||
|
||||
- [V8 engine]("https://en.wikipedia.org/wiki/V8_(JavaScript_engine)") -- in Chrome and Opera.
|
||||
- [V8]("https://en.wikipedia.org/wiki/V8_(JavaScript_engine)") -- in Chrome and Opera.
|
||||
- [Gecko]("https://en.wikipedia.org/wiki/Gecko_(software)") -- in Firefox.
|
||||
- ...There are other codenames like "Trident", "Chakra" for different versions of IE, "Nitro" and "SquirrelFish" for Safari etc.
|
||||
|
||||
The codenames are good to know. They are used when searching for detailed information in the internet. Also, we'll sometimes reference them further in the tutorial. Instead of the words "Chrome supports feature..." we'd rather say "V8 supports feature...", not just because it's more precise, but because that also implies Opera and Node.JS.
|
||||
These terms above are good to remember, because they are used in developer articles in the internet. We'll use them too. For instance, if "a feature X is supported by V8", then it probably works in Chrome and Opera.
|
||||
|
||||
```smart header="Compilation and interpretation"
|
||||
There are two general approaches to execute programs: "compilation" and "interpretation".
|
||||
```smart header="How the engines work?"
|
||||
|
||||
- *Compilers* convert the program text (source code) to binary code (or kind-of) without executing it. When a developer wants to publish the program, he runs a compiler with the source code and then distributes the binary files that it produces.
|
||||
- *Interpreters*, and in particular the one embedded in the browser -- get the source code and execute it "as is".
|
||||
|
||||
As we can see, an interpretation is simpler. No intermediate steps involved. But a compilation is more powerful, because the binary code is more "machine-friendly" and runs faster at the end user.
|
||||
|
||||
Modern javascript engines actually combine these approaches into one:
|
||||
Engines are complicated. But the basics are easy.
|
||||
|
||||
1. The script is written and distributed as a plain text (can be compressed/optimized by so-called "javascript minifiers").
|
||||
2. The engine (in-browser for the web) reads the script and converts it to the machine language. And then it runs it. That's why JavaScript executes very fast.
|
||||
2. The engine (embedded if it's a browser) reads the script ("parses") and converts ("compiles") it to the machine language.
|
||||
3. And then it runs, pretty fast.
|
||||
|
||||
Even more than that, the binary code may be adjusted later, through the process of its execution. The engine learns more about the actual data that it works with and then can optimize it better.
|
||||
|
||||
So the term "interpretation" is used mostly for historical reasons. We do know what there's actually a two-stage (at least) process behind it.
|
||||
The engine applies optimizations on every stage of the process. It even watches the script as it runs, analyzes the data which flows through it and applies optimizations to the machine-code basing on that knowledge.
|
||||
```
|
||||
|
||||
## What in-browser JavaScript can do?
|
||||
|
||||
The modern JavaScript is a "safe" programming language. It does not provide low-level access to memory or CPU, because it was initially created for browsers which do not require it.
|
||||
|
||||
Other capabilities depend on the environment which runs JavaScript. For instance, Node.JS has functionality that allows JavaScript to read/write arbitrary files, perform network requests etc.
|
||||
The capabilities greatly depend on the environment which runs JavaScript. For instance, [Node.JS](https://wikipedia.org/wiki/Node.js) supports functions that allows JavaScript to read/write arbitrary files, perform network requests etc.
|
||||
|
||||
In the browser JavaScript can do everything related to webpage manipulation, interaction with the user and the webserver.
|
||||
In-browser JavaScript can do everything related to webpage manipulation, interaction with the user and the webserver.
|
||||
|
||||
For instance, in-browser JavaScript is able to:
|
||||
|
||||
- Add new HTML to the page, change the existing content, modify styles.
|
||||
- React on user actions, run on mouse clicks, pointer movements, key presses.
|
||||
- Send requests over the network to remote servers, download and upload data without reloading the page (a so-called "AJAX" technology).
|
||||
- Get and set cookies, prompt user for the data, show messages.
|
||||
- Store data in-browser ("localStorage").
|
||||
- Send requests over the network to remote servers, download and upload files (so-called [AJAX](https://en.wikipedia.org/wiki/Ajax_(programming)) and [COMET](https://en.wikipedia.org/wiki/Comet_(programming)) technologies).
|
||||
- Get and set cookies, ask questions to the visitor, show messages.
|
||||
- Remember the data on the browser side ("local storage").
|
||||
|
||||
## What in-browser JavaScript can NOT do?
|
||||
|
||||
|
|
@ -74,7 +67,7 @@ The examples of such restrictions are:
|
|||
|
||||
Modern browsers allow it to work with files, but the access is limited and only provided if the user does certain actions, like "dropping" a file into a browser window or selecting it via an `<input>` tag.
|
||||
|
||||
There are ways to interact with camera/microphone and other devices, but they require an explicit user's permission. So a JavaScript-enabled page may not sneakily enable a web-camera, observe the surroundings and send the information to the NSA.
|
||||
There are ways to interact with camera/microphone and other devices, but they require an explicit user's permission. So a JavaScript-enabled page may not sneakily enable a web-camera, observe the surroundings and send the information to the [NSA](https://en.wikipedia.org/wiki/National_Security_Agency).
|
||||
- Different tabs/windows generally do not know about each other. Sometimes they do, for example when one window uses JavaScript to open the other one. Such action is allowed. But even in this case, JavaScript from one page may not access the other if they compe from different sites (from a different domain, protocol or port).
|
||||
|
||||
That is called a "Same Origin Policy". To workaround that, *both pages* must contain a special JavaScript code that handles data exchange.
|
||||
|
|
@ -102,53 +95,16 @@ That's what makes JavaScript unique. That's why it is the most widespread way of
|
|||
|
||||
While planning to learn a new technology, it's beneficial to check it's perspectives. So let's move on to the modern trends that include new languages and browser abilities.
|
||||
|
||||
## HTML 5
|
||||
|
||||
*HTML 5* is an evolution of HTML which adds new tags and what's more important -- new browser abilities, accessable from JavaScript.
|
||||
|
||||
Few examples:
|
||||
|
||||
- Write files on disk (in a "sandbox", not to any folder).
|
||||
- A database embedded in the browser, to keep data on a user's computer and effeciently operate on it.
|
||||
- Multitasking with the usage of many CPU cores in one time.
|
||||
- Audio/video playback.
|
||||
- 2d and 3d-drawing with hardware acceleration support, just like in modern games.
|
||||
|
||||
Many new abilities are still in progress, but browsers gradually improve the support for them.
|
||||
|
||||
```summary
|
||||
The trend: browser can do more and more, it is becoming more like an all-purpose desktop application.
|
||||
```
|
||||
|
||||
Still, there is a small gotcha with those "extra-fresh" modern browser abilities. Sometimes browsers try to implement them on very early stages when they are nor fully defined neither agreed upon, but are so interesting that the developers just can't wait.
|
||||
|
||||
...As the time goes, the specification matures and changes, and browsers must adapt it. That may lead to errors in the older code which was too eager to use the early version. So one should think twice before relying on things that are in draft yet.
|
||||
|
||||
But what's great -- eventually all browsers tend to follow the standard. There are much less differences between them now than only a couple years ago.
|
||||
|
||||
```summary
|
||||
The trend: browsers, though eager for new features, tend to be compatible with the standard.
|
||||
```
|
||||
|
||||
## New ECMAScript
|
||||
|
||||
JavaScript evolves. The upcoming ECMAScript-2016 standard adds more language-level features which make the syntax more capable and expressive.
|
||||
|
||||
Modern browsers improve their engines to raise JavaScript execution script, fix bugs and try to follow the standards.
|
||||
|
||||
```summary
|
||||
The trend: JavaScript is becoming faster, gets new syntax and language features.
|
||||
```
|
||||
|
||||
## Languages "over" JavaScript
|
||||
|
||||
The syntax of JavaScript does not suit everyone's needs: some people think that it's too flexible, the others consider it too limited, the third ones want to add new features absent in the standard...
|
||||
The syntax of JavaScript does not suit everyone's needs. Different people want different features.
|
||||
|
||||
That's normal, because projects and requirements are different for everyone.
|
||||
|
||||
So recently a plethora of new languages appeared, which are *transpiled* (converted) to JavaScript before they run.
|
||||
So recently a plethora of new languages appeared, which are *transpiled* (converted) to JavaScript before they run in the browser.
|
||||
|
||||
The transpilation happens automatically, modern tools make the process very fast and transparent, actually allowing developers to code in another language. But they still should know JavaScript, to better understand what they are doing.
|
||||
The modern tools make the transpilation very fast and transparent, actually allowing developers to code in another language, autoconverting it "under the hood".
|
||||
|
||||
Examples of such languages:
|
||||
|
||||
|
|
@ -156,6 +112,8 @@ Examples of such languages:
|
|||
- [TypeScript](http://www.typescriptlang.org/) is concentrated on adding "strict data typing", to simplify development and support of complex systems. Developed by Microsoft.
|
||||
- [Dart](https://www.dartlang.org/) is a standalone language that has it's own engine that runs in non-browser environments (like mobile apps). It was initially offered by Google as a replacement for JavaScript, but as of browsers require it to be transpiled to JavaScript just like the ones above.
|
||||
|
||||
There are more. Of course even if we use one of those languages, we should also know JavaScript, to really understand what we're doing.
|
||||
|
||||
## Summary
|
||||
|
||||
- JavaScript was initially created as a browser-only language, but now used in many other environments as well.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue