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 `"/"`: ...And the short one, using slashes `"/"`:
```js ```js
regexp = /pattern/; // no flags флагов regexp = /pattern/; // no flags
regexp = /pattern/gmi; // with flags g,m and i (to be covered soon) 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: There are only 5 of them in JavaScript:
`i` `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` `g`
: With this flag the search looks for all matches, without it -- only the first one (we'll see uses in the next chapter). : 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 ## 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: 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: The pattern assumes:
- `pattern:В`, - `pattern:V`,
- then *одну* of the letters `pattern:[oi]`, - then *one* of the letters `pattern:[oi]`,
- then `pattern:la`. - then `pattern:la`.
So there would be a match for `match:Vola` or `match:Vila`. 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: 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:[^0-9]` -- any character except a digit, the same as `\D`.
- `pattern:[^\s]` -- any non-space character, same as `\S`. - `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 str = '...<a href="link1" class="doc">... <a href="link2" class="doc">...';
let reg = /<a href=".*?" class="doc">/g; let reg = /<a href=".*?" class="doc">/g;
// Сработало! // Works!
alert( str.match(reg) ); // <a href="link1" class="doc">, <a href="link2" class="doc"> 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: For instance:
``` ```
[b]текст[/b] [b]text[/b]
[url]http://google.com[/url] [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] [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. 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> <script>
boat.onclick = function() { boat.onclick = function() {
this.onclick = null; // только первый клик сработает this.onclick = null; // only the first click should start the animation
let times = 1; let times = 1;
@ -40,4 +40,4 @@
</body> </body>
</html> </html>

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -6,8 +6,8 @@ The file lists people who made significant contributions to the project:
<li>Alexey Shisterov (tutorial)</li> <li>Alexey Shisterov (tutorial)</li>
<li>Anton Vernogor @smmurf (markup)</li> <li>Anton Vernogor @smmurf (markup)</li>
<li>Artem Beztsenny @bezart (design)</li> <li>Artem Beztsenny @bezart (design)</li>
<li>Илья Кантор @iliakan (tutorial, code)</li> <li>Ilya Kantor @iliakan (tutorial, code)</li>
<li>Юрий Ткаченко @tyv (markup)</li> <li>Yuri Tkachenko @tyv (markup)</li>
</ul> </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. 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.