Ilya Kantor
GitHub
commit
d45de3608a
6 changed files with 39 additions and 39 deletions
|
|
@ -28,7 +28,7 @@ Different engines have different "codenames", for example:
|
|||
- [Gecko](https://en.wikipedia.org/wiki/Gecko_(software)) -- in Firefox.
|
||||
- ...There are other codenames like "Trident", "Chakra" for different versions of IE, "ChakraCore" for Microsoft Edge, "Nitro" and "SquirrelFish" for Safari etc.
|
||||
|
||||
The 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.
|
||||
The terms above are good to remember, because they are used in developer articles on 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="How engines work?"
|
||||
|
||||
|
|
@ -38,41 +38,41 @@ Engines are complicated. But the basics are easy.
|
|||
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.
|
||||
|
||||
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. That's why the code runs fast.
|
||||
The engine applies optimizations on every stage of the process. It even watches the script as it runs, analyzes the data that flows through it and applies optimizations to the machine-code basing on that knowledge. That's why the code runs fast.
|
||||
```
|
||||
|
||||
## What can in-browser JavaScript 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.
|
||||
|
||||
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.
|
||||
The capabilities greatly depend on the environment that 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-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.
|
||||
- React to user actions, run on mouse clicks, pointer movements, key presses.
|
||||
- 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").
|
||||
- Remember the data on the client-side ("local storage").
|
||||
|
||||
## What in-browser JavaScript can NOT do?
|
||||
|
||||
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.
|
||||
JavaScript's 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.
|
||||
|
||||
The examples of such restrictions are:
|
||||
|
||||
- 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.
|
||||
- JavaScript on a 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.
|
||||
|
||||
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 a user's explicit 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. But even in this case, JavaScript from one page may not access the other if they come 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.
|
||||
This is called the "Same Origin Policy". To work around that, *both pages* must contain a special JavaScript code that handles data exchange.
|
||||
|
||||
The limitation is again for user's safety. A page from `http://anysite.com` which a user has opened occasionally must not be able to open or access another browser tab with the URL `http://gmail.com` and steal information from there.
|
||||
The limitation is again for user's safety. A page from `http://anysite.com` which a user has opened must not be able to open or access another browser tab with the URL `http://gmail.com` and steal information from there.
|
||||
- JavaScript can easily communicate over the net to the server where the current page came from. But its 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.
|
||||
|
||||
|
||||
|
|
@ -100,15 +100,15 @@ While planning to learn a new technology, it's beneficial to check its perspecti
|
|||
|
||||
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.
|
||||
That's to be expected, 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 in the browser.
|
||||
|
||||
The modern tools make the transpilation very fast and transparent, actually allowing developers to code in another language, autoconverting it "under the hood".
|
||||
Modern tools make the transpilation very fast and transparent, actually allowing developers to code in another language and autoconverting it "under the hood".
|
||||
|
||||
Examples of such languages:
|
||||
|
||||
- [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.
|
||||
- [CoffeeScript](http://coffeescript.org/) is a "syntax sugar" for JavaScript, it introduces shorter syntax, allowing to write more precise and clear code. Usually Ruby devs like it.
|
||||
- [TypeScript](http://www.typescriptlang.org/) is concentrated on adding "strict data typing", to simplify development and support of complex systems. It is developed by Microsoft.
|
||||
- [Dart](https://www.dartlang.org/) is a standalone language that has its 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 now, browsers require it to be transpiled to JavaScript just like the ones above.
|
||||
|
||||
|
|
@ -117,5 +117,5 @@ There are more. Of course even if we use one of those languages, we should also
|
|||
## Summary
|
||||
|
||||
- JavaScript was initially created as a browser-only language, but now it is used in many other environments as well.
|
||||
- At this moment, JavaScript has a unique position as a most widely adopted browser language with full integration with HTML/CSS.
|
||||
- At this moment, JavaScript has a unique position as the most widely adopted browser language with full integration with HTML/CSS.
|
||||
- There are many languages that get "transpiled" to JavaScript and provide certain features. It is recommended to take a look at them, at least briefly, after mastering JavaScript.
|
||||
|
|
|
|||
|
|
@ -10,9 +10,9 @@ There are two archetypes: IDE and lightweight editors. Many people feel comforta
|
|||
|
||||
The term [IDE](https://en.wikipedia.org/wiki/Integrated_development_environment) (Integrated Development Environment) means a powerful editor with many features that usually operates on a "whole project". As said, that's not just an editor, but a full-scale "development environment".
|
||||
|
||||
An IDE loads the project (can be many files), and then allows navigation between files, provides autocompletion based on the whole project, integrates with version management system (like [git](https://git-scm.com/)), with testing environment and other "project-level" stuff.
|
||||
An IDE loads the project (can be many files), and then allows navigation between files, provides autocompletion based on the whole project, integrates with a version management system (like [git](https://git-scm.com/)), a testing environment and other "project-level" stuff.
|
||||
|
||||
If you haven't considered selecting an IDE, look at the following variants:
|
||||
If you haven't considered selecting an IDE yet, look at the following variants:
|
||||
|
||||
- IntelliJ editors: [WebStorm](http://www.jetbrains.com/webstorm/) for frontend development and [PHPStorm (PHP)](http://www.jetbrains.com/phpstorm/), [IDEA (Java)](http://www.jetbrains.com/idea/), [RubyMine (Ruby)](http://www.jetbrains.com/ruby/) and other if you need additional languages.
|
||||
- Visual Studio is fine if you're a .NET developer, and a free version is available ([Visual Studio Community](https://www.visualstudio.com/vs/community/))
|
||||
|
|
@ -40,7 +40,7 @@ The following options deserve your attention:
|
|||
- [Atom](https://atom.io/) (cross-platform, free).
|
||||
- [Sublime Text](http://www.sublimetext.com) (cross-platform, shareware).
|
||||
- [Notepad++](https://notepad-plus-plus.org/) (Windows, free).
|
||||
- Vim, Emacs are cool, if you know how to use them.
|
||||
- Vim and Emacs are also cool, if you know how to use them.
|
||||
|
||||
## My favorites
|
||||
|
||||
|
|
@ -48,14 +48,14 @@ The personal preference of the author is to have both an IDE for projects and a
|
|||
|
||||
I'm using:
|
||||
|
||||
- [WebStorm](http://www.jetbrains.com/webstorm/) for JS, and if there is one more language in the project, then I switch to other Jetbrains editors like [PHPStorm](http://www.jetbrains.com/phpstorm/) (PHP), [IDEA](http://www.jetbrains.com/idea/) (Java), [RubyMine](http://www.jetbrains.com/ruby/) (Ruby). There are editors for other languages too, but I didn't use them.
|
||||
- [WebStorm](http://www.jetbrains.com/webstorm/) for JS, and if there is one more language in the project, then I switch to other Jetbrains editors like [PHPStorm](http://www.jetbrains.com/phpstorm/) (PHP), [IDEA](http://www.jetbrains.com/idea/) (Java), [RubyMine](http://www.jetbrains.com/ruby/) (Ruby). There are editors for other languages too, but I haven't used them.
|
||||
- As a lightweight editor -- [Sublime Text](http://www.sublimetext.com) or [Atom](https://atom.io/).
|
||||
|
||||
If you don't know what to choose -- you can consider these ones.
|
||||
|
||||
## Let's not argue
|
||||
|
||||
The editors in the lists above are those that me or my friends -- good developers are using for a long time and are happy with.
|
||||
The editors in the lists above are those that me or my friends -- good developers have been using for a long time and are happy with.
|
||||
|
||||
There are other great editors in our big world, please choose the one you like the most.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
# Developer console
|
||||
|
||||
A code is prone to errors. You are quite likely to have errors... Oh, what am I talking about? You are *absolutely* going to make errors, at least if you're a human, not a [robot](https://en.wikipedia.org/wiki/Bender_(Futurama)).
|
||||
Code is prone to errors. You are quite likely to have errors... Oh, what am I talking about? You are *absolutely* going to make errors, at least if you're a human, not a [robot](https://en.wikipedia.org/wiki/Bender_(Futurama)).
|
||||
|
||||
But in the browser, a user doesn't see the errors by default. So, if something goes wrong in the script, we won't see what's broken and can't fix it.
|
||||
|
||||
To see errors and get a lot of other useful information about scripts, browsers have embedded "developer tools".
|
||||
|
||||
Most often developers lean towards Chrome or Firefox for the development, because those browsers have the best developer tools. Other browsers also provide developer tools, sometimes with special features, but are usually playing "catching-up" to Chrome or Firefox. So most people have a "favorite" browser and switch to others if a problem is browser-specific.
|
||||
Most often developers lean towards Chrome or Firefox for development, because those browsers have the best developer tools. Other browsers also provide developer tools, sometimes with special features, but are usually playing "catching-up" to Chrome or Firefox. So most people have a "favorite" browser and switch to others if a problem is browser-specific.
|
||||
|
||||
Developer tools are really powerful, there are many features. To start, we'll learn how to open them, look at errors and run JavaScript commands.
|
||||
|
||||
|
|
@ -18,7 +18,7 @@ Open the page [bug.html](bug.html).
|
|||
|
||||
There's an error in the JavaScript code on it. It's hidden from a regular visitor's eyes, so let's open developer tools to see it.
|
||||
|
||||
Press the key `key:F12` or, if you're on Mac, then `key:Cmd+Opt+J`.
|
||||
Press `key:F12` or, if you're on Mac, then `key:Cmd+Opt+J`.
|
||||
|
||||
The developer tools will open on the Console tab by default.
|
||||
|
||||
|
|
@ -40,13 +40,13 @@ Now we can see errors and that's enough for the start. We'll be back to develope
|
|||
|
||||
Most other browsers use `key:F12` to open developer tools.
|
||||
|
||||
The look & feel of them is quite similar. Once you know how to use one of them (can start with Chrome), you can easily switch to another.
|
||||
The look & feel of them is quite similar. Once you know how to use one of them (you can start with Chrome), you can easily switch to another.
|
||||
|
||||
## Safari
|
||||
|
||||
Safari (Mac browser, not supported for Windows/Linux) is a little bit special here. We need to enable the "Develop menu" first.
|
||||
Safari (Mac browser, not supported by Windows/Linux) is a little bit special here. We need to enable the "Develop menu" first.
|
||||
|
||||
Open Preferences and go to "Advanced" pane. There's a checkbox at the bottom of it:
|
||||
Open Preferences and go to "Advanced" pane. There's a checkbox at the bottom:
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ The tutorial that you're reading is about core JavaScript, which is platform-ind
|
|||
|
||||
But, we need a working environment to run our scripts, and, just because this book is online, the browser is a good choice. We'll keep the amount of browser-specific commands (like `alert`) to a minimum, so that you don't spend time on them if you plan to concentrate on another environment like Node.JS. On the other hand, browser details are explained in detail in the [next part](/ui) of the tutorial.
|
||||
|
||||
So first, let's see how to attach a script to the webpage. For server-side environments, you can just execute it with a command like `"node my.js"` for Node.JS.
|
||||
So first, let's see how to attach a script to a webpage. For server-side environments, you can just execute it with a command like `"node my.js"` for Node.JS.
|
||||
|
||||
|
||||
[cut]
|
||||
|
|
@ -45,7 +45,7 @@ The `<script>` tag contains JavaScript code which is automatically executed when
|
|||
|
||||
## The modern markup
|
||||
|
||||
The `<script>` tag has a few attributes that are rarely used nowadays, but we can find them in the old code:
|
||||
The `<script>` tag has a few attributes that are rarely used nowadays, but we can find them in old code:
|
||||
|
||||
The `type` attribute: <code><script <u>type</u>=...></code>
|
||||
|
||||
|
|
@ -70,7 +70,7 @@ Comments before and after scripts.
|
|||
|
||||
If we have a lot of JavaScript code, we can put it into a separate file.
|
||||
|
||||
The script file is attached to HTML with `src` attribute:
|
||||
The script file is attached to HTML with the `src` attribute:
|
||||
|
||||
```html
|
||||
<script src="/path/to/script.js"></script>
|
||||
|
|
@ -78,7 +78,7 @@ The script file is attached to HTML with `src` attribute:
|
|||
|
||||
Here `/path/to/script.js` is an absolute path to the file with the script (from the site root).
|
||||
|
||||
It is also possible to provide a path relative to the current page. For instance, `src="script.js"` would mean a file `"script.js"` from the current folder.
|
||||
It is also possible to provide a path relative to the current page. For instance, `src="script.js"` would mean a file `"script.js"` in the current folder.
|
||||
|
||||
We can give a full URL as well, for instance:
|
||||
|
||||
|
|
@ -99,7 +99,7 @@ As a rule, only the simplest scripts are put into HTML. More complex ones reside
|
|||
|
||||
The benefit of a separate file is that the browser will download it and then store in its [cache](https://en.wikipedia.org/wiki/Web_cache).
|
||||
|
||||
After this, other pages which want the same script will take it from the cache instead of downloading it. So the file is actually downloaded only once.
|
||||
After this, other pages that want the same script will take it from the cache instead of downloading it. So the file is actually downloaded only once.
|
||||
|
||||
That saves traffic and makes pages faster.
|
||||
```
|
||||
|
|
@ -134,4 +134,4 @@ The example above can be split into two scripts to work:
|
|||
- A script in an external file can be inserted with `<script src="path/to/script.js"></script>`.
|
||||
|
||||
|
||||
There is much more about browser scripts and their interaction with the web-page. But let's keep in mind that this part of the tutorial is devoted to JavaScript language, so we shouldn't distract ourselves from it. We'll be using a browser as a way to run JavaScript, which is very convenient for online reading, but yet one of many.
|
||||
There is much more to learn about browser scripts and their interaction with the web-page. But let's keep in mind that this part of the tutorial is devoted to the JavaScript language, so we shouldn't distract ourselves from it. We'll be using a browser as a way to run JavaScript, which is very convenient for online reading, but yet one of many.
|
||||
|
|
|
|||
|
|
@ -85,16 +85,16 @@ Now we have the "All fine now" message and then `1` and `2`.
|
|||
|
||||
The error in the no-semicolon variant occurs because JavaScript does not imply a semicolon before square brackets `[...]`.
|
||||
|
||||
So, because the semicolon is not auto-inserted, the code in the first example is treated as a single statement, that's how the engine sees it:
|
||||
So, because the semicolon is not auto-inserted, the code in the first example is treated as a single statement. That's how the engine sees it:
|
||||
|
||||
```js run no-beautify
|
||||
alert("There will be an error")[1, 2].forEach(alert)
|
||||
```
|
||||
|
||||
But it should be two separate statements, not a single one. Such a merging in this case is just wrong, hence the error. There are other situations when such thing happens.
|
||||
But it should be two separate statements, not a single one. Such a merging in this case is just wrong, hence the error. There are other situations when such a thing happens.
|
||||
````
|
||||
|
||||
It's recommended to put semicolons between statements even if they are separated by newlines. This rule is widely adopted by the community. Let's note once again -- *it is possible* to leave out semicolons most of time. But it's safer, especially for a beginner -- to put them.
|
||||
It's recommended to put semicolons between statements even if they are separated by newlines. This rule is widely adopted by the community. Let's note once again -- *it is possible* to leave out semicolons most of the time. But it's safer, especially for a beginner -- to use them.
|
||||
|
||||
## Comments
|
||||
|
||||
|
|
@ -126,9 +126,9 @@ alert('Hello');
|
|||
alert('World');
|
||||
```
|
||||
|
||||
The content of comments is ignored, so if we put a code inside <code>/* ... */</code> it won't execute.
|
||||
The content of comments is ignored, so if we put code inside <code>/* ... */</code> it won't execute.
|
||||
|
||||
Sometimes it comes handy to temporarily disable a part of the code:
|
||||
Sometimes it comes in handy to temporarily disable a part of code:
|
||||
|
||||
```js run
|
||||
/* Commenting out the code
|
||||
|
|
@ -138,13 +138,13 @@ alert('World');
|
|||
```
|
||||
|
||||
```smart header="Use hotkeys!"
|
||||
In most editors a line of code can be commented out by `key:Ctrl+/` hotkey for a single-line comment and something like `key:Ctrl+Shift+/` -- for multiline comments (select a code and press the hotkey). For Mac try `key:Cmd` instead of `key:Ctrl`.
|
||||
In most editors a line of code can be commented out by `key:Ctrl+/` hotkey for a single-line comment and something like `key:Ctrl+Shift+/` -- for multiline comments (select a piece of code and press the hotkey). For Mac try `key:Cmd` instead of `key:Ctrl`.
|
||||
```
|
||||
|
||||
````warn header="Nested comments are not supported!"
|
||||
There may not be `/*...*/` inside another `/*...*/`.
|
||||
|
||||
This code will die with an error:
|
||||
Such code will die with an error:
|
||||
|
||||
```js run no-beautify
|
||||
/*
|
||||
|
|
@ -156,6 +156,6 @@ alert( 'World' );
|
|||
|
||||
Please, don't hesitate to comment your code.
|
||||
|
||||
Comments increase the overall code footprint, but that's not a problem at all. There are many tools which minify the code before publishing to production server. They remove comments, so comments do not appear in the working scripts. So, the comments do not have any negative effects on production at all.
|
||||
Comments increase the overall code footprint, but that's not a problem at all. There are many tools which minify the code before publishing to the production server. They remove comments, so they don't appear in the working scripts. Therefore comments do not have any negative effects on production at all.
|
||||
|
||||
Further in the tutorial, there will be a chapter <info:coding-style> that also explains how to write better comments.
|
||||
|
|
|
|||
|
|
@ -459,7 +459,7 @@ let message = "Hello!";
|
|||
let phrase = message;
|
||||
```
|
||||
|
||||
As a result we have two independant variables, each one is storing the string `"Hello!"`.
|
||||
As a result we have two independent variables, each one is storing the string `"Hello!"`.
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue