异想家博采众长的客厅

异想家JavaScript学习笔记

2017.05.23

01 直接输出文本

document.write("<h1>这是一个标题</h1>"); //直接写入 HTML 输出流

02 对事件的反应

<button type="button" onclick="alert('欢迎!')">点我!</button>

03 改变 HTML 内容

// 您会经常看到 document.getElementById("some id")。这个方法是 HTML DOM 中定义的。
// DOM (Document Object Model)(文档对象模型)是用于访问 HTML 元素的正式 W3C 标准。
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
{
    x=document.getElementById("demo");  // 找到元素
    x.innerHTML="Hello JavaScript!";    // 改变内容
    x.style.color="#ff0000";            // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

04 验证输入, JavaScript 常用于验证用户的输入。

<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>

05 JavaScript 用法

// 如需在 HTML 页面中插入 JavaScript,请使用 <script> 标签。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
// 那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。
// <body> 中的 JavaScript
<!DOCTYPE html>
<html>
<body>
.
.
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");
</script>
.
.
</body>
</html>

通常的做法是把函数放入 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。

//<head> 中的 JavaScript 函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<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>

外部的 JavaScript, 也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
    
<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
<p><b>注释:</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p>
<script src="myScript.js"></script>
    
</body>
</html>

myScript.js中代码,外部脚本不能包含<script>标签。:

function myFunction() {
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}

06 JavaScript 输出

JavaScript 可以通过不同的方式来输出数据:

使用 window.alert() 弹出警告框。

使用 document.write() 方法将内容写到 HTML 文档中。

使用 innerHTML 写入到 HTML 元素。

使用 console.log() 写入到浏览器的控制台。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
<script>
    //window.alert(5 + 6);
    document.write(3-6);
    a = 5;
    b = 6;
    c = a + b;
    console.log(c);
</script>
</body>
</html>

如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法。

document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。

innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。

<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>

请使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

    
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() 
{
    document.write(Date());
}
</script>
    
</body>
</html>

运行整个页面会变成:Tue Mar 07 2017 10:14:41 GMT+0800 (中国标准时间)

07 JavaScript 语法

数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e)。

3.14

1001

123e5

字符串(String)字面量 可以使用单引号或双引号:

"John Doe"

'John Doe'

数组(Array)字面量 定义一个数组:

[40, 100, 1, 5, 25, 10]

对象(Object)字面量 定义一个对象:

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

函数(Function)字面量 定义一个函数:

function myFunction(a, b) { return a * b;}

JavaScript 使用关键字 var 来定义变量, 使用等号来为变量赋值:

var x, length
x = 5
length = 6

JavaScript 数据类型:数字,字符串,数组,对象等等:

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 通过对象字面量赋值

数据类型的概念:

16 + "Volvo" 输出的是 "16Volvo"

【注意】

JavaScript 对大小写是敏感的。

JavaScript 中,常见的是驼峰法的命名规则,如 lastName (而不是lastname)。

JavaScript 会忽略多余的空格。您可以向脚本添加空格,来提高其可读性。

var person="Hege";
var person = "Hege";

对代码行进行折行,您可以在文本字符串中使用反斜杠对代码行进行换行。

document.write("你好 \
世界!");

JavaScript 单行注释

// 注释内容

JavaScript 多行注释

/*
下面的这些代码会输出
一个标题和一个段落
并将代表主页的开始
*/

08 JavaScript 变量

变量必须以字母开头

变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)

变量名称对大小写敏感(y 和 Y 是不同的变量)

在下面的例子中,我们创建了名为 carname 的变量,并向其赋值 "Volvo",然后把它放入 id="demo" 的 HTML 段落中:

<p>点击这里来创建变量,并显示结果。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
    var carname="Volvo";
    document.getElementById("demo").innerHTML=carname;
}
</script>

在执行过以下语句后,变量 carname 的值将是 undefined:

var carname;

如果重新声明 JavaScript 变量,该变量的值不会丢失,在以下两条语句执行后,变量 carname 的值依然是 "Volvo":

var carname="Volvo";

var carname;

09 JavaScript 数据类型

字符串(String)、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空(Null)、未定义(Undefined)。

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型:

JavaScript 布尔

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");

JavaScript 对象

var person={firstname:"John", lastname:"Doe", id:5566};

或者:

var person={
firstname : "John",
lastname  : "Doe",
id        :  5566
};

实例:

name=person.lastname;
name=person["lastname"];

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;

10 JavaScript 对象

JavaScript 对象是拥有属性和方法的数据。JavaScript 对象是变量的容器。

var car = {type:"Fiat", model:500, color:"white"};

在以上实例中,3 个值 ("Fiat", 500, "white") 赋予变量 car。

在以上实例中,3 个变量 (type, model, color) 赋予变量 car。

访问对象属性

person.lastName;
person["lastName"];

对象方法

对象的方法定义了一个函数,并作为对象的属性存储。

对象方法通过添加 () 调用 (作为一个函数)。

你可以使用以下语法创建对象方法:

methodName : function() { code lines }

你可以使用以下语法访问对象方法:

objectName.methodName()

<p id="demo"></p>
<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function() 
    {
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo").innerHTML = person.fullName();
</script>

11 JavaScript 函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

<head>
<script>
function myFunction()
{
    alert("Hello World!");
}
</script>
</head>
 
<body>
<button onclick="myFunction()">Try it</button>
</body>

您可以发送任意多的参数,由逗号 (,) 分隔:

<p>点击这个按钮,来调用带参数的函数。</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<script>
function myFunction(name,job){
    alert("Welcome " + name + ", the " + job);
}
</script>

带有返回值的函数

即使不把它保存为变量,您也可以使用返回值:

function myFunction(a,b)
{
    return a*b;
}
 
document.getElementById("demo").innerHTML=myFunction(4,3);

局部 JavaScript 变量:

在 JavaScript 函数内部声明的变量(使用 var)是局部变量

全局 JavaScript 变量:

在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。

向未声明的 JavaScript 变量分配值:

如果您把值赋给尚未声明的变量,该变量将被自动作为全局变量声明。

这条语句:

carname="Volvo";

将声明一个全局变量 carname,即使它【在函数内】执行。

12 JavaScript 作用域

变量在函数内声明,变量为局部作用域。

局部变量:只能在函数内部访问。

// 此处不能调用 carName 变量
function myFunction() {
    var carName = "Volvo";
    // 函数内可调用 carName 变量
}

变量在函数外定义,即为全局变量。

全局变量有 全局作用域: 网页中所有脚本和函数均可使用。

var carName = " Volvo";
// 此处可调用 carName 变量
function myFunction() {
    // 函数内可调用 carName 变量 

}

如果变量在函数内没有声明(没有使用 var 关键字),该变量为全局变量。

// 此处可调用 carName 变量
function myFunction() {
    carName = "Volvo";
    // 此处可调用 carName 变量
}

HTML 中的全局变量

在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。

//此处可使用 window.carName
function myFunction() {
    carName = "Volvo";
}

13 JavaScript 事件

HTML 事件

HTML 事件可以是浏览器行为,也可以是用户行为。如:【HTML 页面完成加载】【HTML input 字段改变时】【HTML 按钮被点击】

通常,当事件发生时,你可以做些事情。在事件触发时 JavaScript 可以执行一些代码。

在以下实例中,按钮元素中添加了 onclick 属性 (并加上代码):

<button onclick="getElementById('demo').innerHTML=Date()">现在的时间</button>
<p id="demo"></p>

在下一个实例中,代码将修改自身元素的内容 (使用 this.innerHTML):

<button onclick="this.innerHTML=Date()">现在的时间</button>

执行函数举例:

<button onclick="displayDate()">点这里</button>
<script>
function displayDate(){
    document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>

常见的HTML事件

onchange HTML 元素改变

onclick 用户点击 HTML 元素

onmouseover 用户在一个HTML元素上移动鼠标

onmouseout 用户从一个HTML元素上移开鼠标

onkeydown 用户按下键盘按键

onload 浏览器已完成页面的加载

14 JavaScript 字符串

你可以使用索引位置来访问字符串中的每个字符:

var carname = "Volvo XC60";
var character = carname[7];

你可以在字符串中使用引号,字符串中的引号不要与字符串的引号相同,也可以在字符串添加转义字符:

var answer = "It's alright";
var answer = "He is called 'Johnny'";
var answer = 'He is called "Johnny"';
var x = 'It\'s alright';
var y = "He is called \"Johnny\"";

length 来计算字符串的长度:

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;// 26

字符串可以是对象

使用 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,因为是字符串,y 是对象

【注】=== 为绝对相等,即数据类型与值都必须相等。

15 JavaScript 运算符

加号+运算符用于把文本值或字符串变量加起来(连接起来)。

txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;

两个数字相加,返回数字相加的和,如果数字与字符串相加,返回字符串,如下实例:

x=5+5;
y="5"+5;
z="Hello"+5;

x,y, 和 z 输出结果为

10

55

Hello5

16 JavaScript 比较 和 逻辑运算符

比较运算符,主要的几个:

== 等于

=== 绝对等于(值和类型均相等)

!= 不等于

!== 不绝对等于(值和类型有一个不相等,或两个都不相等)

JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。

voteable=(age<18)?"年龄太小":"年龄已达到";

17 条件语句

if (time<10)
{
    document.write("<b>早上好</b>");
}
else if (time>=10 && time<16)
{
    document.write("<b>今天好</b>");
}
else
{
    document.write("<b>晚上好!</b>");
}

举例:

<p id="demo"></p>
<script>
var r=Math.random();
var x=document.getElementById("demo")
if (r>0.5){
    x.innerHTML="<a href='http://www.runoob.com'>访问菜鸟教程</a>";
}
else{
    x.innerHTML="<a href='http://wwf.org'>Visit WWF</a>";
}
</script>

switch 实例

显示今天的星期名称。请注意 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:
    x="期待周末";
}

18 循环

for 循环

for (var i=0;i<cars.length;i++)
{ 
    document.write(cars[i] + "<br>");
}

For/In 循环

var person={fname:"John",lname:"Doe",age:25};
for (x in person)
{
    txt=txt + person[x];
}

结果为:JohnDoe25

while 循环

举例:

while (i<5)
{
    x=x + "The number is " + i + "<br>";
    i++;
}

举例:

do
{
    x=x + "The number is " + i + "<br>";
    i++;
}
while (i<5);

举例:

cars=["BMW","Volvo","Saab","Ford"];
var i=0;
while (cars[i])
{
    document.write(cars[i] + "<br>");
    i++;
}

19 typeof 操作符

用 typeof 操作符来检测变量的数据类型。 typeof "John" // 返回 string typeof 3.14 // 返回 number typeof false // 返回 boolean typeof [1,2,3,4] // 返回 object 在JavaScript中,数组是一种特殊的对象类型。 因此 typeof [1,2,3,4] 返回 object。 typeof {name:'John', age:34} // 返回 object

在 JavaScript 中 null 表示 "什么都没有"。 你可以设置为 null 来清空对象: var person = null; // 值为 null(空), 但类型为对象 你可以设置为 undefined 来清空对象: var person = undefined; // 值为 undefined, 类型为 undefined

var person; // 值为 null(空), 但仍然是一个对象 person = undefined; // 值为 undefined, 类型是undefined

Undefined 和 Null 的区别 typeof undefined // undefined typeof null // object null === undefined // false null == undefined // true

20 JavaScript 类型转换

Number() 转换为数字, String() 转换为字符串, Boolean() 转化为布尔值。 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; }

转换为字符串 x.toString() (123).toString() (100 + 23).toString() String(false) // 返回 "false" String(true) // 返回 "true" false.toString() // 返回 "false" true.toString() // 返回 "true" String(Date()) // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time) Date().toString() // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

toExponential() 把对象的值转换为指数计数法。 toFixed() 把数字转换为字符串,结果的小数点后有指定位数的数字。 toPrecision() 把数字格式化为指定的长度。

字符串转换为数字 Number("3.14") // 返回 3.14 Number(" ") // 返回 0 Number("") // 返回 0 Number("99 88") // 返回 NaN Number(false) // 返回 0 Number(true) // 返回 1

parseFloat() 解析一个字符串,并返回一个浮点数。 parseInt() 解析一个字符串,并返回一个整数。

Operator + 可用于将变量转换为数字: var y = "5"; // y 是一个字符串 var x = + y; // x 是一个数字

自动转换类型 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; // 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"

21 JavaScript 错误

当 JavaScript 引擎执行 JavaScript 代码时,会发生各种错误。 可能是语法错误,通常是程序员造成的编码错误或错别字。 可能是拼写错误或语言中缺少的功能(可能由于浏览器差异)。 可能是由于来自服务器或用户的错误输出而导致的错误。 当然,也可能是由于许多其他不可预知的因素。

本例检测输入变量的值。如果值是错误的,会抛出一个异常(错误)。catch 会捕捉到这个错误,并显示一段自定义的错误消息: function myFunction() { try { var x=document.getElementById("demo").value; if(x=="") throw "值为空"; if(isNaN(x)) throw "不是数字"; if(x > 10) throw "太大"; if(x < 5) throw "太小"; } catch(err) { var y=document.getElementById("mess"); y.innerHTML="错误:" + err + "。"; } }

21 JavaScript 调试

你可以使用 console.log() 方法在调试窗口上打印 JavaScript 值: a = 5; b = 6; c = a + b; console.log(c);

设置断点 在调试窗口中,你可以设置 JavaScript 代码的断点。 在每个断点上,都会停止执行 JavaScript 代码,以便于我们检查 JavaScript 变量的值。 如果没有调试可用,debugger 语句将无法工作。

var x = 15 * 5; debugger; document.getElementbyId("demo").innerHTML = x;

22 JavaScript 变量提升

JavaScript 中,函数及变量的声明都将被提升到### 函数的最顶部】。 JavaScript 中,变量可以在使用后声明,也就是变量可以先使用再声明。

以上两个例子结果一样 要理解以上实例就需要理解 "hoisting(变量提升)"。 变量提升:函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。 JavaScript ### 初始化】### 不会】提升 JavaScript 只有声明的变量会提升,初始化的不会。 以下两个实例结果结果不相同:

结果:57

结果:x 为:5,y 为:undefined 对于大多数程序员来说并不知道 JavaScript 变量提升。如果程序员不能很好的理解变量提升,他们写的程序就容易出现一些问题。为了避免这些问题,通常我们在每个作用域开始前声明这些变量,这也是正常的 JavaScript 解析步骤,易于我们理解。JavaScript 严格模式(strict mode)不允许使用未声明的变量。 ### 23 JavaScript 严格模式(use strict) use strict" 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。它不是一条语句,但是是一个字面量表达式,在 JavaScript 旧版本中会被忽略。 "use strict" 的目的是指定代码在严格条件下执行。严格模式下你不能使用未声明的变量。 严格模式通过在脚本或函数的头部添加 "use strict"; 表达式来声明。 实例中我们可以在浏览器按下 F12 (或点击"工具>更多工具>开发者工具") 开启调试模式,查看报错信息。 严格模式的限制 不允许使用未声明的变量: x = 3.14; // 报错 (x 未定义) 不允许删除变量或对象。不允许删除函数。 var x = 3.14; delete x; // 报错 function x(p1, p2) {}; delete x; // 报错 不允许变量重名: function x(p1, p1) {}; // 报错 不允许使用八进制: var x = 010; // 报错 不允许使用转义字符: var x = \010; // 报错 不允许对只读属性赋值: var obj = {}; Object.defineProperty(obj, "x", {value:0, writable:false}); obj.x = 3.14; // 报错 不允许对一个使用getter方法读取的属性进行赋值 var obj = {get x() {return 0} }; obj.x = 3.14; // 报错 不允许删除一个不允许删除的属性: delete Object.prototype; // 报错 变量名不能使用 "eval" 字符串:变量名不能使用 "arguments" 字符串: var eval = 3.14; // 报错 var arguments = 3.14; // 报错 不允许使用以下这种语句: with (Math){x = cos(2)}; // 报错 由于一些安全原因,在作用域 eval() 创建的变量不能被调用: eval ("var x = 2"); alert (x); // 报错 禁止this关键字指向全局对象。 因此,使用构造函数时,如果忘了加new,this不再指向全局对象,而是报错。 function f(){ "use strict"; this.a = 1; }; f();// 报错,this未定义 ### 24 注意事项 浮点型数据使用注意事项 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 允许我们在字符串中使用断行语句: var x = "Hello World!"; 但是,在字符串中直接使用回车换行是会报错的: var x = "Hello World!"; 字符串断行需要使用反斜杠(\),如下所示: var x = "Hello \ World!"; 以下实例结果会返回 undefined: function myFunction(a) { var power = 10; return a * power; } 为什么会有这样的结果呢?因为在 JavaScript 中,实例 4 的代码与下面的代码一致: function myFunction(a) { var power = 10; return; // 分号结束,返回 undefined a * power; } 解析 如果是一个不完整的语句,如下所示: var JavaScript 将尝试读取第二行的语句: power = 10; 但是由于这样的语句是完整的: 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 定义数组元素,定义对象,最后不能添加逗号 points = [40, 100, 1, 5, 25, 10]; websites = {site:"菜鸟教程", url:"www.runoob.com", like:460} Undefined 不是 Null 如果我们想测试对象是否存在,在对象还没定义时将会抛出一个错误。 正确的方式是我们需要先使用 typeof 来检测对象是否已定义: if (typeof myObj !== "undefined" && myObj !== null) 程序块作用域 在每个代码块中 JavaScript 不会创建一个新的作用域,一般各个代码块的作用域都是### 全局】的。 以下代码的的变量 i 返回 10,而不是 undefined: for (var i = 0; i < 10; i++) { // some code } return i; ### 25 JavaScript JSON JSON 是用于存储和传输数据的格式。 JSON 通常用于服务端向网页传递数据 。 什么是 JSON? JSON 英文全称 JavaScript Object Notation JSON 是一种轻量级的数据交换格式。 JSON是独立的语言 * JSON 易于理解。 Note:* JSON 使用 JavaScript 语法,但是 JSON 格式仅仅是一个文本。 文本可以被任何编程语言读取及作为数据格式传递。 JSON 实例 以下 JSON 语法定义了 sites 对象: 3 条网站信息(对象)的数组: {"sites":[ {"name":"Runoob", "url":"www.runoob.com"}, {"name":"Google", "url":"www.google.com"}, {"name":"Taobao", "url":"www.taobao.com"} ]} JSON 格式化后为 JavaScript 对象 JSON 格式在语法上与创建 JavaScript 对象代码是相同的。 由于它们很相似,所以 JavaScript 程序可以很容易的将 JSON 数据转换为 JavaScript 对象。 JSON 语法规则 数据为 键/值 对。 数据由逗号分隔。 大括号保存对象 方括号保存数组 JSON 字符串转换为 JavaScript 对象 通常我们从服务器中读取 JSON 数据,并在网页中显示数据。 简单起见,我们网页中直接设置 JSON 字符串: 首先,创建 JavaScript 字符串,字符串为 JSON 格式的数据: var text = '{ "sites" : [' + '{ "name":"Runoob" , "url":"www.runoob.com" },' + '{ "name":"Google" , "url":"www.google.com" },' + '{ "name":"Taobao" , "url":"www.taobao.com" } ]}'; 然后,使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象: var obj = JSON.parse(text); 最后,在你的页面中使用新的 JavaScript 对象: 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 + " " + obj.sites[1].url; 完整网页原代码: 菜鸟教程(runoob.com)

为 JSON 字符串创建对象

相关函数 函数 描述 JSON.parse() 用于将一个 JSON 字符串转换为 JavaScript 对象。 JSON.stringify() 用于将 JavaScript 值转换为 JSON 字符串。 ### 26 javascript:void(0) 含义 javascript:void(0) 中最关键的是 void 关键字, void 是 JavaScript 中非常重要的关键字,该操作符指定要计算一个表达式但是不返回值。 语法格式如下: 下面的代码创建了一个超级链接,当用户点击以后不会发生任何事。 单击此处什么也不会发生 以下实例中,在用户点击链接后显示警告信息:

点击以下链接查看结果:

点我! 菜鸟教程(runoob.com)

点击以下按钮查看结果:

href="#"与href="javascript:void(0)"的区别 # 包含了一个位置信息,默认的锚是#top 也就是网页的上端。 而javascript:void(0), 仅仅表示一个死链接。 在页面很长的时候会使用 # 来定位页面的具体位置,格式为:# + id。 如果你要定义一个死链接请使用 javascript:void(0) 。 点我没有反应的! 点我定位到指定位置!
...

尾部定位点

27