复习一下JavaScript的基础知识点。
（一）JavaScript引入方式
- 外部JavaScript：HTML代码和JS代码放在不同文件中，在HTML文档中使用script标签引入JS代码，是最理想的引入方式，可提升网站的性能和可维护性。
<!DOCTYPE html> <html> <head> <title></title> <!--在head中引入JS文件--> <script type="text/javascript" src="index.js"></script> </head> <body> <!--在body中引入JS文件--> <script type="text/javascript" src="index.js"></script> </body> </html>
- 内部JavaScript：HTML代码和JS代码在同一个文件中。
<!DOCTYPE html> <html> <head> <title></title> <!--在head中引入--> <script type="text/javascript"> …… </script> </head> <body> <!--在body中引入--> <script type="text/javascript"> …… </script> </body> </html> - 元素事件JavaScript：在元素的事件属性中直接编写JS或调用函数。
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript"> function alertMes() { alert("您点击了按钮2"); } </script> </head> <body> <!--在元素事件中编写JavaScript--> <input type="button" name="btn1" value="按钮1" οnclick="alert('您点击了按钮1')"> <!--在元素事件中调用函数--> <input type="button" name="btn2" value="按钮2" οnclick="alertMes()"> </body> </html>
（二）JavaScript语法
- 常量与变量：需注意的是变量的命名，变量由字母、下划线、$或数字组成，第一个字母必须是“字母、下划线或$”，并且不能是系统关键字和保留字，区分大小写。对于变量的使用，所有JavaScript变量都由var声明。
- 数据类型：在JS中，数据类型分为两种，一种是“基本数据类型”（数字、字符串、布尔值、未定义值和空值），一种是“引用数据类型”（常用的有两种：数组和对象）。
- 运算符：常见的运算符有算数运算符（加法运算符、自增运算符i++/++i、自减运算符i--/--i）、赋值运算符（=、+=、-=、*=、/=）、比较运算符（>、<、>=、<=、==、!=）、逻辑运算符（&&、||、！）、条件运算符（var a=条件?表达式1:表达式2;）。
- 表达式与语句
- 类型转换：隐式类型转换（JS自动进行）、显式类型转换（用代码强制进行转换）。显式类型转换中，字符串转换为数字，可以用Number()，parseInt()，parseFloat()方法；数字转换为字符串，可以用toString()方法（较少使用），或者与空字符串相加。
- 转义字符：\'，\"，\n
- 注释：//单行注释，/*多行注释*/
（三）JavaScript流程控制
- 顺序结构：执行顺序“从上到下，从左到右”。
- 选择结构：if语句，switch语句。
- 循环结构：while语句，do……while语句，for语句。
（四）函数
作用：①减少重复工作；②特定功能。
使用function定义，函数名+形参，return返回值，一般只返回一个值或变量，若有多个值需要返回的，可使用数组存储。
全局变量与局部变量。
函数调用：
- 直接调用
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
//定义函数
function getMes() {
document.write("hello world!");
}
//直接调用函数
getMes();
</script>
</head>
<body>
</body>
</html>- 在表达式中调用
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript"> //定义函数 function addNum(a,b) { var sum = a + b; return sum; } //在表达式中调用函数 var n = addNum(10,20)+100; document.write(n); </script> </head> <body> </body> </html> - 在超链接中调用
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript"> //定义函数 function alertMes() { alert("您点击了超链接"); } </script> </head> <body> <!--在超链接中调用函数--> <a href="javascript:alertMes()">点击弹出提醒框</a> </body> </html> - 在事件中调用
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript"> //定义函数 function alertMes() { alert("您点击了按钮"); } </script> </head> <body> <!--在事件中调用函数--> <input type="button" name="btn" value="按钮事件" οnclick="alertMes()"> </body> </html>
嵌套函数：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
//定义阶乘函数
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>内置函数：
| 函数 | 说明 |
| parseInt() | 提取字符串中的数字，只限提取整数 |
| parseFloat() | 提取字符串中的数字，可以提取小数 |
| isFinite() | 判断一个数是否是一个有限数值 |
| isNaN() | 判断一个数是否是NaN值 |
| escape() | 对字符串进行编码 |
| unescape() | 对字符串进行解码 |
| eval() | 把一个字符串当做一个表达式去执行 |
（五）JavaScript内置对象
（1）字符串对象：String
- 获取字符串长度：使用length属性
- 大小写转换：转小写toLowerCase()，转大写toUpperCase()
- 获取某一个字符：charAt()，下标从0开始
- 截取字符串：substring(start，end)，截取范围为[start，end)，end省略时，start到结尾字符
- 替换字符串：replace(原字符串/正则表达式，替换字符串)，原字符串只替换第一个，正则表达式则替换所有
- 分割字符串：split("分割符")，分割可以是一个/多个字符或一个正则表达式，分割后得到一个数组，split("")无空格可用来分割字符串每一个字符
- 检索字符串的位置：indexOf(指定字符串)返回指定字符串首次出现下标，lastIndexOf(指定字符串)返回最后出现的下标位置，找不到返回-1
（2）数组对象：Array
- 截取数组某部分：slice(start，end)，用法类似substring()
- 在数组开头添加元素：unshift(新元素1，新元素2，…，新元素n)
- 在数组结尾添加元素：push(新元素1，新元素2，…，新元素n)
- 删除数组第一个元素：shift()
- 删除数组最后一个元素：pop()
- 数组大小比较：sort(函数名)
- 数组颠倒顺序：reverse()
- 将数组元素连接成字符串：join("连接符")，连接符默认为英文逗号
（3）日期对象：Date
- 获取年月日时分秒：getFullYear()，getMonth()【返回值为0~11间整数】，getDate()，getHours()，getMinutes()，getSeconds()
- 同样有set方法设置年月日时分秒
- 获取星期几：getDay()，返回0~6，表示星期日至星期六。若需要将数字转换为中文，可以这样写，代码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
var weekday = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var today = new Date();
document.write("今天是"+weekday[today.getDay()]);
</script>
</head>
<body>
</body>
</html>（4）数值对象：Math
Math对象不需要使用new关键字来创造，直接使用属性和方法就好。
- Math.PI：实际开发中，所有角度以“弧度”为单位，故180°应写成Math.PI，360°应写成Math.PI*2，所以推荐写法“度数*Math.PI/180”，即
90*Math.PI/180 //90°- 最大值：Math.max(a,b,…,n);
- 最小值：Math.min(a,b,…,n);
- 向下取整：Math.floor(x);
- 向上取整：Math.ceil(x);
- 生成随机数：Math.random(); random()方法生成0~1之间的一个随机数，范围为[0,1)
| 范围 | 公式 | 举例 |
| 0~m | Math.random()*m | Math.random()*10表示生成0~10之间的随机数 |
| n~m+n | Math.random()*m+n | Math,random*10+8表示生成8~10之间的随机数 |
| -n~m-n | Math.random()*m-n | Math.random*10-8表示生成-8~2之间的随机数 |
| -m~m | Math.random()*m-m | Math.random*10-10表示生成-10~10之间的随机数 |
| 范围 | 公式 |
| 0~任意数 | Math.floor(Math.random()*(m+1)); |
| 1~任意数 | Math.floor(Math.random()*(m+1)+1); |
| 任意数~任意数 | Math.floor(Math.random()*(m-n+1)+n); |
400
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
