一个后端程序员要知道的前端知识

一、HTML
二、CSS
三、JavaScript

一、HTML

HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

1、基础语法

1.1、标签

HTML是使用<和>括起来的指令标志，用于向浏览器发送标记指令。

主要分为：单标签和双标签

1.1.1、单标签

单标签，不设属性值。例如：

<br\>、<hr\>

1.1.2、单标签属性

单标签设置属性值，例如：

<hr width="500px" />

1.1.3、双标签

双标签，不舍属性值，例如：

<title>Html</title>

1.1.4、双标签属性

双标签，设置属性，例如：

<a href="https://www.yanghuisen.cn/">超文本标签</a>

1.2、整体结构

<!DOCTYPE html>
<html lang="en">
<!--头部信息-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--网页内容-->
</body>
</html>

<!DOCTYPE html>：声明网页是HTML网页
<html lang=“en”>：网页语言信息
<head>：网页头部信息
- <meta charset=“UTF-8”>：声明网页时UTF-8编码格式
- <title>Title</title>：网页标题
<body>：网页内容

1.3、body的属性

1.3.1、bgcolor

设置body的背景颜色

<body bgcolor="#7fffd4">

可以设置颜色的英文：bgcolor="red"
可以设置颜色的十六进制：bgcolor="#7fffd4

1.3.2、background

设置body的背景图片

 <body background="https://dss1.bdstatic.com/kvoZeXSm1A5BphGlnYG/skin_zoom/124.jpg?2">

图片可以时网络上的图片，可以是本地的图片

2、常用标签

2.1、P

段落标签。p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。

<p>Hello Html5</p>

属性	值	描述
align	left、right、center、justify	不赞成使用。请使用样式取代它。规定段落中文本的对齐方式。

2.2、br

换行标签。可插入一个简单的换行符。

<br>

2.3、hr

水平线标签

<hr> 标签在 HTML 页面中创建一条水平线。水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。

<hr/>

属性	值	描述
align	center、left、right	规定 hr 元素的对齐方式。不赞成使用。请使用样式取代它。
size	pixels	规定 hr 元素的高度（厚度）。不赞成使用。请使用样式取代它。
width	pixels%	规定 hr 元素的宽度。不赞成使用。请使用样式取代它。

2.4、列表

列表又分为有序列表和无序列表

2.4.1、ul

<ul> 标签定义无序列表。

<ul type="circle">
    <li>列表1</li>
    <li>列表3</li>
    <li>列表2</li>
</ul>

属性	值	描述
type	disc、square、circle	规定列表的项目符号的类型。请使用样式取代它。

2.4.2、ol

<ol> 标签定义有序列表。

<ol type="A">
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
</ol>

属性	值	描述
type	1 A a I i	规定在列表中使用的标记类型。

2.5、DIV

块

<div>
    我是一个DIV
</div>

属性	值	描述
align	left、right、center	规定div元素中的内容的对齐方式，以后可以用样式取代它

2.6、span

<span> 标签被用来组合文档中的行内元素。

<span>啊哈哈</span>

2.7、font

规定文本的字体、字体尺寸、字体颜色

2.8、 pre

定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体

2.9、文本标签

**<b>**（粗文本）、**<i>**（斜体文本）、**<u>**（下划线文本）、

< del >（中划线文本）、（下标文本）、（上标文本）

2.10、a

标签定义超链接，用于从一张页面链接到另一张页面。

属性	值	描述
href	URL	规定链接指向的页面的 URL。
target	_blank _parent self top Framename作为锚点的a标签的name值	规定在何处打开链接文档。 _blank：开启新页面显示页面； _self：当前页面显示跳转到页面，默认值。 _top：用于有frameset布局的页面，想要覆盖整个页面显示。 Framename：这里framename与上边的值不同，具体以为frame起了什么样的名字为准，该值指示要连接的页面跳转后将在相应名称的框架中显示。

锚点的实现

利用a标签的name属性：

<a name="top"></a>

一般标签的id属性：div id=""、a id="" 等：

<div id="top"></div>、<a id="top"></a>

锚点定位

<a href="#top">返回首部</a>

2.11、img

img 元素向网页中嵌入一幅图像。

<img src="https://dss1.bdstatic.com/kvoZeXSm1A5BphGlnYG/skin_zoom/125.jpg" alt="图片无法加载" width="500px"  height="300px" border="1px" title="我是一张图片">

必须属性

属性	值	描述
alt	text	规定图像的替代文本。
src	URL	规定显示图像的 URL。

属性	值	描述
align	topbottommiddleleftright	不推荐使用。规定如何根据周围的文本来排列图像。
border	pixels	不推荐使用。定义图像周围的边框。
height	pixels%	定义图像的高度。
hspace	pixels	不推荐使用。定义图像左侧和右侧的空白。
ismap	URL	将图像定义为服务器端图像映射。
longdesc	URL	指向包含长的图像描述文档的 URL。
usemap	URL	将图像定义为客户器端图像映射。
vspace	pixels	不推荐使用。定义图像顶部和底部的空白。
width	pixels%	设置图像的宽度。

2.12、table

<table> 标签定义 HTML 表格。

<table align="center" border="1px" bordercolor="#ccc" style="border-collapse: collapse" width="800px" height="500px">
    <tr>
        <!--colspan：跨行-->
        <th colspan="6">课程表</th>
    </tr>
    <tr>
        <th></th>
        <th>周一</th>
        <th>周二</th>
        <th>周三</th>
        <th>周四</th>
        <th>周五</th>
    </tr>
    <tr>
        <!--rowspan:跨列-->
        <td rowspan="4">上午</td>
        <td>Java</td>
        <td>Java</td>
        <td>Java</td>
        <td>Java</td>
        <td>Java</td>
    </tr>
    <tr>
        <td>Oracle数据库</td>
        <td>Oracle数据库</td>
        <td>Oracle数据库</td>
        <td>Oracle数据库</td>
        <td>Oracle数据库</td>
    </tr>
    <tr>
        <td>Html5</td>
        <td>Html5</td>
        <td>Html5</td>
        <td>Html5</td>
        <td>Html5</td>
    </tr>
    <tr>
        <td>JavaScript</td>
        <td>JavaScript</td>
        <td>JavaScript</td>
        <td>JavaScript</td>
        <td>JavaScript</td>
    </tr>
    <tr>
        <td rowspan="2">下午</td>
        <td>Linux</td>
        <td>Linux</td>
        <td>Linux</td>
        <td>Linux</td>
        <td>Linux</td>
    </tr>
    <tr>
        <td>Python</td>
        <td>Python</td>
        <td>Python</td>
        <td>Python</td>
        <td>Python</td>
    </tr>
</table>

属性	值	描述
align	leftcenterright	不赞成使用。请使用样式代替。规定表格相对周围元素的对齐方式。
bgcolor	rgb(x,x,x)#xxxxxxcolorname	不赞成使用。请使用样式代替。规定表格的背景颜色。
border	pixels	规定表格边框的宽度。
cellpadding	pixels%	规定单元边沿与其内容之间的空白。
cellspacing	pixels%	规定单元格之间的空白。
frame	voidabovebelowhsideslhsrhsvsidesboxborder	规定外侧边框的哪个部分是可见的。
rules	nonegroupsrowscolsall	规定内侧边框的哪个部分是可见的。
summary	text	规定表格的摘要。
width	%pixels	规定表格的宽度。

2.13、form

<form> 标签用于为用户输入创建 HTML 表单。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。还可以包含 textarea等元素。

表单用于向服务器传输数据。form 元素是块级元素，其前后会产生折行。

常用属性

属性	值	描述
action	URL	规定当提交表单时向何处发送表单数据
method	get、post	规定用于发送 form-data 的 HTTP 方法
name	Form_name	规定表单的名称
target	_blank _self _ parent _top framename	规定在何处打开 action URL

method：表单提交方式：get、post

get：默认，主动的获取方式，数据放在url上，数据的容量有限，安全性差，有缓存

post：数据放在请求实体中，数据量理论上没有限制，相对安全，没有缓存

2.13.1、input

<input> 标签用于搜集用户信息。

根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、单选按钮、按钮等等。

常用属性

属性	值	描述
alt	text	定义图像输入的替代文本。
checked	checked	规定此 input 元素首次加载时应当被选中。
disabled	disabled	当 input 元素加载时禁用此元素。
readonly	readonly	规定输入字段为只读。
maxlength	number	规定输入字段中的字符的最大长度。
value	value	规定 input 元素的值。
type	button checkbox file hidden image password radio reset submit text	规定 input 元素的类型。按钮复选框文件隐藏域图像形按钮密码单选框重置按钮提交按钮文本

若上传文件，请求方式为post，且表单添加一个属性:enctype="multipart/form-data"

注意：

1. 没有name属性的属性是无法提交到后台的！！！！

2. Radio单选按钮以name相同为一组。

3. Checkbox复选按钮以name相同为一组。

2.13.2、textarea

该标签定义多行的文本输入控件。文本区中可容纳无限数量的文本，可以通过 cols 和 rows 属性来规定 textarea 的尺寸。cols规定文本区内的可见宽度。rows规定文本区内的可见行数。

<textarea>content</textarea>

2.13.3、label

标签为input 元素定义标注（标记）。

label元素不会呈现任何的特殊效果。

label标签的for属性应当与相关元素的id属性相同，此时点击label标签会自动为元素聚焦

<label for="username">用户名：</label>
<input type="text" id="username" name="username"/>

2.13.4、button

<button>按钮</button>

常用属性

属性	值	描述
disabled	disabled	禁用该按钮。
type	button、submit、reset	规定按钮的类型。
value	text	规定按钮的初始值。
name	button_name	规定按钮的名称。

2.13.5、select

用于定义下拉列表

<select name="color" >
	<option value="red">红色</option>
	<option value="green">绿色</option>
	<option value="blue">蓝色</option>
</select>

select常用属性

属性	值	描述
disabled	disabled	禁用该下拉框。
multiple	multiple	规定可选择多个选项。
name	name	规定下拉列表的名称。
size	number	规定下拉列表中可见选项的数目。

option常用属性

属性	值	描述
disabled	disabled	禁用该下拉框。
selected	selected	规定选项（在首次显示在列表中时）表现为选中状态。
value	text	定义送往服务器的选项值。

2.14、常用字符实体

在 HTML 中，某些字符是预留的。

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。

实体名称对大小写敏感！

标签的分类

HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。

块级元素

元素都从新的一行开始，并且其后的元素也另起一行；元素的高度、宽度、行高以及顶和底边距都可设置；元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

行内元素

和其他元素都在一行上；元素的高度、宽度及顶部和底部边距不可设置；元素的宽度就是它包含的文字或图片的宽度，不可改变。

行内块状元素

和其他元素都在一行上；元素的高度、宽度、行高以及顶和底边距都可设置。

二、CSS

CSS（英文全称：Cascading Style Sheets）层叠样式表, 是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

CSS是用来美化网页用的，没有网页则CSS毫无用处，所以CSS需要依赖HTML展示其功能。

1、CSS的基本使用

1.1、 CSS基本语法

CSS 样式由选择器和一条或多条以分号隔开的样式声明组成。每条声明的样式包含着一个 CSS属性和属性值。

选择器名 {
    
    
	属性 : 属性值;
	......
}

div {
    
    
	background-color : red;
}

注意：

css声明要以分号;结束，声明以**{}**括起来
建议一行书写一个属性
若值为若干单词，则要给值加引号，如 font-family: “agency fb”;

1.2、注释

多行注释：

/* 这里的内容就是注释 */

1.3、CSS的使用

1. 行内式

行内样式将样式定义在具体html元素的style属性中。以行内式写的CSS耦合度高，只适用于当前元素，在设定某个元素的样式时比较常用。

<p style="color:red;font-size:50px;">这是一段文本</p>

在当前元素使用 style 属性的声明方式。

style 是行内样式属性；

color 是颜色属性；red 是颜色属性值；

font-size是字体大小属性；50px 是字体大小属性值

2. 嵌入式

嵌入式通过在html页面内容开辟一段属于css的代码区域，通常做法为在< head>标签中嵌套

<style type="text/css">p {
    
    color: blue;font-size: 40px;}</style>

3. 引入外联样式文件

在实际开发当中，很多时候都使用引入外联样式文件，这种形式可以使html页面更加清晰，而且可以达到更好的重用效果。

style.css

p {
    
    color: green;font-size: 30px;}

test.html

<link rel="stylesheet" type="text/css" href="style.css">

rel:rel 属性规定当前文档与被链接文档之间的关系。

stylesheet:文档的外部样式表。

很多时候，大量的 HTML 页面使用了同一个CSS。那么就可以将这些 CSS 样式保存在一个单独的.css 文件中，然后通过元素去引入它。

注意：当有多重样式时，记住前提规则，越精确越优先。

2、CSS选择器

在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。

CSS选择器有很多，掌握常用的即可；

2.1、基本选择器

通用选择器

选择所有 *

* {
    
    
    ......
}

* {
    
    
	color: orange;
}

元素选择器

选择指定标签

元素名称 {
    
    
    ......
}

p {
    
    
	color: red;
	font-size: 20px;
}

ID选择器

选择设置过指定id属性值的元素 #

#id属性值 {
    
    
    ......
}

#p1 {
    
    
	font-weight: bold;
}

类选择器

选择设置过指定class属性值的元素 .

.class属性值 {
    
    
    ......
}

.hidden {
    
    
	display: none;
}

分组选择器

当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔

选择器1,选择器2,... {
    
    
    ......
}

h2 , #pre1 {
    
    
	color: orange;
	font-style: italic;
}

CSS样式的优先级，是根据选择器的精确度/权重来决定的，常见的权重如下，权重越大，优先级越高

元素选择器：1

类选择器：10

id选择器：100

内联样式：1000

2.2、组合选择器

CSS组合选择器说明了两个选择器直接的关系。 CSS组合选择符包括各种简单选择符的组合方式。

在 CSS 中包含了四种组合方式: 后代选取器(以空格分隔)，子元素选择器(以大于号分隔），相邻兄弟选择器（以加号分隔），普通兄弟选择器（以波浪线分隔）。

后代选择器（派生选择器）

用于选择指定标签元素下的后辈元素，以空格分隔

选择器1 选择器2 {
    
    
    ......
}

.food  li {
    
    
	border: 1px solid red;
}

<h1>食物</h1>
<ul class="food">
    <li>水果
        <ul>
            <li>香蕉</li>
            <li>苹果</li>
            <li>梨</li>
        </ul>
    </li>
    <li>蔬菜
        <ul>
            <li>白菜</li>
            <li>油菜</li>
            <li>卷心菜</li>
        </ul>
    </li>
</ul>

子元素选择器

用于选择指定标签元素的所有第一代子元素，以大于号分隔

选择器1 + 选择器2 {
    
    
    ......
}

#d + div {
    
    
	border: 1px solid red;
}

html代码同上

相邻兄弟选择器

可选择紧接在另一元素后的元素，且二者有相同父元素。以加号分隔

选择器1 + 选择器2 {
    
    
    ......
}

#d + div {
    
    
	border: 1px solid red;
}

<div id="d">
    相邻兄弟选择器1
    <ul>
        <li>开心麻花</li>
        <li>贾玲</li>
        <li>宋小宝</li>
    </ul>
</div>
<div>
    相邻兄弟选择器2
</div>

普通兄弟选择器

选择紧接在另一个元素后的所有元素，而且二者有相同的父元素，以波浪线分隔

选择器1 ~ 选择器2 {
    
    
    ......
}

li ~ li {
    
    
	background-color : yellow;
}

<div>
    普通兄弟选择器1
    <ul>
        <li>开心麻花</li>
        <li>贾玲</li>
        <li>宋小宝</li>
        <li>沈腾</li>
        <li>王宁</li>
    </ul>
</div>

3、CSS常用属性设置

3.1、背景

CSS 背景属性用于定义HTML元素的背景效果

3.1.1、background-color

设置元素的背景颜色

body {
    
    
    background-color:#ff0000;
}

3.1.2、background-image

设置元素的背景图像，默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。

body {
    
    
    background-image:url('paper.gif');
}

3.1.3、background-repeat

设置是否及如何重复背景图像

body {
    
    
    background-image: url(img/logo.jpg);	
    background-repeat: no-repeat;
}

3.2文本

3.2.1、color

body {
    
    
    color:blue;
} 
h1 {
    
    
    color:#00ff00;
} 
h2 {
    
    
    color:rgb(255,0,0);
}

3.2.2、text-align

设置文本对齐方式，center（居中），left（左对齐），right（右对齐）

body {
    
    
    text-align:center;
}	
h1 {
    
    
    text-align:right;
} 
h2 {
    
    
    text-align:right;
}

3.2.3、text-decoration

规定添加到文本的修饰，属性值：none、underline、overline、line-through

1）underline

对文本添加下划线，与HTML的u元素相同。

2）overline

对文本添加上划线。

3）line-through

对文本添加中划线，与HTML中的s和 strike 元素相同。

4）none

关闭原本应用到元素上的所有装饰。

h3 {
    
    
    text-decoration:underline;
}

text-indent

设置文本首行缩进

p.ident2 {
    
    
    text-indent: 2em;
}

em一个相对值，例如页面的文本大小为17px,则2em就为17px*2

3.3、字体

3.3.1、font-family

文本字体，该属性设置文本的字体。

font-family属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体，所以尽量将不常见的字体靠前，将最常见的字体放置在最后，作为替补。

注意：

1）只有当字体名中含有空格或#、$之类的符号时（如 New York），才需要在font-family声明中加引号：

body {
    
    
    font-family: "arial black";
}

2）多个字体系列是用一个逗号分隔指明

/* 靠前的字体先生效 */
p{
    
    
   font-family: 微软雅黑,黑体,"agency fb";
}

3.3.2、font-size

文本大小

body {
    
    
    font-size: 50px;  /*字体大小50px*/
}
#span1 {
    
    
    font-size: 25px;  /*字体大小25px*/
}

3.3.3、font-style

字体风格，该属性最常用于规定斜体文本。属性值：normal、italic、oblique

1）normal：文本正常显示；

2）italic：文本斜体显示；

3）oblique：文本倾斜显示，oblique是将文字强制倾斜。

说明：一般情况下，字体有粗体、斜体、下划线、删除线等诸多属性，但是不是所有字体都具有这些属性，一些不常用字体可能只有正常体，若使用italic属性则没有效果，所以需要oblique属性强制倾斜。

3.3.4、font-weight

字体加粗，该属性设置文本的粗细。

bold：可以将文本设置为粗体。

100 ~ 900：为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别。

100 对应最细的字体变形；

900 对应最粗的字体变形；

400 等价于 normal；

700 等价于 bold。

3.4、对齐方式

3.4.1、text-align

值 justify 可以使文本的两端都对齐。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。对最后一行不生效。

3.5、display属性

display 属性规定元素应该生成的框的类型。这个属性用于定义建立布局时元素生成的显示框类型。

3.6、浮动

float的属性值有none、left、right。

1. 只有横向浮动，并没有纵向浮动。

2. 会将元素的display属性变更为block。

3. 浮动元素的后一个元素会围绕着浮动元素（典型运用是文字围绕图片）

4. 浮动元素的前一个元素不会受到任何影响（如果你想让两个块状元素并排显示，必须让两个块状元素都应用float）。

3.7、盒子模型

border、padding、margin三个属性构成了盒子模型。

3.7.1、border

设置所有的边框属性。

1）可同时设置边框的宽度、样式、颜色

table, th, td {
    
     
    border: 1px solid black; 
}
table {
    
     
    width:100%; height:50px; 
}

2）使用border-width、border-style、border-color单独设置

table,td {
    
    
   border-width: 1px;
   border-style: dotted;
   border-color: green;
}

3）border-style的属性

4）border-collapse

设置是否将表格边框折叠为单一边框。

属性值：separate（默认，单元格边框独立）、collapse（单元格边框合并）

table {
    
     
    border-collapse : collapse; 
}

3.7.2、padding

设置元素所有内边距的宽度，或者设置各边上内边距的宽度。

如果在表的内容中控制文本到边框的内边距，使用td和th元素的填充属性：

td {
    
     
    padding:15px;
}

单独设置各边的内边距：padding-top、padding-left、padding-bottom、padding-right

默认按照上右下左的顺序设定

td .test1 {
    
    
    padding: 1.5cm
}		
td .test2 {
    
    
    padding: 0.5cm 2.5cm
}

<table border="1">
    <tr>
        <td class="test1">
            这个表格单元的每个边拥有相等的内边距。
        </td>
    </tr>
</table>
<br />
<table border="1">
    <tr>
        <td class="test2">
        这个表格单元的上和下内边距是0.5cm，左和右内边距是 2.5cm。
        </td>
    </tr>
</table>

注意：通过padding属性设置元素内边距时，会使元素变形。若不想影响格式效果，可以用margin属性设置元素外边距。

3.7.3、margin

设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。

p.margin {
    
    
    margin: 2px 4px 3px 4px;
}

单独设置各边的外边距：margin-top、margin-left、margin-bottom、margin-right

p.margin{
    
    
    margin-top:100px; 
    margin-bottom:100px;
    margin-right:50px; 
    margin-left:50px; 
} 
*{
    
    
    margin: auto auto;
} 
*{
    
    
    margin: 100px auto;
}

说明：

auto：自动，可以理解为居中的意思。浏览器自动计算外边距。

margin: auto auto：第一个auto表示上下外边距自动计算，第二个auto表示左右外边距自动计算。

但是上下外边距在自动计算时不会生效，而左右外边距会生效，表现为居中状态。

若要设置为上下左右居中状态，则要计算好自行设置上下的外边距。

注意：此时使用margin-top不生效。

三、JavaScript

在这里插入图片描述
JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

1、基本用法

JS要和HTML一起使用才有效果

1.1、行内JS

<p id="p" onclick="alert('你没事点我干什么玩意儿')">点我试试</p>

1.2、内部JS

<script>
    console.log("Hello JavaScript!")
</script>

1.3、外部JS

js01.js文件

alert("Hello World!");

引用外部JS文件

<script src="js/js01.js" type="text/javascript" charset="utf-8"></script>

2、注释

js程序的执行单位未行，一行一行的执行。

2.1、单行注释

// 注释内容

2.2、多行注释

/*console.log("Hello JavaScript!")*/

2.2、兼容HTML注释

<!-- <script>
    console.log("Hello JavaScript!")
</script> -->

3、标识符和关键字

标识符就是给变量或函数起名字。有特殊的阿规则和规范。和Java差不多。

3.1、标识符

3.1.1、规则

由Unicode字母、_、$、数字组成、中文组成
（1）不能以数字开头
（2）不能是关键字和保留字
（3）严格区分大小写

3.1.2、规范

（1）见名知意
（2）驼峰命名或下划线规则

3.2、关键字

和Java一样，JavaScript中也有关键字。

arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield、Infinity、NaN、undefined

4、变量

JavaScript的变量就必要有意思了。JavaScript是一种若语言类型，在声明变量的时候不需要指定变量的类型，直接使用var修饰符进行声明

4.1、变量的声明

// 先声明在赋值
var a;
a = 10;
// 连声明带赋值
var b = 10;

4.2、变量的注意事项

1、如果只声明了变量，却没有给赋值，那么默认值未undefined

var c;
console.log(c);

undefined

2、变量要定义才可以使用，如果没有定义就使用，将会报错

console.log(aa);

Uncaught ReferenceError: aa is not defined

3、可以在一条var命令中声明多个变量

var aa, bb, cc = 20;
console.log(aa,bb,cc);

4、如果使用var重写声明一个已经存在的变量，后者将会覆盖前者

var a = 10;
console.log(a);
var a = 20;
console.log(a);

5、JavaScript是一种动态型若语言，可以给同一个变量赋予各种类型

var a = 10;
a = "啊哈哈";

4、变量提升

JavaScript是先解析代码，获取所有的变量声明，先声明所有变量，然后在一行一行的执行。

console.log(a);
var a = 10;

undefined

变量会提升，但是赋值还是在原来的地方。

如果不适用var声明变量，就不会发生变量提升。

console.log(a);
a = 10;

Uncaught ReferenceError: a is not defined

5、数据类型

虽说JS是弱类型语言，变量没有类型，但数据本身是有类型的。针对不同的类型，我们可以进行不同的操作。

类型	描述
number	数值
String	字符串
Boolean	布尔
Undefined	未定义
Null	空
Object	对象

5.1、undefined

undefined类型的值是undefined。

undefined 是一个表示"无"的原始值，表示值不存在。

出现undefined的常见情况：

（1）当声明了一个变量而没有初始化时，这个变量的值就是undefined

var box;
console.log(box); //undefined

（2）调用函数时，该函数有形参，但未提供实参，则该参数为undefined。

function noData(str) {
    
     // js函数形参只需要变量名即可
	console.log(str); // undefined
}
noData(); // 调用方法时，未传递参数

（3）函数没有返回值时，默认返回 undefined。

// 方法没有返回值
function noData() {
    
     
	console.log("Hello"); 
}
var re = noData();// 定义变量接收无返回值的方法
console.log(re);

5.2、null

null类型是只有一个值的数据类型，即特殊的值null。它表示空值，即该处的值现在为空，它表示一个空对象引用。

使用Null类型值时注意以下几点：

1）使用typeof操作符测试null返回object字符串。

2）undefined派生自null，所以等值比较返回值是true。未初始化的变量和赋值为null的变量相等。

console.log(undefined == null);
var box = null; // 赋值为null的变量
var a; // 未初始化的变量
console.log(a == box);	// 两个的值相等

5.3、布尔类型

布尔类型有两个值：true、false。常用来做判断和循环的条件。

0：代表fasle
非0：代表true

5.4、数值型

数值型包含两种数值：整型和浮点型。

1）所有数字（整型和浮点型）都是以 64 位浮点数形式储存。所以，JS中1 与 1.0 相等，而且 1 加上 1.0 得到的还是一个整数。浮点数最高精度是17位小数，由于浮点数运算时可能不精确，尽量不要使用浮点数做判断。

2）在存储数值型数据时自动将可以转换为整型的浮点数值转为整型。

console.log(1 == 1.0); // true
console.log(1 + 1.0); // 2
var num = 8.0; // 自动将可以转换为整型的浮点数转为整型
console.log(num); // 8

5.5、字符串

使用 ’ ’ 或 " "引起来，如：‘hello’，“good”。

使用加号 ‘+’ 进行字符串的拼接，如：console.log(‘hello’ + ’ everybody’);

5.6、对象

对象是一组数据和功能的集合。

说明：

{}：表示使用对象字面量方式定义的对象。空的大括号表示定义包含默认属性和方法的对象。

6、类型转换

函数转换（String to Number）

JS 提供了 **parseInt()**和 **parseFloat()**两个全局转换函数。前者把值转换成整数，后者把值转换成浮点数。只有对 String 类型调用这些方法，这两个函数才能正确运行；对其他类型返回的都是 NaN(Not a Number)。

parseInt()

在转换之前，首先会分析该字符串，判断位置为0处的字符，判断它是否是个有效数字，如果不是，则直接返回NaN，不再继续，如果是则继续，直到找到非字符

 parseInt("1234blue"); // returns 1234
 parseInt("22.5"); // returns 22
 parseInt("blue"); // returns NaN

parseFloat()

该方法与 parseInt() 方法的处理方式相似，从位置 0 开始查看每个字符，直到找到第一个非有效的字符为止，然后把该字符之前的字符串转换成数字。不过，对于这个方法来说，第一个出现的小数点是有效字符。如果有两个小数点，第二个小数点将被看作无效的，parseFloat()方法会把这个小数点之前的字符串转换成数字。

parseFloat("1234blue"); // returns 1234.0
parseFloat("22.5"); // returns 22.5
parseFloat("22.34.5"); // returns 22.34
parseFloat("blue"); //returns NaN

显示转换

几乎每个数对象都提供了toString()函数将内容转换为字符串形式，其中Number提供的toString()函数可以将数字转换为字符串。

Number还提供了**toFixed()**函数将根据小数点后指定位数将数字转为字符串，四舍五入

// 将内容转换为字符串形式
var data = 10
console.log(data.toString())

// 根据小数点后指定位数将数字转为字符串，四舍五入
data = 1.4;
console.log(data.toFixed(0));
data = 1.49;
console.log(data.toFixed(1));

			
// 不能对null和undefined使用
data = null
console.log(data.toString())
data = undefined
console.log(data.toString())

JS 为 Number、Boolean、String 对象提供了构造方法，用于强制转换其他类型的数据。此时操作的是整个数据，而不是部分。

Number(false)        	0
Number(true)         	1
Number(undefined)  		NaN
Number(null)         	0
Number( "5.5 ")     	5.5
Number( "56 ")      	56
Number( "5.6.7 ")   	NaN
Number(new Object())	NaN
Number(100)         	100

Boolean(""); 			// false – empty string
Boolean("hi"); 			// true – non-empty string
Boolean(100); 			// true – non-zero number
Boolean(null); 			// false - null
Boolean(0); 			// false - zero
Boolean(new Object()); 	// true – object

最后一种强制类型转换方法 String() 是最简单的，因为它可把任何值转换成字符串。要执行这种强制类型转换，只需要调用作为参数传递进来的值的 toString() 方法，即把 1 转换成"1 "，把 true转换成 "true "，把 false 转换成 "false "，依此类推。强制转换成字符串和调用 toString() 方法的唯一不同之处在于，对 null 或 undefined 值强制类型转换可以生成字符串而不引发错误：

var s1 = String(null); // "null"
var oNull = null;
var s2 = oNull.toString(); // won’t work, causes anerror

最为简单的一种转换为字符串的方式，直接在任意数据后面 + “” 即可。

7、运算符

和Java差不多，四则运算，自增自减，扩展运算符，比较运算符都一样。也有些不一样。

运算符	描述
==	比较值是否相等，不管类型
===	全等于，不但比较值也比较数据类型
&&	逻辑或
\|\|	逻辑与
!	逻辑非

7.1、==

在JavaScript中比较的不在是地址，而是比较值是否相等

console.log(1 =='1'); // true

7.2、===

不但比较值是否相等，而且还比较类型是否相等。先比较类型，后比较值

console.log(1 =='1'); // false

7.3、&&

同样会发生短路，但是也有不同的地方

在JavaScript中任何类型都能参与逻辑运算

console.log(0 && true); // 第一个值为false,结果就为第一个值，0
console.log(1 && 'as'); // 第二个为true,结果就为第二个值，as

如果参与&&运算的值，第一个是true，则结果就是第一个值
如果参与&&运算的值，第一个是false，则结果就是第二个值

7.4、||

同样会发生短路，但是也有不同的地方

在JavaScript中任何类型都能参与逻辑运算

console.log(1||0);  // 第一个结果为true，结果就为第一个值，1
console.log(0||'45'); // 第一个值为false，结果就为第二个值，45

如果参与||运算的值，第一个是true，则结果就是第一个值
如果参与||运算的值，第一个是false，则结果就是第二个值

7.5、!

和Java中不同的是，这里可以使用多个!

console.log(!true);	// fasle
console.log(!!true); // true
console.log(!!!true); // false

会一层一层的取反

8、控制语句

也和Java类似，if、if-else、if-else-if、switch、while、do-while、for、for-each、break、continue都一样。

9、数组

数组稍有不同，JavaScript中的数组可以存放多种类型，长度可变，个数没有限制，也可以根据索引操作

9.1、数组的创建方式

9.1.1、创建方式一

var a1 = new Array();
a1[0] = "张三";
a1[2] = null;
a1[3] = true;

9.1.2、创建方式二

var a2 = new Array("张三",null,undefined,true);

9.1.3、创建方式三

var a3 = ["张三",123,true,{
    
    nane:'张三'},null,undefined,NaN,function () {
    
    
    alert("数组中的函数");
}];

索引中

9.2、数组的遍历

9.2.1、遍历方式一

不便利属性

var a = [1,2,3,4,5,6];
for (var i = 0;i<a.length;i++){
    
    
    console.log(a[i]);
}

9.2.2、遍历方式二

不遍历索引中的undefined

for (var i in a){
    
    
    console.log(a[i]);
}

9.2.3、遍历方式三

不遍历属性和索引中的undefined

a.forEach(function (e,i,a) {
    
      // 值，索引，数组
    console.log(e+'--'+i+'--'+a);
});

e：数组元素
i：索引
a：数组

9.3、数组提供的操作方法

Array对象为我们提供了一些方法，可以很方便地操作数组

push          添加元素到最后 
unshift       添加元素到最前 
pop           删除最后一项 
shift         删除第一项 
reverse       数组翻转 
join          数组转成字符串 
indexOf       数组元素索引 
slice         截取（切片）数组，原数组不发生变化 
splice        剪接数组，原数组变化，可以实现前后删除效果 
concat        数组合并

var arr = ['1','a',5,'3'];
console.log(arr);
arr.push(10);
console.log(arr);
arr.unshift('b');
console.log(arr);
arr.pop();
console.log(arr);
arr.shift();
console.log(arr);
arr.reverse();
console.log(arr);
console.log(arr.join('\''));
console.log(arr);
console.log(arr.indexOf('a'));
console.log(arr.slice(2,5));
console.log(arr);
arr.splice(1,1,'一','二');
console.log(arr);
var arr1 = [0,'100'];
console.log(arr.concat(arr1));
console.log(arr);
console.log(arr1);
console.log(arr1.(arr));

10、函数

函数，即方法。就是一段预先设置的功能代码块，可以反复调用，根据输入参数的不同，返回不同的值。函数也是对象。

10.1函数的定义

有三种函数定义的方式：函数声明语句、函数定义表达式、Function构造函数

10.1.1、函数声明语句

function 函数名([参数列表]){
    
    
    
}
例如：
function foo(){
    
     
    console.log(1);
} 
foo();

该种方式定义的函数具有声明提升的效果

foo();   
function foo(){
    
     
        console.log(1);
} 
// 变量声明提升
console.log( a );  
var a = 2;

10.1.2、函数定义表达式

以表达式方式定义的函数，函数的名称是可以不需要的

var 变量名 = function ([参数列表]) {
    
    
    
}
变量名();
例如：
var fun = function(){
    
    
    console.log("Hello");
}
fun();

这种写法将一个匿名函数赋值给变量。这时，这个匿名函数又称函数表达式，因为赋值语句的等号右侧只能放表达式。

10.1.3、Function构造函数

Function构造函数接收任意数量的参数，但最后一个参数始终都被看成是函数体，而前面的参数则列举出了新函数的参数。

var add = new Function('x','y','return (x + y)');
// 等同于
function add(x, y) {
    
    
    return (x + y);
}
add();

注意：

1. js中的函数没有重载，同名的函数，会被后面的函数覆盖。
2. js中允许有不定数目的参数，后面介绍arguments对象

10.2、函数的参数、调用和return语句

10.2.1参数

函数运行的时候，有时需要提供外部数据，不同的外部数据会得到不同的结果，这种外部数据就叫参数，定义时的参数称为形参，调用时的参数称为实参

实参可以省略，那么对应形参为undefined
若函数形参同名（一般不会这么干）：在使用时以最后一个值为准。
可以给参数默认值：当参数为特殊值时，可以赋予默认值。
参数为值传递，传递副本；引用传递时传递地址，操作的是同一个对象。

// 调用函数时，实参可以省略，则对应形参为undefined
function add(a , b) {
    
    
	console.log(a + "+" + b + "=" + (a + b));
}
add(3,4,5)//3+4=7
add(1);//1+undefined=NaN
add();//undefined+undefined=NaN

// 若函数形参同名（一般不会这么干）：在使用时以最后一个值为准
function add2(a , a) {
    
    
	console.log(a);
}
add2(1,2);

// 给参数默认值
function defaultValue(a){
    
    
	a = a || "a";
	return a;
}
console.log(defaultValue());
function f(a){
    
    
	//若参数a不为undefined或null，则取本身的值，否则给一个默认值
	(a !== undefined && a !== null) ? a = a : a = 1;
 	return a;
}
console.log(f());

// 值传递
var num = 12;
function change(n) {
    
    
	n = 30;
}
change(num);
console.log(num);
// 引用传递
var obj = {
    
    name: "tom"};
function paramter(o) {
    
    
	o.name = 2;
}
paramter(obj);
console.log(obj.name);
// 给形参o赋予了新的数组
var obj2 = [1, 2, 3];
function paramter2(o){
    
    
	o = [2, 3, 4];
	o[1] = 3;
}
paramter2 (obj2);
console.log(obj2)

10.2.2、函数的调用

1. 常用调用方式

函数名([实参]);

存在返回值可以变量接收，若接收无返回值函数则为undefined。

2. 函数调用模式

function add(a,b){
    
    
   return a+b;
} 
var sum = add(1,2) 
console.log(sum);

3. 方法调用模式

var o = {
    
    
    m: function(){
    
    
         console.log(1); 
    } 
};
o.m();

10.2.3、return

函数的执行可能会有返回值，需要使用return语句将结果返回。return 语句不是必需的，如果没有的话，该函数就不返回任何值，或者说返回 undefined。

作用：

1. 在没有返回值的方法中，用来结束方法。

2. 有返回值的方法中，一个是用来结束方法，一个是将值带给调用者。

10.3、函数的作用域

函数作用域：全局 (global variable) 和局部 (local variable)

1. 全局变量与局部变量同名问题

var box =1; // 全局变量
function display(box){
    
    
	var box = 3; // 此处box与全局变量box没有关系，这里的box为传递的参数，相当于新声明的局部变量
	var b = 2; // 局部变量
	console.log("box-->" + box);
}
display();
// b 不能访问
console.log("b-->" + b);

2. 在函数中定义变量时，若没有加var关键字，使用之后自动变为全局变量

function fun(){
    
    
	a = 100;
}
fun();
alert(a);

10.4、this和apply_call

10.4.1、this

var a = 1;
console.log(a);
console.log(window.a);
console.log(this.a);

var obj = {
    
    
    a : 10,
    show:function (b,c) {
    
    
        console.log(a,b,c); // 不加this,代指全局的变量
        console.log(this.a,b,c);    // 加this，代指当前对象的变量
    }
};

var f= obj.show;    // 把函数提取出来，赋值给f
f();    // 等于window.f()

10.4.2、apply_call

改变this的指向

var obj1 = {
    
    a:"ahh"};

// 改变this的指向
obj.show.call(obj1,3,4);
obj.show.apply(obj1,[8,6])

call：第一个参数是要指向的对象，从第二个参数是实参
apply：第一个参数是要指向的对象，第二个参数是一个数组，数组内是实参

10.5、函数的注意事项

1、函数的参数可以不一一对应。

function f5(a,b,c) {
    
    
    console.log(a);
    console.log(b);
    console.log(c);
}

f5(1,2,3);
f5(1);

没有传入的参数打印undefined

2、函数默认有返回值undefined,如果存在返回值,以定义的为主

function f5(a,b,c) {
    
    
    console.log(a);
    console.log(b);
    console.log(c);
    return a+b+c;
}

返回定义的结果

function f5(a,b,c) {
    
    
    console.log(a);
    console.log(b);
    console.log(c);
}

返回undefined

3、函数若存在同名参数,使用的时候以最后一个值为主

function f5(a,a) {
    
    
    console.log(a);
}
f5(1,2);

结果为2

4、函数参数可以默认值

function f1(a = 1,b = 2) {
    
    
    console.log(a+'--'+b);
}
f1();

5、如果参数为基本数据值,值传递,如果是对象,引用传递

var a = 10;
function f2(a) {
    
    
    a+=10;
}
console.log(a);

var obj = {
    
    
    name : '张三'
};
function f3(object) {
    
    
  object.name = "李四";
}
f3(obj);
console.log(obj);

11、闭包

如果想在外部使用函数内的数据，可以使用闭包

实现闭包的条件

函数中嵌套函数
外部函数中返回内部函数
内部函数中引用外部函数的变量

function f() {
    
    
    var a = 10;
    function f1() {
    
    
        a++;
        console.log(a);
    }
    return f1;
}
var ff = f();

12、内置对象

Arguments   只在函数内部定义，保存了函数的实参 
Array             数组对象 
Date              日期对象，用来创建和获取日期 
Math             数学对象 
String             字符串对象，提供对字符串的一系列操作

12.1、String

◦ charAt(idx)	   返回指定位置处的字符
◦ indexOf(Chr)	   返回指定子字符串的位置，从左到右。找不到返回-1
◦ substr(m,n)	   返回给定字符串中从m位置开始，取n个字符，如果参数n省略，则意味着取到字符串末尾。
◦ substring(m,n)   返回给定字符串中从m位置开始，到n位置结束，如果参数n省略，则意味着取到字符串末尾。
◦ toLowerCase()	   将字符串中的字符全部转化成小写。
◦ toUpperCase()	   将字符串中的字符全部转化成大写。
◦ length 		   属性，不是方法，返回字符串的长度。

12.2、Math

◦ Math.random()	   随机数
◦ Math.ceil() 	   向上取整，大于最大整数
◦ Math.floor() 	   向小取整，小于最小整数String

12.3、Date

// 获取日期
◦ getFullYear()	   年
◦ getMonth()	   月
◦ getDate()		   日
◦ getHours()	   时
◦ getMinutes()	   分
◦ getSeconds()	   秒
// 设置日期
◦ setYear()
◦ setMonth()
◦ setDate()
◦ setHours()
◦ setMinutes()
◦ setSeconds()
◦ toLoacaleString()	转换成本地时间字符串

说明：

getMonth()：得到的值：0_11（1月12月）
setMonth()：设置值时0~11
toLocaleString()：可根据本地时间把 Date 对象转换为字符串，并返回结果。

13、对象

对象（object）是 JavaScript 的核心概念，也是最重要的数据类型。JavaScript 的所有数据都可以被视为对象。JavaScript 提供多个内建对象，比如 String、Date、Array 等等。对象是带有属性和方法的特殊数据类型。

简单说，所谓对象，就是一种无序的数据集合，由若干个“键值对”（key-value）构成。通过JavaScript我们可以创建自己的对象。 JavaScript对象满足的这种”键值对”的格式我们称为JSON格式，以后会见得非常多，即伟大的JSON对象。

13.1、对象的创建

JS 创建自定义对象，主要通过三种方式：字面量形式创建对象、通过new Object对象创建、通过Object对象的create方法创建对象。

字面量形式创建

var 对象名 = {
    
    };//创建一个空的对象
var 对象名 = {
    
    键:值,键2:值2,...} 

var obj = {
    
    
           'name' : 'hello',
           age : 12,
           sayHello : function () {
    
    
           		console.log("我是对象中的方法");
           },
    	   courses : {
    
    
           		javase : 4,
                javascript : 3
    	   },
       	   isLike : true,
           members : [
                {
    
    name : "小红",age : 20},
                {
    
    name : "小绿",age : 22},
                {
    
    name : "小蓝",age : 27},
                {
    
    name : "小黄"}
           ]
};

通过new Object创建

var 对象名 = new Object(); // 创建一个空的对象

var obj = new Object();
obj.name = 'zs';
obj.age = 18;
console.log(obj);

通过Object对象的create方法创建

var 对象名 = Object.create(null); 
var obj = Object.create(null);
obj.name = 'ls';
obj.gender = true
console.log(obj);
		
var objn = Object.create(obj);
objn.age = 18;
console.log(objn);
console.log(objn.gender)

13.2、对象的序列化和反序列化

序列化即将JS对象序列化为字符串，反序列化即将字符串反序列化为JS对象。JS中通过调用JSON方法，可以将对象序列化成字符串，也可以将字符串反序列化成对象。

// 序列化对象，将对象转为字符串
JSON.stringify(object);

// 反序列化，将一个Json字符串转换为对象。
JSON.parse(jsonStr);

13.3、this

this是JavaScript语言的一个关键字。

它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。

随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。

在函数中使用this

在函数中使用this属于全局性调用，代表全局对象，通过window对象来访问。

function test () {
    
    
	this.x = 1;
	console.log(this.x);
}
test();
console.log(x); // 相当于定义在全局对象上的属性 

var x = 10;
console.log(x)  // 10
function test (){
    
    
    console.log(this.x)  // 10
    this.x = 1;
    console.log(this.x) // 1
    console.log(this)
}

test();
console.log(x); // 1
console.log(this);

在对象中使用this

在对象中的函数使用this，代表当前的上级对象。

var obj = {
    
    
	name : '张三',
	age : 20,
	sayHello : function () {
    
    
		console.log(this.name)
		console.log(this)
	}
}
obj.sayHello();

14、事件

事件 (Event) 是 JavaScript 应用跳动的心脏，进行交互，使网页动起来。当我们与浏览器中 Web 页面进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情，比如说某个 Web 页面加载完成，或者是用户滚动窗口或改变窗口大小。

通过使用 JavaScript ，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件做出响应。

14.1、常用事件

14.1.1、常用事件-onclick-点击事件

<p id="p1" ondblclick="">点我试试</p>

var p = document.getElementById("p1");
p.onclick = function () {
    
    
    console.log("没事点我干什么玩意儿")
};

14.1.2、常用事件-ondblclick-双击事件

p.ondblclick = function () {
    
    
    console.log("双击点击事件")
};

14.1.3、常用事件-onmouseover-鼠标移入事件

p.onmouseover = function () {
    
    
    console.log("鼠标移入事件")
};

14.1.4、常用事件-onmouseout-鼠标移出事件

uname.onfocus = function () {
    
    
    span.innerHTML = "至少输入一个字符";
    span.style.color = "red";
};

14.1.5、常用事件-onfocus-获得焦点事件

<span id="span"></span><br>
<input id="uname" type="text" autocomplete="off">

var uname = document.getElementById("uname");
var span = document.getElementById("span");

uname.onfocus = function () {
    
    
    span.innerHTML = "至少输入一个字符";
    span.style.color = "red";
};

14.1.6、常用事件-onblur-失去焦点事件

uname.onblur = function () {
    
    
    var s = uname.value;
    if (s == ''){
    
    
        span.innerHTML = "不能为空";
    }else{
    
    
        span.innerHTML = "";
    }
};

14.1.7、常用事件-onkeydown-某个按键被按下

uname.onkeydown = function () {
    
    
    if (event.keyCode==77){
    
    
        alert("不许骂人！");
    }
};

14.1.8、常用事件-onkeyup-按键抬起

uname.onkeyup = function () {
    
    
    console.log("键盘抬起事件")
};

14.1.9、常用事件-onchange-数据发生改变

uname.onchange = function () {
    
    
    alert("数据发生了变化");
}

失去焦点，数据发生改变才能触发该事件

14.2事件流和事件模型

我们的事件最后都有一个特定的事件源，暂且将事件源看做是HTML的某个元素，那么当一个HTML元素产生一个事件时，该事件会在元素节点与根节点之间按特定的顺序传播，路径所经过的节点都会受到该事件，这个传播过程称为DOM事件流。

事件顺序有两种类型：**事件捕获 **和 事件冒泡。

冒泡和捕获其实都是事件流的不同表现，这两者的产生是因为IE和Netscape两个大公司完全不同的事件流概念产生的。（事件流：是指页面接受事件的顺序）IE的事件流是事件冒泡，Netscape的事件流是事件捕获流。

事件冒泡

IE的事件流叫做事件冒泡，即事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点（文档）。例如下面的：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JavaScript</title>
	</head>
	<body>
		<div id="myDiv">Click me</div>
	</body>
</html>

如果点击了页面中的

元素，那么这个click事件会按照如下顺序传播：

1、

2、

3、

4、document

也就是说，click事件首先在div元素上发生，而这个元素就是我们单击的元素。然后，click事件沿DOM树向上传播，在每一级节点上都会发生，直到传播到document对象。

所有现代浏览器都支持事件冒泡，但在具体实现上还是有一些差别。

事件捕获

Netscape提出的另一种事件流叫做事件捕获，事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。还以前面的例子为例。那么单击

元素就会按下列顺序触发click事件：

1、document

2、

3、

4、

在事件捕获过程中，document对象首先接收到click事件，然后沿DOM树依次向下，一直传播到事件的实际目标，即

元素。

虽然事件捕获是Netscape唯一支持的事件流模式，但很多主流浏览器目前也都支持这种事件流模型。尽管“DOM2级事件”规范要求事件应该从document对象开始时传播，但这些浏览器都是从window对象开始捕获的。

DOM 事件流

“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获阶段，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。

14.3、事件处理程序

事件就是用户或浏览器自身执行的某种动作。例如click、load和mouseover都是事件的名字，而响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以“on”开头，因此click事件的事件处理程序就是onclick，为事件指定处理程序的方式有好几种。

HTML 事件处理程序

某个元素支持的每种事件，都可以用一个与相应事件处理程序同名的HTML特性来指定。这个特性的值应该是能够执行的JavaScript代码：

<input type="button" value="Press me" onclick="alert('thanks');" />

这样做有一些缺点，例如耦合度过高，还可能存在时差问题（当用户点击按钮时，处理函数还未加载到，此时处理函数是单独写的一段js代码），而且在不同的浏览器上可能会有不同的效果。

DOM0 级事件处理程序

通过JavaScript指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。这种方式被所有现代浏览器所支持。这种方式首先必须取得一个要操作的对象的引用，每个元素都有自己的事件处理程序属性，这些属性通常全都小写，例如onclick，然后将这种属性的值设为一个函数，就可以指定事件处理程序了。例如：

<body>
    <button id="myBtn">按钮</button>
    <script type="text/javascript">
        var btn = document.getElementById('myBtn');
        btn.onclick = function(){
     
     
            console.log('you click a button');
        }
    </script>
</body>

以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。而且，只能为同一个元素的同一个事件设定一个处理程序（覆盖），也可以通过删除DOM0级方法指定的事件处理程序，只要将属性值设为null即可：

btn.onclick = null;

DOM2 级事件处理程序

“DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点都包含这两个方法，并且他们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，则表示在捕获阶段调用事件处理程序；如果是false则表示在冒泡阶段调用事件处理程序。

<body>
    <button id="myBtn">按钮</button>
    <script type="text/javascript">
        var btn = document.getElementById('myBtn')
        btn.addEventListener('click',function(){
     
     
            alert('you add a eventListener by DOM2')
        },false)

        btn.addEventListener('click',function(){
     
     
            alert('you add a eventListener by DOM2 again')
        },false)

        function thread(){
     
     
            alert('you add a eventListener by DOM2 第三次')
        }
        btn.addEventListener('click',thread,false)
        btn.removeEventListener('click',thread,false)
    </script>
</body>

这种方式可以为同一个元素的同一个事件添加多个处理函数。还可删除事件处理函数，注意，在删除的时候，不能删除匿名处理函数。

15、BOM对象

BOM的核心对象是window，它表示浏览器的一个实例。window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。这意味着在网页中定义的任何一个对象、变量和函数，都以window作为其Global对象，因此有权访问parseInt()等方法。如果页面中包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中。在frames集合中，可以通过数值索引（从0开始，从左至右，从上到下）或者框架的名称来访问相应的window对象。

15.1、Window对象

15.1.1、alert消息框

alert("消息框");

15.1.2、prompt输入框

var n = prompt("abc");
alert(n);

prompt：参时为要提示的信息，返回输入的数据

15.1.3、confirm确认框

var flag = confirm("请确认");
alert(flag);

confirm：参数为要提示的信息，确定返回true，取消返回false

15.2、打开窗口

function btu1() {
    
    
    // window.open("https://www.yanghuisen.cn") //_blank可以省略
    var o = window.open("https://www.yanghuisen.cn","_blank","width = 300px,height=300px")
}

第一个参数为要打开的页面
第二个参数为打开方式，常用的两种方式：_self（当前页面）,_blank(新页面)
第三个参数用来定义新窗口的大小

15.3、关闭窗口

o.close();

15.4、setInterval

按照时间循环执行

<p id="p1"></p>
<button onclick="fu_start()">开始</button>
<button onclick="fu_stop()">结束</button>

var p = document.getElementById("p1");
console.log(p);
var num;
function fu_start () {
    
    
    // 每个1000毫秒，执行一次a1函数
    num = setInterval(a1,1000);
}

function fu_stop() {
    
    
    // 停止
    clearInterval(num);
}
function a1() {
    
    
    p.innerHTML = new Date().toLocaleString();
}

15.5、setTimeout

setTimeout(ff,10000);
function ff() {
    
    
    alert("啊哈哈");
}

1000毫秒后执行ff函数

15.6、History对象

对浏览器历史进行前进后退操作。前提是要有历史记录

15.6.1、forward

前进

<input type="button" onclick="window.history.forward()" value="前进">

15.6.2、back

后退操作

<input type="button" onclick="window.history.back()" value="后退">

15.6.3、go

window.history.go(-1)：传入一个参数，-1表示上一个页面，-2表示上上一个页面。

<input type="button" onclick="window.history.go(-1)" value="后退1">

15.7、Localtion对象

Window对象之一，提供与当前窗口中加载的文档有关信息。

15.7.1、replace

用指点地址页面替换当前页面，不能后退

window.location.replace("https://www.yanghuisen.cn");

15.7.2、href

用指点地址页面替换当前页面，可以后退

window.location.href = "https://www.yanghuisen.cn";

也可以通过href获取当前页面的地址

console.log(window.location.href);

15.7.3、reload

刷新当前页面

window.location.reload();

16、DOM对象

DOM：Document Object Model 文档对象模型

要实现页面的动态交互效果，bom 操作远远不够，需要操作 html 才是核心。如何操作 htm，就是 DOM。简单的说，dom 提供了用程序动态控制 html 接口。DOM即文档对象模型描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。dom 处于javascript 的核心地位上。

每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

16.1、节点

页面中的每个元素都是一个节点，但是不是每个节点都是一个元素。

节点类型	HTML内容	例如
文档节点	文档本身	整个文档 document
元素节点	所有的HTML元素	、、
属性节点	HTML元素内的属性	id、href、name、class
文本节点	元素内的文本	hello
注释节点	HTML中的注释

16.2、获取节点

1、通过ID获取

返回一个DOM对象

document.getElementById("box1");

2、通过元素名获取

返回DOM对象数组

document.getElementsByTagName("ul");

3、通过类选择器获取

返回DOM对象数组

document.getElementsByClassName("box1")

4、通过name属性获取

返回DOM对象数组

document.getElementsByName("username")

16.3、创建节点

1、createElement创建元素节点

var p = document.createElement("p");

2、createTextNode创建一个文本节点

var text = document.createTextNode("啊哈哈");

3、innerHTML

严格来说innerHTML不算是节点的创建方式，但是也可以同样实现创建节点的效果。

如下：创建一个p元素节点，然后给p元素节点添加文字值

var p1 = document.createElement("p");
p1.innerHTML ="啊哈哈123";

和innerHTML同样的还有一个innerText，两者区别在于前者可以识别标签，而后者不可以

p1.innerHTML ="<h6>啊哈哈123<h6>";
p1.innerText = "<h6>啊哈哈123<h6>";

16.4、插入节点

1、appendChild

以追加的方式，添加节点

语法：父节点.appendChild(要插入的节点)

var p1 = document.createElement("p"); // 创建一个节点
p1.innerHTML ="<h6>啊哈哈123<h6>";
document.body.appendChild(p1);	// 插入节点

2、insertBefore

指定位置插入节点

语法：父节点.insertBefore(新节点,要插入到哪个节点前面);

var p2 = document.createElement("p");
p2.innerHTML = "啊哈哈1234";
document.body.insertBefore(p2,p1);  // 插到p1前面

如果第二个参数为null或者undefined，就相当于在最后追加节点

document.body.insertBefore(p2,null);  // 在最后追加

16.5、间接查找节点

方法\|属性	描述
childNodes	返回元素的一个子节点的数组
firstChild	返回元素的第一个子节点
firstElementChild	返回元素的第一个子元素节点
lastChild	返回元素的最后一个子节点
lastElementChild	返回元素的最后一个子元素节点
nextSibling	返回元素的下一个兄弟节点
parentNode	返回元素的父节点
parentElement	返回元素的父元素节点
previousSibling	返回元素的上一个兄弟节点
childElementCount	返回元素的子节点数量

    <div id="box">
        <div id="item">
            <ul>
                <li>列表1</li>
                <li>列表2</li>
                <li>列表3</li>
                <li>列表4</li>
                <li>列表5
                    <ol>
                        <li>子列表</li>
                        <li>子列表</li>
                        <li>子列表</li>
                        <li>子列表</li>
                    </ol>
                </li>
            </ul>
        </div>
    </div>

1、childNodes

返回元素的子节点数组

var ul = document.getElementsByTagName("ul")[0];
console.log(ul.childNodes);// 返回元素的节点数组

2、childElementCount

返回元素的子节点数量

console.log(ul.childElementCount);  // 子节点数量

3、parentNode

返回元素的父节点

console.log(ul.parentNode); // 元素的父节点

4、parentElement

返回元素的父元素节点

console.log(ul.parentElement);// 元素的父元节点

5、firstChild

返回元素的第一个子节点

console.log(ul.firstChild);// 元素的第一个子节点

6、firstElementChild

元素的第一个子元素节点

console.log(ul.firstElementChild);// 元素的第一个子元素节点

7、lastChild

元素的最后的一个节点

console.log(ul.lastChild); //元素的最后一个子节点

8、lastElementChild

元素d阿最后一个元素节点

console.log(ul.lastElementChild); // 元素的最后一个元素节点

9、nextSibling

元素的下一个兄弟节点

console.log(ul.firstChild.nextSibling);// 元素的第一个子节点的下一个兄弟节点

10、previousSibling

元素的上一个兄弟节点

console.log(ul.firstChild.nextSibling.previousSibling);// 元素的第一个元素的下一个兄弟节点的上一个兄弟节点

16.6、替换节点

<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
</ul>

replaceChild

新节点替换

var ul = document.getElementsByTagName("ul")[0];
var lis = document.getElementsByTagName("li");

// 新节点替换掉源节点
var li = document.createElement("li");
li.innerHTML = "新节点";
console.log(ul.replaceChild(li,lis[1]));

源节点替换

// 从已有的节点替换-相当于剪切
ul.replaceChild(lis[0],lis[2]);

如果用原节点中的一个节点替换另一个节点，那么就会出现剪切的效果，将会丢失被替换的节点。

16.7、节点克隆

可以对节点进行克隆，不会克隆Js代码

<ul style="background-color: aquamarine">
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
</ul>

// css样式会被克隆
var ul = document.getElementsByTagName("ul")[0];
// js代码不会克隆
ul.onclick = function () {
    
    
    console.log("点击了Ul列表");
};
var newUl = ul.cloneNode(true); // true克隆子孙节点，false相反
console.log(newUl);
document.body.appendChild(newUl);

16.8、删除节点

removeChild，删除指定节点

<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
</ul>

var ul = document.getElementsByTagName("ul")[0];
var li = ul.firstElementChild;
ul.removeChild(li); // 删除节点，返回被删除的节点

17、Form表单

表单是我们页面向后台传输数据的一种非常常见的方式，在进行数据发送（请求发出）之前，我们应该现在页面进行一系列数据合法性的验证，节省不必要的错误数据的传输，以及提高用户的体验度。

 <form action="" method="get" id="form" name="form">
        姓名：<input type="text" name="username" placeholder="请输入姓名" autocomplete="off"><button type="button" onclick="f1()">按钮</button>
        <br>
        性别：<input type="radio" name="sex" value="1" checked>男<input type="radio" name="sex" value="0">女<button type="button" onclick="f2()">按钮</button>
        <br>
        爱好：<input type="checkbox" name="hobby" value="code">写代码<input type="checkbox" name="hobby" value="eat">吃
        <input type="checkbox" name="hobby" value="sleep">睡觉<button type="button" onclick="f3()">按钮</button>
        <br>
        地区：
            <select name="area">
                <option value="河南">河南</option>
                <option value="河北">河北</option>
                <option value="山东">山东</option>
                <option value="山西">山西</option>
            </select>
        <button type="button" onclick="f4()">按钮</button>
        <br>
        <input type="submit" onclick="return f_sub()"><input type="button" value="按钮" onclick="f_but()"><button>Submit</button>
    </form>

17.1、获取表单

两种最常用的获取表单的方式

1、getElementById获取

var form1 = document.getElementById("form");

2、通过name获取

form1 = document.form;

17.2、获取表单元素

直接表单.元素的name就可以获取

console.log(form1.username);
console.log(form1.sex);
console.log(form1.hobby);
console.log(form1.area);

17.3、获取表单元素的值

1、获取输入框的值

console.log(form1.username.value);

2、获取单选框的值

console.log(form1.sex.value);

3、获取复选框的值

for (var i = 0; i<form1.hobby.length;i++){
    
    
    if (form1.hobby[i].checked){
    
    
        console.log(form1.hobby[i]);
        console.log(form1.hobby[i].value);
    }
}

因为复选框的值是多个的，所以需要使用数组遍历

checked判断复选框是否被选择，是一个boolean类型的值

4、获取下拉列表的值

console.log(form1.area.selectedIndex);

获取到的是下拉列表当前选中项阿索引。

17.4、表单的提交

1、Input_button提交

function f_but() {
    
    
    form1.submit();
}

2、submit提交

function f_sub() {
    
    
    if (form1.username.value===""){
    
    
        console.log("用户名不允许为空");
        return false;
    }
}

返回false则不提交，反之提交

3、button提交

点击button会自动执行下面的代码。submit如果没有指定onclick="return f_sub()"也会执行下面代码

form1.onsubmit = function () {
    
    
    if (form1.username.value === ""){
    
    
        console.log("用户名不允许为空");
        return false;
    }
}

18、正则

JavaScript中也可以使用正则

18.1、创建正则

1、RegExp

只匹配一个

var reg1 = new RegExp("\\ds");

2、/正则/g

/和/g中间写正则表达式，/g表示全局匹配

var reg2 = /\ds/g;

18.2、正则的使用

1、match

如果找到匹配项，则返回数组，否则返回null

var str = "as45s452fa4sdas";
console.log(str.match(reg1));   // 找到返回数组,只会匹配一个
console.log(str.match(reg2));   // 找到返回数组,匹配所有

2、test

和上面不同的是，如果找到匹配项就返回false,否则返回false

console.log(reg1.test(str)); // 找到返回true,找不到返回false
console.log(reg2.test(str))

一个后端程序员要知道前端知识

一个后端程序员要知道的前端知识

一、HTML

1、基础语法

1.1、标签

1.1.1、单标签

1.1.2、单标签属性

1.1.3、双标签

1.1.4、双标签属性

1.2、整体结构

1.3、body的属性

1.3.1、bgcolor

1.3.2、background

2、常用标签

2.1、P

2.2、br

2.3、hr

2.4、列表

2.4.1、ul

2.4.2、ol

2.5、DIV

2.6、span

2.7、font

2.8、 pre

2.9、 文本标签

2.10、a

2.11、img

2.12、table

2.13、form

2.13.1、input

2.13.2、textarea

2.13.3、label

2.13.4、button

2.13.5、select

2.14、常用字符实体

标签的分类

块级元素

行内元素

行内块状元素

二、CSS

1、CSS的基本使用

1.1、 CSS基本语法

1.2、 注释

1.3、CSS的使用

2、CSS选择器

2.1、 基本选择器

通用选择器

元素选择器

ID选择器

类选择器

分组选择器

2.2、组合选择器

后代选择器（派生选择器）

子元素选择器

相邻兄弟选择器

普通兄弟选择器

3、CSS常用属性设置

3.1、背景

3.1.1、background-color

3.1.2、background-image

3.1.3、background-repeat

3.2文本

3.2.1、color

3.2.2、text-align

3.2.3、text-decoration

text-indent

3.3、字体

3.3.1、font-family

3.3.2、font-size

3.3.3、font-style

3.3.4、font-weight

3.4、对齐方式

3.4.1、text-align

3.5、display属性

3.6、浮动

3.7、盒子模型

3.7.1、border

3.7.2、padding

3.7.3、margin

三、JavaScript

2.9、文本标签

1.2、注释

2.1、基本选择器