JavaScript基础教程.docx

《JavaScript基础教程.docx》由会员分享，可在线阅读，更多相关《JavaScript基础教程.docx（45页珍藏版）》请在冰豆网上搜索。

JavaScript基础教程

JavaScript教程

∙NextPage

JavaScript是属于网络的脚本语言！

JavaScript被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。

JavaScript是因特网上最流行的脚本语言。

JavaScript很容易使用！

你一定会喜欢它的！

开始学习JavaScript！

JavaScript实例

学习100个实例！

使用我们的编辑器，你可以编辑源代码，然后单击TIY按钮来查看结果。

JavaScript实例

JavaScriptObject实例

HTMLDOM实例

JavaScript测试

在W3School测试你的JavaScript技能！

开始JavaScript测验！

JavaScript参考手册

在W3School，我们为您提供完整的JavaScript对象参考手册。

完整的JavaScript对象参考手册（包含实例）

完整的HTMLDOM对象参考手册（包含实例）

JavaScript课外书

如果您已经把我们的JavaScript教程学习完毕，并且需要更深入地学习这门语言，那么w3school提供的《JavaScript高级教程》绝对是您最好的选择。

本教程从JavaScript的历史开始讲起，直到当前它对XML和Web服务的支持。

您将学习到如何扩展该语言，以使它适应特殊的需求。

您还将学到如何使用JavaScript创建无缝的客户机-服务器通信。

本教程深入浅出，在您认真学习之后，一定会获益良多。

马上开始学习JavaScript高级教程吧！

JavaScript简介

∙PreviousPage

∙NextPage

在数百万张页面中，JavaScript被用来改进设计、验证表单、检测浏览器、创建cookies，等等等等。

JavaScript是因特网上最流行的脚本语言，并且可在所有主要的浏览器中运行，比方说InternetExplorer、Mozilla、Firefox、Netscape、和Opera。

你应该具备的基础知识：

在继续学习前，你应该对以下知识有基本的了解：

∙HTML

∙XHTML

如果你希望首先学习这些内容，请在首页访问相关教程。

什么是JavaScript？

∙JavaScript被设计用来向HTML页面添加交互行为。

∙JavaScript是一种脚本语言（脚本语言是一种轻量级的编程语言）。

∙JavaScript由数行可执行计算机代码组成。

∙JavaScript通常被直接嵌入HTML页面。

∙JavaScript是一种解释性语言（就是说，代码执行不进行预编译）。

∙所有的人无需购买许可证均可使用JavaScript。

Java和JavaScript是相同的吗？

不同！

在概念和设计方面，Java和JavaScript是两种完全不同的语言。

Java（由太阳微系统公司开发）很强大，同时也是更复杂的编程语言，就像同级别的C和C++。

JavaScript能做什么？

JavaScript为HTML设计师提供了一种编程工具

HTML创作者往往都不是程序员，但是JavaScript却是一种只拥有极其简单的语法的脚本语言！

几乎每个人都有能力将短小的代码片断放入他们的HTML页面当中。

JavaScript可以将动态的文本放入HTML页面

类似于这样的一段JavaScript声明可以将一段可变的文本放入HTML页面：

document.write（"

"+name+"

JavaScript可以对事件作出响应

可以将JavaScript设置为当某事件发生时才会被执行，例如页面载入完成或者当用户点击某个HTML元素时。

JavaScript可以读写HTML元素

JavaScript可以读取及改变HTML元素的内容。

JavaScript可被用来验证数据

在数据被提交到服务器之前，JavaScript可被用来验证这些数据。

JavaScript可被用来检测访问者的浏览器

JavaScript可被用来检测访问者的浏览器，并根据所检测到的浏览器，为这个浏览器载入相应的页面。

JavaScript可被用来创建cookies

JavaScript可被用来存储和取回位于访问者的计算机中的信息。

真实的名称是ECMAScript

JavaScript的正式名称是"ECMAScript"。

这个标准由ECMA组织发展和维护。

ECMA-262是正式的JavaScript标准。

这个标准基于JavaScript（Netscape）和JScript（Microsoft）。

Netscape（Navigator2.0）的BrendanEich发明了这门语言，从1996年开始，已经出现在所有的Netscape和Microsoft浏览器中。

ECMA-262的开发始于1996年，在1997年7月，ECMA会员大会采纳了它的首个版本。

在1998年，该标准成为了国际ISO标准（ISO/IEC16262）。

这个标准仍然处于发展之中。

如何实现JavaScript

∙PreviousPage

∙NextPage

HTML的

上面的代码会在HTML页面中产生这样的输出：

HelloWorld!

实例解释：

如果需要把一段JavaScript插入HTML页面，我们需要使用就可以告诉浏览器JavaScript从何处开始，到何处结束。

...

document.write字段是标准的JavaScript命令，用来向页面写入输出。

把document.write命令输入到与之间后，浏览器就会把它当作一条JavaScript命令来执行。

这样浏览器就会向页面写入"HelloWorld!

"。

document.write（"HelloWorld!

"）;

TIY

注意：

如果我们不使用

注释行末尾的两个正斜杠是JavaScript的注释符号，它会阻止JavaScript编译器对这一行的编译。

把JavaScript放置到何处

∙PreviousPage

∙NextPage

当页面载入时，会执行位于body部分的JavaScript。

当被调用时，位于head部分的JavaScript才会被执行。

实例

head部分

包含函数的脚本位于文档的head部分。

这样我们就可以确保在调用函数前，脚本已经载入了。

body部分

执行位于body部分的脚本。

外部JavaScript

如何访问外部脚本。

在哪里放置JavaScript

页面中的脚本会在页面载入浏览器后立即执行。

我们并不总希望这样。

有时，我们希望当页面载入时执行脚本，而另外的时候，我们则希望当用户触发事件时才执行脚本。

位于head部分的脚本：

当脚本被调用时，或者当事件被触发时，脚本就会被执行。

当你把脚本放置到head部分后，就可以确保在需要使用脚本之前，它已经被载入了。

....

....

位于body部分的脚本：

在页面载入时脚本就会被执行。

当你把脚本放置于body部分后，它就会生成页面的内容。

....

在body和head部分的脚本：

你可以在文档中放置任何数量的脚本，因此你既可以把脚本放置到body，又可以放置到head部分。

....

....

使用外部JavaScript

有时，你也许希望在若干个页面中运行JavaScript，同时不在每个页面中写相同的脚本。

为了达到这个目的，你可以将JavaScript写入一个外部文件之中。

然后以.js为后缀保存这个文件。

注意：

外部文件不能包含

提示：

您可以把.js文件放到网站目录中通常存放脚本的子目录中，这样更容易管理和维护。

JavaScript语句

∙PreviousPage

∙NextPage

JavaScript是由浏览器执行的语句序列。

JavaScript语句

JavaScript语句是发给浏览器的命令。

这些命令的作用是告诉浏览器要做的事情。

这个JavaScript语句告诉浏览器向网页输出"Helloworld"：

document.write（"Helloworld"）;

通常要在每行语句的结尾加上一个分号。

大多数人都认为这是一个好的编程习惯，而且在web上的JavaScript案例中也常常会看到这种情况。

分号是可选的（根据JavaScript标准），浏览器把行末作为语句的结尾。

正因如此，常常会看到一些结尾没有分号的例子。

注释：

通过使用分号，可以在一行中写多条语句。

JavaScript代码

JavaScript代码是JavaScript语句的序列。

浏览器按照编写顺序依次执行每条语句。

本例向网页输出一个标题和两个段落：

document.write（"

Thisisaheader

document.write（"

Thisisaparagraph

document.write（"

Thisisanotherparagraph

TIY

JavaScript代码块

JavaScript可以分批地组合起来。

代码块以左花括号开始，以右花括号结束。

代码块的作用是一并地执行语句序列。

本例向网页输出一个标题和两个段落：

{

document.write（"

Thisisaheader

document.write（"

Thisisaparagraph

document.write（"

Thisisanotherparagraph

}

TIY

上例的用处不大。

仅仅演示了代码块的使用而已。

通常，代码块用于在函数或条件语句中把若干语句组合起来（比方说如果条件满足，就可以执行这个语句分组了）。

您会在稍后的章节学习到更多有关函数和条件的知识。

JavaScript注释

∙PreviousPage

∙NextPage

JavaScript注释可用于增强代码的可读性。

JavaScript注释

可以添加注释来对JavaScript进行解释，或者提高其可读性。

单行的注释以//开始。

本例用单行注释来解释代码：

//这行代码输出标题：

document.write（"

Thisisaheader

//这行代码输出段落：

document.write（"

Thisisaparagraph

document.write（"

Thisisanotherparagraph

TIY

JavaScript多行注释

多行注释以/*开头，以*/结尾。

本例使用多行注释来解释代码：

/*

下面的代码将输出

一个标题和两个段落

*/

document.write（"

Thisisaheader

document.write（"

Thisisaparagraph

document.write（"

Thisisanotherparagraph

TIY

使用注释来防止执行

在本例中，我们用注释来阻止一行代码的执行：

document.write（"

Thisisaheader

document.write（"

Thisisaparagraph

//document.write（"

Thisisanotherparagraph

TIY

在本例中，我们用注释来阻止若干行代码的执行：

/*

document.write（"

Thisisaheader

document.write（"

Thisisaparagraph

document.write（"

Thisisanotherparagraph

*/

TIY

在行末使用注释

在本例中，注释放置在语句的行末：

document.write（"Hello"）;//输出"Hello"

document.write（"World"）;//输出"World"

JavaScript变量

∙PreviousPage

∙NextPage

变量是用于存储信息的容器：

x=5;length=66.10;

还记得在学校里学过的代数吗？

当您回忆在学校学过的代数课程时，想到的很可能是：

x=5,y=6,z=x+y等等。

还记得吗，一个字母可以保存一个值（比如5），并且可以使用上面的信息计算出z的值是11。

您一定没有忘记，对吧。

这些字母称为变量，变量可用于保存值（x=5）或表达式（z=x+y）。

JavaScript变量

正如代数一样，JavaScript变量用于保存值或表达式。

可以给变量起一个简短名称，比如x，或者更有描述性的名称，比如length。

JavaScript变量也可以保存文本值，比如carname="Volvo"。

JavaScript变量名称的规则：

∙变量对大小写敏感（y和Y是两个不同的变量）

∙变量必须以字母或下划线开始

注释：

由于JavaScript对大小写敏感，变量名也对大小写敏感。

实例

在脚本执行的过程中，可以改变变量的值。

可以通过其名称来引用一个变量，以此显示或改变它的值。

本例为您展示原理。

声明（创建）JavaScript变量

在JavaScript中创建变量经常被称为“声明”变量。

您可以通过var语句来声明JavaScript变量：

varx;

varcarname;

在以上声明之后，变量并没有值，不过您可以在声明它们时向变量赋值：

varx=5;

varcarname="Volvo";

注释：

在为变量赋文本值时，请为该值加引号。

向JavaScript变量赋值

通过赋值语句向JavaScript变量赋值：

x=5;

carname="Volvo";

变量名在=符号的左边，而需要向变量赋的值在=的右侧。

在以上语句执行后，变量x中保存的值是5，而carname的值是Volvo。

向未声明的JavaScript变量赋值

如果您所赋值的变量还未进行过声明，该变量会自动声明。

这些语句：

x=5;

carname="Volvo";

与这些语句的效果相同：

varx=5;

varcarname="Volvo";

重新声明JavaScript变量

如果您再次声明了JavaScript变量，该变量也不会丢失其原始值。

varx=5;

varx;

在以上语句执行后，变量x的值仍然是5。

在重新声明该变量时，x的值不会被重置或清除。

JavaScript算术

正如代数一样，您可以使用JavaScript变量来做算术：

y=x-5;

z=y+5;

在本教程的下一节中，您将学习能够在JavaScript变量间使用的运算符。

JavaScript运算符

∙PreviousPage

∙NextPage

运算符=用于赋值。

运算符+用于加值。

运算符=用于给JavaScript变量赋值。

算术运算符+用于把值加起来。

y=5;

z=2;

x=y+z;

在以上语句执行后，x的值是7。

JavaScript算术运算符

算术运算符用于执行变量与/或值之间的算术运算。

给定y=5，下面的表格解释了这些算术运算符：

运算符

描述

例子

结果

+

加

x=y+2

x=7

-

减

x=y-2

x=3

*

乘

x=y*2

x=10

/

除

x=y/2

x=2.5

%

求余数（保留整数）

x=y%2

x=1

++

累加

x=++y

x=6

--

递减

x=--y

x=4

JavaScript赋值运算符

赋值运算符用于给JavaScript变量赋值。

给定x=10和y=5，下面的表格解释了赋值运算符：

运算符

例子

等价于

结果

=

x=y

x=5

+=

x+=y

x=x+y

x=15

-=

x-=y

x=x-y

x=5

*=

x*=y

x=x*y

x=50

/=

x/=y

x=x/y

x=2

%=

x%=y

x=x%y

x=0

用于字符串的+运算符

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

如需把两个或多个字符串变量连接起来，请使用+运算符。

txt1="Whatavery";

txt2="niceday";

txt3=txt1+txt2;

在以上语句执行后，变量txt3包含的值是"Whataveryniceday"。

要想在两个字符串之间增加空格，需要把空格插入一个字符串之中：

txt1="Whatavery";

txt2="niceday";

txt3=txt1+txt2;

或者把空格插入表达式中：

txt1="Whatavery";

txt2="niceday";

txt3=txt1+""+txt2;

在以上语句执行后，变量txt3包含的值是：

"Whataveryniceday"

对字符串和数字进行加法运算

请看这些例子：

x=5+5;

document.write（x）;

x="5"+"5";

document.write（x）;

x=5+"5";

document.write（x）;

x="5"+5;

document.write（x）;

TIY

规则是：

如果把数字与字符串相加，结果将成为字符串。

∙PreviousPage

∙NextPage

课外书

如需更多有关JavaScript运算符的知识，请阅读JavaScript高级教程中的相关内容：

ECMAScript一元运算符

一元运算符只有一个参数，即要操作的对象或值。

本节讲解ECMAScript中最简单的运算符-一元运算符。

ECMAScript位运算符

位运算符是在数字底层进行操作的。

本节深入讲解了有关整数的知识，并介绍了ECMAScript的各种位运算符。

ECMAScriptBoolean运算符

Boolean运算符非常重要。

本节深入讲解三种Boolean运算符：

NOT、AND和OR。

ECMAScript乘性运算符

本节讲解ECMAScript的乘性运算符：

乘法、除法、取模运算符，以及它们的特殊行为。

ECMAScript加性运算符

本节讲解