Web开发需要用到哪些技术？
这套系统介绍使用JavaScript来完成Web开发，我们在学习js之前需要了解一下相关HTML、CSS。
HTML：定义网页内容
CSS：描述网页的布局
JavaScript：网页的行为
HTML 学习
HTML不是编程语言，而是标记语言。类似Markdown一样也是标记语言（不要被吓到，这个语法很简单，此文就是Markdown写的）。
&empt; 注意先声明当前HTML版本，其次就通过标签<head>内声明源文件，<body>声明浏览器展示内容。
<head>标签中通过<title>声明文本标题、<meta>声明元数据，如定义王爷编码格式为utf-8等
<body>标签中涉及标题格式、段落格式
<a href="http://www.baidu.com"> 这是百度网地址 </a>
<img src="/images/logo.png" width="258" height="39" />
<hr /> 画水平线
<font size="1">这是1号字体文本</font>
下标 和 上标
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。
<link> 标签定义了文档与外部资源之间的关系。
<link rel="stylesheet" type="text/css" href="https://www.baidu.com/css/bcdbcmobilebcpc.9837752f.css">
内联样式- 在HTML元素中使用"style" 属性
<p style="color:blue;margin-left:20px;">这是一个段落。</p>
内部样式表：
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
外部样式表:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<table>表格标签
<tr>若干行
<td>单元格的内容
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
<div>定义块级
<span>组合文档的行内元素，内联元素
<form> 表单标签 里面经常包含的元素有，input输入的文本域、密码字段、单选按钮、复选框、提交按钮
CSS 学习
CSS学习网站
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
在head标签中，通过style标签给不同的body、h、p等元素进行编辑。
css中id 选择器（指定特定id的样式）、class 选择器（指定一组元素的样式）
id是通过#来进行标记的
class通过一个点 . 来表示。也可以指定某个标签的所有元素使用某个样式例如：p.center。指定所有p元素使用
外部样式表：很多页面时，外部样式表将是理想的选择<link rel="xxx">
内部样式表:单个文档需要特殊的样式时，就应该使用内部样式表。< style >
内联样式:内联样式会损失掉样式表的许多优势。请慎用这种方法<p style="color:sienna;margin-left:20px">这是一个段落。</p>
多重样式:
CSS盒子模型：
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
重要: 当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和边距。
border-style: 默认无边框 none
JavaScript 学习
document.getElementById("demo").innerHTML = "段落已修改。"; 插入元素内容
请使用 document.write() 仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。
//button 添加点击事件
<button onclick="myFunction()">
<script>
function myFunction() {
document.write(Date());
}
</script>
写到控制台
console.log(c);
数组
[40, 100, 1, 5, 25, 10]
对象
{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
函数
function myFunction(a, b) { return a * b;}
变量
var x, length
= + - * / 运算
== != < > 判断
JavaScript 语句
JavaScript 语句是发给浏览器的命令。
JavaScript 代码
浏览器按照编写顺序依次执行每条语句。
JavaScript 代码块
JavaScript 可以分批地组合起来。
代码块以左花括号开始，以右花括号结束。
代码块的作用是一并地执行语句序列。
JavaScript 语句标识符
try 实现错误处理，与 catch 一同使用。
catch 语句块，在 try 语句块执行出错时执行 catch 语句块。
您可以在文本字符串中使用反斜杠对代码行进行换行
提示：JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。
注释
注释用于阻止其中一条代码行的执行（可用于调试）
JavaScript 数据类型
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。
JavaScript 对象
在 JavaScript中，几乎所有的事物都是对象。
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function()
{
return this.firstName + " " + this.lastName;
}
};
对象属性
JavaScript 对象是键值对的容器
访问对象属性
name=person.lastname;
或
name=person["lastname"];
访问对象方法
objectName.methodName()
JavaScript 函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
带参数函数 myFunction(argument1,argument2)
带有返回值的函数
函数将值返回调用它的地方
function myFunction()
{
var x=5;
return x;
}
注意： 整个 JavaScript 并不会停止执行，仅仅是函数。JavaScript 将继续执行代码，从调用函数的地方。
仅仅希望退出函数时 ，也可使用 return 语句
局部 JavaScript 变量
在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕，本地变量就会被删除。
全局 JavaScript 变量
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
JavaScript 作用域
在 JavaScript 中, 对象和函数同样也是变量。
在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。
JavaScript 函数作用域: 作用域在函数内修改。
变量在函数内声明，变量为局部作用域。
局部变量：只能在函数内部访问。
因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。
局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。
JavaScript 全局变量
变量在函数外定义，即为全局变量。
全局变量有 全局作用域: 网页中所有脚本和函数均可使用。
如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。
以下实例中 carName 在函数内，但是为全局变量。
// 此处可调用 carName 变量
function myFunction() {
carName = "Volvo";
// 此处可调用 carName 变量
}
JavaScript 事件
HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
HTML 事件
HTML 事件可以是浏览器行为，也可以是用户行为。
事件：
HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击
可以做的事情。在事件触发时 JavaScript 可以执行一些代码。
HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。
<some-HTML-element some-event='JavaScript 代码'>
或者 双引号
<some-HTML-element some-event="JavaScript 代码">
举例：
JavaScript 代码将修改 id="demo" 元素的内容。
<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
修改自身元素的内容 (使用 this.innerHTML):
<button onclick="this.innerHTML=Date()">现在的时间是?</button>
常见的HTML事件
onchange -----> HTML 元素改变
onclick -----> 用户点击 HTML 元素
onmouseover ----> 用户在一个HTML元素上移动鼠标
onmouseout ----> 用户从一个HTML元素上移开鼠标
onkeydown -----> 用户按下键盘按键
onload -----> 浏览器已完成页面的加载
JavaScript 可以做什么?
事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:
- 页面加载时触发事件
- 页面关闭时触发事件
- 用户点击按钮执行动作
- 验证用户输入内容的合法性
- 等等 ...
可以使用多种方法来执行 JavaScript 事件代码：
- HTML 事件属性可以直接执行 JavaScript 代码
- HTML 事件属性可以调用 JavaScript 函数
- 你可以为 HTML 元素指定自己的事件处理程序
JavaScript 字符串
字符串长度：
可以使用内置属性 length 来计算字符串的长度：
特殊字符
因为这样，以下实例 JavaScript 无法解析：
"We are the so-called "Vikings" from the north."
可以使用反斜杠 () 来转义 "Vikings" 字符串中的双引号，如下:
"We are the so-called "Vikings" from the north."
charAt() ---> 返回指定索引位置的字符
charCodeAt() ---> 返回指定索引位置字符的 Unicode 值
concat() ---> 连接两个或多个字符串，返回连接后的字符串
fromCharCode() ---> 将 Unicode 转换为字符串
indexOf() ---> 返回字符串中检索指定字符第一次出现的位置
lastIndexOf() ---> 返回字符串中检索指定字符最后一次出现的位置
localeCompare() ---> 用本地特定的顺序来比较两个字符串
match() ---> 找到一个或多个正则表达式的匹配
replace() ---> 替换与正则表达式匹配的子串
search() ---> 检索与正则表达式相匹配的值
slice() ---> 提取字符串的片断，并在新的字符串中返回被提取的部分
split() ---> 把字符串分割为子字符串数组
substr() ---> 从起始索引号提取字符串中指定数目的字符
substring() ---> 提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase() ---> 根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase() ---> 把字符串转换为小写
toString() ---> 返回字符串对象值
toUpperCase() ---> 把字符串转换为大写
trim() ---> 移除字符串首尾空白
valueOf() ----> 返回某个字符串对象的原始值
JavaScript 运算符
- / % ++ --
用于字符串的 + 运算符
如需把两个或多个字符串变量连接起来，请使用 + 运算符：
或者把空格插入表达式中：
txt3=txt1+" "+txt2;
对字符串和数字进行加法运算
两个数字相加，返回数字相加的和，如果数字与字符串相加，返回字符串，如下实例：
x=5+5;
y="5"+5;
z="Hello"+5;
10
55
Hello5
JavaScript 比较 和 逻辑运算符
比较和逻辑运算符用于测试 true 或者 false。
比较运算符
== 等于
=== 绝对等于（值和类型均相等）
!= 不等于
!== 不绝对等于（值和类型有一个不相等，或两个都不相等）
大于
< 小于
= 大于或等于
<= 小于或等于
逻辑运算符
&& || !
条件运算符
voteable=(age<18)?"年龄太小":"年龄已达到";
JavaScript if...Else 语句
if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行
JavaScript switch 语句
工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。
var d=new Date().getDay();
switch (d)
{
case 0:x="今天是星期日";
break;
case 1:x="今天是星期一";
break;
case 2:x="今天是星期二";
break;
case 3:x="今天是星期三";
break;
case 4:x="今天是星期四";
break;
case 5:x="今天是星期五";
break;
case 6:x="今天是星期六";
break;
}
default 关键词
使用 default 关键词来规定匹配不存在时做的事情：
var d=new Date().getDay();
switch (d)
{
case 6:x="今天是星期六";
break;
case 0:x="今天是星期日";
break;
default:
x="期待周末";
}
document.getElementById("demo").innerHTML=x;
JavaScript for 循环
for (var i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}
不同类型的循环
- for - 循环代码块一定的次数
- for/in - 循环遍历对象的属性
- while - 当指定的条件为 true 时循环指定的代码块
- do/while - 同样当指定的条件为 true 时循环指定的代码块
for (var i=0,len=cars.length; i<len; i++)
{
document.write(cars[i] + "<br>");
}
- for/in - 循环遍历对象的属性,只是遍历对象内部的属性
var x;
var txt="";
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person){
txt=txt + person[x];
}
document.getElementById("demo").innerHTML=txt;
- while - 当指定的条件为 true 时循环指定的代码块
while (i<5)
{
x=x + "The number is " + i + "<br>";
i++;
}
- do/while - 同样当指定的条件为 true 时循环指定的代码块
var x="",i=0;
do{
x=x + "该数字为 " + i + "<br>";
i++;
}
while (i<5)
document.getElementById("demo").innerHTML=x;
JavaScript break 和 continue 语句
break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。
JavaScript 标签
如需标记 JavaScript 语句，请在语句之前加上冒号：
label:
statements
<script>
cars=["BMW","Volvo","Saab","Ford"];
list:{
document.write(cars[0] + "<br>");
break list;
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
}
</script>
JavaScript typeof, null, 和 undefined
null是一个只有一个值的特殊类型。表示一个空对象引用。
var person = null; // 值为 null(空), 但类型为对象
你可以设置为 undefined 来清空对象:
var person = undefined; // 值为 undefined, 类型为 undefined
undefined 是一个没有设置值的变量。
任何变量都可以通过设置值为 undefined 来清空。 类型为 undefined.
null 和 undefined 的值相等，但类型不等：
你可以使用 constructor 属性来查看对象是否为数组 (包含字符串 "Array"):
return myArray.constructor.toString().indexOf("Array") > -1;
将数字转换为字符串
String(x) // 将变量 x 转换为字符串并返回
Number 方法 toString() 也是有同样的效果。
x.toString()
(123).toString()
Date 方法
将字符串转换为数字
Number("3.14") // 返回 3.14
Number 方法
一元运算符 +
Operator + 可用于将变量转换为数字：
将布尔值转换为数字
Number(false) // 返回 0
Number(true) // 返回 1
d = new Date();
Number(d) // 返回 1404568027739
日期方法 getTime() 也有相同的效果。
JavaScript 正则表达式
正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。
搜索模式可用于文本搜索和文本替换。
什么是正则表达式？
正则表达式是由一个字符序列形成的搜索模式。
当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。
正则表达式可以是一个简单的字符，或一个更复杂的模式。
正则表达式可用于所有文本搜索和文本替换的操作。
语法
/正则表达式主体/修饰符(可选)
var patt = /runoob/i
/runoob/i 是一个正则表达式。
runoob 是一个正则表达式主体 (用于检索)。
i 是一个修饰符 (搜索不区分大小写)。
在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。
search() 方法使用正则表达式
var str = "Visit Runoob!";
var n = str.search(/Runoob/i);
document.getElementById("demo").innerHTML = n;
search() 方法使用字符串
var str = "Visit Runoob!";
var n = str.search("Runoob");
document.getElementById("demo").innerHTML = n;
replace() 方法使用正则表达式
var str = document.getElementById("demo").innerHTML;
var txt = str.replace(/microsoft/i,"Runoob");
document.getElementById("demo").innerHTML = txt;
replace() 方法使用正则表达式
var str = document.getElementById("demo").innerHTML;
var txt = str.replace(/microsoft/i,"Runoob");
document.getElementById("demo").innerHTML = txt;
JavaScript 错误 - throw、try 和 catch
try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建自定义错误。
finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行。
JavaScript try 和 catch
catch 块会捕捉到 try 块中的错误，并执行代码来处理它。
try {
adddlert("Welcome guest!");
}
catch(err) {
txt="本页有一个错误。\n\n";
txt+="错误描述：" + err.message + "\n\n";
txt+="点击确定继续。\n\n";
alert(txt);
}
finally 语句
finally 语句不论之前的 try 和 catch 中是否产生异常都会执行该代码块。
Throw 语句
throw 语句允许我们创建自定义错误。
如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。
function myFunction() {
var message, x;
message = document.getElementById("message");
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
if(x == "") throw "值为空";
if(isNaN(x)) throw "不是数字";
x = Number(x);
if(x < 5) throw "太小";
if(x > 10) throw "太大";
}
catch(err) {
message.innerHTML = "错误: " + err;
}
}
JavaScript 调试工具
浏览器启用调试工具一般是按下 F12 键，并在调试菜单中选择 "Console" 。
mac 调起是按 option+command+i
console.log() 方法
如果浏览器支持调试，你可以使用 console.log() 方法在调试窗口上打印 JavaScript 值
设置断点
在调试窗口中，你可以设置 JavaScript 代码的断点。
在每个断点上，都会停止执行 JavaScript 代码，以便于我们检查 JavaScript 变量的值。
在检查完毕后，可以重新执行代码（如播放按钮）。
debugger 关键字
debugger 关键字用于停止执行 JavaScript，并调用调试函数。
注意前提条件： 调试环境
Undefined 不是 Null
在 JavaScript 中, null 用于对象, undefined 用于变量，属性和方法。
对象只有被定义才有可能为 null，否则为 undefined。
如果我们想测试对象是否存在，在对象还没定义时将会抛出一个错误。
if (typeof myObj !== "undefined" && myObj !== null)
JavaScript 表单
HTML 表单验证可以通过 JavaScript 来完成。
以下实例代码用于判断表单字段(fname)值是否存在， 如果不存在，就弹出信息，阻止表单提交：
<html>
<head>
<meta charset="utf-8">
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("需要输入名字。");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.php"
onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
</body>
</html>
数据验证
服务端数据验证是在数据提交到服务器上后再验证。
客户端数据验证是在数据发送到服务器前，在浏览器上完成验证。
HTML 约束验证
约束验证是表单被提交时浏览器用来实现验证的一种算法。
HTML 输入属性
CSS 伪类选择器
DOM 属性和方法
JavaScript 表单验证
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
- 验证表单数据是否为空？
- 验证输入是否是一个正确的email地址？
- 验证日期是否输入正确？
- 验证表单输入内容是否为数字型？
JavaScript 验证 API
约束验证 DOM 方法：
checkValidity() ---> 如果 input 元素中的数据是合法的返回 true，否则返回 false。
setCustomValidity() --->设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法。
使用 setCustomValidity 设置了自定义提示后，validity.customError 就会变成true，则 checkValidity 总是会返回false。如果要重新判断需要取消自定义提示.
约束验证 DOM 属性
validity
validationMessage
willValidate
Validity 属性
customError ---> 设置为 true, 如果设置了自定义的 validity 信息。
patternMismatch ---> 设置为 true, 如果元素的值不匹配它的模式属性。
rangeOverflow ---> 设置为 true, 如果元素的值大于设置的最大值。
rangeUnderflow ---> 设置为 true, 如果元素的值小于它的最小值。
stepMismatch ---> 设置为 true, 如果元素的值不是按照规定的 step 属性设置。
tooLong ---> 设置为 true, 如果元素的值超过了 maxLength 属性设置的长度。
typeMismatch ---> 设置为 true, 如果元素的值不是预期相匹配的类型。
valueMissing ---> 设置为 true，如果元素 (required 属性) 没有值。
valid ---> 设置为 true，如果元素的值是合法的。
JavaScript this 关键字
面向对象语言中 this 表示当前对象的一个引用。
但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。
- 在方法中，this 表示该方法所属的对象。
- 如果单独使用，this 表示全局对象。
- 在函数中，this 表示全局对象。
- 在函数中，在严格模式下，this 是未定义的(undefined)。
- 在事件中，this 表示接收事件的元素。
- 类似 call() 和 apply() 方法可以将 this 引用到任何对象。
方法中的 this
在对象方法中， this 指向调用它所在方法的对象。 下面代码中this指向的是person
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
单独使用 this
单独使用 this，则它指向全局(Global)对象。
在浏览器中，window 就是该全局对象为 [object Window]:
<script>
var x = this;
document.getElementById("demo").innerHTML = x;
</script>
函数中使用 this（默认）
在函数中，函数的所属者默认绑定到 this 上。
在浏览器中，window 就是该全局对象为 [object Window]:
<script>
document.getElementById("demo").innerHTML = myFunction();
function myFunction() {
return this;
}
</script>
函数中使用 this（严格模式）
严格模式下函数是没有绑定到 this 上，这时候 this 是 undefined。
事件中的 this
在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素：
<button onclick="this.style.display='none'">点我后我就消失了</button>
对象方法中绑定
this 是 person 对象，person 对象是函数的所有者
显式函数绑定
在 JavaScript 中函数也是对象，对象则有方法，apply 和 call 就是函数对象的方法。这两个方法异常强大，他们允许切换函数执行的上下文环境（context），即 this 绑定的对象。
在下面实例中，当我们使用 person2 作为参数来调用 person1.fullName 方法时, this 将指向 person2, 即便它是 person1 的方法：
var person1 = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
var person2 = {
firstName:"John",
lastName: "Doe",
}
person1.fullName.call(person2); // 返回 "John Doe"
JavaScript let 和 const
let 声明的变量只在 let 命令所在的代码块内有效。
const 声明一个只读的常量，一旦声明，常量的值就不能改变。
函数内使用 var 声明的变量只能在函数内容访问，如果不使用 var 则是全局变量。
JavaScript JSON
JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
JSON 通常用于服务端向网页传递数据 。
JSON 语法规则
- 数据为 键/值 对。
- 数据由逗号分隔。
- 大括号保存对象
- 方括号保存数组
JSON 字符串转换为 JavaScript 对象
首先，创建 JavaScript 字符串，字符串为 JSON 格式的数据：
然后，使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:
var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
var obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;
相关参数
JSON.parse() ----> 用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify() ---> 用于将 JavaScript 值转换为 JSON 字符串。
javascript:void(0) 含义
该操作符指定要计算一个表达式但是不返回值
void()仅仅是代表不返回任何值，但是括号内的表达式还是要运行，如
void(alert("Warnning!"))
JavaScript 异步编程
异步：异步就是从主线程发射一个子线程来完成任务
子线程有一个局限：一旦发射了以后就会与主线程失去同步，我们无法确定它的结束，如果结束之后需要处理一些事情，比如处理来自服务器的信息，我们是无法将它合并到主线程中去的。
为了解决这个问题，JavaScript 中的异步操作函数往往通过回调函数来实现异步任务的结果处理。
回调函数
回调函数就是一个函数，它是在我们启动一个异步任务的时候就告诉它：等你完成了这个任务之后要干什么。这样一来主线程几乎不用关心异步任务的状态了，他自己会善始善终。
function print() {
document.getElementById("demo").innerHTML="RUNOOB!";
}
setTimeout(print, 3000);
这段程序中的 setTimeout 就是一个消耗时间较长（3 秒）的过程，它的第一个参数是个回调函数，第二个参数是毫秒数，这个函数执行之后会产生一个子线程，子线程会等待 3 秒，然后执行回调函数 "print"，在命令行输出 "Time out"。
在 setTimeout 函数执行之后主线程并没有停止
异步 AJAX
XMLHttpRequest 的 onload 和 onerror 属性都是函数，分别在它请求成功和请求失败时被调用。
GET 请求
xmlhttp.open("GET","/try/ajax/demo_get.php",true);
xmlhttp.send();
在上面的例子中，您可能得到的是缓存的结果。
为了避免这种情况，请向 URL 添加一个唯一的 ID：
xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();
POST 请求
xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
JavaScript Promise
Promise：目的是更加优雅地书写复杂的异步任务
构建Promise 对象：
new Promise(function (resolve, reject) {
// 要做的事情...
});
Promise 可以将嵌套格式的代码变成了顺序格式的代码
Promise 的使用
Promise 构造函数只有一个参数，是一个函数，这个函数在构造之后会直接被异步运行，所以我们称之为起始函数。起始函数包含两个参数 resolve 和 reject。
当 Promise 被构造时，起始函数会被异步执行：
new Promise(function (resolve, reject) {
console.log("Run");
});
这段程序会直接输出 Run。
resolve 和 reject 都是函数，其中调用 resolve 代表一切正常，reject 是出现异常时所调用的
new Promise(function (resolve, reject) {
var a = 0;
var b = 1;
if (b == 0) reject("Diveide zero");
else resolve(a / b);
}).then(function (value) {
console.log("a / b = " + value);
}).catch(function (err) {
console.log(err);
}).finally(function () {
console.log("End");
});
Promise 类有 .then() .catch() 和 .finally() 三个方法，这三个方法的参数都是一个函数，.then() 可以将参数中的函数添加到当前 Promise 的正常执行序列，.catch() 则是设定 Promise 的异常处理序列，.finally() 是在 Promise 执行的最后一定会执行的序列。 .then() 传入的函数会按顺序依次执行，有任何异常都会直接跳到 catch 序列：
Q: 什么时候适合用 Promise 而不是传统回调函数？
A: 当需要多次顺序执行异步操作的时候，例如，如果想通过异步方法先后检测用户名和密码，需要先异步检测用户名，然后再异步检测密码的情况下就很适合 Promise。
函数表达式
JavaScript 函数可以通过一个表达式定义。
函数表达式可以存储在变量中：
以下函数实际上是一个 匿名函数 (函数没有名称)。
函数存储在变量中，不需要函数名称，通常通过变量名来调用。
var x = function (a, b) {return a * b};
var z = x(4, 3);
arguments 对象
JavaScript 函数有个内置的对象 arguments 对象。
argument 对象包含了函数调用的参数数组。
通过这种方式你可以很方便的找到最大的一个参数的值
在函数中调用的参数是函数的隐式参数。
隐式参数的改变在函数外是不可见的。
call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。
<script>
var myObject;
function myFunction(a, b) {
return a * b;
}
myObject = myFunction.call(myObject, 10, 2); // 返回 20
document.getElementById("demo").innerHTML = myObject;
</script>
<script>
var myObject, myArray;
function myFunction(a, b) {
return a * b;
}
myArray = [10, 2]
myObject = myFunction.apply(myObject, myArray); // 返回 20
document.getElementById("demo").innerHTML = myObject;
</script>
两个方法都使用了对象本身作为第一个参数。 两者的区别在于第二个参数： apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。
this 笔记
this 是 JavaScript 语言的一个关键字。
它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。比如：
function test() {
this.x = 1;
}
变量声明时如果不使用 var 关键字，那么它就是一个全局变量，即便它在函数内定义。
JavaScript支持嵌套函数，内部函数可以访问父函数的变量。
JavaScript 闭包
什么叫闭包，闭包有什么用
function aaa() {
var a = 5;
function bbb() {
alert(a)
}
return bbb
}
var c = aaa();
c();
<script>
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();
function myFunction(){
document.getElementById("demo").innerHTML = add();
}
</script>
实例解析
变量 add 指定了函数自我调用的返回字值。
自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。
add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。
这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。
计数器受匿名函数的作用域保护，只能通过 add 方法修改。
闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。 直观的说就是形成一个不销毁的栈环境。
Vue.js 学习
Vue框架参考了MVVM架构，所以vm扮演一个数据视图的实例。
watch('属性',function(newVal,oldVal));会观察实例某个属性，并通过回调获取最新的值、旧值
实例生命周期钩子
将实例挂在到DOM，并在数据变化更新DOM。在这个过程中运行 声明周期钩子函数，给用户在不同阶段添加自己代码的机会。
生命周期函数内不能使用箭头函数
属性函数
//页面创建之前
beforeCreate
//实例创建之后
created
//挂载之前进行的
beforeMount
//挂载成功之后
mounted
//数据变化更新之前调用
beforeUpdate
//组件 DOM 已经更新，组件更新完毕
updated
setTimeout(function(),3000)，三分钟后执行function
模板语法
文本插值 {{ }}
v-onec执行一次插值
v-html 将变量文本输出为真正的HTML
v-bind (帮助标签动态绑定属性)
v-if 指令 根据表达式的值的真假来判断 元素的执行
网友评论