You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 1-js/1-getting-started/1-intro/article.md
+45-36Lines changed: 45 additions & 36 deletions
Original file line number
Diff line number
Diff line change
@@ -1,86 +1,95 @@
1
1
# An introduction to JavaScript
2
2
3
-
Let's see what's so special about JavaScript, what we can achieve with it and what other technologies coexist with it.
3
+
Let's see what's so special about JavaScript, what we can achieve with it and which other technologies play well with it.
4
4
5
5
## What is JavaScript?
6
6
7
7
*JavaScript* was initially created to *"make webpages alive"*.
8
8
9
-
The programs in this language are called *scripts*. They are put directly into HTML and execute automatically as it loads.
9
+
The programs in this language are called *scripts*. They can be written right in the HTML and execute automatically as the page loads.
10
10
11
-
Scripts are provided and executed a plain text. They don't need a special preparation or compilation to run.
11
+
Scripts are provided and executed a plain text. They don't need a special preparation or a compilation to run.
12
12
13
13
In this aspect, JavaScript is very different from another language called [Java](http://en.wikipedia.org/wiki/Java).
14
14
15
15
[smart header="Why <u>Java</u>Script?"]
16
16
When JavaScript was created, it initially had another name: "LiveScript". But Java language was very popular at that time, so it was decided that positioning a new language as a "younger brother" of Java would help.
17
17
18
-
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 altogether.
18
+
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.
19
19
20
-
It has quite a few special features that make mastering a bit hard at first, but we'll nicely deal with them later.
21
20
[/smart]
22
21
23
-
Since the time of its creation, JavaScript evolved.
22
+
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".
24
23
25
-
As of now, 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".
26
-
27
-
The browser has an embedded JavaScript interpreter, of course. Sometimes it's also called a *JavaScript engine* or a "JavaScript virtual machine".
24
+
The browser has an embedded JavaScript interpreter, sometimes it's also called a "JavaScript engine" or a "JavaScript virtual machine".
28
25
29
26
Different engines have different "codenames", for example:
30
27
<ul>
31
-
<li>Chrome and Opera browsers and Node.JS server use [V8 engine]("https://en.wikipedia.org/wiki/V8_(JavaScript_engine)") (hence the same support for modern features).</li>
<li>[V8 engine]("https://en.wikipedia.org/wiki/V8_(JavaScript_engine)") -- in Chrome and Opera.</li>
29
+
<li>[Gecko]("https://en.wikipedia.org/wiki/Gecko_(software)") -- in Firefox.</li>
33
30
<li>...There are other codenames like "Trident", "Chakra" for different versions of IE, "Nitro" and "SquirrelFish" for Safari etc.</li>
34
31
</ul>
35
32
36
-
The codenames are usually used when searching for detailed information in the internet. Also, we'll use them further to be more exact. 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.
33
+
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.
37
34
38
35
[smart header="Compilation and interpretation"]
39
-
There are in fact two general approaches to execute programs: "compilers" and "interpreters".
36
+
There are two general approaches to execute programs: "compilation" and "interpretation".
40
37
41
38
<ul>
42
-
<li>*Compilers* convert the program text (source code) to binary code (usually) without executing it. This is done by the developer and then the binary code is distributed to the system which actually runs it.</li>
43
-
<li>*Interpreters*, and in particular the one embedded in the browser -- get the source code and execute it "as is". The source code (script) is distributed to the system as a plain text.</li>
39
+
<li>*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.</li>
40
+
<li>*Interpreters*, and in particular the one embedded in the browser -- get the source code and execute it "as is".</li>
44
41
</ul>
45
42
46
-
Modern interpreters actually combine these approaches into one: the script is distributed as a plain text, but prior to execution is converted to the machine language. That's why JavaScript executes very fast.
43
+
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.
44
+
45
+
Modern javascript engines actually combine these approaches into one:
46
+
<ol>
47
+
<li>The script is written and distributed as a plain text (can be compressed/optimized by so-called "javascript minifiers").</li>
48
+
<li>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.
49
+
50
+
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.</li>
51
+
</ol>
52
+
53
+
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.
47
54
[/smart]
48
55
49
56
50
57
## What in-browser JavaScript can do?
51
58
52
59
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.
53
60
54
-
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 etc.
61
+
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.
55
62
56
63
In the browser JavaScript can do everything related to webpage manipulation, interaction with the user and the webserver.
57
64
58
-
In more details, in-browser JavaScript is able to:
65
+
For instance, in-browser JavaScript is able to:
59
66
60
67
<ul>
61
-
<li>Create new HTML tags, remove the existing ones, change styles, hide/show elements...</li>
62
-
<li>React on user actions, run on mouse clicks, pointer movements, key presses...</li>
63
-
<li>Send requests over the network to remote servers, download and upload data without reloading the page (a so-called "AJAX" technology)...</li>
64
-
<li>Get and set cookies, ask for data, show messages...</li>
65
-
<li>...and can actually do almost anything with the page and it's content!</li>
68
+
<li>Add new HTML to the page, change the existing content, modify styles.</li>
69
+
<li>React on user actions, run on mouse clicks, pointer movements, key presses.</li>
70
+
<li>Send requests over the network to remote servers, download and upload data without reloading the page (a so-called "AJAX" technology).</li>
71
+
<li>Get and set cookies, prompt user for the data, show messages.</li>
72
+
<li>Store data in-browser ("localStorage").</li>
66
73
</ul>
67
74
68
75
## What in-browser JavaScript can NOT do?
69
76
70
-
JavaScript abilities in the browser are limited. That is for user safety, mainly not to let an evil webpage access private information or harm the user's data.
77
+
JavaScript abilities in the browser are limited for the sake of the user's safety. The aim is to prevent an evil webpage from accessing private information or harming the user's data.
78
+
79
+
The examples of such restrictions are:
71
80
72
81
<ul>
73
82
<li>JavaScript on the webpage may not read/write arbitrary files on the hard disk, copy them or execute programs. It has no direct access to OS system functions.
74
83
75
-
Modern browsers allow it to work with files, but limit the access to a specially created directory called "a sandbox".
84
+
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.
76
85
77
-
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 NSA.
86
+
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.
78
87
</li>
79
-
<li>JavaScript may not freely access other pages opened in the same browser. The exception is when the pages come from the same site.
88
+
<li>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).
80
89
81
-
There are ways to workaround this, of course. But if two pages come from different sites (different domain, protocol or port), they require a special code on *both of them* allowing to interact.
90
+
That is called a "Same Origin Policy". To workaround that, *both pages* must contain a special JavaScript code that handles data exchange.
82
91
83
-
The limitation is again for user safety. A page from `http://evilsite.com` which a user has opened occasionaly will be unable to access other browser tabs and steal information from there.
92
+
The limitation is again for a user's safety. A page from `http://anysite.com` which a user has opened occasionaly must not be able to open or access another browser tab with the URL `http://gmail.com` and steal information from there.
84
93
</li>
85
94
<li>JavaScript can easily communicate over the net to the server where the current page came from. But it's ability to receive data from other sites/domains is crippled. Though possible, it requires the explicit agreement (expressed in HTTP headers) from the remote side. Once again, that's safety limitations.
86
95
</li>
@@ -89,7 +98,7 @@ The limitation is again for user safety. A page from `http://evilsite.com` which
89
98
<imgsrc="limitations.png">
90
99
91
100
92
-
Such limits do not exist if JavaScript is used outside of the browser, for example on a server. Modern browsers also allow installing plugin/extensions which get extended permissions.
101
+
Such limits do not exist if JavaScript is used outside of the browser, for example on a server. Modern browsers also allow installing plugin/extensions which may get extended permissions.
93
102
94
103
95
104
## Why JavaScript is unique?
@@ -106,7 +115,7 @@ Combined, these 3 things only exist in JavaScript and no other browser technolog
106
115
107
116
That's what makes JavaScript unique. That's why it is the most widespread way of creating browser interfaces.
108
117
109
-
Of course, there are certain trends including new languages and browser abilities. While planning to learn a new technology, it's beneficial to check it's perspectives, so we go ahead with that.
118
+
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.
110
119
111
120
## HTML 5
112
121
@@ -115,7 +124,7 @@ Of course, there are certain trends including new languages and browser abilitie
115
124
Few examples:
116
125
117
126
<ul>
118
-
<li>Read/write files on disk (in a "sandbox", not just any file).</li>
127
+
<li>Write files on disk (in a "sandbox", not to any folder).</li>
119
128
<li>A database embedded in the browser, to keep data on a user's computer and effeciently operate on it.</li>
120
129
<li>Multitasking with the usage of many CPU cores in one time.</li>
121
130
<li>Audio/video playback.</li>
@@ -128,9 +137,9 @@ Many new abilities are still in progress, but browsers gradually improve the sup
128
137
The trend: browser can do more and more, it is becoming more like an all-purpose desktop application.
129
138
[/summary]
130
139
131
-
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 still are so interesting that the developers just can't wait.
140
+
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.
132
141
133
-
...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 browser implementation. So one should think twice before relying on things that are in draft yet.
142
+
...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.
134
143
135
144
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.
136
145
@@ -152,7 +161,7 @@ The trend: JavaScript is becoming faster, gets new syntax and language features.
152
161
153
162
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...
154
163
155
-
That's normal, because projects and requirements are different for everyone. There's no a single standard for a carpenter's hammer, why should it exist for the language?
164
+
That's normal, because projects and requirements are different for everyone.
156
165
157
166
So recently a plethora of new languages appeared, which are *transpiled* (converted) to JavaScript before they run.
158
167
@@ -163,7 +172,7 @@ Examples of such languages:
163
172
<ul>
164
173
<li>[CoffeeScript](http://coffeescript.org/) is a "syntax sugar" for JavaScript, it introduces shorter syntax, allowing to write more precise and clear code. Usually Ruby guys like it.</li>
165
174
<li>[TypeScript](http://www.typescriptlang.org/) is concentrated on adding "strict data typing", to simplify development and support of complex systems. Developed by Microsoft.</li>
166
-
<li>[Dart](https://www.dartlang.org/) was offered by Google as a replacement for JavaScript, but other leading internet companies declared that they are not interested. Maybe later, we'll see. Right now it can be transpiled to JavaScript, but used less often compared to two previous alternatives.</li>
175
+
<li>[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.</li>
0 commit comments