学习Javascript的第五周

故里的鱼
89 阅读12分钟

BOM

1、BOM：Brower Object Model(浏览器对象模型)--提供专门操作浏览器的一些对象(方法和熟悉)，没有标准，大部分浏览器还是统一的，唯独老IE与众不同--使用率较低。

2、重点：定时器，事件对象event

3、DOM：是有标准的，w3c规定的，几乎没有兼容性

window对象

1、代替着ES中的global

充当全局对象-保存全局变量和全局函数

2、自带一些属性和窗口，指代当前窗口

打开网页链接的方式：4种

1、替换当前页面，可以后退

  • 1)、HTML：<a href="url">内容</a>

  • 2)、JS：windon.open("url","_self");

2、替换当前页面，禁止后退--场景：电商网站(付款后不允许退回去继续付款)

  • 1)、history对象:记录着【当前窗口】的历史记录，只有有了历史才能前进后退

  • 2)、location对象:记录着【当前窗口】正在打开的url，而他有一个方法叫做替换，替换是不会产生任何历史记录的，但是url替换后网页必然跳转

  • 3)、JS：location.replace("新url");

3、新窗口打开，可以打开多个

  • 1)、HTML：<a href="url">内容</a>
  • 2)、JS：window.open("url","_blank") 4、新窗口打开，只能打开一个--场景：电商网站(只允许打开一个付款页面)
  • HTML：<a href="url" target="自定义name"></a>
  • 自定义name的意思：每一个窗口底层都有一个名字，target其实就是设置名字，name如果相同，新的打开的窗口就会把旧窗口个替换掉
  • JS：open("url","自定义name"); 扩展标签的作用
  • 跳转
  • 锚点
  • 下载 <a href="xx.exe/zip/rar/7z">内容</a>
  • 打开 <a href="xx.图片后缀/txt">n内容</a>
  • 直接书写JS：<a href ="javascript:js代码">内容</a>

window提供的属性和方法

  • 属性
    • 获取浏览器的完整大小
      • window.outerWidth/outerHeight;
    • 获取浏览的文档显示区域的大小
      • innerWidth/innerHeight;
    • 获取屏幕的完整大小
      • screen.width/height;
  • 方法
    • 打开窗口
      • open("url","自定义的name" ,"width=,height=,left=,top=");
    • 关闭窗口
      • window/newW.close()
    • 修改窗口的大小
      • newW.resizeTo(new宽 ,new高)
    • 修改窗口的位置：
      • newW.moveTo(x,y);

获取鼠标的位置

  • 绑定事件：事件处理函数形参可以写一个e，自动获取到事件对象event
  • 获取坐标：3种
    • e.screenX/Y --获取相对于屏幕的位置
    • e.clientX/Y ---获取相对于客户端/浏览器端的位置
    • e.pageX/Y ---获取相对于页面的坐标

鼠标的跟随动画

  • 事件window/document.onmousemove
  • js的加载速度比图片的加载速度快，加载事件: onload事件
  • 删除图片，实在动画开始时开启了定时器

定时器(重点)

1、周期性定时器

  • 开启: timer=setlnterval(callback,间隔毫秒数);
  • 停止: clearlnterval(timer) 2、一次性定时器
  • 开启： timer=setTimeout(callback,间隔毫秒数);
  • 停止:：clearTimeout(timer)
    注意：一次性和周星期底层都是一样的，甚至可以呼唤，所以你到底以后用哪个无所谓

BOM的其他对象

history对象

1、保存【当前窗口】的历史记录打开过的url

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

navigator对象

1、保存了当前浏览器的基本信息，可以使用JS来判断我们是什么浏览器以及版本号-类似css hack (浏览器兼容性问题的，专门针对老IE)
2、属性：navigator.user Agent；---能够得到一个字符串，包含着是什么浏览器以及版本号，想办法拿到需要的部分
3、HTML5（语义化标签、增强型表单、音频视频）和css3（过渡、动画、转换、媒体查询、阴影、弹性盒子）和ES5以上的任何东西，老IE都不支持的，所以要做兼容

location对象

1、一个url地址的组成部分

  • 协议名：http /https/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对象（重点）

1、事件：用户触发的或者浏览器自动触发的(onload)

  • 绑定事件：3种
    • 在HTML页面上绑定事件
      • <elem 事件名="js语句">
      • 缺点
        • 不符合内容(html)与样式(css)与行为(js)的分离的原则
        • 无法动态绑定事件（一次只能绑定一个元素)
        • 无法同时绑定多个函数对象
    • 在JS中使用元素的事件处理函数属性：
      • elem.on事件名=function(){操作}
      • 优点
        • 符合内容(html)与样式(css)与行为(js）的分离的原则
        • 动态绑定事件
        • 没有兼容性问题
      • 缺点
        • 无法同时绑定多个函数对象
    • 使用专门的事件API绑定事件

      • elem.addEventListener("事件名",callback);

      • 老IE：elem.attachEvent("on事件名",function(){});

      • 兼容

         if(elem.addEventListener){
      elem.addEventListener("事件名",callback);
 }else{
  elem.attachEvent("on事件名",function(){});
}

      • 优点

        • 符合内容(html)与样式(css)与行为(js)的分离
        • 动态绑定事件
        • 可以同时绑定多个函数对象

      • 缺点：

        • 具有兼容性问题
    • 事件周期性
      • 主流:3个阶段
        • 1、捕获阶段，记录着要发生的事件有哪些
        • 2、目标元素优先触发，目标元素->实际触发事件的元素
        • 3、冒泡触发，向上触发所有的记录着的事件
      • 老IE：2个阶段，没有捕获阶段
    • 获取事件对象Event(重点)
      • 主流：会自动作为事件处理函数的第一个传入
        • elem.on事件名 = function(e){e->event)
      • 老IE：event
      • 兼容：var e = event //不光老IE可用，主流也可以用
      • 获取到event事件对象，可以做什么(重点)
        • 获取鼠标的坐标/位置
        • 阻止冒泡--笔试面试中：开发几乎不用
          • 主流：e.stopPropagation()
          • 老IE：e.cancelBubble=true；
          • 兼容：e.cancelBubble=true
        • 事件委托/利用冒泡--笔试开发中都会用到
          • 优化：如果多个子元素定义了相同或相似的事件，最好只给父元素定义一次
          • 为什么：每次绑定一个事件函数，其实都是创建了一个事件对象，创建的事件对象越多，网站的性能越差
          • 淘汰this，当前元素
          • 认识一个新目标元素：target（点击的是哪一个，永远就是哪一个）
          • 主流：e.target;
          • 老IE：e.srcElement;
          • 兼容：e.srcElement;
        • 阻止浏览器的默认行为: a标签默认跳转页面，右键自带一个弹出框，F12打开一个控制台，F5会刷新
          • 主流: e.preventDefault();
          • 老lE: e.returnValue=false;
        • 获取键盘的键码：
          • e.keyCode; === 不需要去记忆键码，要么百度查看，要么直接输出查看

Node.js相关知识

Node.js概述

1、不是JS，但语法和Javascript非常相似，竞争对象：Java/c/c++/php 2、做的功能绝不是特效，做的事服务器端的操作（形成了一个前端和数据库沟通交流的桥梁-数据交互） 3、目的

  • 1、使用代码搭建一个服务器&文件系统（放在代老师电脑上的HTML，你们也可以访问到，而且根据你访问的网址不同，看到的网页也是不同的)
  • 2、Node.js如何和数据库进行交流沟通(在这之前肯定还要学习mongoDB)

Node.js 安装

1、首先去Node.js的官网找到要下载的文件，然后开始安装，一路往下点，哪里点不动了，就把哪里勾上，千万不要取消任何东西
2、检查是否安装成功：打开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：安装一个插件：搜索一个run，代码处右键，第一个选项就是run

js和Node.js的异同

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

搭建服务器(重点)

固定步骤

//引入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);
   })
}
})

模块的分类

官方模块

注：不需要下载，在安装node.js环境的时候就已经安好了，但是某的模块需要引入，某的模块不用引入，就需要学习看文档

1、Globals模块

  • 全局模块–全局变量在所有模块中均可使用。不需要引入
  • _ _dirname 当前文件夹的绝对路径 *
  • _ _filename 当前文件的完整的绝对路径
  • exports 一个空对象，空开和暴露自己的成员
  • module 指代当前模块本身，包含了其他4个变量*
  • require() 一个函数，引入其他模块的*
  • 定时器
  • 控制台

2、Querysting模块

  • 查询字符串
  • 需要引入:var qs=require('querystring');
  • 提供了解析url的查询字符串部分的功能
  • var obj=qs.parse("查询字符串部分");
  • 想要获取前端传来的某一个部分：obj.键名

3、Url模块

  • 需要引入： var url = require("url");
  • 提供了一些实用函数，用于完整的URL处理与解析
  • var objUrl=ur.parse(完整的url网址",true);/此方法会将url网址的各个部分全部解析出来，支持传入第二个参数，是一个布尔值，如果传入的是一个true,自动调用querystring的parse方法，顺便也解析了查询字符串（请求消息∶前端->后端的东西)部分
    • 真正的重点
      • 查询字符串:objUrl.query.键名–拿到前端传到后端的东西
      • 路由: 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.wirteFile("绝对路径|文件路径",()=>{
   拿到buf后，需要做的操作
 })

    • 异步追加文件

       fs.readFile("绝对路径|文件路径",()=>{
   拿到buf后，需要做的操作
 }

6、http模块

第三方模块

注意：多到数不清楚，提供了很多官方模块没有的东西，有一个网址npm可以去下载:mongo、express框架（简化)

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

自定义模块

  • 为什么有的模块要引入时加上./，有的模块又不需要
  • 1、文件模块:创建xx.js去公开需要公开的内容，主模块想要引入必须写为require("./文件名")
  • 目录模块:3种
    • 1、创建名为m1的文件夹，在其中创建index.js的文件，去需要公开的内容，主模块想要引入必须写为require("./文件夹的名字")
    • 2、创建名为m2的文件夹，在其中创建xx.js的文件，去需要公开的内容，主模块想要引入必须写为require("./文件夹的名字")
      • 但是需要在m2文件夹中，在创建一个必须package.json的配置文件
    • 3、创建一个必须名为node_modules的文件夹，在其中创建名为m3的文件夹，在其中创建index/xx.js的文件，去需要公开的内容，主模块想要引入必须写为require("文件夹的名字")

Node.js最大的特点

  • 快，非常快–以前最快的是php，Node.js的速度是php的14倍,
avatar
文章
阅读
粉丝