JavaScript快速入门.docx
《JavaScript快速入门.docx》由会员分享，可在线阅读，更多相关《JavaScript快速入门.docx（38页珍藏版）》请在冰豆网上搜索。
JavaScript快速入门
一个完整的JavaScript实现是由以下3个不同部分组成的
∙核心（ECMAScript）——JavaScript的核心ECMAScript描述了该语言的语法和基本对象
∙文档对象模型（DOM）——DOM描述了处理网页内容的方法和接口
∙浏览器对象模型（BOM）——BOM描述了与浏览器进行交互的方法和接口
ECMAScript、DOM、BOM将是我们之后课程的主要内容。
我们的第一个脚本：
最经典的HelloWorld程序!
document.write（"
Hello,JavaScriptWorld!
"）;
开发环境
选择一个你喜欢的纯文本编辑器或IDE
NotePad++
VIM
UltraEdit
EditPlus
gEdit（Unix）
Emacs（Mac/Unix）
其它
至少一个符合W3C标准的浏览器（推荐火狐浏览器），和一些市场上流行的浏览器（IE）
FireFox3.0+
InternetExplorer6.0+（由于IE具有多种不同的版本，还推荐安装IETester）
GoogleChrome1.0+
Opera9.0+
Safari3.0+
调试工具
FireFox下的FireBug,Venkman等
IE下的IEDeveloperToolbar,MSScriptDebugger等（强烈不推荐MSScriptDebugger,安装之后问题多）
GoogleChrome的JS控制台已经很强大了，Opera的错误控制台也可以，Opera蜻蜓和FireBug一样强大，Safari具有和Chrome一样的控制台
变量,小学生数学与简单的交互
变量
对于变量的理解：
变量是数据的代号。
如同人的名字一样。
varnum;//在JavaScript中使用关键字var声明一个变量
在JavaScript中,使用上面的语法,就可以声明一个变量,以便在之后给其指定值.
varnum;
num=128;//这样，就将num做为值128的一个名字，有了名字，就可以在之后引用！
document.write（num）;//输出128
貌似下面的代码和上面的具有一样的输出
document.write（128）;//这样当然也输出了128
不过再试试下面的代码
document.write（3.14159265358979）;//我们要多次输出这个值
document.write（3.14159265358979）;
document.write（3.14159265358978）;
document.write（3.14159265358979）;
document.write（3.14159265358979）;
于是可以用变量的概念来偷懒
varnum;
num=3.14159265358979;
document.write（num）;
document.write（num）;
document.write（num）;
document.write（num）;
document.write（num）;
虽然看上去没节约多少笔墨，但有一个概念即是：
我们使用document.write多次输出的是同一个值！
而前面一块则不同，它在每次输出时产生了一个新的值，显而易见，使用变量可以清楚的表达我们想要做的，而且简短的变量名引用可以使代码更清晰且不容易出错！
当然，名字不是乱取的，变量的命名有一些限制：
只能包含字母，数字，和下划线，还有个特殊的$字符，并且变量名只能以字母，下划线，还有$开头;另外，还不能使用JavaScript关键字和保留字;所以说，下面的变量声明全是错误的
var34bad;//不能以数字开头
varper人;//不能包含中文
varbad-var;//非法的-
varvar;//var就是一个关键字，所以很明显不能用来做变量名
另外要注意的一点是,变量的名称是区分大小写的!
值，类型
vardog;
dog="小虎子";//字符串，它们总被包含在双引号（或单号）中
varnum;
num=1;//数字，它们裸露的出现了
varstrNum;
strNum="1";//但是现在strNum所引用的是一个字符串,因为它被包含在引号中了
varbadNum;
badNum=3.345;//一个小数，因为它带有一个小数点
badNum=.2;//仍然是一个小数，这句代码与badNum=0.2是一样的!
badNum=0.4.5;//当然，这句代码是错的，一个非法数字
上面那样的写法（为了演示），我已经不想再忍受了，完全可以这样声明变量
vardog,num,strNum,badNum;//可以一次声明多个变量，它们用逗号分隔,然后再赋值
dog="小虎子";
num=1;
..........................
当然还有另一种声明变量的方法,事实上这种风格才是最常见的
vardog="小虎子";
varnum=1;
varstr="somestring",strNum="123";
......
数字（只能有整数或小数），字符串可能最常用的了，还有另一种类型：
布尔值（Boolean）.不像数字或字符串，有无限种可能的值，Boolean值只有两种可能：
真，假
varbool=true;//用true表示真值
bool=false;//用false表示假值
JavaScript是动态类型语言，在声明变量时无需指明其类型，在运行时刻变量的值可以有不同的类型。
vars="Hello,World!
!
!
";//无需指明为字符串类型
s=1.61803;//在运行时将变量值指定为另一个类型
JavaScript的变量类型不止字符串，数字，布尔值这三种，然而这三种确是最常用的了。
其它数据类型（参考）：
复合（引用）数据类型是：
*对象
*数组
特殊数据类型是：
*Undefined
//事实上,我们接触的第一个数据类型是Undefined,它的含义是"未定义值"
vara;//声明一个变量,但没有对其赋值
alert（a）;//但它仍然有值的,它的值为undefined
alert（b）;//但注意,输出一个未定义的变量将出现错误,而不是输出undefined
字符串
字符串相连
vars1="Hello,";
s1=s1+"World!
";
alert（s1）;
s1+="!
!
!
!
";
alert（s1）;
数学运算与比较
首先是小学生都会的加减乘除:
+,-,*,/
//加法+
//减法-
//乘法*
//除法/
//自增++
//自减--
vara=12;
varb=30;
varc=a+b;
alert（c）;//输出42
c=b-a;
alert（c）;//输出18
c=c*2;
alert（c）;//输出36
c=c/2;
alert（c）;//输出18
c=12;
c++;//这与c=c+1;效果是一样的
alert（c）;//输出13
c--;//这与c=c-1;效果是一样的
alert（c）;//输出11
//自增与自减运算符出现的地方也有讲究
c=20;
alert（c++）;//输出20,因为++写在变量后面,这表示变量c完成运算之后,再将其值增1
alert（c）;//现在将输出21,自减运算符也与些相似
//如果只是类似这样的计算
c=c+12;
//可以这样写
c+=12;//这与写c=c+12;效果是一样的
//类似其它的运算也有简便的方法
c-=3;//c=c-3
c*=4;//c=c*3;
c/=2;//c=c/2;
要注意的是，在JavaScritp中，连接字符串时也使用“＋”号。
当字符串与数字相遇时？
——JavaScript是弱类型语言
varnum=23+45;
alert（"23+45等于"+num）;//表达式从左往右计算，字符串之后的数字都会当成字符串然连接
alert（"23+45="+（23+45））;//使用括号分隔
比较操作符:
<,>,<=,>=,==,!
=,!
;比较操作符返回布尔值
//小于<
//大于>
//小于或等于<=
//大于或等于>=
//相等==
//不相等!
=
alert（2<4）;//返回true
alert（2>4）;//返回false
alert（2<=4）;//返回true
alert（2>=2）;//返回true
alert（2==2）;//返回true
alert（2!
=2）;//返回true
表达式的组合
alert（（2<4）==（5>3）==（3<=3）==（2>=2）==（2!
=2）==（2==2）==true）;
逻辑运算符
逻辑运算符用于对布尔值进行比较
//&&逻辑与,当两边的值都为true时返回true,否则返回false
//||逻辑或,当两边值都为false时返回false,否则返回true
//!
逻辑非
alert（true&&false）;//输出false
alert（true&&true）;//输出true
alert（true||false）;//输出true
alert（false||false）;//输出false
alert（!
true）;//输出false
类型转换入门
由于JavaScript是弱类型语言,所以我们完全可以将字符串和数字（两个不同类型的变量）进行相加,这个我们在前面已经演示过了.当然,不仅仅可以将字符串和数字相加,还可以将字符串与数字相乘而不会出现脚本错误!
varstr="somestringhere!
";
varnum=123;
alert（str*num）;//将输出NaN,因为乘法运算符只能针对数字,所以进行运算时计算机会将字段串转换成数字
//而这里的字符串转换成数字将会是NaN
//NaN是一个特殊的值,含义是"NotANumber"-不是一个数字,当将其它值转换成数字失败时会得到这个值
str="2";
alert（str*num）;//将输出246,因为str可以解析成数字2
其它类型转换
varbool=true;
alert（bool*1）;//输出1,布尔值true转换成数字为1,事实上将其它值转换在数字最简单的方法就是将其乘以1
bool=false;
alert（bool*1）;//输出0
alert（bool+""）;//输出"flase",将其它类型转换成字符串的最简单的方法就是将其写一个空字符串相连
alert（123+""）;//数字总能转换成字符串
varstr="somestring";
alert（!
!
str）;//true,因为非运算符是针对布尔值进行运算的,所以将其它类型转换成布尔值只须将其连续非两次
str="";
alert（!
!
str）;//输出false,只有空字符串转换成布尔值时会是false,非空字符串转换成布尔值都会返回true
varnum=0;
alert（!
!
num）;//false
num=-123.345;
alert（!
!
num）;//true,除0以外的任何数字转换成布尔值都会是true
//还有一个非常重要的是,空字符串转换成数字将会是0
alert（""*1）;//输出0
获取变量类型typeof运算符
varbool=true;
alert（typeofbool）;//输出boolean
varnum=123;
alert（typeofnum）;//输出number
varstr="somestringhere";
alert（typeofstr）;//输出string
varstrNum="123";
alert（typeofstrNum）;//输出string
strNum*=1;
alert（typeofstrNum）;//输出number
根据用户的输入进行计算
使用window.prompt可以弹出包含输入框的窗口，用户输入的内容将是此函数的返回值
varmsg=window.prompt（"请输入一个数字","默认值"）;//prompt方法包含一个必须参数和一个可选参数。
//第一个参数是必须的，将在窗口中显示的文字，第二个参数是可选的，为文本框的预设值
alert（msg）;//将输出我们输入进去的东西
请用户输入年龄，我们计算出他活了多少秒（貌似无聊的很啊）
varage=window.prompt（"请输入您的年龄！
","18"）;
varliveSeconds=age*365*24*3600;
alert（"您已经度过了"＋liveSeconds＋"秒!
"）;
分支判断与循环
分支结构
∙单一选择结构（if）
∙二路选择结构（if/else）
∙内联三元运算符?
:
∙多路选择结构（switch）
varcondition=true;
if（condition）{
alert（"我将出现！
"）;
}
condition=false;
if（condition）{
alert（"我不会出现！
"）;
}else{
alert（"我会出现！
"）;
}
condition="somestring";
if（condition）{
alert（"可以直接对任何数据类型进行if判断,在判断时计算会自动将其转换成布尔值!
"）;
}
varval=condition?
"当为true时我将被返回":
"当为false时我将被返回";
alert（val）;//将输出"当为true时我将被返回"
对于if..else语句，如果要执行的语句只有一条，可以不使用“｛｝”，但这种写法并不推荐.但确实这样可以简化代码:
varstr="one";
if（str=="one"）alert（"str的值为字符串'one'!
"）;
elsealert（"notone"）;
虽然JavaScript中没有if....elseif结构,但可以使用if...else的简写方式得到
//为了判断用户输入的成绩的范围,我们使用了多重嵌套的if..else语句
varnum=window.prompt（"请输入XXX的成绩!
",""）;
num*=1;//window.prompt方法始终只返回字符串,用这样的方法将其转换成数字
if（isNaN（num）&&num）{//不能将其它值转换成数字时将返回NaN,可以用内置的isNaN判断值是否是NaN
alert（"您输入的不是一个数字!
"）;
}else{
if（num<=100&&num>=90）{
alert（"Excellent!
"）;
}else{
if（num<90&&num>=80）{
alert（"Good!
"）;
}else{
if（num<80&&num>=70）{
alert（"Soso!
"）;
}else{
if（num<70&&num>=60）{
alert（"Becareful!
!
!
"）;
}else{
if（num<60&&num>=0）{
alert（"Oh,NO!
"）;
}else{
alert（"USB!
"）;
}
}
}
}
}
}
//上面的代码由于用了多重的if..else嵌套,显得非常的混乱,简化只须将else后的花括号去掉就行了
//if（...）{...}这算是一句
if（isNaN（num））{
alert（"您输入的不是一个数字!
"）;
}elseif（num<=100&&num>=90）{
alert（"Excellent!
"）;
}elseif（num<90&&num>=80）{
alert（"Good!
"）;
}elseif（num<80&&num>=70）{
alert（"Soso!
"）;
}elseif（num<70&&num>=60）{
alert（"Becareful!
!
!
"）;
}elseif（num<60&&num>=0）{
alert（"Oh,NO!
"）;
}else{
alert（"USB!
"）;
}
//看上去清晰多了,但要注意的是,JavaScript中没有elseif这样的语法,所以上的elseif之间是有空格的
用于进行多次判断的switch语句
switch（condition）{//switch本来就是跳转的意思（又称为“开关”），所以switch语句就是判断情况，跳到符合的情况开始执行
case4:
alert（"c的值是4"）;
case3:
alert（"c的值肯定大于等于3"）;
case2:
alert（"c的值肯定大于等于2"）;
case1:
alert（"c的值肯定大于等于1"）;
}
//可以使用break来只执行符合一个条件的语句
switch（condition）{
case4:
alert（"c的值是4"）;
break;
case3:
alert（"c的值是3"）;
break;
case2:
alert（"c的值是2"）;
break;
case1:
alert（"c的值是1"）;
break;
}
varcondition="one";
switch（condition）{//switch不但可以用来判断数字,还可以判断字符串，甚至是不定的变量
case"one":
alert（"condition的值是字符串'one'!
"）;
break;
case"three":
alert（"condition的值是字符串'three'!
"）;
break;
case"four":
alert（"condition的值是字符串'four'!
"）;
break;
case"five":
alert（"condition的值是字符串'five'!
"）;
break;
default:
//当所有情况都不匹配时，将执行default语句后的
alert（"我们要万无一失!
condition什么都不是!
"）;
}
循环
循环用来指明当某些条件保持为真时要重复的动作。
当条件得到满足时，就跳出循环语句。
在JavScript中有四种循环结构可用。
∙由计数器控制的循环（for）
∙在循环的开头测试表达式（while）
∙在循环的末尾测试表达式（do/while）
∙对对象的每个属性都进行操作（for/in）
for语句指定了一个计数器变量，一个测试条件，以及更新该计数器的操作。
在每次循环的重复之前，都将测试该条件。
如果测试成功，将运行循环中的代码。
如果测试不成功，不运行循环中的代码，程序继续运行紧跟在循环后的第一行代码。
在执行该循环后，计算机变量将在下一次循环之前被更新。
for（vari=0;i<10;i++）{//for循环的圆括号里面须放三个句子,分别是1.初使化计数器2.判断条件3.更新计数器
alert（"i当前的值为"+i）;
}
其实for循环语句完全可以这样写,下面的代码和上面的效果是一样的（虽然没有必要，但从这样的代码可清楚看出for循环如何工作的）
vari=0;//循环进行之前初始化i
for（;;）{//for语句括号中必须有三个语句，但可以为空语句
if（i<10）{//当条件为true时才执行代码
alert（"i当前的值为"+i）;
}else{//当条件为false时就退出循环
break;//使用break退出循环
}
}
一个死循环最能说明while的工作方式了（但这样的错误我们绝不能在实际编程中出现）
while（true）{
alert（"你关不掉我的！
"）;//这就是网上那些所谓的高手写的“关不上的窗（周传雄新歌,力荐）”代码
}
do..while循环与while循环不同之处在于它至少将代码块中的代码执行一次
do{
alert（"我肯定会出现一次的"）;
}while（false）;
而对于for...in循环，我们将在讲解数组和对象时使用
函数与内置对象
函数
函数（又称为方法）用于对一大段为了达到某种目的的代码进行归类，以使代码更具有条理：
//一段计算三角形面积的代码
varwide=window.prompt（"请输入三角形的底边长度！
",""）;
varhigh=window.prompt（"请输入三角形的高！
",""）;
vararea=wide*high/2;
if（isNaN（area））{//判断用户是否输入的是数字
alert（"三角形的面积为"+area）;
}else{
alert（"您的输入有误!
"）;
}
如果我们需要在其它地方使用此功能，那么最简单的方法就是Ctrl＋C然后Ctrl＋V，使用函数可以节约一些代码
functioncalcAngleArea（）{
//使用function关键字声明一个函数，接着是函数的名称，函数名称必须符合变量的命名规范
//花括号用来表示一段代码块
varwide=window.prompt（"请输入三角形的底边长度！
",""）;
varhigh=window.prompt（"请输入三角形的高！
",""）;
vararea=wide*high/2;
if（isNaN（area））{
alert（"您的输入有误!
"）;
}else{
alert（"三角形的面积为"+area）;
}
}
但是写了这样了个计算三角形面积
升级会员 