Skip to content

Commit 6f6e270

Browse files
committed
up
1 parent b32a627 commit 6f6e270

1 file changed

Lines changed: 45 additions & 111 deletions

File tree

1-js/1-getting-started/1-intro/article.md

Lines changed: 45 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -20,64 +20,62 @@ But as it evolved, JavaScript became a fully independent language, with its own
2020
It has quite a few special features that make mastering a bit hard at first, but we'll nicely deal with them later.
2121
[/smart]
2222

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.
2426

2527
[smart header="Compilation and interpretation"]
2628
There are in fact two general approaches to execute programs: "compilers" and "interpreters".
2729

2830
<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>
3032
<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>
3133
</ul>
3234

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.
3436
[/smart]
3537

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.
4139

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.
4341

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?
4543

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:
4945

5046
<ul>
5147
<li>Create new HTML tags, remove the existing ones, change styles, hide/show elements...</li>
5248
<li>React on user actions, run on mouse clicks, pointer movements, key presses...</li>
5349
<li>Send requests over the network to remote servers, download and upload data without reloading the page (a so-called "AJAX" technology)...</li>
5450
<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>
5652
</ul>
5753

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?
6155

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-
<img src="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.
6757

6858
<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.
7060

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.
7262
</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.
7466

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.
7668
</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.
7870
</li>
7971
</ul>
8072

73+
<img src="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+
8179
## Why JavaScript is unique?
8280

8381
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
9290

9391
That's what makes JavaScript unique. That's why it is the most widespread way of creating browser interfaces.
9492

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.
10094

101-
### HTML 5
95+
## HTML 5
10296

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.
10498

105-
A few examples:
99+
Few examples:
106100

107101
<ul>
108102
<li>Read/write files on disk (in a "sandbox", not just any file).</li>
@@ -112,24 +106,29 @@ A few examples:
112106
<li>2d and 3d-drawing with hardware acceleration support, just like in modern games.</li>
113107
</ul>
114108

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.
116110

117111
[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.
119113
[/summary]
120114

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.
122120

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.
124124

125125
Modern browsers improve their engines to raise JavaScript execution script, fix bugs and try to follow the standards.
126126

127127
[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]
129130

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.
133132

134133
...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.
135134

@@ -139,67 +138,15 @@ But what's great -- eventually all browsers tend to follow the standard. There a
139138
The trend: browsers, though eager for new features, become compatible with the standard.
140139
[/summary]
141140

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:
152-
153-
```html
154-
<applet code="MyApplet.class" codebase="/path/to/code">
155-
<param name="nodes" value="50,30,70,20,40,60,80,35,65,75,85,90">
156-
<param name="root" value="50">
157-
</applet>
158-
```
159-
160-
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-
194141
## Languages over JavaScript
195142

196143
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...
197144

198145
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?
199146

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.
201148

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.
203150

204151
A few examples of such languages:
205152

@@ -209,22 +156,9 @@ A few examples of such languages:
209156
<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>
210157
</ul>
211158

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-
223159
## Summary
224160

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.
228162

229163
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.
230164

0 commit comments

Comments
 (0)