up
This commit is contained in:
parent
aa521b9090
commit
d1a0659aba
13 changed files with 27 additions and 33 deletions
|
@ -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).
|
||||||
|
|
|
@ -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`.
|
||||||
|
|
||||||
|
|
|
@ -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">
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
|
@ -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]
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
|
@ -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.
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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- */
|
}
|
||||||
}
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,3 +1,3 @@
|
||||||
# Анимация
|
# Animation
|
||||||
|
|
||||||
CSS анимации. Контроль над ними из JavaScript. Анимации на чистом JavaScript.
|
CSS and JavaScript animations.
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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.
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue