目录
JavaScript简介
-
能直接写入HTML输出流中
<script>document.write("<h1>我是一级标题</h1>")</script> -
能对事件的反应
<button type="button" onclick="alert('欢迎')">使劲点我</button> -
能改变HTML内容
<p id="demo">JavaScript能改变HTML的内容</p> <script> function myFunction() { x = document.getElementById("demo");//找到元素 x.innerHTML = "Hello JavaScript";//改变内容 }//document.getElementByid("some id")是由DOM（Document Object Model）（文档对象模型）定义的，用于访问HTML元素的正式W3C标准 </script> <button type="button" onclick="myFunction()">点击这里</button> -
改变HTML图像
<script> function changeImage() { element=document.getElementById("myimage")//都是用双引号 if (element.src.match("bulbon"))//检索img标签中的src属性值有没有包含bulbon这个字符串 { element.src="https://www.runoob.com/images/pic_bulboff.gif"; } else { element.src="https://www.runoob.com/images/pic_bulbon.gif"; } } </script> <img id="myimage" onclick="changeImage()" src="https://www.runoob.com/images/pic_bulboff.gif" width="100" height="180"> <p>点击灯泡就可以打开或关闭这盏灯</p> -
能改变HTML样式，属于改变HTML属性的变种
<p id="demo">JavaScript能改变HTML的样式</p> <script> function myfunction() { x=document.getElementById("demo") //找到元素 x.style.color="#ff0000"; //改变样式 } </script> <button type="button" onclick="myfunction()">使劲点击我</button> -
用于验证用户的输入
<p>请输入数字</p> <input id="demo" type="text"> <script> function myFunction() { var x=document.getElementById("demo").value; if(x==""||isNaN(x)) { alert("不是数字"); } } </script> <button type="button" onclick="myFunction()">点击这里</button>
JavaScript用法
浏览器会解释并执行位于<script></script>之间的JavaScript代码。
<script>alert('hello world')</script> //内部引入方式
<script src="myScript.js"></script> //外部导入方式，不能包含<script>标签
JavaScript输出
-
使用window.alert()弹出警告框
<script>window.alert(5+6);</script> <script>window.alert("5+6");</script> //注意二者区别 -
使用document.write()方法将内容写到HTML文档中
<script>document.write(Date());</script> -
如果在文档已完成加载后执行document.write，整个HTML页面将被覆盖
<p>我是标题标签</p> <button onclick="myFunction()">使劲戳我</button> <script> function myFunction() { document.write(Date()) } </script> -
使用innerHTML写入或获取HTML元素
<p id="demo">hello world</p> <script> document.getElementById("demo").innerHTML="世界你好"; </script> -
使用console.log()写入到浏览器的控制台
<script> a=5; b=6; c=a+b; console.log(c); </script> <p>浏览器使用F12来启用调试模式，在console菜单查看</p>
JavaScript语法
在编程语言中，一般固定值称为字面量，如3.14。
JavaScript字面量(typeof)-值
- 数字（Number）字面量：整数、小数、科学计数
3.14 1000 123e5
-
字符串（String）字面量：单引号、双引号
-
表达式字面量：用于计算，如
5+6 -
数组（Array）字面量：定义一个数组
var nums = [2,5,7,1,9]
- 对象（Object）字面量：定义一个对象
var person = {firstName:"allen",lastName:"jin",age:18}
- 函数（Function）字面量：定义一个函数
function myFunction(a,b){return a * b;}
JavaScript变量-名称
变量用于存储数据值，使用关键字var定义变量，使用等号为变量赋值。
<p id="demo"></p>
<script>
var length;
length=4;
document.getElementById("demo").innerHTML=length;
需求：假设y=5，计算x=y+2并显示结果
<p>假设y=5，计算x=y+2并显示结果</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction() {
var y=5;
var x=y+2;
var demoP=document.getElementById("demo");
demoP.innerHTML="x="+x;
}
</script>
JavaScript操作符
用算术运算符来计算值；
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML=(5+6)*10;
</script>
用赋值运算符给变量赋值
<p id="demo"></p>
<script>
var x,y,z;
x=5;
y=6;
z=(x+y)*10;
document.getElementById("demo").innerHTML=z;
</script>
注：关键字用于标识要执行的操作，语句用分号分隔，注释用//表示，对大小写敏感，使用Unicode字符集，驼峰法命名规则lastName。
JavaScript语句标识符
| 语句 | 描述 |
|---|---|
| break | 用于跳出循环。 |
| catch | 语句块，在 try 语句块执行出错时执行 catch 语句块。 |
| continue | 跳过循环中的一个迭代。 |
| do ... while | 执行一个语句块，在条件语句为 true 时继续执行该语句块。 |
| for | 在条件语句为 true 时，可以将代码块执行指定的次数。 |
| for ... in | 用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。 |
| function | 定义一个函数 |
| if ... else | 用于基于不同的条件来执行不同的动作。 |
| return | 退出函数 |
| switch | 用于基于不同的条件来执行不同的动作。 |
| throw | 抛出（生成）错误 。 |
| try | 实现错误处理，与 catch 一同使用。 |
| var | 声明一个变量。 |
| while | 当条件语句为 true 时，执行语句块。 |
JavaScript数据类型
-
值类型：字符串（String）、数字（Number）、布尔（Boolean）、对空（Null）、未定义（Undefined）、Symbol（独一无二的值）
-
引用数据类型：对象（Object）、数组（Array）、函数（Function）
-
JavaScript拥有动态类型，即相同变量可用作不同的类型
var x; //x为undefined var x=5; //现在x为数字 var x="allen"; //现在x为字符串 -
声明新变量时，可使用关键词"new"来声明其类型
var cars=new Array; var x=new Number; //JavaScript变量均为对象。当声明一个变量时，就创建了一个新的对象。 -
Undefined表示变量不含有值，可通过将变量的值设置为null来清空变量。
-
JavaScript对象由花括号分隔。括号内部是对象的属性以名称和值对的形式（name:value）来定义。属性由逗号分隔：
var person={firstname:"allen",lastname:"jin",age=20}; //对象属性有两种寻址方式： name=person.lastname; name=person["lastname"]; -
创建数组有四种方式：
var arr1=new Array('a','b','c');//创建时初始化 var arr2=['a','b','c'];//同上，更简洁 var arr3=new Array(); //空数组 var arr4=[]; //空数组
JavaScript对象
JavaScript对象是拥有属性和方法的数据，是键值对的容器。键值对（对象属性）通常写法为name：value（键与值以冒号分隔）
<p id="demo"></p>
<script>
var person={
firstName:"allen",
lastName:"jin",
age:18
};
document.getElementById("demo").innerHTML=person["firstName"]+""+person.lastName; //访问对象属性
</script>
JavaScript函数
函数是由事件驱动的或当它被调用时执行的可重复使用的代码块。
<p>点击这个按钮，来调用带参数的函数</p>
<button onclick="myFunction('allen','IT')">点击这里</button>
<script>
function myFunction(name,job){
alert("welcome "+name+",the "+job);
}
</script>
带有返回值的函数
有时，我们会希望函数将值返回调用它的地方，通过使用return语句可以实现。使用时，函数会停止运行，并返回指定的值。
<p id="demo"></p>
<script>
function myFunction(a,b) {
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
</script>
JavaScript作用域
- 局部变量：在函数中通过var声明的变量
- 全局变量：在函数外通过var声明的变量。
- 没有声明就使用的变量，默认为全局变量，不论这个变量在哪里被使用。
JavaScript事件
HTML事件是发生在HTML元素上的事情，当在HTML页面上使用JavaScript时，JavaScript可以触发这些事件。
<button onclick="this.innerHTML=Date()">现在的时间是？</button>
代码将修改自身元素的内容，使用this关键字
常见的HTML事件
| 事件 | 描述 |
|---|---|
| onchange | HTML 元素改变 |
| onclick | 用户点击 HTML 元素 |
| onmouseover | 用户在一个HTML元素上移动鼠标 |
| onmouseout | 用户从一个HTML元素上移开鼠标 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已完成页面的加载 |
JavaScript字符串
JavaScript字符串用于存储和处理文本。
<script>
var txt="hello world!"
document.write("<p>"+txt.length+"</p>");
</script> //求字符串的长度
特殊字符
| 代码 | 输出 |
|---|---|
| ' | 单引号 |
| " | 双引号 |
| 反斜杠 | |
| 换行 | |
| 回车 | |
| tab(制表符) | |
| 退格符 | |
| f | 换页符 |
字符串属性
| 属性 | 描述 |
|---|---|
| constructor | 返回创建字符串属性的函数 |
| length | 返回字符串的长度 |
| prototype | 允许您向对象添加属性和方法 |
字符串方法
| 方法 | 描述 |
|---|---|
| charAt() | 返回指定索引位置的字符 |
| charCodeAt() | 返回指定索引位置字符的 Unicode 值 |
| concat() | 连接两个或多个字符串，返回连接后的字符串 |
| fromCharCode() | 将 Unicode 转换为字符串 |
| indexOf() | 返回字符串中检索指定字符第一次出现的位置 |
| lastIndexOf() | 返回字符串中检索指定字符最后一次出现的位置 |
| localeCompare() | 用本地特定的顺序来比较两个字符串 |
| match() | 找到一个或多个正则表达式的匹配 |
| replace() | 替换与正则表达式匹配的子串 |
| search() | 检索与正则表达式相匹配的值 |
| slice() | 提取字符串的片断，并在新的字符串中返回被提取的部分 |
| split() | 把字符串分割为子字符串数组 |
| substr() | 从起始索引号提取字符串中指定数目的字符 |
| substring() | 提取字符串中两个指定的索引号之间的字符 |
| toLocaleLowerCase() | 根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射 |
| toLocaleUpperCase() | 根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射 |
| toLowerCase() | 把字符串转换为小写 |
| toString() | 返回字符串对象值 |
| toUpperCase() | 把字符串转换为大写 |
| trim() | 移除字符串首尾空白 |
| valueOf() | 返回某个字符串对象的原始值 |
JavaScript运算符
运算符=用于赋值；运算符+用于加值；！==：不绝对等于；++：自增；--：自减；===绝对等于（值和类型均相等）；&&：and；||：or；！：not；。
需求：如果变量age中的值小于18，则向变量voteable赋值“年龄太小”，否则赋值“年龄已达到”。
<p>点击按钮检测年龄</p>
年龄：<input id="age" type="text" value="18">
<p>是否达到投票年龄？</p>
<button onclick="myFunction()">点击按钮</button>
<p id="demo"></p>
<script>
function myFunction(){
var age,voteable;
age=document.getElementById("age").value;
voteable=(age<18)?"年龄太小":"年龄已达到";
document.getElementById("demo").innerHTML=voteable;
}
</script>
JavaScript条件语句
条件语句基于不同的条件来执行不同的操作。
需求：如果时间小于 10:00，则生成问候 "Good morning"，如果时间大于 10:00 小于 20:00，则生成问候 "Good day"，否则生成问候 "Good evening"
<script type="text/javascript">
var d = new Date();
var time=d.getHours();
if (time<10)
{
document.write("<b>Good morning</b>")
}
else if(time>=10 && time<16)
{
document.write("<b>Good day</b>")
}
else
{
document.write("<b>Good evening</b>")
}
</script>
JavaScript switch语句
switch语句基于不同的条件来执行不同的操作。
工作原理：首先设置表达式n（通常是一个变量）。随后表达式的值会与结构中的每个case的值作比较。如果存在匹配，则与该case关联的代码块会被执行。请使用break来阻止代码自动地向下一个case运行。
需求：显示今天的星期名称。注意Sunday=0，Monday=1...等等
<p>点击下面按钮显示今天星期几：</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction() {
var x;
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;
}
document.getElementById("demo").innerHTML=x;
}
</script>
default关键词
用于匹配不存在时做的事情
需求：如果今天不是星期六或星期日，则会输出默认的消息
<p>点击按钮，显示今日消息：</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction() {
var x;
var d = new Date().getDay();
switch (d) {
case 6:
x = "今天是星期六";
break;
case 0:
x = "今天是星期日";
break;
default:
x = "期待周末"
}
document.getElementById("demo").innerHTML = x;
}
</script>
JavaScript 循环
循环可以将代码块执行指定的次数。
-
for——循环代码块一定的次数
<script> nums = ["11", "22", "33", "44"] for (var i = 0; i < nums.length; i++) { document.write(nums[i] + "<hr>"); } </script> //for循环写法 <script> nums = ["11", "22", "33", "44"]; var i = 0; while (nums[i]) { document.write(nums[i] + "<hr>"); i++; } </script> //while写法 -
for/in——循环遍历对象的属性
<button onclick="myFunction()">点击这里</button> <p id="demo"></p> <script> function myFunction() { var x; var txt = ""; var person = {fname: "allen", lname: "jin", age: 18}; for (x in person) { txt = txt + person[x]; } document.getElementById("demo").innerHTML = txt; } </script> -
while——当指定的条件为true时循环指定的代码块
<button onclick="myFunction()">点击这里</button> <p id="demo"></p> <script> function myFunction() { var x = "", i = 0; while (i < 5) { x = x + "该数字为" + i + "<hr>"; i++; } document.getElementById("demo").innerHTML = x; } </script> //如果忘记增加条件中所用变量的值，该循环永远不会结束，可能导致浏览器崩溃 -
do/while——同样当指定的条件为true时循环指定的代码块
<button onclick="myFunction()">点击这里</button> <p id="demo"></p> <script> function myFunction() { var x = "", i = 0; do { x = x + "该数字为" + i + "<hr>"; i++; } while (i < 5) document.getElementById("demo").innerHTML = x; } </script>
JavaScript Break和Continue语句
-
break语句用于跳出循环
<button onclick="myFunction()">点击这里</button> <p id="demo"></p> <script> function myFunction() { var x = "", i = 0; for (i = 0; i < 10; i++) { if (i == 3) { break; } x = x + "该数字为" + i + "<hr>"; } document.getElementById("demo").innerHTML = x; } </script> -
continue用于跳出循环中的一个迭代
<button onclick="myFunction()">点击这里</button> <p id="demo"></p> <script> function myFunction() { var x = "", i = 0; for (i = 0; i < 10; i++) { if (i == 3) { continue; } x = x + "该数字为" + i + "<hr>"; } document.getElementById("demo").innerHTML = x; } </script>
typeof、null、undefined
-
typeof操作符检测变量的数据类型
typeof "John" // 返回 string typeof 3.14 // 返回 number typeof false // 返回 boolean typeof [1,2,3,4] // 返回 object typeof {name:'John', age:34} // 返回 object //数组是一种特殊的对象类型 -
null表示什么都没有，一个值得特殊类型。表示一个空对象引用
var person = null; // 值为 null(空), 但类型为对象 var person = undefined; // 值为 undefined, 类型为 undefined -
undefined是一个没有设置值的变量。
var person; // 值为 undefined(空), 类型是undefined person = undefined; // 值为 undefined, 类型是undefined //任何变量都可以通过设置值为 undefined 来清空。 类型为 undefined -
undefined和null的区别
typeof undefined // undefined typeof null // object null === undefined // false null == undefined // true // null和undefined的值相等，但类型不等
JavaScript类型转换
Number() 转换为数字， String() 转换为字符串， Boolean() 转化为布尔值。
在JavaScript中有5种不同的数据类型：
- string
- number
- boolean
- object
- function
在JavaScript中有3中对象类型：
- Object
- Date
- Array
在JavaScript中有2个不包含任何值得数据类型：
- null
- undefined
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
typeof function () {} // 返回 function
typeof myCar // 返回 undefined (如果 myCar 没有声明)
typeof null // 返回 object
- NaN的数据类型是number
- 数组（Array）的数据类型是object
- 日期（Date）的数据类型为object
- null的数据类型是object
- 未定义变量的数据类型为underfined
- 若对象是JavaScript Array或JavaScript Date，我们无法通过typeof来判断类型，因为返回都是object。
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"）
<p>判断是否为数组</p>
<p id="demo"></p>
<script>
var nums = ['11', '22', '33', '44'];
document.getElementById("demo").innerHTML = isArray(nums);
function isArray(myArray) {
return myArray.constructor.toString().indexOf("Array") > -1;
}
</script>
使用constructor属性来查看对象是否为日期（包含字符串"Date"）
<p>判断是否为日期</p>
<p id="demo"></p>
<script>
var myDate = new Date();
document.getElementById("demo").innerHTML = isDate(myDate);
function isDate(myDate) {
return myDate.constructor.toString().indexOf("Date") > -1;
}
</script>
JavaScript类型转换
- 通过使用JavaScript函数
- 通过JavaScript自身自动转换
将数字转换为字符串
String(x) // 将变量 x 转换为字符串并返回
String(123) // 将数字 123 转换为字符串并返回
String(100 + 23) // 将数字表达式转换为字符串并返回
x.toString()
(123).toString()
(100 + 23).toString()
将布尔值转换为字符串
String(false) // 返回 "false"
String(true) // 返回 "true"
false.toString() // 返回 "false"
true.toString() // 返回 "true"
将日期转换为字符串
Date() //返回字符串
String(new Date()) //转成字符串
obj=new Date()
obj.toString() //返回字符串
| 方法 | 描述 |
|---|---|
| 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 日至今的毫秒数。 |
将字符串转换为数字
Number("3.14") // 返回 3.14
Number(" ") // 返回 0
Number("") // 返回 0
Number("99 88") // 返回 NaN,不是数字
| 方法 | 描述 |
|---|---|
| parseFloat() | 解析一个字符串，并返回一个浮点数。 |
| parseInt() | 解析一个字符串，并返回一个整数。 |
将布尔值转换为数字
Number(false) // 返回 0
Number(true) // 返回 1
将日期转化为数字
d = new Date();
Number(d) // 返回 1404568027739
d = new Date();
d.getTime() // 返回 1404568027739
下表展示使用不同数值转换：
| 原始值 | 转换为数字 | 转换为字符串 | 转换为布尔值 |
|---|---|---|---|
| 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" | false |
JavaScript正则表达式
用于所有文本搜索和文本替换的操作，语法：/正则表达式主体/修饰符（可选）
-
search()方法使用正则表达式——文本搜索
var str = "Visit Runoob!"; var n = str.search(/Runoob/i); var str = "Visit Runoob!"; var n = str.search("Runoob"); //字符串作为参数 -
replace()方法使用正则表达式——文本替换
var str = document.getElementById("demo").innerHTML; var txt = str.replace(/microsoft/i,"Runoob"); var str = document.getElementById("demo").innerHTML; var txt = str.replace("Microsoft","Runoob");
正则表达式修饰符
修饰符可以在全局搜索中不区分大小写
| 修饰符 | 描述 |
|---|---|
| i | 执行对大小写不敏感的匹配。 |
| g | 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。 |
| m | 执行多行匹配。 |
正则表达式模式
方括号用于查找某个范围内的字符：
| 表达式 | 描述 |
|---|---|
| [abc] | 查找方括号之间的任何字符。 |
| [0-9] | 查找任何从 0 至 9 的数字。 |
| (x|y) | 查找任何以 | 分隔的选项。 |
元字符是拥有特殊含义的字符：
| 元字符 | 描述 |
|---|---|
| d | 查找数字。 |
| s | 查找空白字符。 |
| 匹配单词边界。 | |
| uxxxx | 查找以十六进制数 xxxx 规定的 Unicode 字符。 |
量词:
| 量词 | 描述 |
|---|---|
| n+ | 匹配任何包含至少一个 n 的字符串。 |
| n* | 匹配任何包含零个或多个 n 的字符串。 |
| n? | 匹配任何包含零个或一个 n 的字符串。 |
需求：正则表达式表单验证实例
/*是否带有小数*/
function isDecimal(strValue ) {
var objRegExp= /^d+.d+$/;
return objRegExp.test(strValue);
}
/*校验是否中文名称组成 */
function ischina(str) {
var reg=/^[u4E00-u9FA5]{2,4}$/; /*定义验证表达式*/
return reg.test(str); /*进行验证*/
}
/*校验是否全由8位数字组成 */
function isStudentNo(str) {
var reg=/^[0-9]{8}$/; /*定义验证表达式*/
return reg.test(str); /*进行验证*/
}
/*校验电话码格式 */
function isTelCode(str) {
var reg= /^((0d{2,3}-d{7,8})|(1[3584]d{9}))$/;
return reg.test(str);
}
/*校验邮件地址是否合法 */
function IsEmail(str) {
var reg=/^w+@[a-zA-Z0-9]{2,10}(?:.[a-z]{2,4}){1,3}$/;
return reg.test(str);
}
JavaScript错误处理
-
try语句测试代码块的错误
-
catch语句处理错误
-
throw语句创建自定义错误
-
finally语句在try和catch语句之后，无论是否触发异常，该语句都会执行。
try { ... //异常的抛出 } catch(e) { ... //异常的捕获与处理 } finally { ... //结束处理 }function myFunction() { var message, x; message = document.getElementById("p01"); message.innerHTML = ""; x = document.getElementById("demo").value; try { if(x == "") throw "值是空的"; if(isNaN(x)) throw "值不是一个数字"; x = Number(x); if(x > 10) throw "太大"; if(x < 5) throw "太小"; } catch(err) { message.innerHTML = "错误: " + err + "."; } finally { document.getElementById("demo").value = ""; } }
JavaScript调试
-
浏览器调试
a = 5; b = 6; c = a + b; console.log(c); -
debugger关键字
var x = 15 * 5; debugger; document.getElementbyId("demo").innerHTML = x;
JavaScript变量提升
函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。
JavaScript只有声明的变量会提升，初始化的不会
//例1
var x = 5; // 初始化 x
var y = 7; // 初始化 y
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y; // 显示 x 和 y
//例2
var x = 5; // 初始化 x
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y; // 显示 x 和 y
var y = 7; // 初始化 y
实例 2 的 y 输出了 undefined，这是因为变量声明 (var y) 提升了，但是初始化(y = 7) 并不会提升，所以 y 变量是一个未定义的变量。
实例 2 类似以下代码:
var x = 5; // 初始化 x
var y; // 声明 y
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y; // 显示 x 和 y
y = 7; // 设置 y 为 7
为了避免这些问题，通常在每个作用域开始前声明这些变量，这才是正常的JavaScript解析步骤。
JavaScript严格模式
"use strict"指令只允许出现在脚本或函数的开头
-
不允许使用未声明的变量
"use strict"; x = 3.14; // 报错 (x 未定义) -
不允许删除变量或对象
"use strict"; var x = 3.14; delete x; // 报错 -
不允许删除函数
"use strict"; function x(p1, p2) {}; delete x; // 报错 -
不允许变量重名
"use strict"; function x(p1, p1) {}; // 报错 -
不允许使用转义字符
"use strict"; var x = 10; // 报错 -
不允许对只读属性赋值
"use strict"; var obj = {}; Object.defineProperty(obj, "x", {value:0, writable:false}); obj.x = 3.14; // 报错 -
不允许对一个使用getter()方法读取的属性进行赋值
"use strict"; var obj = {get x() {return 0} }; obj.x = 3.14; // 报错 -
变量名不能使用"eval"与"arguments"字符串
"use strict"; var eval = 3.14; // 报错 "use strict"; var arguments = 3.14; // 报错 -
由于一些安全原因，在作用域eval()创建的变量不能被调用
"use strict"; eval ("var x = 2"); alert (x); // 报错 -
禁止this关键字指向全局对象
function f(){ return !this; } // 返回false，因为"this"指向全局对象，"!this"就是false function f(){ "use strict"; return !this; } // 返回true，因为严格模式下，this的值为undefined，所以"!this"为true。
JavaScript使用误区
赋值运算符应用错误
var x=0;
if (x==10) //if 条件语句返回 false (是我们预期的)因为 x 不等于 10
var x=0;
if (x=10) //if 条件语句返回 true (不是我们预期的)因为条件语句执行为 x 赋值 10，10 为 true
var x=0;
if (x=0) //if 条件语句返回 false (不是我们预期的)因为条件语句执行为 x 赋值 0，0 为 false
比较运算符常见错误
var x=10;
var y="10";
if (x==y) //在常规的比较中，数据类型是被忽略的，以下 if 条件语句返回 true
var x=10;
var y="10";
if (x===y) //在严格的比较运算中，=== 为恒等计算符，同时检查表达式的值与类型，以下 if 条件语句返回 false
var x = 10;
switch(x) {
case 10: alert("Hello");
} // 这种错误经常会在 switch 语句中出现，switch 语句会使用恒等计算符(===)进行比较:以下实例会执行 alert 弹窗
var x = 10;
switch(x) {
case "10": alert("Hello");
} //由于类型不一致不会执行 alert 弹窗
加法与连接注意事项
加法是两个数字相加，而连接是两个字符串连接，两者都使用+运算符
var x = 10 + 5; // x 的结果为 15
var x = 10 + "5"; // x 的结果为 "105"
var x = 10;
var y = 5;
var z = x + y; // z 的结果为 15
var x = 10;
var y = "5";
var z = x + y; // z 的结果为 "105"
浮点型数据使用注意事项
JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。所有的编程语言，包括 JavaScript，对浮点型数据的精确度都很难确定：
var x = 0.1;
var y = 0.2;
var z = x + y // z 的结果为 0.3
if (z == 0.3) // 返回 false
为解决以上问题，可以用整数的乘除法来解决：
var z = (x * 10 + y * 10) / 10; // z 的结果为 0.3
JavaScript字符串分行
JavaScript 允许我们在字符串中使用断行语句,但是，在字符串中直接使用回车换行是会报错的，字符串断行需要使用反斜杠()
var x =
"Hello World!"; //正确
var x = "Hello
World!"; //错误
var x = "Hello
World!"; //正确
错误的使用分号
if 语句失去方法体，原 if 语句的方法体作为独立的代码块被执行，导致错误的输出结果
if (x == 19);
{
// code block
} //错误
return语句使用注意事项
JavaScript 默认是在代码的最后一行自动结束。以下两个实例返回结果是一样的(一个有分号一个没有):
function myFunction(a) {
var power = 10
return a * power
}
function myFunction(a) {
var power = 10;
return a * power;
}
JavaScript 也可以使用多行来结束一个语句。以下实例返回相同的结果:
function myFunction(a) {
var
power = 10;
return a * power;
} //正确
function myFunction(a) {
var
power = 10;
return
a * power;
} //undefined 不用对return语句进行断行
解析
如果是一个不完整的语句，如下所示:
var
JavaScript 将尝试读取第二行的语句：
power = 10;
但是由于这样的语句是完整的:
return
JavaScript 将自动关闭语句:
return;
在 JavaScript 中，分号是可选的 。由于 return 是一个完整的语句，所以 JavaScript 将关闭 return 语句。
数组中使用名字来索引
许多程序语言都允许使用名字来作为数组的索引。使用名字来作为索引的数组称为关联数组(或哈希)。JavaScript 不支持使用名字来索引数组，只允许使用数字索引。
var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length; // person.length 返回 3
var y = person[0]; // person[0] 返回 "John"
在 JavaScript 中,对象 使用 名字作为索引。如果你使用名字作为索引，当访问数组时，JavaScript 会把数组重新定义为标准对象。执行这样操作后，数组的方法及属性将不能再使用，否则会产生错误:
var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length; // person.length 返回 0
var y = person[0]; // person[0] 返回 undefined
定义数组元素或对象，最后不能添加逗号
添加逗号虽然语法没有问题，但是在不同的浏览器可能得到不同的结果。
var colors = [5, 6, 7,]; //这样数组的长度可能为3 也可能为4。
websites = {site:"菜鸟", url:"www.ru.com", like:460,}
正确的定义方式：
points = [40, 100, 1, 5, 25, 10];
websites = {site:"菜鸟", url:"www.ru.com", like:460}
Undefined不是Null
在 JavaScript 中, null 用于对象, undefined 用于变量，属性和方法。对象只有被定义才有可能为 null，否则为 undefined。如果我们想测试对象是否存在，在对象还没定义时将会抛出一个错误。
错误的使用方式：
if (myObj !== null && typeof myObj !== "undefined")
正确的方式是我们需要先使用 typeof 来检测对象是否已定义：
if (typeof myObj !== "undefined" && myObj !== null)
程序块作用域
在每个代码块中 JavaScript 不会创建一个新的作用域，一般各个代码块的作用域都是全局的。以下代码的的变量 i 返回 10，而不是 undefined：
for (var i = 0; i < 10; i++) {
// some code
}
return i;