0. JavaScript
1）是 Web 的编程语言，所有现代的 HTML 页面都可以使用 JavaScript。
2）html中位于 <script> 与 </script> 标签之间，JavaScript可放置在 HTML 页面的 <body> 和 <head> 部分中。
3）也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码 .js
document.write("<h1>这是一个标题</h1>"); /*直接写入 HTML 输出流*/
document.write("<p>这是一个段落。</p>");
<button type="button" onclick="alert('欢迎!')">点我!</button> /*alert对事件的反应*/
x=document.getElementById("demo"); //查找元素
x.innerHTML="Hello JavaScript"; //改变内容
x.style.color="#ff0000"; //改变样式
<script src="myScript.js"></script> //引用外部js
<!DOCTYPE html> #示例
<html>
<head>
<script>
function myFunction() //函数
{
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
</body>
</html> //onclick=函数名+()
1. 使用方法
1）按下 F12 按钮或者右击页面，选择"检查"来开启开发者工具。
也可以点击右上角菜单栏 "更多工具"→"开发者工具"
2）在 Console 窗口调试 JavaScript代码，清空 Console 窗口
3）点击 Sources 面板，选择 Snippets 选项卡，在导航器中右击鼠标，
选择 Create new snippet（片段） 来新建一个脚本文件，输入代码，Ctrl+S保存更改即可。
保存后，右击文件名，选择 "Run" 执行代码
2.
2.1 输出
- window.alert() 弹出警告框。
- document.write() 方法将内容写到 HTML 文档中
- innerHTML 写入到 HTML 元素
<script>document.write(Date()); </script>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
document.write(Date());
}
</script> //在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖
2.2 语法
-
数字（Number）字面量
可以是整数或者是小数，或者是科学计数(e) -
字符串（String）字面量
可以使用单引号或双引号,可以使用索引位置,添加转义字符来使用引号 -
表达式字面量 用于计算
-
数组、对象、函数字面量
使用关键字 var 来定义变量，对大小写是敏感的
var length = 16; // Number 通过数字字面量赋值
var points = x * 10; // Number 通过表达式字面量赋值
var lastName = "Johnson"; // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"]; // Array 通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"}; // Object 通过对象字面量赋值
function myFunction(a, b) {
return a * b; // 返回 a 乘以 b 的结果 函数
}
2.3 语句
分号用于分隔 JavaScript 语句
JavaScript 会忽略多余的空格
浏览器按照编写顺序依次执行每条语句
{ }代码块的作用是一并地执行语句序列
- JavaScript 语句通常以一个 语句标识符 为开始，并执行该语句。
语句标识符是保留关键字不能作为变量名使用。
var 定义一个变量
break
try 错误处理
catch 在 try 语句块执行出错时执行 catch 语句块
continue 跳过循环中的一个迭代
while 当条件语句为 true 时，执行语句块。
do...while
for (... in)
function
return 退出函数
switch
throw 生成错误
document.write("你好 \
世界!"); //在文本字符串中使用反斜杠对代码行进行换行 **注释**
/*多行
注释，注释用于阻止其中一条代码行的执行（可用于调试）*/
//条件语句 if ... else if ... else
if (time<20)
{
x="Good day";
}
else if (time>=10 && time<20)
{
x="Good afternoon";
}
else
{
x="Good evening";
}
//switch语句 Sunday=0
var d=new Date().getDay();
switch (d)
{
case 6:x="今天是星期六";
break;
case 0:x="今天是星期日";
break;
default:
x="期待周末"; //使用 default 关键词来规定匹配不存在时做的事情
}
document.getElementById("demo").innerHTML=x;
//循环语句
for (var i=0;i<5;i++)
{
document.write(cars[i] + "<br>");
} //for - 循环代码块一定的次数 i=0和i++若存在可省略
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person) // x 为属性名
{
txt=txt + person[x];
} // for ... in 语句循环遍历对象的属性
while (i<5)
{
x=x + "The number is " + i + "<br>";
i++;
} //while语句
do
{
x=x + "The number is " + i + "<br>";
i++;
}
while (i<5); //do/while 循环。该循环至少会执行一次
while (i < 10){
if (i == 3){
i++; //加入i++不会进入死循环
continue;
}
x= x + "该数字为 " + i + "<br>";
i++;
} //continue 跳过当前循环，继续循环下一个迭代
list:
{
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
break list;
document.write(cars[3] + "<br>");
} //通过标签list引用，break 语句可跳出任何 JavaScript 代码块
2.4 数据类型
值类型(基本类型)：字符串（String）、数字(Number)、
布尔(Boolean)：true或false
空（Null）、未定义（Undefined）表示变量不含有值、Symbol。
引用数据类型（对象类型）：对象(Object) 可以跨越多行、
数组(Array)、函数(Function)，正则（RegExp）、日期（Date）
数组和日期的数据类型为object
使用 constructor 属性来查看对象是否为数组
typeof 3.14 // 返回 number,查看数据类型
typeof NaN // 返回 number
var person={firstname:"John", lastname:"Doe", id:5566}; //对象
name=person.lastname; //两种寻址方式
name=person["lastname"];
cars=null; //设置为null清空变量,值为 null(空), 但类型为对象
person = undefined; // 值为 undefined, 类型是undefined
var x = new Number; //new声明类型
name = person.fullName(); //对象是函数
function functionname(var1,var2) // 函数
{
var x=5;
return x; //返回值5
}
<button type="button" onclick="functionname(var1,var2)">尝试一下</button>
String(123) // 将数字 123 转换为字符串并返回
(123).toString()
toExponential() //转换为指数计数法
toFixed() //把数字转换为字符串，结果的小数点后有指定位数的数字
toPrecision() //把数字格式化为指定的长度。
//将日期转换为字符串
Date()
String(new Date())
obj = new Date()
obj.toString() //getDate()一个月某一天 getDay()一周某一天 getFullYear()四位数字年份
//getHours()小时 getMilliseconds()毫秒 getMinutes()分钟 getMonth()月份
//getSeconds()秒数 getTime()返回1970-1-1至今的毫秒数
Number("3.14") // 返回 3.14 将字符串转换为数字
parseFloat() 解析一个字符串，并返回一个浮点数。
parseInt() 解析一个字符串，并返回一个整数。
var y = "5"; // y 是一个字符串
var x = + y; // x 是一个数字 一元运算符+将变量转换为数字
d = new Date();
d.getTime() // 将日期转换为数字 返回 1404568027739
函数内部声明的变量（使用 var）是局部变量
如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
2.5 事件
HTML 事件可以是浏览器行为，也可以是用户行为
<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<button onclick="this.innerHTML=Date()">现在的时间是?</button> //修改自身元素的内容
<button onclick="displayDate()">现在的时间是?</button> //通过事件属性来调用
onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 鼠标指针移动到指定的元素上时发生
onmouseout 用户从一个 HTML 元素上移开鼠标时发生
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载
2.6 字符串、运算符、变量
var x = "John";
var y = new String("John"); //定义对象
-
属性
constructor 返回创建字符串属性的函数
length 返回字符串的长度
prototype 允许您向对象添加属性和方法 -
方法
charAt() 返回指定索引位置的字符
charCodeAt() 返回指定索引位置字符的 Unicode 值
concat() 连接两个或多个字符串，返回连接后的字符串
fromCharCode() 将 Unicode 转换为字符串
indexOf() 返回字符串第一次出现的位置
lastIndexOf() 返回字符串最后一次出现的位置
localeCompare() 用本地特定的顺序来比较两个字符串
match() 找到一个或多个正则表达式的匹配
replace() 替换与正则表达式匹配的子串
search() 检索与正则表达式相匹配的值
slice() 提取字符串的片断，并在新的字符串中返回被提取的部分
split() 把字符串分割为子字符串数组
substr() 从起始索引号提取字符串中指定数目的字符
substring() 提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase() 根据主机的语言环境把字符串转换为小写
toLocaleUpperCase() 根据主机的语言环境把字符串转换为大写
toLowerCase() 把字符串转换为小写
toUpperCase() 把字符串转换为大写
toString() 返回字符串对象值
trim() 移除字符串首尾空白
valueOf() 返回某个字符串对象的原始值
算数运算符
+-*/ %余数 运算符 ( = + - * / ) 前后需要添加空格
通常使用 4 个空格符号来缩进代码块
一条语句通常以分号作为结束符
对象：冒号与属性值间有个空格，字符串使用双引号，数字不需要，最后一个属性-值对后面不要添加逗号，将右花括号独立放在一行，并以分号作为结束符号。
每行代码字符小于 80
var y=5;
var x=++y; x和y都变
var x=y++; 只变y
var x=--y;
var x=y--;
赋值运算符
= += -= *= /= %=
- 运算符用于把文本值或字符串变量加起来（连接起来）
比较运算符 在逻辑语句中使用，以测定变量或值是否相等
==等于 != ===绝对等(值和类型) !=== > < >= <=
逻辑运算符
&&与 ||或 ！非
变量
可以在使用后声明，也就是变量可以先使用再声明。函数及变量的声明都将被提升到函数的最顶部
但初始化的不会
"use strict"; //严格模式下不能使用未声明的变量
x = 3.14; // 报错 (x 未定义)
2.7 正则表达式
/正则表达式主体/修饰符(可选)，常用 search()返回子串的起始位置 和 replace()
var patt = /runoob/i
g执行全局匹配、i搜索不区分大小写、m执行多行匹配
方括号用于查找某个范围内的字符
\d查找数字 \s查找空白字符 \b匹配单词边界 \uxxxx查找以十六进制数 xxxx 规定的 Unicode 字符
n+匹配包含至少一个 n 的字符串 n*零个或多个 n?零个或一个
var str = "Visit Run!";
var n = str.search(/Run/i); //6
var n = str.search("Runoob"); //字符串参数会转换为正则表达式
var patt = /e/;
patt.test("The best things in life are free!"); //test() 方法用于检测字符串是否存在
/e/.test("The best things in life are free!") //简写
/e/.exec("The best things in life are free!"); //检索字符串中的正则表达式的匹配，返回一个数组
2.8 错误
try 语句测试代码块的错误
catch 语句处理错误
var txt="";
function message()
{
try {
adddlert("Welcome guest!");
} catch(err) {
txt="本页有一个错误。\n\n";
txt+="错误描述：" + err.message + "\n\n";
txt+="点击确定继续。\n\n";
alert(txt);
}
}
//finally 语句不论是否产生异常都会执行
finally {
document.getElementById("demo").value = "";
} //无论输入什么都会清空
try {
if(x < 5) throw "太小";
if(x > 10) throw "太大";
} //throw 创建自定义错误
调试
寻找错误
在调试窗口中可以设置 JavaScript 代码的断点
按下 F12 按钮或者右击页面，选择"检查"来开启开发者工具。
也可以点击右上角菜单栏 "更多工具"→"开发者工具"
c = 5;
console.log(c); //console.log() 写入到浏览器的控制台。
var x = 15 * 5;
debugger;
document.getElementbyId("demo").innerHTML = x; //debugger 关键字用于停止执行
表单验证
disabled规定输入的元素不可用、max规定输入元素的最大值、min规定输入元素的最小值、
pattern规定输入元素值的模式、required规定输入元素字段是必需的、type规定输入元素的类型
<form action="demo_form.php" method="post">
<input type="text" name="fname" required="required"> //required自动验证
<input type="submit" value="提交">
</form>
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("姓必须填写");
return false;
}
} //必填验证
E-mail验证
- API验证
validity布尔属性值，返回 input 输入值是否合法
属性：customError 自定义 validity 信息
patternMismatch元素的值不匹配它的模式属性
rangeOverflow 元素的值大于设置的最大值
rangeUnderflow 元素的值小于它的最小值
stepMismatch 元素的值不是按照规定的 step 属性设置
tooLong 元素的值超过了 maxLength 属性设置的长度
typeMismatch 元素的值不是预期相匹配的类型
valueMissing 元素 (required 属性) 没有值
valid 元素的值是合法的。
validationMessage浏览器错误提示信息
willValidate指定 input 是否需要验证
<script>
function myFunction() {
var inpObj = document.getElementById("id1");
if (inpObj.checkValidity() == false) { //checkValidity()合法返回 true，否则返回 false
document.getElementById("demo").innerHTML = inpObj.validationMessage;
}
}
</script>
this 该方法所属的对象。
let 只在 let 命令所在的代码块内有效
const 声明一个只读不变的常量 定义的对象或者数组可变
JSON 用于存储和传输数据的格式,用于服务端向网页传递数据
数据为 键/值 对。数据由逗号分隔。大括号保存对象,方括号保存数组
JSON.parse() 将一个 JSON 字符串转换为 JavaScript 对象
JSON.stringify() 将 JavaScript 值转换为 JSON 字符串
var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name
javascript:void(0) void指定计算一个表达式但是不返回值
void func()
javascript:void func()
<a href="javascript:void(0)">什么也不会发生 表示一个死链接</a>
<a href="#pos">点我定位到指定位置!</a> //# 包含了一个位置信息，默认的锚是#top 也就是网页的上端
异步编程
同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高
setTimeout(function () {
document.getElementById("demo").innerHTML="RUNOOB!";
}, 3000); //函数执行之后会产生一个子线程，子线程会等待 3 秒，然后执行回调函数
Promise 构造函数接受一个函数作为参数，该函数是同步的并且会被立即执行，所以我们称之为起始函数。起始函数包含两个参数 resolve 和 reject，分别表示 Promise 成功和失败的状态
起始函数执行成功时，它应该调用 resolve 函数并传递成功的结果。当起始函数执行失败时，它应该调用 reject 函数并传递失败的原因。
then：用于处理 Promise 成功状态的回调函数。
catch：用于处理 Promise 失败状态的回调函数。
finally：无论 Promise 是成功还是失败，都会执行的回调函数。
