Merge branch 'master' into patch-1

This commit is contained in:
Ilya Kantor 2018-12-24 12:40:16 +03:00 committed by GitHub
commit 744f3fc9b2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 44 additions and 40 deletions

View file

@ -1,14 +1,14 @@
# Developer console
Code is prone to errors. You are quite likely to make 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 will quite likely make 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.
But in the browser, users doesn't see 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, "developer tools" have been embedded in browsers.
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 "catch-up" to Chrome or Firefox. So most people have a "favorite" browser and switch to others if a problem is browser-specific.
Most 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 "catch-up" to Chrome or Firefox. So most developers have a "favorite" browser and switch to others if a problem is browser-specific.
Developer tools are potent; there are many features. To start, we'll learn how to open them, look at errors and run JavaScript commands.
Developer tools are potent; they have many features. To start, we'll learn how to open them, look at errors, and run JavaScript commands.
## Google Chrome
@ -31,20 +31,20 @@ The exact look of developer tools depends on your version of Chrome. It changes
Below the error message, there is a blue `>` symbol. It marks a "command line" where we can type JavaScript commands. Press `key:Enter` to run them (`key:Shift+Enter` to input multi-line commands).
Now we can see errors, and that's enough for a start. We'll be back to developer tools later and cover debugging more in-depth in the chapter <info:debugging-chrome>.
Now we can see errors, and that's enough for a start. We'll come back to developer tools later and cover debugging more in-depth in the chapter <info:debugging-chrome>.
## Firefox, Edge, and others
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 those tools (you 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 these tools (you can start with Chrome), you can easily switch to another.
## Safari
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:
Open Preferences and go to the "Advanced" pane. There's a checkbox at the bottom:
![safari](safari.png)
@ -52,7 +52,7 @@ Now `key:Cmd+Opt+C` can toggle the console. Also, note that the new top menu ite
## Summary
- Developer tools allow us to see errors, run commands, examine variables and much more.
- They can be opened with `key:F12` for most browsers under Windows. Chrome for Mac needs `key:Cmd+Opt+J`, Safari: `key:Cmd+Opt+C` (need to enable first).
- Developer tools allow us to see errors, run commands, examine variables, and much more.
- They can be opened with `key:F12` for most browsers on Windows. Chrome for Mac needs `key:Cmd+Opt+J`, Safari: `key:Cmd+Opt+C` (need to enable first).
Now we have the environment ready. In the next section, we'll get down to JavaScript.

View file

@ -205,7 +205,7 @@ function showMessage(from, text = anotherFunction()) {
```
```smart header="Evaluation of default parameters"
In JavaScript, a default parameter is evaluated every time the function is called without the respective parameter. In the example above, `anotherFunctions()` is called everytime `someMessage()` is called without the `text` parameter. This is in contrast to some other languages like Python, where any default parameters are evaluated only once during the initial interpretation.
In JavaScript, a default parameter is evaluated every time the function is called without the respective parameter. In the example above, `anotherFunction()` is called everytime `someMessage()` is called without the `text` parameter. This is in contrast to some other languages like Python, where any default parameters are evaluated only once during the initial interpretation.
```

View file

@ -56,7 +56,7 @@ A *breakpoint* is a point of code where the debugger will automatically pause th
While the code is paused, we can examine current variables, execute commands in the console etc. In other words, we can debug it.
We can always find a list of breakpoints in the right pane. That's useful when we have many breakpoints in various files. It allows to:
We can always find a list of breakpoints in the right pane. That's useful when we have many breakpoints in various files. It allows us to:
- Quickly jump to the breakpoint in the code (by clicking on it in the right pane).
- Temporarily disable the breakpoint by unchecking it.
- Remove the breakpoint by right-clicking and selecting Remove.

View file

@ -233,7 +233,7 @@ Grouping is done with a nested `describe`:
describe("pow", function() {
*!*
describe("raises x to power n", function() {
describe("raises x to power 3", function() {
*/!*
function makeTest(x) {

View file

@ -1,6 +1,6 @@
describe("pow", function() {
describe("raises x to power n", function() {
describe("raises x to power 3", function() {
function makeTest(x) {
let expected = x * x * x;

View file

@ -1,6 +1,6 @@
describe("pow", function() {
describe("raises x to power n", function() {
describe("raises x to power 3", function() {
function makeTest(x) {
let expected = x * x * x;

View file

@ -1,6 +1,6 @@
describe("pow", function() {
describe("raises x to power n", function() {
describe("raises x to power 3", function() {
function makeTest(x) {
let expected = x * x * x;

View file

@ -1 +1,5 @@
```js run
function extractCurrencyValue(str) {
return +str.slice(1);
}
```

View file

@ -1,6 +1,6 @@
```js run no-beautify
function sortByName(arr) {
arr.sort((a, b) => a.name > b.name);
arr.sort((a, b) => b.name > a.name ? 1 : -1);
}
let john = { name: "John", age: 25 };

View file

@ -329,7 +329,7 @@ It calls the function for each element of the array and returns the array of res
For instance, here we transform each element into its length:
```js run
let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length)
let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length);
alert(lengths); // 5,7,6
```

View file

@ -45,7 +45,7 @@ let user = {
};
```
- `Object.keys(user) = [name, age]`
- `Object.keys(user) = ["name", "age"]`
- `Object.values(user) = ["John", 30]`
- `Object.entries(user) = [ ["name","John"], ["age",30] ]`

View file

@ -2,7 +2,7 @@
Let's meet a new built-in object: [Date](mdn:js/Date). It stores the date, time and provides methods for date/time management.
For instance, we can use it to store creation/modification times, or to measure time, or just to print out the current date.
For instance, we can use it to store creation/modification times, to measure time, or just to print out the current date.
## Creation
@ -108,7 +108,7 @@ alert( date.getHours() );
alert( date.getUTCHours() );
```
Besides the given methods, there are two special ones, that do not have a UTC-variant:
Besides the given methods, there are two special ones that do not have a UTC-variant:
[getTime()](mdn:js/Date/getTime)
: Returns the timestamp for the date -- a number of milliseconds passed from the January 1st of 1970 UTC+0.

View file

@ -62,7 +62,7 @@ showName("Julius", "Caesar", "Consul", "Imperator");
```
````warn header="The rest parameters must be at the end"
The rest parameters gather all remaining arguments, so the following has no sense:
The rest parameters gather all remaining arguments, so the following does not make sense and causes an error:
```js
function f(arg1, ...rest, arg2) { // arg2 after ...rest ?!

View file

@ -475,7 +475,7 @@ They look like this:
Here a Function Expression is created and immediately called. So the code executes right away and has its own private variables.
The Function Expression is wrapped with brackets `(function {...})`, because when JavaScript meets `"function"` in the main code flow, it understands it as the start of a Function Declaration. But a Function Declaration must have a name, so there will be an error:
The Function Expression is wrapped with parenthesis `(function {...})`, because when JavaScript meets `"function"` in the main code flow, it understands it as the start of a Function Declaration. But a Function Declaration must have a name, so there will be an error:
```js run
// Error: Unexpected token (
@ -497,7 +497,7 @@ function go() {
}(); // <-- can't call Function Declaration immediately
```
So, round brackets are needed to show JavaScript that the function is created in the context of another expression, and hence it's a Function Expression. It needs no name and can be called immediately.
So, parenthesis are needed to show JavaScript that the function is created in the context of another expression, and hence it's a Function Expression. It needs no name and can be called immediately.
There are other ways to tell JavaScript that we mean Function Expression:

View file

@ -8,7 +8,7 @@ Modify the code of `makeCounter()` so that the counter can also decrease and set
- `counter()` should return the next number (as before).
- `counter.set(value)` should set the `count` to `value`.
- `counter.decrease(value)` should decrease the `count` by 1.
- `counter.decrease()` should decrease the `count` by 1.
See the sandbox code for the complete usage example.

View file

@ -27,4 +27,4 @@ for (let args of work.calls) {
}
```
P.S. That decorator is sometimes useful for unit-testing, it's advanced form is `sinon.spy` in [Sinon.JS](http://sinonjs.org/) library.
P.S. That decorator is sometimes useful for unit-testing. Its advanced form is `sinon.spy` in [Sinon.JS](http://sinonjs.org/) library.