前端学习总结

01_SERVER

day01

• 软件过程/生命周期

  • 软件定义期

    • 可行性研究阶段
    • 需求分析阶段

  • 软件开发期

    • 概要设计阶段
    • 详细设计阶段
    • 编码实现阶段
    • 测试阶段

  • 软件维护期

    • 项目部署阶段
    • 项目维护阶段

• 简单使用Web服务器

day02

• 数据库概述

  • RDBMS部署结构

    • 服务器端(mysqld.exe)

      • 3306端口

    • 客户端(mysql.exe)

      • 交互模式

        • mysql -uroot -p

      • 脚本模式

        • mysql -uroot -p < d:/xx.sql

  • RDBMS数据逻辑结构

    • SERVER=>DATABASE=>TABLE=>ROW=>COLUMN

• 常用的管理命令

  • SHOW DATABASES;
  • USE 库名;
  • SHOW TABLES;
  • DESC 表名;
  • SHOW CREATE TABLE 表名;

• 常用的数据操作(SQL)命令

  • SET NAMES UTF8;
  • DROP ......
  • CREATE ....
  • USE ....
  • CREATE TABLE 表名( );
  • INSERT INTO .... VALUES( );
  • DELETE FROM .... WHERE ....;
  • UPDATE ... SET ... WHERE ....;
  • SELECT * FROM ...;

day03

• 列类型

  • 数值类型

    • TINYINT
    • SMALLINT
    • INT
    • BIGINT
    • FLOAT
    • DOUBLE
    • DECIMAL
    • BOOL

  • 日期时间类型

    • DATE
    • TIME
    • DATETIME

  • 字符串类型

    • CHAR(M)
    • VARCHAR(M)
    • TEXT(M)

• 列约束

  • 主键约束(PRIMARY KEY)
  • 非空约束(NOT NULL)
  • 唯一约束(UNIQUE)
  • 默认值约束(DEFAULT)
  • 检查约束(CHECK)
  • 外键约束(FORGEIGN KEY ... REFERENCES...)

day04

• 简单查询

  • 查询特定的列

    • SELECT ename, salary FROM emp;

  • 查询所有列

    • SELECT * FROM emp;

  • 给列取别名

    • SELECT deptId AS 部门编号, birthday AS b FROM emp;

  • 查询时执行运算

    • SELECT salary*12 FROM emp;

  • 只显示不同的列

    • SELECT DISTINCT deptId FROM emp;

  • 查询结果的排序

    • SELECT * FROM emp ORDER BY salary ASC, ename DESC;

  • 查询结果的过滤/筛选

    • 相等判定

      • SELECT * FROM emp WHERE eid=7788;

    • 不等判定

      • SELECT * FROM emp WHERE salary>5000;

    • 多条件判定

      • SELECT * FROM emp WHERE salary>5000 AND sex='女';
      • SELECT * FROM emp WHERE deptId=10 OR deptId=20;

  • 分页查询

    • 查询所有员工中的第3页，每页显示10条记录

      • SELECT * FROM emp LIMIT 20, 10;

• 复杂查询

  • 子查询

    • SELECT * FROM emp WHERE salary>( SELECT salary FROM emp WHERE ename='KING'
      );

  • 分组查询/聚合查询

    • SELECT COUNT(*) FROM emp;
    • SELECT SUM(salary) FROM emp;
    • SELECT AVG(salary) FROM emp;
    • SELECT MAX(salary) FROM emp;
    • SELECT MIN(salary) FROM emp;

  • 跨表查询/多表查询

day05

• 了解背景

• 搭建环境

• 变量和常量

  • 变量： $变量名 = 值;

  • 常量： const 常量名 = 值;

    • const MYSQLI_ASSOC=1;

day06

• 数据类型

  • 原生值/标量类型

    • int
    • float
    • string
    • bool

  • 复合类型

    • array

      • 索引数组
      • 关联数组

    • object

  • 其它类型

    • null

    • resource

      • 数据库连接
      • 查询结果集
      • 文件
      • 网络连接

• 运算符

  • 算术运算符

  • 比较运算符

  • 逻辑运算符

  • 位运算符

  • 赋值运算符

  • 拼接运算符

  • 三目运算符

  • 特殊运算符

    • [ ]
    • =>

day07

• 逻辑结构

  • 顺序执行

  • 选择执行

    • if...else...
    • switch...case...break...

  • 循环执行

    • while(){}
    • do{}while()

day08

• 逻辑结构

  • 循环结构

    • for(){ }
    • foreach(){ }

• 通用小程序

  • 质数判定

    //质数判定示例

• 数组

  • 索引数组

    • for
    • foreach

  • 关联数组

    • foreach

      • 语法1： foreach(数组名 as 变量名){ 循环主体； } 含义：对于数组中的每个元素，依次赋值给指定的变量名，执行一次循环体。
      • 语法2： foreach(数组名 as 下标变量名=>元素变量名){ 循环主体； } 含义：对于数组中的每个元素，依次把下标赋值给下标变量名，元素值赋值给元素变量名，执行一次循环体。

    • foreach( $arr as$v ){ echo v; } foreach( arr as $k=>$v){ echo $k .$v; }

day09

• PHP预定义数组

  • $_REQUEST
  • $_GET
  • $_POST
  • $_FILES
  • $_SESSION
  • $_COOKIE

• 函数基础概念

  • 最简单的函数

    //创建一个函数
    function add( ){
    $sum = 10 + 20;<br> echo$sum;
    }
    //调用一次该函数
    add( );

  • 带参数的函数

    //创建一个函数
    function add( $n1,$n2 ){
    $sum =$n1 + $n2;<br> echo$sum;
    }
    //调用一次该函数
    add( 100, 200 );

  • 带返回值的函数

    //创建一个函数
    function add( $n1,$n2 ){
    $sum =$n1 + $n2;<br> return$sum;
    }
    //调用一次该函数
    $result = add( 100, 200 );
    .....

• PHP预定义函数

  • 图像处理函数

  • 文本处理函数

  • 数学函数

  • 日期处理函数

  • 数据库访问函数

    • (1)连接数据库

      • $conn = mysqli_connect(....)

    • (2)发送SQL命令

      • $result = mysqli_query($conn, $sql)

    • (3)查看执行结果

      • if($result===false){} else { }

    • (4)关闭连接(可省略)

      • mysqli_close( $conn );

day10

• 向数据库插入新记录

  • $id = mysqli_insert_id($conn ); 若连接上刚刚执行了一条INSERT语句，且该语句在数据库中产生了自增的编号，可使用mysqli_insert_id()函数获取该自增编号
  • @ 一行代码 若在一行代码前添加一个@，则会压制/屏蔽此行代码抛出任何警告和错误信息。@符号一般和die()函数组合使用，实现数据的有效性检验： @n = $_REQUEST['uname']; if($n===null || $n===""){ die("uname required"); //终止页面的执行 }

• 从数据库中删除记录

  • SQL语句的分类： DDL: CREATE / DROP / ALTER / TRUNCATE DML: INSERT / DELETE / UPDATE DQL: SELECT DCL: GRANT / REVOKE
  • 如果获取DML影响的行数 $count = mysqli_affected_rows($conn );
  • require("1.php"); //在当前位置包含另一个文件的全部内容

• 修改数据库中的记录

  • $result = mysqli_query($conn, $sql )函数的返回值说明： (1)DML： 失败-false， 成功-true (2)DQL： 失败-false， 成功-查询到的结果集合(多行多列)

• 查询数据库中的一条记录

• 查询数据库中的多条记录

  • 从查询结果集对象($result)中读取数据： (1)$row = mysqli_fetch_row($result) 抓取一行，返回索引数组或NULL (2)$row = mysqli_fetch_assoc($result) 抓取一行，返回关联数组或NULL (3)$arr = mysqli_fetch_all( $result, MYSQLI_ASSOC ) 抓取所有的记录行，返回 [ [ ],[ ],...[ ] ] 或 [ ]

02_HTML5BASIC

Day01

• WEB基础知识

  • Web与Internet

    • Internet简介

      • Internet 是一个全球性的计算机网络，也成为"因特网"等

      • 主要服务

        • Telnet
        • Email
        • WWW
        • BBS
        • FTP

      • 基本实现技术

        • 分组交换原理
        • TCP/IP协议簇

    • Web简介

      • 又称为万维网，即WWW
      • 将各种类型的信息和服务无缝连接，并提供界面
      • 万维网其实就是无数WEB文档的集合

    • Web与Internet

      • Web是Internet上的最流行的应用
      • Internet为Web运行提供了网络环境

  • Web的工作原理

    • Web的工作原理

      • 基于Internet的一个多媒体信息服务系统

        • B/S模式
        • 由Web服务器，浏览器，通信协议组成

    • Web服务器

      • 功能

        • 存储WEB上的内容信息（图像，音视频等）
        • 响应浏览器的请求，执行服务器端程序
        • 具备一定安全性功能

      • 产品

        • TOMCAT
        • IIS
        • APACHE
        • ……

    • Web浏览器

      • 功能

        • 提交用户请求
        • 作为HTML和JS的解释器
        • 用图形化的方式显示HTML文档

      • 产品

        • Microsoft IE
        • Mozilla Firefox
        • Google Chrome
        • Apple Safari
        • Opera

  • Web的相关技术

    • 服务器端技术

      • 运行于服务器端

      • 提供了数据库访问能力

      • 技术

        • PHP（Hypertext Preprocessor）
        • JSP（Java Server Page）
        • ASP（Active Server Page）

    • 客户端技术

      • 运行与客户端，由浏览器解释运行

      • 技术

        • HTML（Hyper Text Markup Language）
        • CSS（Cascading Style Sheets）
        • JS（Javascript）

• HTML快速入门

  • HTML概述

    • 什么是HTML

      • Hyper Text Markup Language
      • 超文本标记语言,用来设计网页
      • 用该语言编写的文件，以.html 或 .htm为后缀
      • 由浏览器解释运行
      • 可以嵌入脚本语言编写的程序片段，如JS

  • HTML基础语法

    • 标记语法

      • HTML用于描述功能的符号成为“标记”

      • 标记使用时必须使用尖括号(<>)括起来

      • 有封闭类型标记，也有非封闭类型的标记

        • 双标记

          • 必须成对出现
          • <标记>内容</标记>
          • 注意：封闭类型标记必须成对出现

        • 单标记

          • 非封闭类型，也叫做空标记
          • <标记> 或 <标记/>

    • 元素

      • 即标记，指尖括号及尖括号所包围的内容部分
      • 元素可以包含文本内容和其他元素，也可以是空的

    • 元素嵌套

      • 元素可以相互嵌套形成更为复杂的语法

- 注意：

			- 嵌套顺序（完整嵌套）
			- 代码缩进（保证代码可读性）
			- p标记不能嵌套其它块级元素
			- 行内元素最好不要嵌套块级元素

	- 属性和值

		- 属性是用来修饰元素的
		- 语法

			- <标记 属性="值" 属性="值">
			- ex:<p align="center" id="p1">

		- 标准属性

			- id 

				- 定义元素在页面中的唯一标识

			- title

				- 鼠标移入到元素上时提示的文本

			- class

				- 样式中，定义元素引用的类选择器

			- style

				- 样式中，定义元素的行内样式

	- 注释

		- 在源码中编写，但不会被浏览器所解释的内容，成为注释
		- 可以将对代码的解释说明放在注释中
		- 语法

			- <!--  注释内容  -->

		- 注意

			- 注释不可以嵌套注释
			- 注释不可以位于<>中

- 文档结构

	- 文档结构

		- 文档类型声明

			- 指定HTML的版本和风格
			- <!DOCTYPE html>

		- HTML页面

			- 表示HTML页面的开始与结束
			- <html></html>

	- HTML页面

		- 页面头部

			- 定义页面全局信息
			- <head></head>
			- 子元素

				- 网页标题

					- <title></title>

				- 页面内容编码格式

					- <meta charset="utf-8">

		- 页面主体

			- 网页显示主体内容
			- <body></body>
			- 属性

				- 文本颜色

					- text

				- 背景颜色

					- bgcolor

• 文本

  • 特殊字符

    • 空格

      •  

    • <

      • <

        • Less Than

    • • >

        • Greater Than

    • ©

      • ©

        • COPYRIGHT

      • 版权

  • 文本标记

    • 文本样式

      • 斜体：
      • 粗体：
      • 删除线：
      • 下划线：
      • 上标：
      • 下标：

    • 标题元素

      • 标记

      • 表现形式

        • 改变字号（一级最大，六级最小）
        • 加粗显示
        • 上下有垂直的空白距离
        • 独立成行

    • 段落元素

      • 标记

      • 表现形式

        • 默认文字大小
        • 独立成行
        • 上下垂直空白

    • 换行元素

      • 标记

        • 
          

    • 分隔线元素

      • 标记

        • ---

      • 属性

        • 尺寸：size

          • 取值单位为 px（像素），可以省略

        • 宽度：width

          • 取值单位为px（像素）可以省略或百分比

        • 颜色：color

        • 水平对齐方式：align

          • left
          • center
          • right

    • 预格式化

      • 标记

      • 特点

        • 保留源文档中的 回车 和 空格

    • 分区元素

      • 块分区元素

        • 标记

        • 表现形式

          • 独立成行

        • 作用

          • 页面布局

      • 行内分区元素

        • 标记

        • 表现形式

          • 多个元素在一行内显示

        • 作用

          • 设置同一行文字内的不同格式

    • 行内元素与块级元素

      • 块级元素

        • 元素会独占一行，即元素前后都会自动换行
        • 主要用于网页布局

      • 行内元素

        • 不会换行，多个元素会在一行内显示
        • 包裹文本并处理样式

• 图像和链接

  • URL

    • 目录结构

      • 目录就是Web站点中文件夹的名称
      • Web站点的主目录，称为Web站点的根目录

    • URL

      • Uniform Resource Locator（统一资源定位器），用来标识网络中的任何资源

      • 三种表现形式

        • 绝对路径

          • 定义：从文件所在的最高级目录下开始查找资源文件所经过的路径

          • 网络资源

            • 协议名

              • http / https

            • 主机名（IP地址/域名）

              • www.baidu.com

            • 目录路径

              • img

            • 资源名称

              • bg_logo1.png

        • 相对路径

          • 定义：从当前文件位置处开始查找资源文件所经过的路径

          • 同目录，直接用

            • a.jpg

          • 子目录，先进入

            • img/a.jpg
            • img/index/a.jpg

          • 父目录，先返回

            • ../a.jpg
            • ../../a.jpg
            • ../img/a.jpg

        • 根相对路径

          • 定义：从Web站点所在的根目录处开始查找
          • 通过 / 表示根目录

  • 图像

    • 图像格式

      • JPEG
      • GIF
      • PNG

    • 图像元素

      • 标记：

      • 属性

        • src

          • 要显示的图像的路径（绝对/相对/根相对）

        • width

          • 图像宽度，如果width 和 height 只设置一个属性时，另外一个将等比缩放

        • height

          • 图像高度

  • 链接

    • 标记：内容

    • 属性

      • href

        • 链接URL

      • target

        • 含义：目标，打开新网页的形式

        • 取值

          • _blank

            • 在新标签页中打开

          • _self

            • 在自身页面中打开

          • ...

      • name

        • 定义页面锚点

    • 链接的表现形式

      • 目标文档为下载资源

      • 电子邮件链接

      • 返回页面顶部的空链接

      • 链接到JavaScript

    • 锚点

      • 定义：锚点就是文档中某行的一个记号，通常用于链接到这个记号位置处

      • 使用方式

        • 定义锚点

          • 通过 a 标记的 name 属性

            • 锚点

          • 任何元素使用 id 属性

        • 链接到锚点

Day02

• 表格

  • 表格的作用

    • 按照一定的结构来显示数据
    • 由单元格按照从左到右，从上到下的方式排列到一起
    • 数据都保存在单元格中
    • 表格可以显示数据，也可以设置页面的布局

  • 使用表格

    • 创建表格

      • 创建表格

      • 创建表行

      • 创建单元格

    • 属性

      • table

        • width :设置表格的宽度

        • height:设置表格的高度

        • align:设置表格的对齐方式

          • left
          • center
          • right

        • border:设置表格边框宽度

        • cellpadding:内边距（单元格边框与内容之间的距离）

        • cellspacing:外边距（单元格之间的距离）

        • bgcolor:设置表格的背景颜色

      • tr

        • align:该行内容水平对齐方式

        • valign:该行内容的垂直对齐方式

          • top
          • middle
          • bottom

      • td

        • align：内容水平对齐方式
        • valign：内容垂直对齐方式
        • width ：宽度
        • height ：高度
        • colspan:设置单元格跨列
        • rowspan:设置单元格跨行

    • 注意

      • 传统的表格，每行的列数都是统一化的（每行的列数都相同）
      • 一行中所有的单元格的高度都是相同的，默认下以最高的单元格为主
      • 每行中相同列的宽度都是相同的，默认以最宽的单元格为主

    • 表格标题

      • 注意：标签必须紧随在之后，并只能有一个

      • 表格的复杂应用

        • 行分组

          • 表头行分组：

      • 表主体行分组：

      • 注意：如果不显示指定行分组的话，那么默认都在tbody中

      • 表尾行分组：

      • 不规则表格

        • 跨列

          • 从指定单元格位置处，横向向右合并几个单元格
          • 被合并掉的单元格要删除
          • colspan=值;

        • 跨行

          • 从指定单元格位置处，纵向向下合并几个单元格
          • 被合并调的单元格要删除
          • rowspan=值;

      • 表格的嵌套

        • 表格是允许被嵌套的，但嵌套的表格必须要放在td中

      • 列表

        • 列表的作用

          • 列表是将一组具有相似特征或者具有先后顺序的内容按照从上到下的顺序排列在一起

          • 组成

            • 列表类型

              • 有序列表
              • 无序列表

            • 列表项

        • 使用列表

          • 有序列表

            • 特点：按照一定的顺序将列表项标识出来

            • 语法：

              • 只能包含列表项

            • 属性

              • type

                • 作用：有序列表的类型

                • 取值

                  • 1
                  • a
                  • A
                  • i
                  • I

              • start

                • 作用：起始编号
                • 取值：数字

          • 无序列表

            • 特点：用于列出页面上没有特定次序的一些内容

            • 语法：

              • 只能包含列表项

            • 属性

              • type

                • 作用：指定无序列表的列表项标识

                • 取值：

                  • disc，默认，实心圆
                  • circle，空心圆
                  • square，实心矩形
                  • none，不显示标识

          • 列表的嵌套

            • 列表中允许嵌套列表以形成更为复杂的结构
            • 但被嵌套的列表必须要放在
            中

        • 定义列表

          • 定义：定义列表往往用于要给出一类事物的定义的情形

          • 标记

            • 定义定义列表

            • 定义定义列表中的术语

            • 定义对属于的解释

          • 使用场合：图文混排时使用

      • 结构标记

        • 作用

          • HTML5所提供的结构标记，专门用于表示常见的网页结构（即布局）

        • 常见结构标记

          • header元素

            • 作用

              • 用于定义文档的页眉即页面顶部信息
              • 在页面上允许出现多次，可以作为任何部分的头部定义

            • 标记

          • nav元素

            • 作用

              • 用来定义页面的导航链接部分

            • 标记

          • section元素

            • 作用

              • 用于定义文档中的节，也可以表示文档中的一个具体的部分即主体内容

            • 标记

          • article元素

            • 作用

              • 用于定义独立于文档的其他部分内容
              • 如：论坛中的帖子，报纸的文章，博客条目或微博信息等

            • 标记

          • footer元素

            • 作用

              • 用于定义某区域的脚注信息
              • 一般靠近于某区域底部或页面底部内容

            • 标记

          • aside

            • 作用

              • 定义页面的额外组成部分
              • 一般多用于侧边栏和相关引用信息等

            • 标记

      • 表单

        • 表单概述

          • 表单的作用

            • 用于显示、收集信息，并提交信息到服务器

            • 两个基本部分

              • 实现数据交互的可视化界面元素（前端）

                • 表单控件元素

              • 提交后的表单处理（服务器端）

          • 表单元素(form)

            • 作用

              • 收集用户信息并提交给服务器
              • 里面包含与用户交互的表单控件元素
              • 注意：表单元素在页面是不可见的，但不能省略

            • 语法

              • 标记

              • 属性

                • action

                  • 作用

                    • 定义表单被提交时发生的动作，即要提交的服务器地址

                  • 取值

                    • 服务器端的处理程序地址，如*.jsp,.php,.do等
                    • 需要与服务器端开发人员沟通

                • method

                  • 作用

                    • 表单数据提交的方式

                  • 取值

                    • get

                      • 明文提交，提交的数据是可以显示在地址栏上的
                      • 安全性较低
                      • 大小限制为2KB
                      • 向服务器要数据时使用get提交方式

                    • post

                      • 隐式提交，所提交的数据是不显示在网页上的
                      • 安全性较高
                      • 无大小限制
                      • 将数据传递给服务器处理时使用

                    • ……

                • enctype

                  • 作用：指定表单数据的编码方式

                  • 取值

                    • application/x-www-form-urlencoded
                    • multipart/form-data
                    • text/plain

        • 元素

          • 用户收集用户信息并提供不同的输入字段

          • 语法

            • 标记

            • 主要属性

              • type

                • 根据不同的type属性值可以创建各种类型的输入字段

              • value

                • 最终提交给服务器的值

              • name

                • 控件的名称，提供给服务器使用

              • disabled

                • 禁用控件，该属性没有值
                • 只能看，不能改，并且不能提交给服务器

          • 表现形式

            • 文本框与密码框

              • 标记

                • 文本框

                • 密码框

              • 属性

                • name

                  • 名称

                • value

                  • 提交给服务器的值，可以是用户输入的数据

                • maxlength

                  • 限制输入的字符数

                • readonly

                  • 设置文本控件只读
                  • 允许提交给服务器

            • 单选按钮和复选框

              • 标记

                • 单选按钮

                • 复选框

              • 属性

                • name

                  • 设置名称，并用于分组，一组单选按钮或复选框我名称必须相同

                • value

                  • 控件的值

                • checked

                  • 设置默认被选中

            • 按钮

              • 标记

                • 提交按钮

                • 重置按钮

                • 普通按钮

                • 内容

              • 属性

                • name

                • value

                  • 按钮上的文本

            • 隐藏域和文件选择框

              • 标记

                • 隐藏域

                • 文件选择框

              • 属性

                • 隐藏域

                  • name
                  • value

                • 文件选择框

                  • name

              • 注意

                • 文件选择框

                  • form的method必须为post
                  • form的enctype必须为multipart/form-data

        • textarea 元素

          • 标记

          • 属性

            • name

              • 名称

            • cols

              • 指定文本区域的列数

            • rows

              • 指定文本区域的行数

            • readonly

              • 只读

        • select 和 option 元素

          • 选项框

            • 标记

            • 属性

              • name

                • 名称

              • size

                • 默认显示的选项数量，大于1，则为滚动列表

              • multiple

                • 设置多选，该属性没有值

          • 选项

            • 标记

            • 属性

              • value

                • 选项的值

              • selected

                • 预选中

        • 其他元素

          • label元素

            • 作用

              • 关联文本与表单控件
              • 关联后，点击文本如同点击表单控件

            • 语法

              • 标记

                • 文本

              • 属性

                • for

                  • 与该元素相联系的控件ID值

          • fieldset

            • 作用

              • 为控件分组

            • 标记

          • 浮动框架

            • 作用

              • 可以在一个浏览器窗口中同时显示多个页面文档

            • 语法

              • 标记

                • 内容

                • 注意

                  • 内容，可以为普通的文本描述，当浏览器不支持元素时，将显示该文本描述信息

              • 属性

                • src

                  • 浮动框架中的网页URL

                • width

                  • 宽度

                • height

                  • 高度

                • frameborder

                  • 浮动框架边框

        • 新表单元素

          • 新的input类型

            • 电子邮件：type="email"

            • 搜索类型：type="search"

            • URL类型：type="url"

            • 电话号码类型：type="tel"

            • 数字类型：type="number"

              • min
              • max
              • step

            • 范围类型：type="range"

              • min
              • max
              • value
              • step

            • 颜色类型：type="color"

            • 日期类型：type="date"

            • 周类型：type="week"

            • 月份类型：type="month"

      03_JAVASCRIPT

      JSBasicDay1

      • JS基础语法

        • 内核

          • 内容排版引擎

            • 解释HTML 和 CSS

          • 脚本解释引擎

            • 解释JS

        • JS运行环境

          • 独立安装JS解释器(NodeJS)

          • 浏览器内核中的JS引擎

            • html元素事件

              • onmouseover
              • onmousemove
              • onload
              • on....

        JS脚本

          	- 外部脚本文件
        
          		- 创建脚本文件(*.js) ， 编写脚本
          		- 引入脚本文件 <script src="JS文件路径"></script>
        

        • 调试

          • 解释型：运行之前不会编译，运行过程中碰到问题 特殊处理
          • 若某行代码出现问题的话，则终止本块代码执行，但不会影响后续代码块的执行

        • 语法规范

          • 代码组成

            • 语句

              • 由 ; 结尾
              • 由表达式、关键字、运算符 组成

            • 注释

              • /**/ 多行
              • // 单行

          • 严格区分大小写

            • var num = 15; var NUM = 15;

      • 变量和常量

        • 变量

          • 什么是变量

            • 变量：内存中的一段存储空间
            • 变量名：内存地址的别名
            • 值 ：保存变量(内存空间)中的数据

          • 变量的声明

            • 声明

              • var 变量名;

            • 赋值

              • 变量名=值;

            • 声明并赋值

              • var 变量名=值;

            • 声明多变量

              • var 变量1,变量2=值,变量3;

            • 注意

              • 声明变量可以不加 var 关键字，则为全局

              • 声明变量不赋值，值为 undefined

                • var num;

              • 直接使用未声明的变量，则报错

          • 命名规范

            • 不允许使用JS关键字和保留关键字

              • 关键字

                • var
                • const
                • for
                • if
                • ... ...

              • 保留关键字

                • class
                • int
                • double
                • float
                • ... ...

            • 规范

              • 可以包含 字母、数字、下划线以及 $

              • 不能以数字开头

              • 不要重复

              • 不能是JS中的关键字和保留关键字

              • 尽量见名知意

              • 匈牙利命名法，下划线命名法，驼峰命名法

                • 大驼峰

                  • UserName

                • 小驼峰

                  • user
                  • userName

          • 变量的使用方式

            • 未经初始化的变量

              • 声明后未赋值

                • 值为 undefined

              • 直接使用未声明过的变量

                • 报错

            • 变量存取

              • 存-SET操作

                • 只要变量出现在赋值符号的左边，一律是赋值操作

                  • 变量=值;

              • 取-GET操作

                • console.log(userName);
                • document.write(userName);
                • var newName = userName;
                • var num = 20; num = num + 10; console.log(num);//30
                • 只要变量不是出现在赋值符号(=)的左边，一律是取值

        • 常量

          • 什么是常量

            • 在程序中，一旦声明好，就不允许被改变的数据
            • 目的：为了保证数据的安全性

          • 语法

            • const 常量名=值；
            • 常量名 全 大写

          • 修改常量值：

            • 报错
            • 也有可能不报错，但是值不变

      JSBasicDay02

      • 数据类型

        • 什么是数据类型

          • 保存在内存中的数据的类型
          • 为了解决数据所占空间大小问题

        • 数据类型的分类

          • 基本(原始)数据类型

            • number类型

              • 数字类型

              • 表示 32位 整数 或 64位小数

              • 整数

                • 十进制：var num=768；
                • 八进制：var num=0762;
                • 十六进制：var num=0x123F;

              • 小数

                • var num=123.456；
                • var num=123.5e41

            • string类型

              • 字符串，表示一系列文本字符数据

              • 由 Unicode 的字符、数字、标点来组成

              • 汉字范围：\u4e00 ~ \u9fa5

              • 使用过程中 必须用 ' ' 或 " " 引起来：var str = “15”;

              • 转义字符

                • \n:换行
                • \t:制表符
                • \:\
                • ":"
                • ':'

            • boolean 类型

              • 布尔类型 ，表示问题的结果
              • 仅有两个值：true和false
              • var result = true; var result = false;
              • +-*/运算时。true ：1，false：0

            • undefined

              • 声明变量未赋值
              • 对象属性不存在

            • null

          • 引用数据类型

      • 数据类型转换

        • 隐式转换

          • typeof(变量) 或 typeof 变量
          • 数字 + 字符串 ： 数字转换为字符串
          • 数字 + 布尔 ： 布尔转换为数字
          • 字符串 + 布尔 ： 布尔转换为字符串
          • 布尔 + 布尔 ： 都会转换为 数字

        • 转换函数

          • toString()

            • 变量.toString()

          • parseInt()

            • var 变量=parseInt(数值)

            • 碰到第一个非数字字符停止转换

              • parseInt("35.a") : 结果：35

            • 如果第一个字符就是非数字字符，那么结果为 NaN

              • parseInt("a35") : 结果：NaN

          • parseFloat()

            • 将数据转换成小数

              • parseFloat(".35") 结果 ： 0.35

            • var 变量=parseFloat(数值);

          • Number()

            • 将一个string解析为一个number
            • 如果包含非法字符，则返回NaN
            • Number("35a16"):结果为：NaN

          • 四舍五入

            • toFixed(保留位数)
            • var 变量=数值.toFixed(2);

      • 运算符和表达式

        • 算术运算符

          • +，-，*，/，%

          • ++

            • 自增，增量为1

            • i++

              • 先使用i的值，再自增

            • ++i

              • 先自增，再使用i的值

          ---

            - 自减，减量为1
            - i--
            - --i
          

        • 关系运算符

          • ,<,>=,<=,==,!=,===,!==

          • == : 判断等于，两个操作数相等，结果为 true ， 否则为false
          • != : 不等于，两个操作数不等时，结果为true，否则为false
          • === : 全等， 除了判断数值之外，还可以判断数据类型，必须全部一致，才返回true

        • 逻辑运算符

          • 逻辑非 : !

            • 取反
            • 非真即假，非假即真

          • 逻辑与 : &&

            • 两个条件同时为真的时候，该表达式整体结果为真
            • 两个条件中，有一个为假，整个表达式结果就为假

          • 逻辑或 : ||

            • 两个条件中有一个为真，整体结果就为真

          • 短路逻辑

            • &&

              • 如果第一个表达式计算为假， 第二个表达式就不会再运算， 并且将第一个表达式的值， 作为整体表达式的值
              • 如果第一个表达式为真， 则继续判断第二个表达式， 以第二个表达式的结果作为整个表达式的结果

            • ||

              • 如果第一个表达式为真， 就将第一个表达式的值作为整体表达式的值， 第二个表达式就不会再判断

      JSBasicDay03

      • 运算符和表达式

        • 位运算

          • 按位与 ： &

            • 将两个操作数转换成二进制，每位上的数字进行匹配，如果都为1，则该位结果为1
            • 可以通过 & 1 判断一个数字的奇偶性

          • 按位或 : |

            • 对应的二进制位上，只要有一位为1的时候，该位的结果才为1

          • 按位异或 :^

            • 对应的二进制位上，只有一个1的时候， 该位的结果才为1，否则为0
            • 使用场合：不借助第三方变量交换两个数字 var i = 5,j=10; i = i^j; j = j^i; i = i^j;

          • 右移 ： >>

            • 将二进制位数字，向右移动指定位数 数值将变小

          • 左移 ： <<

            • 将二进制位数字，向左移动指定位数 数值将变大

        • 条件运算符（三目）

          • 语法：表达式1?表达式2:表达式3;
          • 表达式1应该是一个 boolean 类型的数值
          • 表达式1的值为true，则执行表达式2的操作，并将表达式2的值，作为整个表达式的值
          • 表达式1的值为false，则执行表达式3的操作，并将表达式3的值，作为整个表达式的值

        • 赋值 和 扩展赋值运算符

          • =
          • +=，-=， ... ... ，^= ……

      • 函数

        • 什么是函数

          • 函数:function 方法:method 过程:procedure

          • 是一段预定义好， 并可以反复执行的代码块

            • 预定义：预先声明好，不是马上调用
            • 反复执行：可以被多次调用
            • 代码块：多行代码
            • 函数本质也是一个功能完整的对象

        • 语法

          • 普通函数（无参，无返回）

            • function 函数名(){ 代码块 函数体 功能体 }
            • 调用：任意JS位置处可以通过 函数名();

          • 有参函数

            • 参数：需要传递到函数内部做运算的数据

            • function 函数名(参数列表){ 函数体 }

              • 参数列表：由0个或多个参数名称组成 多个参数之间，用 , 隔开
              • 定义函数时定义的参数 称之为 “形参”

            • 调用

              • 函数名(参数列表);
              • 调用时所传递的参数 称之 “实参”

          • 有返回值的函数

            • 返回值：函数运行完成后，需要带给调用者的一个数据

            • function 函数名(参数列表){ 函数体 return 数据; }

              • return : 返回，会将指定的数据带给方法调用者 return 之后的代码就不会被执行，意味着结束了函数调用

            • 调用

              • 可以 接收返回值

                • var 变量 = 有返回值得函数();
                • parseInt()
                • parseFloat()
                • Number()
                • encodeURI()
                • toString()

          • 其他调用方式

            • 可以在函数内调用其他函数

        • 作用域

          • 作用域：变量或函数的可访问范围

            • 函数作用域 - 局部变量（函数）
            • 全局作用域 - 全局变量（函数）

          • 变量作用域

            • 局部变量：将变量声明在某个函数中，该变量只有在该函数中有效
            • 全局变量：将变量声明在独立于任何function的位置， 或在 function 内， 声明不加 var
            • 局部变量与全局变量冲突时，以局部变量为准

          • 函数作用域

            • 局部函数：将函数定义在某函数内

            • 全局函数 ： 独立于任何function的位置处

            • ECMAScript提供的全局函数

              • parseFloat

              • parseInt

              • Number

              • encodeURI(url)

              • decodeURI(url)

              • eval()

                • 计算并执行以字符串表示的JS代码

          • 声明提前

            • JS程序在正式执行前，会将所有var声明的变量和function 预读到作用域的顶部
            • function test(){ console.log(a); //undefined var a = "Hello"; }
            • 建议：最好将所用的变量都声明在所在的作用域的顶端

          • 按值传递

            • 基本数据类型，参数传递时，实际上是将变量的值进行复制， 得到副本，并将副本传递给函数
            • 函数的参数，也是局部变量
            • function change(a,b){ a = 250; b = 520; }

      function test(){ var a = 0; var b = 1; change(a,b); console.log(a,b); //打印 a，b =》0,1 }

      - 递归调用
      
      	- 什么是递归
      
      		- 一个函数在其定义中，直接或间接调用自身的一种算法
      
      	- 递归的实现
      
      		- 边界条件
      		- 递归前进
      		- 递归返回
      

      JSBasic Day04

      • 分支(选择)结构

        • if

          • if(条件){ 语句块 }

            • 条件尽量是boolean

              • 以下条件会当false看

                • if(0)
                • if(0.0)
                • if(undefined)
                • if(null)
                • if(NaN)
                • if("")

            • 可以省略{ }，如果省略的话只控制if 下的第一条语句

          • if(条件){ 语句块 }else{ 语句块 }

          • if(条件){ 语句块1 }else if(条件){ 语句块2 }... ... else{ 语句块 }

        • switch

          • switch(变量){ case 常量1: 语句块1; break; ... ... default : 语句块n； }

      • 循环结构

        • 重要要素

          • 循环条件
          • 循环操作

        • while循环

          • while(条件){ 循环操作 }

        • 流程控制语句

          • break

            • 结束整个循环的执行

          • continue

            • 结束本次循环，继续执行下次循环

      JS Basic Day05

      • 循环结构

        • do ... while 循环

          • do{ 循环操作 }while(条件);

          • 特点：

            • 先执行循环体，再判断循环条件

        • for 循环

          • for(表达式1;表达式2;表达式3){ 循环操作 }

            • 表达式1：循环条件的声明
            • 表达式2：循环条件的判断
            • 表达式3：更新循环条件

          • 场合

            • 在确定循环次数的条件下使用

          • 三个表达式的特殊用法

            • 可以省略任意一个表达式，但不推荐
            • 表达式1 和 表达式3 均可以写多个表达式，中间用 , 隔开

        • 嵌套循环

      • 数组

        • 什么是数组

          • 可以保存多个数据的变量 - 一组数据

          • 元素按线性顺序排列

            • 除第一个元素外，每个元素都有一个前驱元素
            • 除最后一个元素外，每个元素都有一个后继元素

          • 数组是通过下标来访问每个元素的（从 0 开始，到数组长度（length） - 1 结束）

        • 数组的定义

          • var arr = []；
          • var arr = [元素1，元素2，元素3]；
          • var arr = new Array();
          • var arr = new Array(元素1，元素2，元素3);

        • 引用类型

          • 数组是引用类型的对象

            • 引用类型是将具体的数据保存在堆中，并且在栈中引用堆中的地址

          • 特点

            • 将数组赋值给变量的时候，实际上赋的是地址

            • 数组作为参数的时候，实际上传递的是地址的副本

              • var arr = [1,2,3]; function change(arr){ arr[0] = 100; } change(arr); console.log(arr[0]); //100
              • var arr = [1,2,3]; function change(arr){ arr = new Array(100,200,300); } change(arr); console.log(arr[0]);//1

            • null(基本数据类型)

              • 表示不再指向任何地址

        • 访问数组元素

          • 使用下标访问数组元素

          • length属性

            • 通过length属性获取数组的长度
            • arr.length

      JSBasicDay06

      • 数组

        • 访问数组

          • 使用for...in遍历数组

            • for(var 变量 in 数组){ }

          • 关联数组

            • 使用字符串作为下标

        • 数组的常用操作函数

          • toString()

            • 将数组转换为字符串

              • 以 , 拼接而成的

          • join()

            • 使用指定的分隔符将数组元素拼接起来

          • concat()

            • 拼接两个或更多的数组，并返回拼接后的结果
            • arr.concat(arr1,arr2,...,arrn)
            • 该函数不会改变现有数组，仅仅返回拼接后的副本

          • slice()

            • 获取指定数组的中的子数组

            • arr.slice(start,[end])

              • start : 从哪个下标处开始提取；若取值为负数，则表示从尾部开始算起
              • end：指定结束处的下标（不包含），可以省略或负值
              • arr.slice(0,5)

          • splice()

            • 从数组中删除一部分元素，并添加另一部分元素

            • arr.splice(start,count,e1,e2,... ...)

              • start:指定添加\删除的起始位置，可取负值
              • count:要删除的元素的个数，0表示不删除
              • e1,e2:表示要添加的新元素

          • reverse()

            • 倒转数组

          • sort()

            • 默认对数组中的元素按Unicode升序排序

            • 可以自定义排序函数

              • function sortAsc(a,b){ return a-b; }

              • function sortDesc(a,b){ return b-a; }

              • arr.sort(sortAsc); / arr.sort(sortDesc);

              • 匿名函数

                • arr.sort( function(a,b){return a-b;} );
                • arr.sort( function(a,b){return b-a;} );

          • 进出栈操作

            • push()

              • 入栈，在栈顶(数组尾部)添加指定元素

            • pop()

              • 出栈，删除并返回栈顶的元素

            • unshift()

              • 在数组头部添加新的元素

            • shift()

              • 删除数组头部的元素并返回

      04_AJAX

      AJAXDay01

      • HTTP协议

        • 请求(Request)消息

          • 请求起始行

            • 请求方法

              • GET

                • 表示客户端想获取服务器上的资源(img/js/html/css/video)

                  • 无请求主体
                  • 靠地址栏传递数据给服务器

              • POST

                • 表示客户端想传递数据给服务器

                  • 请求主体

              • PUT

                • 表示客户端想(放置文件)到服务器(禁用)

                  • 请求主体

              • DELETE

                • 表示客户端想删除服务器上的指定文件(禁用)

              • HEAD

                • 表示客户端只想获取指定的响应头

              • CONNECT

                • 测试连接

              • TRACE

                • 追踪请示路径

              • OPTIONS

                • 选项，保留以后使用

            • 请求URL

            • 协议版本

              • HTTP/1.1

          • 请求头

            • Host ：127.0.0.1

              • 告诉服务器请求哪一个虚拟主机

            • Connection:keep-alive

              • 告诉服务器要持久连接

            • User-Agent ：

              • 告诉服务器自己的类型

            • Accept-Language ：zh-CN

              • 告诉服务器自己能接收的自然语言
              • zh-CN : 简体中文

            • Accept-Encoding ：gzip

              • 告诉服务器自己可以接收的压缩类型

            • Referer:http://127.0.0.1/05-PROJECT01/01-post.html

              • 告诉服务器请求来自于哪个页面

          • 请求主体

            • Form Data

        • 响应(Response)消息

          • 响应起始行

            • 协议版本号

            • 响应状态码

              • 1xx ：100-199

                • 提示信息

              • 2xx

                • 成功响应

                  • 200 ：OK

              • 3xx

                • 需要客户端进行重定向

                  • 301 ：永久性重定向
                  • 302 ： 临时重定向
                  • 304 ： Not Modified

              • 4xx

                • 客户端请求错误

                  • 404 ：Not Found
                  • 403 ： Forbidden
                  • 405 ： Method Not Allowed 请求方法不被允许

              • 5xx

                • 服务器运行错误

                  • 500 ：服务器内部错误
                  • 501 ： 没有实现

            • 原因短句

              • 对响应状态码的简单解释

          • 响应头

            • Server

              • 告诉客户端服务器的信息

            • Last-Modified

              • 告诉客户端网页最后一次修改的时间

            • Content-Encoding

              • 告诉客户端内容压缩方式

            • Connect

              • 告诉浏览器启动持久连接

            • Content-Type

              • 响应主体类型，告诉浏览器，响应数据的类型是什么

                • text/plain

                  • 纯文本

                • text/html

                  • 文本与网页

                • text/css

                  • 样式

                • application/javascript

                  • js 代码片段

                • application/xml

                  • xml格式的数据

                • application/json

                  • json格式的数据

                • images/jpeg

                  • 图片

          • 响应主体

            • Response

      • 缓存

        • 原理

          • 客户端可以自动保存已访问过的文档的副本，当客户端再次向同一URL发送请求时，那么就直接从缓存中将文件取出来，而不再重新发送请求

        • 优点

          • 减少了冗余的数据传输，节省流量
          • 缓解服务器带宽瓶颈的问题，服务器可以节省更多的带宽
          • 降低了对服务器的资源消耗和运行的要求
          • 降低了由于远距离而造成的延迟加载

        • 与缓存相关的消息头

          • Cache-Control

            • 指定网页处于新鲜的秒数

            • 取值

              • 具体数值
              • no-cache

          • Expires

            • 明确指定过期时间

            • 取值

              • 标准的格林尼治时间
              • 0

      • DOM

        • 根据ID获取页面的元素

          • document.getElementById(id);
          • function $(id){ return document.getElementById(id); }

        • 获取/设置 标记内容（html代码段）

          • elem.innerHTML = value
          • console.log(elem.innerHTML);

        • 获取/设置 表单控件的值

          • elem.value = value
          • console.log(elem.value);

        • 事件

          • 文本框 与 密码框

            • onblur

              • 失去焦点时激发的操作

            • onfocus

              • 获取焦点时激发的操作

          • body

            • onload

      Ajax Day02

      • AJAX

        • 名词解释

          • 同步

            • 一段时间内，只能做一个事情

            • 同步访问

              • 在访问服务器时，客户端只能等待服务器的响应，不能做其他事情

          • 异步

            • 在一段时间内，可以同时干多个事情

            • 异步访问

              • 在向服务器发送请求时，不耽误用户在网页上做其他的操作

        • 什么是AJAX

          • Asynchronous Javascript And Xml（异步的Javascript 和 XML）
          • 本质：使用JS提供的 XMLHttpRequest对象异步的向服务器发送请求并接收响应数据。 AJAX中，服务器响应回来的是部分的数据而不是完整的页面，并且可以以无刷新的效果来更改页面中的局部内容

        • 获取 XMLHttpRequest

          • new XMLHttpRequest()
          • new ActiveXObject("Microsoft.XMLHttp");

        • XHR的属性 和 方法

          • open()

            • 创建请求

            • xhr.open(method,url,isAsyn);

              • method

                • get
                • post
                • ...

              • url

              • isAsyn

                • true : 异步
                • false: 同步

          • readyState

            • 表示 xhr 的请求状态

            • 值

              • 0 ：请求尚未初始化
              • 1 ：已打开连接，正发送请求
              • 2 ：请求完成
              • 3 ：正在接收服务器的响应
              • 4 ：接收响应成功

          • status

            • 服务器的响应状态码
            • 200

          • onreadystatechange

            • 当 xhr 的readyState 发生改变时要自动激发的操作

          • responseText

            • 服务器端响应回来的数据(字符串)

          • send(body)

            • 发送请求

            • body ：请求主体

              • get提交方式此处为 null
              • post提交方式则为请求的数据

      AJAX Day03

      • 使用AJAX发送POST请求

        • 请求数据要放在send()中

          • 使用get提交方式，如果将请求数据放在send()中是否有效？？？

        • 设置请求消息头

          • xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

      • JSON

        • 什么是JSON

          • JavaScript Object Notation（JS 对象表现方式）
          • 用于做前后端数据交互的格式约束

        • JSON

          • 对象

            • ‘{“name”:"value","name1":"value1"}’

          • 数组

            • 普通数组

              • '["value1","value2"]'

            • 对象数组

              • '[ { "name1":"value1", "name2":"value2" }, { "name1":"value1", "name2":"value2" } ]'

        • JSON字符串转换为JS对象/数组

          • var obj = eval("("+jsonStr+")");
          • var obj = JSON.parse(jsonStr);

        • PHP中将数组转换为 JSON字符串

          • $jsonStr = json_encode($array);