Expressive JavaScript: Event handling
Content
- Introduction
- Values, Types and Operators
- Program structure
- Functions
- Data Structures: Objects and Arrays
- Higher order functions
- The secret life of objects
- Project: e-life
- Search and error handling
- Regular expressions
- Modules
- Project: programming language
- Javascript and browser
- Document Object Model
- Event handling
- Project: Platform Game
- Drawing on canvas
- HTTP
- Forms and form fields
- Project: Paint
- Node.js
- Project: website sharing experience
- Sandbox for code
You have power over your mind, but not over external events. When you understand this, you will gain strength.
Marcus Aurelius, "Meditation."
Some programs work with user input, mouse and keyboard. The time of occurrence of such input and the sequence of data cannot be predicted in advance. This requires a different approach to control over the order of program execution than the one already familiar to us.
')
Event handlers
Imagine an interface in which the only way to find out if you pressed a keyboard button would be to read the current state of the button. In order to react to pressing, you would have to constantly read the states of the buttons so that you can catch this state until the button is released. It would be dangerous to carry out other calculations, which take up CPU time, since you could miss the moment of pressing.
Thus, the input was processed on primitive devices. A step forward would be if the hardware or the operating system would notice the press of a button and transfer it to the queue. Then the program could periodically check the queue for new events and respond to what is in the queue.
Of course, she should be aware of the check, and do it often enough, because the presence of a long period of time between pressing the button and when the program notices and responds to it leads to the perception of this program as slow. This approach is rarely used.
The better option is a kind of intermediate system that allows the code to react to events at the moment they occur. Browsers allow you to do this by registering functions as handlers for specified events.
<p> .</p> <script> addEventListener("click", function() { console.log("!"); }); </script> The addEventListener function registers its second argument as a function that is called when the event described in the first argument happens.
Events and DOM nodes
Each browser event handler is registered in context. When you call addEventListener, you call it as a method of the whole window, because in the browser the global scope is the window object. Each DOM element has its own addEventListener method, which allows listening to events from this element.
<button> .</button> <p> .</p> <script> var button = document.querySelector("button"); button.addEventListener("click", function() { console.log(" ."); }); </script> The example assigns a handler to the DOM node of the button. Pressing the button starts the handler, and clicking on other parts of the document does not start.
Assigning the onclick attribute to a node works similar. But the node has only one onclick attribute, so in this way you can register only one handler. The addEventListener method allows you to add any number of handlers, so that you do not replace a previously assigned handler by accident.
The removeEventListener method, called with the same arguments as addEventListener, removes the handler.
<button>Act-once button</button> <script> var button = document.querySelector("button"); function once() { console.log("Done."); button.removeEventListener("click", once); } button.addEventListener("click", once); </script> To do this, we give the function a name (in this case, once), so that it can be passed to both addEventListener and removeEventListener.
Event objects
In the examples, we ignored the fact that the handler function is passed an argument - the event object. It contains additional information about the event. For example, if you need to know which mouse button was pressed, we can refer to the which property of this object.
<button> , !</button> <script> var button = document.querySelector("button"); button.addEventListener("mousedown", function(event) { if (event.which == 1) console.log(""); else if (event.which == 2) console.log(""); else if (event.which == 3) console.log(""); }); </script> The information stored in the object is different for each type of event. We will discuss these types later. The property of the type object always contains a string describing the event (for example, “click” or “mousedown”).
Propagation
Events registered on nodes that have child nodes will receive some events that happened to their children. If you click on a button inside a paragraph, the paragraph's event handlers will receive a click event.
If both the paragraph and the button have handlers, the more specific one will start first — that is, the button handler. The event as if spreads outside, from the node where it happened, to its parent and further to the document root. After all the handlers of all intermediate nodes have been processed, the queue to react to the event reaches the window itself.
At any time, the handler can call the event object's stopPropagation method so that the “higher” nodes do not receive it. This can be useful when you have a button inside another clickable element, and you do not want button clicks to activate the behavior of an external element.
The following example registers the "mousedown" handlers both on the button and on the surrounding paragraph. When you right-click a button handler, it causes stopPropagation, which prevents the paragraph handler from starting. When you click another button, both handlers are launched.
<p> <button> </button>.</p> <script> var para = document.querySelector("p"); var button = document.querySelector("button"); para.addEventListener("mousedown", function() { console.log(" ."); }); button.addEventListener("mousedown", function(event) { console.log(" ."); if (event.which == 3) event.stopPropagation(); }); </script> Most event objects have a target property that refers to the node that started processing. It can be used to check that you are not processing something that came from an unnecessary node.
It is also possible to use the target property to propagate processing of a specific type of event. For example, if you have a node that contains a long list of buttons, it would be more convenient to register one event handler for the node, and find out if it pressed the button instead of registering the handlers of each button separately.
<button>A</button> <button>B</button> <button>C</button> <script> document.body.addEventListener("click", function(event) { if (event.target.nodeName == "BUTTON") console.log("Clicked", event.target.textContent); }); </script> Default actions
Many events have default actions. When you click on the link you will go to it. When you click on the down arrow, the browser scrolls down the page. On the right mouse click you will see the context menu. And so on.
For most event types, event handlers are called before the default action is triggered. If the handler does not want this action to take place (often because it has already processed it), it can call the preventDefault method of the event object.
This can be used to create your own shortcut keys or context menu. It can also be used to break the user’s usual interface. For example, here is a link that can not be passed.
<a href="https://developer.mozilla.org/">MDN</a> <script> var link = document.querySelector("a"); link.addEventListener("click", function(event) { console.log("."); event.preventDefault(); }); </script> Do not do this - if you do not have a very good reason! Users of your page will be very uncomfortable when they are faced with unexpected results of their actions. Depending on the browser, some events cannot be intercepted. In Chrome, you cannot handle the hot keys for closing the current tab (Ctrl-W or Command-W).
Events from the keyboard buttons
When you press a button on the keyboard, the browser launches the keydown event. When it is released, the keyup event occurs.
<p> V .</p> <script> addEventListener("keydown", function(event) { if (event.keyCode == 86) document.body.style.background = "violet"; }); addEventListener("keyup", function(event) { if (event.keyCode == 86) document.body.style.background = ""; }); </script> Despite the name, “keydown” occurs not only when the button is pressed. If you press and hold the button, the event will occur every time a repeated signal comes from the key (key repeat). If you, for example, need to increase the speed of the game character when the button with the arrow is pressed, and reduce it when released, you must be careful not to increase the speed each time you repeat the signal from the button, otherwise the speed will increase very much.
In the example, the keyCode property of the event object is mentioned. This way you can find out which button is pressed or released. Unfortunately, it is not always obvious how to convert numeric codes to the desired button.
For numbers and letters, the code will be the Unicode character code associated with the uppercase character depicted on the button. The string method charCodeAt gives us this code.
console.log("Violet".charCodeAt(0)); // → 86 console.log("1".charCodeAt(0)); // → 49 Other buttons codes are less predictable. The best way to figure them out is experimental. Register a handler that writes the key codes and press the desired button.
Modifier buttons such as Shift, Ctrl, Alt, and Meta (Command on Mac) create events, just like normal buttons. But when parsing key combinations, you can find out whether the modifiers were pressed, using the shiftKey, ctrlKey, altKey, and metaKey properties of the keyboard and mouse.
<p> Ctrl-Space .</p> <script> addEventListener("keydown", function(event) { if (event.keyCode == 32 && event.ctrlKey) console.log("!"); }); </script> The “keydown” and “keyup” events provide information about the physical pressing of buttons. And if you need to know what text the user enters? To create it from button presses is inconvenient. To do this, there is a keypress event that occurs immediately after a keydown (and repeated with a keydown if the key continues to be held), but only for those buttons that give out symbols. The charCode event object property contains code that can be interpreted as Unicode code. We can use the function String.fromCharCode to turn the code into a string of one character.
<p> .</p> <script> addEventListener("keypress", function(event) { console.log(String.fromCharCode(event.charCode)); }); </script> The source of the key press event is the node, depending on where the input focus was at the time of the push. Ordinary nodes cannot receive input focus (unless you set the tabindex attribute to them), but such as links, buttons, and form fields can. We will return to the input fields in chapter 18. When nothing has focus, document.body works as the target event node.
Mouse buttons
Pressing the mouse button also triggers several events. The “mousedown” and “mouseup” events are similar to “keydown” and “keyup”, and are triggered when the button is pressed and released. Events occur at those DOM nodes above which the mouse cursor was located.
After the “mouseup” event on the node, on which both the press and the button are released, the “click” event is triggered. For example, if I pressed a button above one paragraph, then moved the mouse to another paragraph and released the button, the “click” event will happen at the element that contained both of these paragraphs.
If two clicks occur quickly enough one after the other, the dblclick event (double-click) is triggered, immediately after the second launch of the “click”.
For the exact coordinates of the place where the mouse event occurred, refer to the pageX and pageY properties — they contain coordinates in pixels relative to the upper left corner.
The example creates a primitive drawing program. Each time you click on a document, it adds a point under your cursor. In Chapter 19, a less primitive drawing program will be introduced.
<style> body { height: 200px; background: beige; } .dot { height: 8px; width: 8px; border-radius: 4px; /* */ background: blue; position: absolute; } </style> <script> addEventListener("click", function(event) { var dot = document.createElement("div"); dot.className = "dot"; dot.style.left = (event.pageX - 4) + "px"; dot.style.top = (event.pageY - 4) + "px"; document.body.appendChild(dot); }); </script> The clientX and clientY properties are similar to pageX and pageY, but give coordinates relative to the part of the document that is visible now (if the document was scrolled). This is useful when comparing mouse coordinates with coordinates that getBoundingClientRect returns — its return is also related to the relative coordinates of the visible part of the document.
Mouse movement
Each time the mouse cursor is shifted, a “mousemove” event is triggered. It can be used to track the position of the mouse. Usually this is necessary when creating some kind of functionality associated with dragging objects with the mouse.
For example, the following program displays a strip and sets event processing so that moving left and right reduces or increases its width.
<p> :</p> <div style="background: orange; width: 60px; height: 20px"> </div> <script> var lastX; // var rect = document.querySelector("div"); rect.addEventListener("mousedown", function(event) { if (event.which == 1) { lastX = event.pageX; addEventListener("mousemove", moved); event.preventDefault(); // } }); function moved(event) { if (event.which != 1) { removeEventListener("mousemove", moved); } else { var dist = event.pageX - lastX; var newWidth = Math.max(10, rect.offsetWidth + dist); rect.style.width = newWidth + "px"; lastX = event.pageX; } } </script> Note that the “mousemove” handler is registered to the entire window. Even if the mouse goes beyond the strip, we need to update its size and stop it when the button is released.
When the cursor hits a node and leaves it, “mouseover” or “mouseout” events occur. They can be used, among other things, to create effects of holding the mouse, showing or changing the style of something when the cursor is over this element.
Unfortunately, the creation of such an effect is not limited to running it at the “mouseover” event and ending at the “mouseout” event. When the mouse moves from the node to its child nodes, a “mouseout” event occurs on the parent node, although the mouse, generally speaking, did not leave it. Worse, these events spread like all the others, so you still get a “mouseout” when the cursor leaves one of the child nodes of the node where you registered the handler.
To bypass the problem, you can use the relatedTarget property of the event object. It tells which node the mouse was on before when the “mouseover” event occurred, and to which element it jumps at the “mouseout” event. We need to change the effect only when relatedTarget is outside our target node. Only in this case, the event actually represents a transition to our site (or departure from the site).
<p> <strong> </strong>.</p> <script> var para = document.querySelector("p"); function isInside(node, target) { for (; node != null; node = node.parentNode) if (node == target) return true; } para.addEventListener("mouseover", function(event) { if (!isInside(event.relatedTarget, para)) para.style.color = "red"; }); para.addEventListener("mouseout", function(event) { if (!isInside(event.relatedTarget, para)) para.style.color = ""; }); </script> The isInside function iterates over all ancestors of a node until it reaches the top of the document (and then the node is null), or it does not find the specified parent.
I have to add that this effect is much easier to achieve through a CSS pseudo-selector called: hover, as shown below. But when, when you hover, you need to do something more complicated than changing the style of the node, you have to use the trick with the events "mouseover" and "mouseout".
<style> p:hover { color: red } </style> <p> <strong> </strong>.</p> Scroll events
When the item scrolls, the “scroll” event is fired. This is used in many cases, for example, to find out what the user is looking at (to stop an animation that is not on the screen, or send secret spy reports to your villainous headquarters), or to visually demonstrate progress (highlighting some of the content or showing the page number).
In the example, a process indicator is created in the upper right corner of the document, which fills as the element scrolls down.
<style> .progress { border: 1px solid blue; width: 100px; position: fixed; top: 10px; right: 10px; } .progress > div { height: 12px; background: blue; width: 0%; } body { height: 2000px; } </style> <div class="progress"><div></div></div> <p>Scroll me...</p> <script> var bar = document.querySelector(".progress div"); addEventListener("scroll", function() { var max = document.body.scrollHeight - innerHeight; var percent = (pageYOffset / max) * 100; bar.style.width = percent + "%"; }); </script> The position of the fixed element means almost the same as absolute, but also prevents the element from scrolling along with the rest of the document. The point is to leave our indicator in the corner. Inside it is another element that changes size, reflecting the current progress. We use percentages instead of px to set the width so that the size of the element changes relative to the size of the entire indicator.
The global variable innerHeight gives the height of the window, which must be subtracted from the full height of the scrollable element - when the end of the element is reached, the scrolling ends. (Also in addition to innerHeight there is a variable innerWidth). Dividing the current scrolling position of pageYOffset by the maximum scrolling position, and multiplying by 100, we got a percentage for the indicator.
Calling preventDefault does not prevent scrolling. The event handler is called after the scrolling has happened.
Focus events
When an element receives focus, the browser fires a “focus” event. When it loses focus, a “blur” event is fired.
Unlike previous events, these two do not apply. The handler of the parent node is not notified of the receipt or loss of focus by the child.
The following example shows the hint text for the text field that currently has focus.
<p>: <input type="text" data-help=" "></p> <p>: <input type="text" data-help=" "></p> <p id="help"></p> <script> var help = document.querySelector("#help"); var fields = document.querySelectorAll("input"); for (var i = 0; i < fields.length; i++) { fields[i].addEventListener("focus", function(event) { var text = event.target.getAttribute("data-help"); help.textContent = text; }); fields[i].addEventListener("blur", function(event) { help.textContent = ""; }); } </script> The window object receives focus and blur events when the user selects or removes focus from the browser’s tab or browser window that shows the document.
Boot event
When the page loading ends, the “load” event is fired on the window and body objects. This is often used to plan initialization actions that require a fully constructed document. Recall that the contents of the tags
, . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script> , . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script>
, . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script>, . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script> , . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script>, . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script>, . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script>
, . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script>, . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script> , . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script>, . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script> , . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script>, . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script> , . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script>, . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script>, . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script>
, . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script>, . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script> , . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script>, . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script> , . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script>, . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script>, . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script>
, . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script>, . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script>, . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script>
, . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script>, . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script>, . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script>
, . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script>, . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script> , . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script>, . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script>, . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script>
, . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script>, . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script> , . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script>, . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script>, . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script>
, . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script>, . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script> , . – , - , .
, , “load”, , . , .
(, ), "beforeunload". – . , , preventDefault. . , , . , , , , .
. - . – . 13 requestAnimationFrame, . .
, , . , . , . , , .
. , . , .
, JavaScript , . - , , « » (web worker) – JavaScript, , .
, code/squareworker.js:
addEventListener("message", function(event) { postMessage(event.data * event.data); });
, – , , . «», , .
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
postMessage , “message” . , , Worker, , , – , .
setTimeout requestAnimationFrame. . , . :
<script> document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000); </script>
. , , setTimeout, clearTimeout.
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
cancelAnimationFrame , clearTimeout – , requestAnimationFrame, ( ).
, setInterval clearInterval , X .
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
(debouncing)
(, "mousemove" "scroll"). «», , .
- , setTimeout, , . « » . .
-, , . , , . , . , , (, ), .
<textarea> -...</textarea> <script> var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log(" ."); }, 500); }); </script>
undefined clearTimeout, , , . , , .
, , , , . , "mousemove", , 250 .
<script> function displayCoords(event) { document.body.textContent = " " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } }); </script>
, . addEventListener.
("keydown", "focus", ). DOM, , .
. , (stopPropagation) (preventDefault).
"keydown", "keypress" "keyup". "mousedown", "mouseup" "click". "mousemove", "mouseenter" "mouseout".
“scroll”, "focus" "blur". , window “load”.
. .
1928 2013 Q, W X . – , .
, , . .
<input type="text"> <script> var field = document.querySelector("input"); // Your code here. </script>
JavaScript, , . « » - , .
, . , . .
. , . – , , "mousemove".
<style> .trail { /* className , */ position: absolute; height: 6px; width: 6px; border-radius: 3px; background: teal; } body { height: 300px; } </style> <script> // . </script>
. , .
. asTabs, DOM, , . , , , data-tabname. , , ( display style none), .
, , .
<div id="wrapper"> <div data-tabname="one"> </div> <div data-tabname="two"> </div> <div data-tabname="three"> </div> </div> <script> function asTabs(node) { // . } asTabs(document.querySelector("#wrapper")); </script>Source: https://habr.com/ru/post/244041/
All Articles