Browser Object Model：浏览器对象模型：提供专门用操作浏览器的一些对象（属性和方法），没有标准（大部分浏览器还是统一的，唯独老IE与众不同）- 使用率相对较低

window对象介绍

扮演着两个角色

1、代替了ES中的global，充当全局对象 - 保存全局变量和全局函数

2、自己也带有一些属性和方法，指代当前窗口本身

  1、网页打开新链接的方式：4种 - 目的：提升用户的体验感
  	1、替换当前页面，可以后退
  		HTML：<a href="url">内容</a>
  		     JS：open("url","_self");

  	2、替换当前页面，禁止后退 - 场景：电商网站，付款后不允许退回去再次付款
  		history对象：记录着【当前窗口】的历史记录，只有有了历史才能前进后退
  		location对象：记录着【当前窗口】正在打开的url，而他又一个方法叫做替换，替换是不会产生任何历史记录的，但是url替换后网页必然跳转
  		     JS：location.replace("新url")

  	3、新窗口打开，可以打开多个
  		HTML：<a href="url" target="_blank">内容</a>
  		     JS：open("url","_blank");

  	4、新窗口打开，只能打开一个 - 场景：电商网站，只允许用户打开一个付款页面
  		HTML：<a href="url" target="自定义name">内容</a>
  		自定义name的意思：每一个窗口底层都有一个名字，target其实就是在设置名字，name如果相同，新打开的窗口就会把旧窗口给替换掉（刷新）
  		     JS：open("url","自定义的name");
  
  	HTML能做的，JS都能做，JS能做的，HTML不一定可以

  	扩展a标签的作用：
  		1、跳转
  		2、锚点
  		3、下载：<a href="xx.exe/zip/rar/7z">内容</a>
  		4、打开：<a href="xx.图片后缀/txt">内容</a>
  		5、直接书写js：<a href="javascript:js代码;">内容</a>

  2、window提供了属性和方法：
  	属性：获取浏览器的完整大小：outerWidth/outerHeight;
  	          获取浏览器的文档显示区域的大小：innerWidth/innerHeight
  	          获取屏幕的完整大小：screen.width/height;
  		 每个人的电脑分辨率是不一样的

  	方法：1、打开窗口：var newWindow=open("url","自定义的name","width=,height=,left=,top=");
  			注意：1、第三个配置参数没有传入时，窗口大小和浏览器一样，并且黏在浏览器上面（融为一体）
  			           2、写入了第三个实参，则会脱离浏览器并且一个独立的小窗口，并且可以保存起来，设置为他绑定事件
  			           3、宽高不能设置的太小了
  	          2、关闭窗口：window/newW.close();
  	          3、修改窗口的大小：newW.resizeTo(new宽,new高);
  	          4、修改窗口的位置：newW.moveTo(x,y);
                            
复制代码
复制代码

3、定时器： 1、周期性定时器

        开启：timer=setInterval(callback,间隔毫秒数);
 	停止：clearInterval(timer)

 2、一次性定时器
 	开启：timer=setTimeout(callback,间隔毫秒数);
 	停止：clearTimeout(timer)

 注意：一次性和周星期底层都是一样的，甚至可以呼唤，所以你到底以后用哪个无所谓

 面试题：函数 和 循环 和 定时器都能反复执行操作，区别？ - 时机
 	1、函数 - 用户触发、程序员调用
 	2、循环 - 一瞬间基本就结束了
 	3、定时器 - 等待一段时间做一次
复制代码
复制代码

history对象

保存【当前窗口】的历史记录（打开【过】的url），可用于

前进：history.go(1);
后退：history.go(-1);
刷新：history.go(0);

navigator对象

保存了当前浏览器的基本信息，可以使用js来判断我们是什么浏览器以及版本号 - 类似于css hack（浏览器兼容性问题的，专门针对老IE），但是更强大，单独为老IE写js

属性：navigator.userAgent;- 能够得到一个字符串，包含着是什么浏览器以及版本号，想办法去拿到你需要的部分
HTML5（语义化标签、增强型表单、音频视频）和CSS3（过渡、动画、转换、媒体查询、阴影、弹性盒子、rem...）和ES5以上的任何东西，老IE都是不支持的，所以要做兼容
BOM确实有很多具有兼容性问题，但是我们不需要自己使用navigator去做兼容，前辈们帮我们已经做好了

location对象

保存当前窗口【正在打开】的url

1、常识：一个url网址由哪些部分组成 - 5部分

  协议名：https、http、ftp、ws（直播）...
  	域名/主机号：底层大家都是主机号，域名是需要花钱购买的
  	端口号：默认端口可以省略不写，https默认端口为443，http默认端口为80
  	*文件的相对路径/路由：百度把他加密了隐藏起来了 - 决定着用户看到的是哪个网页
  	*查询字符串/请求消息：客户端发送到服务器端的东西，服务器端需要接住然后判断我们请求的是什么，才能进行响应 - 和后端进行沟通交流的关键点

  	目的：为了学习全栈开发而准备
  	协议名://域名:端口号/路由?请求消息

  	我们可以通过location得到这个url的每一个部分，但是不要记忆，直接console.log输出location就能直接看到
  		协议名：location.protocal
  		域名：location.hostname
  		端口号：location.port
  		路由：location.pathname
  		请求消息：location.search
复制代码
复制代码

2、作用：跳转

  location="新url"
  跳转后禁止后退：location.replace("新url");
  刷新：location.reload();
复制代码
复制代码

event对象事件对象

事件：用户触发的或浏览器自动触发的（onload）

1、绑定事件：3种

  1、在HTML页面上绑定事件
  		<elem on事件名="js语句"></elem>

  		缺点：
  			1、不符合内容（html）与样式（css）与行为（js）的分离的原则
  			2、无法动态绑定事件（一次只能绑定一个元素）
  			3、无法同时绑定多个函数对象


  2、*在js种使用元素的事件处理函数属性：
  		elem.on事件名=function(){
  			操作
  		}

  		优点：
  			1、符合内容（html）与样式（css）与行为（js）的分离的原则
  			2、动态绑定事件
  			3、*没有兼容性问题
  		
  		缺点：      1、无法同时绑定多个函数对象 - 个人觉得其实不是缺点，为什么不把两个功能放到一起
                          

  3、使用专门的事件API绑定事件
  		主流：elem.addEventListener("事件名",callback);
  		老IE：elem.attachEvent("on事件名",callback);
  		兼容：if(elem.addEventListener){
  				elem.addEventListener("事件名",callback);
  		           }else{
  				elem.attachEvent("on事件名",callback);
  		           }

  		优点：
  			1、符合内容（html）与样式（css）与行为（js）的分离的原则
  			2、动态绑定事件
  			3、同时绑定多个函数对象
  		缺点：      1、具有兼容性问题
                          
复制代码
复制代码

2、事件周期：

  主流：3个阶段
  	1、捕获阶段，记录着要发生的事件有哪些
  	2、目标元素优先触发，目标元素->实际触发事件的元素
  	3、冒泡触发，向上触发所有的记录着的事件

  老IE：2个阶段，没有捕获阶段
复制代码
复制代码

3、获取事件对象event：

        主流：会自动作为事件处理函数的第一个形参传入
 		elem.on事件名=function(e){e->event}
 	老IE：event;
 	兼容：var e=event；//不光老IE可用，主流也可以用 

 	*****获取到event事件对象，我们可以干什么？
 		1、***获取鼠标的坐标/位置

 		2、***阻止冒泡 - 笔试面试中：开发几乎不用
 			主流：e.stopPropagation()
 			老IE：e.cancelBubble=true;
 			兼容：e.cancelBubble=true; //不光老IE可用，主流也可以用 

 		3、*****事件委托/利用冒泡 - 笔试面试开发中
 			优化：如果多个子元素定义了相同 或 相似的事件，最好只给父元素定义一次
 			为什么：每次绑定一个事件函数，其实都是创建了一个事件对象，创建的事件对象越多，网站的性能越差
 			淘汰this：水性杨花，当前元素
 			认识一个目标元素：target：你点击的是哪一个，永远就是那一个
 			主流：e.target;
 			老IE：e.srcElement;
 			兼容：e.srcElement; //不光老IE可用，主流也可以用 
 	
 		4、***阻止浏览器的默认行为：a标签默认跳转页面，右键自带一个弹出框，F12打开一个控制台，F5会刷新
 			主流：e.preventDefault();
 			老IE：e.returnValue=false;
 			兼容：e.returnValue=false; //不光老IE可用，主流也可以用 

 			新事件：
 				window.oncontextmenu=()=>{//鼠标右键事件}

 				window.onkeydown=()=>{//键盘事件 - 我们不做游戏开发}

 		5、获取键盘的键码：
 			e.keyCode; === 不需要去记忆键码，要么百度查看，要么直接输出查看
                                 
复制代码
复制代码

Node.js

学习原因：

1、前端的招聘要求 - 熟悉 或 了解一门服务器端语言者优先
2、对于我们前端来说，了解了服务器端的机制，更好更快的进行前端开发，防止背锅

扩展：
全栈工程师：客户端（PC+移动端+小程序） + 服务器端（Node.js） + 数据库（mongoDB）
技术类发展：
	全栈 - 涉及多个领域，每个领域都会用，但是不必精通 -> 架构师 -> 项目经理 -> 技术总监
	专家 - 某个领域是无敌，你不光可以使用，你还会创建
销售类发展
	产品 -> 产品经理 -> 产品总监：必须要懂技术的，要懂开发/项目流程，出去和客户谈业务，每一个功能都是钱
教育类
创业类

可能成为全栈的语言：
	1、Java - 不包含移动端开发（能做安卓，不能做IOS）
	2、JavaScript语言：
		客户端 - 开发根本
		服务器端 - Node.js 历史上第一次一门语言可以通吃前后端，前端崛起的原因之一
		数据库 - mongoDB
		移动端 - 网页、app、小程序 - 跨平台开发，只需要一个前端，学一点点Andriod和IOS的语法，就可以搞定了，前端崛起的原因之一
			现在流行混合开发框架：uniapp/h5+plus/jQuery Mobile... 一个前端就可以搞定所有移动端了
复制代码
复制代码

服务器基本内容

服务器概念：

  简单来说就是一台电脑
  生活：微机
  商业/国家中：小型机、中型机、大型机、超级计算机
复制代码
复制代码

对于我们开发人员来说

 硬件服务器 - 电脑
 软件服务器 - 中间件（软件可以将你的电脑变成一台服务器，其他人都可以来访问）     
         
复制代码
复制代码

软件架构：服务器端很重要

  C/S - Client客户端/Server服务器端
  	举例：
  	    QQ
  	    大型网络游戏
  	优点：
  	    运行稳定，用户体验感好，对带宽的要求低
  	缺点：
  	    占用硬盘空间
  	    更新过于麻烦，服务器端 和  客户端都要更新

  B/S - Browser浏览器端/Server服务器端
  	举例：
  	    网页版QQ、微信
  	    网页游戏
  	优点：
  	    几乎不占硬盘，不需要安装
  	    更新只需要更新服务器端
  	缺点：
  	    体验感较差（越来越好）- 云游戏（以后的趋势，即不占硬盘，也不需要电脑设备配置很高，全部交给云服务器计算），前端崛起的原因之一
复制代码
复制代码

Node.js概述

不是JS，但是语法和javascript非常相似，他的竞争对手java、c#、php、python.... 历史上第一次一门语言可以通吃前后端

做的功能绝对不是特效，做事的是服务器端的操作（形成了一个前端和数据库沟通交流的桥梁 - 数据交互）

目的：

 1、使用代码搭建一个服务器&文件系统（放在代老师电脑上的HTML，你们也可以访问到，而且根据你访问的网址不同，看到的网页也是不同的）
 2、Node.js如何和数据库进行交流沟通（在这之前肯定还要学习mongoDB）
 3、全栈一条龙开发，图书管理系统（HTML+CSS+JS+NODE.js + mongoDB）
复制代码
复制代码

Node.js安装

检查自己安装成功没有：打开cmd，输入node -v 检查版本号，如果有版本号说明已经在你的电脑里安装成功了node.js
其实我们安装的这个node.js就是一个运行环境而已，不再需要浏览器自带的js解释器了，node.js的语法和javascript的语法非常相似

Node.js如何运行

1、交互模式 - 临时测试

  打开cmd输入，node回车，就可以开始敲你的"js"代码了
  退出：ctrl+c
复制代码
复制代码

2、脚本/文件模式

  1、创建xx.js：里面书写自己的代码
  2、打开cmd输入：node 文件绝对路径
复制代码
复制代码

3、现在我们的开发工具非常强大：有插件可以直接在开发工具中运行，前提就以上两个操作可用，意味着你的环境是安装好了的
```
  1、HBuilder：安装一个插件：nodeeclipse，右键运行
  2、VScode：安装一个插件：code runner		
复制代码
复制代码
```

Node.js的知识

1、js 和 node的区别

相同点：都可以使用一切的ECMAScript的一切的API和语法都可以放心大胆的使用，服务器端根本不存在任何浏览器，所以ES5&ES6一切语法放心用
不同点：1、javascript：DOM+BOM - 做一切特效，2、Node.js：虽然不支持DOM+BOM，但是他却提供了10万个以上+的模块等待我们学习

2、模块

每个.js文件，都可以称之为是一个模块

模块化开发方式：分工合作，将每个模块交给对应的人完成，最后再由【主模块】进行引入

  1、每个模块都有一个操作，可以公开/暴露自己的成员：
  		1、exports.属性名=值
  		2、module.exports={
                     属性名=值
  			....
  		    }
  		

  2、每个模块都有一个操作，可用于引入其他模块：
  		var xxx=require("./文件名"); - ./在引入时是不可以省略的，但是文件后缀可以省略
复制代码
复制代码

笔试题：exports 和 module.exports有什么区别？

  都是用于公开暴露自己的成员的
  但是：exports={} 写法是错误的，为什么？
  node.js的底层有一句话：exports=module.exports;
  其实真正做公开功能的是module.exports
  如果你使用	        exports={}; 覆盖了module.exports，不再具有公开功能
复制代码
复制代码

3、模块的分类

1、官方模块 - 今/明天学习的重点，大概有20几个，重要的其实只有几个
2、第三方模块 - 多到数不清楚，提供了很多官方模块没有的东西，有一个网址npm可以去下载：mongo、express框架（简化）
3、自定义模块

Node.js最大的特点：

  1、快、非常快 - 以前最快的是php，Node.js的速度是php的14倍，异步能够更大的发挥node.js的特点
  2、为什么快：
  	1、因为官方模块提供的东西少，甚至连数据库操作都没有
  	2、使用google浏览器的v8引擎
复制代码
复制代码

4、官方模块

1、Globals模块：全局模块

全局变量在所有模块中均可使用。不需要引入，但是提供了一些全局变量给我们，我们可以直接使用

*__dirname - 当前文件夹的绝对路径，对你们使用vscode的同学可能有用，node.js有的同学是使用不了相对路径的，只能写绝对路径
 __filename - 当前文件的完整的绝对路径
 exports - 一个空{}，公开和暴露自己的成员
*module - 指代当前模块本身，包含了其他4个变量
*require()  - 一个函数，引入其他模块的
定时器
控制台
复制代码
复制代码

2、Querystring模块：查询字符串

需要引入：let qs = require('querystring');
提供了解析url的查询字符串部分的功能
var  obj=qs.parse("查询字符串部分");
想要获取前端传来的某一个部分：obj.键名;
垃圾：只能解析查询字符串部分，如果前端传来的是一个完整的url网址，那他就解析不了
复制代码
复制代码

3、Url模块：网址模块

需要引入：let url = require('url');
提供了一些实用函数，用于 完整的URL 解析
var objUrl=url.parse("完整的url网址",true);//此方法会将url网址的各个部分全部解析出来，支持传入第二个参数，是一个布尔值，如果传入的是一个true，自动调用querystring的parse方法，顺便也解析了查询字符串（请求消息：前端->后端的东西）部分
真正的重点：
	1、查询字符串：objUrl.query.键名 - 拿到前端传到后端的东西
	2、路由：objUrl.pathname; - 判断路由的不同，响应不同的网页给用户看
复制代码
复制代码

4、Buffer模块：缓冲区，可以将数组变成一个16进制的数字

不需要我们去引入，可以直接使用
但是！我们绝对不会主动使用Buffer的任何操作，因为用了过后我们就不认识了，但是后面的一些API可能会导致我们得到的结果直接就是Buffer
Node.js大部分的API其实是支持buffer操作
理解为，Buffer是Node.js提供的一种新的数据类型
复制代码
复制代码

5、fs模块：FileSystem - 文件系统

需要引入：let fs = require('fs');
	提供了可以操作文件的API
			
	异步读取文件：
		fs.readFile("绝对路径|文件路径",(err,buf)=>{
			拿到buf要干嘛？就需要写在这里
		})

	异步写入文件：- 将原来的东西，替换掉
		fs.writeFile("绝对路径|文件路径","写入的新内容",()=>{
			console.log("写入完毕了，以后要做什么")
		})

	异步追加文件：- 保留原来的东西
		fs.appendFile("绝对路径|文件路径","写入的新内容",()=>{
			console.log("写入完毕了，以后要做什么")
		})
复制代码
复制代码

6、http模块 - 超级重点：使用代码搭建服务器

固定步骤：
//引入http、url、fs官方模块
var http=require("http");
var url=require("url");
var fs=require("fs");
//创建服务器
var app=http.createServer();
//为服务器设置监听的端口号
app.listen(80);//http默认端口为80，https默认端口为443
//为服务器绑定请求事件 - 请求？前端发到后端的，
app.on("request",(req,res)=>{
        //req - request:保存请求对象，请求对象，前端->后端，提供了一个属性req.url，解析此属性拿到自己需要的部分（路由|请求消息）
        var objUrl=url.parse(req.url,true);
        //得到前端传来路由部分
        var router=objUrl.pathname;
        //判断前端的路由是什么，给他返回不同的页面
        if(router=="/" || router=="/index.html"){
                //res - response：保存响应对象，后端->前端，提供了一个方法res.end(你想要响应的东西)
                fs.readFile("./public/index.html",(err,buf)=>{
                        res.end(buf);
                })
        }else if(router.match(/html/)!=null){
                console.log(router);
                fs.readFile("./public"+router,(err,buf)=>{
                        res.end(buf);
                })
        }else if(router.match(/css|js|jpg|png|gif|woff/)!=null){
                fs.readFile("./public"+router,(err,buf)=>{
                        res.end(buf);
                })
        }
})
复制代码
复制代码

强调：
1、前端的一切action、href、src，所有引入路径的地方，全都被node.js当作了是一个路由请求，解析请求，读取对应的文件给用户看
2、自己想要访问自己，打开浏览器，可以使用127.0.0.1访问自己，访问别人（前提：防火墙关了没），需要别人把自己的ipv4地址给你，打开cmd，输入ipconfig

模块（每个.js文件）分类

1、官方模块：var xx=require("官方模块名")
2、第三方模块

3、自定义模块：2大类

   为什么有的模块要引入时加上./，有的模块又不需要
  1、文件模块：创建xx.js去公开需要公开的内容，主模块想要引入必须写为require("./文件名")
  2、目录模块：3种
  	1、创建名为m1的文件夹，在其中创建index.js的文件，去需要公开的内容，主模块想要引入必须写为require("./文件夹的名字")
  	2、创建名为m2的文件夹，在其中创建xx.js的文件，去需要公开的内容，主模块想要引入必须写为require("./文件夹的名字")
  	      但是需要在m2文件夹中，在创建一个必须package.json的配置文件
  	3、创建一个必须名为node_modules的文件夹，在其中创建名为m3的文件夹，在其中创建index/xx.js的文件，去需要公开的内容，主模块想要引入必须写为require("文件夹的名字")
  	
  	其实真实开发中，我们程序员用的最多的就是文件模块，目录模块的第三种方式根本就不是人用的，是机器npm的使用的
复制代码
复制代码

npm

node package manager：node的模块/包管理器：专门管理第三方模块的，作用：下载安装、删除、更新、维护包的依赖关系...

如何使用第三方模块：

  1、打开网站：npm官网
  2、搜索你需要用到的模块，尽量用带有完全符合标志的那个包
  3、打开cmd：检查一下npm下载工具是否安装成功：npm -v
  4、下载：npm i 包名
  5、删除：npm un 包名 - win7系统，删除时只需删除当前包，不会删除依赖关系
  6、更新：npm up 包名 - 有可能此项目n年后要维护，有可能包就过期了，需要更新
  下周：使用mongoDB
复制代码
复制代码

数据

关系型数据库 - 以表格为主

  Oracle - Oracle（甲骨文）
  		主要应用于【企业级】开发市场，企业级：大公司、国企、事业单位（银行、警察局），不差钱的公司，安全性很高
  MySQL - Oracle（甲骨文）
  		主要应用于【互联网】开发市场，安全性相对较低，但是免费的，中小型公司的首选，但是和Node.js搭配不友好
  sql server - 微软：大学讲课
复制代码
复制代码

非关系型数据库 - 没有固定的格式

  是一种运动 - 反关系型数据库
  主流产品 - mongoDB，以JSON数据格式为主

作者：用户1816187750902
链接：juejin.cn/post/714424… 来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

week05