1、Javascript的语法规则
- JavaScript程序按照在HTML文件中出现的顺序逐行执行。
- JavaScript严格区分字母大小写。
- 在JavaScript中,每行结尾的分号可有可无。
- JavaScript中主要包括两种注释:单行注释和多行注释。单行注释使用双斜线“//”作为注释标签,多行注释是以“/”标签开始,以“/”标签结束。
2、Javascript的关键字
3、JavaScript的引入方式
3.1、行内式
是将JavaScript代码作为HTML标签的属性值使用。
//单击“test”时,弹出一个警告框提示“Happy”。
<a href="javascript:alert('Happy');"> test </a>
//单击网页中的一个按钮时,就会触发按钮的单击事件。
<input type="button" οnclick="alert('Happy'); " value="test" >
3.2、嵌入式
在HTML中运用< script>标签及其相关属性可以嵌入JavaScript脚本代码。
<head>
<script type="text/javascript">
// 此处为JavaScript代码
</script>
</head>
3.3、外链式
是将所有的JavaScript代码放在一个或多个以.js为扩展名的外部JavaScript文件中,通过< src >标签将这些JavaScript文件链接到HTML文档中。利于后期修改和维护,减轻文件体积、加快页面加载速度。
4、JavaScript的方法
4.1、alert()方法
alert()用于弹出一个警告框,确保用户可以看到某些提示信息。利用alert()可以很方便的输出一个结果,因此alert()经常用于测试程序。
window.alert(提示信息);
或
alert(提示信息);
4.2、prompt()方法
prompt()方法用于弹出一个提示框,可以显示和提示用户输入信息。
window.prompt(提示信息);
或
prompt(提示信息);
5、DOM
根据节点层级关系的不同,可以把节点分为根节点、父节点、子节点和兄弟节点。
根节点:位于节点树的最顶层,每个节点树有一个根节点。
父节点:某个节点的上一级节点,统称为父节点。
子节点:某个节点的下一级节点,统称为子节点。
兄弟节点:具有相同父节点的两个节点,被称为兄弟节点。
6、对象
属性:用来描述对象特性的数据,即若干变量。
方法:用来操作对象的若干动作,即若干函数。
在JavaScript中有若干对象,这里我们介绍网页制作中最常用的document对象。document表示文档对象,包含了大量的属性和方法,代表整个HTML文档。每一个载入浏览器的HTML文档都会成为document对象,只有通过document对象,才能获取某个HTML文档中的对象。
6.1、Date对象
Date对象主要提供获取和设置日期与时间的方法。
1.不带参数
2.创建一个指定日期的Date对象
3.创建一个指定时间的Date对象
7、访问节点
要想控制某个节点,我们首先要查找到这个节点,这个查找过程就是访问节点。下面列举了访问节点的常用方法。
//想要访问id名为“box”的节点
document.getElementById('box')
8、设置节点样式
style对象可以用来设置节点的样式,通过style对象可以动态调用节点的内嵌样式,从而获得所需要的的效果。
对象.style.属性='属性值';
style对象的属性和CSS的样式属性用法基本相似,但部分属性的拼写不同。
#test{width:200px;} //CSS样式设置宽度
#test{background-color:#000;} //CSS样式设置背景颜色
test.style.width='200px'; //style对象属性设置宽度
test.style.backgroundColor='#000'; //style对象属性设置背景颜色
9、变量
当一个数据需要多次使用时,可以利用变量将数据保存起来。变量就是指程序中一个已经命名的存储单元,它的主要作用就是为数据操作提供存放信息的容器。
9.1、变量的命名
- 必须以字母或下划线开头,中间可以是数字、字母或下划线。
- 变量名不能包含空格、加、减等符号。
- 不能使用JavaScript中的关键字作为变量名,如var int。
- JavaScript的变量名严格区分大小写,如UserName与username代表两个不同的变量。
9.2、变量的声明
var 变量名;
var sales;
var hits, hot, NEWS;
var room_101, room102;
var $name, $age;
var unit, room; // 声明变量
var unit = 3; // 为变量赋值
var room = 1001; // 为变量赋值
var fname = 'Tom', age = 12; // 声明变量的同时赋值
在声明变量时,我们也可以省略var关键字,通过赋值的方式声明变量,这种方式称为“隐式声明变量”。
10、函数
10.1、函数的定义
在JavaScript中,函数使用关键字function来定义。
<script type="text/javascript">
function 函数名 ([参数1,参数2,……]){
函数体
}
</script>
function:在声明函数时必须使用的关键字
函数名:创建函数的名称,函数名是唯一的。
参数:外界传递给函数的值,它是可选的,当有多个参数时,各参数用“,”分隔。
函数体:函数定义的主体,专门用于实现特定的功能。
10.2、函数的调用
函数的调用非常简单,只需引用函数名,并传入相应的参数即可。
函数名称(参数1,参数2,……)
10.3、作用域
函数中的变量需要先定义后使用,但这并不意味着定义变量后就可以随时使用。变量需要在它的作用范围内才可以被使用,这个作用范围称为变量的作用域。
全局变量:定义在所有函数之外,作用于整个程序的变量 。
局部变量:定义在函数体之内,作用于函数体的变量。
11、事件和事件的调用
事件是指可以被JavaScript侦测到的交互行为,例如在网页中滑动、点击鼠标,滚动屏幕,敲击键盘等。当发生事件以后,可以利用JavaScript编程来执行一些特定的代码,从而实现网页的交互效果。
11.1、鼠标事件
是指通过鼠标动作触发的事件
11.2、键盘事件
是指通过键盘动作触发的事件,常用于检查用户向页面输入的内容。
11.3、表单事件
是指通过表单触发的事件。
11.4、页面事件
是指通过页面触发的事件。
12、数据类型
12.1、数值型
数字(number)是最基本的数据类型。JavaScript和其他程序设计语言(如C和Java)的不同之处在于它并不区分整型数值和浮点型数值。
整型数据:123
十六进制:0x5C
八进制:023
浮点型数据:3.11(即小数)
12.2、字符串型
字符串(string)是由Unicode字符、数字、标点符号等组成的序列,它是JavaScript用来表示文本的数据类型。
'name="myname"‘
"You can call me'Tom'!"
12.3、布尔型
数值型数据类型和字符串型数据类型的值有无穷多个,但布尔型数据类型只有两个值,分别由“true”和“false”表示。
12.4、空型
空型(Null)用于表示一个不存在的或无效的对象与地址,它的取值只有一个null。并且由于JavaScript对大小写字母书写要求严格,因此变量的值只有是小写的null时才表示空型。
12.5、未定义型
未定义型(Undefined)用于声明的变量还未被初始化时,变量的默认值为undefined。与null不同的是,undefined表示没有为变量设置值,而null则表示变量(对象或地址)不存在或无效。
12.6、数据类型的转换
12.6.1、隐式类型转换
是指程序运行时,系统会根据当前的需要,自动将数据从一种类型转换为另一种类型。
<script type="text/jscript">
var age=prompt("请输入年龄:","0");//输入年龄数值
if(age<=0)//判断输入的年龄值是否小于0,age转换为数值型
{
alert("您输入的年龄不合法");
}
else{
alert("您的年龄为"+age+"岁");
}
</script>
12.6.2、显式类型转换
显式类型转换和隐式类型转换相对,此转换过程需要手动转换到目标类型。
<script type="text/jscript">
var age=prompt("请输入年龄:","0");//输入年龄数值
if(age<=0)//判断输入的年龄值是否小于0,age转换为数值型
{
alert("您输入的年龄不合法");
}
else{
alert("您的年龄为"+age+"岁");
}
</script>
12.7、数组
在JavaScript中,使用内置对象类Array可以创建数组对象。
12.7.1、数组的定义
var arrayname=new Array();
var arrayname=new Array(n);
var arrayname=new Array(元素1,元素2,元素3,...);
//“new Array()”创建数组
var arr1 = new Array(); // 空数组
var arr2 = new Array('苹果', '橘子', '香蕉', '桃子'); // 含有4个元素
// 使用“[]”字面量(字面量指固定值的表示方法,例如数字、字符串)来创建数组
var arr1 = []; // 空数组
var arr2 = ['苹果', '橘子', '香蕉', '桃子']; // 含有4个元素
12.7.1、数组的访问
在数组中,每个元素都有索引(或称为下标),数组中的元素使用索引来进行访问。数组中的索引是一个数字,从 0 开始。
var arr = ['苹果', '橘子', '香蕉', '桃子'];
document.writeln(arr[0]); // 输出结果:苹果
document.writeln(arr[1]); // 输出结果:橘子
document.writeln(arr[2]); // 输出结果:香蕉
document.writeln(arr[3]); // 输出结果:桃子
document.writeln(arr[4]); // 输出结果:undefined
在实际开发中,经常需要对数组进行遍历,也就是将数组中的元素全部访问一遍,这时 可以利用 for 循环来实现,在 for 循环中让索引从 0 开始自增。
var arr = [80, 75, 69, 95, 92, 88, 76];
var sum = 0;
for (var i = 0; i < 7; i++) {
sum += arr[i]; // 累加求和
}
var avg = sum / 7; // 计算平均分
console.log(avg.toFixed(2)); // 输出结果:82.14
13、运算符
是程序执行特定算术或逻辑操作的符号,用于执行程序代码运算。JavaScript中的运算符主要包括算数运算符、比较运算符、赋值运算符、逻辑运算符和条件运算符五种。
13.1、算术运算符
13.2、比较运算符
13.3、赋值运算符
13.4、逻辑运算符
13.5、条件运算符
是JavaScript中的一种特殊的三目运算符,其语法格式如下:
操作数?结果1:结果2
13.5、优先级
14、条件语句
就是对语句中不同条件的值进行判断,进而根据不同的条件执行不同的语句。条件语句主要有两类:一类是if判断语句;另一类是switch多分支语句。
14.1、if语句
if(执行条件1){
执行语句1
}
else if(执行条件2){
执行语句2
}
else if(执行条件3){
执行语句3
}
......
14.2、switch 语句
switch (表达式){
case 目标值1:
执行语句1
break;
case 目标值2:
执行语句2
break;
......
case 目标值n:
执行语句n
break;
default:
执行语句n+1
break;
}
15、循环控制语句
15.1、While循环语句
while(循环条件){
循环体语句;
}
15.2、do…While循环语句
do {
循环体语句;
} while(循环条件);
15.3、for循环语句
for(① ; ② ; ③){
④
}
第一步,执行①
第二步,执行②,如果判断结果为true,执行第三步,如果判断结果为false,执行第五步
第三步,执行④
第四步,执行③,然后重复执行第二步
第五步,退出循环
用①表示初始化表达式、②表示循环条件、③表示操作表达式、④表示循环体,通过序号来具体分析for循环的执行流程。
16、跳转语句
用于实现循环执行过程中程序流程的跳转,在JavaScript中,跳转语句包括break语句和continue语句。
16.1、break语句
16.2、continue语句
17、BOM
(Browser Object Model)是浏览器对象模型,它提供了一系列对象用于与浏览器窗口进行交互。
17.1、window(窗口)
17.2、screen(屏幕)
//获取屏幕分辨率
var width = screen.width;
var height = screen.height;
//判断屏幕分辨率
if(width<800 || height<600){
alert("您的屏幕分辨率不足800*600,不适合浏览本页面");
}