前端 JS
js数据类型之布尔值
js数据类型之自定义对象
运算符
流程控制
函数
js内置对象
BOM与DOM操作
js数据类型之布尔值
python的布尔值
TRue:
False: 0 none '' [] {}
js的布尔值【很容易出错】
区别于python，布尔值全小写
true:
false: (空字符串)，0，null， undefined，NaN
null 与undefined的区别
null可以理解为曾经拥有过，现在暂时空了
undefined 可以理解为从来没有拥有过
js数据类型之对象（object）
js中一切皆对象(字符串，数值，数组，函数)
var length = 7; // 数字
var lastName = "Gates"; // 字符串
var cars = ["Porsche", "Volvo", "BMW"]; // 数组
var x = {firstName:"Bill", lastName:"Gates"}; // 对象
JAVAScripts 允许自定义对象
JS提供多个内建对象，比如String,Date,Array等等
对象只是带有属性和方法的特殊数据类型
数组
1.对象之数组（相当于python中的列表）
2.数组对象的作用？
使用 单独的变量名来存储一系列的值，类似于Python的列表
var a = [123, "ABC"];
console.log(a[1])
VM954:1 ABC
| 常用内置方法 | 说明 |
|---|---|
| .length | 数组的大小 |
| .push(ele) | 尾部追加元素 |
| .pop() | 获取尾部的元素 # |
| .unshit(ele) | 头部插入元素 |
| .shift() | 头部移除元素 |
| .slicnce(start,end) | 切片 |
| .reverse() | 反转 |
| .join(seq) | 将数组元素连接成字符串 |
| .concat(val,....) | 连接数组 |
| .sort() | 排序 |
| .forEach() | 将数组的每个元素传递给回调函数 |
| .splice() | 删除元素，并向数组添加新元素 |
| .map() | 返回一个数组元素调用函数处理后的值的新数组 |
方法小练习
forEach()[重点掌握]
必须，数组里每个元素需要调用的函数。
语法：forEach(function(currentValue,index,arr),thisValue)
参数
currentVlaue：必需，当前元素
index: 可选，当前元素的索引值
arr: 可选，当前元素所属的数组对象
thisValue: 可选，传递给函数的值一般用"this"值。
如果这个参数为空，"undefined"会传递给"this"值
例子
splice()
必须，规定从某处添加或者删除元素
语法： splice(index,howmany,item1,.....,itemx)
参数：
index 必需，规定从何处添加/删除元素，该参数是开始插入或者删除元素的，必须是数字
howmany 必需，规定应该删除多少元素，必须是数字，但是可以是'0'
item1,....itemX 可选，要添加到数组的新元素
map()
必须，函数，数组中每个元素都会执行这个函数
语法 map(function(currentValue,index,arr),thisValue)
参数：
currentValue,必须，当前元素的值
index , 可选，当前元素的索引值
arr, 可选，当期元素属于的数组对象
thisVlaue 可选，对象作为执行回调使用，传递给函数，用作‘this’的值
如果省略了thisValue,"this" 的值为"undefined"
补充：es6新引入一种新的原始数据类型(Symbol)表示，独一无二的值，他是js语言的第七种数据类型
typeof是一个一元运算符（就像++，--，！，- 等一元运算符），不是一个函数，也不是一个语句。
对变量或值调用 typeof 运算符将返回下列值之一：
- undefined - 如果变量是 Undefined 类型的
- boolean - 如果变量是 Boolean 类型的
- number - 如果变量是 Number 类型的
- string - 如果变量是 String 类型的
- object - 如果变量是一种引用类型或 Null 类型的
运算符
算数运算符
| 符号 | 作用 |
|---|---|
| + | 加 |
| - | 减 |
| * | 乘 |
| / | 除 |
| % | 取余 |
| ++ | 递加 |
| -- | 递减 |
比较运算符
| 比较符号 | 作用 |
|---|---|
| == | 等于(自动转化成相同数据类型) |
| === | 等值等于 强等于（不自动转换） |
| ！= | 不相等 |
| ！== | 不等值或者不等型 |
| > | 大于 |
| < | 小于 |
| >= | 大于或等于 |
| <= | 小于或等于 |
| ？ | 三元运算符 |
逻辑运算符
| 逻辑运算符号 | 描述 |
|---|---|
| && | 逻辑与 等价于python的and |
| || | 逻辑或 等价于python的or |
| ！ | 逻辑非 等价于python的not |
赋值运算符
| 赋值运算符 | 例子· | 等同于 |
|---|---|---|
| = | x=y | x=y |
| += | x+=y | x=x+y |
| -= | x-=y | x=x-y |
| *= | x*=y | x=x*y |
| /= | x/=y | x=x/y |
| %= | x%=y | x=x%y |
类型运算符
| 类型运算符 | 作用 |
|---|---|
| typeof | 返回变量的类型 |
| instanceeof | 返回true，如果对象是对象类型的实例 |
字符串运算符
+运算符可以用于对字符串进行相加（concatenate,级联）
txt1 = "Bill";
txt2 = "Gates";
txt3 = txt1 + "" + txt2;
-------执行结果---------
Bill Gates
+= 赋值运算符也可以用于相加（级联）字符串：
txt1 = "Hello ";
txt1 += "Kitty!";
-------执行结果--------
Hello Kitty!
字符串和数字相加
相加两个数字，将返回和，但对一个数字和字符串相加返回一个字符串：
x = 7 + 8;
y = "7" + 8;
z = "Hello" + 7;
------执行结果---------
x 15
y 78
Hello7
流程控制
if分支结构
1.单if分支
if(条件){条件成立之后执行的代码}
---------------------------------------------------
2.if...else分支
if(条件){
条件成立之后执行的代码
}else{
条件不成立之后执行的代码
}
---------------------------------------------------
3.if...elif...else分支
if(条件1){
条件1成立之后执行的代码
}else if(条件2){
条件1不成立条件2成立执行的代码
}
else{
条件不成立之后执行的代码
}
----------------------------------------------
switch
注意了，一定要注意中英文的冒号
switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句
var n1 = 1;
switch (n1) {
case 0:
console.log('我要唱');
break;
case 1:
console.log('我要跳');
break;
case 2:
console.log('我要rap');
break;
default:
console.log("我不是ikun")};
-----执行结果--------
我要跳
for
for (var i=0; i<10;i++) {
console.log(i);
}
while
var i = 0;
while (i < 10){
console.log(i);
i++;
}
三元运算
一般情况下不推荐嵌套使用
var a = 1;
var b = 2;
var c = a > b? a : b
//这里的三元运算顺序是先写判断条件a>b再写条件成立返回的值为a,条件不成立返回的值为b;
三元运算可以嵌套使用；
var a = 10, b = 20;
var x=a>b ? a:(b=="20")?a:b；
-----------------------
x
10
函数
函数定义
JavaScript 中的函数和Python中的非常类似，只能定义方式有点区别。
函数定义：
function 函数名(参数1，参数2){
函数体代码
return 返回值
}
1.function 定义函数的关键字 相当于python中的def
2.函数名的命名参考变量名 并且js推荐使用驼峰体(Myfunc\MyFunc)
3.参考可写可不写
4.return返回值
函数调用：函数名加括号，有参则传参即可.
无参函数
function f1(){ console.log(111)}
f1()
有参函数
function f2(a,b){console.log(a,b)}
f2() #可以调用，相当传了两个undefined
f2(1) #可以调用，传给了a
f2(1,2) #可以调用，传给了a和b
f2(1,2,3,4,5) #可以调用 传给了a和b
js中的函数提供了有个内置关键字arguments:接收所有的参数。
参数的个数不需要一一对应 如果想限制参数个数需要使用内置关键字arguments
------------例子1------------------------------
function f2(){
console.log(arguments)
if (arguments.length == 0){
console.log('什么参数都没传')}
else if (arguments.length ===1){
conseole.log('传了一个参数')
}else{
console.log('传了多个参数')
}}
-----------
返回值参数
return不支持返回多个数据
function a(){
return 1,2,5
}
a() //5 返回多个数据的时候只会返回一个数据
function c(){
return [11,22,33,44]
}
c() //[11,22,33,44] 一个存储多个数据的列表之类的数据集是可以的
匿名函数
var ff = function (){
console.log(123)
}
js里面，function 后面不加参数，就是匿名函数。如果想单独用一下，强制性赋值一个名字。
例如f1
立即执行函数（很少见）
（匿名函数）
// 立即执行函数 书写立即执行的函数，首先先写两个括号()()这样防止书写混乱
(function(a, b){
return a + b;
})(1, 2);
箭头函数（drf中的vue框架会再次接触）
var f = v => v;
// 等同于
var f = function(v){
return v;
}
如果箭头函数不需要参数或需要多个参数，就是用圆括号代表参数部分：
var f = () => 5;
// 等同于
var f = function(){return 5};
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
return num1 + num2; //这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
}
函数中的arguments参数
function add(a,b){
console.log(a+b);
console.log(argument.length);
console.log(arguments[0]); } //arguments相当于将出传入的参数全部包含，这里取得就是第一个元素
add(1,2)
---结果---
3
2
1
函数的全局变量和局部变量
局部变量：
在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。
全局变量：
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
变量生存周期：
JavaScript变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
作用域
首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。与python作用域关系查找一模一样！
js内置对象
类似于python中的内置函数或者内置模块
固定语法
var 变量名 = new 内置对象名();
自定义对象
var d1 = {'name':'jason','age':18}
d1.name //jason
d1.age //18
//循环取值
for (var i in d1){
console.log(d1[i])
}
Date日期对象
内置对象可以看成是python中的内置方法，内置模块等提前写好直接调用。
var d1 = new Date() // 创建一个Date对象
d1.toLocaleString() '2022/4/28 22:16:38'
d1.toLocaleDateString() '2022/4/28'
d1.toLocaleTimeString() '22:16:38'
Date对象的方法
| 方法 | 说明 |
|---|---|
| getDate() | 获取日 |
| getDay () | 获取星期 |
| getMonth () | 获取月（0-11） |
| getFullYear () | 获取完整年份 |
| getYear () | 获取年 |
| getHours () | 获取小时 |
| getMinutes () | 获取分钟 |
| getSeconds () | 获取秒 |
| getMilliseconds () | 获取毫秒 |
| getTime () | 返回累计毫秒数(从1970/1/1午夜) |
练习：
将当前日期按“2017-12-27 11:11 星期三”格式输出。
const WEEKMAP = {
0:"星期天",
1:"星期一",
2:"星期二",
3:"星期三",
4:"星期四",
5:"星期五",
6:"星期六"
}; //定义一个数字与星期的对应关系对象
function showTime() {
var d1 = new Date();
var year = d1.getFullYear();
var month = d1.getMonth() + 1; //注意月份是从0~11
var day = d1.getDate();
var hour = d1.getHours();
var minute = d1.getMinutes() < 10?"0"+d1.getMinutes():d1.getMinutes(); //三元运算
var week = WEEKMAP[d1.getDay()]; //星期是从0~6
var strTime = `
${year}-${month}-${day} ${hour}:${minute} ${week}
`;
console.log(strTime)
};
showTime();
JSON序列化对象
var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串转换成对象---反序列化
var obj = JSON.parse(str1);
// 对象转换成JSON字符串---序列化
var str = JSON.stringify(obj1);
RegExpz正则对象
创建正则表达式的两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}"); // 使用RegEcp对象
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/; // 推荐使用(简化)
使用正则校验数据
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
reg2.test('tom123') // true
reg2.test() // true 括号内什么都不写 就相当于写了undefined
reg2.test('123a') // false
全局匹配
在正则表达式的最后加一个字母g（global）。在设置了参数global的情况下，每次执行test()方法之后，lastIndex值将会改变，下一次执行test()时，将会从lastIndex指定的索引处开始匹配。只有匹配失败时，lastIndex会重新设为0。当然，可以手动设置lastIndex的值。
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g;
reg2.lastIndex // 0
reg2.test('tom123') // true
reg2.lastIndex // 6
reg2.test('tom123') // false
reg2.lastIndex // 0
reg2.test('tom123') // true
js BOM和DOM操作
BOM:浏览器对象模型
通过写js代码可以跟浏览器交互
DOM:文档对象模型
通过写js代码可以跟html交互
BOM操作
打开子页面
window.open('https://www.baidu.com','','width=200,height=200')
关闭页面
window.close()
navigator对象
window.navigator.appName // Web浏览器全称
window.navigator.appVersion // Web浏览器厂商和版本的详细字符串
window.navigator.userAgent // 客户端绝大部分信息
window.navigator.platform // 浏览器运行所在的操作系统
history对象
window.history 对象包含浏览器的历史。浏览历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以简单的用来前进或后退一个页面。
window.history.forward() // 前进一页
window.history.back() // 后退一页
location对象
window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
window.location.href // 获取页面的url地址
window.location.reload() // 刷新页面
window.location.href = url // 跳转到指定页面
"""window可以省略不写"""
弹框系列
可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。
警告框---alert
警告框经常用于确保用户可以得到某些信息。
当警告框出现后，用户需要点击确定按钮才能继续进行操作。
alert("你看到了吗？")
确认框---confirm
确认框用于使用户可以验证或者接受某些信息。
当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。
如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。
confirm("你确定吗？")
提示框---prompt
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
prompt('你还有什么要交代的吗')
计时器
通过使用 JavaScript，我们可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
计时器的使用
// 单次定时
let t = setTimeout(showMsg,9000) // 9秒钟之后自动执行showMsg
clearTimeout(t) // 取消定时器
// 循环定时
let s = setInterval(showMsg,3000) // 每隔3秒执行一次
clearInterval(showMsg,9000) // 9秒后循环了3次结束计时器
DOM操作
Document Object Model是指文档对象模型，通过它可以操作HTML文档的所有元素。
HTML页面上有很多相同的标签，所以我们在操作HTML标签之前还要先学会如何查找标签(js查找标签)。
直接查找
通过标签名查找标签
document.getElementsByTagName('div') // 结果是数组类型
通过class值查找标签
document.getElementsByClassName('c1') // 结果是数组类型
通过id值查找标签
document.getElementById('d1') // 结果直接是标签对象本身
间接查找
间接查找需要先定位一个元素，如何在这个元素的基础上进行查找。
| 方法 | 说明 |
|---|---|
| parentElement | 父节点标签元素 |
| children | 所有子标签 |
| firstElementChild | 第一个子标签元素 |
| lastElementChild | 最后一个子标签元素 |
| nextElementSibling | 下一个兄弟标签元素 |
| previousElementSibling | 上一个兄弟标签元素 |
PS:由于DOM是操作页面上的HTML代码，但是HTML页面加载顺序是从上往下，
所以如果想要我们的代码能够正常执行，必须要先等待html页面加载完毕。
措施：将script标签写在body内最下方
节点操作
我们在DOM操作标签的时候在起变量名的时候如果该变量指向的是一个标签，那么建议使用xxxEle，eg:aEle\pEle\divEle\spanEle。
动态创建一个标签并添加到页面指定位置
let xxxEle = document.createElement('标签名') //创建一个标签
xxxEle.id = 'id值' //给标签添加id值
xxxEle.innerText = '内部文本' //设置文本内容
divEle.append(xxxEle) //div标签内部追加标签
ps：动态创建 临时有效 非永久
标签属性
1.默认属性
比如id，class等，设置的时候可以直接通过点的方式
divEle.id = 'd1'
divEle.class = 'c1'
2.自定义属性
比如username，password等，设置的时候需要使用setAttribute，它也包括默认属性
divEle.setAttribute('username','jason')
3.其他
divEle.getAttribute("age") //获取指定属性
divEle.removeAttribute("age") //移除指定属性
innerText与innerHTML
| 方法 | 取值的时候 | 设置值的时候 |
|---|---|---|
| innerText | 只会获取文本内容 | 不识别标签语法 |
| innerHTML | 获取文本内容和标签 | 识别标签语法 |
