【前端教程】JavaScript 基础总结
JavaScript 的三种使用方式
- 内部引入（常用）
- 外部引入（一个 js 文件可以被多个页面共同使用）
- 行内（少用）
区别：
- 内部引入只能够使用单页面
- 外部引入可以应用到多个页面
- 行内是直接在 HTML 标签内写（少用）
JavaScript 执行顺序
HTML 代码是按照从上到下进行解释的。如果 JS 获取到网页中还没有进行解释的内容，就会出现 JS DOM 堵塞。
解决 JS 堵塞的方式有两种：
- 将 JS 代码写在网页的最下面
- 使用
window.onload（网页加载完毕执行）
JS 错误处理：
- JS 代码一旦发生错误，错误后的代码将不会执行
- 但不会影响发生错误前的代码执行
常用输出方法
alert("111"); // 警告框
prompt("请输入你的名称", "王菲"); // 提示对话框
console.log(value); // 用来进行调试，只能够在浏览器中进行调试
document.write("内容可以是普通文字和html代码，css样式");
调试方法
- 使用
alert()去打印变量的值进行缩小范围调试 - 在浏览器中点击 F12 看错误信息
变量与数据类型
- JS 中变量都是弱类型的，不管声明什么数据类型都使用
var进行声明 - 使用
typeof关键字可以查看变量类型
强类型 vs 弱类型：
- 声明的类型确定死就是强类型
- 声明的类型不确定就是弱类型
特殊值：
- 如果运算结果不是数字，也不是字符串，就得到
NaN（不是数字）
JS 中的 6 种数据类型
- number：所有的数字都属于 number，不管小数还是整数
- boolean：
true或false - string：可以使用
""和''进行声明，但不要混着用 - null：代表空
- undefined：声明了变量未赋值的空
- Object：所有引用数据类型的统称，包含元素节点，其他类型
浏览器选择
推荐使用谷歌（调试方便）或火狐浏览器（调试提示是中文的）
函数（方法）
函数是将具有特定功能的代码块封装为一个函数。JS 的函数分为系统函数和自定义函数。
自定义函数
定义函数语法
function 函数名(参数列表) {
// 函数体
}
调用时直接使用函数名。
函数表达式语法
var 变量名 = function(参数列表) {
// 函数体
}
调用时使用变量名。
注意：
- 不管有没有声明返回值，都可以返回，也可以不返回
- 不管定义没有定义参数，都可以传参，也可以不传参
类型转换
Number(参数); // 转为数字类型
Boolean(参数); // 转为 Boolean 类型
需要转型的内容.toString(); // 转为字符串类型
参数
- 形参：只是声明，没有具体的值，值需要通过调用时传入
- 实参：具体传入的内容
实用函数
isNaN(内容); // 判断是不是非数值
arguments; // 参数过多时获取参数列表（返回数组形式）
数组
JS 中的数组创建使用 []，下标从 0 开始。由于 JS 是弱类型语言，数组可以放入任何类型。
创建数组的三种方式
- 隐式方式创建数组
var b = ['11', 22, '你好', ['大家好', 11]];
- 使用构造函数创建数组
var b = new Array('你好', 11, '快开学啦!');
- 使用下标索引给数组赋值
var v = new Array(2); // 数组的默认长度为2
v[0] = '你好很好';
v[1] = 11;
v[2] = '快开学啦';
数组遍历
- for 循环
for(var i = 0; i < v.length; i++) {
document.write(v[i] + "<br>");
}
- for…in
for(var i in v) {
document.write(i + "<br>");
}
- for…of
for(var i of v) {
document.write(i + "<br>");
}
二维数组
var v = [["张三","李四"], ["王五","马六"], ["秦叔宝","尉迟恭"]];// 遍历二维数组
for(var i of erwei) {
for(var j of i) {
document.write(j + "<br>");
}
}
对象
创建对象的两种方式
- 直接创建
var v = {'bianhao':1, 'name':'香蕉', 'price':3, 'num':3};
- 使用 new 创建
var v1 = new Object();
v1.bianhao = 2;
v1.name = '橘子';
v1.price = 4;
v1.num = 2;
对象方法
v1.gongneng = function() {
alert(内容);
}
访问对象属性和方法
对象名称['属性的键'] 或 对象名称.属性的键
修改对象属性
v["name"] = "王五"; 或 v.name = "王五";
删除对象属性
delete 对象的属性名;
遍历对象
for(var i in a) {
document.write(a[i]);
}
构造函数
JS 的构造函数和普通函数创建类似，主要的区别在于 JS 构造方法用于创建对象。
Math 对象
Math.abs(e); // 取 e 的绝对值
Math.ceil(e); // 向上取整
Math.floor(e); // 向下取整
Math.PI; // 圆周率
Math.pow(a, b); // 得到 a 的 b 次方
Math.sqrt(e); // 得到 e 的平方根
Math.random(); // 得到 0-1 之间的随机数
Date 对象
创建 Date 对象
var dt = new Date(); // 当前时间
var dt1 = new Date("1999-11-11"); // 指定时间
var dt2 = new Date("2003/08/22"); // 指定时间
var dt3 = new Date(2008, 7, 11); // 月份需要+1
var dt4 = Date.now(); // 当前时间的毫秒数
常用方法
getYear(); // 得到年份（需要加1900）
getFullYear(); // 直接得到年份
getMonth(); // 月份（记得+1）
getDate(); // 获取日
getDay(); // 周几（0-6，0代表周日）
getHours(); // 小时
getMinutes(); // 分钟
getSeconds(); // 秒
toDateString(); // 英文格式的日期
toLocalString(); // 数字格式的日期
toTimeString(); // 只有时间，没有年月日
valueOf(); // 将时间转为毫秒数
new Date(毫秒); // 将毫秒数转为时间
三目表达式
xiaoshi > 12 ? panduan = "下午" : panduan = "上午";
var month1 = month > 10 ? (month + 1) : "0" + (month + 1);
定时器
setInterval(code, millisec); // 周期性执行
clearInterval(); // 清除 setInterval
setTimeout(); // 只执行一次
String 对象
声明方式
- 直接声明
var str = "123"; // string 类型
- 构造器声明
var str1 = new String("你好"); // 引用类型
字符串特性
字符串具有不可变性：可以通过下标访问，但不能通过下标修改。
常用方法
length; // 字符串长度
charAt(a); // 下标为 a 的字符
concat(a, b, c...); // 连接字符串
indexOf(a); // 返回 a 的第一个位置（未找到返回-1）
lastIndexOf(a); // 从后往前找 a 的位置（未找到返回-1）
replace(a, b); // 用 b 替换 a
slice(a, b); // 截取 a 到 b 的位置
split("a"); // 以 "a" 分割字符串
substr(a, b); // 从 a 截取 b 个字符
事件
onclick; // 点击事件
onmouseover; // 鼠标移入
onmouseout; // 鼠标移出
onfocus(); // 获取焦点
onselect(); // 选中文本内容
onblur(); // 失去焦点
onchange(); // 内容改变
onload(); // 网页加载完毕
onunload(); // 网页刷新或关闭
(); // 网页刷新或关闭
onkeyup(); // 键盘松开
事件绑定方式
- 直接在元素上写属性事件
<input type="button" value="计算结果" onclick="sure()" id="btn1" />
- 使用 JS 代码动态赋值事件
var btn1 = document.getElementById("btn1");
btn1.onclick = function() {
alert("123");
}