這個(gè)例子會(huì)從多選字段中取出選中的數(shù)值，并使用這些數(shù)值構(gòu)造一個(gè)二進(jìn)制數(shù)字。按住CTRL（或 Mac 的COMMAND鍵）來選擇多個(gè)選項(xiàng)。

  0001
  0010
  0100
  1000
 = 0

文件字段最初是用于通過表單來上傳從瀏覽器機(jī)器中獲取的文件。在現(xiàn)代瀏覽器中，也可以從 JavaScript 程序中讀取文件。該字段則作為一個(gè)看門人角色。腳本不能簡(jiǎn)單地直接從用戶的電腦中讀取文件，但是如果用戶在這個(gè)字段中選擇了一個(gè)文件，瀏覽器會(huì)將這個(gè)行為解釋為腳本，便可以訪問該文件。

一個(gè)文本字段是一個(gè)類似于“選擇文件”或“瀏覽”標(biāo)簽的按鈕，后面跟著所選文件的信息。

文本字段的files屬性是一個(gè)類數(shù)組對(duì)象（當(dāng)然，不是一個(gè)真正的數(shù)組），包含在字段中所選擇的文件。開始時(shí)是空的。因此文本字段屬性不僅僅是file屬性。有時(shí)文本字段可以上傳多個(gè)文件，這使得同時(shí)選擇多個(gè)文件變?yōu)榭赡堋?/p>

files對(duì)象中的對(duì)象有name（文件名）、size（文件大小，單位為字節(jié)），和type（文件的媒體類型，如text/plain，image/jpeg）等屬性。

而files屬性中不包含文件內(nèi)容的屬性。獲取這個(gè)內(nèi)容會(huì)比較復(fù)雜。由于從硬盤中讀取文件會(huì)需要一些時(shí)間，接口必須是異步的，來避免文檔的無響應(yīng)問題。

讀取文件是通過FileReader對(duì)象實(shí)現(xiàn)的，注冊(cè)一個(gè)load事件處理器，然后調(diào)用readAsText方法，傳入我們希望讀取的文件，一旦載入完成，reader的result屬性內(nèi)容就是文件內(nèi)容。

FileReader對(duì)象還會(huì)在讀取文件失敗時(shí)觸發(fā)error事件。錯(cuò)誤對(duì)象本身會(huì)存在reader的error屬性中。這個(gè)接口是在Promise成為語言的一部分之前設(shè)計(jì)的。 你可以把它包裝在Promise中，像這樣：

function readFileText(file) {
  return new Promise((resolve, reject) => {
    let reader = new FileReader();
    reader.addEventListener(
      "load", () => resolve(reader.result));
    reader.addEventListener(
      "error", () => reject(reader.error));
    });
    reader.readAsText(file);
  });
}

采用 JavaScript 代碼的簡(jiǎn)單 HTML 頁面可以作為實(shí)現(xiàn)一些小應(yīng)用的很好的途徑?？梢圆捎眯〉膸椭绦騺碜詣?dòng)化一些基本的任務(wù)。通過關(guān)聯(lián)一些表單字段和事件處理器，你可以實(shí)現(xiàn)華氏度與攝氏度的轉(zhuǎn)換。也可以實(shí)現(xiàn)由主密碼和網(wǎng)站名來生成密碼等各種任務(wù)。

當(dāng)一個(gè)應(yīng)用需要存儲(chǔ)一些東西以便于跨對(duì)話使用時(shí)，則不能使用 JavaScript 綁定因?yàn)槊慨?dāng)頁面關(guān)閉時(shí)這些值就會(huì)丟失。你可以搭建一個(gè)服務(wù)器，連接到因特網(wǎng)，將一些服務(wù)數(shù)據(jù)存儲(chǔ)到其中。在第20章中將會(huì)介紹如何實(shí)現(xiàn)這些，當(dāng)然這需要很多的工作，也有一定的復(fù)雜度。有時(shí)只要將數(shù)據(jù)存儲(chǔ)在瀏覽器中即可。

localStorage對(duì)象可以用于保存數(shù)據(jù)，它在頁面重新加載后還存在。這個(gè)對(duì)象允許你將字符串存儲(chǔ)在某個(gè)名字（也是字符串）下，下面是具體示例。

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

一個(gè)在localStorage中的值會(huì)保留到其被重寫時(shí)，它也可以通過removeItem來清除，或者由用戶清除本地?cái)?shù)據(jù)。

不同字段名的站點(diǎn)的數(shù)據(jù)會(huì)存在不同的地方。這也表明原則上由localStorage存儲(chǔ)的數(shù)據(jù)只可以由相同站點(diǎn)的腳本編輯。

瀏覽器的確限制一個(gè)站點(diǎn)可以存儲(chǔ)的localStorage的數(shù)據(jù)大小。這種限制，以及用垃圾填滿人們的硬盤并不是真正有利可圖的事實(shí)，防止該特性占用太多空間。

下面的代碼實(shí)現(xiàn)了一個(gè)粗糙的筆記應(yīng)用。程序?qū)⒂脩舻墓P記保存為一個(gè)對(duì)象，將筆記的標(biāo)題和內(nèi)容字符串相關(guān)聯(lián)。對(duì)象被編碼為 JSON 格式并存儲(chǔ)在localStorage中。用戶可以從選擇字段中選擇筆記并在</b>中編輯筆記，并可以通過點(diǎn)擊一個(gè)按鈕來添加筆記。</p> <pre>Notes: <select></select> <button>Add</button><br> <textarea style="width: 100%">

腳本從存儲(chǔ)在localStorage中的"Notes"值來獲取它的初始狀態(tài)，如果其中沒有值，它會(huì)創(chuàng)建示例狀態(tài)，僅僅帶有一個(gè)購物列表。從localStorage中讀取不存在的字段會(huì)返回null。

setState方法確保 DOM 顯示給定的狀態(tài)，并將新狀態(tài)存儲(chǔ)到localStorage。 事件處理器調(diào)用這個(gè)函數(shù)來移動(dòng)到一個(gè)新狀態(tài)。

在這個(gè)例子中使用Object.assign，是為了創(chuàng)建一個(gè)新的對(duì)象，它是舊的state.notes的一個(gè)克隆，但是添加或覆蓋了一個(gè)屬性。 Object.assign選取第一個(gè)參數(shù)，向其添加所有更多參數(shù)的所有屬性。 因此，向它提供一個(gè)空對(duì)象會(huì)使它填充一個(gè)新對(duì)象。 第三個(gè)參數(shù)中的方括號(hào)表示法，用于創(chuàng)建名稱基于某個(gè)動(dòng)態(tài)值的屬性。

還有另一個(gè)和localStorage很相似的對(duì)象叫作sessionStorage。這兩個(gè)對(duì)象之間的區(qū)別在于sessionStorage的內(nèi)容會(huì)在每次會(huì)話結(jié)束時(shí)丟失，而對(duì)于多數(shù)瀏覽器來說，會(huì)話會(huì)在瀏覽器關(guān)閉時(shí)結(jié)束。

本章小結(jié)

在本章中，我們討論了 HTTP 協(xié)議的工作原理。 客戶端發(fā)送一個(gè)請(qǐng)求，該請(qǐng)求包含一個(gè)方法（通常是GET）和一個(gè)標(biāo)識(shí)資源的路徑。 然后服務(wù)器決定如何處理請(qǐng)求，并用狀態(tài)碼和響應(yīng)正文進(jìn)行響應(yīng)。 請(qǐng)求和響應(yīng)都可能包含提供附加信息的協(xié)議頭。

瀏覽器 JavaScript 可以通過fetch接口生成 HTTP 請(qǐng)求。 像這樣生成請(qǐng)求：

fetch("/18_http.html").then(r => r.text()).then(text => {
  console.log(`The page starts with ${text.slice(0, 15)}`);
});

瀏覽器生成GET請(qǐng)求來獲取顯示網(wǎng)頁所需的資源。 頁面也可能包含表單，這些表單允許在提交表單時(shí)，用戶輸入的信息發(fā)送為新頁面的請(qǐng)求。

HTML可以表示多種表單字段，例如文本字段、選擇框、多選字段和文件選取。

這些字段可以用 JavaScript 進(jìn)行控制和讀取。內(nèi)容改變時(shí)會(huì)觸發(fā)change事件，文本有輸入時(shí)會(huì)觸發(fā)input事件，鍵盤獲得焦點(diǎn)時(shí)觸發(fā)鍵盤事件。 例如"value"（用于文本和選擇字段）或"checked"（用于復(fù)選框和單選按鈕）的屬性，用于讀取或設(shè)置字段的內(nèi)容。

當(dāng)一個(gè)表單被提交時(shí)，會(huì)觸發(fā)其submit事件，JavaScript 處理器可以通過調(diào)用preventDefault來禁用默認(rèn)的提交事件。表單字段的元素不一定需要被包裝在

標(biāo)簽中。

當(dāng)用戶在一個(gè)文件選擇字段中選擇了本機(jī)中的一個(gè)文件時(shí)，可以用FileReader接口來在 JavaScript 中獲取文件內(nèi)容。

localStorage和sessionStorage對(duì)象可以用來保存頁面重載后依舊保留的信息。第一個(gè)會(huì)永久保留數(shù)據(jù)（直到用戶決定清除），第二個(gè)則會(huì)保存到瀏覽器關(guān)閉時(shí)。

習(xí)題 內(nèi)容協(xié)商

HTTP 可以做的事情之一就是內(nèi)容協(xié)商。 Accept請(qǐng)求頭用于告訴服務(wù)器，客戶端想要獲得什么類型的文檔。 許多服務(wù)器忽略這個(gè)協(xié)議頭，但是當(dāng)一個(gè)服務(wù)器知道各種編碼資源的方式時(shí)，它可以查看這個(gè)協(xié)議頭，并發(fā)送客戶端首選的格式。

URL eloquentjavascript.net/author配置為響應(yīng)明文，HTML 或 JSON，具體取決于客戶端要求的內(nèi)容。 這些格式由標(biāo)準(zhǔn)化的媒體類型"text/plain"，"text/html"和"application/json"標(biāo)識(shí)。

發(fā)送請(qǐng)求來獲取此資源的所有三種格式。 使用傳遞給fetch的options對(duì)象中的headers屬性，將名為Accept的協(xié)議頭設(shè)置為所需的媒體類型。

最后，請(qǐng)嘗試請(qǐng)求媒體類型"application/rainbows+unicorns"，并查看產(chǎn)生的狀態(tài)碼。

// Your code here.

JavaScript 工作臺(tái)

構(gòu)建一個(gè)接口，允許用戶輸入和運(yùn)行一段 JavaScript 代碼。

在</b>字段旁邊放置一個(gè)按鈕，當(dāng)按下該按鈕時(shí)，使用我們?cè)诘?10 章中看到的<b>Function</b>構(gòu)造器，將文本包裝到一個(gè)函數(shù)中并調(diào)用它。 將函數(shù)的返回值或其引發(fā)的任何錯(cuò)誤轉(zhuǎn)換為字符串，并將其顯示在文本字段下。</p> <pre><textarea id="code">return "hi"; Run

Conway 的生命游戲

Conway 的生命游戲是一個(gè)簡(jiǎn)單的在網(wǎng)格中模擬生命的游戲，每一個(gè)細(xì)胞都可以生存或滅亡。對(duì)于每一代（回合），都要遵循以下規(guī)則：

任何細(xì)胞，周圍有少于兩個(gè)或多于三個(gè)的活著的鄰居，都會(huì)死亡。

任意細(xì)胞，擁有兩個(gè)或三個(gè)的活著的鄰居，可以生存到下一代。

任何死去的細(xì)胞，周圍有三個(gè)活著的鄰居，可以再次復(fù)活。

任意一個(gè)相連的細(xì)胞都可以稱為鄰居，包括對(duì)角相連。

注意這些規(guī)則要立刻應(yīng)用于整個(gè)網(wǎng)格，而不是一次一個(gè)網(wǎng)格。這表明鄰居的數(shù)目由開始的一代決定，并且鄰居在每一代時(shí)發(fā)生的變化不應(yīng)該影響給定細(xì)胞新的狀態(tài)。

使用任何一個(gè)你認(rèn)為合適的數(shù)據(jù)結(jié)構(gòu)來實(shí)現(xiàn)這個(gè)游戲。使用Math.random來隨機(jī)的生成開始狀態(tài)。將其展示為一個(gè)選擇框組成的網(wǎng)格和一個(gè)生成下一代的按鈕。當(dāng)用戶選中或取消選中一個(gè)選擇框時(shí)，其變化應(yīng)該影響下一代的計(jì)算。

Next generation

云服務(wù)器 GPU云服務(wù)器 javascript第三版 javascript編程精解 python核心編程第三版 javascript高級(jí)程序設(shè)計(jì)第三版

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/105045.html

• 上一篇：JavaScript 編程精解 中文第三版 十九、項(xiàng)目：像素藝術(shù)編輯器
• 下一篇：JavaScript 編程精解 中文第三版 十七、在畫布上繪圖

相關(guān)文章

• JavaScript 編程精解 中文第三版 零、前言

  摘要：來源編程精解中文第三版翻譯項(xiàng)目原文譯者飛龍協(xié)議自豪地采用谷歌翻譯部分參考了編程精解第版，這是一本關(guān)于指導(dǎo)電腦的書。在可控的范圍內(nèi)編寫程序是編程過程中首要解決的問題。我們可以用中文來描述這些指令將數(shù)字存儲(chǔ)在內(nèi)存地址中的位置。 來源：ApacheCN『JavaScript 編程精解 中文第三版』翻譯項(xiàng)目原文：Introduction 譯者：飛龍 協(xié)議：CC BY-NC-SA 4.0 自豪地...

  sanyang 2019-08-23 18:19 評(píng)論0 收藏0

• JavaScript 編程精解 中文第三版 十三、瀏覽器中的 JavaScript

  摘要：在本例中，使用屬性指定鏈接的目標(biāo)，其中表示超文本鏈接。您應(yīng)該認(rèn)為和元數(shù)據(jù)隱式出現(xiàn)在示例中，即使它們沒有實(shí)際顯示在文本中。 來源：ApacheCN『JavaScript 編程精解 中文第三版』翻譯項(xiàng)目原文：JavaScript and the Browser 譯者：飛龍 協(xié)議：CC BY-NC-SA 4.0 自豪地采用谷歌翻譯 部分參考了《JavaScript 編程精解（第 2 版）》 ...

  zhiwei 2019-08-23 18:19 評(píng)論0 收藏0

• JavaScript 編程精解 中文第三版 二十、Node.js

  摘要：在這樣的程序中，異步編程通常是有幫助的。最初是為了使異步編程簡(jiǎn)單方便而設(shè)計(jì)的。在年設(shè)計(jì)時(shí)，人們已經(jīng)在瀏覽器中進(jìn)行基于回調(diào)的編程，所以該語言的社區(qū)用于異步編程風(fēng)格。 來源：ApacheCN『JavaScript 編程精解 中文第三版』翻譯項(xiàng)目原文：Node.js 譯者：飛龍 協(xié)議：CC BY-NC-SA 4.0 自豪地采用谷歌翻譯 部分參考了《JavaScript 編程精解（第 2 版）...

  qqlcbb 2019-08-23 18:20 評(píng)論0 收藏0

• JavaScript 編程精解 中文第三版 十五、處理事件

  摘要：事件與節(jié)點(diǎn)每個(gè)瀏覽器事件處理器被注冊(cè)在上下文中。事件對(duì)象雖然目前為止我們忽略了它，事件處理器函數(shù)作為對(duì)象傳遞事件對(duì)象。若事件處理器不希望執(zhí)行默認(rèn)行為通常是因?yàn)橐呀?jīng)處理了該事件，會(huì)調(diào)用事件對(duì)象的方法。 來源：ApacheCN『JavaScript 編程精解 中文第三版』翻譯項(xiàng)目原文：Handling Events 譯者：飛龍 協(xié)議：CC BY-NC-SA 4.0 自豪地采用谷歌翻譯 部分...

  Clect 2019-08-23 18:19 評(píng)論0 收藏0

• JavaScript 編程精解 中文第三版 十九、項(xiàng)目：像素藝術(shù)編輯器

  摘要：相反，當(dāng)響應(yīng)指針事件時(shí)，它會(huì)調(diào)用創(chuàng)建它的代碼提供的回調(diào)函數(shù)，該函數(shù)將處理應(yīng)用的特定部分?；卣{(diào)函數(shù)可能會(huì)返回另一個(gè)回調(diào)函數(shù)，以便在按下按鈕并且將指針移動(dòng)到另一個(gè)像素時(shí)得到通知。它們?yōu)榻M件構(gòu)造器的數(shù)組而提供。 來源：ApacheCN『JavaScript 編程精解 中文第三版』翻譯項(xiàng)目原文：Project: A Pixel Art Editor 譯者：飛龍 協(xié)議：CC BY-NC-SA 4...

  Meils 2019-08-23 18:19 評(píng)論0 收藏0

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

mengera88

男|高級(jí)講師

我要關(guān)注 我要私信

TA的文章

閱讀更多

• tensorflow

  閱讀 2188·2023-04-25 19:06

• 11月編程語言排行冠軍揭曉，穩(wěn)

  閱讀 1388·2021-11-17 09:33

• 拓端數(shù)據(jù)tecdat:從內(nèi)容到”粉絲+科技“——網(wǎng)絡(luò)媒體用戶行為挖掘

  閱讀 1776·2019-08-30 15:53

• FCC 成都社區(qū)·前端周刊 第 5 期

  閱讀 2599·2019-08-30 14:20

• 總結(jié)個(gè)人使用過的移動(dòng)端布局方法

  閱讀 3553·2019-08-29 12:58

• 手機(jī)端寫字板、畫板vue組件

  閱讀 3552·2019-08-26 13:27

• 關(guān)于拆分活動(dòng)頁為獨(dú)立倉庫的一點(diǎn)思考

  閱讀 512·2019-08-26 12:23

• 如何給localStorage設(shè)置一個(gè)過期時(shí)間？

  閱讀 493·2019-08-26 12:22

最新活動(dòng)

閱讀需要支付1元查看

支付并查看

<strike id="22mwi"><input id="22mwi"></input></strike>