fix
This commit is contained in:
parent
1fb7296f72
commit
e37d4ac498
6 changed files with 28 additions and 23 deletions
|
@ -63,7 +63,7 @@ Comments before and after scripts.
|
||||||
//--></script>
|
//--></script>
|
||||||
```
|
```
|
||||||
|
|
||||||
These comments were supposed to hide the code from an old browser that didn't know about a `<script>` tag. But all browsers born in the past 15+ years don't have any issues. It is only mentioned here, because it serves as a sign. If you see that somewhere -- that code is probably really old and not worth looking into.
|
These comments were supposed to hide the code from an old browser that didn't know about a `<script>` tag. But all browsers born in the past 15+ years don't have any issues. We mention it here, because such comments serve as a sign. If you see that somewhere -- that code is probably really old and not worth looking into.
|
||||||
|
|
||||||
|
|
||||||
## External scripts
|
## External scripts
|
||||||
|
@ -105,7 +105,7 @@ That saves traffic and makes pages faster.
|
||||||
```
|
```
|
||||||
|
|
||||||
````warn header="If `src` is set, the script content is ignored."
|
````warn header="If `src` is set, the script content is ignored."
|
||||||
A single `<script>` tag may not have both, `src` attribute and the code inside.
|
A single `<script>` tag may not have both `src` attribute and the code inside.
|
||||||
|
|
||||||
This won't work:
|
This won't work:
|
||||||
|
|
||||||
|
|
|
@ -2,9 +2,7 @@
|
||||||
|
|
||||||
This part of the tutorial aims to cover JavaScript "as is", without environment-specific tweaks.
|
This part of the tutorial aims to cover JavaScript "as is", without environment-specific tweaks.
|
||||||
|
|
||||||
But still we use a browser as the demo environment. So we should know at least few user-interface functions.
|
But still we use a browser as the demo environment. So we should know at least few user-interface functions. In this chapter we'll get familiar with the browser functions `alert`, `prompt` and `confirm`.
|
||||||
|
|
||||||
In this chapter we'll get familiar with the browser-specific functions `alert`, `prompt` and `confirm`.
|
|
||||||
|
|
||||||
[cut]
|
[cut]
|
||||||
|
|
||||||
|
|
|
@ -145,9 +145,7 @@ user.name = "Alice"; // Error
|
||||||
|
|
||||||
Now let's add a custom `toString` to `user`.
|
Now let's add a custom `toString` to `user`.
|
||||||
|
|
||||||
Normally, a built-in `toString` for objects is non-enumerable, it does not show up in `for..in`. But if we add `toString` of our own, then by default it shows up in `for..in`.
|
Normally, a built-in `toString` for objects is non-enumerable, it does not show up in `for..in`. But if we add `toString` of our own, then by default it shows up in `for..in`, like this:
|
||||||
|
|
||||||
...But if we don't like it, then we can set `enumerable:false`. Then it won't appear in `for..in` loop, just like the built-in one:
|
|
||||||
|
|
||||||
```js run
|
```js run
|
||||||
let user = {
|
let user = {
|
||||||
|
@ -159,6 +157,17 @@ let user = {
|
||||||
|
|
||||||
// By default, both our properties are listed:
|
// By default, both our properties are listed:
|
||||||
for(let key in user) alert(key); // name, toString
|
for(let key in user) alert(key); // name, toString
|
||||||
|
```
|
||||||
|
|
||||||
|
If we don't like it, then we can set `enumerable:false`. Then it won't appear in `for..in` loop, just like the built-in one:
|
||||||
|
|
||||||
|
```js run
|
||||||
|
let user = {
|
||||||
|
name: "John",
|
||||||
|
toString() {
|
||||||
|
return this.name;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
Object.defineProperty(user, "toString", {
|
Object.defineProperty(user, "toString", {
|
||||||
*!*
|
*!*
|
||||||
|
@ -167,7 +176,7 @@ Object.defineProperty(user, "toString", {
|
||||||
});
|
});
|
||||||
|
|
||||||
*!*
|
*!*
|
||||||
// Now toString disappears:
|
// Now our toString disappears:
|
||||||
*/!*
|
*/!*
|
||||||
for(let key in user) alert(key); // name
|
for(let key in user) alert(key); // name
|
||||||
```
|
```
|
||||||
|
@ -178,11 +187,9 @@ Non-enumerable properties are also excluded from `Object.keys`:
|
||||||
alert(Object.keys(user)); // name
|
alert(Object.keys(user)); // name
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Non-configurable
|
## Non-configurable
|
||||||
|
|
||||||
The non-configurable flag (`configurable:false`) is usually set for built-in objects and properties.
|
The non-configurable flag (`configurable:false`) is sometimes preset for built-in objects and properties.
|
||||||
|
|
||||||
A non-configurable property can not be deleted or altered with `defineProperty`.
|
A non-configurable property can not be deleted or altered with `defineProperty`.
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
let form = document.querySelector('form');
|
|
||||||
|
|
||||||
form.onclick = function(event) {
|
form.onclick = function(event) {
|
||||||
event.target.style.backgroundColor = 'yellow';
|
event.target.style.backgroundColor = 'yellow';
|
||||||
|
|
|
@ -8,7 +8,7 @@ Show the animation like on the picture below (click the plane):
|
||||||
|
|
||||||
[iframe src="solution" height=300]
|
[iframe src="solution" height=300]
|
||||||
|
|
||||||
- The picture grows on click from 40x24px to 400x240px.
|
- The picture grows on click from `40x24px` to `400x240px` (10 times larger).
|
||||||
- The animation takes 3 seconds.
|
- The animation takes 3 seconds.
|
||||||
- At the end output: "Done!".
|
- At the end output: "Done!".
|
||||||
- During the animation process, there may be more clicks. They shouldn't "break" anything.
|
- During the animation process, there may be more clicks on the plane. They shouldn't "break" anything.
|
||||||
|
|
|
@ -399,24 +399,25 @@ Here's an example with explanations:
|
||||||
</style>
|
</style>
|
||||||
```
|
```
|
||||||
|
|
||||||
There are many articles about `@keyframes` and a [detailed specification](https://drafts.csswg.org/css-animations/), so we won't go into more details here.
|
There are many articles about `@keyframes` and a [detailed specification](https://drafts.csswg.org/css-animations/).
|
||||||
|
|
||||||
Probably you won't need it often, unless everything is in the constant move on your sites.
|
Probably you won't need `@keyframes` often, unless everything is in the constant move on your sites.
|
||||||
|
|
||||||
## Summary
|
## Summary
|
||||||
|
|
||||||
CSS animations allow to smoothly (or not) animate changes to one or multiple CSS properties.
|
CSS animations allow to smoothly (or not) animate changes of one or multiple CSS properties.
|
||||||
|
|
||||||
They are good for most animation tasks. We're also able to use JavaScript for animations, the next chapter is devoted to that.
|
They are good for most animation tasks. We're also able to use JavaScript for animations, the next chapter is devoted to that.
|
||||||
|
|
||||||
Limitations of CSS animations compared to JavaScript animations:
|
Limitations of CSS animations compared to JavaScript animations:
|
||||||
|
|
||||||
```compare
|
```compare plus="CSS animations" minus="JavaScript animations"
|
||||||
- JavaScript animations are more flexible. They can implement any animation logic, like "explosion" of an element. We can create new elements in JavaScript for purposes of animation.
|
+ Simple things done simply.
|
||||||
+ Simple things done simple.
|
+ Fast and lightweight for CPU.
|
||||||
+ Fast and easy for CPU.
|
- JavaScript animations are flexible. They can implement any animation logic, like an "explosion" of an element.
|
||||||
|
- Not just property changes. We can create new elements in JavaScript for purposes of animation.
|
||||||
```
|
```
|
||||||
|
|
||||||
The vast majority of animations uses the described CSS properties. And maybe the `transitionend` event to bind some JavaScript after it.
|
The majority of animations can be implemented using CSS as described in this chapter. And `transitionend` event allows to run JavaScript after the animation, so it integrates fine with the code.
|
||||||
|
|
||||||
But in the next chapter we'll do some JavaScript animations to cover more complex cases.
|
But in the next chapter we'll do some JavaScript animations to cover more complex cases.
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue