js基础01
js版本更新，之前有些语法就是被淘汰了，就是不是很适配的，引入了一些新的语法规则，现在的浏览器都是用的新的规则
javascript历史
诞生：10 天紧急开发（1995）
作者：布兰登・艾奇（Brendan Eich）
公司：网景（Netscape），当年的浏览器霸主
时间：只用了 10 天就写出了第一版
目的：让网页能 “动起来”（表单验证、简单交互），不用依赖服务器
原名：Mocha → LiveScript，为了蹭 Java 热度改名为 JavaScript（和 Java 没有血缘关系，只是名字像）
微软推出了自己的兼容版 JScript，导致网页兼容混乱。
1997 年，欧洲计算机制造商协会 ECMA 统一标准，命名为：
ECMAScript（ES） = JavaScript 的官方标准
我们平时说的 JS 就是 ECMAScript 的实现。
js的引入方式和输出
内部引入
在body标签中写入script标签对
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// js代码编写
</script>
</body>
</html>
行内引入
外部引入
定义外部的js文件，引入的话，就需要在head标签中写
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入外部的js文件 -->
<script src="./test.js"></script>
</head>
javascript输出方式
<script>
console.log("这个是js输出方式");
</script>
运行文件，打开浏览器，点击检查，选择控制台，就能看到输出的信息了
<script>
console.log("这个是js输出方式");
// 在浏览器上弹出一个框，带有信息的
alert("你好")
</script>
变量
js变量的含义
js和python一样，不需要声明变量的类型
let关键字定义变量，以前的var定义的已经过时了
<script>
console.log("这个是js输出方式");
// 定义多个变量的时候，逗号隔开
let a, b
a = 10
b = 20
let c = 30
</script>
规范：
-
严格区分大小写
-
可以出现字母，数字，下划线，但是不能以数字开头，也不能是纯数字
数据类型
js有2种数据类型，基本数据类型和引用数据类型
基本数据类型：简单的数据段，数字(number) 字符串(string) 布尔，null,undefained
引用数据类型：多个值构成的对象，包含对象数据类型(数组arry,对象object),函数这些
基本数据类型
数字(number)
<script>
console.log("这个是js输出方式");
// 数字
let a = 10
// 判断是什么类型的
console.log(typeof (a));
</script>
字符串(string)
let s1 = "123"
布尔(boolean)
布尔类型的对是小写的true，而不是首字母大写的True,会识别成一个变量的
let b1 = "true"
空值(null)
就是定义了变量，赋值为null
let c1 = null
空值(undefine)
定义了变量，但是没有赋值的，就是未定义类型
let d1
引用数据类型
数组(arr)
let arr = [123, 12]
<!-- 对数组进行取值，也是通过索引，不支持负数索引 -->
console.log(arr[1]);
<!-- 输出数组的长度 -->
console.log(arr.length);
对象(object)
类似py中的字典
let d1 = {
name: "zq",
age: 18
}
<!-- 对象.key来取值 -->
console.log(d1.name);
运算符
跟python类似
字符串拼接
let a = 10
let b = 20
// 输出为30
console.log(a + b);
// 输出为1020 会将数字隐式转换为字符串，进行拼接
let c = "10"
let d = 20
console.log(c + d);
算数运算符和复合运算符
let a=10,b=20
let c = a+b
复合运算符
a++ 就是先输出a,然后a自增1
++a 就是先自增1，在输出
比较运算符
有> < != 等等
// == 等于，
let a = 30
let b = "30"
// == 判断的是值，会隐式的转换为数字类型
console.log(a == b); // 输出为真
// 全等 ==== 会判断值，和类型，不会隐式转换
console.log(a === b); // 输出为假
逻辑运算符
&& 和 ||
流程控制
if,else if,else
js都带有一个{}
let a = 10
let b = 15
if (a > b) {
// 条件成立就执行代码
console.log("条件为真");
}
else if (a == b) {
console.log("相等");
}
else {
console.log("小于");
}
for循环
循环需要的：初始化变量，判断循环条件，更新循环变量
// for 条件 1、初始化，循环条件、更新循环变量
for (let i = 0; i < 5; i++) {
// 这个i是索引，不是数组里面的值
console.log(i);
}
// 另外一个写法，对迭代对象进行循环，数组，字符串
let arr = [1, 2, 3, 4]
for (let i in arr) {
// 这个循环出来的值是索引，因此想要具体的值话，索引取值即可
console.log(arr[i]);
}
// 或者使用for of 遍历的就是值
let arr = [1, 2, 3, 4, 5]
for (let i of arr) {
// 遍历获取的就是值
console.log(i);
}
对object对象进行循环，类似python对字典进行循环
let a = {
name: "qq",
age: "10",
i: 99
}
for (let i in a) {
// i取出来的是key值
console.log(i);
// 但是不会输出，默认从对象中找i这个键值对,添加一个i键值对，就会输出信息了
console.log(a.i);
// 如果想要拿到对象里面的值的话 对象[]
console.log(a[i]);
// 这样就会输出信息了
}
while循环
// 初始化变量，判断循环条件，更新循环变量
let i = 0
while (i < 2) {
console.log("小于3");
i++
}
break和continue
和python一样的含义
break，直接终止循环
continue 跳出本次循环，继续下次循环
函数
定义函数
第一种就是关键字定义
// 关键字function定义
function add(x) {
console.log("aaa");
console.log(x);
// 返回值也有
return 100
}
// 调用函数
// 实参和形参也可以设置
console.log(add(1));
另外一种写法，箭头函数,新版本添加的
let b = (x, y) => {
console.log("我是箭头函数");
console.log(x, y);
}
// 调用函数
b(1, 2)
定时器
2种定时器
时间以毫秒为单位，1s=2000ms
setTimeout()
只在指定的时间后执行一次，之后就不会继续执行了
setTimeout(() => {
console.log("我被调用了");
}, 2000);
setInterval()
周期性的执行
setInterval(() => {
console.log("我有被调用了");
}, 2000);
怎么关闭了？
-
第一种关闭浏览器
-
第二种用户点击停止，涉及到js交互
浙公网安备 33010602011771号