目? 錄

?一、實驗目的

二、實驗環境

三、實驗步驟和內容

1、小組成員分工（共計4人）

2、實驗方案

3、實驗結果與分析

Ⅰ、簡述JavaScript的產生過程與Java的關系

Ⅱ、簡述JavaScript的特點有哪些

Ⅲ、簡述ECMAScript的歷史

Ⅳ、簡述ECMAScript與JavaScript的關系

Ⅴ、簡述ES6與ES5的關系

Ⅵ、簡述ES6的特點和新改進的內容

Ⅶ、簡述Node.js、TypeScript、Jquery的概念以及與JavaScript的關系

4、項目任務評價

四、遇到的問題和解決方法

五、實驗總結

---

?一、實驗目的

? ? ? ? 1、了解JavaScript語言產生的原因和歷史

? ? ? ? 2、了解ECMAScript 的發展過程

? ? ? ? 3、了解ES5、ES6的學習方法和特點

? ? ? ? 4、了解Node.js、TypeScript、jQuery的概念，及與javascript的關系

---

二、實驗環境

????????1、硬件要求：筆記本電腦一臺。

????????2、軟件要求：Windows操作系統，使用Eclipse編譯環境、Tomcat服務器以及Microsoft Edge瀏覽器。

????????3、網絡要求：能訪問互聯網。

---

三、實驗步驟和內容

1、小組成員分工（共計4人）

? ? ? ? （1）組長——錦鯉

????????通過查找相關文案、書籍或者一些網絡資源，簡述JavaScript的產生過程與Java的關系；JavaScript的特點有哪些；ECMAScript的歷史；ECMAScript與JavaScript的關系；ES6與ES5的關系；ES6的特點和新改進的內容；Node.js、TypeScript、Jquery的概念以及與JavaScript的關系。

? ? ? ? （2）組員——西瓜

????????通過查閱一些資源簡述JavaScript的產生過程與Java的關系；JavaScript的特點有哪些；ECMAScript的歷史；ECMAScript與JavaScript的關系；ES6與ES5的關系；ES6的特點和新改進的內容；Node.js、TypeScript、Jquery的概念以及與JavaScript的關系。

? ? ? ? （3）組員——南瓜

????????通過查閱一些資源簡述JavaScript的產生過程與Java的關系；JavaScript的特點有哪些；ECMAScript的歷史；ECMAScript與JavaScript的關系；ES6與ES5的關系；ES6的特點和新改進的內容；Node.js、TypeScript、Jquery的概念以及與JavaScript的關系。

? ? ? ? （4）組員——葫蘆瓜

????????通過查閱一些資源簡述JavaScript的產生過程與Java的關系；JavaScript的特點有哪些；ECMAScript的歷史；ECMAScript與JavaScript的關系；ES6與ES5的關系；ES6的特點和新改進的內容；Node.js、TypeScript、Jquery的概念以及與JavaScript的關系。

2、實驗方案

????????1、根據課本、PPT和老師課堂中講解的內容，進行文案資料的查找。

????????2、對查找到的相關資源進行匯總，將需要的信息進行提取和記錄。

????????3、將查閱到的內容以模塊的形式填寫到文檔之中。

????????4、討論并總結查找過程中出現的問題，對沒有找到的內容進行小組討論，進而完善各自的知識內容。

????????5、完成最終的知識匯總以及各自的實驗報告，最后進行實驗報告排版的檢測并提交。

3、實驗結果與分析

Ⅰ、簡述JavaScript的產生過程與Java的關系

? ? ? ? （1）JavaScript的產生過程

1. JavaScript借鑒C語言的基本語法；Java語言的數據類型和內存管理；Scheme語言，將函數提升到“第一等公民”（first class）的地位；Self語言，使用基于原型（prototype）的繼承機制。
2. JavaScript被設計出來后最初命名為Mocha，1995年9月在Netscape Navigator 2.0的Beta版中改名為LiveScript，同年12月，Netscape Navigator 2.0 Beta 3中部署時被重命名為JavaScript。
3. 1996年11月，網景向ECMA提交語言標準，由于版權問題，JS 語言標準不叫 JavaScript，叫 ECMAScript。
4. 1997年6月，第一版ECMAScript發布。
5. 1999年12月，第三版ECMAScript發布，這個版本使用最廣。
6. 2006 年，jQuery 發布，它是目前最長壽的 JS 庫。
7. 2009年12月，第五版ECMAScript發布，增加了一些功能。
8. 2009 年，Ryan 基于 V8 （Chrome 的 JS 引擎叫做 V8）創建了 Node.js。
9. 2010年，Isaac基于node.js寫出了npm。
10. 2015年6月，第六版ECMAScript發布，新瀏覽器都支持這一版（之后每年發布一版，版本號以年份命名）。

???????? ? ? ? （2）JavaScript與Java的關系

1. 一般認為，當時 Netscape 之所以將 LiveScript 命名為 JavaScript，是因為 Java 是當時最流行的編程語言，帶有"Java" 的名字有助于這門新生語言的傳播。
2. 它們的語法和 C 語言都很相似。
3. 它們都是面向對象的（雖然實現的方式略有不同）。
4. JavaScript在設計時參照了Java的命名規則。
5. JavaScript是動態類型語言，而Java是靜態類型語言。
6. JavaScrip是弱類型的，Java屬于強類型。
7. JavaScript的面向對象是基于原型實現的，Java是基于類實現的。
8. JavaScript除了長得和Java比較像之外，語言風格相去甚遠。
9. JavaScript在設計時所參考的對象不包括 Java，而包括了像Self和Scheme這樣的語言。

Ⅱ、簡述JavaScript的特點有哪些

1. JavaScript是一種解釋型的腳本語言，C、C++等語言先編譯后執行，而JavaScript是在程序的運行過程中逐行進行解釋。
2. JavaScript是一種基于對象的腳本語言，它不僅可以創建對象，也能使用現有的對象。
3. JavaScript采用的是弱類型的變量類型，對使用的數據類型未做出嚴格的要求，是基于Java基本語句和控制的腳本語言，其設計簡單緊湊。
4. JavaScript是一種采用事件驅動的腳本語言，它不需要經過Web服務器就可以對用戶的輸入做出響應。在訪問一個網頁時，鼠標在網頁中進行鼠標點擊或上下移、窗口移動等操作JavaScript都可直接對這些事件給出相應的響應。
5. JavaScript依賴于操作系統，僅需要瀏覽器的支持。因此一個JavaScript腳本在編寫后可以帶到任意機器上使用，前提是機器上的瀏覽器支持JavaScript腳本語言，目前JavaScript已被大多數的瀏覽器所支持。
6. JavaScript（簡稱“JS”）是一種具有函數優先的輕量級，解釋型或即時編譯型的編程語言。
7. JavaScript是基于原型編程、多范式的動態腳本語言，并且支持面向對象、命令式和聲明式（如函數式編程）風格。

Ⅲ、簡述ECMAScript的歷史

1. ECMAScript是由網景的布蘭登·艾克開發的一種腳本語言的標準化規范。
2. ECMAScript最初命名為Mocha，后來改名為LiveScript，最后重命名為JavaScript。
3. 1995年12月，升陽與網景聯合發表了JavaScript。
4. 1996年11月，網景公司將JavaScript提交給歐洲計算機制造商協會進行標準化。
5. ECMA-262的第一個版本于1997年6月被Ecma組織采納。
6. ECMAScript是ECMA-262標準化的腳本語言的名稱。
7. 盡管JavaScript和JScript與ECMAScript兼容，但包含超出ECMAScript的功能。

Ⅳ、簡述ECMAScript與JavaScript的關系

1. ECMAScript也是一門腳本語言，縮寫為ES，通常看做JavaScript的標準化規范。
2. JavaScript是ECMAScript的擴展語言，因為ECMAScript只提供了最基本的語法，通俗點說只是約定了我們的代碼如何編寫，比如定義變量和函數、循環和分支，它只是停留在語言層面，并不能用來完成我們應用中的實際功能開發。
3. JavaScript實現了ECMAScript的語言標準，并且在這個基礎之上做了一些擴展，使得我們可以在瀏覽器環境中操作DOM和BOM，在node環境中可以做讀寫文件之類的操作。
4. 在瀏覽器環境中，JavaScript=ECMAScript+BOM+DOM。
5. 在Node環境中，JavaScript=ECMAScript+Node APIs。

Ⅴ、簡述ES6與ES5的關系

1. ECMAScript5，即ES5，是ECMAScript的第五次修訂，于2009年完成標準化。
2. ECMAScript6，即ES6，是ECMAScript的第六次修訂，于2015年完成，也稱ES2015。
3. ES6是繼ES5之后的一次改進，相對于ES5更加簡潔，提高了開發效率。

Ⅵ、簡述ES6的特點和新改進的內容

????????（1）ES6的特點

1. let和const都是塊級作用域。
2. 以{}代碼塊作為作用域范圍只能在代碼塊里面使用，不存在變量提升，只能先聲明再使用，否則會報錯。
3. 在代碼塊內，在聲明變量之前，該變量都是不可用的，這在語法上，稱為“暫時性死區”。
4. 在同一個代碼塊內，不允許重復聲明，const聲明的是一個只讀常量，在聲明時就需要賦值。
5. 如果const的是一個對象，對象所包含的值是可以被修改的。
6. 對象所指向的地址不能改變，而變量成員是可以修改的。
7. 模板字符串（Template String）用一對反引號(`)標識，它可以當作普通字符串使用，也可以用來定義多行字符串，也可以在字符串中嵌入變量，js 表達式或函數，變量.js 表達式或函數需要寫在${ }中。
8. ES6為參數提供了默認值。在定義函數時便初始化了這個參數，以便在參數沒有被傳遞進去時使用。
9. 在ES6中，提供了一種簡潔的函數寫法，我們稱作“箭頭函數”。
10. 箭頭函數中的this始終指向箭頭函數定義時的離this 最近的一個函數，如果沒有最近的函數就指向window。

????????（2）ES6新改進的內容

1. 新增聲明命令let和const，在 ES6 中通常用let和const來聲明，let表示變量、const表示常量。
2. ES6允許在對象之中，直接寫變量。這時屬性名為變量名, 屬性值為變量的值。
3. Object.keys()方法，獲取對象的所有屬性名或方法名（不包括原形的內容），返回一個數組。
4. Object.assign ()，assign方法將多個原對象的屬性和方法都合并到了目標對象上面。可以接收多個參數，第一個參數是目標對象，后面的都是源對象。
5. ES6標準中，JavaScript原生支持模塊(module)。這種將 JS 代碼分割成不同功能的小塊進行模塊化，將不同功能的代碼分別寫在不同文件中，各模塊只需導出公共接口部分，然后通過模塊的導入的方式可以在其他地方使用。
6. Promise是異步編程的一種解決方案，將異步操作以同步操作的流程表達出來，避免了層層嵌套的回調函數，要是為了解決異步處理回調地獄(也就是循環嵌套的問題)而產生的 Promise 構造函數包含一個參數和一個帶有 resolve（解析）和 reject（拒絕）兩個參數的回 調。在回調中執行一些操作（例如異步），如果一切都正常，則調用 resolve，否則調用 reject。
7. 數組的解構賦值，解構賦值是對賦值運算符的擴展。是一種針對數組或者對象進行模式匹配，然后對其中的變量進行賦值。在代碼書寫上簡潔且易讀，語義更加清晰明了；也方便了復雜對象中數據字段獲取。數組中的值會自動被解析到對應接收該值的變量中，數組的解構賦值要一一對應如果有對應不上的就是 undefined。
8. 對象的解構賦值，對象的解構賦值和數組的解構賦值其實類似，但是數組的數組成員是有序的 而對象的屬性則是無序的，所以對象的解構賦值簡單理解是等號的左邊和右邊的結構相同。
9. Set數據結構，類似數組，所有的數據都是唯一的，沒有重復的值，它本身是一個構造函數。
10. class類的繼承 ES6 中不再像 ES5 一樣使用原型鏈實現繼承，而是引入 Class 這個概念。
11. 展開運算符可以將數組或對象里面的值展開；還可以將多個值收集為一個變量。
12. 使用 async/await,搭配 Promise,可以通過編寫形似同步的代碼來處理異步流程,提高代碼的簡潔性和可讀性async用于申明一個function是異步的，而 await用于等待一個異步方法執行完成。
13. Symbol是一種基本類型，Symbol通過調用symbol函數產生，它接收一個可選的名字參數，該函數返回的symbol是唯一的。

Ⅶ、簡述Node.js、TypeScript、Jquery的概念以及與JavaScript的關系

? ? ? ? （1）Node.js與JavaScript的關系

1. JavaScript是一種腳本語言，而Node.js是一個讓JavaScript運行在服務端的開發平臺。
2. JS偏向前端瀏覽器，node偏向后端。
3. JS中的頂層對象是window對象，而node中的頂層對象是global對象。

? ? ? ? （2）TypeScript與JavaScript的關系

? ? ?1. JavaScript，也稱為JS，是一種符合ECMAScript規范的編程語言。這是一個高級別的、通常是即時編譯的、多范式的。Vanilla?JavaScript是一個名稱，用于指代使用普通JavaScript而無需任何其他庫。

? ? ?2. JS是一種廣泛使用的編程語言，用于客戶端和服務器端，使網頁具有交互性。

? ? ?3. JavaScript可用于以下用途：向網頁添加交互行為；創建Web和移動應用程序；構建Web服務器和開發服務器應用程序。

? ? ?4. TypeScript是一種強類型、面向對象的編譯語言。

? ? ?5. TypeScript也稱為TS，是JavaScript(JS)遵循JavaScript的超集。簡而言之，TS就是JS加上更多的附加功能。

? ? ?6. TypeScript支持其他JS庫；因此TypeScript生成的JS可以重用所有現有的JavaScript框架、工具和庫。

? ? ?7. TypeScript是可移植的。TS可以在任何運行JS的環境中運行，它可以跨瀏覽器、設備、操作系統等。

? ? ?8. TypeScript不需要專用的VM或特定的運行時環境來執行。

????????（3）Jquery與JavaScript的關系

1. JavaScript是一種腳本語言，而jquery是一個JavaScript函數庫，是JavaScript函數的集合。
2. jquery基于JavaScript語言，封裝JavaScript的原生方法，提供了簡便的函數接口，簡化了JS的操作。
3. JavaScript 是一種腳本語言，主要用在瀏覽器中，實現對網頁的文檔對象的操作和一些用戶交互動作的處理。
4. jQuery則是JavaScript的一個代碼庫(或習慣性叫類庫)，它將一些在 JavaScript開發中經常用到的功能集合起來，以方便開發者直接使用，而不需要再用原生JavaScript語句寫大量代碼，同時可在不同瀏覽器間實現一致的效果。是當前最流行的 JavaScript 庫之一。
5. jquery是基于JavaScript編寫的，jquery全部都是JavaScript代碼組成。
6. jquery封裝JavaScript的原生方法，提供了簡便的函數接口，簡化了JS的操作。

4、項目任務評價

????????1、每次對解決不了的問題在群里進行及時的反饋，進而組員之間相互合作、共同解決發現的問題，不但提高了對問題的解決效率，而且還加深了我們每一個人處理問題的能力。

????????2、雖然在項目制作的過程中存在一定的問題，但是我們都會進行及時的調整，總的來說優點是大于缺點的，我們會繼續保持好的的一方面，及時對缺點和不足進行改正和完善，讓小組成員和自己的項目更加完善。

---

四、遇到的問題和解決方法

????????1、運行問題：編寫的代碼在運行過程中出現了亂碼現象。

解決方法：鼠標右擊->Run As->Run Configurations->Common->在Other后填寫gbk然后點擊Run進行運行后中文可以正常輸出。

????????2、運行問題：代碼編寫完成后進行運行發現網頁無法進行頁面加載，顯示頁面請求失敗。

解決方法：由于沒有在Tomcat服務器上進行運行所導致，先運行服務器然后再運行代碼后頁面可以正常加載。

????????3、運行問題：啟動Tomcat的過程中，有時出現端口被占用的情況。

解決方法：對服務器進行配置，將服務器運行的端口號改為別的端口即可（找到Tomcat安裝目錄下的文件“/conf/server.xml”->使用記事本或寫字板打開文件，在文件中找到“Connector port=8080”->將“8080”改為“8888”，然后保存配置文件->重啟Tomcat服務器）。

????????4、項目問題：對相關的知識、概念類問題進行闡述和解釋時找不到資源。

解決方法：在CSDN或者菜鳥教程上有需要的所有信息的名詞解釋，在書上找不到資源時可以通過瀏覽器進行相關概念的搜索和整合。

---

五、實驗總結

????????1、在使用單引號和雙引號的時候要特別注意，輸出單個字符時可以使用單引號，如果同時輸出多個字符時只能使用雙引號進行輸出，不然會報錯。

????????2、在對筆記本電腦進行配置時盡量不要使用C盤。

????????3、熟練了解和掌握了JavaScript的產生過程與Java的關系、JavaScript的特點、ECMAScript的歷史、ECMAScript與JavaScript的關系、ES6與ES5的關系、ES6的特點、新改進的內容、Node.js、TypeScript、Jquery的概念以及與JavaScript的關系的相關概念。