1、JavaScript 入门
1.1、介绍
JavaScript 是一种具有面向对象能力的、解释型的程序设计语言，它的主要目的是，验证发往服务器端的数据、增加 Web 互动、加强用户体验度等
1.2、JavaScript 的组成
-
ECMAScript（基础语法）
-
JavaScript 的核心语法，ECMAScript 描述了该语言的语法和基本对象
-
-
DOM（文档对象模型）
-
描述了处理网页内容的方法和接口
-
-
BOM（浏览器对象模型）
-
描述了与浏览器进行交互的方法和接口
-
1.3、基本用法
-
行内式：js 代码写在标签的内部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button onclick="alert('我是行内式')">按钮</button>
</body>
</html>-
嵌入式：js 代码定义在 script 标签内部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
alert("我是嵌入式！")
</script>
</head>
<body>
</body>
</html>-
外部式：定义单独的 js 文件，通过 script 标签引入
js01.js
alert("我是外部JS!")<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./js01.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
</body>
</html>注意：虽然 js 代码可以放在文档中的任意位置，但因为页面的加载是从上往下依次加载的，所以 js 代码放在 head 部分可能会影响文档的执行，因为 js 代码执行时可能需要某个元素，但这个元素却还没有加载出来。
为解决这一问题，可使用：
$(document).ready(
)1.4、调试方式
1.4.1、alert()
弹出框，最先执行，不推荐做调试使用。
alert("普通的弹出框!")1.4.2、document.write()
用于在页面中写入内容，当页面内容加载完毕之后，再触发 document.write 的执行，会覆盖原页面
document.write("今天天气真好！")1.4.2、console
在控制台中打印信息，推荐使用
console.log("日志");
console.info("信息");
console.error("错误");
console.warn("警告");1.5、变量
定义：
-
声明的同时赋值：
var num = 10;-
先声明后赋值：
var num;
num = 10;-
一行定义多个变量：
var a = 10, b = "abc", c = false;注意：
-
js 是一门弱类型语言，变量的类型由值决定
-
js 变量不赋值存在默认值 undefined
-
变量的作用域提升：把通过 var 定义的变量声明提升到当前作用域的最上面
-
在 js 中，变量的定义可以省略 var 关键字，但是就不存在变量的作用域提升
2、数据类型
2.1、简单数据类型
-
Number（数值型）
-
整数
-
小数
-
NaN（not a number）
-
直接赋值
-
通过运算无法得到一个正确的结果，返回 NaN
-
-
var num1 = 1; // 1
var num2 = 1.2; // 1.2
var num3 = NaN; // NaN
var num4 = 4 / 'a'; // NaN-
String（字符串）
-
通过一对 '' 或者一对 "" 定义
-
可以包含任意个字符
-
如果字符串中出现特殊字符，可以通过转义字符进行转义
-
var str1 = '1'; // 1
var str2 = "你好"; // 你好
var str3 = "\""; // "-
Boolean（布尔型）
-
true
-
false
-
var b1 = true; // true
var b2 = false; // false-
Null（空）
-
直接赋值 null
var n1 = null; // null-
获取不到元素得到 null
-
-
Undefined (未定义)
-
直接赋值 undefined
var u1 = undefined; // undefined-
变量已声明但未赋值就为 undefined
var u2; // undefined-
函数未指定返回值，默认为 undefined
function fn() { console.log("函数"); } console.log(fn()); // undefined -
-
Function（函数型）
function fn() {
console.log("函数");
}2.2、复杂数据类型
-
对象型 {}
-
key : value
-
每个键值对之间使用 , 分隔
-
键与值之间使用 : 分隔
-
value 可以为任意类型的值
-
var obj = {
name: "zhangsan",
age: 18
};3、类型转换
3.1、获取数据类型
方式：
-
typeof 数据
-
typeof(数据)
console.log(typeof 123); // number
console.log(typeof "123"); // string
console.log(typeof false); // boolean
console.log(typeof(null)); // object
console.log(typeof(undefined)); // undefined
function fn() {}
console.log(typeof(fn)); // function
console.log(typeof({})); // object3.2、显示类型转换
任意类型的数据都可以转换为 String、Number和Boolean类型，但对象类型，函数类型不参与类型转换
-
String（相当于在数据的两端添加一对引号）
console.log(String(0)); // 0
console.log(String(123)); // 123
console.log(String(-1.5)); // -1.5
console.log(String(NaN)); // NaN
console.log(String(false)); // false
console.log(String(true)); // true
console.log(String(undefined)); // undefined
console.log(String(null)); // null-
Number
console.log(Number('')); // 0
console.log(Number(' ')); // 0
console.log(Number('123')); // 123
console.log(Number('123abc')); // NaN
console.log(Number(true)); // 1
console.log(Number(false)); // 0
console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN-
Boolean
console.log(Boolean('')); // false
console.log(Boolean(' ')); // true
console.log(Boolean('abc')); // true
console.log(Boolean(0)); // false
console.log(Boolean(123)); // true
console.log(Boolean(-0.123)); // true
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false3.3、隐式类型转换
在进行一些其他操作运算的时候，目的不是为了发生类型转换，而在运算过程中会默认自动发生类型转换，这种类型转换成为隐式类型转换
console.log(1 + false); // 1
console.log(1 + 'a'); // 1a
console.log(false - 'a'); // NaN4、数组（存储多个数据）
4.1、特点：
-
可变长，长度跟随数据的增删动态的改动
-
可以根据索引操作数组中的数据，数组中的索引从 0 开始
-
数组的索引可以跟随数据的改动进行动态修改
-
如果数组存在，索引位置存在，但是没有赋值，默认 undefined
-
js 中的数组中可以存放任意类型的数据
4.2、创建方式：
-
字面量创建数组
var arr1 = [1, 2, 3, 4, 5];
console.log(arr1); // [1, 2, 3, 4, 5]-
new Array() 创建空数组
var arr2 = new Array();
console.log(arr2); // []-
new Array(值1,值2...)
var arr3 = new Array(false, 123, "哈哈", null, undefined);
console.log(arr3); // [false, 123, '哈哈', null, undefined]4.3、数组数据的操作
-
获取数组数据：数组名[索引值]
var arr1 = [1, 2, 3, 4, 5];
console.log(arr1[1]) // 2-
设置数组数据：数组名[索引值] = 值
var arr1 = [1, 2, 3, 4, 5];
arr1[2] = "hehe";
console.log(arr1); //[1, 2, 'hehe', 4, 5]-
修改数组长度
var arr1 = [1, 2, 3, 4, 5];
console.log(arr1.length); // 5
arr1.length = 10;
console.log(arr1.length); // 104.4、数组的遍历
-
普通 for 循环
var arr1 = [1, 2, 3, 4, 5];
for (var i = 0; i < arr1.length; i++){
console.log(arr1[i])
}-
for in
var arr1 = [1, 2, 3, 4, 5];
for (var i in arr1){
console.log(arr1[i])
}-
foreach
var arr1 = [1, 2, 3, 4, 5];
arr1.forEach(function (elem, index) {
console.log(arr1[index]);
})注意：for in 与 foreach 不能对未赋值的索引位置进行遍历
4.5、常用方法
-
push：添加元素到最后
var arr1 = [1, 2, 3, 4, 5];
arr1.push(6);
console.log(arr1); // [1, 2, 3, 4, 5, 6]-
unshift：添加元素到最前
arr1.unshift(0);
console.log(arr1); // [0, 1, 2, 3, 4, 5, 6]-
pop：删除最后一项
arr1.pop();
console.log(arr1); // [0, 1, 2, 3, 4, 5]-
shift：删除第一项
arr1.shift();
console.log(arr1); // [1, 2, 3, 4, 5]-
reverse：数组翻转
console.log(arr1.reverse()); // [5, 4, 3, 2, 1]-
join：数组转成字符串
console.log(arr1.join(', ')); // 5, 4, 3, 2, 1-
indexOf：数组元素索引
console.log(arr1.indexOf(4)); // 1-
slice：截取（切片）数组，原数组不发生变化
-
1个参数：从起始索引开始，默认截取到最后
-
2个参数：从起始索引开始截取，到结束索引，结束索引位置不包含
-
console.log(arr1.slice(2)); // [3, 2, 1]
console.log(arr1.slice(1, 3)); // [4, 3]
console.log(arr1); // [5, 4, 3, 2, 1]-
splice：剪切数组，原数组变化，可以实现前后删除效果
-
1个参数：从起始索引开始，剪切到最后
console.log(arr1.splice(2)); // [3, 2, 1] console.log(arr1); // [5, 4]-
2个参数：从起始索引开始，剪切指定个数
console.log(arr1.splice(1, 3)); // [4, 3, 2] console.log(arr1); // [5, 1]-
3个往上：从起始索引开始，剪切指定个数，替换为之后所有参数
console.log(arr1.splice(1, 3, 7, 8)); // [4, 3, 2] console.log(arr1); // [5, 7, 8, 1] -
-
concat：数组合并
var arr = ["a", "b", "c"];
console.log(arr1.concat(arr)); // [5, 4, 'a', 'b', 'c']5、函数
5.1、函数的定义和调用：
5.1.1、函数声明
定义：
function 函数名(参数列表){
函数体;
return 返回值;
}function fn(name){
console.log(name);
}调用：
-
函数名(实参)：
fn("张三");-
把函数声明转为函数表达式进行自调用
! function fn1() {
console.log("函数声明1");
}();
~ function fn2() {
console.log("函数声明2");
}();
- function fn3() {
console.log("函数声明3");
}();
+ function fn4() {
console.log("函数声明4");
}();5.1.2、函数表达式
定义：
var 变量名 = function 函数名(形参){
函数体;
};var fns = function() {
console.log("函数表达式")
}调用：
-
通过变量名：
fns();-
自调用：
var fns = function() {
console.log("函数表达式")
}();5.1.3、匿名函数
(function() {
console.log("匿名函数");
})();注意：
-
在 js 中所有的函数都存在返回值，没定义返回值，默认为 undefined
-
形参与实参可以不一一对应，如果没有对应的实参，形参的默认值为 undefined
-
函数表达式中的函数名一般省略不写，不可用来调用函数，只有在发生递归的时候用
5.2、函数的传递
5.2.1、值传递
var num = 12;
function change(n) {
n = 30;
}
change(num);
console.log(num); // 125.2.2、引用传递
var obj = {name: "tom"};
function paramter(o) {
o.name = 2;
}
paramter(obj);
console.log(obj.name); // 25.2.3、间接调用
var obj = {
name : "zhangsan",
work : function(){
console.log("上班摸鱼真舒服！！！");
}
};
console.log(obj.name)
console.log(obj.work);
//调用
obj.work();6、内置对象
6.1、String
-
charAt()：返回指定位置处的字符
-
indexOf()：返回指定子字符串的位置，从左到右。找不到返回 -1
-
substr(m,n)：返回给定字符串中从 m 位置开始，取 n 个字符，如果参数 n 省略，则意味着取到字符串末尾。
-
substring(m,n)：返回给定字符串中从 m 位置开始，到 n 位置结束，如果参数 n 省略，则意味着取到字符串末尾。
-
toLowerCase()：将字符串中的字符全部转化成小写。
-
toUpperCase()：将字符串中的字符全部转化成大写。
-
length 属性，不是方法，返回字符串的长度
var str = "my name is YangMaoLin";
console.log(str.charAt(5)); // m
console.log(str.indexOf('y')); // 1
console.log(str.indexOf("x")); // -1
console.log(str.substr(3, 4)); // name
console.log(str.substr(3)); // name is YangMaoLin
console.log(str.substring(3, 7)); // name
console.log(str.substring(3)); // name is YangMaoLin
console.log(str.toLowerCase()); // my name is yangmaolin
console.log(str.toUpperCase()); // MY NAME IS YANGMAOLIN
console.log(str.length); // 216.2、Math
-
Math.random()：随机数
-
Math.ceil()：向上取整，大于最大整数
-
Math.floor()：向小取整，小于最小整数 String
var num = Math.random();
console.log(num); // 0.5201515675056099
console.log(Math.ceil(num)); // 1
console.log(Math.floor(num)); // 06.3、Date
-
获取日期：
-
getFullYear()：获取年
-
getMonth()：获取月（0 ~ 11）
-
getDate()：获取日
-
getDay()：获取星期
-
getHours()：获取时
-
getMinutes()：获取分
-
getSeconds()：获取秒
-
getTime()：获取时间戳
-
var date = new Date();
console.log(date.getFullYear()); // 2021
console.log(date.getMonth()); // 7
console.log(date.getDate()); // 27
console.log(date.getDay()); // 5
console.log(date.getHours()); // 10
console.log(date.getMinutes()); // 45
console.log(date.getSeconds()); // 58
console.log(date.getTime()); // 1630032395744-
设置日期：
-
setYear()：设置年
-
setMonth()：设置月（0 ~ 11）
-
setDate()：设置日
-
setHours()：设置时
-
setMinutes()：设置分
-
setSeconds()：设置秒
-
toLoacaleString()：转换成本地时间字符串
-
var date;
date.setFullYear(2001);
date.setMonth(7);
date.setDate(28);
date.setHours(12);
date.setMinutes(12);
date.setSeconds(12);
console.log(date); // Tue Aug 28 2001 12:12:12 GMT+0800 (中国标准时间)
console.log(date.toLocaleDateString()); // 2001/8/287、对象
7.1、Object
7.1.1、特点：
-
所有的键默认都是字符串 ""
-
如果 key 符合标识符的命名规范，可以省略 ""
7.1.2、创建
-
字面量
var stu = {
name : "张三",
gender : "男",
age : 18,
eat : [
{
type : "fruit",
name : "苹果"
},
{
type : "vegetables",
name : "青菜"
}
],
car : null
}-
new
var cla = new Object();7.1.3、对象属性的操作
-
获取 value
console.log(stu.name);
console.log(stu["eat"]);-
设置 value
cla.name = "大数据";
cla.number = "205";
cla.count = 60;7.2、JSON 对象
7.2.1、特点
-
JSON 是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率
-
key 都是通过 "" 定义的字符串
-
value 可以存储任意类型
7.2.2、JSON 与 JS 对象的关系
JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串
7.2.3、js 对象与 json 串之间的转化
-
JSON 串转为 js 对象
var jsonStr = '{"name": "John Doe", "age": 18, "address": {"country" : "china", "zip-code": []}}';
var js = JSON.parse(jsonStr);-
js 对象转为 JSON 串
var json = JSON.stringify(js);8、定时器
8.1、延迟执行定时器（只执行一次）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div></div>
<script type="text/javascript">
var div = document.querySelector("div");
setTimeout(function() {
div.innerHTML = "你好！";
}, 3000)
</script>
</body>
</html>8.2、重复执行定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div></div>
<script type="text/javascript">
var div = document.querySelector("div");
var num = setInterval(fn, 500);
var i = 0;
function fn() {
i++;
div.innerHTML = i;
if (i == 10) {
clearInterval(num); // 清除定时器
}
}
</script>
</body>
</html>
扫一扫
658
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
