第四周

gaegul
121 阅读12分钟

day20

BOM

Browser Object Model - 浏览器对象模型：
专门为操作浏览器准备的一些对象，没有任何标准，不像DOM由W3C制定标准，所以存在很大的兼容性问题，使用率相对DOM较少
BOM有哪些对象：window、history、navigator、location、screen、event

window对象

1、代替了Global，充当全局对象 - 保存着全局变量和全局函数

2、指代当前窗口本身

3、*打开网页的新方式：

当前页面打开，可以后退：
HTML：<a href="url">内容</a>
JS：open("url","_self");

当前页面打开，禁止后退：何时：电商网站：结账过后不允许后退了
HTML：做不了
JS：history：当前窗口的历史记录，只有当前窗口有了历史记录才能前进后退
location：当前窗口的正在打开的url网址，提供一个方法：
location.replace("新url"); - 不叫作跳转，叫做替换，当时网址被替换了，页面也会跳转，但是不会产生历史记录

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

在新窗口打开，只能打开一个：
何时：电商网站：购物车跳转到结账页面，结账页面只允许打开一个
HTML：<a href="url" target="自定义name">内容</a>
JS：open("url","自定义name");
其实在每一个窗口的底层都有一个名字name
_self指向的自己当前的名字
_blank始终会得到一个新名字
如果自定义名称，那么浏览器会发现这个窗口已经打开过了，那再次打开时，会把原来的窗口给替换掉

扩展：a标签的作用
1、跳转
2、锚点
3、下载：<a href='xx.rar/zip/exe'>文字</a>
4、打开：<a href='xx.txt/图片后缀'>文字</a>
5、运行js - a标签不需要绑定事件：<a href='javascript:js代码;'>文字</a>

4、属性和方法：

打开新窗口：var 新窗口=open("url","target/自定义","width=,height=,left=,top="); 特殊：
1、没有加第三个参数的时候，我们的新窗口会和浏览器融为一体
2、添加上第三个参数的时候，我们的新窗口就会脱离浏览器独立存在，而且可以把他保存起来
关闭窗口：window/新窗口.close();
移动窗口：新窗口.moveTo(x,y);
修改窗口的大小：新窗口.resizeTo(newW,newH);

获取屏幕的大小：screen.width/height
获取浏览器的完整大小：outerWidth/Height
获取浏览器文档显示区域的大小：innerWidth/Height

扩展：event对象可以获取鼠标的位置：
1、在你的事件处理函数中的第一个形参会自动获取到事件对象event
2、获取鼠标的位置：
获取鼠标相对于屏幕的坐标：e.screenX/Y
获取鼠标相当于文档显示区域的坐标：e.clientX/Y
获取鼠标相当于网页的坐标：e.pageX/Y

5、定时器：

等待一段时间才会执行的代码，可能会反复执行，也可能只会执行一次

1、周期性定时器
开启：timer=setInterval(回调函数,延时);
停止：clearInterval(timer);

2、一次性定时器
开启：timer=setTimeout(回调函数,延时);
停止：clearTimeout(timer);
特殊：
1、不管是一次性还是周期性，底层其实都是一样的，甚至两者可以互换
2、一次性<=>周期性

面试题：
函数和循环和定时器，都可以反复执行代码，区别在哪里？- 时机
1、函数：要么程序员调用几次执行几次，要么用户触发几次执行几次
2、循环：几乎是一瞬间就完毕了
3、定时器：需要先等待一段时间才会执行

day21

history对象

保存当前窗口的历史记录（打开【过】的url），可用于
前进：hisotry.go(1);
后退：hisotry.go(-1);
刷新：hisotry.go(0);

location对象

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

一个url网址由哪5部分组成？
协议：https/http/ftp/ws(直播);
域名|主机号：域名是需要购买的，在没有购买的时候都是主机号
端口号：默认端口可以省略不写，https默认端口是443，http默认端口80
文件的相对路径：百度把它加密起来了隐藏起来了
查询字符串：get表单提交显示出来的东西

属性和API：
属性：获取到一个url的各个部分，不要记忆，直接输出location对象查看
功能：跳转：
*1、location="url";
2、location.href="url";
3、location.assign("url");
4、跳转后禁止后退：location.replace("新url"); - 不会产生历史纪录
5、刷新：location.reload();

navigator对象

保存浏览器的基本信息 - 通过JS来判断打开的浏览器是什么浏览器并且判断版本号 - 类似css hack（但是css hack只能操作IE浏览器）
属性：navigator.userAgent;//浏览器的相关信息的字符串

event对象

事件：用户触发的 或 浏览器自动触发
绑定事件：
1、在HTML页面上绑定事件：
<elem on事件名="js语句"></elem>

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

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

优点：
1、符合内容（HTML）与行为（JS）的分离
2、动态绑定事件
缺点：无法同时绑定多个函数对象 - 多个函数做成一个函数就不算了缺点

3、使用专门的事件API绑定事件
优点：
1、符合内容（HTML）与行为（JS）的分离
2、动态绑定事件
3、同时绑定多个函数对象
*缺点：兼容问题 - 老IE不兼容，麻烦

主流：elem.addEventListener("事件名",callback);
老IE：elem.attachEvent("on事件名",callback);
兼容：if(elem.addEventListener){
            elem.addEventListener("事件名",callback);
      }else{
            elem.attachEvent("on事件名",callback);//老IE如果同时绑定了多个函数对象，反而最下面的函数最先执行
      }

事件周期：
从事件发生，到所有事件处理函数执行完毕的全过程
主流：
3个阶段
1、捕获阶段：记录要发生的事件有哪些
2、目标优先触发：目标元素->当前点击的实际发生事件的元素
3、冒泡触发：向上出发所有记录着的事件

老IE：
2个阶段，没有捕获阶段

获取事件对象event
主流：会自动作为事件处理函数的第一个形参传入
elem.on事件名=e=>{e->event};
老IE：event;
兼容：var e=event;//不光老IE可用，主流也可以用 - 小三上位

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

2、阻止冒泡 - 鄙视面试中

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

3、利用冒泡/事件委托：
开发中常用，提升网页性能
优化：如果多个子元素定义了相同 或 相似的操作，最好只能父元素定义一次
为什么：每次绑定一个事件函数，其实都是创建了一个事件对象，创建的事件对象越多，网页效率越低下
淘汰了this：水性杨花，当前元素
认识一个目标元素target：你点击的哪一个，他永远就是那一个，不会变化
主流：e.target;
老IE：e.srcElement;
兼容：e.srcElement;//不光老IE可用，主流也可以用 - 小三上位

4、阻止浏览器的默认行为：
a标签默认会跳转页面，右键自带一个弹出框，F12自带一个开发者工具，F5自带刷新功能，submit按钮默认提交...

主流：e.preventDefault();
老IE：e.returnValue=false;
兼容：if(e.preventDefault){
            e.preventDefault();
      }else{
            e.returnValue=false;
      }

新事件：oncontextmenu - 右键事件
onkeydown - 键盘事件
5、获取键盘的键码：e.keyCode; - 小游戏
不要记忆：要么输出看你当前点击的按钮是什么码，或者直接百度搜索

day22

server

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

服务器概念：
简单来说就是一台电脑
生活中：微机
商业/国家：小型机（造价几十万，好的上百万）、中型机、大型机、超级计算机

拥有服务器的方式：
1、买 - 配置较好的微机：中小型公司
2、租一台云服务器 - 腾讯云/阿里云/百度云/新浪云... - 配置自己选择，价格好商量，按年收费
3、买一台小型机 - 对小公司遭不住

对于开发人员来说
硬件服务器 - 电脑
软件服务器 - 中间件（软件可以将你的电脑变成一台服务器：别人可以来访问）

软件架构：
C/S：clinet客户端/server服务器端
举例：QQ/微博/大型网络游戏
优点：
用户体验感较好
运行稳定
对带宽要求低
缺点：
占硬盘空间
更新过于麻烦 - 服务器端和客户端都要更新

B/S：browser浏览器端/server服务器端
举例：网页版QQ/微博/游戏
优点：
几乎不占硬盘 更新简单 - 只需要更新服务器端
缺点：
带宽要求高
体验感越来越棒了 - 云平台游戏（根本不关心你电脑的配置如何，也不需下载，打开即玩，但是带宽要求高）

MySQL

关系型数据库 - 以表格为主
Oracle - Oracle（甲骨文）
主要应用于【企业级】开发市场：大公司、国企、事业单位：警察局、医院...（不差钱） - 优势：安全性高 缺点：收费的
MySQL - Oracle（甲骨文）
主要应用于【互联网】开发市场 - 优势：免费、简单、开源 - 中小型企业
sqlserver - 微软：大学讲课

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

基本内容：
1、图形化界面（更加简单更美观）方式 - 傻瓜式操作
要求：同时打开mysql和apache
访问：
127.0.0.1:端口号/phpmyadmin
localhost:端口号/phpmyadmin

2、命令行方式：
如何进入数据库：
1、打开cmd
2、输入cmd的命令，进入到d:/xampp/mysql/bind
3、登录：mysql -uroot -p 回车不要加分号
4、退出：exit
5、SQL语句：关系型数据库SQL语句互通

数据库：
查看数据库：SHOW DATABASES;

创建数据库：CREATE DATABASE IF NOT EXISTS 数据库名称 CHARACTER SET utf8;

切换数据库：USE 数据库名称;

数据表：
数据库的数据类型：
数值：
Int - 整型
Float/Double - 浮点型
Decimal - 精确值

字符串：
Char - 长度固定的
Varchar - 长度可变的

日期：
Date - YYYY/MM/DD
Datetime - YYYY/MM/DD hh:mm:ss
Timestamp - 时间戳（标识：唯一不重复 - id也可以）

    创建数据表：
            CREATE TABLE 表名(
                    字段名 数据类型,
                    ...
            );

    举例：CREATE TABLE user(
                    id int PRIMARY KEY AUTO_INCREMENT,
                    name varchar(30),
                    pwd varchar(6),
                    email varchar(30),
                    vip varchar(1)
          );

        PRIMARY KEY：主键约束：绝对不会重复
        AUTO_INCREMENT：主键自增：每次都会+1

数据/记录：

增：INSERT INTO 表名 VALUES(字段值,...);

删：DELETE FROM 表名 WHERE id=几; - 一旦删除数据就不回再回来了

改：UPDATE 表名 SET 字段名=字段值,... WHERE id=几;

查：3种语法： SELECT * FROM 表名; SELECT 字段名,字段名,... FROM 表名; SELECT * FROM 表名 WHERE id=几;

day23

PHP

最简单的一门语言
1、如何运行php
打开apache，将你的项目/文件夹放到htdocs里面，在用浏览器输入127.0.0.1，打开你需要运行的文件

任何一门语言，万变不离其宗，js（客户端：特效）和php（服务器端：沟通）都是一个脚本语言

2、PHP的语法基础
输出方式：
1、*echo(想要输出的内容); 或者 echo 想要输出的内容;
echo只能输出4种标准类型，不能输出别的类型
2、var_dump(想要输出的内容)
var_dump可以输出一切数据类型，显示很详细，正是因为显示的太过详细，其实要不得，php输出在页面上的东西，某一天都会被前端用ajax拿走拿到前端去

变量和常量：
1、*变量：值可以变化的数据
语法：变量名=值;注意：使用时变量名=值; 注意：使用时不能省略

2、常量：值一旦创建了，不允许修改
语法：const 常量名=值;

3、*数据类型：
四种标准/基本/原始类型：
整型：Int
浮点型：Float/Double
布尔：Boolean
字符串：String - 有区别
单引号 - 只能放入纯文本

双引号 - 支持放入变量 - 类似js模板字符串
echo "{name}今年{age}岁,喜欢{$hobby}";

两种复合类型：
Array - 数组：保存多个相关数据
创建：
1、直接量：$arr=[值1,...] - 索引数组
2、内置对象：

$arr=array( - hash数组：其实就是对象  
    key=>value,
    ...
)

访问：$数组名[下标]

遍历：循环

Object - 面向对象，不需要

两种特殊类型：
Resource - 资源类型
Null - 空，释放内存
"" - 有，值为空
null- 不存在

运算符：几乎和js一致，除了字符串拼接.，意味着php的API调用方法绝对不可能用.

分支、循环、函数：完全一样！

所有的API：理论上来说完全一样，但是操作却不同，面向百度开发

全栈

前端->后端
前端需要发起请求
1、表单请求/提交
注意：
1、input必须添加name属性，甚至有的input（radio、checkbox、select&option）可能还要添加value
2、form表单必须添加action="服务器端文件的路径";
3、method到底是用get还是post，和后端进行沟通/看开发文档
get->得到，只要跟安全性不挂钩的时候，大小有限制2kb：搜索框（把东西拿出来）
post->发送，只要跟安全性挂钩的时候，优先使用，举例：登录/注册（把东西放进去）

2、后端 需要接收住 前端传来的 请求消息
语法：$变量=$_GET/POST/REQUEST["input的name的值"]

REQUEST - 请求：不管前端是GET还是POST，都能接住

后端<->数据库：
php自带操作mysql的API，只需要学习4.5句话完毕 1、创建和数据库的连接对象
$conn=mysqli_connect("hostname","username","userpwd","dbname");

我们班的固定：
$conn=mysqli_connect("127.0.0.1","root","","h52202");

1.5、为此数据库设置中文编码
mysqli_query($conn,"SET NAMES utf8");

2、创建SQL语句：你要干什么
$sql="INSERT/UPDATE/DELETE/SELECT";

3、数据库要执行SQL语句
result=mysqliquery(result=mysqli_query(conn,$sql);
//增删改：true->执行成功 false->执行失败
//查：返回的是一个我们都不会认识的结果集对象
解决：php提供了一套方法

while(($row=mysqli_fetch_row|assoc|array($result))!=null){
var_dump($row);//拿到了数据要干什么？
echo "<br>";
}

4、断开和数据库的连接
mysqli_close($conn);

avatar
文章
阅读
粉丝