从0到1：JavaScript快速上手
基础
1、动态页面和静态页面
- 区别在于是否与服务器进行数据交互
2、JavaScript引入方式
-
HTML中引入JavaScript，一般有3种方式：
-
外部JavaScript。
- 使用
script标签引入JavaScript
<!DOCTPYE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--1.在head中引入--> <script src="index.js"></script> </head> <body> <!--2.在body中引入--> <script src="index.js"></script> </body> </html> - 使用
-
-
内部JavaScript。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!-- 在 head 中引入 js --> <!-- <script type="text/javascript"> 完整形式 --> <script> // ... </script> </head> <body> <script> // ... </script> </body> </html>
-
元素事件JavaScript。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="button" value="一个小按钮" onclick="alert('元素事件属性中调用JS')" /> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function alertMes() { alert("一个测试"); } </script> </head> <body> <input type="button" value="按钮" onclick="alertMes()" /> </body> </html>
3、JS的小例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload = function()
{
alert("Welcome");
}
window.onbeforeunload = function(event)
{
// alert("test");
// 功能不能实现...
console.log("hahaha");
var e=event || window.event;
e.returnValue="see you again";
}
</script>
</head>
</html>
4、语法
4.1关键字
| JavaScript | |||||
|---|---|---|---|---|---|
| null | var | catch | for switch | void | continue |
| function | this | while | default | if | throw |
| with | delete | in | true | do | try |
| instanceof | break | else | new | typeof | false |
| case |
| ECMA-262 | |||||
|---|---|---|---|---|---|
| abstract | enum | int | short | boolean | export |
| interface | static | byte | extends | long | super |
| char | final | native | synchronized | class | float |
| package | throws | const | goto | private | transient |
| debugger | implement | protected | volatile | double | import |
| public |
| 浏览器 | |||||
|---|---|---|---|---|---|
| alert | eval | location | open | array | focus |
| math | outerHeight | blur | funtion | name | parent |
| boolean | history | navigator | parseFloat | date | image |
| number | regExp | document | isNaN | object | status |
| escape | length | onLoad | string | ||
4.2 基本数据类型
- 数字
- 不区分“整型”和“浮点型”
- 字符串
- 用单引号或双引号括起来的。
- 布尔值
- true
- false
- 未定义值
- 用
var定义但是没有赋值的变量。 - 用
undefined表示。
- 用
- 空值
- 空值： null
- null: 表示系统没有给这个变量分配内存空间
4.3 引用数据类型
4.4 运算符
-
算数运算符
- 加法运算符
- 字符串 + 数字 = 字符串
- 加法运算符
赋值运算符
比较运算符
-
逻辑运算符
-
逻辑运算符 &&与 ` ` 或 !非
-
-
条件运算符
var a = 条件 ？ 表达式1 : 表达式2
4.5 类型转换
- 隐式类型转换
- JavaScript自动进行的类型转换
- 显示类型转化
- “字符串” 转换为 “数字”
-
Number()把“数字型字符串”转换为数字。 -
parseInt()parseFloat()提取“首字母为数字的任意字符串”中的数字
-
- “数字” 转换为 “字符串”
- 与空字符串相加
toString()
- “字符串” 转换为 “数字”
4.6 转义字符
-
\'英文单引号 -
\"英文双引号 -
\n换行符- 在
document.write()中换行，用<br/> - 在
alert()中换行， 用\n
- 在
4.7流程控制
- 选择结构
if - 选择结构
switch - 循环结构
whiledo...whilefor
4.8 函数
- 没有返回值的函数
function func_name(arg1, arg2)
{
}
- 有返回值的函数
function func_name(arg1, arg2)
{
return 111
}
4.9 全局变量和局部变量
- 全局变量一般在主程序中定义，其有效范围是从定义开始，一直到整个程序结束。也就是全局变量在任何地方都可以使用
- 局部变量一般在函数中定义，其有效范围只限于在函数中。也就是局部变量只能在函数中使用，函数之外是不能使用函数中定义的变量的
4.10 函数调用
调用方式：
-
直接调用
- 一般用于“没有返回值的函数”
-
在表达式中调用
- 一般用于“有返回值的函数”，函数的返回值参与表达式的计算。
-
在超链接中调用
在a元素的
href属性中用javascrupt:func_name的形式来调用。当用户点击超链接时，就会调用该函数
<a href="javascript: func_name"></a><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>在超链接中调用函数</title> <script> function expressMes () { alert ("在超链接中调用函数") } </script> </head> <body> <a href="javascript:expressMes ()">测试</a> </body> </html>
在事件中调用
4.11 嵌套函数
- 在一个函数的内部定义另外一个函数
- 在内部定义的函数只能在内部调用，如果在外部调用，就会出错
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function func(a)
{
//嵌套函数定义，计算平方值的函数
function multi(x)
{
return x * x
}
var m = 1
for (var i = 1; i <=multi(a); i++)
{
m = m * i
}
return m
}
// 调用函数
var sum = func(2) + func(3)
document.write(sum)
</script>
</head>
<body>
</body>
</html>
4.12内置函数
| 函数 | 说明 |
|---|---|
parseInt() |
提取字符串中的数字，只限提取整数 |
paserFloat() |
提取字符串中的数字，可以提取小数 |
isFinite() |
判断某一个数是否有一个有限数值 |
isNaN() |
判断一个数是否是NaN值 |
escape() |
对字符串进行编码 |
unescape() |
对字符串进行解码 |
eval() |
把y一个字符串当做一个表达式来执行 |
5 符串对象
5.1 字符串对象：String
- 获取字符串长度
string.length
- 大小写转换
string.toLowerCase()string.toUpperCase()
- 获取某一个字符
string.charAt(n)
- 截取字符串
string.substring(start, end)- 截取的范围是
[start, end)
- 替换字符串
string.replace(源字符串， 替换字符串)string.replace(正则表达式， 替换字符串)
- 分割字符串
string.split('分隔符')- 分割符可以是一个字符、多个字符或一个正则表达式
- 分割符不作为返回的数组元素的一部分
- 检索字符串的位置
- 找出“某个指定字符串”在字符串中“首次出现”的下标位置
string.indexOf('指定字符串')match()search()
- 方法可以找出“某个指定字符串”在字符串中“最后出现”的下标位置
string.lastIndexOf('指定字符串')
- 如果字符串中不包含“指定字符串” 返回
-1 - 支持单个字符检索
- 找出“某个指定字符串”在字符串中“首次出现”的下标位置
5.2 组对象
- 创建
var arrayName = new Array(arg1, arg2, arg3) // 不推荐var arrayName = [arg1, arg2, arg3] //推荐
- 增加新的元素
ary[i] = arg_iary.push(arg_i, i)
- 获取数组的长度
arrayName.length
- 截取数组的某部分
arrayName.slice(start, end)- 取值范围是
[start, end)
- 添加数组元素
- 在数组开头添加元素
arrayName.unshift(arg1, arg2, arg3)
- 在数组结尾添加元素
arrayName.push(arg1, arg2, arg3)
- 在数组开头添加元素
- 删除数组的元素
- 删除数组中第一个元素
array.Name.shift()-
shift()删除数组中的第一个元素，并且可以得到一个新的数组
- 删除数组中最后一个元素
arrayName.pop()-
pop()删除数组的最后一个元素，并且可以得到一个新数组
- 删除数组中第一个元素
- 比较数组元素大小（排序）
arrayName.sort(排序函数名)- “函数名”是定义数组元素排序的函数的名称。
- 颠倒数组顺序
arrayName.reverse()
- 将数组元素拼接成字符串
arrayName.join('连接符')
6. 时间对象
6.1 创建对象
var oDate = new Date()
6.2 获取时间的方法
| 方法 | 说明 |
|---|---|
getFullYear() |
获取年份，取值为4位数字 |
getMonth() |
获取月份，取值为0（一月）到11（十二月）之间的整数 |
getDate() |
获取日数，取值为1-31的整数 |
getHours() |
获取小时数，取值为0-23的整数 |
getMinutes() |
获取分钟数，取值为0-59的整数 |
getSeconds() |
获取秒数，取值为0-59的整数 |
-
获取年月日
var myDate = new Date() var year = myDate.getFullYear() var month = myDate.getMonth() + 1 // 返回值范围在0-11 var day = myDate.getDate()
-
获取时分秒
var myDate = new Date() var mHour = myDate.getHours() var mMinutes = myDate.getMinutes() var mSeconds = myDate.getSeconds()
-
获取星期几
var mDate = new Date() mDate.getDay()
-
6.3 设置时间的方法
方法 说明 setFullYear()可以设置年、月、日 setMonth()可以设置月、日 setDate()可以设置日 setHours()可以设置时、分、秒、毫秒 setMinutes()可以设置分、秒、毫秒 setSeconds()可以设置秒、毫秒 -
设置年月日
var mDate = new Date() mDate.setYears(1999, 11, 8) //设置年、月、日 1999年12月8日 // year 是必选参数 4位整数 // month 是可选参数 0-11 // day 是可选参数 1-31 mDate.setMonth(11, 8) // 设置月、日 mDate.setDate(8) // 设置日期
-
设置时分秒
var mDate = new Date() mDate.setHours(23, 14, 34, 299) //设置 时、分、秒、毫米 // hour 是必选参数，0-23 // min 是可选参数，0-59 // sec 是可选参数，0-59 // millisec 是可选参数，0-999 mDate.setMinutes(14,34,299) //设置 分，秒，毫秒 mDate.setSeconds(34, 299) // 设置秒，毫秒
7. 数学对象
- 属性
| 属性 | 说明 |
|---|---|
| PI | 圆周率 |
| LN2 | 2的自然对数 |
| LN10 | 10的自然对数 |
| LOG2E | 以2为底，e的对数 |
| LOG10E | 以10为底，e的对数 |
| SORT2 | 2的平方根 |
| SORT1_2 | 2的平方根的倒数 |
-
方法
方法 说明 max(a,b,...)返回一组数中的最大值 min(a,b,...)返回一组数中的最小值 sin(x)正弦 cos(x)余弦 tan(x)正切 asin(x)反正切 acos(x)反余切 atan(x)反正切 atan2(x)反正切 floor(x)向下取整 ceil(x)向上取整 random()生成随机数 abs(x)返回x的绝对值 sqrt(x)返回x的平方根 log(x)返回x的自然对数（底为e) pow(x,y)返回x的y次幂 exp(x)返回e的指数
7.1 最大值与最小值
Math.max()a,b,c,...,n)
Math.min()a,b,c,...,n)
7.2 取整
Math.floor(x) // 向下取整
Math.ceil(x) // 向上取整
7.3 三角函数
Math.sin(x)其中x表示角度值，用弧度来表示。常用形式为度数 * Math.PI / 180
atan2(x)和atan(x)是不一样的，atan2(x)能够精确判断角度对应哪一个角，而atan(x)不能。在高级动画开发中，使用atan2(x)更多。
7.4 生成随机数
Math.random()
//生成0-1，但不包含1的随机数
Math.random() * m
//生成0-m, 但不包含m的随机数
Math.random() * m + n
//生成n-'m+n'，但不包含'm + n'的随机数
Math.random() * m - m
// 生成-m - 0 的随机数。
Math.floor(Math.random() * (m + 1))
// 生成0 - m 之间的随机整数
