1.数据类型与变量
1.1数据类型
JavaScript中的数据类型主要包括三类。
- 简单数据类型:JavaScript中常用的3中基本数据类型:数值数据类型(Number)、文本数据类型(String)、布尔数据类型(Boolean)。
- 复合数据类型:复合数据类型主要包括用来用来保存一组相同或不同数据类型的数组;用来保存一段程序,这段程序是可以在JavaScript程序中反复被调用的函数;用来保存一组不同类型的数据和函数等的对象。
- 特殊数据类型:特殊数据类型主要包括没有值存在的空数据类型null;没有进行定义的无定义数据类型undefined。
1.基本数据类型
- 数值数据类型
数值数据类型的值就是数字,在JavaScript中没有整数和浮点数之分,无论什么样的数字都属于数值数据类型,其有效范围在10-308到10308之间。大于10308的数值,超出数值类型的上限,即为无穷大,用Infinty表示;小于10-308的数值,超出数值类型的下限,即为无穷小,用-Infinty表示。如果JavaScript在进行数学运算时产生了错误或不可预知的结果,就会返回NAN(not a number)。NAN是一个特殊的数字,属于数值型。
<script>
document.write(12/0);//Infinity
</script>
<script>
document.write(12%0);//NaN
</script>
- 字符串数据类型
字符串数据类型是由双引号或者单引号括起来的0个或多个字符组成的序列,它可以包括大小写字母、数字、标点符号或其他可显示字符以及特殊字体,也可以包含汉字。
注意:
作为字符串定界符的引号必须匹配:即字符串前面使用的时双引号,那么后面也必须使用双引号,同样,前后都使用单引号。在用双引号作为定界符的字符串中可以直接含有单引号,在用单引号作为定界符的字符串中可以直接含有双引号。
空字符串中不包含任何字符,用一对引号表示,引号之间不包含任何空格。
引号必须在引文输入法状态下输入。
通过转义字符“\”可以在字符串中添加不可显示的特殊字符,或者防止引号匹配混乱问题。
document.write("hello world"+"<br/>");//hello world
document.write('hello world'+"<br/>");//hello world
document.write("hello 'world'"+"<br/>");//hello 'world'
document.write('hello "world"'+"<br/>");//hello "world"
3.布尔数据类型
布尔(Boolean)型也称逻辑型,主要进行逻辑判断,它只有两个值:true和false,分别表示真和假。在JavaScript中还可以用0表示false,非0整数表示true。
2.复合数据类型
- 数组
在JavaScript中数组主要用来表示一组相同或不同数据类型的数据。 - 函数
在JavaScript中函数用来保存一段程序,这段程序可以在JavaScript中反复被调用。 - 对象
在JavaScript中对象用来保存一组不同类型的数据和函数等。
3.特殊数据类型
-
无定义数据类型undifined
在引用一个定义过但没有赋值的变量时,会返回undifined
在引用一个不存在的数组元素时,会返回undifined
在引用一个不存在的对象属性时,会返回undifined
注意:
由于undifined是一个返回值,因此可以对该值进行操作,如输出该值或将其与其他值作比较。 -
空数据类型null
在进行比较时,null不会与任何数据类型相等。
1.2变量
变量是存储信息的单元,它对应于某个内存空间。变量用于存储特定数据类型的数据。用变量名代表其存储空间。程序能在变量中存储值和取出值。
1.标识符
- 标识符只能由大小写字母,数字,下划线,美元符号组成,不能包含空格,标点符号,运算符等其他符号。
- 标识符的第一个字符不能是数字。
- 标识符不能与JavaScript中的关键字名称相同。
2.变量的声明
JavaScript是一种弱类型程序设计语言,变量可以在不声明的情况下直接使用。所谓声明变量即为变量指定一个名称。声明之后,就可以把它作为存储单元。
- 声明变量
JavaScript中使用关键字“var”声明变量,在这个关键字后加上变量名。
var 变量名;
一个var可以同时声明多个变量名,多个变量名之间使用逗号分隔。
- 变量的赋值
要给变量赋值,可以使用JavaScript中的赋值运算符,即等于号(=)
方法一:声明变量名时可以同时赋值。
var firstname="jingbu";
方法二:声明变量之后,再给变量赋值,或者给未声明的变量直接赋值。
var age;
age=20;
number=9;
3.变量的作用范围
变量的作用范围是指可以访问该变量的代码区域。JavaScript中按变量的作用范围分为全局变量和局部变量。
全局变量:可以在整个HTML文档范围中使用的变量,这种变量通常是在函数体外定义的变量。
局部变量:只能再局部范围内使用的变量,这种变量通常都是在函数体内定义的变量,所以只在函数体内有效。
注意:
省略关键字var声明的变量,无论在函数体内部还是外部,都是全局变量。
1.3保留关键字;
保留关键字是在JavaScript中有特殊意义的单词。由于这些标识符已经被JavaScript使用,所以在用户声明变量、函数、数组等名称时,不能使用这些关键字。
2.运算符与表达式
运算符是可以用来操作数据的符号,操作数是被运算符操作的数据,表达式则是JavaScript中一个有意义的语句。
按照运算符使用的操作数的个数来划分,可以分为三种运算符:一元运算符、二元运算符、三元运算符。
按照运算符的功能来划分,可以分为以下几种运算符:赋值运算符、算术运算符、关系运算符、位操作运算符、逻辑运算符、条件运算符、特殊运算符。
2.1算术运算符及表达式
算术运算符是用来处理四则运算的运算符。
算术运算符
JavaScript中提供的算术运算符有+、-、*、/、%、++、–。
算术表达式
有运算符和操作数组成的表达式称为算术表达式,算术的表达式的结核性为自左向右。
2.2赋值运算符及表达式
赋值就是把一个数据赋值给一个变量。
赋值运算符
赋值运算符为二元运算符,要求运算符两侧的操作数类型必须一致(或者右侧的操作数必须可以转换为左侧操作数的类型)。JavaScript中提供的简单赋值运算符为等号(=);复合赋值运算符包括:+=、-=、*=、/=、%=、&=、|=、^=、<<=、>>=。
在书写复合运算符时必须连续书写,符号之间不允许使用空格,否则会出错。
赋值表达式
由赋值运算符和操作数组成的表达式称为赋值表达式。功能是计算表达式的值然后赋值给左侧变量。
赋值的左操作数必须是一个变量,JavaScript中可以对变量进行连续赋值,这时右关联,从右向左运算符被分组。
如果赋值运算符两边的操作数类型不一致,如果存在隐式转换,系统会自动将赋值运算符右侧的类型转换为左侧的类型再赋值;如果不存在隐式转换,则无法赋值,程序会报错。
2.3关系运算符及表达式
关系运算符的优先级低于算术运算符,高于赋值运算符。
关系运算符
JavaScript中定义的关系运算符有==、!=、<、>、<=、>=。
关系表达式
由关系运算符和操作数构成的表达式称为关系表达式。
对于布尔和字符串的比较运算符只能使用==和!=。
两个字符串值只有都为null或两个字符串长度相同、对应的字符序列也相同的非空字符串时比较的结果才能为true。
<script>
var a="";
var b="";
document.write(a==b);
var c;
var d;
document.write(c==d);
</script>
2.4位运算符及其表达式
位运算符
位运算符就是对二进制数进行运算的运算符。
JavaScript中运算符有&(与)、|(或)、^(异或)、~(非、)<<(左移)【高位被丢弃,低位依次补0】、>>(右移)【低位被丢弃,高位依照原有符号位填充空位】。
位运算符的操作数为整型或者是可以转换为整型的任何其他类型。
位运算表达式
由位运算符和操作数构成的表达式为位运算表达式。在位运算表达式中,系统首先将操作数转换为二进制,然后再进行位运算,计算完毕后,再将其转换为十进制数。
2.5逻辑运算符及其表达式
逻辑运算符
JavaScript中提供了&&(逻辑与)、||(逻辑或)、!(逻辑非)。
逻辑运算符要求操作数只能是布尔型。
逻辑表达式
由逻辑运算符组成的表达式称为逻辑表达式。逻辑表达式的结果只能是布尔值。
2.6其他运算符及运算优先级
条件运算符及其表达式
条件运算符是JavaScript中唯一的一个三元运算符,其符号为”? :“。
a>b?a:b
运算符优先级
优先级(1最高) | 运算符 |
1 | () |
2 | ++、-- |
3 | *、/、% |
4 | +、- |
5 | < 、<=、 >、 >= |
6 | ==、!= |
7 | && |
8 | || |
9 | =、 += 、-= 、*=、 /=、 %= |
3流程控制语句
3.1顺序语句
顺序执行的语句叫做顺序语句。
注释语句和语句块
注释通常用来解释程序代码的功能(增加代码的可读性)或阻止部分代码的执行(调试程序),不参与程序的执行。
单行注释
以//开始
//注释内容
多行注释
以/开始,以/结束
/*
注释内容
*/
语句块是一些语句的组合,通常语句块都会被一对大括号括起来。
3.2选择语句
JavaScript提供的选择结构语句有if语句、if…else语句、switch语句。
if语句
if()
{
语句块;
}
注意:
- if关键字后面的一对圆括号不能省略。圆括号内的表达式要求结果为布尔型或可以隐式转换为布尔型的表达式、变量或常量。
- if表达式后的一对大括号内是语句块。如果语句块只有一个语句,大括号可以省略,多个语句时,大括号不能省略。
- if语句表达式后一定不要加分号,如果加上分号代表条件成立后执行空语句。
- 当if语句的条件为true时,执行大括号中的语句块;当条件为false时,将跳过语句块,直接执行大括号后面的语句。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>判断成绩是否合格</title>
<script>
function score(){
//将输入的分数赋值给变量
var userScore=document.scoreForm.txtScore.value;
//结果初始值
var result="合格";
if(userScore<60){
result="不及格";
}
document.scoreForm.txtResult.value=result;
}
</script>
</head>
<body>
<form id="scoreForm" name="scoreForm" method="get">
<p><label>输入分数:</label><input type="text" id="txtScore" name="txtScore" /></p>
<!--<label> 标签为 input 元素定义标注(标记)。-->
<p><label>判断结果:</label><input type="text" id="txtResult" name="txtResult" /></p>
<p><input type="button" value="确 定" onclick="score()"></p>
</form>
</body>
</html>
if…else语句
if(条件表达式)
{
语句块1;
}
else{
语句块2;
}
if嵌套语句
if(表达式1){
if(表达式2){
语句块1;
}
else{
语句块2;
}
}
else{
if(表达式3){
语句块3;
}
else{
语句块4;
}
}
switch语句
switch(表达式){
case 常量表达式1:语句块1;break;
case 常量表达式2:语句块2;break;
case 常量表达式n:语句块n;break;
[default:语句块n+1;break;]
}
注意:
- switch关键字后的表达式结果只能为整型、字符型、字符串。
- case标记后的值必须为常量表达式,不能使用变量。
- case和default标记后使用冒号而非分号。 case标记后的语句块,无论是一句还是多句,大括号{}都可以省略。
- break语句为可选项,如果没有break语句,程序会执行满足条件case后的所有语句。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function score(){
//将输入的分数赋值给变量
var userScore=parseInt(document.scoreForm.txtScore.value/10);
switch(userScore){
case 10:
case 9:alert("优秀");
break;
case 8:alert("良好");
break;
case 7:alert("中等");
break;
case 6:alert("及格");
break;
default:alert("不及格");
break;
}
}
</script>
</head>
<body>
<form id="scoreForm" name="scoreForm" method="get">
<p><label>输入分数:</label><input type="text" id="txtScore" name="txtScore" /></p>
<!--<label> 标签为 input 元素定义标注(标记)。-->
<p><label>判断结果:</label><input type="text" id="txtResult" name="txtResult" /></p>
<p><input type="button" value="确 定" onclick="score()"></p>
</form>
</body>
</html>
3.3循环语句
JavaScript提供了while、do…while、for三种循环语句。
- while语句
while循环语句根据循环条件的返回值来执行循环体的次数。当逻辑条件成立时,重复执行循环体,直到条件不成立时终止。
while(布尔表达式){
语句块;//先判断条件,后执行语句块。
}
- do…while语句
do{
语句块;//先执行语句块,后判断条件
}
while(布尔表达式);
- for语句
for(表达式1;表达式2;表达式3){
语句块;
}
注意:
- 表达式1为赋值语句,表示循环变量的初始值。
- 表达式2为布尔型表达式,表示循环条件。
- 表达式3为赋值表达式,更新循环变量,程序每执行完一次循环体内的语句块,都要执行该表达式更新循环变量。
- JavaScript允许省略for语句中的3个表达式,但两个分号不能省略,并且要保证语句块中有相同作用的语句。
4.函数
函数是执行特定任务的语句块,通过调用函数的方式可以让这些语句块反复执行。
4.1定义函数
1.声明式函数
function 函数名([参数1,参数2,.....]){
//函数体语句
[return 表达式]
注意:
- function为关键字,在此用来定义函数。
- 函数名必须是唯一的,由用户自行定义,与变量命名规则基本相同。
- []表示可选部分
- 参数是可选的,可以定义一个或多个参数,也可以为空。多个参数之间用逗号分隔。如果不带参数圆括号也必须保留,不能省略。
- return指定函数的返回值,为可选参数。
<script>
function sayHi(toWhom){
alert("Hi,"+toWhom);
}
sayHi("world");
</script>
函数与调用它的程序之间的通信是通过函数的参数以及函数返回值来完成的。
(1)函数的参数
在定义函数时,函数名后面圆括号中的变量名称为”形参“;在程序中调用函数时,函数名后面圆括号内的表达式称为”实参“。形参时函数声明的参数,相当于定义变量,实参是函数调用时的参数,实质上是实参为形参赋值的过程。
在未调用函数时,形参并不占用存储单元。只有在发生方法调用时,才会给形参分配内存单元。在调用结束后,形参所占的内存单元也自动释放。
实参可以是常量、变量、表达式;形参必须是声明的变量,由于JavaScript是弱类型语言,所以不需要指定类型。
在函数调用中,实参列表中参数的数量、类型和顺序与形参列表中的参数可以不匹配,如果形参个数大于实参个数,多出来的形参值为unfined,反之,多出来的实参将被忽略。
实参对形参的数据传递是单向传递,只能由实参传给形参,不能由形参传给实参。
(2)函数返回值
如果函数执行完毕需要一个返回值,可以使用return语句。如果函数没有使用return语句,默认返回unfined。当程序执行return语句时,函数执行结束,因此return语句一般都位于函数体的最后一行。
return语句的返回值,可以是常量、变量、表达式等,并且类型可以是任意类型。如果省略返回值,代表结束函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算3次方函数</title>
<script>
function cubic(x){
var y;
y=x*x*x;
alert("计算结果为:"+y);
}
</script>
</head>
<body>
<input type="button" value="计 算" onclick="cubic(prompt('请输入一个数值'))" />
</body>
</html>
匿名函数
匿名函数就是不指定函数名称,对于不指定名称函数的函数定义非常简单,只需要使用关键字function和可选参数,后面跟一对大括号,大括号内是语句块,称为函数体。
function ([参数1,参数2,.....]){
//函数体语句
}
匿名函数的调用
(1)赋值给变量
var aa=function([参数1,参数2,.....]){
//函数体语句
}
变量aa将作为函数的名称,这种方法的本质是把函数当作数据赋值给变量。而调用函数时直接使用变量名,由于函数可能包含参数,因此,变量名后面的圆括号是不能省略的。
<script>
var sayHi=function (toWhom){
alert("Hi,"+toWhom);
}
sayHi("world");
</script>
(2)网页事件调用
window.onload=function(){
//函数体语句;
}
这种方法只能触发一次函数,函数不能重复使用,常用于页面对象的初始化操作。
4.2调用函数
(1)直接调用
一般比较适合没有返回值的函数。
<script>
function sayHello(){
document.write("hello");
}
sayHello();
</script>
(2)表达式调用
一般比较适合有返回值的函数,函数的返回值与表达式的计算。
<script>
function sayHello(){
return "hello";
}
document.write(sayHello());
</script>
(3)事件调用
JavaScript是基于事件模型的程序语言,页面加载、用户单击鼠标、移动光标等操作都会产生事件。当事件产生时,JavaScript可以调用某个函数来响应这个事件。
4.3全局函数
JavaScript中除了自定函数之外,系统还内置了很多全局函数,可以直接在JavaScript程序中直接调用。
函数 | 描述 |
decodeURI(URI) | 解码某个编码的URI |
decodeURIComponent(URI组件) | 解码一个编码的URI组件 |
encodeURI(URI) | 把字符串编码为URI |
encodeURIComponent(URI组件) | 把字符串编码为URI组件 |
escape(字符串) | 对字符串进行编码 |
evaluate(字符串) | 计算JavaScript字符串,并把它作为脚本代码来执行 |
isFinite(数字) | 检查某个值是否为有穷大的数 |
isNaN(参数) | 检查某个值是否为数字 |
Number(参数) | 把参数转换为数字 |
parseInt(字符串) | 解析一个字符串并返回一个整数 |
parseFloat(字符串) | 解析一个字符串并返回一个浮点数 |
unescape(字符串) | 对由escape()编码的字符串进行解码 |
1.eval()
参数为字符串,主要功能是将字符串作为脚本代码执行。参数必须是字符串类型,否则该函数将不做任何处理,将原数返回。
2.encodeURI()
把字符串作为URI进行编码。该函数不会对ASCII字母和数字进行编码,也不会对ASCII标点符号(-_.!~*’())进行编码。其他字符(;/?:@=+KaTeX parse error: Expected 'EOF', got '#' at position 1: #̲),不会进行转义编码。 3.e…#),都会由一个或多个十六进制的转义序列替换。