JavaScript入门教程.docx
《JavaScript入门教程.docx》由会员分享，可在线阅读，更多相关《JavaScript入门教程.docx（52页珍藏版）》请在冰豆网上搜索。
JavaScript入门教程
第1章JavaScript语言入门
1为什么学习JavaScript
提要：
Javascript是学习脚本语言的首选。
她兼容性好，绝大多数浏览器均支持Javascript，而且她功能强大，实现简单方便，入门简单，即使是程序设计新手也可以非常快速容易地使用JavaScript进行简单的编程。
Javascript是由Netscape公司创造的一种脚本语言。
为便于推广，被定为javascript，但是javascript与java是两门不相干的语言，作用也不一样。
作为一门独立的编程语言，javascript可以做很多的事情，但它最主流的应用还是在Web上——创建动态网页（即网页特效）。
Javascript在网络上应用广泛，几乎所有的动态网页里都能找到它的身影。
目前流行的AJAX也是依赖于Javascript而存在的。
Javascript与Jscript也不是一门相同的语言，Jscript和vbscript是微软开发的两种脚本语言，微软，Netscape公司以及其他语言开发商为减少web开发者的兼容麻烦，所以成立ECMA，该组织专门制定脚本语言的标准和规范。
ECMA制定的标准脚本语言叫做ECMAScript，Javascript符合ECMA的标准，其实Javascript也可以叫做ECMAScript.
Jscript也ECMA的标准，但用户较少。
vbscript仅局限在微软的用户，Netscape不支持。
概括地说，JavaScript就是一种基于对象和事件驱动，并具有安全性能的脚本语言，脚本语言简单理解就是在客户端的浏览器就可以互动响应处理程序的语言，而不需要服务器的处理和响应，当然JavaScript也可以做到与服务器的交互响应，而且功能也很强大。
而相对的服务器语言像aspphpjsp等需要将命令上传服务器，由服务器处理后回传处理结果。
对象和事件是JavaScript的两个核心。
JavaScript可以被嵌入到HTML文件中，不需要经过Web服务器就可以对用户操作作出响应，使网页更好地与用户交互；在利用客户端个人电脑性能资源的同时，适当减小服务器端的压力，并减少用户等待时间。
2将JavaScript插入网页的方法
与在网页中插入CSS的方式相似，使用
language="javascript"表示使用JavaScript脚本语言，脚本语言还有vbscript、jsscript等，如果没有language属性，表示默认使用JavaScript脚本。
其中的...就是代码的内容。
例如：
document.write（"我是菜鸟，我怕谁!
"）;
JavaScript使用document.write来输出内容。
将会输出在网页上输出：
我是菜鸟我怕谁!
学过编程的人应该知道，“我是菜鸟我怕谁!
”两侧双引号代表字符串的意思。
不过不理解这个概念也无所谓，学到后面就知道什么时候应该加双引号，什么时候不需要加了。
有些浏览器可能不支持JavaScript，我们可以使用如下的方法对它们隐藏JavaScript代码。
--
document.write（"我是菜鸟我怕谁!
"）;
//-->
---->里的内容对于不支持JavaScript的浏览器来说就等同于一段注释，而对于支持JavaScript的浏览器，这段代码仍然会执行。
至于“//”符号则是JavaScript里的注释符号，在这里添加它是为了防止JavaScript试图执行-->。
不过通常情况下，现在的浏览器几乎都支持JavaScript，即使是不支持的，也会了解如何合理地处理含有JavaScript的网页。
JavaScript的插入位置不同，效果也会有所不同，还可以像CSS一样，将JavaScript保存成一个外部文件，这些内容会在下一节讨论。
3插入JavaScript的位置
JavaScript脚本可以放在网页的head里或者body部分，而且效果也不相同。
（1）放在body部分的JavaScript脚本在网页读取到该语句的时候就会执行，例如：
--
document.write（"我是菜鸟我怕谁!
"）;
//-->
（2）在head部分的脚本在被调用的时候才会执行，例如：
....
通常是在定义函数，通过调用函数来执行head里的脚本。
（3）也可以像添加外部CSS一样添加外部JavaScript脚本文件，其后缀通常为.js。
例如：
如果很多网页都需要包含一段相同的代码，那么将这些代码写入一个外部JavaScript文件是最好的方法。
此后，任何一个需要该功能的网页，只需要引入这个js文件就可以了。
注意：
脚本文件里头不能再含有
例子中的document.write（"我是菜鸟我怕谁!
"）;
就是一个JavaScript语句，它可以告诉浏览器做出一个特定任务。
特别的，这个语句是叫浏览器书写出一段内容。
我们已经知道，document.write的功能是输出文本，所以上面那个语句就是让浏览器输出“我是菜鸟我怕谁!
”。
在JavaScript中，一行的结束就被认定为语句的结束。
但是最好还是要在结尾加上一个分号“;”来表示语句的结束。
这是一个编程的好习惯，事实上在很多语言中句末的分号都是必须的。
看看下面这个代码块
{
document.write（"
Thisisaheader
"）;
document.write（"
Thisisaparagraph
"）;
document.write（"
Thisisanotherparagraph
"）;
}
5JavaScript注释
HTML、CSS里都有注释，JavaScript里自然也有注释，而且分为单行注释与普通注释两种。
5.1单行注释
插入单行注释的符号是“//”
//我是注释，我是注释
document.write（"我是菜鸟我怕谁？
"）;
5.2多行注释
多行注释以"/*"开始，以"*/"结束。
/*
谁说菜鸟不会编程？
菜鸟不但会编程
还有书写注释的良好习惯
*/
document.write（"我是菜鸟我怕谁？
"）;
相信你已经了解注释的作用了。
HTML的注释不会被浏览器作为HTML解释，CSS注释也不会被浏览器解释。
同理，JavaScript的注释也不会被执行。
注释的作用就是记录自己在编程时候的思路，以便以后自己阅读代码时可以马上找到思路。
同样，注释也有助于别人阅读自己书写的JavaScript代码。
总之书写注释是一个良好的编程习惯。
6JavaScript变量
（1）什么是变量
在代数中，我们会遇到下面的基础问题，如果a的值为5，b的值为6，那么a与b的和是多少？
在这个问题中，我们就可以把a和b看做变量，再设置一个变量c来保存a与b的和。
那么，上面的这个问题就可以用如下的JavaScript代码表示：
//计算a+b的和
a=5;//给变量a赋值
b=5;//给变量b赋值
c=a+b;//c为a+b的和
document.write（c）;//输出c的值
执行结果：
10
在上面的例子中，我们用到了三个变量：
a，b，c。
这些都是变量的名字，在JavaScript中，我们需要用变量名来访问这个变量。
在JavaScript中，变量名有如下规定：
∙变量名区分大小写，A与a是两个不同变量。
∙变量名必须以字母或者下划线开头。
（2）声明变量
我们可以用var声明变量,比如：
vara;//声明一个变量a
a=5;//给变量赋值
其实在第一个例子中我们已经看到了，JavaScript中可以不声明变量直接赋值。
不过先声明变量是一个良好的编程习惯。
（3）给变量赋值
来看一个上面出现过的语句：
a=5;
这个语句怎么读出来呢？
“a等于5”？
对不起，不对。
应该是“让a等于5”，说得专业一点，这叫“给a赋值”。
我们之前已经提到过，a是变量，是可以变的，所以从某种角度来说，它不等于任何值，只是暂时的等于某个值。
来看下面这个例子，进一步熟悉一下赋值与等于的关系：
a=5;//让a等于5，a的值暂时等于5
a=6;//让a等于6，a的值暂时等于6
再次强调，如果JavaScript是你学习的第一门编程语言，一定要注意区分“等于”和“赋值”这两个不同的概念。
（4）变量的数据类型
其实，在JavaScript中，变量是无所不能的容器，你可以吧任何东西存储在变量里，例如：
varquanNeng1=123;//数字
varquanNeng2="一二三"//字符串
其中，quanNeng2这个变量存储了一个字符串，字符串需要用一对引号括起来。
变量还可以存储更多的东西，例如数组，对象，布尔值等等，我们会在后面介绍这些内容。
7JavaScript操作符
7.1运算操作符
操作符是用于在JavaScript中指定一定动作的符号，其中算术操作符主要用来完成类似加减乘除的工作。
（1）操作符举例
看下面这段JavaScript代码。
c=a+b;
其中的"="和"+"都是操作符。
JavaScript中还有很多这样的操作符，例如，加减乘除是JavaScript中比较基本的几个操作符，它们的意义与在数学中没有什么差别。
JavaScript中最常见的操作符是赋值操作符“=”，上一节我们已经强调过，它不是等于。
（2）操作符的优先级
我们都知道，在数学中，“a+b*c”这个式子中，乘法将先于加法运算。
同样，在JavaScript中，这个式子会按相同的顺序执行。
我们称之为“优先级”，即“*”的优先级高于“+”。
与数学中一样，改变运算顺序的方法是添加括号，JavaScript中改变优先级的方法也是添加括号。
例如：
（a+ｂ）*c
（3）字符串的连接
在JavaScript中，“+”不知代表加法，同样也可以使用它来谅解两个字符串，例如：
example="乌"+"龟";
在上面的例子中，example将包含“乌龟”这个字符串。
这是由于“+”完成了“乌”和“龟”的连接，当然了，你也可以把这种行为理解成字符串的加法。
（4）自加一，自减一操作符
这里我们来看两个非常常用的运算符，自加一“++”；自减一“--”。
首先来看一个例子：
a=5;
a++;//a的值变为6
a--//a的值有变回5
上面的例子中，a++使得a的值在原来的基础上增加1，a--则让a在现在的基础上在减去1。
所以，其实“a++”也可以写成
“a=a+1”;//等同于a++
（5）复合操作符
延续上面的例子，其实“a=a+1”还可以写成：
a+=1;//将a的值加1之后再赋给a
这样把运算和赋值结合到一起的操作符叫做复合操作符。
上面我们看到的是加法与赋值的结合，JavaScript中还有其它的符合运算符：
a+=b;//a=a+b
a-=b;//a=a-b
a*=b;//a=a*b
a/=b;//a=a/b
7.2比较操作符和逻辑操作符
操作符是用于在JavaScript中指定一定动作的符号。
（1）比较操作符
比如：
“==”符号，它是一个比较操作符，它表示的意思就是“相等吗？
”。
例如：
a==b表示：
“a与b的值相等吗？
”
在JavaScript中，这样的比较操作符有很多，下面就列出这些操作符以及它们的含义。
∙“>”——a大于b吗？
∙“<”——a小于b吗？
∙“>=”——a大于等于b吗？
∙“<=”——a小于等于b吗？
∙“==”——a等于b吗？
∙“!
=”——a不等于b吗？
（2）逻辑操作符
数学里面的“a>b”在JavaScript中还表示为a>b；数学中的“b大于a，b小于c”是“a对不起，JavaScript没有那么聪明，你需要这么写：
b>a&&ａ<ｂ
你可能已经猜到了，“&&”是而且的意思。
if（条件1&&条件2）
{//代码}
只有条件1、2同时满足，代码才会得到执行。
类似的操作符还有“或者（||）”和“非（!
）”
if（条件1||条件2）
{//代码}
“||”表示或者的意思，只要条件1或2中有一个满足，代码就会得到执行。
if（!
条件）
{//代码}
“！
”表示非，也就是不是的意思，只有条件不满足的时候，代码才会得到执行。
8JavaScript流程控制语句
8.1ifelse语句（如果，否则）
ifelse是所有编程语言里都有的功能，它使得程序具有简单的判断能力。
在介绍if之前，让我们先来了解一下布尔值这个概念。
（1）布尔（Bool）值
在变量一节中，我们曾经说过，变量可以用来存储布尔值。
哪么布尔值的作用究竟是什么呢？
简单的说，布尔值的作用就是用来表示“真的假的”。
所以布尔值其实只有两种取值：
真（true）和假（false）。
（2）ifelse结构
其实“ifelse”的意思和字面意思是一样的，就是“如果”、“否则”。
还是让我们来看一个使用if的例子吧。
Varhobby=“VbScript”;
if（hobby==“JavaScript”）
{
document.write（"有发展"）;
}
我们来解释一下这段代码。
首先是一个“if”，它后面紧跟着一个括号，括号里则是一个条件，确切地说是一个布尔值。
当条件成立的时候，这个值是true，“{}”里的语句将会得到执行；否则这个值是flase，“{}”里的语句将被忽略。
具体到我们的例子，因为hobby变量的值是“VbScript”，所以不做回答。
如果hobby变量的值是“JavaScript”，则回答“有发展”。
注意“==”这个符号，这个符号用来判断左右两边是否相等。
下一节会详细地介绍。
如果你的爱好不是JavaScript，那么没有任何输出。
如果你希望它能对这种情况做出反应，我们可以请else来帮忙，看下面的代码：
varhobby="JavaScript"
if（hobby=="JavaScript"）
{
document.write（"有发展"）;
}
else//如果爱好不是JavaScript
{
document.write（"没有评价……"）;
}
上面的代码用到了“else”，它会给if添加一种“否则”的状态。
当hobby不是“JavaScript”的时候，它会表明“没有评价”。
（3）ifelse嵌套
如果想做更多的判断，可以用if的嵌套,看下面的代码。
varhobby="JavaScript"
if（hobby=="JavaScript"）
{
document.write（"有发展"）;
}
elseif（hobby=="football"）//如果爱好是足球。
//注意：
这个if是嵌套在上一个ifelse中的else中的
{
document.write（"我X"）;
}
else//既不是JavaScript又不是足球
{
document.write（"没有评价……"）;
}
第二个if只有在第一个if的条件不成立的时候才有机会执行。
8.2JavaScriptSwitch语句
当有很多种选项的时候，switch比ifelse使用更方便。
上一节我们已经看到，利用ifelse可以让程序具有基本的判断能力，而使用嵌套的ifelse则可以让程序对多种情况进行判断。
但是当情况的种类比较多的时候，使用switch语句将更加合适。
比如要实现如下功能的程序：
输入一个学生的考试成绩，我们按照每十分一个等级将成绩分等，程序将根据成绩的等级做出不同的评价。
很明显，用ifelse可以实现这样的程序，但是代码会很复杂。
而如果使用switch语句，代码则会简单一些，首先来看一下思路，再把它翻译成JavaScript。
思路：
1.将分数转化为特定等级以便于switch处理。
2.判断分数属于哪种等级。
3.根据分数等级做出评价：
例如低于60给出挂科评价。
翻译成JavaScript就是如下代码（注意注释）：
//首先，我们用score变量来存储分数，假设为65
varscore=65;
//用分数除以10，parseInt的作用是把它转换为整数，
//暂时不用深究，（）内最后的结果为6
switch（parseInt（score/10））{
//switch开始实现判断过程，case6得到满足
case0:
case1:
case2:
case3:
case4:
case5:
//根据不同的等级做出不同的行为。
//冒号后面的语句就是行为
//case0到5的行为都是下面这个语句
degree="恭喜你，又挂了！
";
break;
case6:
degree="勉强及格";
break;
case7:
degree="凑合，凑合"
break;
case8:
degree="不错，不错";
break;
case9:
case10:
degree="高手高手，佩服佩服";
}//endofswitch
记得在每个case所执行的语句里添加上一个break语句。
为了理解break的作用，我们来看看如果没有break会怎么样：
switch（parseInt（score/10））{
case0:
case1:
case2:
case3:
case4:
case5:
degree="恭喜你，又挂了！
";
case6:
degree="勉强及格";
case7:
degree="凑合，凑合"
case8:
degree="8错，8错";
case9:
case10:
degree="高手高手，佩服佩服";
}//endofswitch
在上面的代码中，如果成绩是50分，那么score/10就是5，则case5后面的语句将会得到执行，同样，case6、7等等后面的语句都会得到执行。
也就是说，我们会得到：
”恭喜你，又挂了！
勉强及格凑合，凑合8错，8错高手高手，佩服佩服“这样没有意义的评价。
这就是swtitch语句的执行逻辑，当发现某个case满足后，该switch中在该case后的所有语句都会得到执行。
第一个例子中的break就是为了让switch”停下来“。
8.3JavaScriptFor循环
所谓循环，就是重复执行一段代码。
前面我们已经看到了，ifelse和switch是JavaScript具有了判断的能力，但是电脑的判断能力和人比起来差远了。
电脑更擅长一件事情——不停地重复。
我们在JavaScript中把这叫做循环。
for语句结构如下：
for（初始条件;判断条件;循环后动作）
{
循环代码
}
让我们来看一个简单的例子吧：
有十个菜鸟报数，“菜鸟1号、菜鸟2号”。
有了for循环，很少的代码就可以实现十个菜鸟的报数。
vari=1;
for（i=1;i<=10;i++）
{
document.write（"菜鸟"+i+"号
"）;
}
结果如下：
菜鸟1号
菜鸟2号
菜鸟3号
菜鸟4号
菜鸟5号
菜鸟6号
菜鸟7号
菜鸟8号
菜鸟9号
菜鸟10号
在上面那个例子中，循环恰好执行了10次，那么和“for（i=1;i<=10;i++）”一句中的10是不是10次的意思呢？
下面我们就来看看for循环的工作机制。
首先"i=1"叫做初始条件，也就是说从哪里开始，特别的，我们的例子从i=1开始。
出现在第一个分号后面的"i<=10"表示判断条件，每次循环都会先判断这个条件是否满足，如果满足则继续循环，否则停止循环，继续执行for循环后面的代码。
你可能想问了，我们设定了i=0，岂不是永远都小于等于10吗？
来看第三个部分。
最后的"i++"表示让i在自身的基础上加1，这时每次循环后的动作.也就是说，每次循环结束，i都会比原来大1，执行若干次循环之后，i<=10的条件就不满足了，这时循环结束。
for循环后面的代码将得到执行。
8.4JavaScriptWhile循环
while循环重复执行一段代码
升级会员 