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

  0001
  0010
  0100
  1000
 = 0

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

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

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

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

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

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

FileReader對象還會在讀取文件失敗時觸發(fā)error事件。錯誤對象本身會存在reader的error屬性中。這個接口是在Promise成為語言的一部分之前設(shè)計的。 你可以把它包裝在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 代碼的簡單 HTML 頁面可以作為實(shí)現(xiàn)一些小應(yīng)用的很好的途徑。可以采用小的幫助程序來自動化一些基本的任務(wù)。通過關(guān)聯(lián)一些表單字段和事件處理器，你可以實(shí)現(xiàn)華氏度與攝氏度的轉(zhuǎn)換。也可以實(shí)現(xiàn)由主密碼和網(wǎng)站名來生成密碼等各種任務(wù)。

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

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

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

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

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

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

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

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

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

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

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

本章小結(jié)

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

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

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

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

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

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

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

標(biāo)簽中。

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

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

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

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

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

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

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

// Your code here.

JavaScript 工作臺

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

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

Conway 的生命游戲

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

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

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

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

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

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

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

Next generation

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/105045.html

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

相關(guān)文章

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

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

  sanyang 2019-08-23 18:19 評論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 評論0 收藏0

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

  摘要：在這樣的程序中，異步編程通常是有幫助的。最初是為了使異步編程簡單方便而設(shè)計的。在年設(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 評論0 收藏0

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

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

  Clect 2019-08-23 18:19 評論0 收藏0

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

  摘要：相反，當(dāng)響應(yīng)指針事件時，它會調(diào)用創(chuàng)建它的代碼提供的回調(diào)函數(shù)，該函數(shù)將處理應(yīng)用的特定部分。回調(diào)函數(shù)可能會返回另一個回調(diào)函數(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 評論0 收藏0

發(fā)表評論

登陸后可評論

0條評論

mengera88

男|高級講師

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

TA的文章

閱讀更多

• tensorflow

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最新活動

閱讀需要支付1元查看

支付并查看

<