JavaScript基础教程复习笔记
document.write("<h1>这是一个标题</h1>");
您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。
x=document.getElementById("demo") //查找元素
x.innerHTML="Hello JavaScript"; //改变内容
x.style.color="#ff0000"; //改变样式
那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。
JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。
在 <head> 或者 <body> 的JavaScript
脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。
通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。
<script src="myScript.js"></script>
外部脚本不能包含 <script> 标签
JavaScript 显示数据
JavaScript 可以通过不同的方式来输出数据：
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台。
JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：
var x1=34.00; //使用小数点来写
var x2=34; //不使用小数点来写
极大或极小的数字可以通过科学（指数）计数法来书写：
var y=123e5; // 12300000
var z=123e-5; // 0.00123
布尔（逻辑）只能有两个值：true 或 false。
var x=true;
var y=false;
JavaScript 数组
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
var cars=new Array("Saab","Volvo","BMW");
var cars=["Saab","Volvo","BMW"];
JavaScript 对象
var person={firstname:"John", lastname:"Doe", id:5566};
var person={
firstname : "John",
lastname : "Doe",
id : 5566
};
对象属性有两种寻址方式：
name=person.lastname;
name=person["lastname"];
<p>创建和使用对象方法。</p> <p>对象方法是一个函数定义,并作为一个属性值存储。</p> <p id="demo1"></p> <p id="demo2"></p> <script> var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } }; document.getElementById("demo1").innerHTML = "不加括号输出函数表达式：" + person.fullName; document.getElementById("demo2").innerHTML = "加括号输出函数执行结果：" + person.fullName(); </script> ==============输出============== 创建和使用对象方法。 对象方法是一个函数定义,并作为一个属性值存储。 不加括号输出函数表达式：function () { return this.firstName + " " + this.lastName; } 加括号输出函数执行结果：John Doe
Undefined 和 Null
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。
cars=null;
person=null;
声明变量类型
当您声明新变量时，可以使用关键词 "new" 来声明其类型：
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。
JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
HTML 中的全局变量
在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。
function myFunction() {
//此处可使用 window.carName
carName = "Volvo";
}
你的全局变量，或者函数，可以覆盖 window 对象的变量或者函数。
局部变量，包括 window 对象可以覆盖全局变量和函数。
<button onclick='getElementById("demo").innerHTML=Date()'>现在的时间是??</button>
<button onclick="this.innerHTML=Date()">现在的时间是?</button>
<button onclick="displayDate()">现在的时间是?</button>
字符串：
转义：
反斜杠是一个转义字符。 转义字符将特殊字符转换为字符串字符：
转义字符 (\) 可以用于转义撇号，换行，引号，等其他特殊字符。
var x = 'It\'s alright';
var y = "He is called \"Johnny\"";
你可以使用索引位置来访问字符串中的每个字符：
var character = x[7];
可以使用内置属性 length 来计算字符串的长度：
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;
通常， JavaScript 字符串是原始值，可以使用字符创建： var firstName = "John"
但我们也可以使用 new 关键字将字符串定义为一个对象： var firstName = new String("John")
var x = "John";
var y = new String("John");
typeof x // 返回 String
typeof y // 返回 Object
不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用：
=== 为绝对相等，即数据类型与值都必须相等。
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() | 返回某个字符串对象的原始值 |
//js的switch与java不同，判断的变量可以是任何变量，而java中仅仅是int类型。
switch(n) { case 1: 执行代码块 1 break; case 2: 执行代码块 2 break; default: 与 case 1 和 case 2 不同时执行的代码 }
如需标记 JavaScript 语句，请在语句之前加上冒号：
label: statements
break labelname;
continue labelname;
用 typeof 检测 null 返回是object。
你可以设置为 null 来清空对象:
var person = null; // 值为 null(空), 但类型为对象
你可以设置为 undefined 来清空对象:
var person = undefined; // 值为 undefined, 类型为 undefined
Undefined 和 Null 的区别
typeof null // object
null === undefined // false
null == undefined // true
Number("3.14") // 返回 3.14
Number(" ") // 返回 0
Number("") // 返回 0
Number("99 88") // 返回 NaN
将日期转换为数字
全局方法 Number() 可将日期转换为数字。
d = new Date();
Number(d) // 返回 1404568027739
d = new Date();
d.getTime() // 返回 1404568027739
自动转换类型
当 JavaScript 尝试操作一个 "错误" 的数据类型时，会自动转换为 "正确" 的数据类型。
以下输出结果不是你所期望的：
5 + null // 返回 5 null 转换为 0
"5" + null // 返回"5null" null 转换为 "null"
"5" + 1 // 返回 "51" 1 转换为 "1"
"5" - 1 // 返回 4 "5" 转换为 5
自动转换为字符串
当你尝试输出一个对象或一个变量时 JavaScript 会自动调用变量的 toString() 方法：
// if myVar = {name:"Fjohn"} // toString 转换为 "[object Object]"
// if myVar = [1,2,3,4] // toString 转换为 "1,2,3,4"
// if myVar = new Date() // toString 转换为 "Fri Jul 18 2014 09:08:55 GMT+0200"
正则表达式
/runoob/i 是一个正则表达式。
runoob 是一个正则表达式主体 (用于检索)。
i 是一个修饰符 (搜索不区分大小写)。
search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
var str = "Visit Runoob!"; var n = str.search(/Runoob/i);
search 方法可使用字符串作为参数。字符串参数会转换为正则表达式：
| i | 执行对大小写不敏感的匹配。 |
| g | 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。 |
| m | 执行多行匹配。 |
正则表达式模式
方括号用于查找某个范围内的字符：
| 表达式 | 描述 |
|---|---|
| [abc] | 查找方括号之间的任何字符。 |
| [0-9] | 查找任何从 0 至 9 的数字。 |
| (x|y) | 查找任何以 | 分隔的选项。 |
元字符是拥有特殊含义的字符：
| 元字符 | 描述 |
|---|---|
| \d | 查找数字。 |
| \s | 查找空白字符。 |
| \b | 匹配单词边界。 |
| \uxxxx | 查找以十六进制数 xxxx 规定的 Unicode 字符。 |
量词:
| 量词 | 描述 |
|---|---|
| n+ | 匹配任何包含至少一个 n 的字符串。 |
| n* | 匹配任何包含零个或多个 n 的字符串。 |
| n? |
匹配任何包含零个或一个 n 的字符串。 |
使用 test()
test() 方法是一个正则表达式方法。
test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
以下实例用于搜索字符串中的字符 "e"：
实例
patt.test("The best things in life are free!");
字符串中含有 "e"，所以该实例输出为：
使用 exec()
exec() 方法是一个正则表达式方法。
exec() 方法用于检索字符串中的正则表达式的匹配。
该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。
以下实例用于搜索字符串中的字母 "e":
Example 1
字符串中含有 "e"，所以该实例输出为:e
debugger 关键字
debugger 关键字用于停止执行 JavaScript，并调用调试函数。
这个关键字与在调试工具中设置断点的效果是一样的。
如果没有调试可用，debugger 语句将无法工作。
开启 debugger ，代码在第三行前停止执行。
实例
console.log() 方法
变量提升：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。
function test1(){ x = 123; var x; alert(x);//123 } function test2(){ alert(x);//未定义 } test1(); test2();
JavaScript 初始化不会提升
JavaScript 只有声明的变量会提升，初始化的不会。
JavaScript 严格模式(strict mode)不允许使用未声明的变量。
严格模式通过在脚本或函数的头部添加 "use strict"; 表达式来声明。
"use strict";
x = 3.14; // 报错 (x 未定义)
在函数内部声明是局部作用域 (只在函数内使用严格模式):
x = 3.14; // 不报错 myFunction(); function myFunction() { "use strict"; y = 3.14; // 报错 (y 未定义) }
在常规的比较中，数据类型是被忽略的，比如10=="10"为true
在严格的比较运算中，=== 为恒等计算符，同时检查表达式的值与类型，比如10==="10" 为false
浮点型数据使用注意事项
JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。
所有的编程语言，包括 JavaScript，对浮点型数据的精确度都很难确定：
var x = 0.1; var y = 0.2; var z = x + y // z 的结果为 0.30000000000000004 if (z == 0.3) // 返回 false
可以用整数的乘除法来解决：
var z = (x * 10 + y * 10) / 10; // z 的结果为 0.3
在字符串中直接使用回车换行是会报错的：
var x = "Hello World!";//报错
字符串断行需要使用反斜杠(\)，如下所示:
var x = "Hello \ World!";
Undefined 不是 Null
在 JavaScript 中, null 用于对象, undefined 用于变量，属性和方法。
对象只有被定义才有可能为 null，否则为 undefined。
如果我们想测试对象是否存在，在对象还没定义时将会抛出一个错误。
错误的使用方式：
if (myObj !== null && typeof myObj !== "undefined")
正确的方式是我们需要先使用 typeof 来检测对象是否已定义：
if (typeof myObj !== "undefined" && myObj !== null)
程序块作用域
在每个代码块中 JavaScript 不会创建一个新的作用域，一般各个代码块的作用域都是全局的。
以下代码的的变量 i 返回 10，而不是 undefined：
程序块作用域
在每个代码块中 JavaScript 不会创建一个新的作用域，一般各个代码块的作用域都是全局的。
以下代码的的变量 i 返回 10，而不是 undefined：
var i=13; for (var i = 0; i < 10; i++) { // some code } alert(i);//结果是10
form表单
var x = document.forms["myForm"]["fname"].value;
<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post"> 名字: <input type="text" name="fname"> <input type="submit" value="提交"> </form>
// 判断输入是否为数字 function isNumeric(n) { return !isNaN(parseFloat(n)) && isFinite(n); }
| JSON.parse() | 用于将一个 JSON 字符串转换为 JavaScript 对象。 |
| JSON.stringify() | 用于将 JavaScript 值转换为 JSON 字符串。 |
<a href="javascript:void(0)">单击此处什么也不会发生</a>
<a href="javascript:void(alert('Warning!!!'))">点我!</a>
href="#"与href="javascript:void(0)"的区别
# 包含了一个位置信息，默认的锚是#top 也就是网页的上端。
而javascript:void(0), 仅仅表示一个死链接。
在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。
如果你要定义一个死链接请使用 javascript:void(0) 。
JavaScript 代码规范
命名规则
一般很多代码语言的命名规则都是类似的，例如:
- 变量和函数为驼峰法（ camelCase）
- 全局变量为大写 (UPPERCASE )
- 常量 (如 PI) 为大写 (UPPERCASE )
变量命名你是否使用这几种规则： hyp-hens, camelCase, 或 under_scores ?
HTML 和 CSS 的横杠(-)字符:
HTML5 属性可以以 data- (如：data-quantity, data-price) 作为前缀。
CSS 使用 - 来连接属性名 (font-size)。
HTML 载入外部 JavaScript 文件
使用简洁的格式载入 JavaScript 文件 ( type 属性不是必须的):
使用小写文件名
大多 Web 服务器 (Apache, Unix) 对大小写敏感： london.jpg 不能通过 London.jpg 访问。
其他 Web 服务器 (Microsoft, IIS) 对大小写不敏感： london.jpg 可以通过 London.jpg 或 london.jpg 访问。
你必须保持统一的风格，我们建议统一使用小写的文件名。
JavaScript 函数
JavaScript 使用关键字 function 定义函数。
函数可以通过声明定义，也可以是一个表达式。
分号是用来分隔可执行JavaScript语句。
由于函数声明不是一个可执行语句，所以不以分号结束。
函数表达式 JavaScript 函数可以通过一个表达式定义。 函数表达式可以存储在变量中： 实例 var x = function (a, b) {return a * b};
在函数表达式存储在变量后，变量也可作为一个函数使用：
实例
var x = function (a, b) {return a * b};
var z = x(4, 3);
以上函数实际上是一个 匿名函数 (函数没有名称)。
函数存储在变量中，不需要函数名称，通常通过变量名来调用。
上述函数以分号结尾，因为它是一个执行语句。
自调用函数
函数表达式可以 "自调用"。
自调用表达式会自动调用。
如果表达式后面紧跟 () ，则会自动调用。
不能自调用声明的函数。
(function () { var x = "Hello!!"; // 我将调用自己 })();
通过添加括号，来说明它是一个函数表达式
在 JavaScript 中使用 typeof 操作符判断函数类型将返回 "function" 。
但是JavaScript 函数描述为一个对象更加准确。
JavaScript 函数有 属性 和 方法。
arguments.length 属性返回函数调用过程接收到的参数个数（准确说是调用者传递的参数个数）：
<script> function myFunction(a,b) { return arguments.length; } document.getElementById("demo").innerHTML = myFunction(4, 5，6); </script> ================ arguments.length 属性返回函数接收到参数的个数： 3
toString() 将函数作为一个字符串返回：
<p id="demo"></p> <script> function myFunction(a, b) { return a * b;
} document.getElementById("demo").innerHTML = myFunction.toString(); </script> ========================= toString() 将函数作为一个字符串返回： function myFunction(a, b) { return a * b; }
JavaScript 函数参数
参数规则
函数显式参数在函数定义时列出。
函数隐式参数在函数调用时传递给函数真正的值。
JavaScript 函数定义时显式参数没有指定数据类型。
JavaScript 函数对隐式参数没有进行类型检测。
JavaScript 函数对隐式参数的个数没有进行检测。
默认参数
如果函数在调用时未提供隐式参数，参数会默认设置为： undefined
有时这是可以接受的，但是建议最好为参数设置一个默认值
function myFunction(x, y) { if (y === undefined) { y = 0; } }
function myFunction(x, y) { y = y || 0; }
如果y已经定义 ， y || 返回 y, 因为 y 是 true, 否则返回 0, 因为 undefined 为 false。
Arguments 对象
JavaScript 函数有个内置的对象 arguments 对象。
argument 对象包含了函数调用的参数数组。
通过这种方式你可以很方便的找到最大的一个参数的值：
x = findMax(1, 123, 500, 115, 44, 88); function findMax() { var i, max = arguments[0]; if(arguments.length < 2) return max; for (i = 0; i < arguments.length; i++) { if (arguments[i] > max) { max = arguments[i]; } } return max; }
x = sumAll(1, 123, 500, 115, 44, 88);
function sumAll() { var i, sum = 0;
for (i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
通过值传递参数
在函数中调用的参数是函数的隐式参数。
JavaScript 隐式参数通过值来传递：函数仅仅只是获取值。
如果函数修改参数的值，不会修改显式参数的初始值（在函数外定义）。
隐式参数的改变在函数外是不可见的。
通过对象传递参数
在JavaScript中，可以引用对象的值。
因此我们在函数内部修改对象的属性就会修改其初始的值。
修改对象属性可作用于函数外部（全局变量）。
修改对象属性在函数外是可见的。
JavaScript 函数调用
JavaScript 函数有 4 种调用方式。
每种方式的不同方式在于 this 的初始化。
一般而言，在Javascript中，this指向函数执行时的当前对象。
在 HTML 中默认的全局对象是 HTML 页面本身，所以函数是属于 HTML 页面。在浏览器中的页面对象是浏览器窗口(window 对象)
当函数没有被自身的对象调用时， this 的值就会变成全局对象。
在 web 浏览器中全局对象是浏览器窗口（window 对象）。
函数作为对象方法调用，会使得 this 的值成为对象本身。
call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。
通过 call() 或 apply() 方法你可以设置 this 的值, 且作为已存在对象的新方法调用。
两个方法都使用了对象本身作为第一个参数。 两者的区别在于第二个参数： apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。
function myFunction(a, b) { return a * b; } myObject = myFunction.call(myObject, 10, 2); // 返回 20
function myFunction(a, b) { return a * b; } myArray = [10, 2]; myObject = myFunction.apply(myObject, myArray); // 返回 20
JavaScript 闭包
JavaScript 变量可以是局部变量或全局变量。
私有变量可以用到闭包。
闭包是可访问上一层函数作用域里变量的函数，即便上一层函数已经关闭。
闭包实例 ：计数器
var add = (function () { var counter = 0; return function () {return counter += 1;} })(); add(); add(); add(); // 计数器为 3
实例解析
变量 add 指定了函数自我调用的返回字值。
自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。
add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。
这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。
计数器受匿名函数的作用域保护，只能通过 add 方法修改。
或者这样
function a(){ var i=0; function b(){ alert(++i); } return b; } var c=a(); c();
而且闭包是相对独立的，如下的c和d虽然都是调用了a(),但是互不干扰。
<body>
<p>局部变量计数。</p>
<button type="button" onclick="myFunction()">计数!</button>
<button type="button" onclick="myFunction2()">计数2!</button>
<p id="demo">0</p>
<p id="demo2">0</p>
<script>
function a() {
var i = 0;
function b() {
alert(++i);
return i;
}
return b;
}
var c = a();
function myFunction() {
document.getElementById("demo").innerHTML = c();
}
var d = a();
function myFunction2() {
document.getElementById("demo2").innerHTML = d();
}
</script>
</body>
