目录
search() 方法使用正则表达式
熟悉HTML5
在HTML页面中插入JavaScript代码，需要使用到<script>标签，注意是双标签，告诉JavaScript在何处开始与结束，在<script>标签内就包含了JavaScript代码
再开始代码之前熟悉一下一个html文件
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落
注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签
这是需要熟悉的
首先认识一下数据显示的JS
window.alert() 弹出警告框
document.write() 将内容写到HTML文档中
innerHTML将内容写到HTML元素中
console.log() 将内容写到浏览器的控制台中
实例：
<script>
window.alert(5)//页面会弹出一个框，框里面的内容就是5
</script>操作HTML元素：
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
document.write(Data())//将内容写入到HTML文档
var a = 5;
console.log(a)//将内容写入到控制台中
</script>
</body>
</html>以上JavaScript语句(在<script>标签中)，可以在web浏览器中执行
document.getElementById("demo")时使用id属性来查找HTML元素的JavaScript代码
innerHTML = "段落已修改。" 是用于修改元素HTML内容(innerHTML)的JavaScript代码
既然熟悉了一点，那么就正式开始JavaScript的学习
首先介绍一下JavaScript的数据类型
JavaScript的数据类型
JavaScript的数据类型分为基本数据类型(也叫值类型)和引用数据类型
基本类型分为字符串(String)、数字(Number)、布尔(Boolean)、空(Null)、未定义(Undefined)、Symbol
引用类型分为对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则(RegExp)和日期(Date)
Symbol是ES6引入的一种新的原始数据类型，标识独一无二的值
检查一个变量的数据类型可以使用操作符typeof，后面会介绍到
字符串（string）
String用于表示一个字符序列，即字符串。字符串可以是引号中的任意文本,字符串需要使用 单引号 或 双引号 括起来
var str = 'hello';
//var是声明变量的关键字，当然有了ES6我几乎就不用了，这里还是可以用用
//这里用var声明了一个变量str，并且给这个str变量进行了赋值'hello'
console.log(str);//hello
console.log(typeof str);//string 打印出str的类型为字符串Math对象
Math.round(3.6) //四舍五入
Math.random() //返回0-1之间的随机数
Math.max(num1, num2) //返回较大的数
Math.min(num1, num2) //返回较小的数
Math.abs(num) //绝对值
Math.ceil(19.3) //向上取整
Math.floor(11.8) //向下取整
Math.pow(x,y) //x的y次方
Math.sqrt(num) //开平方
详情请移步 JavaScript之Math数学运算相关函数
数字(Number)
JavaScript 只有一种数字类型。数字可以带小数点，也可以不带
var num = 18;
console.log(num);//18
console.log(typeof num);//number布尔(Boolean)
布尔（逻辑）只能有两个值：true 或 false。(当然true也可以表示为真，值为1，false表示为假，值为0) ，比布尔值常用在条件测试中，多用就熟悉了
var a = false;
console.log(a); //false
console.log(typeof a); //boolean: 表示布尔类型空(Null)和未定义(Undefined)
Undefined 这个值表示变量不含有值
可以通过将变量的值设置为 null 来清空变量
数组(Array)
数组是由中括号分隔，数组的项目可以是任意类型的值，数字字符串布尔值，对象等
var arr = new Array();
arr[0] = 'x';
arr[1] = 'y';
//或者使用(condensed array) 比如
var arr1 = new Array("x","y")
//或者使用(literal array)
var arr2 = ["x","y"]
//数组下标是基于0的，所以第一个项目是[0]，第二个是[1],以此类推数组的遍历
//for循环
var arr = [11,22,33,44,55];
for (var i=0; i<arr.length; i++){ //i=0,1,2,3,4
console.log( arr[i] );
}
//for-in循环, 可以遍历数组和对象
for (var i in arr){
console.log(i); //i是下标, i=0,1,2,3,4
console.log( arr[i] ); //数组的每一个元素
}数组的常用方法
push(): 在数组末尾插入元素
pop(): 从数组末尾删除一个元素
shift(): 在数组的前面移除一个元素
unshift(): 在数组的前面添加一个或多个元素
reverse(): 将数组倒序
sort(): 让数组从小到大排序, 升序 排序规则是字符串的比较规则, ASCII码的比较
concat(): 追加数据, 不会改变原数组, 内部会创建一个新数组并返回
slice(): 截取数组的某区域的数据, 不会改变原数组
splice() : 截取数组的某区域的数据, 会改变原数组
join(): 连接数组中的所有元素, 返回一个连接后的字符串
详细请移步 数组操作
对象(Object)
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔
对象定义
var person = {firstname:'John',lastname:'Doe',id:555}
//上面的例子中的对象obj有三个属性:firstname，lastname，id
//空格和跨行都可以
var person = {
firstname:'John',
lastname:'Doe',
id:555
}对象属性
可以说 "JavaScript 对象是变量的容器"。
但是，我们通常认为 "JavaScript 对象是键值对的容器"。
键值对通常写法为 name : value (键与值以冒号分割)。
键值对在 JavaScript 对象通常称为 对象属性
访问对象属性
通过两种方式访问对象
//对象属性有两种寻找地址的方式
//1
var lastname = person.lastname
//2
var firstname = person['firstname']对象方法
对象的方法定义了一个函数，并作为对象的属性存储。
对象方法通过添加 () 调用 (作为一个函数)。
该实例访问了 person 对象的 fullName() 方法
name = person.fullName();
如果你要访问 person 对象的 fullName 属性，它将作为一个定义函数的字符串返回
name = person.fullNameJavaScript 对象是属性和方法的容器
你可以使用以下语法创建对象方法
methodName : function() {
// 代码
}JavaScript数据类型转换
在JavaScript中包括
6种不同的数据类型 string number boolean object function symbol
3中对象类型Object Date Array
2中不包含任何值的数据类型 null undefined
typeof操作符
console.log(typeof "John") // 返回 string
console.log(typeof 3.14 ) // 返回 number
console.log(typeof NaN ) // 返回 number
console.log(typeof false) // 返回 boolean
console.log(typeof [1,2,3,4] ) // 返回 object
console.log(typeof {name:'John', age:34}) // 返回 object
console.log(typeof new Date()) // 返回 object
console.log(typeof function () {} ) // 返回 function
console.log(typeof myCar) // 返回 undefined (如果 myCar 没有声明)
console.log(typeof null) // 返回 object
//请注意
//NaN的数据类型是number
//数组的数据类型是object
//日期的数据类型为object
//null的数据类型是object
//未定义的数据类型是undefined
//如果对象是 JavaScript Array 或 JavaScript Date ，我们就无法通过 typeof 来判断他们的类型，因为都是 返回 objectconstructor 属性
constructor 属性返回所有 JavaScript 变量的构造函数
"John".constructor // 返回函数 String() { [native code] }
(3.14).constructor // 返回函数 Number() { [native code] }
false.constructor // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor // 返回函数 Array() { [native code] }
{name:'John', age:34}.constructor // 返回函数 Object() { [native code] }
new Date().constructor // 返回函数 Date() { [native code] }
function () {}.constructor // 返回函数 Function(){ [native code] }
//可以使用 constructor 属性来查看对象是否为数组 (包含字符串 "Array")
function isArray(myArray) {
return myArray.constructor.toString().indexOf("Array") > -1;
}
//可以使用 constructor 属性来查看对象是否为日期 (包含字符串 "Date")
function isDate(myDate) {
return myDate.constructor.toString().indexOf("Date") > -1;
}将数字转换为字符串
//全局方法String()可以将数字转换为字符串(该方法可用于任何类型的数字，字母，变量，表达式)
var x = 48957
String(x) // 将变量 x 转换为字符串并返回
String(123) // 将数字 123 转换为字符串并返回
String(100 + 23) // 将数字表达式转换为字符串并返回
//Number 方法 toString() 也是有同样的效果
Number(x).toString()
Number(123).toString()
Number(100 + 23).toString()布尔值转换为字符串
Date()返回字符串
Date() //'Mon May 23 2022 09:50:06 GMT+0800 (中国标准时间)'
//全局方法 String() 可以将日期对象转换为字符串
String(new Date()) //'Mon May 23 2022 09:51:00 GMT+0800 (中国标准时间)'
Date方法---先了解一下
方法 描述
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear() 从 Date 对象以四位数字返回年份。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
console.log((new Date()).getDate())将字符串转为数组
全局方法Number()可以将字符串转为数字
字符串包含数字(如'3.14')转换为数字(如3.14)
空字符串会转换为0
其他的字符串会转换为NaN(不是数字)
Number("3.14") // 返回 3.14
Number(" ") // 返回 0
Number("") // 返回 0
Number("99 88") // 返回 NaN
Number()方法
方法 描述
parseFloat() 解析一个字符串，并返回一个浮点数。
parseInt() 解析一个字符串，并返回一个整数。一元运算符 + 可以用于将变量转换为数字
var y = "5"; // y 是一个字符串
var x = + y; // x 是一个数字
//如果变量不能转换，它仍然会是一个数字，但值为 NaN (不是一个数字):
var y = "John"; // y 是一个字符串
var x = + y; // x 是一个数字 (NaN)将布尔值转换为数字
全局方法 Number() 可将布尔值转换为数字
Number(false) // 返回 0
Number(true) // 返回 1将日期转换位数字
Number(false) // 返回 0
Number(true) // 返回 1将日期转换位数字
日期方法getTime()也有相同的效果
console.log((new Date()).getTime()) //1656399708320自动转换类型
当 JavaScript 尝试操作一个 "错误" 的数据类型时，会自动转换为 "正确" 的数据类型
5 + null // 返回 5 null 转换为 0
"5" + null // 返回"5null" null 转换为 "null"
"5" + 1 // 返回 "51" 1 转换为 "1"
"5" - 1 // 返回 4 "5" 转换为 5自动转换为字符串
当你尝试输出一个对象或一个变量时 JavaScript 会自动调用变量的 toString() 方法
document.getElementById("demo").innerHTML = myVar;
myVar = {name:"Fjohn"} // toString 转换为 "[object Object]"
myVar = [1,2,3,4] // toString 转换为 "1,2,3,4"
myVar = new Date() // toString 转换为 "Fri Jul 18 2014 09:08:55 GMT+0200"数字和布尔值也经常相互转换
数字和布尔值也经常相互转换
原始值 转换为数字 转换为字符串 转换为布尔值
false 0 "false" false
true 1 "true" true
0 0 "0" false
1 1 "1" true
"0" 0 "0" true
"000" 0 "000" true
"1" 1 "1" true
NaN NaN "NaN" false
Infinity Infinity "Infinity" true
-Infinity -Infinity "-Infinity" true
"" 0 "" false
"20" 20 "20" true
"Runoob" NaN "Runoob" true
[ ] 0 "" true
[20] 20 "20" true
[10,20] NaN "10,20" true
["Runoob"] NaN "Runoob" true
["Runoob","Google"] NaN "Runoob,Google" true
function(){} NaN "function(){}" true
{ } NaN "[object Object]" true
null 0 "null" false
undefined NaN "undefined" falseJavaScript运算符
运算符 = 用于赋值 运算符 = 用于给 JavaScript 变量赋值
运算符 + 用于加值 算术运算符 + 用于把值加起来
y = 5;
x = 2;
z = x + y
//代码执行后z的值为7算术运算符
+ 加法 x = 5 + 2 结果为7
- 减法 x = 5 - 2 结果为3
* 乘法 x = 5 * 2 结果为10
/ 除法 x = 5 / 2 结果为2.5
% 取模(余数) x = 5 % 2 结果为1
++ 自增 x = ++5 结果为6
x = 5++ 结果为5
-- 自减 x = --5 结果为4
x = 5-- 结果为5还有就是一些等同的
x = y + x 等同于 x += y
x = y - x 等同于 x -= y
x = y * x 等同于 x *= y
x = y / x 等同于 x /= y
x = y % x 等同于 x %= y+ 运算符用于把文本值或字符串变量加起来（连接起来）
如需把两个或多个字符串变量连接起来，请使用 + 运算符
比较运算符
==(等于) x==8 返回值false
===绝对等于(值和类型均相等) x==="5" false
!= 不等于 x!=8 true
!==不绝对等于(值和类型有一个不相等，或两个都不相等)x!=="5" true
x!==5 false
> 大于 x>8 false
< 小于 x<8 true
>= 大于或等于 x>=8 false
<= 小于或等于比较运算符用来比较两个值是否相等，如果相等会返回true，否则返回false。
使用 == 来做相等运算
当使用==来比较两个值时，如果值的类型不同，则会自动进行类型转换，将其转换为相同的类型，然后在比较
使用 != 来做不相等运算
不相等用来判断两个值是否不相等，如果不相等返回true，否则返回false，不相等也会对变量进行自动的类型转换，如果转换后相等它也会返回false
使用 === 来做全等运算
用来判断两个值是否全等，它和相等类似，不同的是它不会做自动的类型转换，如果两个值的类型不同，直接返回false
使用 !== 来做不全等运算
用来判断两个值是否不全等，它和不等类似，不同的是它不会做自动的类型转换，如果两个值的类型不同，直接返回true
逻辑运算符
&& and (x < 10 && y > 1) 为 true
|| or (x==5 || y==5) 为 false
! not !(x==y) 为 true&& 与：&&可以对符号两侧的值进行与运算并返回结果，运算规则如下：
两个值中只要有一个值为false，就返回false，只有两个值都为true时，才会返回true
JS中的“与”属于短路的与，如果第一个值为false，则不会检查第二个值
非布尔值时：如果两个都为true，则返回第二个值，如果两个值中有false，则返回靠前的false的值
|| 或：||可以对符号两侧的值进行或运算并返回结果，运算规则如下：
两个值中只要有一个true，就返回true，只有两个值都为false，才会返回false
JS中的“或”属于短路的或，如果第一个值为true，则不会检查第二个值
非布尔值时：如果两个都为false ，则返回第二个值，如果两个值中有true，则返回靠前的true的值
! 非：!可以用来对一个值进行非运算，所谓非运算就是对一个布尔值进行取反操作，true变false，false变true，运算规则如下：
如果对一个值进行两次取反，它不会变化
非布尔值时：先会将其转换为布尔值，然后再取反，所以我们可以利用该特点，来将一个其它的数据类型转换为布尔值，可以为一个任意数据类型取两次反，来将其转换为布尔值，原理和Boolean()函数一样
条件运算符(三目运算)
JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符
语法：
var iablename = (condition) ? value1 : value2;举例：
result = (age<18) ? "年龄太小" : "年龄合适";执行流程：如果condition为true，则执行语句1，并返回执行结果，如果为false，则执行语句2，并返回执行结果
JavaScript语句
条件语句
条件语句用于基于不同的的条件来执行不同的动作
通常在写代码是，需要为不同的决定来执行不同的动作，在 JavaScript 中，我们可使用以下条件语句
if语句 只有当指定条件为true时候，使用该语句来执行代码
if....else语句 当条件为true是执行代码，当条件为false时执行其他代码
if....else if....else 选择多个代码之一来执行
switch 选择多个代码之一来执行
if语句
if(condition){
当条件为true时执行的代码
}
if(var i < 100){
console.log(i)//当变量i小于100时打印出变量i的值
}请注意，在这个语法中，没有 ..else..。您已经告诉浏览器只有在指定条件为 true 时才执行代码
if....else语句
请使用 if....else 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码
if(condition){
当条件为true时执行的代码
}else{
当条件为false时执行的代码
}
if(var i < 100){
console.log(i)//当变量i小于100时打印出变量i的值
}else{
console.log('变量i的值不满足条件')当变量i的值大于等于100时打印出'变量i的值不满足条件'
}if....else if....else语句
使用 if....else if...else 语句来选择多个代码块之一来执行
if (condition1)
{
当条件 1 为 true 时执行的代码
}
else if (condition2)
{
当条件 2 为 true 时执行的代码
}
else
{
当条件 1 和 条件 2 都不为 true 时执行的代码
}
if(var i < 100){
console.log(i)//当变量i小于100时打印出变量i的值
}else if(i >= 100 && i < 200){
console.log('变量i的值不满足条件')当变量i的值大于等于100并且小于200时打印出'变量i的值不满足条件'
}else{
console.log('其他条件')//当不满足条件1和条件2时，打印出'其他条件'
}switch 语句
switch 语句用于基于不同的条件来执行不同的动作
请使用 switch 语句来选择要执行的多个代码块之一
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
与 case 1 和 case 2 不同时执行的代码
}
//工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的
//值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自
//动地向下一个 case 运行实例：显示今天的星期名称。请注意 Sunday=0, Monday=1, Tuesday=2, 等等
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/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块
while循环
while (条件)
{
需要执行的代码
}
//只要变量i的值小于5，循环将继续执行下去
while (i<5)
{
x=x + "The number is " + i + "<br>";
i++;
}do/while 循环
do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环
do
{
需要执行的代码
}
while (条件);
//该循环至少会执行一次，及时条件为false她也会执行一次，因为代码块会在条件被测试前执行
do
{
x=x + "The number is " + i + "<br>";
i++;
}
while (i<5);for循环
循环可以将代码块执行指定的次数
如果希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。
我们可以这样输出数组的值
//一般写法
document.write(cars[0] + "<br>");
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>");
//使用for循环
for (var i=0;i<cars.length;i++){
document.write(cars[i] + "<br>");
}for 循环是您在希望创建循环时常会用到的工具
for循环语法
for (语句 1; 语句 2; 语句 3){
被执行的代码块
}语句 1 （代码块）开始前执行
语句 2 定义运行循环（代码块）的条件
语句 3 在循环（代码块）已被执行之后执行
实例
for (var i = 0; i < 5; i++){
x = x + "该数字为 " + i + "<br>";
}
//从上面的例子中，您可以看到：
//Statement 1 在循环开始之前设置变量 (var i=0)。
//Statement 2 定义循环运行的条件（i 必须小于 5）。
//Statement 3 在每次代码块已被执行后增加一个值 (i++)。for/in循环
JavaScript for/in 语句循环遍历对象的属性
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person) // x 为属性名
{
txt=txt + person[x];
}break 语句
break 语句它用于跳出 switch() 语句
break 语句可用于跳出循环
break 语句跳出循环后，会继续执行该循环之后的代码（如果有的话）
for (i=0;i<10;i++)
{
if (i==3)
{
break;
}
x=x + "The number is " + i + "<br>";
}由于这个 if 语句只有一行代码，所以可以省略花括号
for (i=0;i<10;i++)
{
if (i==3) break;
x=x + "The number is " + i + "<br>";
}continue 语句
continue 语句中断当前的循环中的迭代，然后继续循环下一个迭代。 以下例子在值为 3 时，直接跳过
for实例
for (i=0;i<=10;i++)
{
if (i==3) continue;
x=x + "The number is " + i + "<br>";
}while实例
while (i < 10){
if (i == 3){
i++; //加入i++不会进入死循环
continue;
}
x= x + "该数字为 " + i + "<br>";
i++;
}JavaScript 函数
函数定义
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块
JavaScript 函数语法
函数就是包裹在花括号中的代码块，前面使用了关键词 function
语法
function functionname()
{
// 执行代码
}当调用该函数时，会执行函数内的代码
可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用
JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数
调用带参数的函数
在调用函数时，可以向其传递值，这些值被称为参数
这些参数可以在函数中使用
可以发送任意多的参数，由逗号 (,) 分隔
myFunction(argument1,argument2)当声明函数时，请把参数作为变量来声明
function myFunction(var1,var2)
{
代码
}变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推
<p>点击这个按钮，来调用带参数的函数。</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<script>
function myFunction(name,job){
alert("Welcome " + name + ", the " + job);
}
</script>上面的函数在按钮被点击时会提示 "Welcome Harry Potter, the Wizard"
函数很灵活，可以使用不同的参数来调用该函数，这样就会给出不同的消息
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<button onclick="myFunction('Bob','Builder')">点击这里</button>根据点击的不同的按钮，上面的例子会提示 "Welcome Harry Potter, the Wizard" 或 "Welcome Bob, the Builder"
带有返回值的函数
有时，我们会希望函数将值返回调用它的地方
通过使用 return 语句就可以实现
在使用 return 语句时，函数会停止执行，并返回指定的值
语法
function myFunction()
{
var x=5;
return x;
}上面的函数会返回值 5
注意：整个 JavaScript 并不会停止执行，仅仅是函数。JavaScript 将继续执行代码，从调用函数的地方，函数调用将被返回值取代
var myVar=myFunction();myVar 变量的值是 5，也就是函数 "myFunction()" 所返回的值
即使不把它保存为变量，您也可以使用返回值
document.getElementById("demo").innerHTML=myFunction();"demo" 元素的 innerHTML 将成为 5，也就是函数 "myFunction()" 所返回的值
可以使返回值基于传递到函数中的参数
实例
计算两个数字的乘积，并返回结果
function myFunction(a,b)
{
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);在仅仅希望退出函数时 ，也可使用 return 语句。返回值是可选的
function myFunction(a,b)
{
if (a>b)
{
return;
}
x=a+b
}如果 a 大于 b，则上面的代码将退出函数，并不会计算 a 和 b 的总和
局部 JavaScript 变量
在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）
可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕，本地变量就会被删除
全局 JavaScript 变量
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它
JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始
局部变量会在函数运行以后被删除
全局变量会在页面关闭后被删除
向未声明的 JavaScript 变量分配值
如果把值赋给尚未声明的变量，该变量将被自动作为 window 的一个属性
这条语句
carname="Volvo";将声明 window 的一个属性 carname
非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，可以删除
var var1 = 1; // 不可配置全局属性
var2 = 2; // 没有使用 var 声明，可配置全局属性
console.log(this.var1); // 1
console.log(window.var1); // 1
console.log(window.var2); // 2
delete var1; // false 无法删除
console.log(var1); //1
delete var2;
console.log(delete var2); // true
console.log(var2); // 已经删除 报错变量未定义
JavaScript 作用域
作用域是可访问变量的集合
在 JavaScript 中, 对象和函数同样也是变量
在 JavaScript 中, 作用域为可访问变量，对象，函数的集合
JavaScript 函数作用域: 作用域在函数内修改
JavaScript 局部作用域
变量在函数内声明，变量为局部变量，具有局部作用域
局部变量：只能在函数内部访问
实例
// 此处不能调用 carName 变量
function myFunction() {
var carName = "Volvo";
// 函数内可调用 carName 变量
}如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量
以下实例中 carName 在函数内，但是为全局变量
// 此处可调用 carName 变量
function myFunction() {
carName = "Volvo";
// 此处可调用 carName 变量
}
JavaScript 变量生命周期
JavaScript 变量生命周期在它声明时初始化
局部变量在函数执行完毕后销毁
全局变量在页面关闭后销毁
函数参数
函数参数只在函数内起作用，是局部变量
HTML 中的全局变量
在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象
JS函数递归
递归函数：是指函数直接或间接调用自身函数本身，则该函数为递归函数
function fun(){
console.log("函数 fun 是递归函数。");
fun();
}fun 函数就是一个递归函数。
但是把这个函数拿到浏览器上运行的时候，内存会溢出，因为递归函数成为一个死循环。递归函数没有停止处理或运算的出口
使用递归函数必须要符合两个条件：
1、 自己调用自己
2、必须有一个终止处理或计算的出口，让函数结束调用函数自身
实例
求1到100的和
function sum(n){
if(n==1) return 1;
return sum(n-1) + n;
}
var result = sum(100);
console.log(result); // 5050JavaScript 事件
HTML 事件是发生在 HTML 元素上的事情
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件
HTML 事件
HTML 事件可以是浏览器行为，也可以是用户行为
以下是 HTML 事件的实例：
- HTML 页面完成加载
- HTML input 字段改变时
- HTML 按钮被点击
通常，当事件发生时，你可以做些事情
在事件触发时 JavaScript 可以执行一些代码
HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素
单引号:
<some-HTML-element some-event='JavaScript 代码'>双引号：
<some-HTML-element some-event="JavaScript 代码">实例：
<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
以上实例中，JavaScript 代码将修改 id="demo" 元素的内容
在下一个实例中，代码将修改自身元素的内容 (使用 this.innerHTML):
<button onclick="this.innerHTML=Date()">现在的时间是?</button>
| JavaScript代码通常是几行代码。比较常见的是通过事件属性来调用 |
常见的HTML事件
| 事件 | 描述 |
|---|---|
| onchange | HTML 元素改变 |
| onclick | 用户点击 HTML 元素 |
| onmouseover | 鼠标指针移动到指定的元素上时发生 |
| onmouseout | 用户从一个 HTML 元素上移开鼠标时发生 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已完成页面的加载 |
更多常见的事件列表，可以去参考 HTML DOM事件
JavaScript 可以做什么?
事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:
- 页面加载时触发事件
- 页面关闭时触发事件
- 用户点击按钮执行动作
- 验证用户输入内容的合法性
- 等等 ...
可以使用多种方法来执行 JavaScript 事件代码：
- HTML 事件属性可以直接执行 JavaScript 代码
- HTML 事件属性可以调用 JavaScript 函数
- 你可以为 HTML 元素指定自己的事件处理程序
- 你可以阻止事件的发生
- 等等 ...
JavaScript this 关键字
面向对象语言中 this 表示当前对象的一个引用
但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变
- 在方法中，this 表示该方法所属的对象
- 如果单独使用，this 表示全局对象
- 在函数中，this 表示全局对象
- 在函数中，在严格模式下，this 是未定义的(undefined)
- 在事件中，this 表示接收事件的元素
- 类似 call() 和 apply() 方法可以将 this 引用到任何对象
实例：
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};方法中的 this
在对象方法中， this 指向调用它所在方法的对象
在上面一个实例中，this 表示 person 对象
fullName 方法所属的对象就是 person
fullName : function() {
return this.firstName + " " + this.lastName;
}单独使用 this
单独使用 this，则它指向全局(Global)对象
在浏览器中，window 就是该全局对象为 [object Window]
var x = this严格模式下，如果单独使用，this 也是指向全局(Global)对象
"use strict";
var x = this;函数中使用 this（默认）
在函数中，函数的所属者默认绑定到 this 上
在浏览器中，window 就是该全局对象为 [object Window]:
function myFunction() {
return this;
}函数中使用 this（严格模式）
严格模式下函数是没有绑定到 this 上，这时候 this 是 undefined
"use strict";
function myFunction() {
return this;
}
事件中的 this
在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素
<button onclick="this.style.display='none'">
点我后我就消失了
</button>对象方法中绑定
下面实例中，this 是 person 对象，person 对象是函数的所有者
var person = {
firstName : "John",
lastName : "Doe",
id : 5566,
myFunction : function() {
return this;
}
};var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};说明: this.firstName 表示 this (person) 对象的 firstName 属性
显式函数绑定
在 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 正则表达式
正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式
搜索模式可用于文本搜索和文本替换
什么是正则表达式？
正则表达式是由一个字符序列形成的搜索模式
当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容
正则表达式可以是一个简单的字符，或一个更复杂的模式
正则表达式可用于所有文本搜索和文本替换的操作
语法
/正则表达式主体/修饰符(可选)其中修饰符是可选的
实例：
var patt = /runoob/i实例解析：
/runoob/i 是一个正则表达式。
runoob 是一个正则表达式主体 (用于检索)。
i 是一个修饰符 (搜索不区分大小写)。
使用字符串方法
在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。
search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
replace() 方法用于在字符串中用一些字符串替换另一些字符串，或替换一个与正则表达式匹配的子串。
search() 方法使用正则表达式
使用正则表达式搜索 "Runoob" 字符串，且不区分大小写
var str = "Visit Runoob!";
var n = str.search(/Runoob/i);输出结果为6
search() 方法使用字符串
search 方法可使用字符串作为参数。字符串参数会转换为正则表达式
检索字符串中 "Runoob" 的子串
var str = "Visit Runoob!";
var n = str.search("Runoob");replace() 方法使用正则表达式
使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 Runoob
var str ='Visit Microsoft!'
var txt = str.replace(/microsoft/i,"Runoob");输出结果为 Visit Runoob!
replace() 方法使用字符串
replace() 方法将接收字符串作为参数
var str ='Visit Microsoft!'
var txt = str.replace("Microsoft","Runoob")注意
正则表达式参数可用在以上方法中 (替代字符串参数)。
正则表达式使得搜索功能更加强大(如实例中不区分大小写)
正则表达式修饰符
修饰符 可以在全局搜索中不区分大小写:
| 修饰符 | 描述 |
|---|---|
| i | 执行对大小写不敏感的匹配。 |
| g | 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。 |
| m | 执行多行匹配。 |
正则表达式模式
方括号用于查找某个范围内的字符：
| 表达式 | 描述 |
|---|---|
| [abc] | 查找方括号之间的任何字符。 |
| [0-9] | 查找任何从 0 至 9 的数字。 |
| (x|y) | 查找任何以 | 分隔的选项。 |
元字符是拥有特殊含义的字符：
| 元字符 | 描述 |
|---|---|
| \d | 查找数字。 |
| \s | 查找空白字符。 |
| \b | 匹配单词边界。 |
| \uxxxx | 查找以十六进制数 xxxx 规定的 Unicode 字符。 |
量词:
| 量词 | 描述 |
|---|---|
| n+ | 匹配任何包含至少一个 n 的字符串。 |
| n* | 匹配任何包含零个或多个 n 的字符串。 |
| n? | 匹配任何包含零个或一个 n 的字符串。 |
使用 RegExp 对象
在 JavaScript 中，RegExp 对象是一个预定义了属性和方法的正则表达式对象
test() 方法是一个正则表达式方法
test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false
以下实例用于搜索字符串中的字符 "e"
var patt = /e/;
patt.test("The best things in life are free!");
意思就是 变量patt 在test后面的字符串"The best things in life are free!"中去匹配e，所以实力输出为 true
也可以不用设置正则表达式的变量，以上两行代码可以合并为一行：
/e/.test("The best things in life are free!")使用 exec()
exec() 方法是一个正则表达式方法
exec() 方法用于检索字符串中的正则表达式的匹配
该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null
以下实例用于搜索字符串中的字母 "e"
/e/.exec("The best things in life are free!");也是去匹配是否含有e 返回为true
虽然感觉写的过于简单，感觉挺适合初学者的
暂时第一篇就告一段落了，期待下篇
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
