javascript
javascript读取txt_JavaScript编程语言学习笔记——编程
本文部分內容粘貼自：www.w3school.com.cn/js/index.asp，詳情可打開該網站查看，本人僅做簡化整理。
使用HTML+JavaScript語言來獲取網頁數據，代碼的執行邏輯一般是：
請求/獲取數據
處理數據
保存數據到本地
本文將針對以上三個過程展開，提取一些關鍵點進行說明，具體的示例代碼出自本人編寫的公交線路數據獲取腳本，具有通用性。
-1st-?????????瀏覽器數據加載方式
數據獲取腳本最后會保存為”*.html”文件，不論采用什么軟件編寫，最后都是由電腦瀏覽器執行，推薦使用比較穩定的IE瀏覽器執行(其他瀏覽器自行測試)。首先，我們要對瀏覽器的數據加載、代碼操作的執行方式有個了解。
1. ???瀏覽器有兩種加載網頁數據的方式：
異步加載，AJAX=?Asynchronous(異步的，不同時的)?JavaScript?And?XML(某個數據格式)
同步加載
2.????同步加載，又稱阻塞模式，會阻止瀏覽器的后續處理，如JS代碼的執行、網頁中圖形的渲染等
3. ???異步加載，又稱非阻塞模式，瀏覽器在下載執行某一操作的同時，還會繼續進行后續頁面的處理(不會等到上一操作執行結束)。這樣能提高頁面加載速度，因此是當前主流瀏覽器選用的數據加載模式。
通過異步加載能夠實現：
不刷新頁面更新網頁
在頁面加載后從服務器請求數據
在頁面加載后從服務器接收數據
在后臺向服務器發送數據
4.????簡單來說，傳統的編程語言Python、C等，代碼是逐行執行的，上一行的代碼沒有執行完畢不會執行下一行的代碼。在瀏覽器中，HTML標簽雖然也是逐行執行的，但是執行JS代碼的同時(Script標簽)，也會同時執行后續的操作。
這就帶來了一個問題，往往我們是逐步完成數據獲取工作的，第一步獲取和處理的數據作為第二步操作的基礎數據。
在通過HTML+JS代碼獲取數據的時候，第一步操作沒有完成，就已經開始執行第二步操作了。第二步操作沒有第一步獲得的基礎數據，第二步操作就會出錯。
解決的辦法，就是通過設置按鈕，通過人工來逐步觸發操作。
語法示例
"button"//定義一個“按鈕名稱”的按鈕，onclick點擊時執行“函數名稱”的按鈕-2nd-??????請求/獲取數據
如果我們是“請求數據”，往往我們首先要從電腦本地加載基礎數據，然后儲存到內部值載體中(數組、對象)，例如要獲取數據的類型、名錄等。
如果是“獲取數據”，往往第一步就是要根據目標網站的網址，構筑網址規則并儲存。
01????從本地加載數據
直接放出代碼，需要注意的是，讀取本地數據后，本地數據數據類型是undefine(未定義)，建議轉換為字符串之后再儲存
如
Var name;//定義儲存本地數據的臨時變量Var names=[];//定義儲存本地數據的最終變量，數組……//讀取本地數據的相關操作Names.push((name)+’1’).substr(0,3))//儲存操作，臨時變量“+’1’”(字符末尾添加“1”字符，可更改)后就轉化成了字符串格式，再通過*.substr(0,3)函數，減去末尾添加的“1”，(0,3)是所取的字符步長，即從第一個字符取到第4個字符(依據實際情況更改)。
<div> <h1>第一步：選擇文件h1> <input type="file" id="files"/> <input type="button" value="讀取結果" onclick="result()"/>div><script> var inputElement = document.getElementById("files"); inputElement.addEventListener("change", handleFiles, false); var names=[];//讀取公交線路名稱列表，并儲存為數組 var totalnum; function handleFiles() { var selectedFile =document.getElementById("files").files[0];//獲取讀取的File對象 var name = selectedFile.name;//讀取選中文件的文件名 var size = selectedFile.size;//讀取選中文件的大小 console.log("文件名:"+name+"大小："+size+'kb'); var reader = new FileReader();//這里是核心！！！讀取操作就是由它完成的。 reader.readAsText(selectedFile,'utf-8');//讀取文件的內容 reader.onload = function(){ console.log("文件讀取成功");//當讀取完成之后會回調這個函數，然后此時文件的內容存儲到了result中。直接操作即可。 getnames(this.result); } } function getnames(result){ var rows=result.split('\n'); for(var i=0;i names.push((rows[i]+'2').substr(0,3));// 儲存線路名稱，所有的處理都是將該數據轉為字符串 totalnum=names.length-2; } } //返回線路文件讀取結果 function result(){ console.log('讀取到的公交(地鐵)線路共計：',totalnum);//減去首行城市名、尾行空行 }script>-3rd-????????保存數據
01????概述
由網頁中的獲取的數據，最后需要保存到本地。但是由于安全性限制，瀏覽器無法不通過用戶許可就訪問PC本地存儲空間。也就是說，雖然已經獲取了數據，儲存在相應的值載體中(數組、對象)，但是沒有辦法直接保存到本地。
這里提供一個方法——通過“下載文件”的方式將獲取的數據保存到本地。
大體的流程是：
將值載體中的數據轉化為相應格式
觸發下載事件
選擇本地保存路徑
雖然JS也有相應的第三方代碼包，能夠對數據進行轉化，例如將數組格式的數據轉化為Excel表格、轉化坐標系等等。但我還是習慣通過Python來處理獲取到的數據，所以JS代碼獲取的數據我通常將之轉化為Json/txt格式再下載。
02????JavaScript JSON
I?????????什么是 JSON？
JSON (?JavaScript?Object?Notation)是輕量級的數據交換格式。
JSON 是存儲和傳輸數據的格式，JSON 經常在數據從服務器發送到網頁時使用。
JSON 是“自描述的”且易于理解的。
實例
{"employees":[ {"firstName":"Bill","lastName":"Gates"}, {"firstName":"Steve","lastName":"Jobs"}, {"firstName":"Alan","lastName":"Turing"}]}//在上面的例子中，對象 "employees" 是一個數組。它包含了三個對象。II???????語法規則
數據是名稱/值對
數據由逗號分隔
花括號{}保存對象
方括號[]保存數組
JSON 的語法是來自 JavaScript 對象符號的語法，但 JSON 格式是純文本。讀取和生成 JSON 數據的代碼可以在任何編程語言編寫的。
不同的是JSON 名稱需要雙引號。JavaScript 名稱不需要。在 JavaScript 中，鍵可以是字符串、數字或標識符名稱
III??????有效的數據類型
1.????在 JSON 中，值必須是以下數據類型之一：
字符串
數字
對象(JSON 對象)
數組
布爾
Null(空)
2.????JSON 的值不可以是以下數據類型之一：
函數
日期
Undefined(未定義)
//JSON 中不允許日期、函數對象。如果需要包含日期、函數，請寫為字符串，之后可以將其轉換回相應對象。
IV??????交換數據
當數據在瀏覽器與服務器之間進行交換時，這些數據只能是文本。JSON屬于文本，并且我們能夠把任何 JavaScript 對象轉換為 JSON，然后將 JSON 發送到服務器。我們也能把從服務器接收到的任何 JSON 轉換為 JavaScript 對象。
1.????通過?JSON.parse()?解析數據，這些數據會成為 JavaScript 對象。
實例：
json格式
var text ='{"employees":[' +'{"firstName":"Bill","lastName":"Gates"},' +'{"firstName":"Steve","lastName":"Jobs"},' +'{"firstName":"Elon","lastName":"Musk"}]}';解析
obj = JSON.parse(text);document.getElementById("demo").innerHTML=obj.employees[1].firstName + "" + obj.employees[1].lastName;結果
Steve Jobs2.????通過?JSON.stringify()?把 JavaScript 對象轉換為字符串
實例：
<html><body> <h1>從 JavaScript 對象創建 JSON 字符串h1> <p id="demo">p> <script>var obj = { name: "Bill", age: 62, city:"Seatle" };var myJSON = JSON.stringify(obj);document.getElementById("demo").innerHTML = myJSON;script> body>html>結果：
從 Javascript 對象創建 JSON 字符串{"name":"Bill","age":62,"city":"Seatle"}JSON.stringify()?函數將把任何日期轉換為字符串
JSON.stringify()?函數將從 JavaScript 對象刪除任何函數，包括鍵和值
如果在運行 JSON.stringify() 函數前已將函數轉換為字符串，這個環節可以省略
03????下載數據
直接放代碼，其中用到了第三方代碼包FileSaver.js，想了解更多請轉https://github.com/eligrey/FileSaver.js
<div> <h1>第三步：導出獲取數據h1><scriptsrc="https://cdn.bootcss.com/FileSaver.js/1.3.8/FileSaver.js">//用于下載文件的第三方數據包，在線地址在src屬性中script><inputtype="button" id="lines" value="線路總表"/><script> var button = document.getElementById("lines"); button.addEventListener("click",saveHandler, false); function saveHandler(){ var content = JSON.stringify(buslines);//將JavaScript對象轉化為Json格式 var blob = new Blob([content],{type:"text/plain;charset=utf-8"}); saveAs(blob, "BusLines.json"); }script>總結
以上是生活随笔為你收集整理的javascript读取txt_JavaScript编程语言学习笔记——编程的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 世界有史以来最大百科全书！《永乐大典》首
- 下一篇： java 创建定时器_SpringBoo