Expressive JavaScript: Forms and Form Fields

Content

• Introduction
• Values, Types and Operators
• Program structure
• Functions
• Data Structures: Objects and Arrays
• Higher order functions
• The secret life of objects
• Project: e-life
• Search and error handling
• Regular expressions
• Modules
• Project: programming language
• Javascript and browser
• Document Object Model
• Event handling
• Project: Platform Game
• Drawing on canvas
• HTTP
• Forms and form fields
• Project: Paint
• Node.js
• Project: website sharing experience
• Sandbox for code

I am now a scholarly scholar

I will win your trust by service

Well you tell me the receipt of debt

So that I do not doubt the payment.



Mephistopheles, Goethe's Faust



')

Forms were briefly introduced in the previous chapter as a method of transmitting user input via HTTP. They were developed on the web before the advent of JavaScript, with the expectation that interaction with the server takes place when moving to another page.



But their elements are parts of the DOM, like the rest of the page, and the DOM elements representing the form fields support several properties and events that other elements do not have. This makes it possible to view and manage input fields from JavaScript programs and add functionality to classic forms or use forms and fields as the basis for building an application.

Fields

A web form consists of any number of input fields surrounded by a tag.

 . HTML    ,      /        .          ,      . 
    

      
      
      
    

   
    

      
      
      
    

         .   type     .    : 
    

      
      
      
    

   
    

      
      
      
    

   text      
    

      
      
      
    

   password  ,  ,    
    

      
      
      
    

   checkbox  / 
    

      
      
      
    

   radio         
    

      
      
      
    

   file        
    

      
      
      
    

   
    

      
      
      
    

           .       .         (      ),     ,   JavaScript,           submit. 
    

      
      
      
    

   
    

      
      
      
    

   <p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p> 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript        .       . 
    

      
      
      
    

   
    

      
      
      
    

            .       ,           value. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea>    </textarea> 
    

      
      
      
    

   
    

      
      
      
    

         ,        . 
    

      
      
      
    

   <select> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

      ,   “change”. 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

         HTML,       .          , ..    . 
    

      
      
      
    

   
    

      
      
      
    

        ,      ,      .   -   .  ,     ,  ,   ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

      JavaScript   focus  blur.      DOM,    ,    .  document.activeElement   ,  . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script> 
    

      
      
      
    

   
    

      
      
      
    

      ,       -   .   JavaScript        ,   HTML    autofocus,      ,      .           ,      - . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" autofocus> 
    

      
      
      
    

   
    

      
      
      
    

           Tab.         tabindex.            OK,  ,      help. 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button> 
    

      
      
      
    

   
    

      
      
      
    

    ,    HTML   .   tabindex  ,      . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

        disabled,         DOM. 
    

      
      
      
    

   
    

      
      
      
    

   <button>   </button> <button disabled>  </button> 
    

      
      
      
    

   
    

      
      
      
    

          ,     ,     . 
    

      
      
      
    

   
    

      
      
      
    

              ,          ,      .   ,          ,      . 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

    ,    ,    DOM   form,     .  ,   ,   elements,    . 
    

      
      
      
    

   
    

      
      
      
    

    name  ,          .             elements,     ,    (   ),   map (   ). 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script> 
    

      
      
      
    

   
    

      
      
      
    

      type  submit    .   Enter       . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,     action,   GET  POST .      “submit”.     JavaScript,       ,    event preventDefault. 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     “submit”    .    ,             .               ,   XMLHttpRequest        . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

         text  password,    ,   .    DOM   value,          .       . 
    

      
      
      
    

   
    

      
      
      
    

      selectionStart  selectionEnd        .    ,   ,    . , 0   , 10 ,     10- .    ,    ,       .       . 
    

      
      
      
    

   
    

      
      
      
    

    , ,      Khasekhemwy,      .      ,    F2   “ Khasekhemwy”. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script> 
    

      
      
      
    

   
    

      
      
      
    

    replaceSelection      ,        ,     . 
    

      
      
      
    

   
    

      
      
      
    

    “change”           .      ,     .           “input”,       ,        . 
    

      
      
      
    

   
    

      
      
      
    

           ,     . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

     –   .         checked,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="checkbox" id="purple"> <label for="purple">  </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

            .  for    id .    label   ,       –     . 
    

      
      
      
    

   
    

      
      
      
    

      ,          ,         . 
    

      
      
      
    

   
    

      
      
      
    

   : <input type="radio" name="color" value="mediumpurple">  <input type="radio" name="color" value="lightgreen">  <input type="radio" name="color" value="lightblue">  <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script> 
    

      
      
      
    

   
    

      
      
      
    

    document.getElementsByName       name.    (   for,   forEach,     –   )       . ,       target,   ,   .       –       ,           ,   . 
    

      
      
      
    

   
    

      
      
      
    

    select 
    

      
      
      
    

    select    –       .        ,      . 
    

      
      
      
    

   
    

      
      
      
    

     select  ,     ,   .    multiple      ,   . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

                ,      . 
    

      
      
      
    

   
    

      
      
      
    

    size      ,    –        .  ,  size 3,     ,  ,    multiple. 
    

      
      
      
    

   
    

      
      
      
    

       .     value,     ,     ,    .. .  value     .            , ..          . 
    

      
      
      
    

   
    

      
      
      
    

                options.      selected, ,     .    ,       . 
    

      
      
      
    

   
    

      
      
      
    

          select         .  Ctrl ( Command  ),     . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

              .          JavaScript.      .           ,        ,      . 
    

      
      
      
    

   
    

      
      
      
    

            « »,        . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script> 
    

      
      
      
    

   
    

      
      
      
    

    files  –   (  ),    .   .      file,             multiple. 
    

      
      
      
    

   
    

      
      
      
    

       files    ( ),  (   ),   (    media type - text/plain  image/jpeg). 
    

      
      
      
    

   
    

      
      
      
    

      ,   ,   .   ,  .         ,    ,    .  FileReader   ,   XMLHttpRequest,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

          FileReader,   “load”  ,     readAsText    .      result   . 
    

      
      
      
    

   
    

      
      
      
    

     Array.prototype.forEach    ,            file  reader   .        . 
    

      
      
      
    

   
    

      
      
      
    

    FileReaders    “error”,     .  error     error.           ,       (.  17): 
    

      
      
      
    

   
    

      
      
      
    

   function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); } 
    

      
      
      
    

   
    

      
      
      
    

       ,  slice    (..  blob)  reader. 
    

      
      
      
    

   
    

      
      
      
    

        
    

      
      
      
    

    HTML-   JavaScript      - –   ,   .           –              -. 
    

      
      
      
    

   
    

      
      
      
    

          ,  JavaScript    –        .     ,            .      20.       .       .  ? 
    

      
      
      
    

   
    

      
      
      
    

       ,      -        localStorage.        (   ),    : 
    

      
      
      
    

   
    

      
      
      
    

   localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username"); 
    

      
      
      
    

   
    

      
      
      
    

     localStorage ,    ,    removeItem     . 
    

      
      
      
    

   
    

      
      
      
    

        –     .  , ,     localStorage,           . 
    

      
      
      
    

   
    

      
      
      
    

        ,    .  ,    ,         ,     . 
    

      
      
      
    

   
    

      
      
      
    

          .      ,    .    JSON    localStorage.             .      . 
    

      
      
      
    

   
    

      
      
      
    

   : <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } //      var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script> 
    

      
      
      
    

   
    

      
      
      
    

      notes   localStorage,      –      « ».      localStorage  null.  null  JSON.parse,   null .         || . 
    

      
      
      
    

   
    

      
      
      
    

      note  (     ),       saveToStorage.    ,       ,     ,           – ,     . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,       “change”.   ,   “change” ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

        localStorage    sessionStorage.     ,   sessionStorage    ,       . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

   HTML       – , ,  ,  . 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript       .      “change”,     – “input”,      .     ,      .   value (    select)  checked (   )       . 
    

      
      
      
    

   
    

      
      
      
    

        “submit”.  JavaScript    preventDefault  ,    .         . 
    

      
      
      
    

   
    

      
      
      
    

             ,  FileReader         JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

    localStorage  sessionStorage       ,    .     (       ),   –   . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

    JavaScript 
    

      
      
      
    

    ,       JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

       ,     Function   10         .  ,  ,    ,  ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

      ,          .      ,      ,     .      ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> //      , //  'alert', 'document',  'scrollTo' var terms = []; for (var name in window) terms.push(name); //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    «»  
    

      
      
      
    

         ,      .   ( )   : 
    

      
      
      
    

   
    

      
      
      
    

   -   ,        ,  
    

      
      
      
    

   -   ,       ,     
    

      
      
      
    

   -   ,      ,  
    

      
      
      
    

   
    

      
      
      
    

     –        ,   ,  8 . 
    

      
      
      
    

   
    

      
      
      
    

    ,       ,        .  ,          ,  ,    ,      . 
    

      
      
      
    

   
    

      
      
      
    

    ,    .  Math.random     .         «   ».      ,        . 
    

      
      
      
    

   
    

      
      
      
    

   <div id="grid"></div> <button id="next"> </button> <script> //  . </script> 

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

 . HTML    ,      /        .          ,      . 
    

      
      
      
    

   
    

      
      
      
    

         .   type     .    : 
    

      
      
      
    

   
    

      
      
      
    

   text      
    

      
      
      
    

   password  ,  ,    
    

      
      
      
    

   checkbox  / 
    

      
      
      
    

   radio         
    

      
      
      
    

   file        
    

      
      
      
    

   
    

      
      
      
    

           .       .         (      ),     ,   JavaScript,           submit. 
    

      
      
      
    

   
    

      
      
      
    

   <p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p> 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript        .       . 
    

      
      
      
    

   
    

      
      
      
    

            .       ,           value. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea>    </textarea> 
    

      
      
      
    

   
    

      
      
      
    

         ,        . 
    

      
      
      
    

   <select> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

      ,   “change”. 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

         HTML,       .          , ..    . 
    

      
      
      
    

   
    

      
      
      
    

        ,      ,      .   -   .  ,     ,  ,   ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

      JavaScript   focus  blur.      DOM,    ,    .  document.activeElement   ,  . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script> 
    

      
      
      
    

   
    

      
      
      
    

      ,       -   .   JavaScript        ,   HTML    autofocus,      ,      .           ,      - . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" autofocus> 
    

      
      
      
    

   
    

      
      
      
    

           Tab.         tabindex.            OK,  ,      help. 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button> 
    

      
      
      
    

   
    

      
      
      
    

    ,    HTML   .   tabindex  ,      . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

        disabled,         DOM. 
    

      
      
      
    

   
    

      
      
      
    

   <button>   </button> <button disabled>  </button> 
    

      
      
      
    

   
    

      
      
      
    

          ,     ,     . 
    

      
      
      
    

   
    

      
      
      
    

              ,          ,      .   ,          ,      . 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

    ,    ,    DOM   form,     .  ,   ,   elements,    . 
    

      
      
      
    

   
    

      
      
      
    

    name  ,          .             elements,     ,    (   ),   map (   ). 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script> 
    

      
      
      
    

   
    

      
      
      
    

      type  submit    .   Enter       . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,     action,   GET  POST .      “submit”.     JavaScript,       ,    event preventDefault. 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     “submit”    .    ,             .               ,   XMLHttpRequest        . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

         text  password,    ,   .    DOM   value,          .       . 
    

      
      
      
    

   
    

      
      
      
    

      selectionStart  selectionEnd        .    ,   ,    . , 0   , 10 ,     10- .    ,    ,       .       . 
    

      
      
      
    

   
    

      
      
      
    

    , ,      Khasekhemwy,      .      ,    F2   “ Khasekhemwy”. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script> 
    

      
      
      
    

   
    

      
      
      
    

    replaceSelection      ,        ,     . 
    

      
      
      
    

   
    

      
      
      
    

    “change”           .      ,     .           “input”,       ,        . 
    

      
      
      
    

   
    

      
      
      
    

           ,     . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

     –   .         checked,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="checkbox" id="purple"> <label for="purple">  </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

            .  for    id .    label   ,       –     . 
    

      
      
      
    

   
    

      
      
      
    

      ,          ,         . 
    

      
      
      
    

   
    

      
      
      
    

   : <input type="radio" name="color" value="mediumpurple">  <input type="radio" name="color" value="lightgreen">  <input type="radio" name="color" value="lightblue">  <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script> 
    

      
      
      
    

   
    

      
      
      
    

    document.getElementsByName       name.    (   for,   forEach,     –   )       . ,       target,   ,   .       –       ,           ,   . 
    

      
      
      
    

   
    

      
      
      
    

    select 
    

      
      
      
    

    select    –       .        ,      . 
    

      
      
      
    

   
    

      
      
      
    

     select  ,     ,   .    multiple      ,   . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

                ,      . 
    

      
      
      
    

   
    

      
      
      
    

    size      ,    –        .  ,  size 3,     ,  ,    multiple. 
    

      
      
      
    

   
    

      
      
      
    

       .     value,     ,     ,    .. .  value     .            , ..          . 
    

      
      
      
    

   
    

      
      
      
    

                options.      selected, ,     .    ,       . 
    

      
      
      
    

   
    

      
      
      
    

          select         .  Ctrl ( Command  ),     . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

              .          JavaScript.      .           ,        ,      . 
    

      
      
      
    

   
    

      
      
      
    

            « »,        . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script> 
    

      
      
      
    

   
    

      
      
      
    

    files  –   (  ),    .   .      file,             multiple. 
    

      
      
      
    

   
    

      
      
      
    

       files    ( ),  (   ),   (    media type - text/plain  image/jpeg). 
    

      
      
      
    

   
    

      
      
      
    

      ,   ,   .   ,  .         ,    ,    .  FileReader   ,   XMLHttpRequest,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

          FileReader,   “load”  ,     readAsText    .      result   . 
    

      
      
      
    

   
    

      
      
      
    

     Array.prototype.forEach    ,            file  reader   .        . 
    

      
      
      
    

   
    

      
      
      
    

    FileReaders    “error”,     .  error     error.           ,       (.  17): 
    

      
      
      
    

   
    

      
      
      
    

   function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); } 
    

      
      
      
    

   
    

      
      
      
    

       ,  slice    (..  blob)  reader. 
    

      
      
      
    

   
    

      
      
      
    

        
    

      
      
      
    

    HTML-   JavaScript      - –   ,   .           –              -. 
    

      
      
      
    

   
    

      
      
      
    

          ,  JavaScript    –        .     ,            .      20.       .       .  ? 
    

      
      
      
    

   
    

      
      
      
    

       ,      -        localStorage.        (   ),    : 
    

      
      
      
    

   
    

      
      
      
    

   localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username"); 
    

      
      
      
    

   
    

      
      
      
    

     localStorage ,    ,    removeItem     . 
    

      
      
      
    

   
    

      
      
      
    

        –     .  , ,     localStorage,           . 
    

      
      
      
    

   
    

      
      
      
    

        ,    .  ,    ,         ,     . 
    

      
      
      
    

   
    

      
      
      
    

          .      ,    .    JSON    localStorage.             .      . 
    

      
      
      
    

   
    

      
      
      
    

   : <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } //      var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script> 
    

      
      
      
    

   
    

      
      
      
    

      notes   localStorage,      –      « ».      localStorage  null.  null  JSON.parse,   null .         || . 
    

      
      
      
    

   
    

      
      
      
    

      note  (     ),       saveToStorage.    ,       ,     ,           – ,     . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,       “change”.   ,   “change” ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

        localStorage    sessionStorage.     ,   sessionStorage    ,       . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

   HTML       – , ,  ,  . 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript       .      “change”,     – “input”,      .     ,      .   value (    select)  checked (   )       . 
    

      
      
      
    

   
    

      
      
      
    

        “submit”.  JavaScript    preventDefault  ,    .         . 
    

      
      
      
    

   
    

      
      
      
    

             ,  FileReader         JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

    localStorage  sessionStorage       ,    .     (       ),   –   . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

    JavaScript 
    

      
      
      
    

    ,       JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

       ,     Function   10         .  ,  ,    ,  ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

      ,          .      ,      ,     .      ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> //      , //  'alert', 'document',  'scrollTo' var terms = []; for (var name in window) terms.push(name); //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    «»  
    

      
      
      
    

         ,      .   ( )   : 
    

      
      
      
    

   
    

      
      
      
    

   -   ,        ,  
    

      
      
      
    

   -   ,       ,     
    

      
      
      
    

   -   ,      ,  
    

      
      
      
    

   
    

      
      
      
    

     –        ,   ,  8 . 
    

      
      
      
    

   
    

      
      
      
    

    ,       ,        .  ,          ,  ,    ,      . 
    

      
      
      
    

   
    

      
      
      
    

    ,    .  Math.random     .         «   ».      ,        . 
    

      
      
      
    

   
    

      
      
      
    

   <div id="grid"></div> <button id="next"> </button> <script> //  . </script> 

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

 . HTML    ,      /        .          ,      . 
    

      
      
      
    

   
    

      
      
      
    

         .   type     .    : 
    

      
      
      
    

   
    

      
      
      
    

   text      
    

      
      
      
    

   password  ,  ,    
    

      
      
      
    

   checkbox  / 
    

      
      
      
    

   radio         
    

      
      
      
    

   file        
    

      
      
      
    

   
    

      
      
      
    

           .       .         (      ),     ,   JavaScript,           submit. 
    

      
      
      
    

   
    

      
      
      
    

   <p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p> 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript        .       . 
    

      
      
      
    

   
    

      
      
      
    

            .       ,           value. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea>    </textarea> 
    

      
      
      
    

   
    

      
      
      
    

         ,        . 
    

      
      
      
    

   <select> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

      ,   “change”. 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

         HTML,       .          , ..    . 
    

      
      
      
    

   
    

      
      
      
    

        ,      ,      .   -   .  ,     ,  ,   ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

      JavaScript   focus  blur.      DOM,    ,    .  document.activeElement   ,  . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script> 
    

      
      
      
    

   
    

      
      
      
    

      ,       -   .   JavaScript        ,   HTML    autofocus,      ,      .           ,      - . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" autofocus> 
    

      
      
      
    

   
    

      
      
      
    

           Tab.         tabindex.            OK,  ,      help. 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button> 
    

      
      
      
    

   
    

      
      
      
    

    ,    HTML   .   tabindex  ,      . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

        disabled,         DOM. 
    

      
      
      
    

   
    

      
      
      
    

   <button>   </button> <button disabled>  </button> 
    

      
      
      
    

   
    

      
      
      
    

          ,     ,     . 
    

      
      
      
    

   
    

      
      
      
    

              ,          ,      .   ,          ,      . 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

    ,    ,    DOM   form,     .  ,   ,   elements,    . 
    

      
      
      
    

   
    

      
      
      
    

    name  ,          .             elements,     ,    (   ),   map (   ). 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script> 
    

      
      
      
    

   
    

      
      
      
    

      type  submit    .   Enter       . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,     action,   GET  POST .      “submit”.     JavaScript,       ,    event preventDefault. 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     “submit”    .    ,             .               ,   XMLHttpRequest        . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

         text  password,    ,   .    DOM   value,          .       . 
    

      
      
      
    

   
    

      
      
      
    

      selectionStart  selectionEnd        .    ,   ,    . , 0   , 10 ,     10- .    ,    ,       .       . 
    

      
      
      
    

   
    

      
      
      
    

    , ,      Khasekhemwy,      .      ,    F2   “ Khasekhemwy”. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script> 
    

      
      
      
    

   
    

      
      
      
    

    replaceSelection      ,        ,     . 
    

      
      
      
    

   
    

      
      
      
    

    “change”           .      ,     .           “input”,       ,        . 
    

      
      
      
    

   
    

      
      
      
    

           ,     . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

     –   .         checked,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="checkbox" id="purple"> <label for="purple">  </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

            .  for    id .    label   ,       –     . 
    

      
      
      
    

   
    

      
      
      
    

      ,          ,         . 
    

      
      
      
    

   
    

      
      
      
    

   : <input type="radio" name="color" value="mediumpurple">  <input type="radio" name="color" value="lightgreen">  <input type="radio" name="color" value="lightblue">  <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script> 
    

      
      
      
    

   
    

      
      
      
    

    document.getElementsByName       name.    (   for,   forEach,     –   )       . ,       target,   ,   .       –       ,           ,   . 
    

      
      
      
    

   
    

      
      
      
    

    select 
    

      
      
      
    

    select    –       .        ,      . 
    

      
      
      
    

   
    

      
      
      
    

     select  ,     ,   .    multiple      ,   . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

                ,      . 
    

      
      
      
    

   
    

      
      
      
    

    size      ,    –        .  ,  size 3,     ,  ,    multiple. 
    

      
      
      
    

   
    

      
      
      
    

       .     value,     ,     ,    .. .  value     .            , ..          . 
    

      
      
      
    

   
    

      
      
      
    

                options.      selected, ,     .    ,       . 
    

      
      
      
    

   
    

      
      
      
    

          select         .  Ctrl ( Command  ),     . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

              .          JavaScript.      .           ,        ,      . 
    

      
      
      
    

   
    

      
      
      
    

            « »,        . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script> 
    

      
      
      
    

   
    

      
      
      
    

    files  –   (  ),    .   .      file,             multiple. 
    

      
      
      
    

   
    

      
      
      
    

       files    ( ),  (   ),   (    media type - text/plain  image/jpeg). 
    

      
      
      
    

   
    

      
      
      
    

      ,   ,   .   ,  .         ,    ,    .  FileReader   ,   XMLHttpRequest,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

          FileReader,   “load”  ,     readAsText    .      result   . 
    

      
      
      
    

   
    

      
      
      
    

     Array.prototype.forEach    ,            file  reader   .        . 
    

      
      
      
    

   
    

      
      
      
    

    FileReaders    “error”,     .  error     error.           ,       (.  17): 
    

      
      
      
    

   
    

      
      
      
    

   function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); } 
    

      
      
      
    

   
    

      
      
      
    

       ,  slice    (..  blob)  reader. 
    

      
      
      
    

   
    

      
      
      
    

        
    

      
      
      
    

    HTML-   JavaScript      - –   ,   .           –              -. 
    

      
      
      
    

   
    

      
      
      
    

          ,  JavaScript    –        .     ,            .      20.       .       .  ? 
    

      
      
      
    

   
    

      
      
      
    

       ,      -        localStorage.        (   ),    : 
    

      
      
      
    

   
    

      
      
      
    

   localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username"); 
    

      
      
      
    

   
    

      
      
      
    

     localStorage ,    ,    removeItem     . 
    

      
      
      
    

   
    

      
      
      
    

        –     .  , ,     localStorage,           . 
    

      
      
      
    

   
    

      
      
      
    

        ,    .  ,    ,         ,     . 
    

      
      
      
    

   
    

      
      
      
    

          .      ,    .    JSON    localStorage.             .      . 
    

      
      
      
    

   
    

      
      
      
    

   : <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } //      var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script> 
    

      
      
      
    

   
    

      
      
      
    

      notes   localStorage,      –      « ».      localStorage  null.  null  JSON.parse,   null .         || . 
    

      
      
      
    

   
    

      
      
      
    

      note  (     ),       saveToStorage.    ,       ,     ,           – ,     . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,       “change”.   ,   “change” ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

        localStorage    sessionStorage.     ,   sessionStorage    ,       . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

   HTML       – , ,  ,  . 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript       .      “change”,     – “input”,      .     ,      .   value (    select)  checked (   )       . 
    

      
      
      
    

   
    

      
      
      
    

        “submit”.  JavaScript    preventDefault  ,    .         . 
    

      
      
      
    

   
    

      
      
      
    

             ,  FileReader         JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

    localStorage  sessionStorage       ,    .     (       ),   –   . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

    JavaScript 
    

      
      
      
    

    ,       JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

       ,     Function   10         .  ,  ,    ,  ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

      ,          .      ,      ,     .      ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> //      , //  'alert', 'document',  'scrollTo' var terms = []; for (var name in window) terms.push(name); //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    «»  
    

      
      
      
    

         ,      .   ( )   : 
    

      
      
      
    

   
    

      
      
      
    

   -   ,        ,  
    

      
      
      
    

   -   ,       ,     
    

      
      
      
    

   -   ,      ,  
    

      
      
      
    

   
    

      
      
      
    

     –        ,   ,  8 . 
    

      
      
      
    

   
    

      
      
      
    

    ,       ,        .  ,          ,  ,    ,      . 
    

      
      
      
    

   
    

      
      
      
    

    ,    .  Math.random     .         «   ».      ,        . 
    

      
      
      
    

   
    

      
      
      
    

   <div id="grid"></div> <button id="next"> </button> <script> //  . </script> 

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

 . HTML    ,      /        .          ,      . 
    

      
      
      
    

   
    

      
      
      
    

         .   type     .    : 
    

      
      
      
    

   
    

      
      
      
    

   text      
    

      
      
      
    

   password  ,  ,    
    

      
      
      
    

   checkbox  / 
    

      
      
      
    

   radio         
    

      
      
      
    

   file        
    

      
      
      
    

   
    

      
      
      
    

           .       .         (      ),     ,   JavaScript,           submit. 
    

      
      
      
    

   
    

      
      
      
    

   <p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p> 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript        .       . 
    

      
      
      
    

   
    

      
      
      
    

            .       ,           value. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea>    </textarea> 
    

      
      
      
    

   
    

      
      
      
    

         ,        . 
    

      
      
      
    

   <select> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

      ,   “change”. 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

         HTML,       .          , ..    . 
    

      
      
      
    

   
    

      
      
      
    

        ,      ,      .   -   .  ,     ,  ,   ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

      JavaScript   focus  blur.      DOM,    ,    .  document.activeElement   ,  . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script> 
    

      
      
      
    

   
    

      
      
      
    

      ,       -   .   JavaScript        ,   HTML    autofocus,      ,      .           ,      - . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" autofocus> 
    

      
      
      
    

   
    

      
      
      
    

           Tab.         tabindex.            OK,  ,      help. 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button> 
    

      
      
      
    

   
    

      
      
      
    

    ,    HTML   .   tabindex  ,      . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

        disabled,         DOM. 
    

      
      
      
    

   
    

      
      
      
    

   <button>   </button> <button disabled>  </button> 
    

      
      
      
    

   
    

      
      
      
    

          ,     ,     . 
    

      
      
      
    

   
    

      
      
      
    

              ,          ,      .   ,          ,      . 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

    ,    ,    DOM   form,     .  ,   ,   elements,    . 
    

      
      
      
    

   
    

      
      
      
    

    name  ,          .             elements,     ,    (   ),   map (   ). 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script> 
    

      
      
      
    

   
    

      
      
      
    

      type  submit    .   Enter       . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,     action,   GET  POST .      “submit”.     JavaScript,       ,    event preventDefault. 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     “submit”    .    ,             .               ,   XMLHttpRequest        . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

         text  password,    ,   .    DOM   value,          .       . 
    

      
      
      
    

   
    

      
      
      
    

      selectionStart  selectionEnd        .    ,   ,    . , 0   , 10 ,     10- .    ,    ,       .       . 
    

      
      
      
    

   
    

      
      
      
    

    , ,      Khasekhemwy,      .      ,    F2   “ Khasekhemwy”. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script> 
    

      
      
      
    

   
    

      
      
      
    

    replaceSelection      ,        ,     . 
    

      
      
      
    

   
    

      
      
      
    

    “change”           .      ,     .           “input”,       ,        . 
    

      
      
      
    

   
    

      
      
      
    

           ,     . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

     –   .         checked,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="checkbox" id="purple"> <label for="purple">  </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

            .  for    id .    label   ,       –     . 
    

      
      
      
    

   
    

      
      
      
    

      ,          ,         . 
    

      
      
      
    

   
    

      
      
      
    

   : <input type="radio" name="color" value="mediumpurple">  <input type="radio" name="color" value="lightgreen">  <input type="radio" name="color" value="lightblue">  <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script> 
    

      
      
      
    

   
    

      
      
      
    

    document.getElementsByName       name.    (   for,   forEach,     –   )       . ,       target,   ,   .       –       ,           ,   . 
    

      
      
      
    

   
    

      
      
      
    

    select 
    

      
      
      
    

    select    –       .        ,      . 
    

      
      
      
    

   
    

      
      
      
    

     select  ,     ,   .    multiple      ,   . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

                ,      . 
    

      
      
      
    

   
    

      
      
      
    

    size      ,    –        .  ,  size 3,     ,  ,    multiple. 
    

      
      
      
    

   
    

      
      
      
    

       .     value,     ,     ,    .. .  value     .            , ..          . 
    

      
      
      
    

   
    

      
      
      
    

                options.      selected, ,     .    ,       . 
    

      
      
      
    

   
    

      
      
      
    

          select         .  Ctrl ( Command  ),     . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

              .          JavaScript.      .           ,        ,      . 
    

      
      
      
    

   
    

      
      
      
    

            « »,        . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script> 
    

      
      
      
    

   
    

      
      
      
    

    files  –   (  ),    .   .      file,             multiple. 
    

      
      
      
    

   
    

      
      
      
    

       files    ( ),  (   ),   (    media type - text/plain  image/jpeg). 
    

      
      
      
    

   
    

      
      
      
    

      ,   ,   .   ,  .         ,    ,    .  FileReader   ,   XMLHttpRequest,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

          FileReader,   “load”  ,     readAsText    .      result   . 
    

      
      
      
    

   
    

      
      
      
    

     Array.prototype.forEach    ,            file  reader   .        . 
    

      
      
      
    

   
    

      
      
      
    

    FileReaders    “error”,     .  error     error.           ,       (.  17): 
    

      
      
      
    

   
    

      
      
      
    

   function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); } 
    

      
      
      
    

   
    

      
      
      
    

       ,  slice    (..  blob)  reader. 
    

      
      
      
    

   
    

      
      
      
    

        
    

      
      
      
    

    HTML-   JavaScript      - –   ,   .           –              -. 
    

      
      
      
    

   
    

      
      
      
    

          ,  JavaScript    –        .     ,            .      20.       .       .  ? 
    

      
      
      
    

   
    

      
      
      
    

       ,      -        localStorage.        (   ),    : 
    

      
      
      
    

   
    

      
      
      
    

   localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username"); 
    

      
      
      
    

   
    

      
      
      
    

     localStorage ,    ,    removeItem     . 
    

      
      
      
    

   
    

      
      
      
    

        –     .  , ,     localStorage,           . 
    

      
      
      
    

   
    

      
      
      
    

        ,    .  ,    ,         ,     . 
    

      
      
      
    

   
    

      
      
      
    

          .      ,    .    JSON    localStorage.             .      . 
    

      
      
      
    

   
    

      
      
      
    

   : <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } //      var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script> 
    

      
      
      
    

   
    

      
      
      
    

      notes   localStorage,      –      « ».      localStorage  null.  null  JSON.parse,   null .         || . 
    

      
      
      
    

   
    

      
      
      
    

      note  (     ),       saveToStorage.    ,       ,     ,           – ,     . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,       “change”.   ,   “change” ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

        localStorage    sessionStorage.     ,   sessionStorage    ,       . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

   HTML       – , ,  ,  . 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript       .      “change”,     – “input”,      .     ,      .   value (    select)  checked (   )       . 
    

      
      
      
    

   
    

      
      
      
    

        “submit”.  JavaScript    preventDefault  ,    .         . 
    

      
      
      
    

   
    

      
      
      
    

             ,  FileReader         JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

    localStorage  sessionStorage       ,    .     (       ),   –   . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

    JavaScript 
    

      
      
      
    

    ,       JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

       ,     Function   10         .  ,  ,    ,  ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

      ,          .      ,      ,     .      ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> //      , //  'alert', 'document',  'scrollTo' var terms = []; for (var name in window) terms.push(name); //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    «»  
    

      
      
      
    

         ,      .   ( )   : 
    

      
      
      
    

   
    

      
      
      
    

   -   ,        ,  
    

      
      
      
    

   -   ,       ,     
    

      
      
      
    

   -   ,      ,  
    

      
      
      
    

   
    

      
      
      
    

     –        ,   ,  8 . 
    

      
      
      
    

   
    

      
      
      
    

    ,       ,        .  ,          ,  ,    ,      . 
    

      
      
      
    

   
    

      
      
      
    

    ,    .  Math.random     .         «   ».      ,        . 
    

      
      
      
    

   
    

      
      
      
    

   <div id="grid"></div> <button id="next"> </button> <script> //  . </script> 

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

 . HTML    ,      /        .          ,      . 
    

      
      
      
    

   
    

      
      
      
    

         .   type     .    : 
    

      
      
      
    

   
    

      
      
      
    

   text      
    

      
      
      
    

   password  ,  ,    
    

      
      
      
    

   checkbox  / 
    

      
      
      
    

   radio         
    

      
      
      
    

   file        
    

      
      
      
    

   
    

      
      
      
    

           .       .         (      ),     ,   JavaScript,           submit. 
    

      
      
      
    

   
    

      
      
      
    

   <p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p> 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript        .       . 
    

      
      
      
    

   
    

      
      
      
    

            .       ,           value. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea>    </textarea> 
    

      
      
      
    

   
    

      
      
      
    

         ,        . 
    

      
      
      
    

   <select> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

      ,   “change”. 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

         HTML,       .          , ..    . 
    

      
      
      
    

   
    

      
      
      
    

        ,      ,      .   -   .  ,     ,  ,   ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

      JavaScript   focus  blur.      DOM,    ,    .  document.activeElement   ,  . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script> 
    

      
      
      
    

   
    

      
      
      
    

      ,       -   .   JavaScript        ,   HTML    autofocus,      ,      .           ,      - . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" autofocus> 
    

      
      
      
    

   
    

      
      
      
    

           Tab.         tabindex.            OK,  ,      help. 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button> 
    

      
      
      
    

   
    

      
      
      
    

    ,    HTML   .   tabindex  ,      . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

        disabled,         DOM. 
    

      
      
      
    

   
    

      
      
      
    

   <button>   </button> <button disabled>  </button> 
    

      
      
      
    

   
    

      
      
      
    

          ,     ,     . 
    

      
      
      
    

   
    

      
      
      
    

              ,          ,      .   ,          ,      . 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

    ,    ,    DOM   form,     .  ,   ,   elements,    . 
    

      
      
      
    

   
    

      
      
      
    

    name  ,          .             elements,     ,    (   ),   map (   ). 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script> 
    

      
      
      
    

   
    

      
      
      
    

      type  submit    .   Enter       . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,     action,   GET  POST .      “submit”.     JavaScript,       ,    event preventDefault. 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     “submit”    .    ,             .               ,   XMLHttpRequest        . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

         text  password,    ,   .    DOM   value,          .       . 
    

      
      
      
    

   
    

      
      
      
    

      selectionStart  selectionEnd        .    ,   ,    . , 0   , 10 ,     10- .    ,    ,       .       . 
    

      
      
      
    

   
    

      
      
      
    

    , ,      Khasekhemwy,      .      ,    F2   “ Khasekhemwy”. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script> 
    

      
      
      
    

   
    

      
      
      
    

    replaceSelection      ,        ,     . 
    

      
      
      
    

   
    

      
      
      
    

    “change”           .      ,     .           “input”,       ,        . 
    

      
      
      
    

   
    

      
      
      
    

           ,     . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

     –   .         checked,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="checkbox" id="purple"> <label for="purple">  </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

            .  for    id .    label   ,       –     . 
    

      
      
      
    

   
    

      
      
      
    

      ,          ,         . 
    

      
      
      
    

   
    

      
      
      
    

   : <input type="radio" name="color" value="mediumpurple">  <input type="radio" name="color" value="lightgreen">  <input type="radio" name="color" value="lightblue">  <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script> 
    

      
      
      
    

   
    

      
      
      
    

    document.getElementsByName       name.    (   for,   forEach,     –   )       . ,       target,   ,   .       –       ,           ,   . 
    

      
      
      
    

   
    

      
      
      
    

    select 
    

      
      
      
    

    select    –       .        ,      . 
    

      
      
      
    

   
    

      
      
      
    

     select  ,     ,   .    multiple      ,   . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

                ,      . 
    

      
      
      
    

   
    

      
      
      
    

    size      ,    –        .  ,  size 3,     ,  ,    multiple. 
    

      
      
      
    

   
    

      
      
      
    

       .     value,     ,     ,    .. .  value     .            , ..          . 
    

      
      
      
    

   
    

      
      
      
    

                options.      selected, ,     .    ,       . 
    

      
      
      
    

   
    

      
      
      
    

          select         .  Ctrl ( Command  ),     . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

              .          JavaScript.      .           ,        ,      . 
    

      
      
      
    

   
    

      
      
      
    

            « »,        . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script> 
    

      
      
      
    

   
    

      
      
      
    

    files  –   (  ),    .   .      file,             multiple. 
    

      
      
      
    

   
    

      
      
      
    

       files    ( ),  (   ),   (    media type - text/plain  image/jpeg). 
    

      
      
      
    

   
    

      
      
      
    

      ,   ,   .   ,  .         ,    ,    .  FileReader   ,   XMLHttpRequest,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

          FileReader,   “load”  ,     readAsText    .      result   . 
    

      
      
      
    

   
    

      
      
      
    

     Array.prototype.forEach    ,            file  reader   .        . 
    

      
      
      
    

   
    

      
      
      
    

    FileReaders    “error”,     .  error     error.           ,       (.  17): 
    

      
      
      
    

   
    

      
      
      
    

   function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); } 
    

      
      
      
    

   
    

      
      
      
    

       ,  slice    (..  blob)  reader. 
    

      
      
      
    

   
    

      
      
      
    

        
    

      
      
      
    

    HTML-   JavaScript      - –   ,   .           –              -. 
    

      
      
      
    

   
    

      
      
      
    

          ,  JavaScript    –        .     ,            .      20.       .       .  ? 
    

      
      
      
    

   
    

      
      
      
    

       ,      -        localStorage.        (   ),    : 
    

      
      
      
    

   
    

      
      
      
    

   localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username"); 
    

      
      
      
    

   
    

      
      
      
    

     localStorage ,    ,    removeItem     . 
    

      
      
      
    

   
    

      
      
      
    

        –     .  , ,     localStorage,           . 
    

      
      
      
    

   
    

      
      
      
    

        ,    .  ,    ,         ,     . 
    

      
      
      
    

   
    

      
      
      
    

          .      ,    .    JSON    localStorage.             .      . 
    

      
      
      
    

   
    

      
      
      
    

   : <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } //      var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script> 
    

      
      
      
    

   
    

      
      
      
    

      notes   localStorage,      –      « ».      localStorage  null.  null  JSON.parse,   null .         || . 
    

      
      
      
    

   
    

      
      
      
    

      note  (     ),       saveToStorage.    ,       ,     ,           – ,     . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,       “change”.   ,   “change” ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

        localStorage    sessionStorage.     ,   sessionStorage    ,       . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

   HTML       – , ,  ,  . 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript       .      “change”,     – “input”,      .     ,      .   value (    select)  checked (   )       . 
    

      
      
      
    

   
    

      
      
      
    

        “submit”.  JavaScript    preventDefault  ,    .         . 
    

      
      
      
    

   
    

      
      
      
    

             ,  FileReader         JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

    localStorage  sessionStorage       ,    .     (       ),   –   . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

    JavaScript 
    

      
      
      
    

    ,       JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

       ,     Function   10         .  ,  ,    ,  ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

      ,          .      ,      ,     .      ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> //      , //  'alert', 'document',  'scrollTo' var terms = []; for (var name in window) terms.push(name); //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    «»  
    

      
      
      
    

         ,      .   ( )   : 
    

      
      
      
    

   
    

      
      
      
    

   -   ,        ,  
    

      
      
      
    

   -   ,       ,     
    

      
      
      
    

   -   ,      ,  
    

      
      
      
    

   
    

      
      
      
    

     –        ,   ,  8 . 
    

      
      
      
    

   
    

      
      
      
    

    ,       ,        .  ,          ,  ,    ,      . 
    

      
      
      
    

   
    

      
      
      
    

    ,    .  Math.random     .         «   ».      ,        . 
    

      
      
      
    

   
    

      
      
      
    

   <div id="grid"></div> <button id="next"> </button> <script> //  . </script> 

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

 . HTML    ,      /        .          ,      . 
    

      
      
      
    

   
    

      
      
      
    

         .   type     .    : 
    

      
      
      
    

   
    

      
      
      
    

   text      
    

      
      
      
    

   password  ,  ,    
    

      
      
      
    

   checkbox  / 
    

      
      
      
    

   radio         
    

      
      
      
    

   file        
    

      
      
      
    

   
    

      
      
      
    

           .       .         (      ),     ,   JavaScript,           submit. 
    

      
      
      
    

   
    

      
      
      
    

   <p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p> 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript        .       . 
    

      
      
      
    

   
    

      
      
      
    

            .       ,           value. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea>    </textarea> 
    

      
      
      
    

   
    

      
      
      
    

         ,        . 
    

      
      
      
    

   <select> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

      ,   “change”. 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

         HTML,       .          , ..    . 
    

      
      
      
    

   
    

      
      
      
    

        ,      ,      .   -   .  ,     ,  ,   ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

      JavaScript   focus  blur.      DOM,    ,    .  document.activeElement   ,  . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script> 
    

      
      
      
    

   
    

      
      
      
    

      ,       -   .   JavaScript        ,   HTML    autofocus,      ,      .           ,      - . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" autofocus> 
    

      
      
      
    

   
    

      
      
      
    

           Tab.         tabindex.            OK,  ,      help. 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button> 
    

      
      
      
    

   
    

      
      
      
    

    ,    HTML   .   tabindex  ,      . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

        disabled,         DOM. 
    

      
      
      
    

   
    

      
      
      
    

   <button>   </button> <button disabled>  </button> 
    

      
      
      
    

   
    

      
      
      
    

          ,     ,     . 
    

      
      
      
    

   
    

      
      
      
    

              ,          ,      .   ,          ,      . 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

    ,    ,    DOM   form,     .  ,   ,   elements,    . 
    

      
      
      
    

   
    

      
      
      
    

    name  ,          .             elements,     ,    (   ),   map (   ). 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script> 
    

      
      
      
    

   
    

      
      
      
    

      type  submit    .   Enter       . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,     action,   GET  POST .      “submit”.     JavaScript,       ,    event preventDefault. 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     “submit”    .    ,             .               ,   XMLHttpRequest        . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

         text  password,    ,   .    DOM   value,          .       . 
    

      
      
      
    

   
    

      
      
      
    

      selectionStart  selectionEnd        .    ,   ,    . , 0   , 10 ,     10- .    ,    ,       .       . 
    

      
      
      
    

   
    

      
      
      
    

    , ,      Khasekhemwy,      .      ,    F2   “ Khasekhemwy”. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script> 
    

      
      
      
    

   
    

      
      
      
    

    replaceSelection      ,        ,     . 
    

      
      
      
    

   
    

      
      
      
    

    “change”           .      ,     .           “input”,       ,        . 
    

      
      
      
    

   
    

      
      
      
    

           ,     . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

     –   .         checked,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="checkbox" id="purple"> <label for="purple">  </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

            .  for    id .    label   ,       –     . 
    

      
      
      
    

   
    

      
      
      
    

      ,          ,         . 
    

      
      
      
    

   
    

      
      
      
    

   : <input type="radio" name="color" value="mediumpurple">  <input type="radio" name="color" value="lightgreen">  <input type="radio" name="color" value="lightblue">  <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script> 
    

      
      
      
    

   
    

      
      
      
    

    document.getElementsByName       name.    (   for,   forEach,     –   )       . ,       target,   ,   .       –       ,           ,   . 
    

      
      
      
    

   
    

      
      
      
    

    select 
    

      
      
      
    

    select    –       .        ,      . 
    

      
      
      
    

   
    

      
      
      
    

     select  ,     ,   .    multiple      ,   . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

                ,      . 
    

      
      
      
    

   
    

      
      
      
    

    size      ,    –        .  ,  size 3,     ,  ,    multiple. 
    

      
      
      
    

   
    

      
      
      
    

       .     value,     ,     ,    .. .  value     .            , ..          . 
    

      
      
      
    

   
    

      
      
      
    

                options.      selected, ,     .    ,       . 
    

      
      
      
    

   
    

      
      
      
    

          select         .  Ctrl ( Command  ),     . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

              .          JavaScript.      .           ,        ,      . 
    

      
      
      
    

   
    

      
      
      
    

            « »,        . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script> 
    

      
      
      
    

   
    

      
      
      
    

    files  –   (  ),    .   .      file,             multiple. 
    

      
      
      
    

   
    

      
      
      
    

       files    ( ),  (   ),   (    media type - text/plain  image/jpeg). 
    

      
      
      
    

   
    

      
      
      
    

      ,   ,   .   ,  .         ,    ,    .  FileReader   ,   XMLHttpRequest,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

          FileReader,   “load”  ,     readAsText    .      result   . 
    

      
      
      
    

   
    

      
      
      
    

     Array.prototype.forEach    ,            file  reader   .        . 
    

      
      
      
    

   
    

      
      
      
    

    FileReaders    “error”,     .  error     error.           ,       (.  17): 
    

      
      
      
    

   
    

      
      
      
    

   function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); } 
    

      
      
      
    

   
    

      
      
      
    

       ,  slice    (..  blob)  reader. 
    

      
      
      
    

   
    

      
      
      
    

        
    

      
      
      
    

    HTML-   JavaScript      - –   ,   .           –              -. 
    

      
      
      
    

   
    

      
      
      
    

          ,  JavaScript    –        .     ,            .      20.       .       .  ? 
    

      
      
      
    

   
    

      
      
      
    

       ,      -        localStorage.        (   ),    : 
    

      
      
      
    

   
    

      
      
      
    

   localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username"); 
    

      
      
      
    

   
    

      
      
      
    

     localStorage ,    ,    removeItem     . 
    

      
      
      
    

   
    

      
      
      
    

        –     .  , ,     localStorage,           . 
    

      
      
      
    

   
    

      
      
      
    

        ,    .  ,    ,         ,     . 
    

      
      
      
    

   
    

      
      
      
    

          .      ,    .    JSON    localStorage.             .      . 
    

      
      
      
    

   
    

      
      
      
    

   : <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } //      var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script> 
    

      
      
      
    

   
    

      
      
      
    

      notes   localStorage,      –      « ».      localStorage  null.  null  JSON.parse,   null .         || . 
    

      
      
      
    

   
    

      
      
      
    

      note  (     ),       saveToStorage.    ,       ,     ,           – ,     . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,       “change”.   ,   “change” ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

        localStorage    sessionStorage.     ,   sessionStorage    ,       . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

   HTML       – , ,  ,  . 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript       .      “change”,     – “input”,      .     ,      .   value (    select)  checked (   )       . 
    

      
      
      
    

   
    

      
      
      
    

        “submit”.  JavaScript    preventDefault  ,    .         . 
    

      
      
      
    

   
    

      
      
      
    

             ,  FileReader         JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

    localStorage  sessionStorage       ,    .     (       ),   –   . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

    JavaScript 
    

      
      
      
    

    ,       JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

       ,     Function   10         .  ,  ,    ,  ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

      ,          .      ,      ,     .      ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> //      , //  'alert', 'document',  'scrollTo' var terms = []; for (var name in window) terms.push(name); //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    «»  
    

      
      
      
    

         ,      .   ( )   : 
    

      
      
      
    

   
    

      
      
      
    

   -   ,        ,  
    

      
      
      
    

   -   ,       ,     
    

      
      
      
    

   -   ,      ,  
    

      
      
      
    

   
    

      
      
      
    

     –        ,   ,  8 . 
    

      
      
      
    

   
    

      
      
      
    

    ,       ,        .  ,          ,  ,    ,      . 
    

      
      
      
    

   
    

      
      
      
    

    ,    .  Math.random     .         «   ».      ,        . 
    

      
      
      
    

   
    

      
      
      
    

   <div id="grid"></div> <button id="next"> </button> <script> //  . </script> 

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

 . HTML    ,      /        .          ,      . 
    

      
      
      
    

   
    

      
      
      
    

         .   type     .    : 
    

      
      
      
    

   
    

      
      
      
    

   text      
    

      
      
      
    

   password  ,  ,    
    

      
      
      
    

   checkbox  / 
    

      
      
      
    

   radio         
    

      
      
      
    

   file        
    

      
      
      
    

   
    

      
      
      
    

           .       .         (      ),     ,   JavaScript,           submit. 
    

      
      
      
    

   
    

      
      
      
    

   <p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p> 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript        .       . 
    

      
      
      
    

   
    

      
      
      
    

            .       ,           value. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea>    </textarea> 
    

      
      
      
    

   
    

      
      
      
    

         ,        . 
    

      
      
      
    

   <select> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

      ,   “change”. 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

         HTML,       .          , ..    . 
    

      
      
      
    

   
    

      
      
      
    

        ,      ,      .   -   .  ,     ,  ,   ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

      JavaScript   focus  blur.      DOM,    ,    .  document.activeElement   ,  . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script> 
    

      
      
      
    

   
    

      
      
      
    

      ,       -   .   JavaScript        ,   HTML    autofocus,      ,      .           ,      - . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" autofocus> 
    

      
      
      
    

   
    

      
      
      
    

           Tab.         tabindex.            OK,  ,      help. 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button> 
    

      
      
      
    

   
    

      
      
      
    

    ,    HTML   .   tabindex  ,      . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

        disabled,         DOM. 
    

      
      
      
    

   
    

      
      
      
    

   <button>   </button> <button disabled>  </button> 
    

      
      
      
    

   
    

      
      
      
    

          ,     ,     . 
    

      
      
      
    

   
    

      
      
      
    

              ,          ,      .   ,          ,      . 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

    ,    ,    DOM   form,     .  ,   ,   elements,    . 
    

      
      
      
    

   
    

      
      
      
    

    name  ,          .             elements,     ,    (   ),   map (   ). 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script> 
    

      
      
      
    

   
    

      
      
      
    

      type  submit    .   Enter       . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,     action,   GET  POST .      “submit”.     JavaScript,       ,    event preventDefault. 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     “submit”    .    ,             .               ,   XMLHttpRequest        . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

         text  password,    ,   .    DOM   value,          .       . 
    

      
      
      
    

   
    

      
      
      
    

      selectionStart  selectionEnd        .    ,   ,    . , 0   , 10 ,     10- .    ,    ,       .       . 
    

      
      
      
    

   
    

      
      
      
    

    , ,      Khasekhemwy,      .      ,    F2   “ Khasekhemwy”. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script> 
    

      
      
      
    

   
    

      
      
      
    

    replaceSelection      ,        ,     . 
    

      
      
      
    

   
    

      
      
      
    

    “change”           .      ,     .           “input”,       ,        . 
    

      
      
      
    

   
    

      
      
      
    

           ,     . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

     –   .         checked,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="checkbox" id="purple"> <label for="purple">  </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

            .  for    id .    label   ,       –     . 
    

      
      
      
    

   
    

      
      
      
    

      ,          ,         . 
    

      
      
      
    

   
    

      
      
      
    

   : <input type="radio" name="color" value="mediumpurple">  <input type="radio" name="color" value="lightgreen">  <input type="radio" name="color" value="lightblue">  <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script> 
    

      
      
      
    

   
    

      
      
      
    

    document.getElementsByName       name.    (   for,   forEach,     –   )       . ,       target,   ,   .       –       ,           ,   . 
    

      
      
      
    

   
    

      
      
      
    

    select 
    

      
      
      
    

    select    –       .        ,      . 
    

      
      
      
    

   
    

      
      
      
    

     select  ,     ,   .    multiple      ,   . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

                ,      . 
    

      
      
      
    

   
    

      
      
      
    

    size      ,    –        .  ,  size 3,     ,  ,    multiple. 
    

      
      
      
    

   
    

      
      
      
    

       .     value,     ,     ,    .. .  value     .            , ..          . 
    

      
      
      
    

   
    

      
      
      
    

                options.      selected, ,     .    ,       . 
    

      
      
      
    

   
    

      
      
      
    

          select         .  Ctrl ( Command  ),     . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

              .          JavaScript.      .           ,        ,      . 
    

      
      
      
    

   
    

      
      
      
    

            « »,        . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script> 
    

      
      
      
    

   
    

      
      
      
    

    files  –   (  ),    .   .      file,             multiple. 
    

      
      
      
    

   
    

      
      
      
    

       files    ( ),  (   ),   (    media type - text/plain  image/jpeg). 
    

      
      
      
    

   
    

      
      
      
    

      ,   ,   .   ,  .         ,    ,    .  FileReader   ,   XMLHttpRequest,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

          FileReader,   “load”  ,     readAsText    .      result   . 
    

      
      
      
    

   
    

      
      
      
    

     Array.prototype.forEach    ,            file  reader   .        . 
    

      
      
      
    

   
    

      
      
      
    

    FileReaders    “error”,     .  error     error.           ,       (.  17): 
    

      
      
      
    

   
    

      
      
      
    

   function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); } 
    

      
      
      
    

   
    

      
      
      
    

       ,  slice    (..  blob)  reader. 
    

      
      
      
    

   
    

      
      
      
    

        
    

      
      
      
    

    HTML-   JavaScript      - –   ,   .           –              -. 
    

      
      
      
    

   
    

      
      
      
    

          ,  JavaScript    –        .     ,            .      20.       .       .  ? 
    

      
      
      
    

   
    

      
      
      
    

       ,      -        localStorage.        (   ),    : 
    

      
      
      
    

   
    

      
      
      
    

   localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username"); 
    

      
      
      
    

   
    

      
      
      
    

     localStorage ,    ,    removeItem     . 
    

      
      
      
    

   
    

      
      
      
    

        –     .  , ,     localStorage,           . 
    

      
      
      
    

   
    

      
      
      
    

        ,    .  ,    ,         ,     . 
    

      
      
      
    

   
    

      
      
      
    

          .      ,    .    JSON    localStorage.             .      . 
    

      
      
      
    

   
    

      
      
      
    

   : <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } //      var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script> 
    

      
      
      
    

   
    

      
      
      
    

      notes   localStorage,      –      « ».      localStorage  null.  null  JSON.parse,   null .         || . 
    

      
      
      
    

   
    

      
      
      
    

      note  (     ),       saveToStorage.    ,       ,     ,           – ,     . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,       “change”.   ,   “change” ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

        localStorage    sessionStorage.     ,   sessionStorage    ,       . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

   HTML       – , ,  ,  . 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript       .      “change”,     – “input”,      .     ,      .   value (    select)  checked (   )       . 
    

      
      
      
    

   
    

      
      
      
    

        “submit”.  JavaScript    preventDefault  ,    .         . 
    

      
      
      
    

   
    

      
      
      
    

             ,  FileReader         JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

    localStorage  sessionStorage       ,    .     (       ),   –   . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

    JavaScript 
    

      
      
      
    

    ,       JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

       ,     Function   10         .  ,  ,    ,  ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

      ,          .      ,      ,     .      ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> //      , //  'alert', 'document',  'scrollTo' var terms = []; for (var name in window) terms.push(name); //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    «»  
    

      
      
      
    

         ,      .   ( )   : 
    

      
      
      
    

   
    

      
      
      
    

   -   ,        ,  
    

      
      
      
    

   -   ,       ,     
    

      
      
      
    

   -   ,      ,  
    

      
      
      
    

   
    

      
      
      
    

     –        ,   ,  8 . 
    

      
      
      
    

   
    

      
      
      
    

    ,       ,        .  ,          ,  ,    ,      . 
    

      
      
      
    

   
    

      
      
      
    

    ,    .  Math.random     .         «   ».      ,        . 
    

      
      
      
    

   
    

      
      
      
    

   <div id="grid"></div> <button id="next"> </button> <script> //  . </script> 

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

 . HTML    ,      /        .          ,      . 
    

      
      
      
    

   
    

      
      
      
    

         .   type     .    : 
    

      
      
      
    

   
    

      
      
      
    

   text      
    

      
      
      
    

   password  ,  ,    
    

      
      
      
    

   checkbox  / 
    

      
      
      
    

   radio         
    

      
      
      
    

   file        
    

      
      
      
    

   
    

      
      
      
    

           .       .         (      ),     ,   JavaScript,           submit. 
    

      
      
      
    

   
    

      
      
      
    

   <p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p> 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript        .       . 
    

      
      
      
    

   
    

      
      
      
    

            .       ,           value. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea>    </textarea> 
    

      
      
      
    

   
    

      
      
      
    

         ,        . 
    

      
      
      
    

   <select> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

      ,   “change”. 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

         HTML,       .          , ..    . 
    

      
      
      
    

   
    

      
      
      
    

        ,      ,      .   -   .  ,     ,  ,   ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

      JavaScript   focus  blur.      DOM,    ,    .  document.activeElement   ,  . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script> 
    

      
      
      
    

   
    

      
      
      
    

      ,       -   .   JavaScript        ,   HTML    autofocus,      ,      .           ,      - . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" autofocus> 
    

      
      
      
    

   
    

      
      
      
    

           Tab.         tabindex.            OK,  ,      help. 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button> 
    

      
      
      
    

   
    

      
      
      
    

    ,    HTML   .   tabindex  ,      . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

        disabled,         DOM. 
    

      
      
      
    

   
    

      
      
      
    

   <button>   </button> <button disabled>  </button> 
    

      
      
      
    

   
    

      
      
      
    

          ,     ,     . 
    

      
      
      
    

   
    

      
      
      
    

              ,          ,      .   ,          ,      . 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

    ,    ,    DOM   form,     .  ,   ,   elements,    . 
    

      
      
      
    

   
    

      
      
      
    

    name  ,          .             elements,     ,    (   ),   map (   ). 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script> 
    

      
      
      
    

   
    

      
      
      
    

      type  submit    .   Enter       . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,     action,   GET  POST .      “submit”.     JavaScript,       ,    event preventDefault. 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     “submit”    .    ,             .               ,   XMLHttpRequest        . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

         text  password,    ,   .    DOM   value,          .       . 
    

      
      
      
    

   
    

      
      
      
    

      selectionStart  selectionEnd        .    ,   ,    . , 0   , 10 ,     10- .    ,    ,       .       . 
    

      
      
      
    

   
    

      
      
      
    

    , ,      Khasekhemwy,      .      ,    F2   “ Khasekhemwy”. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script> 
    

      
      
      
    

   
    

      
      
      
    

    replaceSelection      ,        ,     . 
    

      
      
      
    

   
    

      
      
      
    

    “change”           .      ,     .           “input”,       ,        . 
    

      
      
      
    

   
    

      
      
      
    

           ,     . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

     –   .         checked,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="checkbox" id="purple"> <label for="purple">  </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

            .  for    id .    label   ,       –     . 
    

      
      
      
    

   
    

      
      
      
    

      ,          ,         . 
    

      
      
      
    

   
    

      
      
      
    

   : <input type="radio" name="color" value="mediumpurple">  <input type="radio" name="color" value="lightgreen">  <input type="radio" name="color" value="lightblue">  <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script> 
    

      
      
      
    

   
    

      
      
      
    

    document.getElementsByName       name.    (   for,   forEach,     –   )       . ,       target,   ,   .       –       ,           ,   . 
    

      
      
      
    

   
    

      
      
      
    

    select 
    

      
      
      
    

    select    –       .        ,      . 
    

      
      
      
    

   
    

      
      
      
    

     select  ,     ,   .    multiple      ,   . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

                ,      . 
    

      
      
      
    

   
    

      
      
      
    

    size      ,    –        .  ,  size 3,     ,  ,    multiple. 
    

      
      
      
    

   
    

      
      
      
    

       .     value,     ,     ,    .. .  value     .            , ..          . 
    

      
      
      
    

   
    

      
      
      
    

                options.      selected, ,     .    ,       . 
    

      
      
      
    

   
    

      
      
      
    

          select         .  Ctrl ( Command  ),     . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

              .          JavaScript.      .           ,        ,      . 
    

      
      
      
    

   
    

      
      
      
    

            « »,        . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script> 
    

      
      
      
    

   
    

      
      
      
    

    files  –   (  ),    .   .      file,             multiple. 
    

      
      
      
    

   
    

      
      
      
    

       files    ( ),  (   ),   (    media type - text/plain  image/jpeg). 
    

      
      
      
    

   
    

      
      
      
    

      ,   ,   .   ,  .         ,    ,    .  FileReader   ,   XMLHttpRequest,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

          FileReader,   “load”  ,     readAsText    .      result   . 
    

      
      
      
    

   
    

      
      
      
    

     Array.prototype.forEach    ,            file  reader   .        . 
    

      
      
      
    

   
    

      
      
      
    

    FileReaders    “error”,     .  error     error.           ,       (.  17): 
    

      
      
      
    

   
    

      
      
      
    

   function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); } 
    

      
      
      
    

   
    

      
      
      
    

       ,  slice    (..  blob)  reader. 
    

      
      
      
    

   
    

      
      
      
    

        
    

      
      
      
    

    HTML-   JavaScript      - –   ,   .           –              -. 
    

      
      
      
    

   
    

      
      
      
    

          ,  JavaScript    –        .     ,            .      20.       .       .  ? 
    

      
      
      
    

   
    

      
      
      
    

       ,      -        localStorage.        (   ),    : 
    

      
      
      
    

   
    

      
      
      
    

   localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username"); 
    

      
      
      
    

   
    

      
      
      
    

     localStorage ,    ,    removeItem     . 
    

      
      
      
    

   
    

      
      
      
    

        –     .  , ,     localStorage,           . 
    

      
      
      
    

   
    

      
      
      
    

        ,    .  ,    ,         ,     . 
    

      
      
      
    

   
    

      
      
      
    

          .      ,    .    JSON    localStorage.             .      . 
    

      
      
      
    

   
    

      
      
      
    

   : <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } //      var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script> 
    

      
      
      
    

   
    

      
      
      
    

      notes   localStorage,      –      « ».      localStorage  null.  null  JSON.parse,   null .         || . 
    

      
      
      
    

   
    

      
      
      
    

      note  (     ),       saveToStorage.    ,       ,     ,           – ,     . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,       “change”.   ,   “change” ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

        localStorage    sessionStorage.     ,   sessionStorage    ,       . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

   HTML       – , ,  ,  . 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript       .      “change”,     – “input”,      .     ,      .   value (    select)  checked (   )       . 
    

      
      
      
    

   
    

      
      
      
    

        “submit”.  JavaScript    preventDefault  ,    .         . 
    

      
      
      
    

   
    

      
      
      
    

             ,  FileReader         JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

    localStorage  sessionStorage       ,    .     (       ),   –   . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

    JavaScript 
    

      
      
      
    

    ,       JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

       ,     Function   10         .  ,  ,    ,  ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

      ,          .      ,      ,     .      ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> //      , //  'alert', 'document',  'scrollTo' var terms = []; for (var name in window) terms.push(name); //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    «»  
    

      
      
      
    

         ,      .   ( )   : 
    

      
      
      
    

   
    

      
      
      
    

   -   ,        ,  
    

      
      
      
    

   -   ,       ,     
    

      
      
      
    

   -   ,      ,  
    

      
      
      
    

   
    

      
      
      
    

     –        ,   ,  8 . 
    

      
      
      
    

   
    

      
      
      
    

    ,       ,        .  ,          ,  ,    ,      . 
    

      
      
      
    

   
    

      
      
      
    

    ,    .  Math.random     .         «   ».      ,        . 
    

      
      
      
    

   
    

      
      
      
    

   <div id="grid"></div> <button id="next"> </button> <script> //  . </script> 

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

 . HTML    ,      /        .          ,      . 
    

      
      
      
    

   
    

      
      
      
    

         .   type     .    : 
    

      
      
      
    

   
    

      
      
      
    

   text      
    

      
      
      
    

   password  ,  ,    
    

      
      
      
    

   checkbox  / 
    

      
      
      
    

   radio         
    

      
      
      
    

   file        
    

      
      
      
    

   
    

      
      
      
    

           .       .         (      ),     ,   JavaScript,           submit. 
    

      
      
      
    

   
    

      
      
      
    

   <p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p> 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript        .       . 
    

      
      
      
    

   
    

      
      
      
    

            .       ,           value. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea>    </textarea> 
    

      
      
      
    

   
    

      
      
      
    

         ,        . 
    

      
      
      
    

   <select> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

      ,   “change”. 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

         HTML,       .          , ..    . 
    

      
      
      
    

   
    

      
      
      
    

        ,      ,      .   -   .  ,     ,  ,   ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

      JavaScript   focus  blur.      DOM,    ,    .  document.activeElement   ,  . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script> 
    

      
      
      
    

   
    

      
      
      
    

      ,       -   .   JavaScript        ,   HTML    autofocus,      ,      .           ,      - . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" autofocus> 
    

      
      
      
    

   
    

      
      
      
    

           Tab.         tabindex.            OK,  ,      help. 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button> 
    

      
      
      
    

   
    

      
      
      
    

    ,    HTML   .   tabindex  ,      . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

        disabled,         DOM. 
    

      
      
      
    

   
    

      
      
      
    

   <button>   </button> <button disabled>  </button> 
    

      
      
      
    

   
    

      
      
      
    

          ,     ,     . 
    

      
      
      
    

   
    

      
      
      
    

              ,          ,      .   ,          ,      . 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

    ,    ,    DOM   form,     .  ,   ,   elements,    . 
    

      
      
      
    

   
    

      
      
      
    

    name  ,          .             elements,     ,    (   ),   map (   ). 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script> 
    

      
      
      
    

   
    

      
      
      
    

      type  submit    .   Enter       . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,     action,   GET  POST .      “submit”.     JavaScript,       ,    event preventDefault. 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     “submit”    .    ,             .               ,   XMLHttpRequest        . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

         text  password,    ,   .    DOM   value,          .       . 
    

      
      
      
    

   
    

      
      
      
    

      selectionStart  selectionEnd        .    ,   ,    . , 0   , 10 ,     10- .    ,    ,       .       . 
    

      
      
      
    

   
    

      
      
      
    

    , ,      Khasekhemwy,      .      ,    F2   “ Khasekhemwy”. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script> 
    

      
      
      
    

   
    

      
      
      
    

    replaceSelection      ,        ,     . 
    

      
      
      
    

   
    

      
      
      
    

    “change”           .      ,     .           “input”,       ,        . 
    

      
      
      
    

   
    

      
      
      
    

           ,     . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

     –   .         checked,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="checkbox" id="purple"> <label for="purple">  </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

            .  for    id .    label   ,       –     . 
    

      
      
      
    

   
    

      
      
      
    

      ,          ,         . 
    

      
      
      
    

   
    

      
      
      
    

   : <input type="radio" name="color" value="mediumpurple">  <input type="radio" name="color" value="lightgreen">  <input type="radio" name="color" value="lightblue">  <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script> 
    

      
      
      
    

   
    

      
      
      
    

    document.getElementsByName       name.    (   for,   forEach,     –   )       . ,       target,   ,   .       –       ,           ,   . 
    

      
      
      
    

   
    

      
      
      
    

    select 
    

      
      
      
    

    select    –       .        ,      . 
    

      
      
      
    

   
    

      
      
      
    

     select  ,     ,   .    multiple      ,   . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

                ,      . 
    

      
      
      
    

   
    

      
      
      
    

    size      ,    –        .  ,  size 3,     ,  ,    multiple. 
    

      
      
      
    

   
    

      
      
      
    

       .     value,     ,     ,    .. .  value     .            , ..          . 
    

      
      
      
    

   
    

      
      
      
    

                options.      selected, ,     .    ,       . 
    

      
      
      
    

   
    

      
      
      
    

          select         .  Ctrl ( Command  ),     . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

              .          JavaScript.      .           ,        ,      . 
    

      
      
      
    

   
    

      
      
      
    

            « »,        . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script> 
    

      
      
      
    

   
    

      
      
      
    

    files  –   (  ),    .   .      file,             multiple. 
    

      
      
      
    

   
    

      
      
      
    

       files    ( ),  (   ),   (    media type - text/plain  image/jpeg). 
    

      
      
      
    

   
    

      
      
      
    

      ,   ,   .   ,  .         ,    ,    .  FileReader   ,   XMLHttpRequest,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

          FileReader,   “load”  ,     readAsText    .      result   . 
    

      
      
      
    

   
    

      
      
      
    

     Array.prototype.forEach    ,            file  reader   .        . 
    

      
      
      
    

   
    

      
      
      
    

    FileReaders    “error”,     .  error     error.           ,       (.  17): 
    

      
      
      
    

   
    

      
      
      
    

   function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); } 
    

      
      
      
    

   
    

      
      
      
    

       ,  slice    (..  blob)  reader. 
    

      
      
      
    

   
    

      
      
      
    

        
    

      
      
      
    

    HTML-   JavaScript      - –   ,   .           –              -. 
    

      
      
      
    

   
    

      
      
      
    

          ,  JavaScript    –        .     ,            .      20.       .       .  ? 
    

      
      
      
    

   
    

      
      
      
    

       ,      -        localStorage.        (   ),    : 
    

      
      
      
    

   
    

      
      
      
    

   localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username"); 
    

      
      
      
    

   
    

      
      
      
    

     localStorage ,    ,    removeItem     . 
    

      
      
      
    

   
    

      
      
      
    

        –     .  , ,     localStorage,           . 
    

      
      
      
    

   
    

      
      
      
    

        ,    .  ,    ,         ,     . 
    

      
      
      
    

   
    

      
      
      
    

          .      ,    .    JSON    localStorage.             .      . 
    

      
      
      
    

   
    

      
      
      
    

   : <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } //      var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script> 
    

      
      
      
    

   
    

      
      
      
    

      notes   localStorage,      –      « ».      localStorage  null.  null  JSON.parse,   null .         || . 
    

      
      
      
    

   
    

      
      
      
    

      note  (     ),       saveToStorage.    ,       ,     ,           – ,     . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,       “change”.   ,   “change” ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

        localStorage    sessionStorage.     ,   sessionStorage    ,       . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

   HTML       – , ,  ,  . 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript       .      “change”,     – “input”,      .     ,      .   value (    select)  checked (   )       . 
    

      
      
      
    

   
    

      
      
      
    

        “submit”.  JavaScript    preventDefault  ,    .         . 
    

      
      
      
    

   
    

      
      
      
    

             ,  FileReader         JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

    localStorage  sessionStorage       ,    .     (       ),   –   . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

    JavaScript 
    

      
      
      
    

    ,       JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

       ,     Function   10         .  ,  ,    ,  ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

      ,          .      ,      ,     .      ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> //      , //  'alert', 'document',  'scrollTo' var terms = []; for (var name in window) terms.push(name); //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    «»  
    

      
      
      
    

         ,      .   ( )   : 
    

      
      
      
    

   
    

      
      
      
    

   -   ,        ,  
    

      
      
      
    

   -   ,       ,     
    

      
      
      
    

   -   ,      ,  
    

      
      
      
    

   
    

      
      
      
    

     –        ,   ,  8 . 
    

      
      
      
    

   
    

      
      
      
    

    ,       ,        .  ,          ,  ,    ,      . 
    

      
      
      
    

   
    

      
      
      
    

    ,    .  Math.random     .         «   ».      ,        . 
    

      
      
      
    

   
    

      
      
      
    

   <div id="grid"></div> <button id="next"> </button> <script> //  . </script> 

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

 . HTML    ,      /        .          ,      . 
    

      
      
      
    

   
    

      
      
      
    

         .   type     .    : 
    

      
      
      
    

   
    

      
      
      
    

   text      
    

      
      
      
    

   password  ,  ,    
    

      
      
      
    

   checkbox  / 
    

      
      
      
    

   radio         
    

      
      
      
    

   file        
    

      
      
      
    

   
    

      
      
      
    

           .       .         (      ),     ,   JavaScript,           submit. 
    

      
      
      
    

   
    

      
      
      
    

   <p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p> 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript        .       . 
    

      
      
      
    

   
    

      
      
      
    

            .       ,           value. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea>    </textarea> 
    

      
      
      
    

   
    

      
      
      
    

         ,        . 
    

      
      
      
    

   <select> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

      ,   “change”. 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

         HTML,       .          , ..    . 
    

      
      
      
    

   
    

      
      
      
    

        ,      ,      .   -   .  ,     ,  ,   ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

      JavaScript   focus  blur.      DOM,    ,    .  document.activeElement   ,  . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script> 
    

      
      
      
    

   
    

      
      
      
    

      ,       -   .   JavaScript        ,   HTML    autofocus,      ,      .           ,      - . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" autofocus> 
    

      
      
      
    

   
    

      
      
      
    

           Tab.         tabindex.            OK,  ,      help. 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button> 
    

      
      
      
    

   
    

      
      
      
    

    ,    HTML   .   tabindex  ,      . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

        disabled,         DOM. 
    

      
      
      
    

   
    

      
      
      
    

   <button>   </button> <button disabled>  </button> 
    

      
      
      
    

   
    

      
      
      
    

          ,     ,     . 
    

      
      
      
    

   
    

      
      
      
    

              ,          ,      .   ,          ,      . 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

    ,    ,    DOM   form,     .  ,   ,   elements,    . 
    

      
      
      
    

   
    

      
      
      
    

    name  ,          .             elements,     ,    (   ),   map (   ). 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script> 
    

      
      
      
    

   
    

      
      
      
    

      type  submit    .   Enter       . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,     action,   GET  POST .      “submit”.     JavaScript,       ,    event preventDefault. 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     “submit”    .    ,             .               ,   XMLHttpRequest        . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

         text  password,    ,   .    DOM   value,          .       . 
    

      
      
      
    

   
    

      
      
      
    

      selectionStart  selectionEnd        .    ,   ,    . , 0   , 10 ,     10- .    ,    ,       .       . 
    

      
      
      
    

   
    

      
      
      
    

    , ,      Khasekhemwy,      .      ,    F2   “ Khasekhemwy”. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script> 
    

      
      
      
    

   
    

      
      
      
    

    replaceSelection      ,        ,     . 
    

      
      
      
    

   
    

      
      
      
    

    “change”           .      ,     .           “input”,       ,        . 
    

      
      
      
    

   
    

      
      
      
    

           ,     . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

     –   .         checked,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="checkbox" id="purple"> <label for="purple">  </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

            .  for    id .    label   ,       –     . 
    

      
      
      
    

   
    

      
      
      
    

      ,          ,         . 
    

      
      
      
    

   
    

      
      
      
    

   : <input type="radio" name="color" value="mediumpurple">  <input type="radio" name="color" value="lightgreen">  <input type="radio" name="color" value="lightblue">  <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script> 
    

      
      
      
    

   
    

      
      
      
    

    document.getElementsByName       name.    (   for,   forEach,     –   )       . ,       target,   ,   .       –       ,           ,   . 
    

      
      
      
    

   
    

      
      
      
    

    select 
    

      
      
      
    

    select    –       .        ,      . 
    

      
      
      
    

   
    

      
      
      
    

     select  ,     ,   .    multiple      ,   . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

                ,      . 
    

      
      
      
    

   
    

      
      
      
    

    size      ,    –        .  ,  size 3,     ,  ,    multiple. 
    

      
      
      
    

   
    

      
      
      
    

       .     value,     ,     ,    .. .  value     .            , ..          . 
    

      
      
      
    

   
    

      
      
      
    

                options.      selected, ,     .    ,       . 
    

      
      
      
    

   
    

      
      
      
    

          select         .  Ctrl ( Command  ),     . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

              .          JavaScript.      .           ,        ,      . 
    

      
      
      
    

   
    

      
      
      
    

            « »,        . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script> 
    

      
      
      
    

   
    

      
      
      
    

    files  –   (  ),    .   .      file,             multiple. 
    

      
      
      
    

   
    

      
      
      
    

       files    ( ),  (   ),   (    media type - text/plain  image/jpeg). 
    

      
      
      
    

   
    

      
      
      
    

      ,   ,   .   ,  .         ,    ,    .  FileReader   ,   XMLHttpRequest,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

          FileReader,   “load”  ,     readAsText    .      result   . 
    

      
      
      
    

   
    

      
      
      
    

     Array.prototype.forEach    ,            file  reader   .        . 
    

      
      
      
    

   
    

      
      
      
    

    FileReaders    “error”,     .  error     error.           ,       (.  17): 
    

      
      
      
    

   
    

      
      
      
    

   function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); } 
    

      
      
      
    

   
    

      
      
      
    

       ,  slice    (..  blob)  reader. 
    

      
      
      
    

   
    

      
      
      
    

        
    

      
      
      
    

    HTML-   JavaScript      - –   ,   .           –              -. 
    

      
      
      
    

   
    

      
      
      
    

          ,  JavaScript    –        .     ,            .      20.       .       .  ? 
    

      
      
      
    

   
    

      
      
      
    

       ,      -        localStorage.        (   ),    : 
    

      
      
      
    

   
    

      
      
      
    

   localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username"); 
    

      
      
      
    

   
    

      
      
      
    

     localStorage ,    ,    removeItem     . 
    

      
      
      
    

   
    

      
      
      
    

        –     .  , ,     localStorage,           . 
    

      
      
      
    

   
    

      
      
      
    

        ,    .  ,    ,         ,     . 
    

      
      
      
    

   
    

      
      
      
    

          .      ,    .    JSON    localStorage.             .      . 
    

      
      
      
    

   
    

      
      
      
    

   : <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } //      var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script> 
    

      
      
      
    

   
    

      
      
      
    

      notes   localStorage,      –      « ».      localStorage  null.  null  JSON.parse,   null .         || . 
    

      
      
      
    

   
    

      
      
      
    

      note  (     ),       saveToStorage.    ,       ,     ,           – ,     . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,       “change”.   ,   “change” ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

        localStorage    sessionStorage.     ,   sessionStorage    ,       . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

   HTML       – , ,  ,  . 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript       .      “change”,     – “input”,      .     ,      .   value (    select)  checked (   )       . 
    

      
      
      
    

   
    

      
      
      
    

        “submit”.  JavaScript    preventDefault  ,    .         . 
    

      
      
      
    

   
    

      
      
      
    

             ,  FileReader         JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

    localStorage  sessionStorage       ,    .     (       ),   –   . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

    JavaScript 
    

      
      
      
    

    ,       JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

       ,     Function   10         .  ,  ,    ,  ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

      ,          .      ,      ,     .      ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> //      , //  'alert', 'document',  'scrollTo' var terms = []; for (var name in window) terms.push(name); //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    «»  
    

      
      
      
    

         ,      .   ( )   : 
    

      
      
      
    

   
    

      
      
      
    

   -   ,        ,  
    

      
      
      
    

   -   ,       ,     
    

      
      
      
    

   -   ,      ,  
    

      
      
      
    

   
    

      
      
      
    

     –        ,   ,  8 . 
    

      
      
      
    

   
    

      
      
      
    

    ,       ,        .  ,          ,  ,    ,      . 
    

      
      
      
    

   
    

      
      
      
    

    ,    .  Math.random     .         «   ».      ,        . 
    

      
      
      
    

   
    

      
      
      
    

   <div id="grid"></div> <button id="next"> </button> <script> //  . </script> 

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

 . HTML    ,      /        .          ,      . 
    

      
      
      
    

   
    

      
      
      
    

         .   type     .    : 
    

      
      
      
    

   
    

      
      
      
    

   text      
    

      
      
      
    

   password  ,  ,    
    

      
      
      
    

   checkbox  / 
    

      
      
      
    

   radio         
    

      
      
      
    

   file        
    

      
      
      
    

   
    

      
      
      
    

           .       .         (      ),     ,   JavaScript,           submit. 
    

      
      
      
    

   
    

      
      
      
    

   <p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p> 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript        .       . 
    

      
      
      
    

   
    

      
      
      
    

            .       ,           value. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea>    </textarea> 
    

      
      
      
    

   
    

      
      
      
    

         ,        . 
    

      
      
      
    

   <select> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

      ,   “change”. 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

         HTML,       .          , ..    . 
    

      
      
      
    

   
    

      
      
      
    

        ,      ,      .   -   .  ,     ,  ,   ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

      JavaScript   focus  blur.      DOM,    ,    .  document.activeElement   ,  . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script> 
    

      
      
      
    

   
    

      
      
      
    

      ,       -   .   JavaScript        ,   HTML    autofocus,      ,      .           ,      - . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" autofocus> 
    

      
      
      
    

   
    

      
      
      
    

           Tab.         tabindex.            OK,  ,      help. 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button> 
    

      
      
      
    

   
    

      
      
      
    

    ,    HTML   .   tabindex  ,      . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

        disabled,         DOM. 
    

      
      
      
    

   
    

      
      
      
    

   <button>   </button> <button disabled>  </button> 
    

      
      
      
    

   
    

      
      
      
    

          ,     ,     . 
    

      
      
      
    

   
    

      
      
      
    

              ,          ,      .   ,          ,      . 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

    ,    ,    DOM   form,     .  ,   ,   elements,    . 
    

      
      
      
    

   
    

      
      
      
    

    name  ,          .             elements,     ,    (   ),   map (   ). 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script> 
    

      
      
      
    

   
    

      
      
      
    

      type  submit    .   Enter       . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,     action,   GET  POST .      “submit”.     JavaScript,       ,    event preventDefault. 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     “submit”    .    ,             .               ,   XMLHttpRequest        . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

         text  password,    ,   .    DOM   value,          .       . 
    

      
      
      
    

   
    

      
      
      
    

      selectionStart  selectionEnd        .    ,   ,    . , 0   , 10 ,     10- .    ,    ,       .       . 
    

      
      
      
    

   
    

      
      
      
    

    , ,      Khasekhemwy,      .      ,    F2   “ Khasekhemwy”. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script> 
    

      
      
      
    

   
    

      
      
      
    

    replaceSelection      ,        ,     . 
    

      
      
      
    

   
    

      
      
      
    

    “change”           .      ,     .           “input”,       ,        . 
    

      
      
      
    

   
    

      
      
      
    

           ,     . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

     –   .         checked,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="checkbox" id="purple"> <label for="purple">  </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

            .  for    id .    label   ,       –     . 
    

      
      
      
    

   
    

      
      
      
    

      ,          ,         . 
    

      
      
      
    

   
    

      
      
      
    

   : <input type="radio" name="color" value="mediumpurple">  <input type="radio" name="color" value="lightgreen">  <input type="radio" name="color" value="lightblue">  <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script> 
    

      
      
      
    

   
    

      
      
      
    

    document.getElementsByName       name.    (   for,   forEach,     –   )       . ,       target,   ,   .       –       ,           ,   . 
    

      
      
      
    

   
    

      
      
      
    

    select 
    

      
      
      
    

    select    –       .        ,      . 
    

      
      
      
    

   
    

      
      
      
    

     select  ,     ,   .    multiple      ,   . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

                ,      . 
    

      
      
      
    

   
    

      
      
      
    

    size      ,    –        .  ,  size 3,     ,  ,    multiple. 
    

      
      
      
    

   
    

      
      
      
    

       .     value,     ,     ,    .. .  value     .            , ..          . 
    

      
      
      
    

   
    

      
      
      
    

                options.      selected, ,     .    ,       . 
    

      
      
      
    

   
    

      
      
      
    

          select         .  Ctrl ( Command  ),     . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

              .          JavaScript.      .           ,        ,      . 
    

      
      
      
    

   
    

      
      
      
    

            « »,        . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script> 
    

      
      
      
    

   
    

      
      
      
    

    files  –   (  ),    .   .      file,             multiple. 
    

      
      
      
    

   
    

      
      
      
    

       files    ( ),  (   ),   (    media type - text/plain  image/jpeg). 
    

      
      
      
    

   
    

      
      
      
    

      ,   ,   .   ,  .         ,    ,    .  FileReader   ,   XMLHttpRequest,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

          FileReader,   “load”  ,     readAsText    .      result   . 
    

      
      
      
    

   
    

      
      
      
    

     Array.prototype.forEach    ,            file  reader   .        . 
    

      
      
      
    

   
    

      
      
      
    

    FileReaders    “error”,     .  error     error.           ,       (.  17): 
    

      
      
      
    

   
    

      
      
      
    

   function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); } 
    

      
      
      
    

   
    

      
      
      
    

       ,  slice    (..  blob)  reader. 
    

      
      
      
    

   
    

      
      
      
    

        
    

      
      
      
    

    HTML-   JavaScript      - –   ,   .           –              -. 
    

      
      
      
    

   
    

      
      
      
    

          ,  JavaScript    –        .     ,            .      20.       .       .  ? 
    

      
      
      
    

   
    

      
      
      
    

       ,      -        localStorage.        (   ),    : 
    

      
      
      
    

   
    

      
      
      
    

   localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username"); 
    

      
      
      
    

   
    

      
      
      
    

     localStorage ,    ,    removeItem     . 
    

      
      
      
    

   
    

      
      
      
    

        –     .  , ,     localStorage,           . 
    

      
      
      
    

   
    

      
      
      
    

        ,    .  ,    ,         ,     . 
    

      
      
      
    

   
    

      
      
      
    

          .      ,    .    JSON    localStorage.             .      . 
    

      
      
      
    

   
    

      
      
      
    

   : <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } //      var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script> 
    

      
      
      
    

   
    

      
      
      
    

      notes   localStorage,      –      « ».      localStorage  null.  null  JSON.parse,   null .         || . 
    

      
      
      
    

   
    

      
      
      
    

      note  (     ),       saveToStorage.    ,       ,     ,           – ,     . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,       “change”.   ,   “change” ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

        localStorage    sessionStorage.     ,   sessionStorage    ,       . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

   HTML       – , ,  ,  . 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript       .      “change”,     – “input”,      .     ,      .   value (    select)  checked (   )       . 
    

      
      
      
    

   
    

      
      
      
    

        “submit”.  JavaScript    preventDefault  ,    .         . 
    

      
      
      
    

   
    

      
      
      
    

             ,  FileReader         JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

    localStorage  sessionStorage       ,    .     (       ),   –   . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

    JavaScript 
    

      
      
      
    

    ,       JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

       ,     Function   10         .  ,  ,    ,  ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

      ,          .      ,      ,     .      ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> //      , //  'alert', 'document',  'scrollTo' var terms = []; for (var name in window) terms.push(name); //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    «»  
    

      
      
      
    

         ,      .   ( )   : 
    

      
      
      
    

   
    

      
      
      
    

   -   ,        ,  
    

      
      
      
    

   -   ,       ,     
    

      
      
      
    

   -   ,      ,  
    

      
      
      
    

   
    

      
      
      
    

     –        ,   ,  8 . 
    

      
      
      
    

   
    

      
      
      
    

    ,       ,        .  ,          ,  ,    ,      . 
    

      
      
      
    

   
    

      
      
      
    

    ,    .  Math.random     .         «   ».      ,        . 
    

      
      
      
    

   
    

      
      
      
    

   <div id="grid"></div> <button id="next"> </button> <script> //  . </script> 

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

 . HTML    ,      /        .          ,      . 
    

      
      
      
    

   
    

      
      
      
    

         .   type     .    : 
    

      
      
      
    

   
    

      
      
      
    

   text      
    

      
      
      
    

   password  ,  ,    
    

      
      
      
    

   checkbox  / 
    

      
      
      
    

   radio         
    

      
      
      
    

   file        
    

      
      
      
    

   
    

      
      
      
    

           .       .         (      ),     ,   JavaScript,           submit. 
    

      
      
      
    

   
    

      
      
      
    

   <p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p> 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript        .       . 
    

      
      
      
    

   
    

      
      
      
    

            .       ,           value. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea>    </textarea> 
    

      
      
      
    

   
    

      
      
      
    

         ,        . 
    

      
      
      
    

   <select> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

      ,   “change”. 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

         HTML,       .          , ..    . 
    

      
      
      
    

   
    

      
      
      
    

        ,      ,      .   -   .  ,     ,  ,   ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

      JavaScript   focus  blur.      DOM,    ,    .  document.activeElement   ,  . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script> 
    

      
      
      
    

   
    

      
      
      
    

      ,       -   .   JavaScript        ,   HTML    autofocus,      ,      .           ,      - . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" autofocus> 
    

      
      
      
    

   
    

      
      
      
    

           Tab.         tabindex.            OK,  ,      help. 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button> 
    

      
      
      
    

   
    

      
      
      
    

    ,    HTML   .   tabindex  ,      . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

        disabled,         DOM. 
    

      
      
      
    

   
    

      
      
      
    

   <button>   </button> <button disabled>  </button> 
    

      
      
      
    

   
    

      
      
      
    

          ,     ,     . 
    

      
      
      
    

   
    

      
      
      
    

              ,          ,      .   ,          ,      . 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

    ,    ,    DOM   form,     .  ,   ,   elements,    . 
    

      
      
      
    

   
    

      
      
      
    

    name  ,          .             elements,     ,    (   ),   map (   ). 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script> 
    

      
      
      
    

   
    

      
      
      
    

      type  submit    .   Enter       . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,     action,   GET  POST .      “submit”.     JavaScript,       ,    event preventDefault. 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     “submit”    .    ,             .               ,   XMLHttpRequest        . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

         text  password,    ,   .    DOM   value,          .       . 
    

      
      
      
    

   
    

      
      
      
    

      selectionStart  selectionEnd        .    ,   ,    . , 0   , 10 ,     10- .    ,    ,       .       . 
    

      
      
      
    

   
    

      
      
      
    

    , ,      Khasekhemwy,      .      ,    F2   “ Khasekhemwy”. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script> 
    

      
      
      
    

   
    

      
      
      
    

    replaceSelection      ,        ,     . 
    

      
      
      
    

   
    

      
      
      
    

    “change”           .      ,     .           “input”,       ,        . 
    

      
      
      
    

   
    

      
      
      
    

           ,     . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

     –   .         checked,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="checkbox" id="purple"> <label for="purple">  </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

            .  for    id .    label   ,       –     . 
    

      
      
      
    

   
    

      
      
      
    

      ,          ,         . 
    

      
      
      
    

   
    

      
      
      
    

   : <input type="radio" name="color" value="mediumpurple">  <input type="radio" name="color" value="lightgreen">  <input type="radio" name="color" value="lightblue">  <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script> 
    

      
      
      
    

   
    

      
      
      
    

    document.getElementsByName       name.    (   for,   forEach,     –   )       . ,       target,   ,   .       –       ,           ,   . 
    

      
      
      
    

   
    

      
      
      
    

    select 
    

      
      
      
    

    select    –       .        ,      . 
    

      
      
      
    

   
    

      
      
      
    

     select  ,     ,   .    multiple      ,   . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

                ,      . 
    

      
      
      
    

   
    

      
      
      
    

    size      ,    –        .  ,  size 3,     ,  ,    multiple. 
    

      
      
      
    

   
    

      
      
      
    

       .     value,     ,     ,    .. .  value     .            , ..          . 
    

      
      
      
    

   
    

      
      
      
    

                options.      selected, ,     .    ,       . 
    

      
      
      
    

   
    

      
      
      
    

          select         .  Ctrl ( Command  ),     . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

              .          JavaScript.      .           ,        ,      . 
    

      
      
      
    

   
    

      
      
      
    

            « »,        . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script> 
    

      
      
      
    

   
    

      
      
      
    

    files  –   (  ),    .   .      file,             multiple. 
    

      
      
      
    

   
    

      
      
      
    

       files    ( ),  (   ),   (    media type - text/plain  image/jpeg). 
    

      
      
      
    

   
    

      
      
      
    

      ,   ,   .   ,  .         ,    ,    .  FileReader   ,   XMLHttpRequest,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

          FileReader,   “load”  ,     readAsText    .      result   . 
    

      
      
      
    

   
    

      
      
      
    

     Array.prototype.forEach    ,            file  reader   .        . 
    

      
      
      
    

   
    

      
      
      
    

    FileReaders    “error”,     .  error     error.           ,       (.  17): 
    

      
      
      
    

   
    

      
      
      
    

   function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); } 
    

      
      
      
    

   
    

      
      
      
    

       ,  slice    (..  blob)  reader. 
    

      
      
      
    

   
    

      
      
      
    

        
    

      
      
      
    

    HTML-   JavaScript      - –   ,   .           –              -. 
    

      
      
      
    

   
    

      
      
      
    

          ,  JavaScript    –        .     ,            .      20.       .       .  ? 
    

      
      
      
    

   
    

      
      
      
    

       ,      -        localStorage.        (   ),    : 
    

      
      
      
    

   
    

      
      
      
    

   localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username"); 
    

      
      
      
    

   
    

      
      
      
    

     localStorage ,    ,    removeItem     . 
    

      
      
      
    

   
    

      
      
      
    

        –     .  , ,     localStorage,           . 
    

      
      
      
    

   
    

      
      
      
    

        ,    .  ,    ,         ,     . 
    

      
      
      
    

   
    

      
      
      
    

          .      ,    .    JSON    localStorage.             .      . 
    

      
      
      
    

   
    

      
      
      
    

   : <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } //      var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script> 
    

      
      
      
    

   
    

      
      
      
    

      notes   localStorage,      –      « ».      localStorage  null.  null  JSON.parse,   null .         || . 
    

      
      
      
    

   
    

      
      
      
    

      note  (     ),       saveToStorage.    ,       ,     ,           – ,     . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,       “change”.   ,   “change” ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

        localStorage    sessionStorage.     ,   sessionStorage    ,       . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

   HTML       – , ,  ,  . 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript       .      “change”,     – “input”,      .     ,      .   value (    select)  checked (   )       . 
    

      
      
      
    

   
    

      
      
      
    

        “submit”.  JavaScript    preventDefault  ,    .         . 
    

      
      
      
    

   
    

      
      
      
    

             ,  FileReader         JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

    localStorage  sessionStorage       ,    .     (       ),   –   . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

    JavaScript 
    

      
      
      
    

    ,       JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

       ,     Function   10         .  ,  ,    ,  ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

      ,          .      ,      ,     .      ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> //      , //  'alert', 'document',  'scrollTo' var terms = []; for (var name in window) terms.push(name); //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    «»  
    

      
      
      
    

         ,      .   ( )   : 
    

      
      
      
    

   
    

      
      
      
    

   -   ,        ,  
    

      
      
      
    

   -   ,       ,     
    

      
      
      
    

   -   ,      ,  
    

      
      
      
    

   
    

      
      
      
    

     –        ,   ,  8 . 
    

      
      
      
    

   
    

      
      
      
    

    ,       ,        .  ,          ,  ,    ,      . 
    

      
      
      
    

   
    

      
      
      
    

    ,    .  Math.random     .         «   ».      ,        . 
    

      
      
      
    

   
    

      
      
      
    

   <div id="grid"></div> <button id="next"> </button> <script> //  . </script> 

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

 . HTML    ,      /        .          ,      . 
    

      
      
      
    

   
    

      
      
      
    

         .   type     .    : 
    

      
      
      
    

   
    

      
      
      
    

   text      
    

      
      
      
    

   password  ,  ,    
    

      
      
      
    

   checkbox  / 
    

      
      
      
    

   radio         
    

      
      
      
    

   file        
    

      
      
      
    

   
    

      
      
      
    

           .       .         (      ),     ,   JavaScript,           submit. 
    

      
      
      
    

   
    

      
      
      
    

   <p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p> 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript        .       . 
    

      
      
      
    

   
    

      
      
      
    

            .       ,           value. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea>    </textarea> 
    

      
      
      
    

   
    

      
      
      
    

         ,        . 
    

      
      
      
    

   <select> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

      ,   “change”. 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

         HTML,       .          , ..    . 
    

      
      
      
    

   
    

      
      
      
    

        ,      ,      .   -   .  ,     ,  ,   ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

      JavaScript   focus  blur.      DOM,    ,    .  document.activeElement   ,  . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script> 
    

      
      
      
    

   
    

      
      
      
    

      ,       -   .   JavaScript        ,   HTML    autofocus,      ,      .           ,      - . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" autofocus> 
    

      
      
      
    

   
    

      
      
      
    

           Tab.         tabindex.            OK,  ,      help. 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button> 
    

      
      
      
    

   
    

      
      
      
    

    ,    HTML   .   tabindex  ,      . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

        disabled,         DOM. 
    

      
      
      
    

   
    

      
      
      
    

   <button>   </button> <button disabled>  </button> 
    

      
      
      
    

   
    

      
      
      
    

          ,     ,     . 
    

      
      
      
    

   
    

      
      
      
    

              ,          ,      .   ,          ,      . 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

    ,    ,    DOM   form,     .  ,   ,   elements,    . 
    

      
      
      
    

   
    

      
      
      
    

    name  ,          .             elements,     ,    (   ),   map (   ). 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script> 
    

      
      
      
    

   
    

      
      
      
    

      type  submit    .   Enter       . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,     action,   GET  POST .      “submit”.     JavaScript,       ,    event preventDefault. 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     “submit”    .    ,             .               ,   XMLHttpRequest        . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

         text  password,    ,   .    DOM   value,          .       . 
    

      
      
      
    

   
    

      
      
      
    

      selectionStart  selectionEnd        .    ,   ,    . , 0   , 10 ,     10- .    ,    ,       .       . 
    

      
      
      
    

   
    

      
      
      
    

    , ,      Khasekhemwy,      .      ,    F2   “ Khasekhemwy”. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script> 
    

      
      
      
    

   
    

      
      
      
    

    replaceSelection      ,        ,     . 
    

      
      
      
    

   
    

      
      
      
    

    “change”           .      ,     .           “input”,       ,        . 
    

      
      
      
    

   
    

      
      
      
    

           ,     . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

     –   .         checked,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="checkbox" id="purple"> <label for="purple">  </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

            .  for    id .    label   ,       –     . 
    

      
      
      
    

   
    

      
      
      
    

      ,          ,         . 
    

      
      
      
    

   
    

      
      
      
    

   : <input type="radio" name="color" value="mediumpurple">  <input type="radio" name="color" value="lightgreen">  <input type="radio" name="color" value="lightblue">  <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script> 
    

      
      
      
    

   
    

      
      
      
    

    document.getElementsByName       name.    (   for,   forEach,     –   )       . ,       target,   ,   .       –       ,           ,   . 
    

      
      
      
    

   
    

      
      
      
    

    select 
    

      
      
      
    

    select    –       .        ,      . 
    

      
      
      
    

   
    

      
      
      
    

     select  ,     ,   .    multiple      ,   . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

                ,      . 
    

      
      
      
    

   
    

      
      
      
    

    size      ,    –        .  ,  size 3,     ,  ,    multiple. 
    

      
      
      
    

   
    

      
      
      
    

       .     value,     ,     ,    .. .  value     .            , ..          . 
    

      
      
      
    

   
    

      
      
      
    

                options.      selected, ,     .    ,       . 
    

      
      
      
    

   
    

      
      
      
    

          select         .  Ctrl ( Command  ),     . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

              .          JavaScript.      .           ,        ,      . 
    

      
      
      
    

   
    

      
      
      
    

            « »,        . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script> 
    

      
      
      
    

   
    

      
      
      
    

    files  –   (  ),    .   .      file,             multiple. 
    

      
      
      
    

   
    

      
      
      
    

       files    ( ),  (   ),   (    media type - text/plain  image/jpeg). 
    

      
      
      
    

   
    

      
      
      
    

      ,   ,   .   ,  .         ,    ,    .  FileReader   ,   XMLHttpRequest,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

          FileReader,   “load”  ,     readAsText    .      result   . 
    

      
      
      
    

   
    

      
      
      
    

     Array.prototype.forEach    ,            file  reader   .        . 
    

      
      
      
    

   
    

      
      
      
    

    FileReaders    “error”,     .  error     error.           ,       (.  17): 
    

      
      
      
    

   
    

      
      
      
    

   function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); } 
    

      
      
      
    

   
    

      
      
      
    

       ,  slice    (..  blob)  reader. 
    

      
      
      
    

   
    

      
      
      
    

        
    

      
      
      
    

    HTML-   JavaScript      - –   ,   .           –              -. 
    

      
      
      
    

   
    

      
      
      
    

          ,  JavaScript    –        .     ,            .      20.       .       .  ? 
    

      
      
      
    

   
    

      
      
      
    

       ,      -        localStorage.        (   ),    : 
    

      
      
      
    

   
    

      
      
      
    

   localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username"); 
    

      
      
      
    

   
    

      
      
      
    

     localStorage ,    ,    removeItem     . 
    

      
      
      
    

   
    

      
      
      
    

        –     .  , ,     localStorage,           . 
    

      
      
      
    

   
    

      
      
      
    

        ,    .  ,    ,         ,     . 
    

      
      
      
    

   
    

      
      
      
    

          .      ,    .    JSON    localStorage.             .      . 
    

      
      
      
    

   
    

      
      
      
    

   : <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } //      var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script> 
    

      
      
      
    

   
    

      
      
      
    

      notes   localStorage,      –      « ».      localStorage  null.  null  JSON.parse,   null .         || . 
    

      
      
      
    

   
    

      
      
      
    

      note  (     ),       saveToStorage.    ,       ,     ,           – ,     . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,       “change”.   ,   “change” ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

        localStorage    sessionStorage.     ,   sessionStorage    ,       . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

   HTML       – , ,  ,  . 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript       .      “change”,     – “input”,      .     ,      .   value (    select)  checked (   )       . 
    

      
      
      
    

   
    

      
      
      
    

        “submit”.  JavaScript    preventDefault  ,    .         . 
    

      
      
      
    

   
    

      
      
      
    

             ,  FileReader         JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

    localStorage  sessionStorage       ,    .     (       ),   –   . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

    JavaScript 
    

      
      
      
    

    ,       JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

       ,     Function   10         .  ,  ,    ,  ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

      ,          .      ,      ,     .      ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> //      , //  'alert', 'document',  'scrollTo' var terms = []; for (var name in window) terms.push(name); //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    «»  
    

      
      
      
    

         ,      .   ( )   : 
    

      
      
      
    

   
    

      
      
      
    

   -   ,        ,  
    

      
      
      
    

   -   ,       ,     
    

      
      
      
    

   -   ,      ,  
    

      
      
      
    

   
    

      
      
      
    

     –        ,   ,  8 . 
    

      
      
      
    

   
    

      
      
      
    

    ,       ,        .  ,          ,  ,    ,      . 
    

      
      
      
    

   
    

      
      
      
    

    ,    .  Math.random     .         «   ».      ,        . 
    

      
      
      
    

   
    

      
      
      
    

   <div id="grid"></div> <button id="next"> </button> <script> //  . </script> 

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

 . HTML    ,      /        .          ,      . 
    

      
      
      
    

   
    

      
      
      
    

         .   type     .    : 
    

      
      
      
    

   
    

      
      
      
    

   text      
    

      
      
      
    

   password  ,  ,    
    

      
      
      
    

   checkbox  / 
    

      
      
      
    

   radio         
    

      
      
      
    

   file        
    

      
      
      
    

   
    

      
      
      
    

           .       .         (      ),     ,   JavaScript,           submit. 
    

      
      
      
    

   
    

      
      
      
    

   <p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p> 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript        .       . 
    

      
      
      
    

   
    

      
      
      
    

            .       ,           value. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea>    </textarea> 
    

      
      
      
    

   
    

      
      
      
    

         ,        . 
    

      
      
      
    

   <select> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

      ,   “change”. 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

         HTML,       .          , ..    . 
    

      
      
      
    

   
    

      
      
      
    

        ,      ,      .   -   .  ,     ,  ,   ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

      JavaScript   focus  blur.      DOM,    ,    .  document.activeElement   ,  . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script> 
    

      
      
      
    

   
    

      
      
      
    

      ,       -   .   JavaScript        ,   HTML    autofocus,      ,      .           ,      - . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" autofocus> 
    

      
      
      
    

   
    

      
      
      
    

           Tab.         tabindex.            OK,  ,      help. 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button> 
    

      
      
      
    

   
    

      
      
      
    

    ,    HTML   .   tabindex  ,      . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

        disabled,         DOM. 
    

      
      
      
    

   
    

      
      
      
    

   <button>   </button> <button disabled>  </button> 
    

      
      
      
    

   
    

      
      
      
    

          ,     ,     . 
    

      
      
      
    

   
    

      
      
      
    

              ,          ,      .   ,          ,      . 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

    ,    ,    DOM   form,     .  ,   ,   elements,    . 
    

      
      
      
    

   
    

      
      
      
    

    name  ,          .             elements,     ,    (   ),   map (   ). 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script> 
    

      
      
      
    

   
    

      
      
      
    

      type  submit    .   Enter       . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,     action,   GET  POST .      “submit”.     JavaScript,       ,    event preventDefault. 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     “submit”    .    ,             .               ,   XMLHttpRequest        . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

         text  password,    ,   .    DOM   value,          .       . 
    

      
      
      
    

   
    

      
      
      
    

      selectionStart  selectionEnd        .    ,   ,    . , 0   , 10 ,     10- .    ,    ,       .       . 
    

      
      
      
    

   
    

      
      
      
    

    , ,      Khasekhemwy,      .      ,    F2   “ Khasekhemwy”. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script> 
    

      
      
      
    

   
    

      
      
      
    

    replaceSelection      ,        ,     . 
    

      
      
      
    

   
    

      
      
      
    

    “change”           .      ,     .           “input”,       ,        . 
    

      
      
      
    

   
    

      
      
      
    

           ,     . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

     –   .         checked,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="checkbox" id="purple"> <label for="purple">  </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

            .  for    id .    label   ,       –     . 
    

      
      
      
    

   
    

      
      
      
    

      ,          ,         . 
    

      
      
      
    

   
    

      
      
      
    

   : <input type="radio" name="color" value="mediumpurple">  <input type="radio" name="color" value="lightgreen">  <input type="radio" name="color" value="lightblue">  <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script> 
    

      
      
      
    

   
    

      
      
      
    

    document.getElementsByName       name.    (   for,   forEach,     –   )       . ,       target,   ,   .       –       ,           ,   . 
    

      
      
      
    

   
    

      
      
      
    

    select 
    

      
      
      
    

    select    –       .        ,      . 
    

      
      
      
    

   
    

      
      
      
    

     select  ,     ,   .    multiple      ,   . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

                ,      . 
    

      
      
      
    

   
    

      
      
      
    

    size      ,    –        .  ,  size 3,     ,  ,    multiple. 
    

      
      
      
    

   
    

      
      
      
    

       .     value,     ,     ,    .. .  value     .            , ..          . 
    

      
      
      
    

   
    

      
      
      
    

                options.      selected, ,     .    ,       . 
    

      
      
      
    

   
    

      
      
      
    

          select         .  Ctrl ( Command  ),     . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

              .          JavaScript.      .           ,        ,      . 
    

      
      
      
    

   
    

      
      
      
    

            « »,        . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script> 
    

      
      
      
    

   
    

      
      
      
    

    files  –   (  ),    .   .      file,             multiple. 
    

      
      
      
    

   
    

      
      
      
    

       files    ( ),  (   ),   (    media type - text/plain  image/jpeg). 
    

      
      
      
    

   
    

      
      
      
    

      ,   ,   .   ,  .         ,    ,    .  FileReader   ,   XMLHttpRequest,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

          FileReader,   “load”  ,     readAsText    .      result   . 
    

      
      
      
    

   
    

      
      
      
    

     Array.prototype.forEach    ,            file  reader   .        . 
    

      
      
      
    

   
    

      
      
      
    

    FileReaders    “error”,     .  error     error.           ,       (.  17): 
    

      
      
      
    

   
    

      
      
      
    

   function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); } 
    

      
      
      
    

   
    

      
      
      
    

       ,  slice    (..  blob)  reader. 
    

      
      
      
    

   
    

      
      
      
    

        
    

      
      
      
    

    HTML-   JavaScript      - –   ,   .           –              -. 
    

      
      
      
    

   
    

      
      
      
    

          ,  JavaScript    –        .     ,            .      20.       .       .  ? 
    

      
      
      
    

   
    

      
      
      
    

       ,      -        localStorage.        (   ),    : 
    

      
      
      
    

   
    

      
      
      
    

   localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username"); 
    

      
      
      
    

   
    

      
      
      
    

     localStorage ,    ,    removeItem     . 
    

      
      
      
    

   
    

      
      
      
    

        –     .  , ,     localStorage,           . 
    

      
      
      
    

   
    

      
      
      
    

        ,    .  ,    ,         ,     . 
    

      
      
      
    

   
    

      
      
      
    

          .      ,    .    JSON    localStorage.             .      . 
    

      
      
      
    

   
    

      
      
      
    

   : <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } //      var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script> 
    

      
      
      
    

   
    

      
      
      
    

      notes   localStorage,      –      « ».      localStorage  null.  null  JSON.parse,   null .         || . 
    

      
      
      
    

   
    

      
      
      
    

      note  (     ),       saveToStorage.    ,       ,     ,           – ,     . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,       “change”.   ,   “change” ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

        localStorage    sessionStorage.     ,   sessionStorage    ,       . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

   HTML       – , ,  ,  . 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript       .      “change”,     – “input”,      .     ,      .   value (    select)  checked (   )       . 
    

      
      
      
    

   
    

      
      
      
    

        “submit”.  JavaScript    preventDefault  ,    .         . 
    

      
      
      
    

   
    

      
      
      
    

             ,  FileReader         JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

    localStorage  sessionStorage       ,    .     (       ),   –   . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

    JavaScript 
    

      
      
      
    

    ,       JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

       ,     Function   10         .  ,  ,    ,  ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

      ,          .      ,      ,     .      ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> //      , //  'alert', 'document',  'scrollTo' var terms = []; for (var name in window) terms.push(name); //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    «»  
    

      
      
      
    

         ,      .   ( )   : 
    

      
      
      
    

   
    

      
      
      
    

   -   ,        ,  
    

      
      
      
    

   -   ,       ,     
    

      
      
      
    

   -   ,      ,  
    

      
      
      
    

   
    

      
      
      
    

     –        ,   ,  8 . 
    

      
      
      
    

   
    

      
      
      
    

    ,       ,        .  ,          ,  ,    ,      . 
    

      
      
      
    

   
    

      
      
      
    

    ,    .  Math.random     .         «   ».      ,        . 
    

      
      
      
    

   
    

      
      
      
    

   <div id="grid"></div> <button id="next"> </button> <script> //  . </script> 

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

 . HTML    ,      /        .          ,      . 
    

      
      
      
    

   
    

      
      
      
    

         .   type     .    : 
    

      
      
      
    

   
    

      
      
      
    

   text      
    

      
      
      
    

   password  ,  ,    
    

      
      
      
    

   checkbox  / 
    

      
      
      
    

   radio         
    

      
      
      
    

   file        
    

      
      
      
    

   
    

      
      
      
    

           .       .         (      ),     ,   JavaScript,           submit. 
    

      
      
      
    

   
    

      
      
      
    

   <p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p> 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript        .       . 
    

      
      
      
    

   
    

      
      
      
    

            .       ,           value. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea>    </textarea> 
    

      
      
      
    

   
    

      
      
      
    

         ,        . 
    

      
      
      
    

   <select> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

      ,   “change”. 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

         HTML,       .          , ..    . 
    

      
      
      
    

   
    

      
      
      
    

        ,      ,      .   -   .  ,     ,  ,   ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

      JavaScript   focus  blur.      DOM,    ,    .  document.activeElement   ,  . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script> 
    

      
      
      
    

   
    

      
      
      
    

      ,       -   .   JavaScript        ,   HTML    autofocus,      ,      .           ,      - . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" autofocus> 
    

      
      
      
    

   
    

      
      
      
    

           Tab.         tabindex.            OK,  ,      help. 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button> 
    

      
      
      
    

   
    

      
      
      
    

    ,    HTML   .   tabindex  ,      . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

        disabled,         DOM. 
    

      
      
      
    

   
    

      
      
      
    

   <button>   </button> <button disabled>  </button> 
    

      
      
      
    

   
    

      
      
      
    

          ,     ,     . 
    

      
      
      
    

   
    

      
      
      
    

              ,          ,      .   ,          ,      . 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

    ,    ,    DOM   form,     .  ,   ,   elements,    . 
    

      
      
      
    

   
    

      
      
      
    

    name  ,          .             elements,     ,    (   ),   map (   ). 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script> 
    

      
      
      
    

   
    

      
      
      
    

      type  submit    .   Enter       . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,     action,   GET  POST .      “submit”.     JavaScript,       ,    event preventDefault. 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     “submit”    .    ,             .               ,   XMLHttpRequest        . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

         text  password,    ,   .    DOM   value,          .       . 
    

      
      
      
    

   
    

      
      
      
    

      selectionStart  selectionEnd        .    ,   ,    . , 0   , 10 ,     10- .    ,    ,       .       . 
    

      
      
      
    

   
    

      
      
      
    

    , ,      Khasekhemwy,      .      ,    F2   “ Khasekhemwy”. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script> 
    

      
      
      
    

   
    

      
      
      
    

    replaceSelection      ,        ,     . 
    

      
      
      
    

   
    

      
      
      
    

    “change”           .      ,     .           “input”,       ,        . 
    

      
      
      
    

   
    

      
      
      
    

           ,     . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

     –   .         checked,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="checkbox" id="purple"> <label for="purple">  </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

            .  for    id .    label   ,       –     . 
    

      
      
      
    

   
    

      
      
      
    

      ,          ,         . 
    

      
      
      
    

   
    

      
      
      
    

   : <input type="radio" name="color" value="mediumpurple">  <input type="radio" name="color" value="lightgreen">  <input type="radio" name="color" value="lightblue">  <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script> 
    

      
      
      
    

   
    

      
      
      
    

    document.getElementsByName       name.    (   for,   forEach,     –   )       . ,       target,   ,   .       –       ,           ,   . 
    

      
      
      
    

   
    

      
      
      
    

    select 
    

      
      
      
    

    select    –       .        ,      . 
    

      
      
      
    

   
    

      
      
      
    

     select  ,     ,   .    multiple      ,   . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

                ,      . 
    

      
      
      
    

   
    

      
      
      
    

    size      ,    –        .  ,  size 3,     ,  ,    multiple. 
    

      
      
      
    

   
    

      
      
      
    

       .     value,     ,     ,    .. .  value     .            , ..          . 
    

      
      
      
    

   
    

      
      
      
    

                options.      selected, ,     .    ,       . 
    

      
      
      
    

   
    

      
      
      
    

          select         .  Ctrl ( Command  ),     . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

              .          JavaScript.      .           ,        ,      . 
    

      
      
      
    

   
    

      
      
      
    

            « »,        . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script> 
    

      
      
      
    

   
    

      
      
      
    

    files  –   (  ),    .   .      file,             multiple. 
    

      
      
      
    

   
    

      
      
      
    

       files    ( ),  (   ),   (    media type - text/plain  image/jpeg). 
    

      
      
      
    

   
    

      
      
      
    

      ,   ,   .   ,  .         ,    ,    .  FileReader   ,   XMLHttpRequest,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

          FileReader,   “load”  ,     readAsText    .      result   . 
    

      
      
      
    

   
    

      
      
      
    

     Array.prototype.forEach    ,            file  reader   .        . 
    

      
      
      
    

   
    

      
      
      
    

    FileReaders    “error”,     .  error     error.           ,       (.  17): 
    

      
      
      
    

   
    

      
      
      
    

   function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); } 
    

      
      
      
    

   
    

      
      
      
    

       ,  slice    (..  blob)  reader. 
    

      
      
      
    

   
    

      
      
      
    

        
    

      
      
      
    

    HTML-   JavaScript      - –   ,   .           –              -. 
    

      
      
      
    

   
    

      
      
      
    

          ,  JavaScript    –        .     ,            .      20.       .       .  ? 
    

      
      
      
    

   
    

      
      
      
    

       ,      -        localStorage.        (   ),    : 
    

      
      
      
    

   
    

      
      
      
    

   localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username"); 
    

      
      
      
    

   
    

      
      
      
    

     localStorage ,    ,    removeItem     . 
    

      
      
      
    

   
    

      
      
      
    

        –     .  , ,     localStorage,           . 
    

      
      
      
    

   
    

      
      
      
    

        ,    .  ,    ,         ,     . 
    

      
      
      
    

   
    

      
      
      
    

          .      ,    .    JSON    localStorage.             .      . 
    

      
      
      
    

   
    

      
      
      
    

   : <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } //      var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script> 
    

      
      
      
    

   
    

      
      
      
    

      notes   localStorage,      –      « ».      localStorage  null.  null  JSON.parse,   null .         || . 
    

      
      
      
    

   
    

      
      
      
    

      note  (     ),       saveToStorage.    ,       ,     ,           – ,     . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,       “change”.   ,   “change” ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

        localStorage    sessionStorage.     ,   sessionStorage    ,       . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

   HTML       – , ,  ,  . 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript       .      “change”,     – “input”,      .     ,      .   value (    select)  checked (   )       . 
    

      
      
      
    

   
    

      
      
      
    

        “submit”.  JavaScript    preventDefault  ,    .         . 
    

      
      
      
    

   
    

      
      
      
    

             ,  FileReader         JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

    localStorage  sessionStorage       ,    .     (       ),   –   . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

    JavaScript 
    

      
      
      
    

    ,       JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

       ,     Function   10         .  ,  ,    ,  ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

      ,          .      ,      ,     .      ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> //      , //  'alert', 'document',  'scrollTo' var terms = []; for (var name in window) terms.push(name); //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    «»  
    

      
      
      
    

         ,      .   ( )   : 
    

      
      
      
    

   
    

      
      
      
    

   -   ,        ,  
    

      
      
      
    

   -   ,       ,     
    

      
      
      
    

   -   ,      ,  
    

      
      
      
    

   
    

      
      
      
    

     –        ,   ,  8 . 
    

      
      
      
    

   
    

      
      
      
    

    ,       ,        .  ,          ,  ,    ,      . 
    

      
      
      
    

   
    

      
      
      
    

    ,    .  Math.random     .         «   ».      ,        . 
    

      
      
      
    

   
    

      
      
      
    

   <div id="grid"></div> <button id="next"> </button> <script> //  . </script> 

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

 . HTML    ,      /        .          ,      . 
    

      
      
      
    

   
    

      
      
      
    

         .   type     .    : 
    

      
      
      
    

   
    

      
      
      
    

   text      
    

      
      
      
    

   password  ,  ,    
    

      
      
      
    

   checkbox  / 
    

      
      
      
    

   radio         
    

      
      
      
    

   file        
    

      
      
      
    

   
    

      
      
      
    

           .       .         (      ),     ,   JavaScript,           submit. 
    

      
      
      
    

   
    

      
      
      
    

   <p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p> 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript        .       . 
    

      
      
      
    

   
    

      
      
      
    

            .       ,           value. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea>    </textarea> 
    

      
      
      
    

   
    

      
      
      
    

         ,        . 
    

      
      
      
    

   <select> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

      ,   “change”. 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

         HTML,       .          , ..    . 
    

      
      
      
    

   
    

      
      
      
    

        ,      ,      .   -   .  ,     ,  ,   ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

      JavaScript   focus  blur.      DOM,    ,    .  document.activeElement   ,  . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script> 
    

      
      
      
    

   
    

      
      
      
    

      ,       -   .   JavaScript        ,   HTML    autofocus,      ,      .           ,      - . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" autofocus> 
    

      
      
      
    

   
    

      
      
      
    

           Tab.         tabindex.            OK,  ,      help. 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button> 
    

      
      
      
    

   
    

      
      
      
    

    ,    HTML   .   tabindex  ,      . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

        disabled,         DOM. 
    

      
      
      
    

   
    

      
      
      
    

   <button>   </button> <button disabled>  </button> 
    

      
      
      
    

   
    

      
      
      
    

          ,     ,     . 
    

      
      
      
    

   
    

      
      
      
    

              ,          ,      .   ,          ,      . 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

    ,    ,    DOM   form,     .  ,   ,   elements,    . 
    

      
      
      
    

   
    

      
      
      
    

    name  ,          .             elements,     ,    (   ),   map (   ). 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script> 
    

      
      
      
    

   
    

      
      
      
    

      type  submit    .   Enter       . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,     action,   GET  POST .      “submit”.     JavaScript,       ,    event preventDefault. 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     “submit”    .    ,             .               ,   XMLHttpRequest        . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

         text  password,    ,   .    DOM   value,          .       . 
    

      
      
      
    

   
    

      
      
      
    

      selectionStart  selectionEnd        .    ,   ,    . , 0   , 10 ,     10- .    ,    ,       .       . 
    

      
      
      
    

   
    

      
      
      
    

    , ,      Khasekhemwy,      .      ,    F2   “ Khasekhemwy”. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script> 
    

      
      
      
    

   
    

      
      
      
    

    replaceSelection      ,        ,     . 
    

      
      
      
    

   
    

      
      
      
    

    “change”           .      ,     .           “input”,       ,        . 
    

      
      
      
    

   
    

      
      
      
    

           ,     . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

     –   .         checked,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="checkbox" id="purple"> <label for="purple">  </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

            .  for    id .    label   ,       –     . 
    

      
      
      
    

   
    

      
      
      
    

      ,          ,         . 
    

      
      
      
    

   
    

      
      
      
    

   : <input type="radio" name="color" value="mediumpurple">  <input type="radio" name="color" value="lightgreen">  <input type="radio" name="color" value="lightblue">  <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script> 
    

      
      
      
    

   
    

      
      
      
    

    document.getElementsByName       name.    (   for,   forEach,     –   )       . ,       target,   ,   .       –       ,           ,   . 
    

      
      
      
    

   
    

      
      
      
    

    select 
    

      
      
      
    

    select    –       .        ,      . 
    

      
      
      
    

   
    

      
      
      
    

     select  ,     ,   .    multiple      ,   . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

                ,      . 
    

      
      
      
    

   
    

      
      
      
    

    size      ,    –        .  ,  size 3,     ,  ,    multiple. 
    

      
      
      
    

   
    

      
      
      
    

       .     value,     ,     ,    .. .  value     .            , ..          . 
    

      
      
      
    

   
    

      
      
      
    

                options.      selected, ,     .    ,       . 
    

      
      
      
    

   
    

      
      
      
    

          select         .  Ctrl ( Command  ),     . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

              .          JavaScript.      .           ,        ,      . 
    

      
      
      
    

   
    

      
      
      
    

            « »,        . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script> 
    

      
      
      
    

   
    

      
      
      
    

    files  –   (  ),    .   .      file,             multiple. 
    

      
      
      
    

   
    

      
      
      
    

       files    ( ),  (   ),   (    media type - text/plain  image/jpeg). 
    

      
      
      
    

   
    

      
      
      
    

      ,   ,   .   ,  .         ,    ,    .  FileReader   ,   XMLHttpRequest,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

          FileReader,   “load”  ,     readAsText    .      result   . 
    

      
      
      
    

   
    

      
      
      
    

     Array.prototype.forEach    ,            file  reader   .        . 
    

      
      
      
    

   
    

      
      
      
    

    FileReaders    “error”,     .  error     error.           ,       (.  17): 
    

      
      
      
    

   
    

      
      
      
    

   function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); } 
    

      
      
      
    

   
    

      
      
      
    

       ,  slice    (..  blob)  reader. 
    

      
      
      
    

   
    

      
      
      
    

        
    

      
      
      
    

    HTML-   JavaScript      - –   ,   .           –              -. 
    

      
      
      
    

   
    

      
      
      
    

          ,  JavaScript    –        .     ,            .      20.       .       .  ? 
    

      
      
      
    

   
    

      
      
      
    

       ,      -        localStorage.        (   ),    : 
    

      
      
      
    

   
    

      
      
      
    

   localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username"); 
    

      
      
      
    

   
    

      
      
      
    

     localStorage ,    ,    removeItem     . 
    

      
      
      
    

   
    

      
      
      
    

        –     .  , ,     localStorage,           . 
    

      
      
      
    

   
    

      
      
      
    

        ,    .  ,    ,         ,     . 
    

      
      
      
    

   
    

      
      
      
    

          .      ,    .    JSON    localStorage.             .      . 
    

      
      
      
    

   
    

      
      
      
    

   : <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } //      var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script> 
    

      
      
      
    

   
    

      
      
      
    

      notes   localStorage,      –      « ».      localStorage  null.  null  JSON.parse,   null .         || . 
    

      
      
      
    

   
    

      
      
      
    

      note  (     ),       saveToStorage.    ,       ,     ,           – ,     . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,       “change”.   ,   “change” ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

        localStorage    sessionStorage.     ,   sessionStorage    ,       . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

   HTML       – , ,  ,  . 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript       .      “change”,     – “input”,      .     ,      .   value (    select)  checked (   )       . 
    

      
      
      
    

   
    

      
      
      
    

        “submit”.  JavaScript    preventDefault  ,    .         . 
    

      
      
      
    

   
    

      
      
      
    

             ,  FileReader         JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

    localStorage  sessionStorage       ,    .     (       ),   –   . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

    JavaScript 
    

      
      
      
    

    ,       JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

       ,     Function   10         .  ,  ,    ,  ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

      ,          .      ,      ,     .      ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> //      , //  'alert', 'document',  'scrollTo' var terms = []; for (var name in window) terms.push(name); //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    «»  
    

      
      
      
    

         ,      .   ( )   : 
    

      
      
      
    

   
    

      
      
      
    

   -   ,        ,  
    

      
      
      
    

   -   ,       ,     
    

      
      
      
    

   -   ,      ,  
    

      
      
      
    

   
    

      
      
      
    

     –        ,   ,  8 . 
    

      
      
      
    

   
    

      
      
      
    

    ,       ,        .  ,          ,  ,    ,      . 
    

      
      
      
    

   
    

      
      
      
    

    ,    .  Math.random     .         «   ».      ,        . 
    

      
      
      
    

   
    

      
      
      
    

   <div id="grid"></div> <button id="next"> </button> <script> //  . </script> 

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

 . HTML    ,      /        .          ,      . 
    

      
      
      
    

   
    

      
      
      
    

         .   type     .    : 
    

      
      
      
    

   
    

      
      
      
    

   text      
    

      
      
      
    

   password  ,  ,    
    

      
      
      
    

   checkbox  / 
    

      
      
      
    

   radio         
    

      
      
      
    

   file        
    

      
      
      
    

   
    

      
      
      
    

           .       .         (      ),     ,   JavaScript,           submit. 
    

      
      
      
    

   
    

      
      
      
    

   <p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p> 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript        .       . 
    

      
      
      
    

   
    

      
      
      
    

            .       ,           value. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea>    </textarea> 
    

      
      
      
    

   
    

      
      
      
    

         ,        . 
    

      
      
      
    

   <select> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

      ,   “change”. 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

         HTML,       .          , ..    . 
    

      
      
      
    

   
    

      
      
      
    

        ,      ,      .   -   .  ,     ,  ,   ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

      JavaScript   focus  blur.      DOM,    ,    .  document.activeElement   ,  . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script> 
    

      
      
      
    

   
    

      
      
      
    

      ,       -   .   JavaScript        ,   HTML    autofocus,      ,      .           ,      - . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" autofocus> 
    

      
      
      
    

   
    

      
      
      
    

           Tab.         tabindex.            OK,  ,      help. 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button> 
    

      
      
      
    

   
    

      
      
      
    

    ,    HTML   .   tabindex  ,      . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

        disabled,         DOM. 
    

      
      
      
    

   
    

      
      
      
    

   <button>   </button> <button disabled>  </button> 
    

      
      
      
    

   
    

      
      
      
    

          ,     ,     . 
    

      
      
      
    

   
    

      
      
      
    

              ,          ,      .   ,          ,      . 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

    ,    ,    DOM   form,     .  ,   ,   elements,    . 
    

      
      
      
    

   
    

      
      
      
    

    name  ,          .             elements,     ,    (   ),   map (   ). 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script> 
    

      
      
      
    

   
    

      
      
      
    

      type  submit    .   Enter       . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,     action,   GET  POST .      “submit”.     JavaScript,       ,    event preventDefault. 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     “submit”    .    ,             .               ,   XMLHttpRequest        . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

         text  password,    ,   .    DOM   value,          .       . 
    

      
      
      
    

   
    

      
      
      
    

      selectionStart  selectionEnd        .    ,   ,    . , 0   , 10 ,     10- .    ,    ,       .       . 
    

      
      
      
    

   
    

      
      
      
    

    , ,      Khasekhemwy,      .      ,    F2   “ Khasekhemwy”. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script> 
    

      
      
      
    

   
    

      
      
      
    

    replaceSelection      ,        ,     . 
    

      
      
      
    

   
    

      
      
      
    

    “change”           .      ,     .           “input”,       ,        . 
    

      
      
      
    

   
    

      
      
      
    

           ,     . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

     –   .         checked,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="checkbox" id="purple"> <label for="purple">  </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

            .  for    id .    label   ,       –     . 
    

      
      
      
    

   
    

      
      
      
    

      ,          ,         . 
    

      
      
      
    

   
    

      
      
      
    

   : <input type="radio" name="color" value="mediumpurple">  <input type="radio" name="color" value="lightgreen">  <input type="radio" name="color" value="lightblue">  <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script> 
    

      
      
      
    

   
    

      
      
      
    

    document.getElementsByName       name.    (   for,   forEach,     –   )       . ,       target,   ,   .       –       ,           ,   . 
    

      
      
      
    

   
    

      
      
      
    

    select 
    

      
      
      
    

    select    –       .        ,      . 
    

      
      
      
    

   
    

      
      
      
    

     select  ,     ,   .    multiple      ,   . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

                ,      . 
    

      
      
      
    

   
    

      
      
      
    

    size      ,    –        .  ,  size 3,     ,  ,    multiple. 
    

      
      
      
    

   
    

      
      
      
    

       .     value,     ,     ,    .. .  value     .            , ..          . 
    

      
      
      
    

   
    

      
      
      
    

                options.      selected, ,     .    ,       . 
    

      
      
      
    

   
    

      
      
      
    

          select         .  Ctrl ( Command  ),     . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

              .          JavaScript.      .           ,        ,      . 
    

      
      
      
    

   
    

      
      
      
    

            « »,        . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script> 
    

      
      
      
    

   
    

      
      
      
    

    files  –   (  ),    .   .      file,             multiple. 
    

      
      
      
    

   
    

      
      
      
    

       files    ( ),  (   ),   (    media type - text/plain  image/jpeg). 
    

      
      
      
    

   
    

      
      
      
    

      ,   ,   .   ,  .         ,    ,    .  FileReader   ,   XMLHttpRequest,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

          FileReader,   “load”  ,     readAsText    .      result   . 
    

      
      
      
    

   
    

      
      
      
    

     Array.prototype.forEach    ,            file  reader   .        . 
    

      
      
      
    

   
    

      
      
      
    

    FileReaders    “error”,     .  error     error.           ,       (.  17): 
    

      
      
      
    

   
    

      
      
      
    

   function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); } 
    

      
      
      
    

   
    

      
      
      
    

       ,  slice    (..  blob)  reader. 
    

      
      
      
    

   
    

      
      
      
    

        
    

      
      
      
    

    HTML-   JavaScript      - –   ,   .           –              -. 
    

      
      
      
    

   
    

      
      
      
    

          ,  JavaScript    –        .     ,            .      20.       .       .  ? 
    

      
      
      
    

   
    

      
      
      
    

       ,      -        localStorage.        (   ),    : 
    

      
      
      
    

   
    

      
      
      
    

   localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username"); 
    

      
      
      
    

   
    

      
      
      
    

     localStorage ,    ,    removeItem     . 
    

      
      
      
    

   
    

      
      
      
    

        –     .  , ,     localStorage,           . 
    

      
      
      
    

   
    

      
      
      
    

        ,    .  ,    ,         ,     . 
    

      
      
      
    

   
    

      
      
      
    

          .      ,    .    JSON    localStorage.             .      . 
    

      
      
      
    

   
    

      
      
      
    

   : <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } //      var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script> 
    

      
      
      
    

   
    

      
      
      
    

      notes   localStorage,      –      « ».      localStorage  null.  null  JSON.parse,   null .         || . 
    

      
      
      
    

   
    

      
      
      
    

      note  (     ),       saveToStorage.    ,       ,     ,           – ,     . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,       “change”.   ,   “change” ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

        localStorage    sessionStorage.     ,   sessionStorage    ,       . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

   HTML       – , ,  ,  . 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript       .      “change”,     – “input”,      .     ,      .   value (    select)  checked (   )       . 
    

      
      
      
    

   
    

      
      
      
    

        “submit”.  JavaScript    preventDefault  ,    .         . 
    

      
      
      
    

   
    

      
      
      
    

             ,  FileReader         JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

    localStorage  sessionStorage       ,    .     (       ),   –   . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

    JavaScript 
    

      
      
      
    

    ,       JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

       ,     Function   10         .  ,  ,    ,  ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

      ,          .      ,      ,     .      ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> //      , //  'alert', 'document',  'scrollTo' var terms = []; for (var name in window) terms.push(name); //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    «»  
    

      
      
      
    

         ,      .   ( )   : 
    

      
      
      
    

   
    

      
      
      
    

   -   ,        ,  
    

      
      
      
    

   -   ,       ,     
    

      
      
      
    

   -   ,      ,  
    

      
      
      
    

   
    

      
      
      
    

     –        ,   ,  8 . 
    

      
      
      
    

   
    

      
      
      
    

    ,       ,        .  ,          ,  ,    ,      . 
    

      
      
      
    

   
    

      
      
      
    

    ,    .  Math.random     .         «   ».      ,        . 
    

      
      
      
    

   
    

      
      
      
    

   <div id="grid"></div> <button id="next"> </button> <script> //  . </script> 

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

 . HTML    ,      /        .          ,      . 
    

      
      
      
    

   
    

      
      
      
    

         .   type     .    : 
    

      
      
      
    

   
    

      
      
      
    

   text      
    

      
      
      
    

   password  ,  ,    
    

      
      
      
    

   checkbox  / 
    

      
      
      
    

   radio         
    

      
      
      
    

   file        
    

      
      
      
    

   
    

      
      
      
    

           .       .         (      ),     ,   JavaScript,           submit. 
    

      
      
      
    

   
    

      
      
      
    

   <p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p> 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript        .       . 
    

      
      
      
    

   
    

      
      
      
    

            .       ,           value. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea>    </textarea> 
    

      
      
      
    

   
    

      
      
      
    

         ,        . 
    

      
      
      
    

   <select> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

      ,   “change”. 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

         HTML,       .          , ..    . 
    

      
      
      
    

   
    

      
      
      
    

        ,      ,      .   -   .  ,     ,  ,   ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

      JavaScript   focus  blur.      DOM,    ,    .  document.activeElement   ,  . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script> 
    

      
      
      
    

   
    

      
      
      
    

      ,       -   .   JavaScript        ,   HTML    autofocus,      ,      .           ,      - . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" autofocus> 
    

      
      
      
    

   
    

      
      
      
    

           Tab.         tabindex.            OK,  ,      help. 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button> 
    

      
      
      
    

   
    

      
      
      
    

    ,    HTML   .   tabindex  ,      . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

        disabled,         DOM. 
    

      
      
      
    

   
    

      
      
      
    

   <button>   </button> <button disabled>  </button> 
    

      
      
      
    

   
    

      
      
      
    

          ,     ,     . 
    

      
      
      
    

   
    

      
      
      
    

              ,          ,      .   ,          ,      . 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

    ,    ,    DOM   form,     .  ,   ,   elements,    . 
    

      
      
      
    

   
    

      
      
      
    

    name  ,          .             elements,     ,    (   ),   map (   ). 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script> 
    

      
      
      
    

   
    

      
      
      
    

      type  submit    .   Enter       . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,     action,   GET  POST .      “submit”.     JavaScript,       ,    event preventDefault. 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     “submit”    .    ,             .               ,   XMLHttpRequest        . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

         text  password,    ,   .    DOM   value,          .       . 
    

      
      
      
    

   
    

      
      
      
    

      selectionStart  selectionEnd        .    ,   ,    . , 0   , 10 ,     10- .    ,    ,       .       . 
    

      
      
      
    

   
    

      
      
      
    

    , ,      Khasekhemwy,      .      ,    F2   “ Khasekhemwy”. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script> 
    

      
      
      
    

   
    

      
      
      
    

    replaceSelection      ,        ,     . 
    

      
      
      
    

   
    

      
      
      
    

    “change”           .      ,     .           “input”,       ,        . 
    

      
      
      
    

   
    

      
      
      
    

           ,     . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

     –   .         checked,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="checkbox" id="purple"> <label for="purple">  </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

            .  for    id .    label   ,       –     . 
    

      
      
      
    

   
    

      
      
      
    

      ,          ,         . 
    

      
      
      
    

   
    

      
      
      
    

   : <input type="radio" name="color" value="mediumpurple">  <input type="radio" name="color" value="lightgreen">  <input type="radio" name="color" value="lightblue">  <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script> 
    

      
      
      
    

   
    

      
      
      
    

    document.getElementsByName       name.    (   for,   forEach,     –   )       . ,       target,   ,   .       –       ,           ,   . 
    

      
      
      
    

   
    

      
      
      
    

    select 
    

      
      
      
    

    select    –       .        ,      . 
    

      
      
      
    

   
    

      
      
      
    

     select  ,     ,   .    multiple      ,   . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

                ,      . 
    

      
      
      
    

   
    

      
      
      
    

    size      ,    –        .  ,  size 3,     ,  ,    multiple. 
    

      
      
      
    

   
    

      
      
      
    

       .     value,     ,     ,    .. .  value     .            , ..          . 
    

      
      
      
    

   
    

      
      
      
    

                options.      selected, ,     .    ,       . 
    

      
      
      
    

   
    

      
      
      
    

          select         .  Ctrl ( Command  ),     . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

              .          JavaScript.      .           ,        ,      . 
    

      
      
      
    

   
    

      
      
      
    

            « »,        . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script> 
    

      
      
      
    

   
    

      
      
      
    

    files  –   (  ),    .   .      file,             multiple. 
    

      
      
      
    

   
    

      
      
      
    

       files    ( ),  (   ),   (    media type - text/plain  image/jpeg). 
    

      
      
      
    

   
    

      
      
      
    

      ,   ,   .   ,  .         ,    ,    .  FileReader   ,   XMLHttpRequest,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

          FileReader,   “load”  ,     readAsText    .      result   . 
    

      
      
      
    

   
    

      
      
      
    

     Array.prototype.forEach    ,            file  reader   .        . 
    

      
      
      
    

   
    

      
      
      
    

    FileReaders    “error”,     .  error     error.           ,       (.  17): 
    

      
      
      
    

   
    

      
      
      
    

   function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); } 
    

      
      
      
    

   
    

      
      
      
    

       ,  slice    (..  blob)  reader. 
    

      
      
      
    

   
    

      
      
      
    

        
    

      
      
      
    

    HTML-   JavaScript      - –   ,   .           –              -. 
    

      
      
      
    

   
    

      
      
      
    

          ,  JavaScript    –        .     ,            .      20.       .       .  ? 
    

      
      
      
    

   
    

      
      
      
    

       ,      -        localStorage.        (   ),    : 
    

      
      
      
    

   
    

      
      
      
    

   localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username"); 
    

      
      
      
    

   
    

      
      
      
    

     localStorage ,    ,    removeItem     . 
    

      
      
      
    

   
    

      
      
      
    

        –     .  , ,     localStorage,           . 
    

      
      
      
    

   
    

      
      
      
    

        ,    .  ,    ,         ,     . 
    

      
      
      
    

   
    

      
      
      
    

          .      ,    .    JSON    localStorage.             .      . 
    

      
      
      
    

   
    

      
      
      
    

   : <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } //      var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script> 
    

      
      
      
    

   
    

      
      
      
    

      notes   localStorage,      –      « ».      localStorage  null.  null  JSON.parse,   null .         || . 
    

      
      
      
    

   
    

      
      
      
    

      note  (     ),       saveToStorage.    ,       ,     ,           – ,     . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,       “change”.   ,   “change” ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

        localStorage    sessionStorage.     ,   sessionStorage    ,       . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

   HTML       – , ,  ,  . 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript       .      “change”,     – “input”,      .     ,      .   value (    select)  checked (   )       . 
    

      
      
      
    

   
    

      
      
      
    

        “submit”.  JavaScript    preventDefault  ,    .         . 
    

      
      
      
    

   
    

      
      
      
    

             ,  FileReader         JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

    localStorage  sessionStorage       ,    .     (       ),   –   . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

    JavaScript 
    

      
      
      
    

    ,       JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

       ,     Function   10         .  ,  ,    ,  ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

      ,          .      ,      ,     .      ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> //      , //  'alert', 'document',  'scrollTo' var terms = []; for (var name in window) terms.push(name); //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    «»  
    

      
      
      
    

         ,      .   ( )   : 
    

      
      
      
    

   
    

      
      
      
    

   -   ,        ,  
    

      
      
      
    

   -   ,       ,     
    

      
      
      
    

   -   ,      ,  
    

      
      
      
    

   
    

      
      
      
    

     –        ,   ,  8 . 
    

      
      
      
    

   
    

      
      
      
    

    ,       ,        .  ,          ,  ,    ,      . 
    

      
      
      
    

   
    

      
      
      
    

    ,    .  Math.random     .         «   ».      ,        . 
    

      
      
      
    

   
    

      
      
      
    

   <div id="grid"></div> <button id="next"> </button> <script> //  . </script> 

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

 . HTML    ,      /        .          ,      . 
    

      
      
      
    

   
    

      
      
      
    

         .   type     .    : 
    

      
      
      
    

   
    

      
      
      
    

   text      
    

      
      
      
    

   password  ,  ,    
    

      
      
      
    

   checkbox  / 
    

      
      
      
    

   radio         
    

      
      
      
    

   file        
    

      
      
      
    

   
    

      
      
      
    

           .       .         (      ),     ,   JavaScript,           submit. 
    

      
      
      
    

   
    

      
      
      
    

   <p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p> 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript        .       . 
    

      
      
      
    

   
    

      
      
      
    

            .       ,           value. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea>    </textarea> 
    

      
      
      
    

   
    

      
      
      
    

         ,        . 
    

      
      
      
    

   <select> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

      ,   “change”. 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

         HTML,       .          , ..    . 
    

      
      
      
    

   
    

      
      
      
    

        ,      ,      .   -   .  ,     ,  ,   ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

      JavaScript   focus  blur.      DOM,    ,    .  document.activeElement   ,  . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script> 
    

      
      
      
    

   
    

      
      
      
    

      ,       -   .   JavaScript        ,   HTML    autofocus,      ,      .           ,      - . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" autofocus> 
    

      
      
      
    

   
    

      
      
      
    

           Tab.         tabindex.            OK,  ,      help. 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button> 
    

      
      
      
    

   
    

      
      
      
    

    ,    HTML   .   tabindex  ,      . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

        disabled,         DOM. 
    

      
      
      
    

   
    

      
      
      
    

   <button>   </button> <button disabled>  </button> 
    

      
      
      
    

   
    

      
      
      
    

          ,     ,     . 
    

      
      
      
    

   
    

      
      
      
    

              ,          ,      .   ,          ,      . 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

    ,    ,    DOM   form,     .  ,   ,   elements,    . 
    

      
      
      
    

   
    

      
      
      
    

    name  ,          .             elements,     ,    (   ),   map (   ). 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script> 
    

      
      
      
    

   
    

      
      
      
    

      type  submit    .   Enter       . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,     action,   GET  POST .      “submit”.     JavaScript,       ,    event preventDefault. 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     “submit”    .    ,             .               ,   XMLHttpRequest        . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

         text  password,    ,   .    DOM   value,          .       . 
    

      
      
      
    

   
    

      
      
      
    

      selectionStart  selectionEnd        .    ,   ,    . , 0   , 10 ,     10- .    ,    ,       .       . 
    

      
      
      
    

   
    

      
      
      
    

    , ,      Khasekhemwy,      .      ,    F2   “ Khasekhemwy”. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script> 
    

      
      
      
    

   
    

      
      
      
    

    replaceSelection      ,        ,     . 
    

      
      
      
    

   
    

      
      
      
    

    “change”           .      ,     .           “input”,       ,        . 
    

      
      
      
    

   
    

      
      
      
    

           ,     . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

     –   .         checked,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="checkbox" id="purple"> <label for="purple">  </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

            .  for    id .    label   ,       –     . 
    

      
      
      
    

   
    

      
      
      
    

      ,          ,         . 
    

      
      
      
    

   
    

      
      
      
    

   : <input type="radio" name="color" value="mediumpurple">  <input type="radio" name="color" value="lightgreen">  <input type="radio" name="color" value="lightblue">  <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script> 
    

      
      
      
    

   
    

      
      
      
    

    document.getElementsByName       name.    (   for,   forEach,     –   )       . ,       target,   ,   .       –       ,           ,   . 
    

      
      
      
    

   
    

      
      
      
    

    select 
    

      
      
      
    

    select    –       .        ,      . 
    

      
      
      
    

   
    

      
      
      
    

     select  ,     ,   .    multiple      ,   . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

                ,      . 
    

      
      
      
    

   
    

      
      
      
    

    size      ,    –        .  ,  size 3,     ,  ,    multiple. 
    

      
      
      
    

   
    

      
      
      
    

       .     value,     ,     ,    .. .  value     .            , ..          . 
    

      
      
      
    

   
    

      
      
      
    

                options.      selected, ,     .    ,       . 
    

      
      
      
    

   
    

      
      
      
    

          select         .  Ctrl ( Command  ),     . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

              .          JavaScript.      .           ,        ,      . 
    

      
      
      
    

   
    

      
      
      
    

            « »,        . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script> 
    

      
      
      
    

   
    

      
      
      
    

    files  –   (  ),    .   .      file,             multiple. 
    

      
      
      
    

   
    

      
      
      
    

       files    ( ),  (   ),   (    media type - text/plain  image/jpeg). 
    

      
      
      
    

   
    

      
      
      
    

      ,   ,   .   ,  .         ,    ,    .  FileReader   ,   XMLHttpRequest,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

          FileReader,   “load”  ,     readAsText    .      result   . 
    

      
      
      
    

   
    

      
      
      
    

     Array.prototype.forEach    ,            file  reader   .        . 
    

      
      
      
    

   
    

      
      
      
    

    FileReaders    “error”,     .  error     error.           ,       (.  17): 
    

      
      
      
    

   
    

      
      
      
    

   function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); } 
    

      
      
      
    

   
    

      
      
      
    

       ,  slice    (..  blob)  reader. 
    

      
      
      
    

   
    

      
      
      
    

        
    

      
      
      
    

    HTML-   JavaScript      - –   ,   .           –              -. 
    

      
      
      
    

   
    

      
      
      
    

          ,  JavaScript    –        .     ,            .      20.       .       .  ? 
    

      
      
      
    

   
    

      
      
      
    

       ,      -        localStorage.        (   ),    : 
    

      
      
      
    

   
    

      
      
      
    

   localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username"); 
    

      
      
      
    

   
    

      
      
      
    

     localStorage ,    ,    removeItem     . 
    

      
      
      
    

   
    

      
      
      
    

        –     .  , ,     localStorage,           . 
    

      
      
      
    

   
    

      
      
      
    

        ,    .  ,    ,         ,     . 
    

      
      
      
    

   
    

      
      
      
    

          .      ,    .    JSON    localStorage.             .      . 
    

      
      
      
    

   
    

      
      
      
    

   : <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } //      var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script> 
    

      
      
      
    

   
    

      
      
      
    

      notes   localStorage,      –      « ».      localStorage  null.  null  JSON.parse,   null .         || . 
    

      
      
      
    

   
    

      
      
      
    

      note  (     ),       saveToStorage.    ,       ,     ,           – ,     . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,       “change”.   ,   “change” ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

        localStorage    sessionStorage.     ,   sessionStorage    ,       . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

   HTML       – , ,  ,  . 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript       .      “change”,     – “input”,      .     ,      .   value (    select)  checked (   )       . 
    

      
      
      
    

   
    

      
      
      
    

        “submit”.  JavaScript    preventDefault  ,    .         . 
    

      
      
      
    

   
    

      
      
      
    

             ,  FileReader         JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

    localStorage  sessionStorage       ,    .     (       ),   –   . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

    JavaScript 
    

      
      
      
    

    ,       JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

       ,     Function   10         .  ,  ,    ,  ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

      ,          .      ,      ,     .      ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> //      , //  'alert', 'document',  'scrollTo' var terms = []; for (var name in window) terms.push(name); //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    «»  
    

      
      
      
    

         ,      .   ( )   : 
    

      
      
      
    

   
    

      
      
      
    

   -   ,        ,  
    

      
      
      
    

   -   ,       ,     
    

      
      
      
    

   -   ,      ,  
    

      
      
      
    

   
    

      
      
      
    

     –        ,   ,  8 . 
    

      
      
      
    

   
    

      
      
      
    

    ,       ,        .  ,          ,  ,    ,      . 
    

      
      
      
    

   
    

      
      
      
    

    ,    .  Math.random     .         «   ».      ,        . 
    

      
      
      
    

   
    

      
      
      
    

   <div id="grid"></div> <button id="next"> </button> <script> //  . </script> 

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

 . HTML    ,      /        .          ,      . 
    

      
      
      
    

   
    

      
      
      
    

         .   type     .    : 
    

      
      
      
    

   
    

      
      
      
    

   text      
    

      
      
      
    

   password  ,  ,    
    

      
      
      
    

   checkbox  / 
    

      
      
      
    

   radio         
    

      
      
      
    

   file        
    

      
      
      
    

   
    

      
      
      
    

           .       .         (      ),     ,   JavaScript,           submit. 
    

      
      
      
    

   
    

      
      
      
    

   <p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p> 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript        .       . 
    

      
      
      
    

   
    

      
      
      
    

            .       ,           value. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea>    </textarea> 
    

      
      
      
    

   
    

      
      
      
    

         ,        . 
    

      
      
      
    

   <select> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

      ,   “change”. 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

         HTML,       .          , ..    . 
    

      
      
      
    

   
    

      
      
      
    

        ,      ,      .   -   .  ,     ,  ,   ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

      JavaScript   focus  blur.      DOM,    ,    .  document.activeElement   ,  . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script> 
    

      
      
      
    

   
    

      
      
      
    

      ,       -   .   JavaScript        ,   HTML    autofocus,      ,      .           ,      - . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" autofocus> 
    

      
      
      
    

   
    

      
      
      
    

           Tab.         tabindex.            OK,  ,      help. 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button> 
    

      
      
      
    

   
    

      
      
      
    

    ,    HTML   .   tabindex  ,      . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

        disabled,         DOM. 
    

      
      
      
    

   
    

      
      
      
    

   <button>   </button> <button disabled>  </button> 
    

      
      
      
    

   
    

      
      
      
    

          ,     ,     . 
    

      
      
      
    

   
    

      
      
      
    

              ,          ,      .   ,          ,      . 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

    ,    ,    DOM   form,     .  ,   ,   elements,    . 
    

      
      
      
    

   
    

      
      
      
    

    name  ,          .             elements,     ,    (   ),   map (   ). 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script> 
    

      
      
      
    

   
    

      
      
      
    

      type  submit    .   Enter       . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,     action,   GET  POST .      “submit”.     JavaScript,       ,    event preventDefault. 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     “submit”    .    ,             .               ,   XMLHttpRequest        . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

         text  password,    ,   .    DOM   value,          .       . 
    

      
      
      
    

   
    

      
      
      
    

      selectionStart  selectionEnd        .    ,   ,    . , 0   , 10 ,     10- .    ,    ,       .       . 
    

      
      
      
    

   
    

      
      
      
    

    , ,      Khasekhemwy,      .      ,    F2   “ Khasekhemwy”. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script> 
    

      
      
      
    

   
    

      
      
      
    

    replaceSelection      ,        ,     . 
    

      
      
      
    

   
    

      
      
      
    

    “change”           .      ,     .           “input”,       ,        . 
    

      
      
      
    

   
    

      
      
      
    

           ,     . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

     –   .         checked,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="checkbox" id="purple"> <label for="purple">  </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

            .  for    id .    label   ,       –     . 
    

      
      
      
    

   
    

      
      
      
    

      ,          ,         . 
    

      
      
      
    

   
    

      
      
      
    

   : <input type="radio" name="color" value="mediumpurple">  <input type="radio" name="color" value="lightgreen">  <input type="radio" name="color" value="lightblue">  <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script> 
    

      
      
      
    

   
    

      
      
      
    

    document.getElementsByName       name.    (   for,   forEach,     –   )       . ,       target,   ,   .       –       ,           ,   . 
    

      
      
      
    

   
    

      
      
      
    

    select 
    

      
      
      
    

    select    –       .        ,      . 
    

      
      
      
    

   
    

      
      
      
    

     select  ,     ,   .    multiple      ,   . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

                ,      . 
    

      
      
      
    

   
    

      
      
      
    

    size      ,    –        .  ,  size 3,     ,  ,    multiple. 
    

      
      
      
    

   
    

      
      
      
    

       .     value,     ,     ,    .. .  value     .            , ..          . 
    

      
      
      
    

   
    

      
      
      
    

                options.      selected, ,     .    ,       . 
    

      
      
      
    

   
    

      
      
      
    

          select         .  Ctrl ( Command  ),     . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

              .          JavaScript.      .           ,        ,      . 
    

      
      
      
    

   
    

      
      
      
    

            « »,        . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script> 
    

      
      
      
    

   
    

      
      
      
    

    files  –   (  ),    .   .      file,             multiple. 
    

      
      
      
    

   
    

      
      
      
    

       files    ( ),  (   ),   (    media type - text/plain  image/jpeg). 
    

      
      
      
    

   
    

      
      
      
    

      ,   ,   .   ,  .         ,    ,    .  FileReader   ,   XMLHttpRequest,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

          FileReader,   “load”  ,     readAsText    .      result   . 
    

      
      
      
    

   
    

      
      
      
    

     Array.prototype.forEach    ,            file  reader   .        . 
    

      
      
      
    

   
    

      
      
      
    

    FileReaders    “error”,     .  error     error.           ,       (.  17): 
    

      
      
      
    

   
    

      
      
      
    

   function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); } 
    

      
      
      
    

   
    

      
      
      
    

       ,  slice    (..  blob)  reader. 
    

      
      
      
    

   
    

      
      
      
    

        
    

      
      
      
    

    HTML-   JavaScript      - –   ,   .           –              -. 
    

      
      
      
    

   
    

      
      
      
    

          ,  JavaScript    –        .     ,            .      20.       .       .  ? 
    

      
      
      
    

   
    

      
      
      
    

       ,      -        localStorage.        (   ),    : 
    

      
      
      
    

   
    

      
      
      
    

   localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username"); 
    

      
      
      
    

   
    

      
      
      
    

     localStorage ,    ,    removeItem     . 
    

      
      
      
    

   
    

      
      
      
    

        –     .  , ,     localStorage,           . 
    

      
      
      
    

   
    

      
      
      
    

        ,    .  ,    ,         ,     . 
    

      
      
      
    

   
    

      
      
      
    

          .      ,    .    JSON    localStorage.             .      . 
    

      
      
      
    

   
    

      
      
      
    

   : <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } //      var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script> 
    

      
      
      
    

   
    

      
      
      
    

      notes   localStorage,      –      « ».      localStorage  null.  null  JSON.parse,   null .         || . 
    

      
      
      
    

   
    

      
      
      
    

      note  (     ),       saveToStorage.    ,       ,     ,           – ,     . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,       “change”.   ,   “change” ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

        localStorage    sessionStorage.     ,   sessionStorage    ,       . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

   HTML       – , ,  ,  . 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript       .      “change”,     – “input”,      .     ,      .   value (    select)  checked (   )       . 
    

      
      
      
    

   
    

      
      
      
    

        “submit”.  JavaScript    preventDefault  ,    .         . 
    

      
      
      
    

   
    

      
      
      
    

             ,  FileReader         JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

    localStorage  sessionStorage       ,    .     (       ),   –   . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

    JavaScript 
    

      
      
      
    

    ,       JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

       ,     Function   10         .  ,  ,    ,  ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

      ,          .      ,      ,     .      ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> //      , //  'alert', 'document',  'scrollTo' var terms = []; for (var name in window) terms.push(name); //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    «»  
    

      
      
      
    

         ,      .   ( )   : 
    

      
      
      
    

   
    

      
      
      
    

   -   ,        ,  
    

      
      
      
    

   -   ,       ,     
    

      
      
      
    

   -   ,      ,  
    

      
      
      
    

   
    

      
      
      
    

     –        ,   ,  8 . 
    

      
      
      
    

   
    

      
      
      
    

    ,       ,        .  ,          ,  ,    ,      . 
    

      
      
      
    

   
    

      
      
      
    

    ,    .  Math.random     .         «   ».      ,        . 
    

      
      
      
    

   
    

      
      
      
    

   <div id="grid"></div> <button id="next"> </button> <script> //  . </script> 

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

 . HTML    ,      /        .          ,      . 
    

      
      
      
    

   
    

      
      
      
    

         .   type     .    : 
    

      
      
      
    

   
    

      
      
      
    

   text      
    

      
      
      
    

   password  ,  ,    
    

      
      
      
    

   checkbox  / 
    

      
      
      
    

   radio         
    

      
      
      
    

   file        
    

      
      
      
    

   
    

      
      
      
    

           .       .         (      ),     ,   JavaScript,           submit. 
    

      
      
      
    

   
    

      
      
      
    

   <p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p> 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript        .       . 
    

      
      
      
    

   
    

      
      
      
    

            .       ,           value. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea>    </textarea> 
    

      
      
      
    

   
    

      
      
      
    

         ,        . 
    

      
      
      
    

   <select> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

      ,   “change”. 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

         HTML,       .          , ..    . 
    

      
      
      
    

   
    

      
      
      
    

        ,      ,      .   -   .  ,     ,  ,   ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

      JavaScript   focus  blur.      DOM,    ,    .  document.activeElement   ,  . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script> 
    

      
      
      
    

   
    

      
      
      
    

      ,       -   .   JavaScript        ,   HTML    autofocus,      ,      .           ,      - . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" autofocus> 
    

      
      
      
    

   
    

      
      
      
    

           Tab.         tabindex.            OK,  ,      help. 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button> 
    

      
      
      
    

   
    

      
      
      
    

    ,    HTML   .   tabindex  ,      . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

        disabled,         DOM. 
    

      
      
      
    

   
    

      
      
      
    

   <button>   </button> <button disabled>  </button> 
    

      
      
      
    

   
    

      
      
      
    

          ,     ,     . 
    

      
      
      
    

   
    

      
      
      
    

              ,          ,      .   ,          ,      . 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

    ,    ,    DOM   form,     .  ,   ,   elements,    . 
    

      
      
      
    

   
    

      
      
      
    

    name  ,          .             elements,     ,    (   ),   map (   ). 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script> 
    

      
      
      
    

   
    

      
      
      
    

      type  submit    .   Enter       . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,     action,   GET  POST .      “submit”.     JavaScript,       ,    event preventDefault. 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     “submit”    .    ,             .               ,   XMLHttpRequest        . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

         text  password,    ,   .    DOM   value,          .       . 
    

      
      
      
    

   
    

      
      
      
    

      selectionStart  selectionEnd        .    ,   ,    . , 0   , 10 ,     10- .    ,    ,       .       . 
    

      
      
      
    

   
    

      
      
      
    

    , ,      Khasekhemwy,      .      ,    F2   “ Khasekhemwy”. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script> 
    

      
      
      
    

   
    

      
      
      
    

    replaceSelection      ,        ,     . 
    

      
      
      
    

   
    

      
      
      
    

    “change”           .      ,     .           “input”,       ,        . 
    

      
      
      
    

   
    

      
      
      
    

           ,     . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

     –   .         checked,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="checkbox" id="purple"> <label for="purple">  </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

            .  for    id .    label   ,       –     . 
    

      
      
      
    

   
    

      
      
      
    

      ,          ,         . 
    

      
      
      
    

   
    

      
      
      
    

   : <input type="radio" name="color" value="mediumpurple">  <input type="radio" name="color" value="lightgreen">  <input type="radio" name="color" value="lightblue">  <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script> 
    

      
      
      
    

   
    

      
      
      
    

    document.getElementsByName       name.    (   for,   forEach,     –   )       . ,       target,   ,   .       –       ,           ,   . 
    

      
      
      
    

   
    

      
      
      
    

    select 
    

      
      
      
    

    select    –       .        ,      . 
    

      
      
      
    

   
    

      
      
      
    

     select  ,     ,   .    multiple      ,   . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

                ,      . 
    

      
      
      
    

   
    

      
      
      
    

    size      ,    –        .  ,  size 3,     ,  ,    multiple. 
    

      
      
      
    

   
    

      
      
      
    

       .     value,     ,     ,    .. .  value     .            , ..          . 
    

      
      
      
    

   
    

      
      
      
    

                options.      selected, ,     .    ,       . 
    

      
      
      
    

   
    

      
      
      
    

          select         .  Ctrl ( Command  ),     . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

              .          JavaScript.      .           ,        ,      . 
    

      
      
      
    

   
    

      
      
      
    

            « »,        . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script> 
    

      
      
      
    

   
    

      
      
      
    

    files  –   (  ),    .   .      file,             multiple. 
    

      
      
      
    

   
    

      
      
      
    

       files    ( ),  (   ),   (    media type - text/plain  image/jpeg). 
    

      
      
      
    

   
    

      
      
      
    

      ,   ,   .   ,  .         ,    ,    .  FileReader   ,   XMLHttpRequest,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

          FileReader,   “load”  ,     readAsText    .      result   . 
    

      
      
      
    

   
    

      
      
      
    

     Array.prototype.forEach    ,            file  reader   .        . 
    

      
      
      
    

   
    

      
      
      
    

    FileReaders    “error”,     .  error     error.           ,       (.  17): 
    

      
      
      
    

   
    

      
      
      
    

   function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); } 
    

      
      
      
    

   
    

      
      
      
    

       ,  slice    (..  blob)  reader. 
    

      
      
      
    

   
    

      
      
      
    

        
    

      
      
      
    

    HTML-   JavaScript      - –   ,   .           –              -. 
    

      
      
      
    

   
    

      
      
      
    

          ,  JavaScript    –        .     ,            .      20.       .       .  ? 
    

      
      
      
    

   
    

      
      
      
    

       ,      -        localStorage.        (   ),    : 
    

      
      
      
    

   
    

      
      
      
    

   localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username"); 
    

      
      
      
    

   
    

      
      
      
    

     localStorage ,    ,    removeItem     . 
    

      
      
      
    

   
    

      
      
      
    

        –     .  , ,     localStorage,           . 
    

      
      
      
    

   
    

      
      
      
    

        ,    .  ,    ,         ,     . 
    

      
      
      
    

   
    

      
      
      
    

          .      ,    .    JSON    localStorage.             .      . 
    

      
      
      
    

   
    

      
      
      
    

   : <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } //      var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script> 
    

      
      
      
    

   
    

      
      
      
    

      notes   localStorage,      –      « ».      localStorage  null.  null  JSON.parse,   null .         || . 
    

      
      
      
    

   
    

      
      
      
    

      note  (     ),       saveToStorage.    ,       ,     ,           – ,     . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,       “change”.   ,   “change” ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

        localStorage    sessionStorage.     ,   sessionStorage    ,       . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

   HTML       – , ,  ,  . 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript       .      “change”,     – “input”,      .     ,      .   value (    select)  checked (   )       . 
    

      
      
      
    

   
    

      
      
      
    

        “submit”.  JavaScript    preventDefault  ,    .         . 
    

      
      
      
    

   
    

      
      
      
    

             ,  FileReader         JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

    localStorage  sessionStorage       ,    .     (       ),   –   . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

    JavaScript 
    

      
      
      
    

    ,       JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

       ,     Function   10         .  ,  ,    ,  ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

      ,          .      ,      ,     .      ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> //      , //  'alert', 'document',  'scrollTo' var terms = []; for (var name in window) terms.push(name); //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    «»  
    

      
      
      
    

         ,      .   ( )   : 
    

      
      
      
    

   
    

      
      
      
    

   -   ,        ,  
    

      
      
      
    

   -   ,       ,     
    

      
      
      
    

   -   ,      ,  
    

      
      
      
    

   
    

      
      
      
    

     –        ,   ,  8 . 
    

      
      
      
    

   
    

      
      
      
    

    ,       ,        .  ,          ,  ,    ,      . 
    

      
      
      
    

   
    

      
      
      
    

    ,    .  Math.random     .         «   ».      ,        . 
    

      
      
      
    

   
    

      
      
      
    

   <div id="grid"></div> <button id="next"> </button> <script> //  . </script> 
 . HTML    ,      /        .          ,      . 
    

      
      
      
    

   
    

      
      
      
    

         .   type     .    : 
    

      
      
      
    

   
    

      
      
      
    

   text      
    

      
      
      
    

   password  ,  ,    
    

      
      
      
    

   checkbox  / 
    

      
      
      
    

   radio         
    

      
      
      
    

   file        
    

      
      
      
    

   
    

      
      
      
    

           .       .         (      ),     ,   JavaScript,           submit. 
    

      
      
      
    

   
    

      
      
      
    

   <p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p> 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript        .       . 
    

      
      
      
    

   
    

      
      
      
    

            .       ,           value. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea>    </textarea> 
    

      
      
      
    

   
    

      
      
      
    

         ,        . 
    

      
      
      
    

   <select> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

      ,   “change”. 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

         HTML,       .          , ..    . 
    

      
      
      
    

   
    

      
      
      
    

        ,      ,      .   -   .  ,     ,  ,   ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

      JavaScript   focus  blur.      DOM,    ,    .  document.activeElement   ,  . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script> 
    

      
      
      
    

   
    

      
      
      
    

      ,       -   .   JavaScript        ,   HTML    autofocus,      ,      .           ,      - . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" autofocus> 
    

      
      
      
    

   
    

      
      
      
    

           Tab.         tabindex.            OK,  ,      help. 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button> 
    

      
      
      
    

   
    

      
      
      
    

    ,    HTML   .   tabindex  ,      . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

        disabled,         DOM. 
    

      
      
      
    

   
    

      
      
      
    

   <button>   </button> <button disabled>  </button> 
    

      
      
      
    

   
    

      
      
      
    

          ,     ,     . 
    

      
      
      
    

   
    

      
      
      
    

              ,          ,      .   ,          ,      . 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

    ,    ,    DOM   form,     .  ,   ,   elements,    . 
    

      
      
      
    

   
    

      
      
      
    

    name  ,          .             elements,     ,    (   ),   map (   ). 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script> 
    

      
      
      
    

   
    

      
      
      
    

      type  submit    .   Enter       . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,     action,   GET  POST .      “submit”.     JavaScript,       ,    event preventDefault. 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     “submit”    .    ,             .               ,   XMLHttpRequest        . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

         text  password,    ,   .    DOM   value,          .       . 
    

      
      
      
    

   
    

      
      
      
    

      selectionStart  selectionEnd        .    ,   ,    . , 0   , 10 ,     10- .    ,    ,       .       . 
    

      
      
      
    

   
    

      
      
      
    

    , ,      Khasekhemwy,      .      ,    F2   “ Khasekhemwy”. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script> 
    

      
      
      
    

   
    

      
      
      
    

    replaceSelection      ,        ,     . 
    

      
      
      
    

   
    

      
      
      
    

    “change”           .      ,     .           “input”,       ,        . 
    

      
      
      
    

   
    

      
      
      
    

           ,     . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

     –   .         checked,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="checkbox" id="purple"> <label for="purple">  </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

            .  for    id .    label   ,       –     . 
    

      
      
      
    

   
    

      
      
      
    

      ,          ,         . 
    

      
      
      
    

   
    

      
      
      
    

   : <input type="radio" name="color" value="mediumpurple">  <input type="radio" name="color" value="lightgreen">  <input type="radio" name="color" value="lightblue">  <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script> 
    

      
      
      
    

   
    

      
      
      
    

    document.getElementsByName       name.    (   for,   forEach,     –   )       . ,       target,   ,   .       –       ,           ,   . 
    

      
      
      
    

   
    

      
      
      
    

    select 
    

      
      
      
    

    select    –       .        ,      . 
    

      
      
      
    

   
    

      
      
      
    

     select  ,     ,   .    multiple      ,   . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

                ,      . 
    

      
      
      
    

   
    

      
      
      
    

    size      ,    –        .  ,  size 3,     ,  ,    multiple. 
    

      
      
      
    

   
    

      
      
      
    

       .     value,     ,     ,    .. .  value     .            , ..          . 
    

      
      
      
    

   
    

      
      
      
    

                options.      selected, ,     .    ,       . 
    

      
      
      
    

   
    

      
      
      
    

          select         .  Ctrl ( Command  ),     . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

              .          JavaScript.      .           ,        ,      . 
    

      
      
      
    

   
    

      
      
      
    

            « »,        . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script> 
    

      
      
      
    

   
    

      
      
      
    

    files  –   (  ),    .   .      file,             multiple. 
    

      
      
      
    

   
    

      
      
      
    

       files    ( ),  (   ),   (    media type - text/plain  image/jpeg). 
    

      
      
      
    

   
    

      
      
      
    

      ,   ,   .   ,  .         ,    ,    .  FileReader   ,   XMLHttpRequest,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

          FileReader,   “load”  ,     readAsText    .      result   . 
    

      
      
      
    

   
    

      
      
      
    

     Array.prototype.forEach    ,            file  reader   .        . 
    

      
      
      
    

   
    

      
      
      
    

    FileReaders    “error”,     .  error     error.           ,       (.  17): 
    

      
      
      
    

   
    

      
      
      
    

   function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); } 
    

      
      
      
    

   
    

      
      
      
    

       ,  slice    (..  blob)  reader. 
    

      
      
      
    

   
    

      
      
      
    

        
    

      
      
      
    

    HTML-   JavaScript      - –   ,   .           –              -. 
    

      
      
      
    

   
    

      
      
      
    

          ,  JavaScript    –        .     ,            .      20.       .       .  ? 
    

      
      
      
    

   
    

      
      
      
    

       ,      -        localStorage.        (   ),    : 
    

      
      
      
    

   
    

      
      
      
    

   localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username"); 
    

      
      
      
    

   
    

      
      
      
    

     localStorage ,    ,    removeItem     . 
    

      
      
      
    

   
    

      
      
      
    

        –     .  , ,     localStorage,           . 
    

      
      
      
    

   
    

      
      
      
    

        ,    .  ,    ,         ,     . 
    

      
      
      
    

   
    

      
      
      
    

          .      ,    .    JSON    localStorage.             .      . 
    

      
      
      
    

   
    

      
      
      
    

   : <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } //      var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script> 
    

      
      
      
    

   
    

      
      
      
    

      notes   localStorage,      –      « ».      localStorage  null.  null  JSON.parse,   null .         || . 
    

      
      
      
    

   
    

      
      
      
    

      note  (     ),       saveToStorage.    ,       ,     ,           – ,     . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,       “change”.   ,   “change” ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

        localStorage    sessionStorage.     ,   sessionStorage    ,       . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

   HTML       – , ,  ,  . 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript       .      “change”,     – “input”,      .     ,      .   value (    select)  checked (   )       . 
    

      
      
      
    

   
    

      
      
      
    

        “submit”.  JavaScript    preventDefault  ,    .         . 
    

      
      
      
    

   
    

      
      
      
    

             ,  FileReader         JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

    localStorage  sessionStorage       ,    .     (       ),   –   . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

    JavaScript 
    

      
      
      
    

    ,       JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

       ,     Function   10         .  ,  ,    ,  ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

      ,          .      ,      ,     .      ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> //      , //  'alert', 'document',  'scrollTo' var terms = []; for (var name in window) terms.push(name); //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    «»  
    

      
      
      
    

         ,      .   ( )   : 
    

      
      
      
    

   
    

      
      
      
    

   -   ,        ,  
    

      
      
      
    

   -   ,       ,     
    

      
      
      
    

   -   ,      ,  
    

      
      
      
    

   
    

      
      
      
    

     –        ,   ,  8 . 
    

      
      
      
    

   
    

      
      
      
    

    ,       ,        .  ,          ,  ,    ,      . 
    

      
      
      
    

   
    

      
      
      
    

    ,    .  Math.random     .         «   ».      ,        . 
    

      
      
      
    

   
    

      
      
      
    

   <div id="grid"></div> <button id="next"> </button> <script> //  . </script> 
 . HTML    ,      /        .          ,      . 
    

      
      
      
    

   
    

      
      
      
    

         .   type     .    : 
    

      
      
      
    

   
    

      
      
      
    

   text      
    

      
      
      
    

   password  ,  ,    
    

      
      
      
    

   checkbox  / 
    

      
      
      
    

   radio         
    

      
      
      
    

   file        
    

      
      
      
    

   
    

      
      
      
    

           .       .         (      ),     ,   JavaScript,           submit. 
    

      
      
      
    

   
    

      
      
      
    

   <p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p> 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript        .       . 
    

      
      
      
    

   
    

      
      
      
    

            .       ,           value. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea>    </textarea> 
    

      
      
      
    

   
    

      
      
      
    

         ,        . 
    

      
      
      
    

   <select> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

      ,   “change”. 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

         HTML,       .          , ..    . 
    

      
      
      
    

   
    

      
      
      
    

        ,      ,      .   -   .  ,     ,  ,   ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

      JavaScript   focus  blur.      DOM,    ,    .  document.activeElement   ,  . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script> 
    

      
      
      
    

   
    

      
      
      
    

      ,       -   .   JavaScript        ,   HTML    autofocus,      ,      .           ,      - . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" autofocus> 
    

      
      
      
    

   
    

      
      
      
    

           Tab.         tabindex.            OK,  ,      help. 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button> 
    

      
      
      
    

   
    

      
      
      
    

    ,    HTML   .   tabindex  ,      . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

        disabled,         DOM. 
    

      
      
      
    

   
    

      
      
      
    

   <button>   </button> <button disabled>  </button> 
    

      
      
      
    

   
    

      
      
      
    

          ,     ,     . 
    

      
      
      
    

   
    

      
      
      
    

              ,          ,      .   ,          ,      . 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

    ,    ,    DOM   form,     .  ,   ,   elements,    . 
    

      
      
      
    

   
    

      
      
      
    

    name  ,          .             elements,     ,    (   ),   map (   ). 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script> 
    

      
      
      
    

   
    

      
      
      
    

      type  submit    .   Enter       . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,     action,   GET  POST .      “submit”.     JavaScript,       ,    event preventDefault. 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     “submit”    .    ,             .               ,   XMLHttpRequest        . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

         text  password,    ,   .    DOM   value,          .       . 
    

      
      
      
    

   
    

      
      
      
    

      selectionStart  selectionEnd        .    ,   ,    . , 0   , 10 ,     10- .    ,    ,       .       . 
    

      
      
      
    

   
    

      
      
      
    

    , ,      Khasekhemwy,      .      ,    F2   “ Khasekhemwy”. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script> 
    

      
      
      
    

   
    

      
      
      
    

    replaceSelection      ,        ,     . 
    

      
      
      
    

   
    

      
      
      
    

    “change”           .      ,     .           “input”,       ,        . 
    

      
      
      
    

   
    

      
      
      
    

           ,     . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

     –   .         checked,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="checkbox" id="purple"> <label for="purple">  </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

            .  for    id .    label   ,       –     . 
    

      
      
      
    

   
    

      
      
      
    

      ,          ,         . 
    

      
      
      
    

   
    

      
      
      
    

   : <input type="radio" name="color" value="mediumpurple">  <input type="radio" name="color" value="lightgreen">  <input type="radio" name="color" value="lightblue">  <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script> 
    

      
      
      
    

   
    

      
      
      
    

    document.getElementsByName       name.    (   for,   forEach,     –   )       . ,       target,   ,   .       –       ,           ,   . 
    

      
      
      
    

   
    

      
      
      
    

    select 
    

      
      
      
    

    select    –       .        ,      . 
    

      
      
      
    

   
    

      
      
      
    

     select  ,     ,   .    multiple      ,   . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

                ,      . 
    

      
      
      
    

   
    

      
      
      
    

    size      ,    –        .  ,  size 3,     ,  ,    multiple. 
    

      
      
      
    

   
    

      
      
      
    

       .     value,     ,     ,    .. .  value     .            , ..          . 
    

      
      
      
    

   
    

      
      
      
    

                options.      selected, ,     .    ,       . 
    

      
      
      
    

   
    

      
      
      
    

          select         .  Ctrl ( Command  ),     . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

              .          JavaScript.      .           ,        ,      . 
    

      
      
      
    

   
    

      
      
      
    

            « »,        . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script> 
    

      
      
      
    

   
    

      
      
      
    

    files  –   (  ),    .   .      file,             multiple. 
    

      
      
      
    

   
    

      
      
      
    

       files    ( ),  (   ),   (    media type - text/plain  image/jpeg). 
    

      
      
      
    

   
    

      
      
      
    

      ,   ,   .   ,  .         ,    ,    .  FileReader   ,   XMLHttpRequest,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

          FileReader,   “load”  ,     readAsText    .      result   . 
    

      
      
      
    

   
    

      
      
      
    

     Array.prototype.forEach    ,            file  reader   .        . 
    

      
      
      
    

   
    

      
      
      
    

    FileReaders    “error”,     .  error     error.           ,       (.  17): 
    

      
      
      
    

   
    

      
      
      
    

   function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); } 
    

      
      
      
    

   
    

      
      
      
    

       ,  slice    (..  blob)  reader. 
    

      
      
      
    

   
    

      
      
      
    

        
    

      
      
      
    

    HTML-   JavaScript      - –   ,   .           –              -. 
    

      
      
      
    

   
    

      
      
      
    

          ,  JavaScript    –        .     ,            .      20.       .       .  ? 
    

      
      
      
    

   
    

      
      
      
    

       ,      -        localStorage.        (   ),    : 
    

      
      
      
    

   
    

      
      
      
    

   localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username"); 
    

      
      
      
    

   
    

      
      
      
    

     localStorage ,    ,    removeItem     . 
    

      
      
      
    

   
    

      
      
      
    

        –     .  , ,     localStorage,           . 
    

      
      
      
    

   
    

      
      
      
    

        ,    .  ,    ,         ,     . 
    

      
      
      
    

   
    

      
      
      
    

          .      ,    .    JSON    localStorage.             .      . 
    

      
      
      
    

   
    

      
      
      
    

   : <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } //      var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script> 
    

      
      
      
    

   
    

      
      
      
    

      notes   localStorage,      –      « ».      localStorage  null.  null  JSON.parse,   null .         || . 
    

      
      
      
    

   
    

      
      
      
    

      note  (     ),       saveToStorage.    ,       ,     ,           – ,     . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,       “change”.   ,   “change” ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

        localStorage    sessionStorage.     ,   sessionStorage    ,       . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

   HTML       – , ,  ,  . 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript       .      “change”,     – “input”,      .     ,      .   value (    select)  checked (   )       . 
    

      
      
      
    

   
    

      
      
      
    

        “submit”.  JavaScript    preventDefault  ,    .         . 
    

      
      
      
    

   
    

      
      
      
    

             ,  FileReader         JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

    localStorage  sessionStorage       ,    .     (       ),   –   . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

    JavaScript 
    

      
      
      
    

    ,       JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

       ,     Function   10         .  ,  ,    ,  ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

      ,          .      ,      ,     .      ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> //      , //  'alert', 'document',  'scrollTo' var terms = []; for (var name in window) terms.push(name); //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    «»  
    

      
      
      
    

         ,      .   ( )   : 
    

      
      
      
    

   
    

      
      
      
    

   -   ,        ,  
    

      
      
      
    

   -   ,       ,     
    

      
      
      
    

   -   ,      ,  
    

      
      
      
    

   
    

      
      
      
    

     –        ,   ,  8 . 
    

      
      
      
    

   
    

      
      
      
    

    ,       ,        .  ,          ,  ,    ,      . 
    

      
      
      
    

   
    

      
      
      
    

    ,    .  Math.random     .         «   ».      ,        . 
    

      
      
      
    

   
    

      
      
      
    

   <div id="grid"></div> <button id="next"> </button> <script> //  . </script> 
 . HTML    ,      /        .          ,      . 
    

      
      
      
    

   
    

      
      
      
    

         .   type     .    : 
    

      
      
      
    

   
    

      
      
      
    

   text      
    

      
      
      
    

   password  ,  ,    
    

      
      
      
    

   checkbox  / 
    

      
      
      
    

   radio         
    

      
      
      
    

   file        
    

      
      
      
    

   
    

      
      
      
    

           .       .         (      ),     ,   JavaScript,           submit. 
    

      
      
      
    

   
    

      
      
      
    

   <p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p> 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript        .       . 
    

      
      
      
    

   
    

      
      
      
    

            .       ,           value. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea>    </textarea> 
    

      
      
      
    

   
    

      
      
      
    

         ,        . 
    

      
      
      
    

   <select> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

      ,   “change”. 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

         HTML,       .          , ..    . 
    

      
      
      
    

   
    

      
      
      
    

        ,      ,      .   -   .  ,     ,  ,   ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

      JavaScript   focus  blur.      DOM,    ,    .  document.activeElement   ,  . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script> 
    

      
      
      
    

   
    

      
      
      
    

      ,       -   .   JavaScript        ,   HTML    autofocus,      ,      .           ,      - . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" autofocus> 
    

      
      
      
    

   
    

      
      
      
    

           Tab.         tabindex.            OK,  ,      help. 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button> 
    

      
      
      
    

   
    

      
      
      
    

    ,    HTML   .   tabindex  ,      . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

        disabled,         DOM. 
    

      
      
      
    

   
    

      
      
      
    

   <button>   </button> <button disabled>  </button> 
    

      
      
      
    

   
    

      
      
      
    

          ,     ,     . 
    

      
      
      
    

   
    

      
      
      
    

              ,          ,      .   ,          ,      . 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

    ,    ,    DOM   form,     .  ,   ,   elements,    . 
    

      
      
      
    

   
    

      
      
      
    

    name  ,          .             elements,     ,    (   ),   map (   ). 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script> 
    

      
      
      
    

   
    

      
      
      
    

      type  submit    .   Enter       . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,     action,   GET  POST .      “submit”.     JavaScript,       ,    event preventDefault. 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     “submit”    .    ,             .               ,   XMLHttpRequest        . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

         text  password,    ,   .    DOM   value,          .       . 
    

      
      
      
    

   
    

      
      
      
    

      selectionStart  selectionEnd        .    ,   ,    . , 0   , 10 ,     10- .    ,    ,       .       . 
    

      
      
      
    

   
    

      
      
      
    

    , ,      Khasekhemwy,      .      ,    F2   “ Khasekhemwy”. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script> 
    

      
      
      
    

   
    

      
      
      
    

    replaceSelection      ,        ,     . 
    

      
      
      
    

   
    

      
      
      
    

    “change”           .      ,     .           “input”,       ,        . 
    

      
      
      
    

   
    

      
      
      
    

           ,     . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

     –   .         checked,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="checkbox" id="purple"> <label for="purple">  </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

            .  for    id .    label   ,       –     . 
    

      
      
      
    

   
    

      
      
      
    

      ,          ,         . 
    

      
      
      
    

   
    

      
      
      
    

   : <input type="radio" name="color" value="mediumpurple">  <input type="radio" name="color" value="lightgreen">  <input type="radio" name="color" value="lightblue">  <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script> 
    

      
      
      
    

   
    

      
      
      
    

    document.getElementsByName       name.    (   for,   forEach,     –   )       . ,       target,   ,   .       –       ,           ,   . 
    

      
      
      
    

   
    

      
      
      
    

    select 
    

      
      
      
    

    select    –       .        ,      . 
    

      
      
      
    

   
    

      
      
      
    

     select  ,     ,   .    multiple      ,   . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

                ,      . 
    

      
      
      
    

   
    

      
      
      
    

    size      ,    –        .  ,  size 3,     ,  ,    multiple. 
    

      
      
      
    

   
    

      
      
      
    

       .     value,     ,     ,    .. .  value     .            , ..          . 
    

      
      
      
    

   
    

      
      
      
    

                options.      selected, ,     .    ,       . 
    

      
      
      
    

   
    

      
      
      
    

          select         .  Ctrl ( Command  ),     . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

              .          JavaScript.      .           ,        ,      . 
    

      
      
      
    

   
    

      
      
      
    

            « »,        . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script> 
    

      
      
      
    

   
    

      
      
      
    

    files  –   (  ),    .   .      file,             multiple. 
    

      
      
      
    

   
    

      
      
      
    

       files    ( ),  (   ),   (    media type - text/plain  image/jpeg). 
    

      
      
      
    

   
    

      
      
      
    

      ,   ,   .   ,  .         ,    ,    .  FileReader   ,   XMLHttpRequest,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

          FileReader,   “load”  ,     readAsText    .      result   . 
    

      
      
      
    

   
    

      
      
      
    

     Array.prototype.forEach    ,            file  reader   .        . 
    

      
      
      
    

   
    

      
      
      
    

    FileReaders    “error”,     .  error     error.           ,       (.  17): 
    

      
      
      
    

   
    

      
      
      
    

   function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); } 
    

      
      
      
    

   
    

      
      
      
    

       ,  slice    (..  blob)  reader. 
    

      
      
      
    

   
    

      
      
      
    

        
    

      
      
      
    

    HTML-   JavaScript      - –   ,   .           –              -. 
    

      
      
      
    

   
    

      
      
      
    

          ,  JavaScript    –        .     ,            .      20.       .       .  ? 
    

      
      
      
    

   
    

      
      
      
    

       ,      -        localStorage.        (   ),    : 
    

      
      
      
    

   
    

      
      
      
    

   localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username"); 
    

      
      
      
    

   
    

      
      
      
    

     localStorage ,    ,    removeItem     . 
    

      
      
      
    

   
    

      
      
      
    

        –     .  , ,     localStorage,           . 
    

      
      
      
    

   
    

      
      
      
    

        ,    .  ,    ,         ,     . 
    

      
      
      
    

   
    

      
      
      
    

          .      ,    .    JSON    localStorage.             .      . 
    

      
      
      
    

   
    

      
      
      
    

   : <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } //      var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script> 
    

      
      
      
    

   
    

      
      
      
    

      notes   localStorage,      –      « ».      localStorage  null.  null  JSON.parse,   null .         || . 
    

      
      
      
    

   
    

      
      
      
    

      note  (     ),       saveToStorage.    ,       ,     ,           – ,     . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,       “change”.   ,   “change” ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

        localStorage    sessionStorage.     ,   sessionStorage    ,       . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

   HTML       – , ,  ,  . 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript       .      “change”,     – “input”,      .     ,      .   value (    select)  checked (   )       . 
    

      
      
      
    

   
    

      
      
      
    

        “submit”.  JavaScript    preventDefault  ,    .         . 
    

      
      
      
    

   
    

      
      
      
    

             ,  FileReader         JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

    localStorage  sessionStorage       ,    .     (       ),   –   . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

    JavaScript 
    

      
      
      
    

    ,       JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

       ,     Function   10         .  ,  ,    ,  ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

      ,          .      ,      ,     .      ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> //      , //  'alert', 'document',  'scrollTo' var terms = []; for (var name in window) terms.push(name); //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    «»  
    

      
      
      
    

         ,      .   ( )   : 
    

      
      
      
    

   
    

      
      
      
    

   -   ,        ,  
    

      
      
      
    

   -   ,       ,     
    

      
      
      
    

   -   ,      ,  
    

      
      
      
    

   
    

      
      
      
    

     –        ,   ,  8 . 
    

      
      
      
    

   
    

      
      
      
    

    ,       ,        .  ,          ,  ,    ,      . 
    

      
      
      
    

   
    

      
      
      
    

    ,    .  Math.random     .         «   ».      ,        . 
    

      
      
      
    

   
    

      
      
      
    

   <div id="grid"></div> <button id="next"> </button> <script> //  . </script> 
 . HTML    ,      /        .          ,      . 
    

      
      
      
    

   
    

      
      
      
    

         .   type     .    : 
    

      
      
      
    

   
    

      
      
      
    

   text      
    

      
      
      
    

   password  ,  ,    
    

      
      
      
    

   checkbox  / 
    

      
      
      
    

   radio         
    

      
      
      
    

   file        
    

      
      
      
    

   
    

      
      
      
    

           .       .         (      ),     ,   JavaScript,           submit. 
    

      
      
      
    

   
    

      
      
      
    

   <p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p> 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript        .       . 
    

      
      
      
    

   
    

      
      
      
    

            .       ,           value. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea>    </textarea> 
    

      
      
      
    

   
    

      
      
      
    

         ,        . 
    

      
      
      
    

   <select> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

      ,   “change”. 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

         HTML,       .          , ..    . 
    

      
      
      
    

   
    

      
      
      
    

        ,      ,      .   -   .  ,     ,  ,   ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

      JavaScript   focus  blur.      DOM,    ,    .  document.activeElement   ,  . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script> 
    

      
      
      
    

   
    

      
      
      
    

      ,       -   .   JavaScript        ,   HTML    autofocus,      ,      .           ,      - . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" autofocus> 
    

      
      
      
    

   
    

      
      
      
    

           Tab.         tabindex.            OK,  ,      help. 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button> 
    

      
      
      
    

   
    

      
      
      
    

    ,    HTML   .   tabindex  ,      . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

        disabled,         DOM. 
    

      
      
      
    

   
    

      
      
      
    

   <button>   </button> <button disabled>  </button> 
    

      
      
      
    

   
    

      
      
      
    

          ,     ,     . 
    

      
      
      
    

   
    

      
      
      
    

              ,          ,      .   ,          ,      . 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

    ,    ,    DOM   form,     .  ,   ,   elements,    . 
    

      
      
      
    

   
    

      
      
      
    

    name  ,          .             elements,     ,    (   ),   map (   ). 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script> 
    

      
      
      
    

   
    

      
      
      
    

      type  submit    .   Enter       . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,     action,   GET  POST .      “submit”.     JavaScript,       ,    event preventDefault. 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     “submit”    .    ,             .               ,   XMLHttpRequest        . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

         text  password,    ,   .    DOM   value,          .       . 
    

      
      
      
    

   
    

      
      
      
    

      selectionStart  selectionEnd        .    ,   ,    . , 0   , 10 ,     10- .    ,    ,       .       . 
    

      
      
      
    

   
    

      
      
      
    

    , ,      Khasekhemwy,      .      ,    F2   “ Khasekhemwy”. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script> 
    

      
      
      
    

   
    

      
      
      
    

    replaceSelection      ,        ,     . 
    

      
      
      
    

   
    

      
      
      
    

    “change”           .      ,     .           “input”,       ,        . 
    

      
      
      
    

   
    

      
      
      
    

           ,     . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

     –   .         checked,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="checkbox" id="purple"> <label for="purple">  </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

            .  for    id .    label   ,       –     . 
    

      
      
      
    

   
    

      
      
      
    

      ,          ,         . 
    

      
      
      
    

   
    

      
      
      
    

   : <input type="radio" name="color" value="mediumpurple">  <input type="radio" name="color" value="lightgreen">  <input type="radio" name="color" value="lightblue">  <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script> 
    

      
      
      
    

   
    

      
      
      
    

    document.getElementsByName       name.    (   for,   forEach,     –   )       . ,       target,   ,   .       –       ,           ,   . 
    

      
      
      
    

   
    

      
      
      
    

    select 
    

      
      
      
    

    select    –       .        ,      . 
    

      
      
      
    

   
    

      
      
      
    

     select  ,     ,   .    multiple      ,   . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

                ,      . 
    

      
      
      
    

   
    

      
      
      
    

    size      ,    –        .  ,  size 3,     ,  ,    multiple. 
    

      
      
      
    

   
    

      
      
      
    

       .     value,     ,     ,    .. .  value     .            , ..          . 
    

      
      
      
    

   
    

      
      
      
    

                options.      selected, ,     .    ,       . 
    

      
      
      
    

   
    

      
      
      
    

          select         .  Ctrl ( Command  ),     . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

              .          JavaScript.      .           ,        ,      . 
    

      
      
      
    

   
    

      
      
      
    

            « »,        . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script> 
    

      
      
      
    

   
    

      
      
      
    

    files  –   (  ),    .   .      file,             multiple. 
    

      
      
      
    

   
    

      
      
      
    

       files    ( ),  (   ),   (    media type - text/plain  image/jpeg). 
    

      
      
      
    

   
    

      
      
      
    

      ,   ,   .   ,  .         ,    ,    .  FileReader   ,   XMLHttpRequest,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

          FileReader,   “load”  ,     readAsText    .      result   . 
    

      
      
      
    

   
    

      
      
      
    

     Array.prototype.forEach    ,            file  reader   .        . 
    

      
      
      
    

   
    

      
      
      
    

    FileReaders    “error”,     .  error     error.           ,       (.  17): 
    

      
      
      
    

   
    

      
      
      
    

   function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); } 
    

      
      
      
    

   
    

      
      
      
    

       ,  slice    (..  blob)  reader. 
    

      
      
      
    

   
    

      
      
      
    

        
    

      
      
      
    

    HTML-   JavaScript      - –   ,   .           –              -. 
    

      
      
      
    

   
    

      
      
      
    

          ,  JavaScript    –        .     ,            .      20.       .       .  ? 
    

      
      
      
    

   
    

      
      
      
    

       ,      -        localStorage.        (   ),    : 
    

      
      
      
    

   
    

      
      
      
    

   localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username"); 
    

      
      
      
    

   
    

      
      
      
    

     localStorage ,    ,    removeItem     . 
    

      
      
      
    

   
    

      
      
      
    

        –     .  , ,     localStorage,           . 
    

      
      
      
    

   
    

      
      
      
    

        ,    .  ,    ,         ,     . 
    

      
      
      
    

   
    

      
      
      
    

          .      ,    .    JSON    localStorage.             .      . 
    

      
      
      
    

   
    

      
      
      
    

   : <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } //      var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script> 
    

      
      
      
    

   
    

      
      
      
    

      notes   localStorage,      –      « ».      localStorage  null.  null  JSON.parse,   null .         || . 
    

      
      
      
    

   
    

      
      
      
    

      note  (     ),       saveToStorage.    ,       ,     ,           – ,     . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,       “change”.   ,   “change” ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

        localStorage    sessionStorage.     ,   sessionStorage    ,       . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

   HTML       – , ,  ,  . 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript       .      “change”,     – “input”,      .     ,      .   value (    select)  checked (   )       . 
    

      
      
      
    

   
    

      
      
      
    

        “submit”.  JavaScript    preventDefault  ,    .         . 
    

      
      
      
    

   
    

      
      
      
    

             ,  FileReader         JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

    localStorage  sessionStorage       ,    .     (       ),   –   . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

    JavaScript 
    

      
      
      
    

    ,       JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

       ,     Function   10         .  ,  ,    ,  ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

      ,          .      ,      ,     .      ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> //      , //  'alert', 'document',  'scrollTo' var terms = []; for (var name in window) terms.push(name); //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    «»  
    

      
      
      
    

         ,      .   ( )   : 
    

      
      
      
    

   
    

      
      
      
    

   -   ,        ,  
    

      
      
      
    

   -   ,       ,     
    

      
      
      
    

   -   ,      ,  
    

      
      
      
    

   
    

      
      
      
    

     –        ,   ,  8 . 
    

      
      
      
    

   
    

      
      
      
    

    ,       ,        .  ,          ,  ,    ,      . 
    

      
      
      
    

   
    

      
      
      
    

    ,    .  Math.random     .         «   ».      ,        . 
    

      
      
      
    

   
    

      
      
      
    

   <div id="grid"></div> <button id="next"> </button> <script> //  . </script> 

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

 . HTML    ,      /        .          ,      . 
    

      
      
      
    

   
    

      
      
      
    

         .   type     .    : 
    

      
      
      
    

   
    

      
      
      
    

   text      
    

      
      
      
    

   password  ,  ,    
    

      
      
      
    

   checkbox  / 
    

      
      
      
    

   radio         
    

      
      
      
    

   file        
    

      
      
      
    

   
    

      
      
      
    

           .       .         (      ),     ,   JavaScript,           submit. 
    

      
      
      
    

   
    

      
      
      
    

   <p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p> 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript        .       . 
    

      
      
      
    

   
    

      
      
      
    

            .       ,           value. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea>    </textarea> 
    

      
      
      
    

   
    

      
      
      
    

         ,        . 
    

      
      
      
    

   <select> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

      ,   “change”. 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

         HTML,       .          , ..    . 
    

      
      
      
    

   
    

      
      
      
    

        ,      ,      .   -   .  ,     ,  ,   ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

      JavaScript   focus  blur.      DOM,    ,    .  document.activeElement   ,  . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script> 
    

      
      
      
    

   
    

      
      
      
    

      ,       -   .   JavaScript        ,   HTML    autofocus,      ,      .           ,      - . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" autofocus> 
    

      
      
      
    

   
    

      
      
      
    

           Tab.         tabindex.            OK,  ,      help. 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button> 
    

      
      
      
    

   
    

      
      
      
    

    ,    HTML   .   tabindex  ,      . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

        disabled,         DOM. 
    

      
      
      
    

   
    

      
      
      
    

   <button>   </button> <button disabled>  </button> 
    

      
      
      
    

   
    

      
      
      
    

          ,     ,     . 
    

      
      
      
    

   
    

      
      
      
    

              ,          ,      .   ,          ,      . 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

    ,    ,    DOM   form,     .  ,   ,   elements,    . 
    

      
      
      
    

   
    

      
      
      
    

    name  ,          .             elements,     ,    (   ),   map (   ). 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script> 
    

      
      
      
    

   
    

      
      
      
    

      type  submit    .   Enter       . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,     action,   GET  POST .      “submit”.     JavaScript,       ,    event preventDefault. 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     “submit”    .    ,             .               ,   XMLHttpRequest        . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

         text  password,    ,   .    DOM   value,          .       . 
    

      
      
      
    

   
    

      
      
      
    

      selectionStart  selectionEnd        .    ,   ,    . , 0   , 10 ,     10- .    ,    ,       .       . 
    

      
      
      
    

   
    

      
      
      
    

    , ,      Khasekhemwy,      .      ,    F2   “ Khasekhemwy”. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script> 
    

      
      
      
    

   
    

      
      
      
    

    replaceSelection      ,        ,     . 
    

      
      
      
    

   
    

      
      
      
    

    “change”           .      ,     .           “input”,       ,        . 
    

      
      
      
    

   
    

      
      
      
    

           ,     . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

     –   .         checked,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="checkbox" id="purple"> <label for="purple">  </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

            .  for    id .    label   ,       –     . 
    

      
      
      
    

   
    

      
      
      
    

      ,          ,         . 
    

      
      
      
    

   
    

      
      
      
    

   : <input type="radio" name="color" value="mediumpurple">  <input type="radio" name="color" value="lightgreen">  <input type="radio" name="color" value="lightblue">  <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script> 
    

      
      
      
    

   
    

      
      
      
    

    document.getElementsByName       name.    (   for,   forEach,     –   )       . ,       target,   ,   .       –       ,           ,   . 
    

      
      
      
    

   
    

      
      
      
    

    select 
    

      
      
      
    

    select    –       .        ,      . 
    

      
      
      
    

   
    

      
      
      
    

     select  ,     ,   .    multiple      ,   . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

                ,      . 
    

      
      
      
    

   
    

      
      
      
    

    size      ,    –        .  ,  size 3,     ,  ,    multiple. 
    

      
      
      
    

   
    

      
      
      
    

       .     value,     ,     ,    .. .  value     .            , ..          . 
    

      
      
      
    

   
    

      
      
      
    

                options.      selected, ,     .    ,       . 
    

      
      
      
    

   
    

      
      
      
    

          select         .  Ctrl ( Command  ),     . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

              .          JavaScript.      .           ,        ,      . 
    

      
      
      
    

   
    

      
      
      
    

            « »,        . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script> 
    

      
      
      
    

   
    

      
      
      
    

    files  –   (  ),    .   .      file,             multiple. 
    

      
      
      
    

   
    

      
      
      
    

       files    ( ),  (   ),   (    media type - text/plain  image/jpeg). 
    

      
      
      
    

   
    

      
      
      
    

      ,   ,   .   ,  .         ,    ,    .  FileReader   ,   XMLHttpRequest,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

          FileReader,   “load”  ,     readAsText    .      result   . 
    

      
      
      
    

   
    

      
      
      
    

     Array.prototype.forEach    ,            file  reader   .        . 
    

      
      
      
    

   
    

      
      
      
    

    FileReaders    “error”,     .  error     error.           ,       (.  17): 
    

      
      
      
    

   
    

      
      
      
    

   function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); } 
    

      
      
      
    

   
    

      
      
      
    

       ,  slice    (..  blob)  reader. 
    

      
      
      
    

   
    

      
      
      
    

        
    

      
      
      
    

    HTML-   JavaScript      - –   ,   .           –              -. 
    

      
      
      
    

   
    

      
      
      
    

          ,  JavaScript    –        .     ,            .      20.       .       .  ? 
    

      
      
      
    

   
    

      
      
      
    

       ,      -        localStorage.        (   ),    : 
    

      
      
      
    

   
    

      
      
      
    

   localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username"); 
    

      
      
      
    

   
    

      
      
      
    

     localStorage ,    ,    removeItem     . 
    

      
      
      
    

   
    

      
      
      
    

        –     .  , ,     localStorage,           . 
    

      
      
      
    

   
    

      
      
      
    

        ,    .  ,    ,         ,     . 
    

      
      
      
    

   
    

      
      
      
    

          .      ,    .    JSON    localStorage.             .      . 
    

      
      
      
    

   
    

      
      
      
    

   : <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } //      var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script> 
    

      
      
      
    

   
    

      
      
      
    

      notes   localStorage,      –      « ».      localStorage  null.  null  JSON.parse,   null .         || . 
    

      
      
      
    

   
    

      
      
      
    

      note  (     ),       saveToStorage.    ,       ,     ,           – ,     . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,       “change”.   ,   “change” ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

        localStorage    sessionStorage.     ,   sessionStorage    ,       . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

   HTML       – , ,  ,  . 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript       .      “change”,     – “input”,      .     ,      .   value (    select)  checked (   )       . 
    

      
      
      
    

   
    

      
      
      
    

        “submit”.  JavaScript    preventDefault  ,    .         . 
    

      
      
      
    

   
    

      
      
      
    

             ,  FileReader         JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

    localStorage  sessionStorage       ,    .     (       ),   –   . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

    JavaScript 
    

      
      
      
    

    ,       JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

       ,     Function   10         .  ,  ,    ,  ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

      ,          .      ,      ,     .      ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> //      , //  'alert', 'document',  'scrollTo' var terms = []; for (var name in window) terms.push(name); //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    «»  
    

      
      
      
    

         ,      .   ( )   : 
    

      
      
      
    

   
    

      
      
      
    

   -   ,        ,  
    

      
      
      
    

   -   ,       ,     
    

      
      
      
    

   -   ,      ,  
    

      
      
      
    

   
    

      
      
      
    

     –        ,   ,  8 . 
    

      
      
      
    

   
    

      
      
      
    

    ,       ,        .  ,          ,  ,    ,      . 
    

      
      
      
    

   
    

      
      
      
    

    ,    .  Math.random     .         «   ».      ,        . 
    

      
      
      
    

   
    

      
      
      
    

   <div id="grid"></div> <button id="next"> </button> <script> //  . </script> 

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

. HTML , / . , .



. type . :



text

password , ,

checkbox /

radio

file



. . ( ), , JavaScript, submit.



<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p>



JavaScript . .



. , value.



<textarea> </textarea>



, .

<select> <option></option> <option></option> <option> </option> </select>



, “change”.





HTML, . , .. .



, , . - . , , , , , .



JavaScript focus blur. DOM, , . document.activeElement , .



<input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script>



, - . JavaScript , HTML autofocus, , . , - .



<input type="text" autofocus>



Tab. tabindex. OK, , help.



<input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button>



, HTML . tabindex , .





disabled, DOM.



<button> </button> <button disabled> </button>



, , .



, , . , , .





, , DOM form, . , , elements, .



name , . elements, , ( ), map ( ).



<form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script>



type submit . Enter .



, , action, GET POST . “submit”. JavaScript, , event preventDefault.



<form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script>



“submit” . , . , XMLHttpRequest .





text password, , . DOM value, . .



selectionStart selectionEnd . , , . , 0 , 10 , 10- . , , . .



, , Khasekhemwy, . , F2 “ Khasekhemwy”.



<textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script>



replaceSelection , , .



“change” . , . “input”, , .



, .



<input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script>





– . checked, .



<input type="checkbox" id="purple"> <label for="purple"> </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script>



. for id . label , – .



, , .



: <input type="radio" name="color" value="mediumpurple"> <input type="radio" name="color" value="lightgreen"> <input type="radio" name="color" value="lightblue"> <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script>



document.getElementsByName name. ( for, forEach, – ) . , target, , . – , , .



select

select – . , .



select , , . multiple , .



<select multiple> <option></option> <option></option> <option> </option> </select>



, .



size , – . , size 3, , , multiple.



. value, , , .. . value . , .. .



options. selected, , . , .



select . Ctrl ( Command ), .



<select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script>





. JavaScript. . , , .



« », .



<input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script>



files – ( ), . . file, multiple.



files ( ), ( ), ( media type - text/plain image/jpeg).



, , . , . , , . FileReader , XMLHttpRequest, .



<input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script>



FileReader, “load” , readAsText . result .



Array.prototype.forEach , file reader . .



FileReaders “error”, . error error. , (. 17):



function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); }



, slice (.. blob) reader.





HTML- JavaScript - – , . – -.



, JavaScript – . , . 20. . . ?



, - localStorage. ( ), :



localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username");



localStorage , , removeItem .



– . , , localStorage, .



, . , , , .



. , . JSON localStorage. . .



: <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } // var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script>



notes localStorage, – « ». localStorage null. null JSON.parse, null . || .



note ( ), saveToStorage. , , , – , .



, , “change”. , “change” , , .



localStorage sessionStorage. , sessionStorage , .





HTML – , , , .



JavaScript . “change”, – “input”, . , . value ( select) checked ( ) .



“submit”. JavaScript preventDefault , . .



, FileReader JavaScript.



localStorage sessionStorage , . ( ), – .





JavaScript

, JavaScript.



, Function 10 . , , , , .



<textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> // . </script>





, . , , . , .



<input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> // , // 'alert', 'document', 'scrollTo' var terms = []; for (var name in window) terms.push(name); // . </script>



«»

, . ( ) :



- , ,

- , ,

- , ,



– , , 8 .



, , . , , , , .



, . Math.random . « ». , .



<div id="grid"></div> <button id="next"> </button> <script> // . </script>

 . HTML    ,      /        .          ,      . 
    

      
      
      
    

   
    

      
      
      
    

         .   type     .    : 
    

      
      
      
    

   
    

      
      
      
    

   text      
    

      
      
      
    

   password  ,  ,    
    

      
      
      
    

   checkbox  / 
    

      
      
      
    

   radio         
    

      
      
      
    

   file        
    

      
      
      
    

   
    

      
      
      
    

           .       .         (      ),     ,   JavaScript,           submit. 
    

      
      
      
    

   
    

      
      
      
    

   <p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p> 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript        .       . 
    

      
      
      
    

   
    

      
      
      
    

            .       ,           value. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea>    </textarea> 
    

      
      
      
    

   
    

      
      
      
    

         ,        . 
    

      
      
      
    

   <select> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

      ,   “change”. 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

         HTML,       .          , ..    . 
    

      
      
      
    

   
    

      
      
      
    

        ,      ,      .   -   .  ,     ,  ,   ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

      JavaScript   focus  blur.      DOM,    ,    .  document.activeElement   ,  . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> <script> document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → BODY </script> 
    

      
      
      
    

   
    

      
      
      
    

      ,       -   .   JavaScript        ,   HTML    autofocus,      ,      .           ,      - . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" autofocus> 
    

      
      
      
    

   
    

      
      
      
    

           Tab.         tabindex.            OK,  ,      help. 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" tabindex=1> <a href=".">(help)</a> <button onclick="console.log('ok')" tabindex=2>OK</button> 
    

      
      
      
    

   
    

      
      
      
    

    ,    HTML   .   tabindex  ,      . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

        disabled,         DOM. 
    

      
      
      
    

   
    

      
      
      
    

   <button>   </button> <button disabled>  </button> 
    

      
      
      
    

   
    

      
      
      
    

          ,     ,     . 
    

      
      
      
    

   
    

      
      
      
    

              ,          ,      .   ,          ,      . 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

    ,    ,    DOM   form,     .  ,   ,   elements,    . 
    

      
      
      
    

   
    

      
      
      
    

    name  ,          .             elements,     ,    (   ),   map (   ). 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="name"><br> : <input type="password" name="password"><br> <button type="submit"></button> </form> <script> var form = document.querySelector("form"); console.log(form.elements[1].type); // → password console.log(form.elements.password.type); // → password console.log(form.elements.name.form == form); // → true </script> 
    

      
      
      
    

   
    

      
      
      
    

      type  submit    .   Enter       . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,     action,   GET  POST .      “submit”.     JavaScript,       ,    event preventDefault. 
    

      
      
      
    

   
    

      
      
      
    

   <form action="example/submit.html"> : <input type="text" name="value"> <button type="submit"> </button> </form> <script> var form = document.querySelector("form"); form.addEventListener("submit", function(event) { console.log("Saving value", form.elements.value.value); event.preventDefault(); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     “submit”    .    ,             .               ,   XMLHttpRequest        . 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

         text  password,    ,   .    DOM   value,          .       . 
    

      
      
      
    

   
    

      
      
      
    

      selectionStart  selectionEnd        .    ,   ,    . , 0   , 10 ,     10- .    ,    ,       .       . 
    

      
      
      
    

   
    

      
      
      
    

    , ,      Khasekhemwy,      .      ,    F2   “ Khasekhemwy”. 
    

      
      
      
    

   
    

      
      
      
    

   <textarea></textarea> <script> var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) { // The key code for F2 happens to be 113 if (event.keyCode == 113) { replaceSelection(textarea, "Khasekhemwy"); event.preventDefault(); } }); function replaceSelection(field, word) { var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Put the cursor after the word field.selectionStart = field.selectionEnd = from + word.length; }; </script> 
    

      
      
      
    

   
    

      
      
      
    

    replaceSelection      ,        ,     . 
    

      
      
      
    

   
    

      
      
      
    

    “change”           .      ,     .           “input”,       ,        . 
    

      
      
      
    

   
    

      
      
      
    

           ,     . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text"> length: <span id="length">0</span> <script> var text = document.querySelector("input"); var output = document.querySelector("#length"); text.addEventListener("input", function() { output.textContent = text.value.length; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

      
    

      
      
      
    

     –   .         checked,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="checkbox" id="purple"> <label for="purple">  </label> <script> var checkbox = document.querySelector("#purple"); checkbox.addEventListener("change", function() { document.body.style.background = checkbox.checked ? "mediumpurple" : ""; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

            .  for    id .    label   ,       –     . 
    

      
      
      
    

   
    

      
      
      
    

      ,          ,         . 
    

      
      
      
    

   
    

      
      
      
    

   : <input type="radio" name="color" value="mediumpurple">  <input type="radio" name="color" value="lightgreen">  <input type="radio" name="color" value="lightblue">  <script> var buttons = document.getElementsByName("color"); function setColor(event) { document.body.style.background = event.target.value; } for (var i = 0; i < buttons.length; i++) buttons[i].addEventListener("change", setColor); </script> 
    

      
      
      
    

   
    

      
      
      
    

    document.getElementsByName       name.    (   for,   forEach,     –   )       . ,       target,   ,   .       –       ,           ,   . 
    

      
      
      
    

   
    

      
      
      
    

    select 
    

      
      
      
    

    select    –       .        ,      . 
    

      
      
      
    

   
    

      
      
      
    

     select  ,     ,   .    multiple      ,   . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option></option> <option></option> <option> </option> </select> 
    

      
      
      
    

   
    

      
      
      
    

                ,      . 
    

      
      
      
    

   
    

      
      
      
    

    size      ,    –        .  ,  size 3,     ,  ,    multiple. 
    

      
      
      
    

   
    

      
      
      
    

       .     value,     ,     ,    .. .  value     .            , ..          . 
    

      
      
      
    

   
    

      
      
      
    

                options.      selected, ,     .    ,       . 
    

      
      
      
    

   
    

      
      
      
    

          select         .  Ctrl ( Command  ),     . 
    

      
      
      
    

   
    

      
      
      
    

   <select multiple> <option value="1">0001</option> <option value="2">0010</option> <option value="4">0100</option> <option value="8">1000</option> </select> = <span id="output">0</span> <script> var select = document.querySelector("select"); var output = document.querySelector("#output"); select.addEventListener("change", function() { var number = 0; for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; }); </script> 
    

      
      
      
    

   
    

      
      
      
    

     
    

      
      
      
    

              .          JavaScript.      .           ,        ,      . 
    

      
      
      
    

   
    

      
      
      
    

            « »,        . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file"> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { if (input.files.length > 0) { var file = input.files[0]; console.log("You chose", file.name); if (file.type) console.log("It has type", file.type); } }); </script> 
    

      
      
      
    

   
    

      
      
      
    

    files  –   (  ),    .   .      file,             multiple. 
    

      
      
      
    

   
    

      
      
      
    

       files    ( ),  (   ),   (    media type - text/plain  image/jpeg). 
    

      
      
      
    

   
    

      
      
      
    

      ,   ,   .   ,  .         ,    ,    .  FileReader   ,   XMLHttpRequest,   . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="file" multiple> <script> var input = document.querySelector("input"); input.addEventListener("change", function() { Array.prototype.forEach.call(input.files, function(file) { var reader = new FileReader(); reader.addEventListener("load", function() { console.log("File", file.name, "starts with", reader.result.slice(0, 20)); }); reader.readAsText(file); }); }); </script> 
    

      
      
      
    

   
    

      
      
      
    

          FileReader,   “load”  ,     readAsText    .      result   . 
    

      
      
      
    

   
    

      
      
      
    

     Array.prototype.forEach    ,            file  reader   .        . 
    

      
      
      
    

   
    

      
      
      
    

    FileReaders    “error”,     .  error     error.           ,       (.  17): 
    

      
      
      
    

   
    

      
      
      
    

   function readFile(file) { return new Promise(function(succeed, fail) { var reader = new FileReader(); reader.addEventListener("load", function() { succeed(reader.result); }); reader.addEventListener("error", function() { fail(reader.error); }); reader.readAsText(file); }); } 
    

      
      
      
    

   
    

      
      
      
    

       ,  slice    (..  blob)  reader. 
    

      
      
      
    

   
    

      
      
      
    

        
    

      
      
      
    

    HTML-   JavaScript      - –   ,   .           –              -. 
    

      
      
      
    

   
    

      
      
      
    

          ,  JavaScript    –        .     ,            .      20.       .       .  ? 
    

      
      
      
    

   
    

      
      
      
    

       ,      -        localStorage.        (   ),    : 
    

      
      
      
    

   
    

      
      
      
    

   localStorage.setItem("username", "marijn"); console.log(localStorage.getItem("username")); // → marijn localStorage.removeItem("username"); 
    

      
      
      
    

   
    

      
      
      
    

     localStorage ,    ,    removeItem     . 
    

      
      
      
    

   
    

      
      
      
    

        –     .  , ,     localStorage,           . 
    

      
      
      
    

   
    

      
      
      
    

        ,    .  ,    ,         ,     . 
    

      
      
      
    

   
    

      
      
      
    

          .      ,    .    JSON    localStorage.             .      . 
    

      
      
      
    

   
    

      
      
      
    

   : <select id="list"></select> <button onclick="addNote()"></button><br> <textarea id="currentnote" style="width: 100%; height: 10em"> </textarea> <script> var list = document.querySelector("#list"); function addToList(name) { var option = document.createElement("option"); option.textContent = name; list.appendChild(option); } //      var notes = JSON.parse(localStorage.getItem("notes")) || {" ": ""}; for (var name in notes) if (notes.hasOwnProperty(name)) addToList(name); function saveToStorage() { localStorage.setItem("notes", JSON.stringify(notes)); } var current = document.querySelector("#currentnote"); current.value = notes[list.value]; list.addEventListener("change", function() { current.value = notes[list.value]; }); current.addEventListener("change", function() { notes[list.value] = current.value; saveToStorage(); }); function addNote() { var name = prompt(" ", ""); if (!name) return; if (!notes.hasOwnProperty(name)) { notes[name] = ""; addToList(name); saveToStorage(); } list.value = name; current.value = notes[name]; } </script> 
    

      
      
      
    

   
    

      
      
      
    

      notes   localStorage,      –      « ».      localStorage  null.  null  JSON.parse,   null .         || . 
    

      
      
      
    

   
    

      
      
      
    

      note  (     ),       saveToStorage.    ,       ,     ,           – ,     . 
    

      
      
      
    

   
    

      
      
      
    

      ,     ,       “change”.   ,   “change” ,      ,      . 
    

      
      
      
    

   
    

      
      
      
    

        localStorage    sessionStorage.     ,   sessionStorage    ,       . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

   HTML       – , ,  ,  . 
    

      
      
      
    

   
    

      
      
      
    

    JavaScript       .      “change”,     – “input”,      .     ,      .   value (    select)  checked (   )       . 
    

      
      
      
    

   
    

      
      
      
    

        “submit”.  JavaScript    preventDefault  ,    .         . 
    

      
      
      
    

   
    

      
      
      
    

             ,  FileReader         JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

    localStorage  sessionStorage       ,    .     (       ),   –   . 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

    JavaScript 
    

      
      
      
    

    ,       JavaScript. 
    

      
      
      
    

   
    

      
      
      
    

       ,     Function   10         .  ,  ,    ,  ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <textarea id="code">return "hi";</textarea> <button id="button"></button> <pre id="output"></pre> <script> //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    
    

      
      
      
    

      ,          .      ,      ,     .      ,      . 
    

      
      
      
    

   
    

      
      
      
    

   <input type="text" id="field"> <div id="suggestions" style="cursor: pointer"></div> <script> //      , //  'alert', 'document',  'scrollTo' var terms = []; for (var name in window) terms.push(name); //  . </script> 
    

      
      
      
    

   
    

      
      
      
    

    «»  
    

      
      
      
    

         ,      .   ( )   : 
    

      
      
      
    

   
    

      
      
      
    

   -   ,        ,  
    

      
      
      
    

   -   ,       ,     
    

      
      
      
    

   -   ,      ,  
    

      
      
      
    

   
    

      
      
      
    

     –        ,   ,  8 . 
    

      
      
      
    

   
    

      
      
      
    

    ,       ,        .  ,          ,  ,    ,      . 
    

      
      
      
    

   
    

      
      
      
    

    ,    .  Math.random     .         «   ».      ,        . 
    

      
      
      
    

   
    

      
      
      
    

   <div id="grid"></div> <button id="next"> </button> <script> //  . </script>