This commit is contained in:
Ilya Kantor 2017-03-22 11:50:05 +03:00
parent aa521b9090
commit d1a0659aba
13 changed files with 27 additions and 33 deletions

View file

@ -23,7 +23,7 @@ regexp = new RegExp("pattern", "flags");
...And the short one, using slashes `"/"`:
```js
regexp = /pattern/; // no flags флагов
regexp = /pattern/; // no flags
regexp = /pattern/gmi; // with flags g,m and i (to be covered soon)
```
@ -90,7 +90,7 @@ Regular expressions may have flags that affect the search.
There are only 5 of them in JavaScript:
`i`
: With this flag the search is case-insensitive: no difference between `А` and `а` (see the example below).
: With this flag the search is case-insensitive: no difference between `A` and `a` (see the example below).
`g`
: With this flag the search looks for all matches, without it -- only the first one (we'll see uses in the next chapter).

View file

@ -6,7 +6,7 @@ Several characters or character classes inside square brackets `[…]` mean to "
## Sets
For instance, `pattern:[еао]` means any of the 3 characters: `'а'`, `'е'`, or `'о'`.
For instance, `pattern:[eao]` means any of the 3 characters: `'a'`, `'e'`, or `'o'`.
That's calles a *set*. Sets can be used in a regexp along with regular characters:
@ -26,8 +26,8 @@ alert( "Voila".match(/V[oi]la/) ); // null, no matches
The pattern assumes:
- `pattern:В`,
- then *одну* of the letters `pattern:[oi]`,
- `pattern:V`,
- then *one* of the letters `pattern:[oi]`,
- then `pattern:la`.
So there would be a match for `match:Vola` or `match:Vila`.
@ -70,7 +70,7 @@ They are denoted by a caret character `^` at the start and match any character *
For instance:
- `pattern:[^аеуо]` -- any character except `'a'`, `'e'`, `'y'` or `'o'`.
- `pattern:[^aeyo]` -- any character except `'a'`, `'e'`, `'y'` or `'o'`.
- `pattern:[^0-9]` -- any character except a digit, the same as `\D`.
- `pattern:[^\s]` -- any non-space character, same as `\S`.

View file

@ -237,7 +237,7 @@ Let's modify the pattern by making the quantifier `pattern:.*?` lazy:
let str = '...<a href="link1" class="doc">... <a href="link2" class="doc">...';
let reg = /<a href=".*?" class="doc">/g;
// Сработало!
// Works!
alert( str.match(reg) ); // <a href="link1" class="doc">, <a href="link2" class="doc">
```

View file

@ -4,7 +4,7 @@ A "bb-tag" looks like `[tag]...[/tag]`, where `tag` is one of: `b`, `url` or `qu
For instance:
```
[b]текст[/b]
[b]text[/b]
[url]http://google.com[/url]
```

View file

@ -41,7 +41,7 @@ Try to move points using a mouse in the example below:
[iframe src="demo.svg?nocpath=1&p=0,0,0.5,0,0.5,1,1,1" height=370]
**As you can notice, the curve stretches along the tangential lines 1 -> 2 и 3 -> 4.**
**As you can notice, the curve stretches along the tangential lines 1 -> 2 and 3 -> 4.**
After some practice it becomes obvious how to place points to get the needed curve. And by connecting several curves we can get practically anything.

View file

@ -13,7 +13,7 @@
<script>
boat.onclick = function() {
this.onclick = null; // только первый клик сработает
this.onclick = null; // only the first click should start the animation
let times = 1;

View file

@ -3,11 +3,9 @@
cursor: pointer;
transition: margin-left 3s ease-in-out;
}
/* переворот картинки через CSS */
/* flipping the picture with CSS */
.back {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: fliph;
/* IE9- */
}

View file

@ -23,7 +23,6 @@ let timer = setInterval(function() {
```
The more complete example of the animation:
Более полный пример кода анимации:
```js
let start = Date.now(); // remember start time

View file

@ -17,10 +17,9 @@
<script>
train.onclick = function() {
let start = Date.now(); // сохранить время начала
let start = Date.now();
let timer = setInterval(function() {
// вычислить сколько времени прошло из opts.duration
let timePassed = Date.now() - start;
train.style.left = timePassed / 5 + 'px';

View file

@ -1,16 +1,14 @@
function animate(options) {
function animate({duration, draw, timing}) {
let start = performance.now();
requestAnimationFrame(function animate(time) {
// timeFraction от 0 до 1
let timeFraction = (time - start) / options.duration;
let timeFraction = (time - start) / duration;
if (timeFraction > 1) timeFraction = 1;
// текущее состояние анимации
let progress = options.timing(timeFraction)
let progress = timing(timeFraction)
options.draw(progress);
draw(progress);
if (timeFraction < 1) {
requestAnimationFrame(animate);

View file

@ -1,3 +1,3 @@
# Анимация
# Animation
CSS анимации. Контроль над ними из JavaScript. Анимации на чистом JavaScript.
CSS and JavaScript animations.

View file

@ -7,10 +7,10 @@
<body>
<div>Меняет top.location на javascript.ru</div>
<div>Changes top.location to javascript.info</div>
<script>
top.location = 'http://javascript.ru';
top.location = 'https://javascript.info';
</script>
</body>

View file

@ -6,8 +6,8 @@ The file lists people who made significant contributions to the project:
<li>Alexey Shisterov (tutorial)</li>
<li>Anton Vernogor @smmurf (markup)</li>
<li>Artem Beztsenny @bezart (design)</li>
<li>Илья Кантор @iliakan (tutorial, code)</li>
<li>Юрий Ткаченко @tyv (markup)</li>
<li>Ilya Kantor @iliakan (tutorial, code)</li>
<li>Yuri Tkachenko @tyv (markup)</li>
</ul>
The project exists for a long time, I might have missed someone. If you expect to find yourself in the list, but you're not -- please mail me at mk@javascript.ru.