《Java Web程序设计》实验报告五 Java Script学习汇报
目 录
一、实验目的
二、实验环境
三、实验步骤和内容
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的产生过程
- JavaScript借鉴C语言的基本语法；Java语言的数据类型和内存管理；Scheme语言，将函数提升到“第一等公民”（first class）的地位；Self语言，使用基于原型（prototype）的继承机制。
- JavaScript被设计出来后最初命名为Mocha，1995年9月在Netscape Navigator 2.0的Beta版中改名为LiveScript，同年12月，Netscape Navigator 2.0 Beta 3中部署时被重命名为JavaScript。
- 1996年11月，网景向ECMA提交语言标准，由于版权问题，JS 语言标准不叫 JavaScript，叫 ECMAScript。
- 1997年6月，第一版ECMAScript发布。
- 1999年12月，第三版ECMAScript发布，这个版本使用最广。
- 2006 年，jQuery 发布，它是目前最长寿的 JS 库。
- 2009年12月，第五版ECMAScript发布，增加了一些功能。
- 2009 年，Ryan 基于 V8 （Chrome 的 JS 引擎叫做 V8）创建了 Node.js。
- 2010年，Isaac基于node.js写出了npm。
- 2015年6月，第六版ECMAScript发布，新浏览器都支持这一版（之后每年发布一版，版本号以年份命名）。
（2）JavaScript与Java的关系
- 一般认为，当时 Netscape 之所以将 LiveScript 命名为 JavaScript，是因为 Java 是当时最流行的编程语言，带有"Java" 的名字有助于这门新生语言的传播。
- 它们的语法和 C 语言都很相似。
- 它们都是面向对象的（虽然实现的方式略有不同）。
- JavaScript在设计时参照了Java的命名规则。
- JavaScript是动态类型语言，而Java是静态类型语言。
- JavaScrip是弱类型的，Java属于强类型。
- JavaScript的面向对象是基于原型实现的，Java是基于类实现的。
- JavaScript除了长得和Java比较像之外，语言风格相去甚远。
- JavaScript在设计时所参考的对象不包括 Java，而包括了像Self和Scheme这样的语言。
Ⅱ、简述JavaScript的特点有哪些
- JavaScript是一种解释型的脚本语言，C、C++等语言先编译后执行，而JavaScript是在程序的运行过程中逐行进行解释。
- JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。
- JavaScript采用的是弱类型的变量类型，对使用的数据类型未做出严格的要求，是基于Java基本语句和控制的脚本语言，其设计简单紧凑。
- JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时，鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。
- JavaScript依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支持JavaScript脚本语言，目前JavaScript已被大多数的浏览器所支持。
- JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。
- JavaScript是基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。
Ⅲ、简述ECMAScript的历史
- ECMAScript是由网景的布兰登·艾克开发的一种脚本语言的标准化规范。
- ECMAScript最初命名为Mocha，后来改名为LiveScript，最后重命名为JavaScript。
- 1995年12月，升阳与网景联合发表了JavaScript。
- 1996年11月，网景公司将JavaScript提交给欧洲计算机制造商协会进行标准化。
- ECMA-262的第一个版本于1997年6月被Ecma组织采纳。
- ECMAScript是ECMA-262标准化的脚本语言的名称。
- 尽管JavaScript和JScript与ECMAScript兼容，但包含超出ECMAScript的功能。
Ⅳ、简述ECMAScript与JavaScript的关系
- ECMAScript也是一门脚本语言，缩写为ES，通常看做JavaScript的标准化规范。
- JavaScript是ECMAScript的扩展语言，因为ECMAScript只提供了最基本的语法，通俗点说只是约定了我们的代码如何编写，比如定义变量和函数、循环和分支，它只是停留在语言层面，并不能用来完成我们应用中的实际功能开发。
- JavaScript实现了ECMAScript的语言标准，并且在这个基础之上做了一些扩展，使得我们可以在浏览器环境中操作DOM和BOM，在node环境中可以做读写文件之类的操作。
- 在浏览器环境中，JavaScript=ECMAScript+BOM+DOM。
- 在Node环境中，JavaScript=ECMAScript+Node APIs。
Ⅴ、简述ES6与ES5的关系
- ECMAScript5，即ES5，是ECMAScript的第五次修订，于2009年完成标准化。
- ECMAScript6，即ES6，是ECMAScript的第六次修订，于2015年完成，也称ES2015。
- ES6是继ES5之后的一次改进，相对于ES5更加简洁，提高了开发效率。
Ⅵ、简述ES6的特点和新改进的内容
（1）ES6的特点
- let和const都是块级作用域。
- 以{}代码块作为作用域范围只能在代码块里面使用，不存在变量提升，只能先声明再使用，否则会报错。
- 在代码块内，在声明变量之前，该变量都是不可用的，这在语法上，称为“暂时性死区”。
- 在同一个代码块内，不允许重复声明，const声明的是一个只读常量，在声明时就需要赋值。
- 如果const的是一个对象，对象所包含的值是可以被修改的。
- 对象所指向的地址不能改变，而变量成员是可以修改的。
- 模板字符串（Template String）用一对反引号(`)标识，它可以当作普通字符串使用，也可以用来定义多行字符串，也可以在字符串中嵌入变量，js 表达式或函数，变量.js 表达式或函数需要写在${ }中。
- ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。
- 在ES6中，提供了一种简洁的函数写法，我们称作“箭头函数”。
- 箭头函数中的this始终指向箭头函数定义时的离this 最近的一个函数，如果没有最近的函数就指向window。
（2）ES6新改进的内容
- 新增声明命令let和const，在 ES6 中通常用let和const来声明，let表示变量、const表示常量。
- ES6允许在对象之中，直接写变量。这时属性名为变量名, 属性值为变量的值。
- Object.keys()方法，获取对象的所有属性名或方法名（不包括原形的内容），返回一个数组。
- Object.assign ()，assign方法将多个原对象的属性和方法都合并到了目标对象上面。可以接收多个参数，第一个参数是目标对象，后面的都是源对象。
- ES6标准中，JavaScript原生支持模块(module)。这种将 JS 代码分割成不同功能的小块进行模块化，将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部分，然后通过模块的导入的方式可以在其他地方使用。
- Promise是异步编程的一种解决方案，将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数，要是为了解决异步处理回调地狱(也就是循环嵌套的问题)而产生的 Promise 构造函数包含一个参数和一个带有 resolve（解析）和 reject（拒绝）两个参数的回 调。在回调中执行一些操作（例如异步），如果一切都正常，则调用 resolve，否则调用 reject。
- 数组的解构赋值，解构赋值是对赋值运算符的扩展。是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。数组中的值会自动被解析到对应接收该值的变量中，数组的解构赋值要一一对应如果有对应不上的就是 undefined。
- 对象的解构赋值，对象的解构赋值和数组的解构赋值其实类似，但是数组的数组成员是有序的 而对象的属性则是无序的，所以对象的解构赋值简单理解是等号的左边和右边的结构相同。
- Set数据结构，类似数组，所有的数据都是唯一的，没有重复的值，它本身是一个构造函数。
- class类的继承 ES6 中不再像 ES5 一样使用原型链实现继承，而是引入 Class 这个概念。
- 展开运算符可以将数组或对象里面的值展开；还可以将多个值收集为一个变量。
- 使用 async/await,搭配 Promise,可以通过编写形似同步的代码来处理异步流程,提高代码的简洁性和可读性async用于申明一个function是异步的，而 await用于等待一个异步方法执行完成。
- Symbol是一种基本类型，Symbol通过调用symbol函数产生，它接收一个可选的名字参数，该函数返回的symbol是唯一的。
Ⅶ、简述Node.js、TypeScript、Jquery的概念以及与JavaScript的关系
（1）Node.js与JavaScript的关系
- JavaScript是一种脚本语言，而Node.js是一个让JavaScript运行在服务端的开发平台。
- JS偏向前端浏览器，node偏向后端。
- 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的关系
- JavaScript是一种脚本语言，而jquery是一个JavaScript函数库，是JavaScript函数的集合。
- jquery基于JavaScript语言，封装JavaScript的原生方法，提供了简便的函数接口，简化了JS的操作。
- JavaScript 是一种脚本语言，主要用在浏览器中，实现对网页的文档对象的操作和一些用户交互动作的处理。
- jQuery则是JavaScript的一个代码库(或习惯性叫类库)，它将一些在 JavaScript开发中经常用到的功能集合起来，以方便开发者直接使用，而不需要再用原生JavaScript语句写大量代码，同时可在不同浏览器间实现一致的效果。是当前最流行的 JavaScript 库之一。
- jquery是基于JavaScript编写的，jquery全部都是JavaScript代码组成。
- 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的关系的相关概念。