一、学习路线
二、JavaScript简介
- JavaScript是一种脚本语言,可以直接嵌入HTML页面之中
- JavaScript特点:解释性、嵌套在HTML中、弱数据类型、跨平台、基于对象、基于事件驱动
三、JavaScript使用形式
- 3.1 行内JavaScript脚本
- 在HTML中嵌入JavaScript脚本
<body>
<h1>校园评选活动</h1>
<img src="images/girl1.jpg" onclick="alert('你选择了一号种子选手')"/>
<img src="images/girl2.jpg" onclick="alert('你选择了二号种子选手')"/>
<img src="images/girl3.jpg" onclick="alert('你选择了三号种子选手')"/>
<a href="javascript:alert('请等待评选结果,谢谢');">查看评选结果</a>
</body>
- 3.2 内部JavaScript脚本
- 将这些JavaScript脚本提取出来统一放在
<script></script>标签
中 <script>标签
位于<head>或<body>标签
内
- 将这些JavaScript脚本提取出来统一放在
<head>
<script type="text/javascript">
alert("head中的JavaScript");
</script>
</head>
<body>
<script type="text/javascript">
alert("body中的JavaScript");
</script>
</body>
- 3.3 外部JavaScript脚本
- 将JavaScript脚本以单独文件进行存放,实现JavaScript脚本与HTML代码彻底进行分离
- 在HTML页面中通过
// test.js文件
alert("外部JavaScript脚本,导入成功。");
//html文件
<script type="text/javascript" src="js/test.js"></script>
四、基本语法
- 4.1 标识符、关键字
- 4.2 数据类型
- 在JavaScript中,变量的类型可以改变,但某一时刻的类型是确定的。
- 常见的数据类型有String、Boolean、Array、Number和Undefinded等类型。
- 4.3 变量
- 4.3.1 变量的定义
- 在使用变量之前,可以通过关键字var对变量进行声明
- 语法:
var 变量1[, 变量2, ...];
- var是定义变量的关键字
- 多个变量可以一起定义,变量名之间用逗号隔开
- 4.3.2 变量的类型
- JavaScript中的变量是弱数据类型
- 在声明变量时不需要指明变量的数据类型,通过关键字var进行声明;
- 在变量的使用过程中,变量的类型可以动态改变,类型由所赋值的类型来确定。
- 通过typeof运算符或typeof()函数来获得变量的当前数据类型。
- 4.3.3 变量的类型作用域
- (一)全局变量: 全局变量是指定义在函数之外的变量或者未定义而直接使用的变量
- 注:未定义的变量直接赋值时,浏览器会将变量定义为全局变量,而未定义的变量直接使用时,会抛出Undefined错误
- (二)局部变量: 局部变量是指在函数内部声明变量,仅对当前函数体有效。
- (一)全局变量: 全局变量是指定义在函数之外的变量或者未定义而直接使用的变量
- 4.3.1 变量的定义
五、运算符
- 5.1 赋值运算符: =
- 5.2 算术运算符:+ - * / % ++ –
- 5.3 比较运算符:> >= < <= != == !== ===
- = =与= = =的区别在于:
- = = 支持自动类型转换,只要前后两个变量的值相同就返回true,而忽略数据类型的比较
- = = = 需要两个变量的值相同并且数据类型一致时才返回true
- = =与= = =的区别在于:
- 5.4 逻辑运算符:&& || !
- 5.5 三元运算符:expression ? value1 : value2;
六、流程控制
- 6.1 分支结构
- 6.1.1 if语句
- 6.1.2 switch语句
- 6.1.1 if语句
- 6.2 循环结构
- 6.2.1 while 循环
- 6.2.2 do while 循环
- 6.2.3 for 循环
- 6.2.4 for in 循环
- for in循环是JavaScript提供的一种特殊循环;可以对字符串、数组、对象集合、对象属性等进行遍历
for (property in object){
statement;
}
1、object表示字符串、数组、对象、对象集合
2、property表示对象的属性名或元素的下标索引
3、获取对象(或数组)中的属性(或元素)时,可以使用object[property]格式
- 6.3 转移语句
- 6.3.1 break 语句
- 6.3.2 continue 语句
- 6.3.3 return 语句
- 6.3.4 with 语句
七、函数
- 函数是一组延迟动作集的定义,可以通过事件触发或在其他脚本中进行调用
- 在JavaScript中,函数可分为预定义函数和用户自定义函数。
- 7.1 预定义函数
- 7.1.1 parseInt() 函数
parseInt(string,[radix])
- parseInt()函数用于从解析字符串,从中返回一个整数
- 当字符串中存在除了数字、符号、小数点和指数符号以外的字符时,parseInt()函数就停止转换,返回已有的结果
- 当第一个字符就不能转换时,函数将返回“NaN”(即Not a Number,不是一个数字)。
- 7.1.2 parsefloat()函数
parseFloat(string)
- parseFloat()函数用于解析字符串,从中返回一个浮点数。
- 7.1.3 isNaN() 函数
isNaN(value)
- isNaN()函数用于检查其参数是否是一个非数字值。
- 7.1.4 eval()函数
eval(string)
- val()函数用于将JavaScript中的字符串作为脚本代码来执行
- 当参数string 时一个表达式时,eval()函数将执行表达式,并返回计算结果
- 7.1.5 对话框
- alert()函数用于弹出一个提示对话框
- confirm()函数用于弹出一个确认对话框,在确认对话框中,点击“确定”时返回true,点击“取消”时返回false
- prompt()用于接收用户输入的输入框
- 7.1.1 parseInt() 函数
- 7.2 自定义函数
- function 是定义函数的关键字
- funcNam 表示函数的名称
- parameters 参数可选,当提供多个参数是参数之间使用逗号隔开
- statements 表示函数体,实现函数功能的脚本
- 7.2.1 命名函数
- 函数是由函数定义和函数调用两部分组成。在使用函数时,应先定义函数,然后再进行调用。
function funcName([parameters]){
statementes;
[return expression];
}
- 7.2.2 匿名函数
- 匿名函数,是网页前端设计者经常使用的一种函数形式,通过表达式的形式来定义一个函数。
- 匿名函数的定义格式与命名函数基本相同,只是没有提供函数的名称,且在函数结束位置以分号(;)结束。
- 由于没有函数名字,所以需要使用变量对匿名函数进行接收,方便后面函数的调用。
function ([parameters]){
statementes;
[return expression];
};
- 7.2.3 对象函数
- JavaScript还提供了Function类,用于定义函数
- Function是用来定义函数的关键字,首字母必须大写
var funcName=new Function([parameters],statements;);
- 7.2.4 自调用函数
- 函数本身不会自动执行,只有调用时才会被执行。
- 在JavaScript中,提供了一种自调用函数,将函数的定义与调用一并实现
(function([parameters]){
statementes;
[return 表达式];
}) ([params]);