JS数据类型与方法
JS数据类型之布尔值
- python布尔值（bool）
- True
- False: 0, None, 空字符(""), 空列表([])，空字典({})，空元组()
- JS布尔值（boolean）
- true(不需要首字母大写)
- false(不需要首字母大写)：0, 空（NULL）,空字符串（""） 没有定义（undefined）,不是一个数字（NaN）
- null与undefined的区别
- null就是曾经拥有过数据，但是现在没有了，所以是内部是空，一般是在需要指定或清空一个变量时才会使用
- nudefined可以理解为从来没有拥有过一开始就没有东西
JS数据类型之对象
- JavaScript中的所有事物都是对象和python一样：字符串，数值，数组，函数等，JavaScript也允许自定义对象
- JavaScript提供多个内建对象，比如，String，Date，Array等
- 对象只是带有属性和方法的特殊数据类型
JS数据类型之数组
- 数组相当于python中的列表可以存储多个数据，并且数据可以使任意数据类型
- let l1 = [11, "aa", 22, "bb", 33]
- var l2 = [99, "zz", 88, "yy", 77]
- 查看我们所定义的数组内的数据
| 方法 |
说明 |
实践 |
| .length |
数组的大小，也就是我们python的长度 |
l1.length; |
| .push() |
尾部追加元素 |
l1.push(666); |
| .pop() |
将尾部元素弹出 |
l1.pop(5);不管你填多少他都只弹出最后一个数值 |
| .unshift() |
头部插入元素 |
l1.unshift(999); |
| .shift() |
头部移除元素 |
l1.shift();和pop一样默认只弹出第一个和你填多少没什么太大关系 |
| .slice(start,end) |
切片 |
l1.slice(1,2);切片处理，第一个是起始位置，第二个是终止为止 |
| .reverse() |
反转 |
l1.reverse();前后颠倒 |
| .join() |
将数组元素连接成字符串 |
l1.join(""); |
| .concat() |
连接数组 |
var l2=l1.concat(5555512356155215,665266,66516); |
| .sort() |
排序 |
l1.sort |
| .forEach() |
将数组的每个元素传递给回调函数 |
l1.forEach(function(a){console.log(a)}); |
| .splice() |
删除元素，并向数组添加新的元素 |
l1.splice(1,2,22,33,44,55);第一位开始位置，第二位删除个数，第三位到之后的都是删除后添加的数据 |
| .map() |
返回一个数组元素调用函数处理后的值新数组 |
l1.map(function(a){return a + 1}); |
JS数据类型之自定义对象
- 查看数据类型的方法
- typeof（是一个运算符，查看一个变量的数据类型）
- 声明变量
- new（关键字，变量均为对象，当生命一个变量时，那么就相当于创建了一个新的对象）
- 基本数据类型
- 字符串（string）
- 数值（Number）
- 布尔值（Boolean）
- 数组（cars）
- 自定义对象（object）也就是我们python中的字典
- 没有定义（undefined）
- 空（null）
- symbol(独一无二值，ES6中新增)
- bigint（谷歌67版本中出现，是指安全存储、操作大整数）
JS常见运算符
| 运算符 |
类型 |
功能 |
| + |
算术运算符 |
A=10+20; |
| - |
算术运算符 |
A=10-20; |
| * |
算术运算符 |
A=10*20; |
| / |
算术运算符 |
A=10/20 |
| % |
算术运算符 |
A=10 % 3;//A = 1,A 10 % 2;//A = 0(区域运算符，两个数相除，取余数) |
| ++ |
算术运算符 |
加一运算符、自加一（++可以做前缀“++1”，也可以做后缀“1++”），如果不赋值的话结果一样，赋值的话结果就不一样了 |
| -- |
算术运算符 |
减一运算符，自减一（--可以做前缀也可以做后缀，如果不赋值的话结果一样，赋值的话结果就不一样了） |
| = |
赋值运算符 |
赋值 |
| += |
赋值运算符 |
先加后赋值 |
| -= |
赋值运算符 |
先减后赋值 |
| *= |
赋值运算符 |
先乘后赋值 |
| /= |
赋值运算符 |
先除后等 |
| + |
字符串运算符 |
字符串只能进行连接运算不能进行其他运算 |
| += |
字符串运算符 |
加后赋值 |
| > |
比较运算符 |
A=10>20返回为布尔值 |
| < |
比较运算符 |
A = 20>=20 |
| >= |
比较运算符 |
大于或等于 |
| <= |
比较运算符 |
小于或等于 |
| == |
比较运算符 |
是否相等，弱等于 |
| != |
比较运算符 |
A = 10%3 != 0 |
| === |
比较运算符 |
A = 10%2 === “0”，强等于 |
| !== |
比较运算符 |
强不等 |
| && |
逻辑运算符 |
返回值只有布尔值（与） |
| || |
逻辑运算符 |
（或） |
| ! |
逻辑运算符 |
（非） |
| ? |
三元运算符 |
条件表达式 ？ 结果1 ： 结果2 |
总结运算符优先级：
1、小括号 （）
2、一元运算符 ++ – ！ 比如：num++ num–
3、算数运算符 先* / %后+ -
4、关系运算符 > >= < <=
5、相等运算符 ==、 !=、 =、 !
6、逻辑运算符 先&& 后||
7、赋值运算符 =
8、逗号运算符 , 声明多个变量的时候
注意：一元运算符里面的逻辑非优先级很高
逻辑与比逻辑或优先级高
JS流程控制之分支结构
1.单if分支
if（条件）条件成立后执行的代码
2.if else分支，其实就相当于把python中的：换成了{大括号}
if(条件){
条件成立后执行的代码
}else {
条件不成立后执行的代码
}
3.if (else if) else分支
if（条件1）{
条件1成立后执行的代码
}else if(条件2) {
条件2成立后执行的代码
}else {
上方条件都不成立执行的代码
}
let day = new Date().getDay():
switch （day）{
case 0:
console.log("sunday");
break
case 1:
console.log(Monday);
break
default:
console.log("...")
}
JS流程控制之循环结构
1.for语句
for (let i=1;i<101;i++){
console.log(i)
}
2.do...while语句
do {
//循环体；
}while （循环条件）；
3.while语句
while （循环语句）{
//循环体
}
4.for循环多个变量的判断原理，逗号表达式
for(i=0,j=0,i<10,j<6;i++,j++){
k = i + j;
console.log(i+"+"+j+"="+k);
}
JS函数分类
1.js普通函数
function 函数名 (形参){
函数体代码
return 返回值
}
2.在JS中的函数有个小知识点（bug）我们在传参的时候无论有没有形参，我们穿不穿实参和穿多少实参都可以运行，（牢记）不过我们可以通过关键字来限制传参个数arguments
funvtion func(a, b) {
if(arguments.length===2){
console.log(a, b)
}else {
console.log('我只需要两个参数，阁下是否在愚弄本人')
}
}
3.匿名函数
function(a, b){
return a + b;
}
4.箭头函数（由于像箭头所以叫箭头函数）
let f = function(v){
return a + b;
}
let f = v => v;
let f = () => 5;
// 等同于
let f function(){return 5};
let sum = (num1, num2) => num1 + num2
// 等同于
let sum = function(num1,num2){
return num1 + num2; //返回的return 只能返回一个值，如果想要多返回需要自己手动给他们报一个数组或对象中
}
JS函数名称空间与作用域
- 局部变量
- 在JavaScript函数内部声明的变量（使用var）是局部变量，所以只能在函数内部访问他（该变量的作用域是函数内部）只要函数运行完毕，本地变量就会被删除
- 全局变量
- 在函数外声明的变量时全局变量，网页上所有的脚本和函数都能访问他
- 变量生存周期
- JavaScript变量的生命期从他们被声明的时间开始
- 局部变量会在函数运行以后被删除
- 全局变量会在页面关闭后被删除
- 作用域
- 首先在函数内部寻找变量，找不到则外层函数查找，逐步找到最外层，与python作用域关系查找一模一样
JS内置对象
- js内置对象分为三种
- 自定义对象
- 内置对象
- 浏览器对象
- 前两种是JS的基础内容，第三个则是JS独有的
- JavaScript提供了多个内置对象math、date、array、string等
| 类型 |
内置对象 |
介绍 |
| 数据类型 |
Number |
数字对象 |
|
String |
字符串对象 |
|
Boolean |
布尔值对象 |
| 组合对象 |
Array |
数组对象 |
|
Math |
数学对象 |
|
Date |
时间对象 |
| 高级对象 |
Object |
自定义对象 |
|
Error |
错误对象 |
|
Function |
函数对象 |
|
RegExp |
正则表达式对象 |
|
Global |
全局对象 |
- 查文档
- 创建对象
- var person=new object(); 创建一个person对象
- person.name="jsoeph" person对象的name属性
- person.age=21 person对象的age属性
- Math对象
- Math对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整，最大值等）可以使用Math中的成员
| 属性、方法名 |
功能 |
| Math.PI() |
圆周率 |
| Math.floor() |
向下取整 |
| Math.cell() |
向上取整 |
| Math.round() |
四舍五入版就近取整，注意-3.5结果是-3 |
| Math.abs() |
绝对值 |
| Math.max()/Math.min() |
求最大和最小值 |
| Math.random() |
获取范围在0.1内的随机值 |
- 日期对象
- Date对象和Math对象不一样，Date是一个结构函数，所以使用时需要实例化后磁能使用其中具体的方法和属性。Date实力用来处理日期和时间
- 获取当前时间必须实例化
- let now = new Date();
- 获取指定使时期对象
- let future = new Date('2022/02/22');
| 方法名 |
说明 |
代码 |
| getFullYear() |
获取当年 |
dObj.getFullYear() |
| getMonth() |
获取当月 |
dObj.getMonth() |
| getDate() |
获取当天日期 |
dObj.getDate() |
| getDay() |
获取星期几（周日0周六6） |
dObj.getDay() |
| getHours() |
获取当前小时 |
dObj.getHours() |
| getMinutes() |
获取当前分钟 |
dObj.getMinutes() |
| getSeconds() |
获取当前秒钟 |
dObj.getSeconds() |
- JSON序列化对象
- 回顾python序列化
- import json
- json.dumps()
- json.loads()
- JS中的序列化
- JSON.stringify()
- JSON.parse()
- RegExp正则对象
- var reg1 = new RegExp(" [a-zA-z0-9] [5,11]");
- var reg2 = / [a-zA-Z0-9] [5,9]$/;
BOM操作
- JavaScript分类
- ECMAScript也就是JavaScript
- DOM（Browser Object Model）是指浏览器对象模型，他使JavaScript有能力与浏览器进行"对话"
- BOM(Document Object Model)是指文档对象模型，通过他，可以访问HTML文档的所有元素
- window对象
- window对象是一个全局对象，声明的所有的全局变量，全局方法函数最终都是window对象属性或者方法
- window.innerHeight 浏览器窗口内部高度
- window.innerWidth 浏览器窗口内部宽度
- window.open() 打开新的窗口
- window.close() 关闭当前窗口，只能关闭我们使用代码打开的窗口
- window.moveTo() 移动当前窗口
- window.resizeTo() 调整当前窗口的尺寸
- window.navigator.userAgent() 通过userAgent可以判断用户浏览器类型
- window.history.forward() 在于浏览器中点击按钮向前相同，前进
- window.history.back() 在于浏览器点击按钮向后相同，后退
- window.location.href = 新网址 返回当前页面完整的url，修改这个属性，即跳转新页面
- window.location.reload() 重新加载页面
- 定时器相关操作
1.clearTimeout(t) 取消定时任务
2.定时弹窗
function func1(){
alter('腰酸背痛脑子疼，浑身难受,是该去做个按摩了')
}
s1 = setInterval(func1,5000)
3.循环定时弹窗，加定时取消弹窗
let s1 = null
function showMsg(){
function func1(){
alter('腰酸背痛脑子疼，浑身难受,是该去做个按摩了')
}
s1 = setInterval(funv1,3000)
}
funvtion clermission(){
clearInterval(s1)
}
setTimeout(clearMission,9000)
showMsg()
HTML DOM树
- DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法
- 当网页被加载时，浏览器会创建页面的文档对象模型
- HTML DOM模型被构造成对象的树
- DOM标准规定HTML文档中的每个成分都是一个节点（node）：
- 文档节点（document对象）:代表整个文档
- 元素节点（element对象）：代表一个元素（标签）
- 文本节点（text对象）：代表元素（标签）中的文本
- 属性节点（attribute对象）：代表一个属性，元素（标签）才有属性
- 注释是注释节点（comment对象）
- JavaScript可以通过DOM差UN根据爱你动态的HTML
- JavaScript能够改变页面中的所有HTML元素
- JavaScript能够改变页面中的s偶有HTML属性
- JavaScript能够改变页面中的所有CSS样式
- JavaScript能够对页面中的所有时间做出反应
DOM操作之标签查找
- 直接查找标签
- document.getElementById 根据ID获取一个标签
- document.getElementsByClassName 根据class属性获取
- document.getElementsByTagName 根据标签名获取标签合集
- 涉及到DOM操作的JS代码应该放在文档的哪个位置
- 间接查找
- parentElement 父节点标签元素
- children 所有子标签
- firstElementChild 第一个子标签元素
- lastElementChild 最后一个子标签元素
- nextElementSobling 下一个兄弟标签元素
- previousElementSibling 上一个兄弟标签元素
DOM操作之节点操作
1.节点操作
let XXXEle = document.cerateElement('标签名') 创建元素节点对象
XXXEle.id = 'id值' 创建id节点对象
XXXEle.innerText = '内部文本' 创建文本节点对象
divEle.append(XXXEle) 增加节点
2.属性操作
XXXEle.属性 只能是默认属性
divEle.setAttribute 默认属性、自定义属性都可
3.文本操作
divEle.innerHTML
divEle.innerText
divEle.innerHTML = '<h1>就这？<h1>'
divEle.innerText = '<h1>纵使背负天渊，一手托着原始帝城，我安澜照样无敌于世间<h1>'
