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
@@ -20,64 +20,62 @@ But as it evolved, JavaScript became a fully independent language, with its own
20
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
21
[/smart]
22
22
23
-
JavaScript can execute not only in the browser, but anywhere, with the help of a special program called [an interpreter]("http://en.wikipedia.org/wiki/Interpreter_(computing)"). The execution process is called "an interpretation".
23
+
Since the time of its creation, JavaScript evolved.
24
+
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". The browser has an embedded JavaScript interpreter.
24
26
25
27
[smart header="Compilation and interpretation"]
26
28
There are in fact two general approaches to execute programs: "compilers" and "interpreters".
27
29
28
30
<ul>
29
-
<li>*Compilers* convert the program text (source code) to another language, usually the machine language (binary code) without executing it. This is done by the developer and then the binary code is distributed to the system which actually runs it.</li>
31
+
<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>
30
32
<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>
31
33
</ul>
32
34
33
-
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 is very fast.
35
+
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.
34
36
[/smart]
35
37
36
-
All major browsers have an embedded JavaScript interpreter, that's why they are capable of script execution. But naturally JavaScript can be used not only in-browser. It's a full-fledged language usable at the server too and even in a washing machine if it gets a chip with the interpreter installed.
37
-
38
-
[warn header="Let's talk about browsers"]
39
-
Further in the chapter we talk about capabilities and limitaitons of JavaScript in the browser.
40
-
[/warn]
38
+
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.
41
39
42
-
## What JavaScript can do?
40
+
Other capabilities depend on the environment which runs JavaScript. In the browser JavaScript is able to do everything related to webpage manipulation, interaction with the user and the webserver.
43
41
44
-
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.
42
+
## What in-browser JavaScript can do?
45
43
46
-
Other capabilities depend on the environment which runs JavaScript. In the browser JavaScript is able to do everything related to webpage manipulation, talk to the visitor and, to some extent, talk to the internet.
47
-
48
-
Or, in more details, it is able to:
44
+
In more details, JavaScript is able to:
49
45
50
46
<ul>
51
47
<li>Create new HTML tags, remove the existing ones, change styles, hide/show elements...</li>
52
48
<li>React on user actions, run on mouse clicks, pointer movements, key presses...</li>
53
49
<li>Send requests over the network to remote servers, download and upload data without reloading the page (a so-called "AJAX" technology)...</li>
54
50
<li>Get and set cookies, ask for data, show messages...</li>
55
-
<li>...and can do much more with the page and it's content!</li>
51
+
<li>...and can actually do almost anything with the page and it's content!</li>
56
52
</ul>
57
53
58
-
## What JavaScript can NOT do?
59
-
60
-
JavaScript abilities in the browser are limited for user safety, mainly not to let an evil webpage access private information or harm the user's data.
54
+
## What in-browser JavaScript can NOT do?
61
55
62
-
Such limits do not exist if JavaScript is used outside of the browser, for example on a server. Besides, modern browsers allow to install plugins and extensions which get extended permissions, but require actions from the user to accept that.
63
-
64
-
JavaScript abilities are also limited when it tries to access things outside of the current window/page.
65
-
66
-
<imgsrc="limitations.planning">
56
+
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.
67
57
68
58
<ul>
69
-
<li>JavaScript may not read/write arbitrary files on the hard disk, copy them or execute programs. It has no direct access to the OS.
59
+
<li>JavaScript may not read/write arbitrary files on the hard disk, copy them or execute programs. It has no direct access to OS system functions.
70
60
71
-
Modern browsers allow it to work with files, but limit the access to a specially created directory called "a sandbox". There is a work going on to allow access to devices, with the user's permission.
61
+
Modern browsers allow it to work with files, but limit the access to a specially created directory called "a sandbox". There are ways to interact with camera/microphone and other devices, but they require an explicit user's permission.
72
62
</li>
73
-
<li>JavaScript from a browser tab may not access other tabs and windows with the exception when they were opened by this script and come from the same origin (domain, port, protocol).
63
+
<li>JavaScript may not freely access other pages opened in the same browser. The exception is when the pages come from the same site.
64
+
65
+
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.
74
66
75
-
There are ways to workaround this, and they are explained in the tutorial, but they require a special code on both documents which reside in different tabs/windows. Without it, for the sake of safety, JavaScript is disallowed to delve into another tab contents.
67
+
The limitation is again for user safety. A page from evilsite.com which a user has opened occasionaly will be unable to access other browser tabs and steal information from there.
76
68
</li>
77
-
<li>JavaScript can easily interact 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.
69
+
<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.
78
70
</li>
79
71
</ul>
80
72
73
+
<imgsrc="limitations.png">
74
+
75
+
76
+
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.
77
+
78
+
81
79
## Why JavaScript is unique?
82
80
83
81
There are at least *three* great things about JavaScript:
@@ -92,17 +90,13 @@ Combined, these 3 things only exist in JavaScript and no other browser technolog
92
90
93
91
That's what makes JavaScript unique. That's why it is the most widespread way of creating browser interfaces.
94
92
95
-
## The Trends
96
-
97
-
While planning to learn a new technology, it's beneficial to check it's trends and perspectives.
98
-
99
-
JavaScript shines in this aspect.
93
+
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.
100
94
101
-
###HTML 5
95
+
## HTML 5
102
96
103
-
*HTML 5* is an evolution of HTML standard which adds new tags and what's more important -- new browser abilities, accessable from JavaScript.
97
+
*HTML 5* is an evolution of HTML which adds new tags and what's more important -- new browser abilities, accessable from JavaScript.
104
98
105
-
A few examples:
99
+
Few examples:
106
100
107
101
<ul>
108
102
<li>Read/write files on disk (in a "sandbox", not just any file).</li>
@@ -112,24 +106,29 @@ A few examples:
112
106
<li>2d and 3d-drawing with hardware acceleration support, just like in modern games.</li>
113
107
</ul>
114
108
115
-
Many new abilities are still in progress, but browsers gradually start to support them.
109
+
Many new abilities are still in progress, but browsers gradually improve the support for them.
116
110
117
111
[summary]
118
-
The trend: JavaScript can do more and more, as features are added to browsers, it is becoming more like a desktop application.
112
+
The trend: browser can do more and more, it is becoming more like an all-purpose desktop application.
119
113
[/summary]
120
114
121
-
### EcmaScript 6
115
+
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.
116
+
117
+
...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.
118
+
119
+
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.
122
120
123
-
JavaScript evolves. The upcoming EcmaScript 6 standard adds many new language-level features which make it's syntax more capable and expressive.
121
+
## New EcmaScript
122
+
123
+
JavaScript evolves. The upcoming EcmaScript-2016 standard adds more language-level features which make the syntax more capable and expressive.
124
124
125
125
Modern browsers improve their engines to raise JavaScript execution script, fix bugs and try to follow the standards.
126
126
127
127
[summary]
128
-
The trend: JavaScript is becoming faster and more stable, gets new syntax.[/summary]
128
+
The trend: JavaScript is becoming faster and more stable, gets new syntax.
129
+
[/summary]
129
130
130
-
It's crucially important that new standards, HTML5, EcmaScript 6 are still compatible with the previous code, so there are introduced into the ecosystem without problems with the existing applications.
131
-
132
-
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.
131
+
It's great to see that that new standards, HTML5, EcmaScript are still compatible with the previous code, so they cause no problems with existing applications.
133
132
134
133
...As the time goes, the specification matures and changes, and browsers must adapt it. That may lead to errors in JavaScript 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.
135
134
@@ -139,67 +138,15 @@ But what's great -- eventually all browsers tend to follow the standard. There a
139
138
The trend: browsers, though eager for new features, become compatible with the standard.
140
139
[/summary]
141
140
142
-
143
-
## Alternative browser technologies
144
-
145
-
Besides JavaScript, other technologies are used in-browser. Together they allow to get better results.
146
-
147
-
### Java
148
-
149
-
Java is a widespread general-purpose language. For webpages, there is a special browser-level Java plugin which allows to run "applets".
150
-
151
-
*An applet* is a program written in Java language which can be attached to HTML using the `applet` tag, like this:
This tag loads the Java program from `MyApplet.class` and executes it with given parameters (`nodes`, `root`).
161
-
162
-
The applet runs in a rectangular part of the page, so called "container". All user actions inside it are processed by the applet. One can hide the container if the applet does something not fit for the show.
163
-
164
-
Of course, Java runtime environment and the browser plugin must be installed and enabled to let the applet execute, and the applet itself must be signed by the publisher, otherwise it will be blocked.
165
-
166
-
**Why us, JavaScript-developers should be aware of Java?**
167
-
168
-
Mainly because a signed Java-applet can do literally everything on a visitor's computer, just like any other program. Of course that requires a visitor's agreement to run it, but after that they can break of any restrictions.
169
-
170
-
So if the user trusts as (like he's already a client of ours), we can implement something that pure javascript can't do yet.
171
-
172
-
Just to note, JavaScript and Java-applets can interact with each other, so JavaScript will have access to capabilities provided by the applet.
173
-
174
-
### Browser plugins and extensions
175
-
176
-
All modern browsers allow to write plugins using either JavaScript and/or C language.
177
-
178
-
The plugins can both handle a special kind of content (a media-player to play music) and interact with the page.
179
-
180
-
Just as Java-applets, they have wider access than JavaScript, but the user must install them and agree that he trusts the plugin.
181
-
182
-
### Adobe Flash
183
-
184
-
Adobe Flash is a long-lived cross-browser platform mainly targeted on multimedia and animations.
185
-
186
-
Just like Java, a pre-compiled Flash program can be attached to HTML and executed in a rectangular container.
187
-
188
-
Flash is good at cross-browser device access: camera, microphone, and for certain OS-level features like the clipboard. Also it is good at networking.
189
-
190
-
One can access Flash programs from JavaScript and vice versa.
191
-
192
-
The main drawback is that it needs Adobe Flash player to be installed and enabled. Users tend to disable it, because of nasty "multimedia" ads and many vulnerabilities in the past. Also, certain operational systems like iOS (iPhone, iPad) do not support it at all.
193
-
194
141
## Languages over JavaScript
195
142
196
143
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...
197
144
198
145
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?
199
146
200
-
So recently a plethora of new languages appeared, which add features "over" JavaScript, meaning that the source code in these languages is*transpiled* (converted) to JavaScript before they run.
147
+
So recently a plethora of new languages appeared, which are*transpiled* (converted) to JavaScript before they run.
201
148
202
-
The transpilation happens automatically, modern tools make the process very fast and transparent, actually allowing developers to code in another language. They still should know JavaScript, to better understand what they are doing.
149
+
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.
203
150
204
151
A few examples of such languages:
205
152
@@ -209,22 +156,9 @@ A few examples of such languages:
209
156
<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>
210
157
</ul>
211
158
212
-
[smart header="ES6 and ES7 right now"]
213
-
The upcoming standards really bring a lot of goodies.
214
-
215
-
For those eager to use them now, there are transpilers which take the code written with the new standards and convert it into the older one, so that the browsers can execute it.
216
-
217
-
For example, [6to5](https://6to5.org/).
218
-
219
-
Here in the first part of the tutorial I feel a little bit shy to use them, because without a native browser support such tools add unnecessary complexity at the start and can be easily integrated later when the basics are learned.
220
-
[/smart]
221
-
222
-
223
159
## Summary
224
160
225
-
JavaScript is unique due it's full integration with HTML/CSS and wide browser adoption.
226
-
227
-
...But a good JavaScript-developer should be aware of other technologies too. Our ultimate purpose is to create best frontend apps, and sometimes Java, Flash or plugins can be helpful too.
161
+
As of now, JavaScript is unique due it's full integration with HTML/CSS and wide browser adoption.
228
162
229
163
Other languages like CoffeeScript and TypeScript can help to develop faster and write less bug-proof code. It is recommended to take a look at them, at least briefly, after mastering JavaScript.
0 commit comments