minor
This commit is contained in:
parent
749e6e164b
commit
d67c04c22f
6 changed files with 48 additions and 55 deletions
|
@ -6,7 +6,6 @@ That had the benefit of never breaking the existing codes. But the downside was
|
|||
|
||||
It had been so until 2009 when ECMAScript 5 (ES5) appeared. It added new features to the language and modified some of the existing ones. To keep the old code working, most modifications are off by default. One needs to enable them explicitly with a special directive `"use strict"`.
|
||||
|
||||
|
||||
[cut]
|
||||
|
||||
## "use strict"
|
||||
|
@ -22,13 +21,12 @@ For example
|
|||
...
|
||||
```
|
||||
|
||||
```warn header="There's no way to cancel `use strict`"
|
||||
There is no directive `"no use strict"` or alike, that would return the old behavior.
|
||||
We will learn functions (a way to group commands) soon.
|
||||
|
||||
Once we enter the strict mode, there's no return.
|
||||
```
|
||||
Looking ahead let's just note that `"use strict"` can be put at the start of a function (most kinds of functions) instead of the whole script. Then strict mode is enabled in that function only. But usually people use it for the whole script.
|
||||
|
||||
````warn header="Ensure that 'use strict' is at the top"
|
||||
|
||||
````warn header="Ensure that \"use strict\" is at the top"
|
||||
Please make sure that `"use strict"` is on the top of the script, otherwise the strict mode may not be enabled.
|
||||
|
||||
There is no strict mode here:
|
||||
|
@ -45,26 +43,21 @@ alert("some code");
|
|||
Only comments may appear above `"use strict"`.
|
||||
````
|
||||
|
||||
```smart header="`use strict` for functions"
|
||||
We will learn functions (a way to group commands) soon.
|
||||
```warn header="There's no way to cancel `use strict`"
|
||||
There is no directive `"no use strict"` or alike, that would return the old behavior.
|
||||
|
||||
Looking ahead let's just note that `"use strict"` can be put at the start of a function (most kinds of functions) instead of the whole script. Then strict mode is enabled in that function only. But usually people use it for the whole script.
|
||||
Once we enter the strict mode, there's no return.
|
||||
```
|
||||
|
||||
## Always "use strict"
|
||||
|
||||
## Start with "use strict"
|
||||
The differences of `"use strict"` versus the "default" mode are still to be covered.
|
||||
|
||||
It is recommended to always start a script with `"use strict"`, for the following reasons:
|
||||
In the next chapters, as we learn language features, we'll make notes about the differences of the strict mode. Luckily, there are not so many. And they actually make our life better.
|
||||
|
||||
1. First, all modern browsers support it. Only outdated ones like Internet Explorer 9 and below do not.
|
||||
2. Second, the modern JavaScript actually forces us into the strict mode. There are several modern language features like "classes" and "modules" that enable strict mode automatically. So, it's hard to evade it.
|
||||
3. The last, but not the least: strict mode is the modern mode. Makes the language a little bit better in few aspects. We'll see that as we study more language features.
|
||||
At this point of time it's enough to know about it in general:
|
||||
|
||||
Here in the tutorial, all code (where not explicitly noted otherwise) works in `"use strict"`. We concentrate on modern JavaScript. But there will be notes about what happens without `"use strict"`, so that you can understand what's going on if you forget it or if you're working with an outdated script that doesn't have it.
|
||||
|
||||
## Summary
|
||||
|
||||
- The `"use strict"` directive switches the engine to the "modern" mode, changing the behavior of some built-in features.
|
||||
- Several modern features of the language enable `"use strict"` implicitly, so it's quite hard to evade it.
|
||||
|
||||
It's always recommended to start scripts with `"use strict"`. All examples in this tutorial assume so, unless (very rarely) specified otherwise.
|
||||
1. The `"use strict"` directive switches the engine to the "modern" mode, changing the behavior of some built-in features. We'll see the details as we study.
|
||||
2. The strict mode is enabled by `"use strict"` at the top. Also there are several language features like "classes" and "modules" that enable strict mode automatically.
|
||||
3. The strict mode is supported by all modern browsers.
|
||||
4. It's always recommended to start scripts with `"use strict"`. All examples in this tutorial assume so, unless (very rarely) specified otherwise.
|
||||
|
|
|
@ -141,7 +141,7 @@ It may be interesting to know that there also exist [functional](https://en.wiki
|
|||
|
||||
In such languages, once the value is stored "in the box" -- it's there forever. If we need to store something else -- the language forces to create a new box (declare a new variable), we can't reuse the old one.
|
||||
|
||||
Though it may seem a little bit odd at first sight, these languages are quite capable of serious development. More than that, there are areas like parallel computations where this limitation infers certain benefits. Studying of such a language (even if not planning to use it soon) is recommended to broaden the mind.
|
||||
Though it may seem a little bit odd at first sight, these languages are quite capable of serious development. More than that, there are areas like parallel computations where this limitation confers certain benefits. Studying of such a language (even if not planning to use it soon) is recommended to broaden the mind.
|
||||
```
|
||||
|
||||
## Variable naming [#variable-naming]
|
||||
|
|
|
@ -4,8 +4,8 @@ The simplest, but wrong solution would be to generate a value from `min` to `max
|
|||
|
||||
```js run
|
||||
function randomInteger(min, max) {
|
||||
let rnd = min + Math.random() * (max - min);
|
||||
return Math.round(rnd);
|
||||
let rand = min + Math.random() * (max - min);
|
||||
return Math.round(rand);
|
||||
}
|
||||
|
||||
alert( randomInteger(1, 3) );
|
||||
|
@ -32,9 +32,9 @@ There are many correct solutions to the task. One of them is to adjust interval
|
|||
```js run
|
||||
*!*
|
||||
function randomInteger(min, max) {
|
||||
// now rnd is from (min-0.5) to (max+0.5)
|
||||
let rnd = min - 0.5 + Math.random() * (max - min + 1);
|
||||
return Math.round(rnd);
|
||||
// now rand is from (min-0.5) to (max+0.5)
|
||||
let rand = min - 0.5 + Math.random() * (max - min + 1);
|
||||
return Math.round(rand);
|
||||
}
|
||||
*/!*
|
||||
|
||||
|
@ -46,8 +46,8 @@ An alternative way could be to use `Math.floor` for a random number from `min` t
|
|||
```js run
|
||||
*!*
|
||||
function randomInteger(min, max) {
|
||||
// here rnd is from min to (max+1)
|
||||
let rnd = min + Math.random() * (max + 1 - min);
|
||||
// here rand is from min to (max+1)
|
||||
let rand = min + Math.random() * (max + 1 - min);
|
||||
return Math.floor(rand);
|
||||
}
|
||||
*/!*
|
||||
|
|
|
@ -1,29 +1,29 @@
|
|||
describe("getLocalDay returns the \"european\" weekday", function() {
|
||||
it("3 January 2014 - friday", function() {
|
||||
assert.equal(getWeekDay(new Date(2014, 0, 3)), 5);
|
||||
assert.equal(getLocalDay(new Date(2014, 0, 3)), 5);
|
||||
});
|
||||
|
||||
it("4 January 2014 - saturday", function() {
|
||||
assert.equal(getWeekDay(new Date(2014, 0, 4)), 6);
|
||||
assert.equal(getLocalDay(new Date(2014, 0, 4)), 6);
|
||||
});
|
||||
|
||||
it("5 January 2014 - sunday", function() {
|
||||
assert.equal(getWeekDay(new Date(2014, 0, 5)), 7);
|
||||
assert.equal(getLocalDay(new Date(2014, 0, 5)), 7);
|
||||
});
|
||||
|
||||
it("6 January 2014 - monday", function() {
|
||||
assert.equal(getWeekDay(new Date(2014, 0, 6)), 1);
|
||||
assert.equal(getLocalDay(new Date(2014, 0, 6)), 1);
|
||||
});
|
||||
|
||||
it("7 January 2014 - tuesday", function() {
|
||||
assert.equal(getWeekDay(new Date(2014, 0, 7)), 2);
|
||||
assert.equal(getLocalDay(new Date(2014, 0, 7)), 2);
|
||||
});
|
||||
|
||||
it("8 January 2014 - wednesday", function() {
|
||||
assert.equal(getWeekDay(new Date(2014, 0, 8)), 3);
|
||||
assert.equal(getLocalDay(new Date(2014, 0, 8)), 3);
|
||||
});
|
||||
|
||||
it("9 January 2014 - thursday", function() {
|
||||
assert.equal(getWeekDay(new Date(2014, 0, 9)), 4);
|
||||
assert.equal(getLocalDay(new Date(2014, 0, 9)), 4);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -72,16 +72,16 @@ To create a new `Date` object call `new Date()` with one of the following argume
|
|||
|
||||
There are many methods to access the year, month and so on from the `Date` object. But they can be easily remembered when categorized.
|
||||
|
||||
`getFullYear()`
|
||||
[getFullYear()](mdn:js/Date/getFullYear)
|
||||
: Get the year (4 digits)
|
||||
|
||||
`getMonth()`
|
||||
[getMonth()](mdn:js/Date/getMonth)
|
||||
: Get the month, **from 0 to 11**.
|
||||
|
||||
`getDate()`
|
||||
[getDate()](mdn:js/Date/getDate)
|
||||
: Get the day of month, from 1 to 31, the name of the method does look a little bit strange.
|
||||
|
||||
`getHours(), getMinutes(), getSeconds(), getMilliseconds()`
|
||||
[getHours()](mdn:js/Date/getHours), [getMinutes()](mdn:js/Date/getMinutes), [getSeconds()](mdn:js/Date/getSeconds), [getMilliseconds()](mdn:js/Date/getMilliseconds)
|
||||
: Get the corresponding time components.
|
||||
|
||||
```warn header="Not `getYear()`, but `getFullYear()`"
|
||||
|
@ -90,12 +90,12 @@ Many JavaScript engines implement a non-standard method `getYear()`. This method
|
|||
|
||||
Additionally, we can get a day of week:
|
||||
|
||||
`getDay()`
|
||||
[getDay()](mdn:js/Date/getDay)
|
||||
: Get the day of week, from `0` (Sunday) to `6` (Saturday). The first day is always Sunday, in some countries that's not so, but can't be changed.
|
||||
|
||||
**All the methods above return the components relative to the local time zone.**
|
||||
|
||||
There are also their UTC-counterparts, that return day, month, year and so on for the time zone UTC+0: `getUTCFullYear()`, `getUTCMonth()`, `getUTCDay()`. Just insert the `"UTC"` right after `"get"`.
|
||||
There are also their UTC-counterparts, that return day, month, year and so on for the time zone UTC+0: [getUTCFullYear()](mdn:js/Date/getUTCFullYear), [getUTCMonth()](mdn:js/Date/getUTCMonth), [getUTCDay()](mdn:js/Date/getUTCDay). Just insert the `"UTC"` right after `"get"`.
|
||||
|
||||
If your local time zone is shifted relative to UTC, then the code below shows different hours:
|
||||
|
||||
|
@ -112,10 +112,10 @@ alert( date.getUTCHours() );
|
|||
|
||||
Besides the given methods, there are two special ones, that do not have a UTC-variant:
|
||||
|
||||
`getTime()`
|
||||
[getTime()](mdn:js/Date/getTime)
|
||||
: Returns the timestamp for the date -- a number of milliseconds passed from the January 1st of 1970 UTC+0.
|
||||
|
||||
`getTimezoneOffset()`
|
||||
[getTimezoneOffset()](mdn:js/Date/getTimezoneOffset)
|
||||
: Returns the difference between the local time zone and UTC, in minutes:
|
||||
|
||||
```js run
|
||||
|
@ -129,14 +129,14 @@ Besides the given methods, there are two special ones, that do not have a UTC-va
|
|||
|
||||
The following methods allow to set date/time components:
|
||||
|
||||
- `setFullYear(year [, month, date])`
|
||||
- `setMonth(month [, date])`
|
||||
- `setDate(date)`
|
||||
- `setHours(hour [, min, sec, ms])`
|
||||
- `setMinutes(min [, sec, ms])`
|
||||
- `setSeconds(sec [, ms])`
|
||||
- `setMilliseconds(ms)`
|
||||
- `setTime(milliseconds)` (sets the whole date by milliseconds since 01.01.1970 UTC)
|
||||
- [`setFullYear(year [, month, date])`](mdn:js/Date/setFullYear)
|
||||
- [`setMonth(month [, date])`](mdn:js/Date/setMonth)
|
||||
- [`setDate(date)`](mdn:js/Date/setDate)
|
||||
- [`setHours(hour [, min, sec, ms])`](mdn:js/Date/setHours)
|
||||
- [`setMinutes(min [, sec, ms])`](mdn:js/Date/setMinutes)
|
||||
- [`setSeconds(sec [, ms])`](mdn:js/Date/setSeconds)
|
||||
- [`setMilliseconds(ms)`](mdn:js/Date/setMilliseconds)
|
||||
- [`setTime(milliseconds)`](mdn:js/Date/setTime) (sets the whole date by milliseconds since 01.01.1970 UTC)
|
||||
|
||||
Every one of them except `setTime()` has a UTC-variant, for instance: `setUTCHours()`.
|
||||
|
||||
|
|
|
@ -45,8 +45,8 @@
|
|||
// the ball has position:absolute, the field: position:relative
|
||||
// so ball coordinates are relative to the field inner left-upper corner
|
||||
let ballCoords = {
|
||||
top: event.clientY - fieldInnerCoords.top - field.clientTop - ball.clientHeight / 2,
|
||||
left: event.clientX - fieldInnerCoords.left - field.clientLeft - ball.clientWidth / 2
|
||||
top: event.clientY - fieldCoords.top - field.clientTop - ball.clientHeight / 2,
|
||||
left: event.clientX - fieldCoords.left - field.clientLeft - ball.clientWidth / 2
|
||||
};
|
||||
|
||||
// prevent crossing the top field boundary
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue