JavaScript第五周学习总结

Olivia7
154 阅读9分钟

第20天

BOM概述

  • 全称Browser Object Model，即浏览器对象模型，操作浏览器
  • DOM是由W3C制定相关标准，而BOM没有任何标准，因此存在兼容性问题
  • BOM由多个对象组成：
    1. window
    2. event：包含当前所触发的事件对象
    3. history：包含用户在浏览器窗口中访问过的URL
    4. navigator：包含有关浏览器的信息
    5. location：包含有关当前URL的信息
    6. screen
    7. document

window对象

  • 在浏览器中，有双重角色：
    1. 代替了Global，充当全局对象
    2. 指代当前浏览器窗口
  • 网页的打开方式：
    1. 当前页面打开，可以后退：<a href="url" target="_self">链接文本</a> //open("url","_self");
    2. 当前页面打开，禁止后退：location.replace("新url");使用场景：电商网站中付款后
    3. 在新窗口打开，可以打开多个：<a href="url" target="_blank">链接文本</a> //open("url","_blank");
    4. 在新窗口打开，只能打开一个：<a href="url" target="自定义name">链接文本</a> //open("url","自定义name");使用场景：电商网站中，购物车跳转到结账页面
  • 方法：
    1. 打开新窗口：var newW=open("url","target值/name","width=n,height=n,left=n,top=n");若不写第三个配置参数（即config），则新窗口与浏览器融为一体；否则脱离浏览器独立存在，且可用变量保存
    2. 关闭窗口：window（原窗口）/newW（新窗口）.close();
    3. 移动窗口：newW.moveTo(x,y);
    4. 修改窗口的大小：newW.resizeTo(width,height);
  • 属性：
    1. 获取屏幕的大小：screen.width/height
    2. 获取整个浏览器窗口的大小：outerWidth/Height
    3. 获取浏览器文档显示区域的大小：innerWidth/Height

a标签的作用

  1. 超链接、页面跳转
  2. 锚点、单一页面内不同位置间跳转：<a href="#id名">文本</a>
  3. 下载：<a href="文件名.rar/zip/exe">文本</a>
  4. 打开：<a href="文件名.txt/图片后缀">文本</a>
  5. 运行js、不需绑定事件：<a href="javascript:代码;">文本</a>

event对象-获取鼠标位置

  1. 浏览器会自动将事件对象event传递给事件处理函数的第一个形参，即elem.on事件名=function(e){ }
  2. 获取鼠标相对于屏幕的坐标：e.screenX/Y；获取鼠标相对于文档显示区域的坐标：e.clientX/Y；获取鼠标相对于整个页面的坐标：e.pageX/Y

定时器

  • 周期性定时器（反复执行）
    1. 开启：timer=setInterval(callback,delay);
    2. 停止：clearInterval(timer);
  • 一次性定时器（只执行一次）
    1. 开启：timer=setTimeout(callback,delay);
    2. 停止：clearTimeout(timer);
  • 两者的底层是一样的，可以相互转换

扩展

  • img.onload=function(){图片加载完成后立即执行js代码}
  • 面试题：函数、循环和定时器都可反复执行代码，区别在哪？ 区别在时机：函数是程序员调用几次或用户触发几次就执行几次；循环是程序员写好的，几乎一瞬间执行完毕；定时器是需等待一段时间才会执行

第21天

history对象

  • 保存着当前窗口的历史记录（访问过的URL）
  • 前进：history.go(1);后退：history.go(-1);刷新：history.go(0);

navigator对象

  • 保存着当前浏览器的基本信息（浏览器名称/版本号）
  • 通过js判断用户打开的是什么浏览器从而执行不同的操作，相当于css hack（通过条件注释载入代码，只有IE才会执行）
  • 属性：navigator.userAgent（返回的是浏览器相关信息的字符串，可查找关键字来区分浏览器）

location对象

  • 保存着当前窗口正打开的url
  • 一个url网址由5部分组成：协议://主机号或域名:端口号/路径?查询字符串
    1. 协议：http/https（安全版）
    2. 主机ip地址/域名（需花钱购买、更容易记忆）
    3. 端口号：http默认为80，https默认为443，可省略不写
    4. 文件的相对路径：百度加密了
    5. 查询字符串/请求消息：客户端发送到服务器（如get提交form表单）
  • 属性：location.protocol/hostname/port/pathname/search（可分别获取上述5部分；无需记忆，直接输出location查看）
  • 实现页面跳转：location="新url";/location.href="新url";/location.assign("新url");
  • 禁止后退：location.replace("新url");
  • 刷新：location.reload();

event事件对象（用户触发或浏览器自动触发）

  • 绑定事件的3种方式：
    1. 在html标签上添加事件属性 <elem on事件名="js代码"></elem> / 缺点：不符合结构（html）与行为（js）分离原则；一次只能绑定一个元素，无法动态绑定事件；一个事件只能绑定一个事件处理函数
    2. 在js中使用元素的事件处理函数属性 elem.on事件名=function(){} / 优点：符合结构（html）与行为（js）分离原则；可以动态绑定事件（循环） / 缺点：一个事件只能绑定一个事件处理函数（多个会导致覆盖；可直接将代码放在一起）
    3. API的兼容写法:
        if(elem.addEventListener){
                elem.addEventListener("事件名",callback); //主流
	}else{
		elem.attachEvent("on事件名",callback); //老IE
	}
  • 事件周期的3个阶段：
    1. 事件捕获：由外向内记录所要执行的事件
    2. 目标触发：执行实际触发事件的元素（即目标元素）上的处理函数
    3. 事件冒泡：由内向外触发
  • 如何获取事件对象event：
    1. 主流：会自动作为事件处理函数的第一个形参传入
    2. 老IE：window.event（主流也支持，window可省略）
    3. 兼容：elem.on事件名=e=>{ e=event; }
  • 获取到event后可做5个操作：

操作1：获取鼠标的位置/坐标

操作2：阻止冒泡（笔试面试）

        if(e.stopPropagation){
		e.stopPropagation(); //主流
	}else{
		e.cancelBubble=true; //老IE
	}

操作3：利用冒泡/事件委托

  1. 如何：若需多个子元素共有一个事件，则把事件绑定在父元素上；由于冒泡，点击子元素，父元素的事件也会触发
  2. 为什么：绑定的事件越多，创建的事件监听对象也就越多，网站性能就会越低下
  3. 如何找到目标元素target：（点击哪个就是哪个；淘汰了当前元素this）：主流e.target / 老IEe.srcElement（主流也支持）

操作4：阻止浏览器的默认行为

  1. 比如：鼠标右键弹框(window.oncontextmenu)、a默认跳转、submit默认提交、键盘事件（F5刷新页面、F12查看网页源代码等；window.onkeydown）
  2. 兼容写法：
        if(e.preventExtensions){
		e.preventExtensions(); //主流
	}else{
                e.returnValue=false; //老IE
	}

操作5：获取当前点击的键盘键码：无需记忆，直接键盘事件下console.log(e.keyCode);

第22天

了解

  • 全栈：客户端（PC端+移动端+小程序）+服务器端（php+node.js）+数据库（MySQL+MongoDB）
  • 服务器是计算机的一种，模样与电脑主机相似，是打开网站的必要载体；分为物理服务器（微机）和云服务器；对于开发人员来说，硬件服务器是电脑，软件服务器是中间件（将自己的电脑变为一台服务器）
  • 软件架构：
    1. C/S：Client客户端/Server服务器端，如QQ、微信、大型网络游戏 / 优点：用户体验感较好，操作界面丰富；对带宽（即网速）要求低，运行稳定 / 缺点：必须安装，占用硬盘空间；维护成本高，服务器端和客户端都需更新升级
    2. B/S：Browser浏览器端/Server服务器端，如淘宝网、微博网页版 / 优点：浏览器可直接访问，节省硬盘空间；只需更新服务器端 / 缺点：对带宽要求高
  • 网站架构：
    1. Linus操作系统+Apache网页服务器+MySQL数据库+PHP编程语言（免费）
    2. AIX操作系统+Weblogic应用服务器+Oracle数据库+JavaEE编程语言（收费）

XAMPP软件包（中间件）

  • 是什么：允许用户在自己的电脑上安装包含MySQL、PHP的Apache网页服务器
  • 如何使用：Apache服务器控制着htdocs文件夹，路径：C:\xampp\htdocs
    1. 自己访问：浏览器的地址栏输入127.0.0.1:80（指本地机）或localhost:80（80是默认端口可以省略）
    2. 他人访问：搜索cmd并打开，输入ipconfig，把IPv4地址复制给他人（192.168.30.85）
    3. 将项目搭建在服务器上：即将项目的所有文件复制到htdocs中
    4. 添加网页小图标：任意图片，改为favicon.ico的文件名后缀，放入htdocs
    5. 修改顶级域名（假象，自己可用）：C:\Windows\System32\drivers\etc\hosts文件（VSCode打开），在最后添加上127.0.0.1及www.olivia.com

数据库的类型

  • 关系型数据库：以表格为主
    1. Oracle（Oracle/甲骨文公司），主要应用于企业级开发市场，安全性高，但价格高昂
    2. MySQL（Oracle/甲骨文公司），主要应用于互联网开发市场，免费、简单、开源
    3. SqlServer（Microsoft/微软），一门大学课程
  • 非关系型数据库：无固定格式；比如：MongoDB，以JSON格式为主

MySQL的使用

图形化界面（简单）

在XAMPP软件包中同时开启Apache和MySQL，在浏览器的地址栏输入localhost或127.0.0.1:80/phpmyadmin即可访问

命令行（复杂）

  • 进入数据库：进入C:\xampp\mysql\bin，在上方路径处改输入cmd
  • 登录：输入mysql -uroot -p、回车两次
  • 退出：exit回车 或 直接×掉 SQL语句：
  • 关系型数据库互通；约定俗成大写；未来会在php中运行而非cmd中
  • 数据库
    1. 查看：SHOW DATABASES;
    2. 创建：CREATE DATABASE IF NOT EXISTS 数据库名称 CHARACTER SET uft8;
    3. 切换：USE 数据库名称;
  • 数据表
    1. 数据库常用的数据类型：（数值）Int整型、Float/Double浮点型、Decimal精确值；（字符串）Char长度固定、*Varchar长度可变；（日期）Date日期、Datetime日期+时间、Timestamp时间戳（唯一地标识某一刻的时间）
    2. 创建：CREATE TABLE 表名(字段名/表头 数据类型(长度),......);
  • 3.数据
    1. 【增】：INSERT INTO 表名 VALUES(字段值,...);
    2. 【删】（永久）：DELETE FROM 表名 WHERE id=几;
    3. 【改】：UPDATE 表名 SET 字段名=字段值,...... WHERE id=几;
    4. 【查】：SELECT * FROM 表名;/SELECT 字段名,...... FROM 表名 WHERE id=几;

第23天

PHP

  • 如何运行php文件：

    1. 打开Apache网页服务器，将项目放入htdocs文件夹中，在浏览器的地址栏输入127.0.0.1，选择想要运行的文件
    2. 特殊：php文件也支持前端代码（html+css+js）

  • 输出方式：（可识别标签）

    1. echo(内容); 或 echo 内容;只能输出4种标量类型；解决：echo JSON_encode(复合类型);
    2. var_dump(内容);可以输出任何数据类型且详细显示出来（不好），php在页面上输出的内容会通过ajax拿去前端

  • 变量：$变量名=值;（使用时不可省略$）；常量：const 常量名=值;

  • 数据类型：

    1. 四种标量类型：Int整型、Float/Double浮点型、Boolean布尔、String字符串
    2. 两种复合类型：Array数组、Object对象
    3. 两种特殊类型：Resource资源、Null空、不存在（区别于""，存在但值为空）

注意：String单引号只能放入纯文本；双引号支持放入变量，但必须{变量名}，类似js的模板字符串； 举例：`echo "{name}今年{age}岁,喜欢{hobby}";创建数组： 直接量arr=[元素,...];‘得到索引数组；内置函数‘arr=[元素,...];`得到索引数组； 内置函数 `arr=array(key=>value,...);得到hash数组； 访问：数组名[下标]‘；遍历：‘for(数组名[下标]`； 遍历：`for(i=0;i<count(arr);arr);i++){echo arr[arr[i];}`

  • 与js不同，php中字符串拼接运算符是"."，不能使用+，意味着php的API不能使用. 分支、循环、函数与js完全相同；API：面向百度开发

全栈开发

前端向后端发送请求-表单提交

  • input必须添加name属性，radio、checkbox、select&option等表单控件还需添加value属性 （由用户输入而非选择的表单控件可不写value，直接提交innerHTML）
  • form表单必须加上action="服务器端文件的路径"
  • form表单的mthod是用get还是post，需与后端沟通或看开发文档
    1. get是从服务器上获取数据，不能大于2kb，如搜索框
    2. post是向服务器传送数据，安全性较高，如登录/注册

后端接收前端的请求消息

语法：$变量名=$_GET/POST/REQUEST["input的name值"];

后端<=>数据库：php自带操作MySQL的API

  • 创建到数据库的连接对象：$conn=mysqli_connect("hostname","username","userpwd","dbname");
  • 为此数据库设置中文编码：mysqli_query($conn,"SET NAMES utf8");
  • 创建sql语句：$sql="INSERT/DELETE/UPDATE/SELECT......";（增删改查）
  • 数据库需要执行sql语句：$result=mysqli_query($conn,$sql);
    1. 若是增删改，会返回bool值，true则执行成功，false则执行失败
    2. 若是查，会返回不认识的结果集对象；解决如下：
        while(($row=mysqli_fetch_row|assoc|array($result))!=null){
		对$row的操作;
	}
  • 断开和数据库的连接：mysqli_close($conn);
avatar
文章
阅读
粉丝