This commit is contained in:
Ilya Kantor 2017-06-14 10:35:59 +03:00
parent 1fb7296f72
commit e37d4ac498
6 changed files with 28 additions and 23 deletions

View file

@ -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:

View file

@ -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]

View file

@ -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`.

View file

@ -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';

View file

@ -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.

View file

@ -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.