JavaScript 语言基础
编程准备
编程术语
Token(语言符号) 、Literal(常量) 、Identifer(标识符) 、Operator(运算符) 、Expression(表达式) 、Statement(语句) 、Keyword(关键字) 、Reserved(保留字)
脚本执行顺序
JavaScript 脚本解释器将按照程序代码出现的顺序来解释程序语句,因此可以将函数定义和变量声明放在<head>和</head>之间,此时与函数体相关的操作不会被立即执行。
大小写敏感
JavaScript 脚本程序对大小写敏感,相同的字母,大小写不同,代表的意义也不同。
空白字符
空白字符包括空格、制表符和换行符等,在编写脚本代码时占据一定的空间,但脚本被浏览器解释执行时无任何作用。
分号
在编写脚本语句时,用分号作为当前语句的结束符。
块
在定义函数时,使用大括号“{}”将函数体封装起来。
在使用循环语句时,使用大括号“{}”将循环体封装起来。
从本质上讲,使用大括号“{}”将某段代码封装起来后,构成“块”的概念,JavaScript脚本代码中的块,即为实现特定功能的多句(也可为空或一句)脚本代码构成的整体。
数值类型
整型和浮点数值
avaScript 允许使用整数类型和浮点类型两种数值,其中整数类型包含正整数、0 和负整数;而浮点数则可以是包含小数点的实数,也可以是用科学计数法表示的实数。
var age = 32; //整数型
var num = 32.18; //包含小数点的浮点型
var num = 3.7E-2; //科学计数法表示的浮点型
八进制和十六进制
在整数类型的数值中,数制可使用十进制、八进制以及十六进制
var age = 32; //十进制
var num = 010; //八进制
var num = C33; //十六进制
变量
变量标识符
JavaScript 脚本语言使用关键字var 作为其唯一的变量标识符,其用法为在关键字var 后面加上变量名
var age;
变量申明
JavaScript 脚本语言允许开发者不首先声明变量就直接使用,而在变量赋值时自动申明该变量。
变量赋值和变量声明可以同时进行,例如下面的代码声明名为age 的变量,同时给该变量赋初值25,var age = 25;
当然,可在一句JavaScript 脚本代码中同时声明两个以上的变量,例如:var age , name;
同时初始化两个以上的变量也是允许的,例如:var age = 35 , name = “tom”;
变量作用域
要讨论变量的作用域,首先要清楚全局变量和局部变量的联系和区别:
全局变量:可以在脚本中的任何位置被调用,全局变量的作用域是当前文档中整个脚本区域。
局部变量:只能在此变量声明语句所属的函数内部使用,局部变量的作用域仅为该函数体。
声明变量时,要根据编程的目的决定将变量声明为全局变量还是局部变量。一般而言,保存全局信息(如表格的原始大小、下拉框包含选项对应的字符串数组等)的变量需声明为全局变量,而保存临时信息(如待输出的格式字符串、数学运算中间变量等)的变量则声明为局部变量。
弱类型
JavaScript 脚本语言是弱类型语言,在变量声明时不需显式地指定其数据类型,变量的数据类型将根据变量的具体内容推导出来,且根据变量内容的改变而自动更改,而强类型语在变量声明时必须显式地指定其数据类型。
变量声明时不需显式指定其数据类型既是 JavaScript 脚本语言的优点也是缺点
优点是编写脚本代码时不需要指明数据类型,使变量声明过程简单明了;
缺点就是有可能造成因微妙的拼写不当而引起致命的错误。
基本数据类型
JavaScript 脚本语言支持的基本数据类型包括Number 型、String 型、Boolean 型、Undefined 型、Null 型和Function 型,分别对应于不同的存储空间
Number 型
Number 型数据即为数值型数据,包括整数型和浮点型,整数型数制可以使用十进制、八进制以及十六进制标识,而浮点型为包含小数点的实数,且可用科学计数法来表示。一般来说,Number 型数据为不在括号内的数字
String 型
String 型数据表示字符型数据。JavaScript 不区分单个字符和字符串,任何字符或字符串都可以用双引号或单引号引起来。
Boolean 型
Boolean 型数据表示的是布尔型数据,取值为ture 或false,分别表示逻辑真和假,且任何时刻都只能使用两种状态中的一种,不能同时出现。
Undefined 型
Undefined 型即为未定义类型,用于不存在或者没有被赋初始值的变量或对象的属性
如下列语句定义变量name 为Undefined 型:var name
定义Undefined 型变量后,可在后续的脚本代码中对其进行赋值操作,从而自动获得由其值决定的数据类型。
Null 型
Null 型数据表示空值,作用是表明数据空缺的值,一般在设定已存在的变量(或对象的属性)为空时较为常用。区分Undefined 型和Null 型数据比较麻烦,一般将Undefined 型和Null 型等同对待。
Function 型
Function 型表示函数,可以通过new 操作符和构造函数Function()来动态创建所需功能的函数,并为其添加函数体。例如:var myFuntion = new Function(){staments;};
组合类型
数组Array 型和对象Object 型
Array 型
Array 型即为数组,数组是包含基本和组合数据的序列。在JavaScript 脚本语言中,每一种数据类型对应一种对象,数组本质上即为Array 对象。
var score = [56,34,23,76,45];
上述语句创建数组score,中括号“[]”内的成员为数组元素。由于JavaScript 是弱类型语言,因此不要求目标数组中各元素的数据类型均相同
由于数组本质上为Array 对象,则可用运算符new 来创建新的数组,例如:var score=new Array(56,34,”23”,76,”45”);
访问数组中特定元素可通过该元素的索引位置index 来实现,如下列语句声明变量m 返回数组score 中第四个元素:var m = score [3];
数组作为Array 对象,具有最重要的属性length,用来保存该数组的长度
Object 型
对象为可包含基本和组合数据的组合类型,且对象的成员作为对象的属性,对象的成员函数作为对象的方法。在JavaScript 脚本语言中,可通过在对象后面加句点“.”并加上对象
属性(或方法)的名称来访问对象的属性(或方法)
运算符
JavaScript脚本语言支持的运算符包括:赋值运算符、基本数学运算符、位运算符、位移运算符、高级赋值语句、自加和自减、比较运算符、逻辑运算符、逗号运算符、空运算符、?...:…运算符、对象运算符以及typedof 运算符等
赋值运算符
JavaScript 脚本语言的赋值运算符包含“=”、“+=”、“—=”、“*=”、“/=”、“%=”、“&=”、“^=”等
基本数学运算符
JavaScript 脚本语言中基本的数学运算包括加、减、乘、除以及取余等,其对应的数学运算符分别为“+”、“-”、“*”、“/”和“%”等
位运算符
JavaScript 脚本语言支持的基本位运算符包括:“&”、“|”、“^”和“~”等。脚本代码执行位运算时先将操作数转换为二进制数,操作完成后将返回值转换为十进制。
位移运算符
位移运算符用于将目标数据往指定方向移动指定的位数。JavaScript 脚本语言支持“<<”、“>>”和“>>>”等位移运算符
自加和自减
自加运算符为“++”和自减运算符为“--”分别将操作数加1 或减1。值得注意的是,自加和自减运算符放置在操作数的前面和后面含义不同。运算符写在变量名前面,则返回值为自加或自减前的值;而写在后面,则返回值为自加或自减后的值。
若自加(或自减)运算符放置在操作数之后,执行该自加(或自减)操作时,先将操作数的值赋值给运算符前面的变量,然后操作数自加(或自减);
若自加(或自减)运算符放置在操作数之前,执行该自加(或自减)操作时,操作数先进行自加(或自减),然后将操作数的值赋值给运算符前面的变量。
比较运算符
JavaScript 脚本语言中用于比较两个数据的运算符称为比较运算符,包括“= =”、“!=”、“>”、“<”、“<=”、“>=”等
逻辑运算符
JavaScript 脚本语言的逻辑运算符包括“&&”、“||”和“!”等,用于两个逻辑型数据之间的操作,返回值的数据类型为布尔型。
逗号运算符
编写JavaScript 脚本代码时,可使用逗号“,”将多个语句连在一起,浏览器载入该代码时,将其作为一个完整的语句来调用,但语句的返回值是最右边的语句。
使用长语句赋值时,返回值为赋值语句最右边变量的值,为养成良好的编程习惯,建议不是用该方法。逗号“,”一般用于在函数定义和调用时分隔多个参数
空运算符
空运算符对应的关键字为“void”,其作用是定义一个表达式,但该表达式并不返回任何值。
?...:运算符
在JavaScript 脚本语言中,“?...:”运算符用于创建条件分支。在动作较为简单的情况下,较之if…else 语句更加简便,其语法结构如下:
(condition)?statementA:statementB;
载入上述语句后,首先判断条件condition,若结果为真则执行语句statementA,否则执行语句statementB。
值得注意的是,由于JavaScript 脚本解释器将分号“;”作为语句的结束符,statementA 和statementB 语句均必须为单个脚本代码,若使用多个语句会报错
对象运算符
JavaScript 脚本语言主要支持四种对象运算符,包括点号运算符、new 运算符、delete运算符以及()运算符
对象包含属性和方法,点号运算符用来访问对象的属性和方法。其用法是将对象名称与对象的属性(或方法)用点号隔开var myColor=document.bgColor;
可使用双引号“[]”来访问对象的属性var myColor=document[" bgColor "];
new 运算符可以创建程序员自定义的对象,以可以创建JavaScript 内建对象的实例。
delete 运算符主要用于删除数组的特定元素,也可用来删除对象的属性、方法等
var myClassmate=new Array("JHX","LJY","QZY","HZF");
delete myClassmate[2];
typeof 运算符
typeof 运算符用于表明操作数的数据类型,返回数值类型为一个字符串。
运算符优先级
进行表达式求值时,先执行优先级脚高的运算符,再执行优先级较低的运算符;若优先级相同则按照从左至右的顺序执行
核心语句
在 JavaScript 脚本语言中,语句的基本格式为:
<statement>;
分号为语句结束标志符,为养成良好的编程习惯,在编程中应使用分号。
值得注意的是,JavaScript 脚本支持符号匹配,如双引号、单引号等。若分号嵌套在上述匹配符号内,脚本解释器搜索匹配的符号:
若存在匹配符,则将其中的分号作为普通符号而不是作为语句结束符对待。例如:var msg="语句 : var myData;";
若不存在匹配符,则提示脚本出现语法错误。例如:var msg="语句 : var myData;
基本语句构成代码段
基本处理流程
基本处理流程就是对数据结构的处理流程,在JavaScript 里,基本的处理流程包含三种结构,即顺序结构、选择结构和循环结构。
顺序结构即按照语句出现的先后顺序依次执行,为JavaScript 脚本程序中最基本的结构
选择结构即按照给定的逻辑条件来决定执行顺序,可以分为单向选择、双向选择和多向选择。但无论是单向还是多向选择,程序在执行过程中都只能执行其中一条分支。单向选择和双向选择结构
循环结构即根据代码的逻辑条件来判断是否重复执行某一段程序。若逻辑条件为true,则重复执行,即进入循环,否则结束循环。循环结构可分为条件循环和计数循环
if 条件假设语句
if 条件假设语句是比较简单的一种选择结构语句,若给定的逻辑条件表达式为真,则执行一组给定的语句
if(conditions)
{
statements;
}
if 后面可增加else 进行扩展,即组成if…else 语句,其基本结构
if(conditions)
{
statement1;
}
else
{
statement2;
}
switch 流程控制语句
switch (a)
{
case a1:
statement 1;
[break;]
case a2:
statement 2;
[break];
……
default:
[statement n;]
}
for 循环语句
for 循环语句是循环结构语句,按照指定的循环次数,循环执行循环体内语句(或语句块)
for(initial condition; test condition; alter condition)
{
statements;
}
循环控制代码(即小括号内代码)内各参数的含义如下:
initial condition 表示循环变量初始值;
test condition 为控制循环结束与否的条件表达式,程序每执行完一次循环体内语句(或语句块),均要计算该表达式是否为真,若结果为真,则继续运行下一次循环体内语句(或语句块);若结果为假,则跳出循环体。
alter condition 指循环变量更新的方式,程序每执行完一次循环体内语句(或语句块),均需要更新循环变量
while 和do-while 循环语句
while 语句与if 语句相似,均有条件地控制语句(或语句块)的执行
while(conditions)
{
statements;
}
while 语句与if 语句的不同之处在于:在if 条件假设语句中,若逻辑条件表达式为真,则运行statements 语句(或语句块),且仅运行一次;while 循环语句则是在逻辑条件表达式为真的情况下,反复执行循环体内包含的语句(或语句块)。
使用break 和continue 进行循坏控制
在循环语句中,某些情况下需要跳出循环或者跳过循环体内剩余语句,而直接执行下一次循环,此时需要通过break 和continue 语句来实现。break 语句的作用是立即跳出循环,continue 语句的作用是停止正在进行的循环,而直接进入下一次循环。
with 对象操作语句
在编写JavaScript 脚本过程中,经常需引用同一对象的多个属性或方法,正常的对象属性或方法的引用途径能达到既定的目的,但代码显得尤为复杂。JavaScript 脚本语言提供with操作语句来简化对象属性和方法的引用过程,
with (objct)
{
statements;
}
例如下列连续引用document 对象的write()方法的语句:
document.write("Welcome to China");
document.write("Welcome to Beijing");
document.write("Welcome to Shanghai");
可以使用with 语句简化为:
with(document)
{
write("Welcome to China");
write("Welcome to Beijing");
write("Welcome to Shanghai");
}
使用for…in 进行对象循坏
使用for…in 循环语句可以对指定对象的属性和方法进行遍历,其语法结构如下:
for (变量名 in 对象名)
{
statements;
}
含标签的语句
经常在循环标志前加上标签文本来引用该循环,其使用方法是标识符后面加冒号“:”。在使用break 和continue 语句配合使用控制循环语句时,可使用break 或continue 加上标识
符的形式使循环跳转到指定的位置。
函数
函数的基本组成
函数由函数定义和函数调用两部分组成,应首先定义函数,然后再进行调用,以养成良好的编程习惯。
函数的定义应使用关键字 function,其语法规则如下:
function funcName ([parameters])
{
statements;
[return 表达式;]
}
函数的各部分含义如下:
funcName 为函数名,函数名可由开发者自行定义,与变量的命名规则基本相同;
parameters 为函数的参数,在调用目标函数时,需将实际数据传递给参数列表以完成函数特定的功能。参数列表中可定义一个或多个参数,各参数之间加逗号“,”分隔开来,当然,参数列表也可为空;
statements 是函数体,规定了函数的功能,本质上相当于一个脚本程序;
return 指定函数的返回值,为可选参数。
全局函数与局部函数
JavaScript 脚本语言提供了很多全局(内建)函数,在脚本编程过程中可直接调用,在此介绍四种简单的全局函数:parseInt()、parseFloat()、escape()和unescape()。
parseInt()函数的作用是将字符串转换为整数,
parseFloat()函数的作用是将字符串转换为浮点数;
escape()函数的作用是将一些特殊字符转换成ASCII 码,
而unescape()函数的作用是将ASCII 码转换成字符。
是部函数,即定义在某特定函数内部,并仅能在其内使用的函数
作为对象的函数
JavaScript 脚本语言中所有的数据类型、数组等均可作为对象对待,函数也不例外。可以使用new 操作符和Function 对象的构造函数Function()来生成指定规则的函数,其基本语法如下
var funcName = new Function (arguments,statements;);
值得注意的是,上述的构造函数Function()首字母必须为大写,同时函数的参数列表与操作代码之间使用逗号隔开。
函数递归调用
函数的递归调用即函数在定义时调用自身
函数递归调用能使代码显得紧凑、简练,但也存在执行效率并低、容易出错、资源耗费较多等问题,推荐在递归调用次数较少的情况下使用该方法,其余情况尽量使用其余方法来代替。
语言注释语句
一般使用双反斜杠“//”作为每行解释语句的开头,必须在每行注释语句前均加上双反斜杠“//”
对于多行的解释语句,可以在解释语句开头加上“/*”,末尾加上*/,不须在每行开头加上双反斜杠“//”。
JavaScript 脚本语言中,还允许使用HTML 风格的语言注释,即用“<!--”来代替双反斜杠“//”。为养成良好的编程习惯,最好不用 HTML 风格的语言注释语句
函数应用注意事项
定义函数的位置:如果函数代码较为复杂,函数之间相互调用较多,应将所有函数的定义部分放在HTML 文档的<head>和</head>标记对之间,既可保证所有的函数在调用之前均已定义,又可使开发者后期的维护工作更为简便;
函数的命名:函数的命名原则与变量的命名原则相同,但尽量不要将函数和变量取同一个名字。如因实际情况需要将函数和变量定义相近的名字,也应给函数加上可以清楚辨认的字符(如前缀func 等)以示区别;
函数返回值:在函数定义代码结束时,应使用return 语句返回,即使函数不需要返回任何值;
变量的作用域:区分函数中使用的变量是全局变量还是局部变量,避免调用过程中出现难以检查的错误;
函数注释:在编写脚本代码时,应在适当的地方给代码的特定行添加注释语句,例如将函数的参数数量、数据类型、返回值、功能等注释清楚,既方便开发者对程序的后期维护,也方便其他人阅读和使用该函数,便于模块化编程;
函数参数传递:由于 JavaScript 是弱类型语言,使用变量时并不检查其数据类型,导致一个潜在的威胁,即开发者调用函数时,传递给函数的参数数量或数据类型不满足要求而导致错误的出现。
在函数调用时,应仔细检查传递给目标函数的参数变量的数量和数据类型。