一、Node.js
1.1 Node.js介绍与安装
目标： 了解nodejs、并且在本地安装好这个软件
官网： http://nodejs.cn/
- 一路安装，cmd中输入
node -v，如果能出来版本号就证明安装成功了 - 并且，新版本安装后会自带npm，也可以输入
npm -v，来查看
介绍：
- Node 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。 发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。
- 简单的说 Node.js 就是运行在服务端的 JavaScript。 Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。底层架构是：javascript. 文件后缀：.js
- Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。
1.2.2、Node - 实现请求响应
- 创建httpserver.js
// 导入模块是require 就类似于import java.io
const http = require('http'); //*****
// 1: 创建一个httpserver服务
http.createServer(function(request,response){
// 浏览器怎么认识hello server!!!
response.writeHead(200,{'Content-type':'text/plain'}); //这句话的含义是：告诉浏览器将
// 以text-plain去解析hello server 这段数据。
// 给浏览器输出内容
response.end("hello server!!!");
}).listen(8888);
console.log("你启动的服务是：http://localhpst:8888以启动成功!!");
// 2: 监听一端口8888
// 3: 启动运行服务 node httpserver.js
// 4: 在浏览器访问http://localhost:8888
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 运行服务器程序；
node httpserver.js - 停止服务是
ctrl + c
1.2.3、Node-操作MYSQL数据库【了解，学习里面安装第三方依赖的模块】
- 官方文档没有mysq的模块
- 需要自己去依赖对应的模块（第三方的）
参考：https://www.npmjs.com/package/mysql
1：安装mysql依赖
npm install mysql：就会下载到前端项目目录中node_modules下
二、ES6
2.1、ES6的概述
- 制定JavaScript规范，标准和语法的组织，这些组织是浏览器的厂商（谷歌，火狐等等）
ECMAScript的快速发展：
- ES6前是Jquery的天下。
- ES6: 是JavaScript语言的下一代标准，2015年6月正式发布。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
小结：
- ECMAScript是前端js的语法规范；可以应用在各种js环境中。如：浏览器或者node.js环境。
它有很多版本：es1/2/3/5/6，很多新特性，可以在js环境中使用这些新特性。 - 新技术的学习只是提高我们的开发效率
2.2、ES6的语法：let和const命令
原来变量和常量都是var
变量和常量的严格区分（改进）。
- let：变量
- const：常量
核心代码：
创建一个ES6文件夹，新建E:\study\ES6\01-let和const定义.html如下
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<script>
//传统定义变量和常量的方式，var
var name = "海马体";
var link = "http://www.ceeeeb.com";
var PI = Math.PI;
console.log(name);
console.log(link);
console.log(PI);
//ES6定义的方式
let name2 = "海马体";
let link2 = "http://www.ceeeeb.com";
console.log(name2);
console.log(link2);
//定义常量
const PI2 = Math.PI;
console.log(PI2);
script>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
运行如下：
- 直接用浏览器打开之后，按
F12即可在console中看到结果
注：启动默认模板! + space就可以创建
如下：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
let，const和var的区别
let和const解决var的变量穿透问题，和常量修改的问题
- 变量穿透问题的演示
for(var i = 0; i < 5; i++){
console.log(i);
}
//这里结果是5，就造成了变量穿透
console.log(i);
- 1
- 2
- 3
- 4
- 5
解决：就是将var改为let，这样编译之后就会报错
for(let i = 0; i < 5; i++){
console.log(i);
}
//这里结果是5，就造成了变量穿透
console.log(i);
- 1
- 2
- 3
- 4
- 5
2. 常量修改问题（正常比如PI常量修改它没有任何意义，但是var可以修改）
//2常量修改的问题的演示
var PI = Math.PI;
PI = 100;
console.log(PI);
- 1
- 2
- 3
- 4
- 这里就将PI修改成了100
解决：用const代替var，这样编译之后就会报错
const PI = Math.PI;
PI = 100;
console.log(PI);
- 1
- 2
- 3
完整代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<script>
//let和const解决var的变量穿透问题，和常量修改的问题
//1变量穿透问题的演示
// for(let i = 0; i < 5; i++){
// console.log(i);
// }
// //这里结果是5，就造成了变量穿透
// console.log(i);
//2常量修改的问题的演示
const PI = Math.PI;
PI = 100;
console.log(PI);
script>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
小结
- let ： 可变变量；块级作用域
- const： 常量
- var：只有全局作用域和函数作用域概念，没有块级作用域的概念。
- 在实际开发和生产中，如果是小程序，uniapp或者一些脚手架中，可以大胆的去使用let和const
- 但是做web开发，建议使用var，因为一些低版本的浏览器还是不支持let和const
什么是块级作用域
2.3、ES6的语法：模板字符串
解决以前：动态部分与静态部分拼接的问题
以前： 我们都是使用 ‘’ 或者 “” 来把字符串套起来
现在： `` 【反引号】
第一个用途：动态部分与静态部分拼接的问题
- ES6反引号(``)直接搞定。
- 将表达式嵌入字符串中进行拼接。用${}来界定。
代码：
<body>
<script>
//字符串会涉及到动态部分
//动态部分
var people = {
name : "hippo",
address : "银川",
http : "www.ceeeeb.com"
};
//静态部分
let explore = "传统--我的名字是"+ people.name +"，住在"+ people.address +"，我的网址是"+ people.http+"。";
console.log(explore);
//ES6的模板字符串的语法【类似java中的el表达式】
let exploreE = `ES6--我的名字是${people.name}，住在${people.address},我的网址是${people.http}。`;
console.log(exploreE);
script>
body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
结果：
第二个用途：可以直接实现换行操作
代码：
结果：
2.4、ES6的语法：函数默认参数与箭头函数
函数默认参数
- 在方法的参数后面加上一个默认值即可
- 原因：不加的话默认是undefined，如果传参是两个值，只传了一个就会出现问题。
<body>
<script>
默认参数 给参数列表设定初始值
function sum(a = 100, b = 100){ //a，b的默认值是undefined
console.log(a + b);
}
// 执行方法，会用默认值填充，打印出来200
var result = sum();
// 覆盖默认值打印 结果是300
var result = sum(100, 200);
script>
body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
运行如下：
箭头函数【重点】
- 在未来的项目开发中，比如小程序，unipp，一些常见的脚手架会大量的使用
- 它也是一种函数的定义，它简化定义仅此而已。
- 注：和Java的Stream流很像，但是箭头函数是
=>，Stream流是->
步骤：
1：去掉function
2: 括号后面加箭头
3: 如果逻辑代码仅有return可以直接省去。
4： 如果参数只有一个，可以把括号省去
<body>
<script>
//箭头函数
var sum = function(a, b){
return a + b;
}
//改进1
var sum = (a, b) => {
return a + b;
}
//改进2
var sum = (a, b) => a + b;
//通过上面的例子找到的规律
//1.去掉function
//2.在括号后面加箭头
//3.如果逻辑代码仅有return可以直接省去。（如果是逻辑体，就不能省略），比如：
var sum = (a, b) => {
var num = a + b;
return num;
}
//4.如果参数只有一个，也可以把括号省去（如果是参数，就不能省略）,比如：
var minu = (a, b, c) => a+b+c;
//原来是
var minu = function(a, b, c) {
return a+b+c;
}
//实际应用举例
var arr = [1, 2, 3, 4, 5];
// var newArr = arr.map(function(obj){
// return obj * 2;
// });
// console.log(newArr);
//改变之后
var newArr = arr.map(obj => obj * 2);
console.log(newArr);
script>
body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
2.5、ES6的语法：对象初始化简写
- 它是指：如果一个对象中的key和value的名字一样的情况下可以定义成一个。
步骤：ES6简写对象
注：因为对象是key: value 存在的
- 如果key和变量的名字一致，可以只定义一次即可
- 如果value是一个函数，可以把
: function全部去掉，只剩下()即可
代码：
<body>
<script>
//这就是一个基本的对象
let info = {
title: "hippo",
http: "www.ceeeeb.com",
go: function(){
console.log("对象中的函数");
}
};
//ES6简写对象
//因为对象是key: value 存在的
//1. 如果key和变量的名字一致，可以只定义一次即可
//2. 如果value是一个函数，可以把`: function`全部去掉，只剩下()即可
var title = "hippo"; //将这个变量赋给对象
let info2 = {
title,
http: "www.ceeeeb.com",
go(){
console.log("对象中的函数");
}
};
//结果：
console.log(info2);
console.log(info2.title);
console.log(info2.http);
info2.go();
script>
body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
结果：
对象简写的案例
<body>
<form action="">
<p>账号：<input type="text" id="account">p>
<p>密码：<input type="text" id="password">p>
<p><input type="button" value="登录" id="loginbtn">p>
form>
<script>
//拿到按钮对象，给它绑定一个点击事件
//document.getElementById( 