📇 👨‍⚖️ 💊 表現力豊かなJavaScript：イベントの処理 👩🏻‍🏭 🍮 👋🏾

内容

あなたはあなたの心に力を持っていますが、外部の出来事には力がありません。 これを理解すると、あなたは力を得ます。
マーカスアウレリウス、瞑想。

一部のプログラムは、ユーザー入力、マウス、およびキーボードで動作します。そのような入力の発生時刻とデータのシーケンスは、事前に予測することはできません。これには、プログラムの実行順序を制御するために、すでによく知られているものとは異なるアプローチが必要です。

イベントハンドラー

キーボードのボタンが押されたかどうかを確認する唯一の方法が、ボタンの現在の状態を読み取ることであるインターフェースを想像してください。クリックに応答するには、ボタンの状態を常に読み取って、ボタンが放されるまでこの状態をキャッチできるようにする必要があります。押す瞬間をスキップできるため、プロセッサ時間を消費する他の計算を行うことは危険です。

したがって、入力はプリミティブデバイスで処理されました。ハードウェアまたはOSがボタンが押されたことを認識し、それをキューに転送した場合、前進します。その後、プログラムは定期的に新しいイベントのキューをチェックし、キューにあるものに応答できます。

もちろん、ボタンを押してからプログラムがそれに気付いて反応するまでの時間が長いと、このプログラムがゆっくり実行されていると認識されるため、彼女はチェックすることを忘れないでください。このアプローチはめったに使用されません。

より良いオプションは、イベントが発生したときにコードがイベントに応答できるようにする一種の中間システムです。ブラウザーでは、特定のイベントのハンドラーとして関数を登録することにより、これを行うことができます。

<p>     .</p> <script> addEventListener("click", function() { console.log("!"); }); </script>

addEventListener関数は、2番目の引数を、最初の引数で説明されているイベントが発生したときに呼び出される関数として登録します。

イベントとDOMノード

各ブラウザーイベントハンドラーはコンテキストで登録されます。ブラウザではグローバルスコープがウィンドウオブジェクトであるため、addEventListenerを呼び出すときは、ウィンドウ全体のメソッドとして呼び出します。各DOM要素には独自のaddEventListenerメソッドがあり、この要素からイベントをリッスンできます。

 <button>  .</button> <p>   .</p> <script> var button = document.querySelector("button"); button.addEventListener("click", function() { console.log(" ."); }); </script>

この例では、ボタンのDOMノードにハンドラーを割り当てます。ボタンを押すとハンドラーが起動し、ドキュメントの他の部分をクリックしても起動しません。

onclick属性をノードに割り当てることも同様に機能します。ただし、ノードにはonclick属性が1つしかありません。つまり、この方法では1つのハンドラーしか登録できません。 addEventListenerメソッドを使用すると、任意の数のハンドラーを追加できるため、以前にランダムに割り当てられたハンドラーを置き換えることはありません。

addEventListenerと同じ引数で呼び出されたremoveEventListenerメソッドは、ハンドラーを削除します。

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

これを行うには、関数に名前を付け（この場合は1回）、addEventListenerとremoveEventListenerの両方に渡すことができるようにします。

イベントオブジェクト

例では、引数がハンドラー関数（イベントオブジェクト）に渡されるという事実を無視しました。イベントに関する追加情報を保存します。たとえば、クリックされたマウスボタンを知る必要がある場合、このオブジェクトのどのプロパティを参照できます。

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

オブジェクトに保存される情報は、イベントの種類ごとに異なります。これらのタイプについては後で説明します。タイプオブジェクトのプロパティには、常にイベントを説明する文字列が含まれます（たとえば、「クリック」または「マウス」）。

伝播

子ノードを持つノードに登録されたイベントは、子に発生したイベントを受け取ります。段落内のボタンをクリックすると、段落のイベントハンドラーがクリックイベントを受け取ります。

段落とボタンの両方にハンドラーがある場合、より具体的なものが最初に起動します。つまり、ボタンハンドラーです。イベントは、それが発生したノードからその親、さらにドキュメントのルートまで外側に広がります。すべての中間ノードのすべてのハンドラーを処理した後、イベントに応答するキューはウィンドウ自体に到達します。

ハンドラはいつでも、イベントオブジェクトのstopPropagationメソッドを呼び出して、「上位」ノードがそれを受け取らないようにすることができます。これは、別のクリック可能な要素内にボタンがあり、ボタンをクリックして外部要素の動作をアクティブにしたくない場合に役立ちます。

次の例では、ボタンと周囲の段落の両方に「mousedown」ハンドラーを登録します。右クリックすると、ボタンハンドラーはstopPropagationを呼び出し、段落ハンドラーが開始されないようにします。別のボタンをクリックすると、両方のハンドラーが起動します。

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

ほとんどのイベントオブジェクトには、処理を開始したノードを参照するターゲットプロパティがあります。不要なノードからの何かを処理していないことを確認するために使用できます。

ターゲットプロパティを使用して、特定の種類のイベントの処理を拡張することもできます。たとえば、ボタンの長いリストを含むノードがある場合、ノードのイベントハンドラーを1つ登録し、各ボタンのハンドラーを個別に登録するのではなく、ボタンがクリックされたかどうかを調べる方が便利です。

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

デフォルトのアクション

多くのイベントにはデフォルトのアクションがあります。リンクをクリックすると、リンクをたどります。下矢印をクリックすると、ブラウザはページを下にスクロールします。右クリックすると、コンテキストメニューが表示されます。などなど。

ほとんどのタイプのイベントでは、デフォルトアクションが起動する前にイベントハンドラーが呼び出されます。ハンドラーがこのアクションを発生させたくない場合（多くの場合、既にアクションを処理しているため）、イベントオブジェクトのpreventDefaultメソッドを呼び出すことができます。

これを使用して、独自のキーボードショートカットまたはコンテキストメニューを作成できます。また、使い慣れたユーザーインターフェイスを壊すためにも使用できます。たとえば、ここにあなたがたどることができないリンクがあります。

 <a href="https://developer.mozilla.org/">MDN</a> <script> var link = document.querySelector("a"); link.addEventListener("click", function(event) { console.log("."); event.preventDefault(); }); </script>

これをしないでください-非常に深刻な理由がない限り！ページのユーザーは、アクションの予期しない結果に遭遇すると非常に不快になります。ブラウザによっては、一部のイベントをインターセプトできません。 Chromeでは、現在のブックマークを閉じるためのホットキー（Ctrl-WまたはCommand-W）を処理できません。

キーボードボタンからのイベント

キーボードのボタンが押されると、ブラウザーはkeydownイベントを発生させます。リリースされると、キーアップイベントが発生します。

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

名前にもかかわらず、「キーダウン」はボタンが押されたときだけでなく発生します。ボタンを押したままにすると、キーからの2番目の信号が到着するたびにイベントが発生します（キーリピート）。たとえば、矢印付きのボタンを押したときにゲームキャラクターの速度を上げ、ボタンを放したときに速度を下げる必要がある場合、ボタンからの信号を繰り返すたびに速度を上げないように注意する必要があります。そうしないと、速度が非常に速くなります。

この例では、イベントオブジェクトのkeyCodeプロパティに言及しています。したがって、どのボタンが押されたか、離されたかを調べることができます。残念ながら、数値コードを目的のボタンに変換する方法は必ずしも明らかではありません。

数字と文字の場合、コードはボタンに表示される大文字に関連付けられたUnicode文字コードになります。文字列メソッドcharCodeAtはこのコードを提供します。

 console.log("Violet".charCodeAt(0)); // → 86 console.log("1".charCodeAt(0)); // → 49

他のボタンには予測不可能なコードがあります。それらを見つける最良の方法は実験的です。キーコードを書き込むハンドラーを登録し、目的のボタンを押します。

Shift、Ctrl、Alt、Meta（Macのコマンド）などの修飾ボタンは、通常のボタンと同様にイベントを作成します。ただし、キーボードショートカットを解析する場合、キーボードイベントおよびマウスイベントのshiftKey、ctrlKey、altKey、およびmetaKeyプロパティを介して修飾子が押されたかどうかを確認できます。

 <p> Ctrl-Space  .</p> <script> addEventListener("keydown", function(event) { if (event.keyCode == 32 && event.ctrlKey) console.log("!"); }); </script>

「キーダウン」および「キーアップ」イベントは、ボタンを物理的に押すことに関する情報を提供します。また、ユーザーが入力するテキストを知る必要がある場合はどうなりますか？ボタンを押して作成するのは不便です。これを行うために、「keydown」の直後に発生する「keypress」イベントがあります（キーがまだ保持されている場合は「keydown」とともに繰り返されます）が、文字を発行するボタンのみです。 charCodeイベントオブジェクトプロパティには、Unicodeコードとして解釈できるコードが含まれています。 String.fromCharCode関数を使用して、コードを単一の文字列に変換できます。

 <p>     .</p> <script> addEventListener("keypress", function(event) { console.log(String.fromCharCode(event.charCode)); }); </script>

ノードは、キーストローク中に入力フォーカスがあった場所に応じて、キーストロークイベントのソースになります。通常のノードは（tabindex属性を設定しない限り）入力フォーカスを取得できませんが、リンク、ボタン、フォームフィールドなどは取得できます。第18章の入力フィールドに戻ります。フォーカスがない場合、document.bodyはターゲットイベントノードとして機能します。

マウスボタン

マウスをクリックすると、いくつかのイベントもトリガーされます。 mousedownイベントとmouseupイベントはkeydownイベントとkeyupイベントに似ており、ボタンが押されたときと離されたときに発生します。イベントは、マウスカーソルが置かれたDOMノードで発生します。

「マウスアップ」イベントの後、ヒットしてリリースされたノードで「クリック」イベントがトリガーされます。たとえば、ある段落上のボタンをクリックしてから、マウスを別の段落に移動してボタンを離すと、これらの両方の段落を含む要素で「クリック」イベントが発生します。

2回のクリックが次々と発生する場合、2回目の「クリック」の実行直後に「dblclick」（ダブルクリック）イベントが発生します。

マウスイベントが発生した場所の正確な座標を取得するには、pageXプロパティとpageYプロパティを参照します。これらのプロパティには、左上隅を基準としたピクセル単位の座標が含まれます。

この例では、プリミティブな描画プログラムが作成されます。ドキュメントをクリックするたびに、カーソルの下にポイントが追加されます。第19章では、あまり原始的でない描画プログラムを紹介します。

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

clientXおよびclientYプロパティはpageXおよびpageYに似ていますが、現在表示されているドキュメントの部分に相対的な座標を提供します（ドキュメントがスクロールされている場合）。これは、マウスの座標をgetBoundingClientRectが返す座標と比較するときに便利です。その戻り値は、ドキュメントの表示部分の相対座標にも関連しています。

マウスの動き

マウスカーソルを移動するたびに、mousemoveイベントが発生します。マウスの位置を追跡するために使用できます。通常、これはマウスでオブジェクトをドラッグすることに関連する機能を作成するときに必要です。

たとえば、次のプログラムはバーを表示し、左右に移動すると幅が増減するようにイベント処理を設定します。

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

「mousemove」ハンドラーはウィンドウ全体に登録されることに注意してください。マウスがストリップを超えた場合でも、ボタンを放したときにサイズを更新して停止する必要があります。

カーソルがノードに出入りすると、「マウスオーバー」または「マウスアウト」イベントが発生します。特に、カーソルをこの要素の上に置いたときにマウスを保持したり、何かのスタイルを表示または変更したりする効果を作成するために使用できます。

残念ながら、このような効果の作成は、mouseoverイベントでトリガーし、mouseoutイベントで終了することに限定されません。マウスがノードからその子ノードに移動すると、一般的に言えば、マウスはそれを離れませんでしたが、マウスアウトイベントが親ノードで発生します。さらに悪いことに、これらのイベントは他のすべてのイベントと同じように伝播するため、ハンドラーを登録したノードの子の1つからカーソルが離れると、「マウスアウト」が発生します。

この問題を回避するには、イベントオブジェクトのrelatedTargetプロパティを使用します。 mouseoverイベントが発生したときにマウスがどのノードの前にあったか、mouseoutイベントが発生したときにどの要素にジャンプするかを示します。 relatedTargetがターゲットノードの外側にある場合にのみ、エフェクトを変更する必要があります。この場合にのみ、イベントは実際にノードへの遷移（またはノードからの離脱）を表します。

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

isInside関数は、ドキュメントの最上部に到達するまで（そしてノードがnullになるまで）ノードのすべての祖先を反復するか、指定された親を見つけられません。

以下に示すように、ホバーと呼ばれるCSS擬似セレクターを使用すると、このような効果をはるかに簡単に達成できることを追加する必要があります。ただし、ホバー時にノードのスタイルを変更するよりも複雑な操作が必要な場合は、mouseoverイベントとmouseoutイベントでトリックを使用する必要があります。

 <style> p:hover { color: red } </style> <p>    <strong> </strong>.</p>

スクロールイベント

アイテムがスクロールすると、「スクロール」イベントが発生します。これは多くの場合に使用されます。たとえば、ユーザーが見ているものを見つける（画面に表示されないアニメーションを停止する、または悪意のある本部に秘密のスパイレポートを送信する）、または進行状況を視覚的に示す（コンテンツの一部を強調表示する、ページ番号を表示する）ために使用されます。

この例では、ドキュメントの右上隅にプロセスインジケータが作成され、アイテムを下にスクロールすると塗りつぶされます。

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

固定要素の位置は、絶対要素とほぼ同じことを意味しますが、ドキュメントの残りの部分とともに要素がスクロールするのを防ぎます。ポイントは、インジケーターを隅に残すことです。内部には、現在の進行状況を反映するためにサイズ変更される別の要素があります。要素のサイズがインジケーター全体のサイズに対して変化するように、pxではなくパーセンテージを使用して幅を設定します。

グローバル変数innerHeightはウィンドウの高さを指定します。これは、スクロール可能な要素の全高から差し引く必要があります。要素の最後に到達すると、スクロールが終了します。（innerHeightに加えて、変数innerWidthもあります）。 pageYOffsetの現在のスクロール位置を最大スクロール位置で除算し、100倍すると、インジケーターのパーセンテージが得られます。

preventDefaultを呼び出しても、スクロールは防止されません。イベントハンドラは、スクロールが発生した後に呼び出されます。

フォーカスイベント

要素がフォーカスを受け取ると、ブラウザは「focus」イベントを発生させます。フォーカスを失うと、「ぼかし」イベントが発生します。

以前のイベントとは異なり、これら2つは対象外です。親ノードのハンドラーは、子によるフォーカスの受信または喪失について通知されません。

次の例は、現在フォーカスがあるテキストフィールドのツールチップテキストを示しています。

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

ユーザーがドキュメントを表示するブラウザーのブックマークまたはブラウザーウィンドウからフォーカスを選択または削除すると、ウィンドウオブジェクトはフォーカスイベントとブラーイベントを受け取ります。

アップロードイベント

ページの読み込みが完了すると、ウィンドウオブジェクトと本文オブジェクトで「load」イベントが発生します。これは、完全に構築されたドキュメントを必要とする初期化アクティビティを計画するためによく使用されます。タグの内容を思い出してください

   ,    .     – ,    -     ,     . 
 
       ,    ,    “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>

表現力豊かなJavaScript：イベントの処理

内容