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 `"/"`:
|
||||
|
||||
```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).
|
||||
|
|
|
@ -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`.
|
||||
|
||||
|
|
|
@ -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">
|
||||
```
|
||||
|
||||
|
|
|
@ -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]
|
||||
```
|
||||
|
||||
|
|
|
@ -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.
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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- */
|
||||
}
|
|
@ -23,7 +23,6 @@ let timer = setInterval(function() {
|
|||
```
|
||||
|
||||
The more complete example of the animation:
|
||||
Более полный пример кода анимации:
|
||||
|
||||
```js
|
||||
let start = Date.now(); // remember start time
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -1,3 +1,3 @@
|
|||
# Анимация
|
||||
# Animation
|
||||
|
||||
CSS анимации. Контроль над ними из JavaScript. Анимации на чистом JavaScript.
|
||||
CSS and JavaScript animations.
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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.
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue