【JSポケットブック】第11章:HTMLフォーム及びlocal Strageの使用

24942 ワード
javascript 先端バックエンド es 6
作者:valentinogagliardi
前端のサトシ
ソース:github
アリ雲サーバーはとても安くて人気があります.今年は去年より安いです.10.24~11.11購入は1年86元で、3年229元です.下記のリンクをクリックして参加できます.https://www.aliyun.com/1111/2...
読める性を保証するために、本文は直訳ではなく意訳を採用する.
HTMLフォームを再紹介します.
ページはデータを表示するだけではありません.HTMLフォームがあります.ユーザーデータを収集して操作できます.この章では、簡単なHTMLフォームを構築することによってフォームに関する知識を学びます.
このプロセスでは、より多くのDOMイベントに関する情報が理解され、 8 から要素がHTML要素であることが分かりました.他のサブ要素が含まれている可能性があります.
は、データを捕捉するために用いられる
</code>       </li> 
  <li> <code><button/></code>       </li> 
 </ul> 
 <p>    ，         <code><input/></code>、<code><textarea/></code>   <code><button/></code>    。     ，   <code>input</code>       <code>type</code>    ，         :    <code>text</code>、<code>email</code>、<code>number</code>、<code>date</code>  。   <code>type</code>     ，               <code>id</code>   。</p> 
 <p><code>input</code>   <code>textarea</code>        <code>name</code>   。          JS         ，name       。       。</p> 
 <p>  ，         <code><label/></code>            。       ，      <code>label</code>   <code>for</code>        <code>input</code>     <code>id</code>，      <code>label</code>       <code>input</code>   。</p> 
 <p>             ，         。              ，            。      ，        HTML    。       <strong>form.html</strong>         HTML：</p> 
 <pre><code>

    <meta charset="UTF-8"/>
    <title>HTML forms and JavaScript</title>


<h1>What's next?</h1>
<form>
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required=""/>

    <label for="description">Short description</label>
    <input type="text" id="description" name="description" required=""/>

    <label for="task">Task</label>
    <textarea id="task" name="tak" required=""/>

    <button type="submit">Submit</button>
</form>

<script src="form.js"/>

</code></pre> 
 <p>    ，     <code>input</code>        ，     ，               。    HTML    ，      <code>type</code>   ，                  。</p> 
 <p>HTML5         :  ，    <code>email</code>         <code>“at”</code>   <code>@</code>        。    ，                :             <code>a@a</code>        。   <code>@</code>，       (          <code>pattern</code>             。</p> 
 <p>  <code><input/></code>          ，    <code>minlength</code>   <code>maxlength</code>        。    ，                     <code>“aa”</code>   <code>“testtest”</code>    。</p> 
 <pre><code>


    <meta charset="UTF-8"/>
    <title>HTML forms and JavaScript</title>


<h1>What's next?</h1>
<form>
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required="" minlength="5"/>

    <label for="description">Short description</label>
    <input type="text" id="description" name="description" required="" minlength="5"/>

    <label for="task">Task</label>
    <textarea id="task" name="tak" required="" minlength="10"/>

    <button type="submit">Submit</button>
</form>

<script src="form.js"/>

</code></pre> 
 <p>      ，          ，  ，           。</p> 
 <h2>       </h2> 
 <p>HTML     HTMLFormElement        。       HTML     ，     <code>HTMLElement</code>，       <code>EventTarget</code>。      DOM    ，       JS   。         ：</p> 
 <pre><code>const aForm = document.createElement("form");
console.log(typeof aForm);
</code></pre> 
 <p>    <code>“object”</code>，   <code>HTMLElement</code>   <code>EventTarget</code>         ：</p> 
 <pre><code>console.log(typeof EventTarget); // "function"
</code></pre> 
 <p>  ，     HTML        <code>EventTarget</code>，     <code><form/></code>   <code>EventTarget</code>  “  ”，  ：</p> 
 <pre><code>const aForm = document.createElement("form");
console.log(aForm instanceof EventTarget); // true
</code></pre> 
 <p><code>form</code>   <code>EventTarget</code>         。  <code>EventTarget</code>          DOM   (  8   )。</p> 
 <p>DOM        ，   <code>click</code>、<code>blur</code>、<code>change</code>   。  ，        HTML       <code>submit</code>   。      <code>input</code>   <code>type</code>   “submit”    (          ) ，     <code>submit</code>   ，    ：</p> 
 <pre><code>


    <meta charset="UTF-8"/>
    <title>HTML forms and JavaScript</title>


<h1>What's next?</h1>
<form>
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required="" minlength="5"/>

    <label for="description">Short description</label>
    <input type="text" id="description" name="description" required="" minlength="5"/>

    <label for="task">Task</label>
    <textarea id="task" name="task" required="" minlength="10"/>

    <button type="submit">Submit</button>
</form>

<script src="form.js"/>

</code></pre> 
 <p>   ，<code><button type="submit">Submit</button></code>       。         <code>input</code>   ：</p> 
 <pre><code><!--        -->
<input type="submit"/>

<!--         -->
<button>    </button>

<!--      -->
<input type="image" src="av.gif"/>
</code></pre> 
 <p>                  ，                 ，           。（textarea      ，         。）           ，          。</p> 
 <p>                  ，  ，     <code>submit</code>   。</p> 
 <pre><code>const formSelector = document.querySelector("form");

new Form(formSelector);
</code></pre> 
 <p>DOM     <code>document.forms</code>，            。        ：</p> 
 <pre><code>const formSelector = document.forms[0];

new Form(formSelector);
</code></pre> 
 <p>      :         ，                     。       ，          ，          <code>init</code>    。   <strong>form.html</strong>               <strong>form.js</strong>     ，          ：</p> 
 <pre><code>"use strict";

class Form {
  constructor(formSelector) {
    this.formSelector = formSelector;
    this.init();
  }

  init() {
    this.formSelector.addEventListener("submit", this.handleSubmit);
  }
}
</code></pre> 
 <p>          <code>this.handleSubmit</code>，          ，        <code>event</code>    。   8      ，          ，                 。       <code>this.handleSubmit</code>：</p> 
 <pre><code>"use strict";

class Form {
  constructor(formSelector) {
    this.formSelector = formSelector;
    this.init();
  }

  init() {
    this.formSelector.addEventListener("submit", this.handleSubmit);
  }

  handleSubmit(event) {
    console.log(event);
  }
}
</code></pre> 
 <p>  ，     <code>From</code>:</p> 
 <pre><code>const formSelector = document.forms[0];

new Form(formSelector);
</code></pre> 
 <p>  ，        <strong>form.html</strong>。       “  ”。      ?     ：</p> 
 <pre><code>http://localhost:63342/little-javascript/code/ch10/form.html?name=Valentino&description=Trip+to+Spoleto&tak=We%27re+going+to+visit+the+city%21
</code></pre> 
 <p>      ？     DOM        “    ”。<code>submit</code>                     。       JS            ，       <strong>Django</strong>、<strong>Rails</strong> <strong>friends</strong>   web            。</p> 
 <p>             <code>name</code>   。        <code>name</code>，         JS      ，          。       <code>preventDefault</code>    ：</p> 
 <pre><code>"use strict";

class Form {
  constructor(formSelector) {
    this.formSelector = formSelector;
    this.init();
  }

  init() {
    this.formSelector.addEventListener("submit", this.handleSubmit);
  }

  handleSubmit(event) {
    event.preventDefault();
    console.log(event);
  }
}

const formSelector = document.forms[0];

new Form(formSelector);
</code></pre> 
 <p>    ，       <strong>form.html</strong>。       ，      。     <code>event</code>         ：</p> 
 <pre><code>Event {...}
    bubbles: true
    cancelBubble: false
    cancelable: true
    composed: false
    currentTarget: null
    defaultPrevented: true
    eventPhase: 0
    isTrusted: true
    path: (5) [form, body, html, document, Window]
    returnValue: false
    srcElement: form
    target: form
    timeStamp: 8320.840000000317
    type: "submit"
</code></pre> 
 <p>  <code>event</code>         ，   <code>event.target</code>，       HTML               ，         。</p> 
 <h2>  from     </h2> 
 <p>        ，     <code>event.target</code>，          <code>elements</code>    。               。   <code>elements</code>          ，            ，   <code><input/></code>、<code><textarea/></code>、<code><button/></code>   <code><fieldset/></code>。       <code>console.log(event.target.elements)</code>     ，    ：</p> 
 <pre><code>0: input#name
1: input#description
2: textarea#task
3: button
length: 4
description: input#description
name: input#name
tak: textarea#task
task: textarea#task
</code></pre> 
 <p>        <code>elements</code>       ，              ，        <code>name</code>        。  ，             ：</p> 
 <ul> 
  <li>          : <code>event.target.elements[0].value</code> </li> 
  <li>   id: <code>event.target.elements.some_id.value</code> </li> 
 </ul> 
 <p>   ，                   <code>id</code>  ，      <code>event.target.elements.some_id</code>      ，   <code>id</code>             。    <code>event.target.elements</code>        ，        ES6     ：</p> 
 <pre><code>const { name, description, task } = event.target.elements;
</code></pre> 
 <p>       <code>100%</code>    ，    TypeScript         ，     <code>“vanilla JS”</code>     。       ，        <code>handleSubmit</code>  ，     ，          <code>saveData</code>    。             ：</p> 
 <pre><code>"use strict";

class Form {
  constructor(formSelector) {
    this.formSelector = formSelector;
    this.init();
  }

  init() {
    this.formSelector.addEventListener("submit", this.handleSubmit);
  }

  handleSubmit(event) {
    event.preventDefault();
    const { name, description, task } = event.target.elements;
    this.saveData({
      name: name.value,
      description: description.value,
      task: task.value
    });
  }

  saveData(payload) {
    console.log(payload);
  }
}

const formSelector = document.forms[0];

new Form(formSelector);
</code></pre> 
 <p>                 。          ？        <code>name</code>，<code>task</code>   <code>description</code>，            ，            。   ，          ，    <code>event.target.elements</code></p> 
 <pre><code>0: input#name
1: input#description
2: textarea#task
3: button
length: 4
description: input#description
name: input#name
tak: textarea#task
task: textarea#task
</code></pre> 
 <p>         。     <code>map</code>            <code>name</code>，<code>description</code> <code>task</code> （       submit）:</p> 
 <pre><code> 
  handleSubmit(event) {
    event.preventDefault();
    const inputList = event.target.elements.map(function(formInput) {
      if (formInput.type !== "submit") {
        return formInput.value;
      }
    });

    /*
      TODO this.saveData( maybe inputList ?)
     */
  }
</code></pre> 
 <p>               :</p> 
 <pre><code>Uncaught TypeError: event.target.elements.map is not a function
    at HTMLFormElement.handleSubmit (form.js:15)
</code></pre> 
 <p><code>“ .map    ”</code>。    <code>event.target.elements</code>      ？         ，        ：   <code>HTMLFormControlsCollection</code>。    8  ，           ，      DOM       <code>HTMLCollection</code>。</p> 
 <pre><code>// Returns an HTMLCollection
document.chidren;
</code></pre> 
 <p>HTML           ，         <code>map</code>   <code>filter</code>              。                   ，       Array.from             ：</p> 
 <pre><code>  handleSubmit(event) {
    event.preventDefault();

    const arrOfElements = Array.from(event.target.elements);

    const inputList = arrOfElements.map(function(formInput) {
      if (formInput.type !== "submit") {
        return formInput.value;
      }
    });

    console.log(inputList);

    /*
      TODO this.saveData( maybe inputList ?)
     */
  }
</code></pre> 
 <p>   <code>Array.from</code>     <code>event.target.elements</code>      。<code>Array.from</code>                ，     ：</p> 
 <pre><code>  handleSubmit(event) {
    event.preventDefault();

    const inputList = Array.from(event.target.elements, function(formInput) {
      if (formInput.type !== "submit") {
        return formInput.value;
      }
    });

    console.log(inputList);

    /*
      TODO this.saveData( maybe inputList ?)
     */
  }
</code></pre> 
 <p>   <strong>form.html</strong>，    ，   “  ”。            ：</p> 
 <pre><code>["Valentino", "Trip to Spoleto", "We're going to visit the city!", undefined]
</code></pre> 
 <p>  ，          ，                name  ：</p> 
 <pre><code>  handleSubmit(event) {
    event.preventDefault();

    const inputList = Array.from(event.target.elements, function(formInput) {
      if (formInput.type !== "submit") {
        return {
          name: formInput.name,
          value: formInput.value
        };
      }
    });

    console.log(inputList);

    /*
      TODO this.saveData( maybe inputList ?)
     */
  }
</code></pre> 
 <p>     <strong>form.html</strong>，    ，   ：</p> 
 <pre><code>[
  {
    "name": "name",
    "value": "Valentino"
  },
  {
    "name": "description",
    "value": "Trip to Spoleto"
  },
  {
    "name": "task",
    "value": "We're going to visit the city!"
  },
  undefined
]
</code></pre> 
 <p>good job，    <code>undefined</code>    ，    <code>button</code>   。 <code>map</code>        “ ”        <code>undefined</code>。         <code>if (formInput.type !== "submit")</code>，   <code>button</code>      <code>map</code>   ，    <code>undefined</code>   。           ，      <code>localStorage</code>。</p> 
 <h2>   localStorage     </h2> 
 <p>                ，        。             ，      HTML        ，           。         ，          。</p> 
 <p>              ?                   ，          HTML、JS     。  ，               ，             ，         :<code>localStorage</code>。<code>localStorage</code>        JS   ，      ：</p> 
 <ul> 
  <li> <code>setItem</code>       </li> 
  <li> <code>getItem</code>       </li> 
  <li> <code>clear</code>        </li> 
  <li>removeItem         <code>key</code>   </li> 
 </ul> 
 <p>        <code>setItem</code>   <code>getItem</code>，          <strong>form.html</strong>   ，    ：</p> 
 <pre><code>


    <meta charset="UTF-8"/>
    <title>HTML forms and JavaScript</title>


<h1>What's next?</h1>
<form>
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required="" minlength="5"/>

    <label for="description">Short description</label>
    <input type="text" id="description" name="description" required="" minlength="5"/>

    <label for="task">Task</label>
    <textarea id="task" name="task" required="" minlength="10"/>

    <button type="submit">Submit</button>
</form>

<script src="form.js"/>

</code></pre> 
 <p>              JS   :</p> 
 <pre><code>"use strict";

class Form {
  constructor(formSelector) {
    this.formSelector = formSelector;
    this.init();
  }

  init() {
    this.formSelector.addEventListener("submit", this.handleSubmit);
  }

  handleSubmit(event) {
    event.preventDefault();

    const inputList = Array.from(event.target.elements, function(formInput) {
      if (formInput.type !== "submit") {
        return {
          name: formInput.name,
          value: formInput.value
        };
      }
    });

    console.log(inputList);

    /*
      TODO this.saveData( maybe inputList ?)
     */
  }

  saveData(payload) {
    console.log(payload);
  }
}

const formSelector = document.forms[0];

new Form(formSelector);
</code></pre> 
 <p>  ，       <code>this.saveData</code>           <code>localStorage</code>。     ，          。     ，          <code>localStorage</code>       <code>this.saveData</code>。</p> 
 <p>  ，    <code>Form</code>           （    ），            。                <code>localStorage</code>            。       ，        <code>Form</code>      “  ”，                  。   ，               “  ”  ：</p> 
 <pre><code>class Form {
  constructor(formSelector, storage) {
    this.formSelector = formSelector;
    this.storage = storage;
    this.init();
  }

  init() {
    this.formSelector.addEventListener("submit", this.handleSubmit);
  }

  handleSubmit(event) {
    event.preventDefault();

    const inputList = Array.from(event.target.elements, function(formInput) {
      if (formInput.type !== "submit") {
        return {
          name: formInput.name,
          value: formInput.value
        };
      }
    });
  }

  saveData(payload) {
    console.log(payload);
  }
}
</code></pre> 
 <p>  ，         ，           。         HTML     ，         <code>formSelector</code>     form     HTML   ：</p> 
 <pre><code>  constructor(formSelector, storage) {
    // Validating the arguments
    if (!(formSelector instanceof HTMLFormElement))
      throw Error(`Expected a form element got ${formSelector}`);
    //
    this.formSelector = formSelector;
    this.storage = storage;
    this.init();
  }
</code></pre> 
 <p>   <code>formSelector</code>          ，    。       <code>storage</code>，                  。</p> 
 <pre><code>  constructor(formSelector, storage) {
    // Validating the arguments
    if (!(formSelector instanceof HTMLFormElement))
      throw Error(`Expected a form element got ${formSelector}`);
    // Validating the arguments
    if (!storage) throw Error(`Expected a storage, got ${storage}`);
    //
    this.formSelector = formSelector;
    this.storage = storage;
    this.init();
  }
</code></pre> 
 <p>          。       ，        <code>LocalStorage</code>   ，  <strong>form.js</strong>      <code>LocalStorage</code> ：</p> 
 <pre><code>class LocalStorage {
  save() {
    return "saveStuff";
  }

  get() {
    return "getStuff";
  }
}
</code></pre> 
 <p>  ，      ，        <code>Form</code>   <code>LocalStorage</code>：</p> 
 <ul> 
  <li> <code>Form</code>    <code>saveData</code>      <code>Storage</code>   </li> 
  <li> <code>LocalStorage.save</code>   <code>LocalStorage.get</code>       </li> 
 </ul> 
 <p>    <strong>form.js</strong>  ，       ：</p> 
 <pre><code>"use strict";

/*
Form implementation
 */
class Form {
  constructor(formSelector, storage) {
    // Validating the arguments
    if (!(formSelector instanceof HTMLFormElement))
      throw Error(`Expected a form element got ${formSelector}`);
    // Validating the arguments
    if (!(storage instanceof Storage))
      throw Error(`Expected a storage, got ${storage}`);
    //
    this.formSelector = formSelector;
    this.storage = storage;
    this.init();
  }

  init() {
    this.formSelector.addEventListener("submit", this.handleSubmit);
  }

  handleSubmit(event) {
    event.preventDefault();

    const inputList = Array.from(event.target.elements, function(formInput) {
      if (formInput.type !== "submit") {
        return {
          name: formInput.name,
          value: formInput.value
        };
      }
    });

    this.saveData('inputList', inputList);
  }

  saveData(key,payload) {
    this.storage.save(key, payload);
  }
}

/*
Storage implementation
 */
class LocalStorage {
  static save(key, val) {
    if (typeof val === 'object') {
      val = JSON.stringify(val)
    }
    localStorage.setItem(key, val, redis.print)
  }

  static get(key) {
    const val = localStorage.getItem(key)
    if (val === null)  return null
    return JSON.parse(val)
  }
}

const formSelector = document.forms[0];
const storage = LocalStorage;

new Form(formSelector, storage);
</code></pre> 
 <p><strong>          BUG      ，        BUG，         log   ，              BUG     Fundebug。</strong></p> 
 <p>  ：https://github.com/valentinog...</p> 
 <h2>  </h2> 
 <p>         ，  2 ，       ：https://promotion.aliyun.com/...</p> 
 <p>          ，      Star，          。</p> 
 <blockquote>
   https://github.com/qq449245884/xiaozhi 
 </blockquote> 
 <p>       ，         。              ，                 ，            ，              。</p> 
 <p><span class="img-wrap"/></p> 
 <p><strong>      ，    2    ，  4   ，   ，    ，    </strong></p> 
 <p><span class="img-wrap"/></p> 
</div>
                            </div>
                        </div>
JavaScriptをドラッグしたときにイベントをクリックするバグを解決します.