本文仅为自己web基础的学习笔记，无其他任何用处，学习路线和内容引自Y4师傅（@Y4tacker）文章

HTML

常规元素（双标签）

<标签名>内容</标签名>
<body>  我是文字  </body>
还有<html><head><title><body><table><tr><td><span><p><form><h1><h2><h3><h4><h5><h6><object><style><b><u><strong><i><div><a><script><center>

对于尖括号使用

&lt; <
&gt; >

空元素（单标签）

<标签名 />
<br />在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。还有 hr, img, input, param, meta, link

标签功能：
基本
<html>…</html>      定义 HTML 文档
<head>…</head>      文档的信息
<meta>              HTML 文档的元信息
<title>…</title>    文档的标题
<link>              文档与外部资源的关系
<style>…</style>    文档的样式信息
<body>…</body>      可见的页面内容
<!--…-->            注释文本
<h1>...</h1>           小（h1~h6）
<b>...</b>             粗体字
<strong>...</strong>   粗体字(强调)
<i>...</i>             斜体字
<em>...</em>           斜体字(强调)
<center>…</center>     居中文本
<ul>…</ul>             无序列表
<ol>…</ol>             有序列表
<li>…</li>             列表项目
<a href="…">…</a>      超链接
<font>                 定义文本字体尺寸、颜色、大小、
<sub>                  下标
<sup>                  上标
<br>                   换行
<p>                    段落图形
<img src="...">           定义图像
<hr>                   水平线表格
<table>…</table>      定义表格
<th>…</th>            定义表格中的表头单元格
<tr>…</tr>            定义表格中的行
<td>…</td>            定义表格中的单元其它
<form>…</form>        定义供用户输入的 HTML 表单
<frame>               定义框架集的窗口或框架另加16进制颜色，但仅仅有16种颜色名可用英文字母，其余的要用16进制值。 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

input标签

首先先来说说html input标签的属性：
1.type：
该属性是input标签里唯一的必须输入的属性，当然，也可以不填，默认为type = "text"。具体它有那些值，我们后面再讨论。2.required：
标记一个字段是否为必须。如果一个字段被标记为required = "required"（严格模式下），或者required（宽松模式下）(ps：下面属性的写法同理，就不一一写出了)，并且这个字段的值为空，或者填入的值是无效值，那么这个表单不能提交。什么是无效值？看pattern属性。3.pattern：该属性包含了一个JavaScript风格的正则表达式，输入的内容必须完全匹配该正则表达式，不然就算输入的内容无效。对正则表达式不了解？可以去看看JavaScript 正则表达式。4.min max：这两个属性用于日期date时间time等输入，还有number和range。顾名思义，它们的作用是限制最大值，最小值。5.step：和max min类似，作用是提供一个可以上下点的按钮，比如当前数字是1，你设置了step = "5"，点一下上的按钮，就变成6了。6.placeholder：该属性不多说，大家应该都很熟悉，一般是用来提示用户输入的，当用户真的输入了文字之后，会被输入的文字覆盖。7.readonly：顾名思义，该属性会让表单空控件不可编辑。这里的不可编辑不是禁用，只是不能编辑文本而已，比如像单选框radio，复选框checkbox这种，本来就是不可编辑的，所以这个属性对它们来说毫无意义。8.disabled：该属性会禁用一个表单元素。这里是禁用，完全禁用掉除了<output>之外的所有表单元素。9.maxlength ：该属性用于限制用户输入的最大字数限制。10.size：已经没什么时候实际的作用了，控制大小现在几乎都是由CSS控制了。11.form：在HTML5中，表单控件已经没有必要嵌套在一个表单中，新的form属性可以把表单元素与页面上的任意的表单关联起来。也可以被嵌套在一个表单中，随着另一个表单提交，代码如下：<form id="form1"></form>
<p>
<label for="admin">admin</label>
<input type="text" id="admin" form="form1"/>
</p>这样，就把form和input联系起来了。如果input没有form属性，那么，它将被关联到离他最近的form表单。12.autocomplete：顾名思义，自动完成，用户输入一部分，后面的自动补全。需要浏览器保存用户输入的内容，以便下一次自动补全。13.autofocus：该属性指的是表示这个表单控件在页面载入的时候自动获得焦点。以上就是html input标签的属性了。

Input类型:
1.color: 在input字段主要用于选取颜色
选择你喜欢的颜色: <input type="color" name="favcolor">2.date: 允许你从一个日期选择器选择一个日期
生日: <input type="date" name="bday">3.datatime: 允许你选择一个日期（UTC 时间）
生日 (日期和时间): <input type="datetime" name="bdaytime">4.datetime-local: 允许你选择一个日期和时间 (无时区)
生日 (日期和时间): <input type="datetime-local" name="bdaytime">5.email: 用于应该包含 e-mail 地址的输入域
E-mail: <input type="email" name="email">6.month: 允许你选择一个月份
生日 (月和年): <input type="month" name="bdaymonth">7.number: 用于应该包含数值的输入域
数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">8.range: 用于应该包含一定范围内数字值的输入域, range 类型显示为滑动条。
使用下面的属性来规定对数字类型的限定：
max - 规定允许的最大值
min - 规定允许的最小值
step - 规定合法的数字间隔
value - 规定默认值
<input type="range" name="points" min="1" max="10">9.search: 用于搜索域，比如站点搜索或 Google 搜索。
Search Google: <input type="search" name="googlesearch">10.tel: 定义输入电话号码字段
电话号码: <input type="tel" name="usrtel">11.time: 允许你选择一个时间。
选择时间: <input type="time" name="usr_time">12.url: 用于应该包含 URL 地址的输入域。
在提交表单时，会自动验证 url 域的值。
添加您的主页: <input type="url" name="homepage">

JavaScript正则表达式

深入理解HTML表单

文档类型

文档类型 <!DOCTYPE>的基本介绍:

首先是在html中长啥样

<!DOCTYPE html>

作用：
<!DOCTYPE> 声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

HTML文件必须加上DOCTYPE声明

接下来会看到这个东西：（一般默认）

<html lang="en">  指定html的语言种类

我们给出其中最为常见的2个：

  1. en定义语言为英语
  2. zh-CN定义语言为中文

字符集

<meta charset="UTF-8" />
1
字符集(Character set)简单来说就是多个字符的集合。
计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。

HTML常用标签

标题标签(head)

<h1> 标题1 </h1>
...
<h6> 标题6 </h6>

段落标签(paragraph)

<p> 文本内容 </p>

水平线标签(horizontal)

<hr />

换行标签(break)

<br />

div和span标签

<div>aaa</div> 用来布局,一行一个div
<span>vv</span><span>dd</span> 一行多个span

标签属性:
如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。

<标签名 属性1="属性值1" 属性2="属性值2" ...> 内容 </标签名>

图像标签 img

<img src="图像URL" /> URL可以是网络地址,也可以是本地地址

该语法中src属性用于指定图像文件的路径和文件名，是img标签的必需属性, 不然会报错, XSS漏洞的一种利用类型就是在图片加载错误时用onerror触发js代码.

表单标签 form

<form method="get">
<input class="xssr_in" type="text" maxlength="20" name="message">
<input class="xssr_submit" type="submit" name="submit" value="submit">
</form>

表单一般用于规定提交方法

链接标签

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
属性名称 作用
href 用于指定链接目标的url地址，实现超链接的功能
target 用于指定链接页面的打开方式，其取值有_self和_blank最常见的两种，其中_self为默认值，如果设置则为当前窗口，__blank为在新窗口中打开

注释标签

<!-- 注释语句 --> 快捷键时 ctrl+/ 或者ctrl+shift+/

相对路径

以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。

路径分类 符号 说明
同一级路径 无 只需输入图像文件的名称即可，如<img src="aq.jpg" />
下一级路径 / 图像文件位于HTML文件同级文件夹下（例如文件夹名称为：images） 如<img src="data:images/aq.jpg" />
上一级路径 ../ 在文件名之前加入../ ，如果是上两级，则需要使用 “…/ …/”，以此类推， 如<img src="../aq.jpg" />;

目录跳转

基本框架

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><h3>研究历史</h3><h3>物理性质</h3><h3>化学性质</h3><p>在化学史上，人们把氢元素的发现与“发现和证明了水是氢和氧的化合物而非元素”这两项重大成就，主要归功于英国化学家和物理学家卡文迪许（Cavendish，H.1731-1810）。</p>
</body>
</html>

实现

#代表id .代表class    css选择器
<h3><a href="#histpory">研究历史</a></h3>
<p id="history">在化学史上，人们把氢元素的发现与“发现和证明了水是氢和氧的化合物而非元素”这两项重大成就，主要归功于英国化学家和物理学家卡文迪许</p>

base标签

介绍: 标签为页面上的所有链接规定默认地址或默认目标

<head><base href="全局地址" target="全局属性" /></head>
或者
<head>
<base href="地址" />
<base target="_self" />
</head>

表格的基本使用

创建表格的方法：

<table><tr><td>单元格内文字</td>...</tr>...
</table>
  1. table用于定义一个表格标签。
  2. tr标签 用于定义表格中的行，必须嵌套在 table标签中。
  3. td 用于定义表格中的单元格，必须嵌套在标签中。
  4. 字母 td 指表格数据（table data），即数据单元格的内容
<!DOCTYPE html>
<html lang='zh-CN'>
<head><meta charset="UTF-8" /><title>我</title>
</head><body><table><tr><td>姓名</td><td>学号</td><td>学院</td></tr><tr><td>ysq</td><td>2019</td><td>信软</td></tr><tr><td>abd</td><td>2016</td><td>嗯嗯学院</td></tr></table></body>
</html>


注意啦

  • 中只能嵌套 类的单元格
  • 标签，他就像一个容器，可以容纳所有的元素
  • 表格没有列的概念！！！记清楚啦！！！

JavaScript

JavaScript代码位置

行内式

<input type="button" value="click" onclick="alert('Hello World')" />
  • 可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick
  • 注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
  • 可读性差， 在html中编写JS大量代码时，不方便阅读；
  • 引号易错，引号多层嵌套匹配时，非常容易弄混；

内嵌式

<script>alert('hello world');
</script>

在HTML5之后不需要写<script type="text/javascript">···</script>，而可以直接写<script>···</script>

一般内嵌式和行内式混合使用

<!DOCTYPE html>
<html>
<head>
<script>
function copyText()
{document.getElementById("field2").value=document.getElementById("field1").value;
}
</script>
</head>
<body>Field1: <input type="text" id="field1" value="Hello World!"><br>
Field2: <input type="text" id="field2"><br><br><button onclick="copyText()">复制文本</button><p>当按钮被单击时触发函数。此函数把文本从 Field1 复制到 Field2 中。</p></body>
</html>

  • 可以将多行JS代码写到 script 标签中
  • 内嵌 JS 是学习时常用的方式

外部JS文件的引用 ( 最好的 )

 <script src="my.js"></script>
  • 利于HTML页面代码结构化，把大段 JS代码独立到 HTML 页面之外，既美观，也方便文件级别的复用
  • 引用外部 JS文件的 script 标签中间不可以写代码
  • 适合于JS 代码量比较大的情况

HTML 事件属性

Window 事件属性

针对 window 对象触发的事件（应用到 标签）：

属性 值 描述
onafterprint script 文档打印之后运行的脚本。
onbeforeprint script 文档打印之前运行的脚本。
onbeforeunload script 文档卸载之前运行的脚本。
onerror script 在错误发生时运行的脚本。
onhaschange script 当文档已改变时运行的脚本。
onload script 页面结束加载之后触发。
onmessage script 在消息被触发时运行的脚本。
onoffline script 当文档离线时运行的脚本。
ononline script 当文档上线时运行的脚本。
onpagehide script 当窗口隐藏时运行的脚本。
onpageshow script 当窗口成为可见时运行的脚本。
onpopstate script 当窗口历史记录改变时运行的脚本。
onredo script 当文档执行撤销（redo）时运行的脚本。
onresize script 当浏览器窗口被调整大小时触发。
onstorage script 在 Web Storage 区域更新后运行的脚本。
onundo script 在文档执行 undo 时运行的脚本。
onunload script 一旦页面已下载时触发（或者浏览器窗口已被关闭）。

Form 事件

由 HTML 表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用在 form 元素中）：

属性 值 描述
onblur script 元素失去焦点时运行的脚本。
onchange script 在元素值被改变时运行的脚本。
oncontextmenu script 当上下文菜单被触发时运行的脚本。
onfocus script 当元素获得焦点时运行的脚本。
onformchange script 在表单改变时运行的脚本。
onforminput script 当表单获得用户输入时运行的脚本。
oninput script 当元素获得用户输入时运行的脚本。
oninvalid script 当元素无效时运行的脚本。
onreset script 当表单中的重置按钮被点击时触发。HTML5 中不支持。
onselect script 在元素中文本被选中后触发。
onsubmit script 在提交表单时触发。

Keyboard 事件

属性 值 描述
onkeydown script 在用户按下按键时触发。
onkeypress script 在用户敲击按钮时触发。
onkeyup script 当用户释放按键时触发。

Mouse 事件

由鼠标或类似用户动作触发的事件：

属性 值 描述
onclick script 元素上发生鼠标点击时触发。
ondblclick script 元素上发生鼠标双击时触发。
ondrag script 元素被拖动时运行的脚本。
ondragend script 在拖动操作末端运行的脚本。
ondragenter script 当元素元素已被拖动到有效拖放区域时运行的脚本。
ondragleave script 当元素离开有效拖放目标时运行的脚本。
ondragover script 当元素在有效拖放目标上正在被拖动时运行的脚本。
ondragstart script 在拖动操作开端运行的脚本。
ondrop script 当被拖元素正在被拖放时运行的脚本。
onmousedown script 当元素上按下鼠标按钮时触发。
onmousemove script 当鼠标指针移动到元素上时触发。
onmouseout script 当鼠标指针移出元素时触发。
onmouseover script 当鼠标指针移动到元素上时触发。
onmouseup script 当在元素上释放鼠标按钮时触发。
onmousewheel script 当鼠标滚轮正在被滚动时运行的脚本。
onscroll script 当元素滚动条被滚动时运行的脚本。

Media 事件

由媒介（比如视频、图像和音频）触发的事件（适用于所有 HTML 元素，但常见于媒介元素中，比如 、、、 以及 ）:

属性 值 描述
onabort script 在退出时运行的脚本。
oncanplay script 当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时）。
oncanplaythrough script 当媒介能够无需因缓冲而停止即可播放至结尾时运行的脚本。
ondurationchange script 当媒介长度改变时运行的脚本。
onemptied script 当发生故障并且文件突然不可用时运行的脚本（比如连接意外断开时）。
onended script 当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。
onerror script 当在文件加载期间发生错误时运行的脚本。
onloadeddata script 当媒介数据已加载时运行的脚本。
onloadedmetadata script 当元数据（比如分辨率和时长）被加载时运行的脚本。
onloadstart script 在文件开始加载且未实际加载任何数据前运行的脚本。
onpause script 当媒介被用户或程序暂停时运行的脚本。
onplay script 当媒介已就绪可以开始播放时运行的脚本。
onplaying script 当媒介已开始播放时运行的脚本。
onprogress script 当浏览器正在获取媒介数据时运行的脚本。
onratechange script 每当回放速率改变时运行的脚本（比如当用户切换到慢动作或快进模式）。
onreadystatechange script 每当就绪状态改变时运行的脚本（就绪状态监测媒介数据的状态）。
onseeked script 当 seeking 属性设置为 false（指示定位已结束）时运行的脚本。
onseeking script 当 seeking 属性设置为 true（指示定位是活动的）时运行的脚本。
onstalled script 在浏览器不论何种原因未能取回媒介数据时运行的脚本。
onsuspend script 在媒介数据完全加载之前不论何种原因终止取回媒介数据时运行的脚本。
ontimeupdate script 当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本。
onvolumechange script 每当音量改变时（包括将音量设置为静音）时运行的脚本。
onwaiting script 当媒介已停止播放但打算继续播放时（比如当媒介暂停已缓冲更多数据）运行脚本

JavaScript的输入输出语句

为方便信息的输入输出，JS中提供有一些输入输出语句，常用的语句如下：

方法 说明 归属
alert(msg) 浏览器弹出警示框 浏览器
console.log(msg) 浏览器控制台打印输出信息 浏览器
prompt(info) 浏览器弹出输入框，用户可以输入 浏览器
  • 注意：alert() 主要用来显示消息给用户，console.log() 用来给程序员自己看运行时的消息。
    -console可以在F12后进入控制台查看！！！
    -alert弹出一个小确认窗口

变量

变量命名规则

  • 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name
  • 严格区分大小写。var app; 和 var App; 是两个变量
  • 不能 以数字开头。 18age 是错误的
  • 不能 是关键字、保留字。例如：var、for、while
  • 变量名必须有意义。 MMD BBD nl → age
  • 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。

声明变量

var name

  • var 是一个 JS关键字，用来声明变量( variable 变量的意思 )。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管

  • name 是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间

  • 同时声明多个变量

    同时声明多个变量时，只需要写一个 var， 多个变量名之间使用英文逗号隔开。

 var age = 10,  name = 'zs', sex = 2;

数据类型

数据类型种类

  • 简单数据类型：Number，String，Boolean，Undefined，Null
  • 复杂数据类型：object

简单数据类型

数字型 Number

JavaScript中数字类型即可以为整数，也可以为小数

var age = 18;
var num = 12.323

数字型进制

八进制前面加 0，十六进制在前加 0x
var num1 = 023; //对应十进制的19
var num2 = 019; //还是十进制的19，因为超了
var num3 = 0xA; //对应十进制10

范围：

  • 最大值：Number.MAX_VALUE
  • 最小值：Number.MIN_VALUE
  • 特殊值：
    • Infinity,无穷大
    • -Infinity,无穷小
    • NaN, Not a Number

可以用isNaN来判断一个变量是否为非数字的类型，返回值true或false

var age = 18;
console.log(isNaN(age));            //false
var name = "Andy";
console.log(isNaN(name));           //true

字符串型 String

  • 字符串型可以是引号中的任意文本，其语法为 双引号 “” 和 单引号’’
var strMsg = "abc";    // 使用双引号表示字符串
var strMsg = 'abc';    // 使用单引号表示字符串

引号嵌套

var strMsg = '你是"hh"';   // 你是"hh"
var strMsg2 = "你是'hh'";  // 你是'hh'

字符串转义符

转义符 解释说明
\n 换行符，n 是 newline 的意思
\ \ 斜杠 \
’ ’ 单引号
" ”双引号
\t tab 缩进
\b 空格 ，b 是 blank 的意思

字符串长度的获取

var str = "我好想你！！";
alert(str.length);

布尔型Boolean

布尔类型的值：true和false

布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。

console.log(true + 1);  // 2
console.log(false + 1); // 1
  • Undefined和 Null

一个声明后没有被赋值的变量会有一个默认值undefined

  var age;console.log(age);              // undefinedconsole.log('hello' + age);  // helloundefinedconsole.log(11 + age);        // NaNconsole.log(true + age);     //  NaNvar name = null;console.log('hello' + name);  // hellonullconsole.log(11 + name);       // 11console.log(true + name);     //  1

获取变量数据类型

typeof可以用来检测变量的数据类型

var num = 18;
console.log(typeof(num));  //number

数据类型转换

常见用法：

  1. 转换为字符串类型
  2. 转换为数字型
  3. 转换为布尔型

1、转换为字符串：

方式 说明 例子
toString() 转成字符串 num.toString()
String() 强制转换 转成字符串 String(num)
js隐式转换( + ) 和字符串拼接的结果都为字符串 12 + “是字符串”
  • toString() 和String() 使用方式不一样

2、转换为数字型：

方式 说明 例子
parseInt(String) 函数 将String类型转换成整型 parseInt(‘12’)
parseFloat(String) 函数 将String类型转为浮点型 parseFloat(‘12.2’)
Number() 强制转换函数 将String类型转为数值型 Number(‘12’)
js隐式转换( - * / ) 利用算术运算符转换为数值型 ‘12’ - 0

3、转换为布尔型

方式 说明 例子
Boolean() 函数 其他类型转为布尔型 Boolean(‘s’)
  • 代表空、否定的值会被转换为false，如 ‘’、0、NaN、null、undefined
  • 其他的任何值都为true
    console.log(Boolean('')); // falseconsole.log(Boolean(0)); // falseconsole.log(Boolean(NaN)); // falseconsole.log(Boolean(null)); // falseconsole.log(Boolean(undefined)); // falseconsole.log(Boolean('abc')); // trueconsole.log(Boolean(12)); // true

请注意console.log(Boolean(' ')); // 引号里只要有东西就是`true``，甚至是空格。

运算符

算术运算符

+,-,*,/

浮点数精度问题：不要直接比较两个浮点数是否相等

var result = 0.1 + 0.2;        //结果不是0.3，而是0.30000000000000004
var result = 0.07 * 100;   // 结果不是 7，而是7.000000000000001

比较运算符

比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true / false）作为比较运算的结果。

===: 严格运算符

严格运算符的运算规则如下：
(1)不同类型值
如果两个值的类型不同，直接返回false。
(2)同一类的原始类型值
同一类型的原始类型的值(数值、字符串、布尔值)比较时，值相同就返回true，值不同就返回false。
(3)同一类的复合类型值
两个复合类型(对象、数组、函数)的数据比较时，不是比较它们的值是否相等，而是比较它们是否指向同一个对象。
(4)undefined和null
undefined和null 与自身严格相等。
null === null  //true
undefined === undefined  //false

==: 相等运算符

相等运算符在比较相同类型的数据时，与严格相等运算符完全一样。
在比较不同类型的数据时，相等运算符会先将数据进行类型转换，然后再用严格相等运算符比较。类型转换规则如下:
(1)原始类型的值
原始类型的数据会转换成数值类型再进行比较。字符串和布尔值都会转换成数值，所以题主的问题中会有第二个string输出。
(2)对象与原始类型值比较
对象(这里指广义的对象，包括数值和函数）与原始类型的值比较时，对象转化成原始类型的值，再进行比较。
(3)undefined和null
undefined和null与其他类型的值比较时，结果都为false，它们互相比较时结果为true。
(4)相等运算符的缺点
相等运算符隐藏的类型转换，会带来一些违反直觉的结果。
'' == '0' //false
0 == ''     //true
0 == '0'    //truefalse == 'false'  //false
false == '0'        //truefalse == undefined  //false
false == null     //false
null == undefined //true' \t\r\n ' == 0       //true

所以最好别用相等运算符==

逻辑运算符

逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断

  • 逻辑与&&

  • 逻辑或||

  • 逻辑非!

  • 短路运算（逻辑中断）:
    原理：当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;

  • 逻辑与
    语法：表达式1 && 表达式2

    • 如果第一个表达式的值为真，则返回表达式2

    • 如果第一个表达式的值为假，则返回表达式1

    • console.log( 123 && 456 );        // 456
console.log( 0 && 456 );          // 0
console.log( 123 && 456&& 789 );  // 789

  • 逻辑或
    语法：表达式1 || 表达式2

    • 如果第一个表达式的值为真，则返回表达式1

    • 如果第一个表达式的值为假，则返回表达式2

    • console.log( 123 || 456 );         //  123
console.log( 0 ||  456 );          //  456
console.log( 123 || 456 || 789 );  //  123

三元表达式

语法： 表达式1 ? 表达式2 : 表达式3;var a = 20;
var b = '10';
a==b ? alert('true'):document.write(false);     //false
  • 如果表达式1为 true ，则返回表达式2的值，如果表达式1为 false，则返回表达式3的值

数组

创建数组的两种方式

  • 利用new创建数组

    var arr = new Array();

  • 利用数组字面量创建数组（最常用）

    var arr = [];
var arr = ['a','b','c'];

JavaScript中一个数组中可以存放任意类型的数据，且不用声明长度。

var arr = ['a',1,true,1.23];

数组添加元素

直接在数组末尾加新元素即可或用数组的push方法

var arr = [1,2,3];
arr[arr.length] = 4;

数组的push()和pop()

数组对象的push与pop方法分别在数组的尾部添加与删除元素。push方法有若干个参数，也就是要添加到数组尾部的元素，而pop方法则没有参数，而是返回从数组尾部删除的元素。见下面的JS代码。

<script type="text/javascript">
var arr=["Html","css","JavaScript","DOM"]
var arr2=[1,2,3,4];
arr.push("PHP");
var poped=arr2.pop();
</script><!--
运行结束后，arr=["HTML","css","JavaScript","DOM","PHP"]
arr2=[1,2,3]
poped的值为4
-->

数组的unshift()和shift()

与push、pop类型，不过是在数组头操作

unshift()方法往Array的头部添加若干元素
shift()方法则把Array的第一个元素删掉<script>
var arr = [1,2,3];
arr.unshift(8,9);
alert(arr); // [8,9,1,2,3]
arr.shift();
alert(arr); // [9,1,2,3]
</script>

数组 toString()和join()方法

JavaScript 方法 toString() 把数组转换为数组值（逗号分隔）的字符串。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

结果

Banana,Orange,Apple,Mango

join() 方法也可将所有数组元素结合为一个字符串。

它的行为类似 toString()，但是您还可以规定分隔符：

var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");

结果

Banana * Orange * Apple * Mango

数组splice()方法

  • splice() 方法可用于向数组添加新项：

    • 第一个参数（2）定义了应添加新元素的位置（拼接）。
    • 第二个参数（0）定义应删除多少元素。
    • 其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。
    • splice() 方法返回一个包含已删除项的数组

实例一：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

结果

原数组：
Banana,Orange,Apple,Mango新数组：
Banana,Orange,Lemon,Kiwi,Apple,Mango

实例二：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = "原数组：<br> " + fruits;function myFunction() {var removed = fruits.splice(2, 2, "Lemon", "Kiwi"); document.getElementById("demo2").innerHTML = "新数组：<br>" + fruits;document.getElementById("demo3").innerHTML = "已删除项：<br> " + removed;
}

结果

原数组：
Banana,Orange,Apple,Mango新数组：
Banana,Orange,Lemon,Kiwi已删除项：
Apple,Mango

  • 使用splice()方法删除元素

    • 通过聪明的参数设定，您能够使用 splice() 在数组中不留“空洞”的情况下移除元素：
    • 第一个参数（0）定义新元素应该被添加（接入）的位置。
    • 第二个参数（1）定义应该删除多个元素。
    • 其余参数被省略。没有新元素将被添加。
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);        // 删除 fruits 中的第一个元素

    结果：

    原数组：
Banana,Orange,Apple,Mango新数组：
Orange,Apple,Mango

数组的concat()方法

concat() 方法通过合并（连接）现有数组来创建一个新数组：

  • concat() 方法不会更改现有数组。它总是返回一个新数组。
  • concat() 方法可以使用任意数量的数组参数

实例：

var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   // 将arr1、arr2 与 arr3 连接在一起

数组的slice()方法

slice() 方法用数组的某个片段切出新数组。

slice() 方法创建新数组。它不会从源数组中删除任何元素。

slice() 可接受两个参数，比如 (1, 3)。该方法会从开始参数选取元素，直到结束参数（不包括）为止。

  • 实例一：

    本例从数组元素 1 （"Orange"）开始切出一段数组：
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1);

    结果：

    原数组：
Banana,Orange,Lemon,Apple,Mango新数组：
Orange,Lemon,Apple,Mango

  • 实例二：

    var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;

    结果：

    原数组：
Banana,Orange,Lemon,Apple,Mango新数组：
Orange,Lemon

数组的sort()方法

sort() 方法以字母顺序对数组进行排序：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // 对 fruits 中的元素进行排序

结果：

Apple,Banana,Mango,Orange

数组的reverse()方法

reverse() 方法反转数组中的元素。

可以使用它以降序对数组进行排序：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // 对 fruits 中的元素进行排序
fruits.reverse();         // 反转元素顺序

数字数组排序的比值函数

默认地，sort() 函数按照字符串顺序对值进行排序。

该函数很适合字符串（“Apple” 会排在 “Banana” 之前）。

不过，如果数字按照字符串来排序，则 “25” 大于 “100”，因为 “2” 大于 “1”。

正因如此，sort() 方法在对数值排序时会产生不正确的结果。

我们通过一个比值函数来修正此问题：

数字升序：
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;  function myFunction() {points.sort(function(a, b){return a - b});document.getElementById("demo").innerHTML = points;
}数字降序：
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;  function myFunction() {points.sort(function(a, b){return b - a});document.getElementById("demo").innerHTML = points;
}

比值函数原理：

sort(function(a,b){return a - b;
})等价于sort(function(a,b){if(a < b) {return -1;}if(a > b) {return 1;}if(a == b) {return 0;}
})1. 如果return返回-1,表示a小于b,数组排序中a会排在b之前
2. 如果return返回1,表示a大于b,数组排序中a会排在b之后
3. 如果return返回0,表示a与b相等,其位置保持不变

底层实现机制：底层原理详见源码 第710行

数组的随机排序

var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;  function myFunction() {points.sort(function(a, b){return 0.5 - Math.random()});document.getElementById("demo").innerHTML = points;
}

查找最高（或最低）的数组值

JavaScript 不提供查找数组中最大或最小数组值的内建函数。

不过，在对数组进行排序之后，您能够使用索引来获得最高或最低值。

升序排序后：
points[0] 包含最低值
points[points.length-1] 包含最高值降序排序后
相反

Math.max.apply和Math.min.apply

可以使用 Math.max.apply 来查找数组中的最大值：

var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMax(points);function myArrayMax(arr) {return Math.max.apply(null, arr);
}

可以使用 Math.min.apply 来查找数组中的最小值：

var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMax(points);function myArrayMax(arr) {return Math.min.apply(null, arr);
}

同时，Math.max.apply([1, 2, 3]) 等于 Math.max(1, 2, 3)。

Math.max.apply(null,arr)第一个形参可以是 math、window、null，直接用null就可以了

根据数组中对象的属性排序

即使对象拥有不同数据类型的属性，sort() 方法仍可用于对数组进行排序。

解决方法是通过比较函数来对比属性值：

//实例
var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}];
//根据年份排序
cars.sort(function(a, b){return a.year - b.year});
//根据类型排序
cars.sort(function(a, b){var x = a.type.toLowerCase();var y = b.type.toLowerCase();if (x < y) {return -1;}if (x > y) {return 1;}return 0;
});

函数

声明函数

  • 命名函数

    //声明定义
function f(){//函数体
}//声明定义//调用
f();

  • 匿名函数

    var f = function(){···};
f();

调用函数

函数名();       //小括号不可忘！！！

函数的参数

  • 形参

  • 实参

    function f(形参1,形参2,···) {//函数体
}
f(实参1,实参2,···)；

注意：在JavaScript中，形参的默认值是undefined。

函数返回值

return 语句

function 函数名() {···return 返回值;
}
var a = 函数名();     //此时a为函数的返回值
  • 在使用 return 语句时，函数会停止执行，并返回指定的值
  • 如果函数没有 return ，返回的值是 undefined

break ,continue ,return 的区别：

  • break ：结束当前的循环体（如 for、while）
  • continue ：跳出本次循环，继续执行下次循环（如 for、while）
  • return ：不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码

arguments

当不确定有多少个参数传递的时候，可以用 arguments 来获取；JavaScript 中，arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：

  • 具有 length 属性
  • 按索引方式储存数据
  • 不具有数组的 push , pop 等方法
function callMe(){if( arguments.length > 0 ) {console.log( arguments[0] );}return arguments[0]+arguments[1];
}
//然后如此调用:
var a = callMe( 'maybe','ab' );
console.log(a);/*arguments[0]即表示传入的第一个参数了。
结果：
maybe
maybeab
*/

预解析

预解析:在当前作用域下，js运行之前，会把带有var和function关键字声明的变量先声明，并在内存中安排好。然后从上至下解析js语句。而且function的声明优先于var声明。预解析会把变量和函数的声明在代码执行之前执行完成。

变量的预解析

  • 变量提升： 变量的声明会被提升到当前作用域的最上面，但是对于变量的赋值却不会随之提升。

比如

console.log(num);
var num = 1;
结果是 undefined

变量提升只提升声明，并不会提升赋值

函数的预解析

和变量预解析有一对丢类似的概念， 函数的声明会被提升到当前作用域的最上面，但是不会调用函数。

fun();
function fun() {console.log('123');
}
结果：123

函数表达式声明函数问题

看看下面这个例子！！！

fun();
var  fun = function() {console.log('DJDJDJDJ');
}
结果：报错提示 “fun is not a function”

该段代码执行之前，会做变量声明提升，fun此时值为undefined；而fun调用是在fun被赋值为函数体之前，此时fun的值是undefined，所以无法正确调用

var和function混合例子

第一个：

console.log(num); // 输出undefined
var num = 10;

上面那个相当于执行了下面的过程

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

第二个：

fun();
var fun = function() {console.log(2);}

相当于是下面的过程：

var fun;
fun();
fun = function() {console.log(2);
}

所以为啥报错显而易见
第三个：

var num = 10;
function fn() {console.log(num);var num = 20;console.log(num);
}
fn();/*结果：
undefined
20
*/

相当于是：

var num;
function fun() {var num;console.log(num);num = 20;console.log(num);
}
num = 10;
fun();

第四个：

var a = 18;
f1();
function f1() {var b = 9;console.log(a);console.log(b);var a = '123';
}

相当于是：

var a;
function f1() {var b;var a;b = 9;console.log(a);console.log(b);a = '123';
}
a = 18;
f1();

最后一个 ：

f1();
console.log(c);
console.log(b);
console.log(a);function f1() {var a = b = c = 9;console.log(a++);console.log(b++);console.log(c++);
}

相当于是：

function f1() {var a;a = b = c = 9;// 相当于 var  a  = 9; b = 9; c = 9; b 和 c 没有赋值 没有var 声明，当 全局变量看console.log(a++);console.log(b++);console.log(c++);
}
f1();
console.log(c);
console.log(b);
console.log(a);

运行结果：

解释：

  • 全局变量在代码的任何位置都可以使用
  • 在全局作用域下 var 声明的变量 是全局变量
  • 特殊情况下，在函数内不使用 var 声明的变量也是全局变量

由于第三条，b=c=9就相当于是全局变量了！！！所以为啥第二次a会报错！！！

对象

对象介绍

同Java的对象类似

var person = {name : 'abc',age : 20,eat : function(){alert('eat');}
};

上述代码便创建了person对象

  • 访问对象

    • 对象属性的调用：

      1. 对象.属性名

        console.log(person.name)

      2. 对象['属性']

        console.log(person['name'])

    • 对象方法的调用：

      • 对象.方法名(); 括号不可少

        person.sing();

new Object 创建对象

创建空对象

var a = new Object();

通过内置构造函数Object创建对象，此时ps变量已经保存了创建出来的空对象。

  • 给空对象添加属性和方法

    • 通过对象操作属性和方法的方式，来为对象添加属性和方法

      a.name = 'a';
a.age = 18;
a.eat = function(){alert('eat');
}

利用构造函数创建对象

  • 构造函数

    function 函数名(形参1,形参2){this.属性名1 = 形参1;this.属性名2 = 形参2;this.方法名 = 函数体;
}

  • 函数调用

    var obj = new 函数名(实参1,实参2)

  • 示例

    function Person(personName,personAge) {this.name = personName;this.age = personAge;this.eat = function(){alert('eat');}
}
var abc = new Person('吴彦祖',20);

  • 构造的对象要求首字母大写

遍历对象

通常用for循环来实现

for (变量 in 对象名字) {// 在此执行代码
}for (var i in abc) {console.log(i);      // 这里的 i 是属性名console.log(abc[i]); // 这里的 obj[i] 是属性值
}

c 没有赋值 没有var 声明，当 全局变量看
console.log(a++);
console.log(b++);
console.log(c++);
}
f1();
console.log©;
console.log(b);
console.log(a);


运行结果：[外链图片转存中...(img-9qD1clL5-1612855984795)]解释：- 全局变量在代码的任何位置都可以使用
- 在全局作用域下 var 声明的变量 是全局变量
- 特殊情况下，在函数内不使用 var 声明的变量也是全局变量由于第三条，b=c=9就相当于是全局变量了！！！所以为啥第二次a会报错！！！******## 对象### 对象介绍同Java的对象类似```javascript
var person = {name : 'abc',age : 20,eat : function(){alert('eat');}
};

上述代码便创建了person对象

  • 访问对象

    • 对象属性的调用：

      1. 对象.属性名

        console.log(person.name)

      2. 对象['属性']

        console.log(person['name'])

    • 对象方法的调用：

      • 对象.方法名(); 括号不可少

        person.sing();

new Object 创建对象

创建空对象

var a = new Object();

通过内置构造函数Object创建对象，此时ps变量已经保存了创建出来的空对象。

  • 给空对象添加属性和方法

    • 通过对象操作属性和方法的方式，来为对象添加属性和方法

      a.name = 'a';
a.age = 18;
a.eat = function(){alert('eat');
}

利用构造函数创建对象

  • 构造函数

    function 函数名(形参1,形参2){this.属性名1 = 形参1;this.属性名2 = 形参2;this.方法名 = 函数体;
}

  • 函数调用

    var obj = new 函数名(实参1,实参2)

  • 示例

    function Person(personName,personAge) {this.name = personName;this.age = personAge;this.eat = function(){alert('eat');}
}
var abc = new Person('吴彦祖',20);

  • 构造的对象要求首字母大写

遍历对象

通常用for循环来实现

for (变量 in 对象名字) {// 在此执行代码
}for (var i in abc) {console.log(i);      // 这里的 i 是属性名console.log(abc[i]); // 这里的 obj[i] 是属性值
}

HTML和JavaScript学习笔记相关推荐

  1. Java程序猿的JavaScript学习笔记（12——jQuery-扩展选择器）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  2. Java程序猿的JavaScript学习笔记（汇总文件夹）

    最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...

  3. JavaScript学习笔记（五）

    JavaScript学习笔记(五) ①Array类 本地对象 ②Date类 ①Global对象 对象的类型   内置对象 ②Math对象 宿主对象 今天继续学习JS中的对象,昨天内置对象Global对 ...

  4. JavaScript学习笔记（备忘录）

    JavaScript学习笔记(备忘录) ===运算符 判断数值和类型是否相等.如: console.log('s'==='s') //输出trueconsole.log('1'===1) //输出fa ...

  5. Java程序猿的JavaScript学习笔记（10—— jQuery-在“类”层面扩展）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  6. JavaScript学习笔记（十）——学习心得与经验小结

    JavaScript学习笔记(十)--学习心得与经验小结 目前我先列好提纲,利用每晚和周末的闲暇时间,将逐步写完 ^_^ 转载于:https://www.cnblogs.com/mixer/archi ...

  7. JavaScript 学习笔记（1）

    1.     何为 Jscript JScript 是一种解释型的.基于对象的脚本语言. 局限性: 1)        不能使用该语言来编写独立运行的应用程序 2)        没有对读写文件的内置 ...

  8. 前端获取div里面的标签_web前端教程JavaScript学习笔记DOM

    web前端教程JavaScript学习笔记 DOM一DOM(Document Object Model): 文档对象模型 其实就是操作 html 中的标签的一些能力 我们可以操作哪些内容 获取一个元素 ...

  9. JavaScript学习笔记之数组（二）

    JavaScript学习笔记之数组(二) 1.['1','2','3'].map(parseInt) 输出什么,为什么? ['1','2','3'].map(parseInt)//[1,NaN,NaN ...

  10. JavaScript学习笔记（七）——厚积薄发之小成果

    JavaScript学习笔记(七)--厚积薄发之小成果 目前我先列好提纲,利用每晚和周末的闲暇时间,将逐步写完 ^_^ 转载于:https://www.cnblogs.com/wdpp/archive ...

最新文章

  1. Python案例：使用XPath的爬虫
  2. python 语言-python是一门什么样的语言？
  3. 用哪个版本的基因组和注释文件好？| 亲测
  4. SQL 数据库 函数
  5. RedHat 企业版5下系统故障恢复
  6. eclipse hadoop开发环境配置
  7. 欧路词典的词典导入教程
  8. matlab各相关系数的计算,matlab 相关系数的计算
  9. 人工智能、机器学习、深度学习 三者关系
  10. 大数据-浅谈hive优化
  11. 苹果开发者证书申请流程
  12. loj 1224 - DNA Prefix
  13. 汇编语言（32位二进制数的减法、带符号数除法、字符串大小写转换、分段函数求值，含源程序）
  14. 算法竞赛入门经典+挑战编程+USACO
  15. 清华大学辅修计算机专业,清华大学开设创新创业辅修专业
  16. MySQL下载和安装 win10 64位 MySQL8.0
  17. python文件读写的重难点_Python读写文件需要注意的地方
  18. 这是谁写的代码，给我站出来，保证不打死你！
  19. POJ T3041 Asteroids
  20. 私域直播的好处是什么

热门文章

  1. linux就该这么学
  2. [FAQ07665][Camera Drv]摄像头工厂模式（factory Mode）测试失败或者预览画面不吐出动态图像
  3. 高数 | 【微分方程】技巧性例题 及 李林880详解
  4. 一个非常漂亮的简约大气的table
  5. 联想拯救者 Y7000 Ubuntu 16.04无线网卡驱动安装踩坑教程
  6. 黑苹果安装教程---联想G480安装懒人版10.9.5
  7. RK3399触摸不准，修改drivers中gt9xx.h的cfg
  8. Java调用soap协议的webservice
  9. c语言五子棋中怎么设置开局,五子棋开局口诀_五子棋常用的开局方式
  10. Qt 小例子学习9 - 代码编辑器