WEB前端基础

WEB通信

web通信机制

最基本的http请求方式:

1. 客户端向服务器端发起一个请求
2. 服务器端接收到请求后会在服务器端进行业务逻辑处理运算
3. 服务器端返回结果到客户端

一个很实在的例子就是当你打开这个页面是，浏览器根据网址向网站服务器发送请求，服务器端返回这个页面的内容，然后你开始浏览这篇文章，在你阅读这 篇文章的时候服务器端，如果作者更新了这篇文章，你不重新F5刷新页面，那你是不知道这篇文章已经被更新了的，而且刷新一个页面所耗费的资源是比较多的。 这是比较原始的一直更新内容的方式，当然像这样的技术文章也不需要实现实时的更新。

http协议

web通信中最常用的协议

超文本传输协议（HyperText Transfer Protocol，缩写：http）是一种用于分布式，协作和超媒体信息系统的应用层协议。http是万维网的数据通信基础

http协议特点

简单方便

客户端服务器请求服务时，只需要传送请求方法和路径。

灵活

http允许传输任意类型的数据对象，正在传输的类型由Content-Type加以标记

无连接无状态

无连接的含义时限制每次连接只处理一个请求，服务器处理完客户的请求，并受到客户的响应后，断开连接，采用这种方式可以节省传输时间。另一方面，无连接意味着无状态

无状态是指协议对于事物的处理没有记忆能力。缺少状态意味着如果后续处理许哟啊前面的信息就必须重传，这样可能导致每次连接传送的数据量增大（一般而言，服务器通过每一个登陆永固维持一个绘画session来记忆其状态）

http请求方式

GET： 请求指定的页面信息，并返回实体主体。
HEAD： 只请求页面的首部。
POST： 请求服务器接受所指定的文档作为对所标识的URI的新的从属实体。
PUT： 从客户端向服务器传送的数据取代指定的文档的内容。
DELETE： 请求服务器删除指定的页面。
OPTIONS： 允许客户端查看服务器的性能。
TRACE： 请求服务器在响应中的实体主体部分返回所得到的内容。
PATCH： 实体中包含一个表，表中说明与该URI所表示的原内容的区别。
MOVE： 请求服务器将指定的页面移至另一个网络地址。
COPY： 请求服务器将指定的页面拷贝至另一个网络地址。
LINK： 请求服务器建立链接关系。
UNLINK： 断开链接关系。
WRAPPED： 允许客户端发送经过封装的请求。
Extension-mothed：在不改动协议的前提下，可增加另外的方法。

http协议状态码

1xx：指示信息–表示请求已接收，继续处理。
2xx：成功–表示请求已被成功接收、理解、接受。
3xx：重定向–要完成请求必须进行更进一步的操作。
4xx：客户端错误–请求有语法错误或请求无法实现。
5xx：服务器端错误–服务器未能实现合法的请求。常见状态代码、状态描述的说明如下。
200 OK：客户端请求成功。
400 Bad Request：客户端请求有语法错误，不能被服务器所理解。
401 Unauthorized：请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用。
403 Forbidden：服务器收到请求，但是拒绝提供服务。
404 Not Found：请求资源不存在，举个例子：输入了错误的URL。
500 Internal Server Error：服务器发生不可预期的错误。
503 Server Unavailable：服务器当前不能处理客户端的请求，一段时间后可能恢复正常

http url

URL（Uniform Resource Locator,统一资源定位器），它是WWW的统一资源定位标志，就是指网络地址。

格式http://host:port/path

http:表示通过http协议来定位网络资源

host：表示合法的Internet主机域名或者IP地址

port：指定的端口号（为空http协议默认使用80端口）

path：指定请求的url资源

http请求格式

访问百度响应头

HTTP/1.1 200 OK
Bdpagetype: 2
Bdqid: 0xe635a52c00042745
Cache-Control: private
Connection: keep-alive
Content-Encoding: gzip
Content-Type: text/html;charset=utf-8
Date: Sun, 15 Nov 2020 05:10:45 GMT
Expires: Sun, 15 Nov 2020 05:10:45 GMT
Server: BWS/1.1
Set-Cookie: BDSVRTM=228; path=/
Set-Cookie: BD_HOME=1; path=/
Set-Cookie: H_PS_PSSID=32810_1428_33038_32952_33060_31253_32973_32705_33099_33101_32962_32937_32845; path=/; domain=.baidu.com
Strict-Transport-Security: max-age=172800
Traceid: 1605417045283252404216588346410886506309
X-Ua-Compatible: IE=Edge,chrome=1
Transfer-Encoding: chunked

请求头

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6
Cache-Control: max-age=0
Connection: keep-alive
Cookie: BAIDUID=849E1C2EF8BC2F4DD48CDDDD356FC900:FG=1; BIDUPSID=849E1C2EF8BC2F4D54C403BDD229E1B3; PSTM=1603081365; BD_UPN=12314753; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; BDUSS=TdmQkQ5S1UwZ01hclNmbGRycktGMVBDZ2xRZkYyNU4zclpVSE81MGhPYWpqdEZmRVFBQUFBJCQAAAAAAAAAAAEAAAC4lc0~vb-6zs69z6rLrtLgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKMBql-jAapfO; BDUSS_BFESS=TdmQkQ5S1UwZ01hclNmbGRycktGMVBDZ2xRZkYyNU4zclpVSE81MGhPYWpqdEZmRVFBQUFBJCQAAAAAAAAAAAEAAAC4lc0~vb-6zs69z6rLrtLgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKMBql-jAapfO; BD_HOME=1; H_PS_PSSID=32810_1428_33038_32952_33060_31253_32973_32705_33099_33101_32962_32937_32845; BDRCVFR[feWj1Vr5u3D]=I67x6TjHwwYf0; delPer=0; BD_CK_SAM=1; PSINO=1; sug=3; sugstore=0; ORIGIN=2; bdime=0; H_PS_645EC=26efHYANGrZAAsM4NaeJh6Zgrjav3uUNE7n1vzEpLdgGLUuAW2ipRiC1R4WaxSNycZn0; BA_HECTOR=042h0g250020a0arug1fr1ds60o; BDSVRTM=0
Host: www.baidu.com
Sec-Fetch-Dest: document
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: none
Sec-Fetch-User: ?1
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36 Edg/86.0.622.69

http参数详解

Header	解释	示例
Accept	指定客户端能够接收的内容类型	Accept: text/plain, text/html
Accept-Charset	浏览器可以接受的字符编码集。	Accept-Charset: iso-8859-5
Accept-Encoding	指定浏览器可以支持的web服务器返回内容压缩编码类型。	Accept-Encoding: compress, gzip
Cookie	HTTP请求发送时，会把保存在该请求域名下的所有cookie值一起发送给web服务器。	Cookie: $Version=1; Skin=new;
onnection	表示是否需要持久连接。（HTTP 1.1默认进行持久连接）	Connection: close
Accept-Language	浏览器可接受的语言	Accept-Language: en,zh
Referer	先前网页的地址，当前请求网页紧随其后,即来路	Referer: http://www.zcmhi.com/archives/71.html
Host	指定请求的服务器的域名和端口号	Host: www.zcmhi.com
From	发出请求的用户的Email	From: user@email.com

重要字段

Content-Type 请求内容类型

User-Agent 请求的浏览器环境，常用于反爬虫

Referer 请求的源地址，常用于反盗链

Cookie 本地登陆或访问凭证

网站搭建

HTML语言基础

简介

HTML指的是超文本标记语言（Hyper Text Markup Luaguage）

1980年，物理学家蒂姆-伯纳斯-李在欧洲核子研究中心，在工程承包期间，为使CERN的研究人员使用并共享文档，他提出并船舰原型系统ENQUIRE。1989年，伯纳斯-李在一备忘录中提出一个基础互联网的超文本系统。他规定了HTML并在1990年底写出浏览器和服务器软件

网页的三大组成部分

结构标准：结构对网页元素进行整理和分类，指的是HTML

表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS

行为标准：行为是指网页模型的定义及交互的编写，指的的是JavaScript

HTML常用标签

文本标签

<h1></h1>-<h6></h6>	标题
<hr>	分割线
<br>	换行
<p></p>	段落
<i></i>	斜体
<em></em>	强调斜体
<b></b>	加粗
<strong></strong>	强调加粗
<del></del>	删除线
<sup></sup>	上标
<sub></sub>	下标

特殊字符

属性	显示样式
&It	<
&gt	>
&reg	®
&copy	©
&trade	™
&nbsp	(空格)

列表标签

列表标签分为无序、有序、定义列表

无序列表

标签<ul>，列表项<li>

​ <ul><li>列表</li></ul>

​ <ul><li>列表</li></ul>

​ <ul><li>列表</li></ul>

Type属性值

值	描述
disc	圆点
square	正方形
circle	空心圆

有序列表

<ol><li>列表</li></ol>

<ol><li>列表</li></ol>

<ol><li>列表</li></ol>

Type属性值

值	描述
1	数字1，2…
a	小写字母a,b…
A	大写字母A，B…
i	小写罗马数字 i,ⅱ…
I	大写罗马数字Ⅰ，Ⅱ…

定义列表

<dl>

​ <dt>定义列表项</dt>

​ <dd>定义列表描述</dd>

​ <dd>定义列表描述</dd>

​ <dt>定义列表项</dt>

​ <dd>定义列表描述</dd>

​ <dd>定义列表描述</dd>

….

</dl>

图像标签

语法：

<img src=”” alt=”” …>

属性值

属性	值	描述
Src	URL	显示图像的URL
Alt	文字	图像替代文本
Height	数值和百分比	图像的高
Width	数值和百分比	图像的宽

超链接标签

语法

<a herf=”” ></a>

herf：链接地址，可以是内部连接也可以是外部连接

属性值

属性	描述
herf	链接地址
target	链接得到目标窗口_self（本页跳转）、__blank(新窗口)、_top_parent
title	链接显示文字
name	链接命名

表格

名	描述
table	表格
caption	标题
tr	行标签
th	列头标签
td	列标签

属性值

属性	值	描述
Cellpadding	数值	单元格内容与其边框之间距离（边距）
Cellspacing	数值	单元格之间的距离

表单

<form></form>

属性值

属性	描述
action	提交目的的地址
method	提交方式（Post、Get）
enctype	提交类型
target	在何处打开目标URL

input标签

<input type=”” name=””>

input类型值

text、password、number、button、reset、submit、hidden、radio、checkbox、file、image、color、range、date、month、week、time、datetime-local。

属性	描述	示例
text	文本	<input type=”text” />
password	密码	<input type=”password” />
number	数字
button	按钮
range	滑动条
submit	提交
color	颜色	<input type=”image” src=”http://p0.so.qhimgs1.com/bdr/_240_/t01cbdeda95800117ac.jpg" />
radio	单选框	一组radio，name值一定要一样
checkbox	复选框	一组checkbox，name值一定要一样
file	选择文件
image	图像
date	日期
search	搜索框
reset	重置
hidden	隐藏	<input type=”hidden” />
url	路径

CSS基础

CSS简介

CSS，（Cascading Style Sheets），层叠样式列表

作用

​ 结构与样式的分离，方便后期维护与改版

​ 可以用多套样式，是网页由任意样式切换的效果

​ 使页面载入的更快，降低服务器成本

CSS样式和引入方式

CSS引入方式有三种

​ 内部：直接使用style标签

<style>

	p{

		background-color: red;

		...

	}

</style>

​ 外部：link标签

<link rel="stylesheet" type="text/css" herf="import.css">

​ 行内：在标签内赋予style属性

<div style="backgroud-color: red;">
	
</div>

CSS常用样式

文本样式

属性	属性值	作用
color	表示颜色内容	设置文本颜色
direction	ltr、rtl（文本方向从右到左）	文本的反向/书写方向
letter-spacing	npx（n可以是负数）	字符间距
line-height	npx	背景是否随滚动条滚动
text-align	left、right、center、justify（两端对齐）	背景图像的起始位置
text-decoration	none、underline、overline、line-through	文本的修饰（下划线）
text-shadow	h-shadow、v-shadow、blurcolor	设置文本阴影
text-transform	none 、capitalize、uppercase、lowercase	改变字母大小写
text-indent	npx、nem	首行缩进

字体样式

属性	属性值	作用
font-family	隶书、仿宋、楷体等字体	设置字体
font-style	normal、italic、oblique	规定斜体文本
font-weight	normal、bold、100-900	文本的粗细
font-size	npx	字体大小

列表样式

属性	属性值	作用
list-style-type	none、disc、circle、square、decimal…	设置列表项目的外观
list-style-position	inside、outside	列表符号的位置
list-style-image	url、none	吧图像设置为列表项目的标记
list-style	同前面三个	简写属性，涵盖以后三个列表样式属性

CSS选择器

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

选择器	例子	例子描述	CSS
class	.intro	选择 class=”intro” 的所有元素。	1
#id	#firstname	选择 id=”firstname” 的所有元素。	1
*	*	选择所有元素。	2
element	p	选择所有 元素。	1
element,elemen	div,p	选择所有 元素和所有 元素。	1
element element	div p	选择 元素内部的所有 元素。	1
element*>element	div>p	选择父元素为 元素的所有 元素。	2
element+element	div+p	选择紧接在 元素之后的所有 元素。	2
[attribute]	[target]	选择带有 target 属性所有元素。	2
[attribute=value]	[target=_blank]	选择 target=”_blank” 的所有元素。	2
[attribute~=value]	[title~=flower]	选择 title 属性包含单词 “flower” 的所有元素。	2
[attribute|=value]	[lang|=en]	选择 lang 属性值以 “en” 开头的所有元素。	2
:link	a:link	选择所有未被访问的链接。	1
:visited	a:visited	选择所有已被访问的链接。	1
:active	a:active	选择活动链接。	1
:hover	a:hover	选择鼠标指针位于其上的链接。	1
:focus	input:focus	选择获得焦点的 input 元素。	2
:first-letter	p:first-letter	选择每个 元素的首字母。	1
:first-line	p:first-line	选择每个 元素的首行。	1
:first-child	p:first-child	选择属于父元素的第一个子元素的每个 元素。	2
:before	p:before	在每个 元素的内容之前插入内容。	2
:after	p:after	在每个 元素的内容之后插入内容。	2
:lang(language)	p:lang(it)	选择带有以 “it” 开头的 lang 属性值的每个 元素。	2
element1~element2	p~ul	选择前面有 元素的每个 元素。	3
[attribute^=value]	a[src^=”https”]	选择其 src 属性值以 “https” 开头的每个 元素。	3
[attribute$=value]	a[src$=”.pdf”]	选择其 src 属性以 “.pdf” 结尾的所有 元素。	3
[attribute*=value]	a[src*=”abc”]	选择其 src 属性中包含 “abc” 子串的每个 元素。	3
:first-of-type	p:first-of-type	选择属于其父元素的首个 元素的每个 元素。	3
:last-of-type	p:last-of-type	选择属于其父元素的最后 元素的每个 元素。	3
:only-of-type	p:only-of-type	选择属于其父元素唯一的 元素的每个 元素。	3
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个 元素。	3
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个 元素。	3
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。	3
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个 元素的每个 元素。	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。	3
:last-child	p:last-child	选择属于其父元素最后一个子元素每个 元素。	3
:root	:root	选择文档的根元素。	3
:empty	p:empty	选择没有子元素的每个 元素（包括文本节点）。	3
:target	#news:target	选择当前活动的 #news 元素。	3
:enabled	input:enabled	选择每个启用的 元素。	3
:disabled	input:disabled	选择每个禁用的 元素	3
:checked	input:checked	选择每个被选中的 元素。	3
:not(selector)	:not(p)	选择非 元素的每个元素。	3
::selection	::selection	选择被用户选取的元素部分。	3

实例

/* 所有元素选择器 *，通常用于去除边距 */
* {
    padding: 0;
    margin: 0;
}

/* 类选择器，通常用于设置一类样式 */
.color-red {
    color: red;
}

/* id 选择器，通常在一个页面内是唯一的 */
#my-id {
    text-indent: 4em;
}

/* 标签选择器(多个标签逗号隔开)，指定所有标签的样式 */
p {
    text-indent: 2em;
}

/* 子孙元素选择器，直接或间接包含的元素 */
div div {
    background-color: pink;
}

.menu div {
    width: 70px;
    text-align: center;
    border: 1px solid black;
    float: left;
    background-color: pink;
}
.menu div:hover {
    background-color: deeppink;
}

/* 子元素选择器，直接元素 */
.outer>div {
    background-color: hotpink;
}

/* 紧跟在指定元素后的另一个元素 */
.l2+div {
    background-color: deeppink;
}

/* 伪类选择器 */
a:link {
    color: green;
}
a:visited {
    color: greenyellow;
}
a:hover {
    color: white;
}
p:first-letter {
    font-size: 20px;
}

li:first-child {
    background-color: blue;
}

li:nth-child(3) {
    background-color: yellow;
}
li:nth-child(2n) {
    background-color: gray;
}

/* 伪元素选择器 */
p::selection {
    background-color: pink;
    color: hotpink;
}

Javascript语言基础

语法基础

变量的声明与定义

// 变量的声明，定义多个局部变量
var a = 0, b = 0, c = 0;

// 全局变量的定义不需要添加关键字
ga = 0, gb = 0, gc = 0;

// 语句块变量，只能在包含它的语句块中使用
let la = 0, lb = 0, lc = 0;

获取变量的类型

// 获取变量的类型
console.log(typeof(true), typeof(1))

// 通常通过判断一个变量的类型是否是 undefined 确定它有没有被创建
console.log(typeof(pb51))

// number 表示数值，可以是浮点数小数以及 NaN，通过 isNaN 判断是不是 number
console.log(isNaN(123), isNaN("abc"))

数值转换

// 数值转换 Number，将一个有效的数字字符串转换成相应的 number
console.log(Number("123"), Number("123abc"))

// 数值转换 parseInt，支持十六进制和十进制，从开始位置转换到非数字字符
console.log(parseInt("123"), parseInt("0x123"), parseInt("123abc"))

// 数值转换 parseFloat，转换成浮点数，使用和 parseInt 类似
console.log(parseFloat("123.123"), parseFloat("123.1abc"))

// 可以将任何对象(实现了 toString)通过 toString 转换成 String 类型，
console.log(String(123))

逻辑运算

// 全等比较，同时比较类型和数值是否相同
console.log(123 == "123")
console.log(123 === "123")

// 并且操作，返回假的那个
console.log("" && 123)

// 或者操作，返回真的那个
console.log("" || 123)

// ! 和 !! ，! 返回的永远是 boolean，!!用于将自己转换成 boolean
console.log(!!"123")

实例

// 判断密码是否正确的一个例子
var password = "123abc";
console.log(Number(password))

if (password.length < 6)
    console.log("请输入6位数字密码")
else
    // 通过 Number 转换的返回值确定是不是全整数
    // NaN 和包括自己在内的任何值比较都是 false
    if (isNaN(Number(password)))
        console.log("请输入数字密码")
    else
        console.log("密码格式正确")

console.log(NaN == NaN)
console.log(isNaN(NaN))

// 循环输出 0 到 100 的所有值
for (let number = 0; number < 100; ++number)
console.log(number)

// 打印九九乘法表
for (let x = 1; x <= 9; ++x)
{
    for (let y = 1; y <= x; ++y)
    {
        console.log(y, "×", x, "=", y*x)
        console.log('\n')
    }
}

函数的定义

// js 使用 function 定义函数
function func(a, b, c) {
    console.log(a, b, c);
}

func(1, 2, 3)
func("a", "b", "c")

function func2()
{
    // 在每一个函数中都有一个 arguments，保存的是由参数组成的列表
    console.log(arguments[1])
}
func2(1, 2, 3)

var func3 = function (a, b, c) { 
    console.log(a,b, c)
}
func3(3, 4, 5)

// 箭头函数和匿名函数之间在操作 DOM 或者 BOM 对象的时候，作用域的表现不同
var fun4 = (a, b, c)=>{
    console.log(a, b, c)
}
fun4(1, 2, 3)

对象的使用

添加元素

概览

array = new Array(1, 2, 3, 4, 5);
array

// push 将元素按顺序添加到数组的结尾
array.push('r1', 'r2', 'r3');
array;

// 通过设置 length 可以截断数组
array.length = 1
console.log(array)

// 顺序将元素的添加到数组的开头
array.unshift('l1', 'l2', 'l3')
console.log(array)

// 删除数组的最后一个元素
array.pop()
console.log(array)

// 删除数组的第一个元素
array.shift()
console.log(array)

// 将数组转换成字符串
str = array.join('')
console.log(str)

// 反转数组中的所有元素
str = array.reverse()
console.log(str)

// 对列表进行排序，提供的函数规定了排序的方式
console.log([1, 2, 3, 4].sort((a,b)=>a-b))

// 删除元素
array = [1, 2, 3, 4]
console.log(array.splice(0, 3))// 返回删除的元素组成的数组
console.log(array)

// 增加元素
array = [1, 2, 3, 4]
array.splice(3, 0, 11, 12, 13, 14)
console.log(array)

// 替换元素
array = [1, 2, 3, 4]
array.splice(0, 1, 'a', 'b', 'c', 'd')
console.log(array)

// 查找元素，从前查找第一个后从后查找第一个
console.log([1, 2, 3, 4, 2].indexOf(2))
console.log([1, 2, 3, 4, 2].lastIndexOf(2))


string = String();

// 查找字串
console.log("helloworld".indexOf('lo'))
console.log("helloworld".lastIndexOf('o'))

// 访问元素
console.log("helloworld"[4])
console.log("helloworld".charAt(4))
console.log("helloworld".charCodeAt(3))

// 分割，可以接受负数，从后开始计算
console.log("helloworld".slice(0, -1))
// 分割，两个值的顺序无所谓，从小到大
console.log("helloworld".substring(10, 4))
// 分割，第一个参数是位置，第二个参数是个数
console.log("helloworld".substr(3, 5))

// 定义一个函数，函数接受一个文件名并返回后缀
function func1(file) {
    // 通过关键字 debugger 设置断电
    debugger

    // 1. 从后向前查找 .
    index = file.lastIndexOf('.');
    return file.slice(index + 1)
}
console.log(func1("12.3456.txt"))
console.log(func1("12.3456.docx"))

// 以指定分割符为边界进行分割
console.log("helloweorld".split('e'))

// 替换文本，可以用正则，也可以不用
console.log("helloworldh".replace(/^h/, 'w'))

// 转换字母大小写
console.log("helloworldh".toLowerCase())
console.log("helloworldh".toUpperCase())

// 接受一段英文的语句，将除首单词外的所有单词首元素大写

function func2(content) {
    // 将字符串以空格切割成数组
    let l = content.split(' ')

    // 不遍历首元素，修改其它元素
    for (let i = 1; i < l.length; ++i) {
        // 取出第一个字符，转换成大写，再和出第一个字符外的其它进行拼接
        l[i] = l[i].charAt(0).toUpperCase() + l[i].slice(1);
    }

    return l.join(' ')
}
console.log(func2('aaaa bbbb cccc dddd'))

var m = 20, n = 10;
random=Math.floor(Math.random()*(m-n+1)+n);
console.log(Math.min(1,2,3))



function mul(a, b) {
    return a * b;
}

a = "1111" * "2222";
try {
    mul("111", "aaa")   
    a = "1111" * "2222";
} catch (error) {
    console.log('1233')
}

DOM事件

HTML DOM 允许 JavaScript 对 HTML 事件作出反应：

对事件作出反应

JavaScript 能够在事件发生时执行，比如当用户点击某个 HTML 元素时。

为了在用户点击元素时执行代码，请向 HTML 事件属性添加 JavaScript 代码：

HTML 事件的例子：

• 当用户点击鼠标时
• 当网页加载后
• 当图像加载后
• 当鼠标移至元素上时
• 当输入字段被改变时
• 当 HTML 表单被提交时
• 当用户敲击按键时

实例代码

<!DOCTYPE html>
<html>
<body>

<h1 onclick="changeText(this)">请点击此文本！</h1>

<script>
function changeText(id) {
  id.innerHTML = "谢谢！";
}
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="myonclick()">修改节点</button>
    <button onclick="myonclick2()">添加节点</button>
    <script>
        function myonclick() {
            // 获取到 my-id 节点的元素
            var ol = document.getElementById('my-id');
            // 通过 querySelector 可以设置十分复杂的选择器查找规则
            var test = document.querySelector('.my-id>div');
            // 遍历该节点下的所有结点
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].innerHTML = "新的内容" + i;
                if (i == 1) {
                    ol.children[i].style.backgroundColor = 'red';
                }
            }
        }
        function myonclick2() {
            var button = document.createElement('button');
            button.innerHTML = '新的按钮';
            document.body.appendChild(button);
        }
    </script>

</body>
</html>