JavaScript笔记
1.HTML事件
1.1 HTML事件
HTML事件： HTML事件可以是浏览器事件，也可以是用户事件。
常见的HTML事件有：
- HTML 页面完成加载
- HTML input 字段改变时
- HTML 按钮被点击
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>
</body>
</html>
上述功能实现了一个点击按钮后显示当前时间的一个功能。也可以用函数形式实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function A(){
document.getElementById('demo').innerHTML=Date();
}
</script>
</head>
<body>
<button onclick="A()">现在的时间是?</button>
<p id="demo"></p>
</body>
</html>
更多的事件请查看：HTML DOM 事件
1.2 JavaScript 可以做什么?
事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:
- 页面加载时触发事件
- 页面关闭时触发事件
- 用户点击按钮执行动作
- 验证用户输入内容的合法性
- 等等 …
可以使用多种方法来执行 JavaScript 事件代码：
- HTML 事件属性可以直接执行 JavaScript 代码
- HTML 事件属性可以调用 JavaScript 函数
- 你可以为 HTML 元素指定自己的事件处理程序
- 你可以阻止事件的发生。
- 等等 …
2.字符串
2.1 字符串索引
不区分单引号和双引号。
访问字符串时可以使用索引，默认从0开始。
var carname = 'Volvo XC60';
var character = carname[7];
2.2 字符串长度
使用.lengh可以获得字符串的长度。
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;
2.3 特殊字符
字符串是需要用单引号，双引号包裹的。
若字符串内容也包含了单引号或者双引号，则会影响正常显示。
解决的办法：使用转义字符 “\”
| 代码 | 输出 |
|---|---|
| \' | 单引号 |
| \" | 双引号 |
| \\ | 反斜杠 |
| \\\\ | 双斜杠 |
| \n | 换行 |
| \r | 回车 |
| \t | 制表符(Tab) |
| \b | 退格符 |
| \f | 换页符 |
var x = "John";
var y = new String("John");
typeof x // 返回 String
typeof y // 返回 Object
var x = "John";
var y = new String("John");
(x === y) // 结果为 false，因为 x 是字符串，y 是对象
=：赋值
==：值相等
===：值和类型完全相等
常见的字符串方法：
| 方法 | 描述 |
|---|---|
| charAt() | 返回指定索引位置的字符 |
| charCodeAt() | 返回指定索引位置字符的 Unicode 值 |
| concat() | 连接两个或多个字符串，返回连接后的字符串 |
| fromCharCode() | 将 Unicode 转换为字符串 |
| indexOf() | 返回字符串中检索指定字符第一次出现的位置 |
| lastIndexOf() | 返回字符串中检索指定字符最后一次出现的位置 |
| localeCompare() | 用本地特定的顺序来比较两个字符串 |
| match() | 找到一个或多个正则表达式的匹配 |
| replace() | 替换与正则表达式匹配的子串 |
| search() | 检索与正则表达式相匹配的值 |
| slice() | 提取字符串的片断，并在新的字符串中返回被提取的部分 |
| split() | 把字符串分割为子字符串数组 |
| substr() | 从起始索引号提取字符串中指定数目的字符 |
| substring() | 提取字符串中两个指定的索引号之间的字符 |
| toLocaleLowerCase() | 根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射 |
| toLocaleUpperCase() | 根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射 |
| toLowerCase() | 把字符串转换为小写 |
| toString() | 返回字符串对象值 |
| toUpperCase() | 把字符串转换为大写 |
| trim() | 移除字符串首尾空白 |
| valueOf() | 返回某个字符串对象的原始值 |
3.运算符
JavaScript的运算符基本和Java的一模一样。
需要注意的地方：
3.1 数字和字符串相加
当数字和数字相加后，结果为数字；
当字符串和字符串相加后，结果为字符串；
x=5+5;
y="5"+5;
返回：
10
55
没有任何问题！
但是当数字和字符串相加后，返回的字符串，字符串，字符串！！！，
z="Hello"+5;
返回：
Hello5
这就引申出了一个方法：
当需要把数字转换为字符串时：
var a = " "+5;
var b = " "+5;
得到的是：
5
5
空格是会计算的，因为是字符串。有时候html页面会省略前面的空格，直接显示数字。但其实还是字符串类型，不管省略与否，调试模式下看到的总是不会省略的。
3.2 数字和布尔值、空值相加
结果为数字！！！
布尔值 false 转成 0，true 转成 1，空值（null）转成数字0
var one=13;
var two=true;
var three=one+two;
结果
three:14
3.3 字符串和布尔值、空值相加
布尔值转化为字符串，空值（null）转成字符串null。
var one="我爱你";
var two=true;
var three=one+two;
结果
three:我爱你true
3.4取模（取余）运算
取模运算的符号是：“%”，返回的是余数。
取模运算的结果符号只与左边值的符号有关：
- 如果 % 左边的操作数是正数，则模除的结果为正数或零；
- 如果 % 左边的操作数是负数，则模除的结果为负数或零。
var x = 7 % 3;
var y = 7 % (-3);
var z = (-7) % 3;
结果
1
1
-1
总结：
| 运算类型 | 处理结果 |
|---|---|
| 数字+数字 | 数字 |
| 字符串+字符串 | 字符串 |
| 数字+字符串 | 字符串 |
| 数字+布尔值 | 数字 false 转成 0，true 转成 1 |
| 字符串+布尔值 | 字符串 false 转成"false"，true 转成"true" |
| 数字+空值 | 数字 null 转成0 |
| 字符串+空值 | 字符串 null 转成"null" |
| 布尔值+空值 | 数字 false 转成 0，true 转成 1，null 转成0 |
4.For循环
JavaScript的循环语句跟Java基本类似。
市面上大多数程序员的习惯依然是多用if else，少用switch。
4.1 For In 循环
for/in 语句循环遍历对象的属性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>点击下面的按钮，循环遍历对象 "person" 的属性。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
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;
}
</script>
</body>
</html>
核心部分
function myFunction(){
var x;
var txt="";
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person){
txt=txt + person[x];
}
上述代码中，x是变量，person是对象。x遍历时从0到2，因为对象person里只有三个属性。当遍历完时停止。
5.类型
5.1 类型判断
typeof 操作符
你可以使用 typeof 操作符来检测变量的数据类型。
实例
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof NaN // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:'John', age:34} // 返回 object
typeof new Date() // 返回 object
var person = null; // 返回 object
var person = undefined; // 返回 undefined
var a; // 返回 undefined
注： 字符如果对象是 JavaScript Array 或 JavaScript Date ，我们就无法通过 typeof 来判断，因为都是返回 object。
5.2 null和undefined的区别
| null | undefined | |
|---|---|---|
| 值 | 空 | 空 |
| 类型 | object | undefined |
| 作用 | 有过数据需要释放内存 | 声明一个变量但未赋值时的默认值 |
6.类型转换
6.1 将数字转换为字符串
6.1.1全局方法：string()
String(x) // 将变量 x 转换为字符串并返回
String(123) // 将数字 123 转换为字符串并返回
String(100 + 23) // 将数字表达式转换为字符串并返回
6.1.2 Number 方法 toString()
x.toString()
(123).toString()
(100 + 23).toString()
6.2 将布尔值转换为字符串
6.2.1全局方法：string()
String(false) // 返回 "false"
String(true) // 返回 "true"
6.2.2 Boolean 方法 toString()
false.toString() // 返回 "false"
true.toString() // 返回 "true"
6.3 将日期转换为字符串
Date() 返回日期字符串。
6.3.1全局方法：string()
String(new Date())
6.3.2 Date 方法 toString()
obj = new Date()
obj.toString()
6.4 将字符串转换为数字
全局方法 Number() 可以将字符串转换为数字。
字符串包含数字(如 “3.14”) 转换为数字 (如 3.14).
空字符串转换为 0。
其他的字符串会转换为 NaN (不是个数字)。
Number("3.14") // 返回 3.14
Number(" ") // 返回 0
Number("") // 返回 0
Number("99 88") // 返回 NaN
6.5 将布尔类型转换为数字
Number(false) // 返回 0
Number(true) // 返回 1
7.正则表达式
正则表达式是由一个字符序列形成的搜索模式。
当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。
正则表达式可以是一个简单的字符，或一个更复杂的模式。
正则表达式可用于所有文本搜索和文本替换的操作。
7.1 正则表达式
语法： /正则表达式主体/修饰符(可选)
var patt = /runoob/i
7.2 使用字符串方法
search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
实例：
search() 方法使用正则表达式：
var str = "Visit Runoob!";
var n = str.search(/Runoob/i);
search() 方法使用字符串：
var str = "Visit Runoob!";
var n = str.search("Runoob");
输出结果为：
6
=================================================================================
replace() 方法使用正则表达式
var str = document.getElementById("demo").innerHTML;
var txt = str.replace(/microsoft/i,"Runoob");
replace() 方法使用字符串
var str = document.getElementById("demo").innerHTML;
var txt = str.replace("Microsoft","Runoob");
输出结果为：
Visit Runoob!
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
