43、 JS基本数据类型、流程控制、函数与面向对象、 JS的BOM与DOM操作JS基本数据类型(boolean、obje

JS的数据类型值布尔值(boolean)

python中的布尔值(bool)

1.布尔值：True、False
2.False的情况：0,none,[],'',...

JS中的布尔值(boolean)

1.布尔值：true、false
2.false的情况：0，null，空字符串，undefined,NaN
3.null与underfined的区别
    null表示值是空，一般在需要指定或清空一个变量是才会使用(可以理解为曾经拥有过，现在没有了)，如：name = null
    underfine表示声明一个变量但未初始化(可以理解为从来没有拥有过)，该变量的默认值是underfined(let t)；当函数没有明确的返回值是，返回的也是underfined

JS数据类型值对象(object)

在JS中，也是一切皆对象:字符串、数值、数组、函数...此外JS允许自定义对象

对象是带有属性和方法的特殊数据类型

数组

数组对象的作用:使用单独的变量名来存储一系列的值(类似于Python中的列表)

let l1=[11,22,33,44,'nana']
console.log(l1[1])  //22

常用方法

方法	说明	python类比学习
.length	数组的大小	len()
.push(ele)	尾部追加元素	.append()
.pop()	获取尾部的元素	.pop()
.unshift(ele)	头部插入元素	.insert()
.shift()	头部移除元素
.slice(start, end)	切片	索引
.reverse()	反转	.reberse()
.join(seq)	将数组元素连接成字符串	.join()
.concat(val, ...)	连接数组
.sort()	排序	.sort()
.forEach()	将数组的每个元素传递给回调函数
.splice()	删除元素，并向数组添加新元素。
.map()	返回一个数组元素调用函数处理后的值的新数组

.forEach()

.forEach((function(currentValue, index, arr), thisValue):将数组的每个元素传递给回调函数

let l2 =[11,22,33]
l2.forEach(function(a){console.log(a)});
l2.forEach(function(a,b,c){console.log(a,b,c)});

splice()

splice(index,howmany,item1,.....,itemX):删除元素，并向数组添加新元素。

let l3 = [1,2,3,4,5,6,7,8,9,0]
l3.splice(4,3,'jason')
l3  // [1, 2, 3, 4, 'jason', 8, 9, 0]

.map()

map(function(currentValue,index,arr), thisValue):返回一个数组元素调用函数处理后的值的新数组

let l4 =[11,22,33,44]
l4.map(function(a){return a+10}); //  [21, 32, 43, 54]
l4  // [11, 22, 33, 44]

JS数据类型之自定义对象(object)

1.自定义对象(相当于python中的字典)
    定义方式1:let d1 = {'name':'jason','pwd':123}
    定义方式2：let d2 = new Object()
2.自定义对象可以操作数据值(查看，添加，修改)的方式更加简单，直接使用句点符
    eg:
    let d1 = {'name':'jason','pwd':123}
    d1.name = 'nana'  //'nana'
    d1  //{name: 'nana', pwd: 123}
    d1.hobby = 'read'
    d1  //{name: 'nana', pwd: 123, hobby: 'read'}

运算符

JS中的算数运算符运算符有:+ - * / % ++ --；比较运算符有：> >= < <= != == === !==；逻辑运算符有:&& || !;赋值运算符有:= += -= *= /=

自增++

x++会先赋值在进行自增1运算；++x辉县进行自增运算再赋值

let x=10
let res1 = x++
res1 //10
var res2=++x
res2  //12
x  //12

等于==、===

== 是弱等于(JS会自动转换成相同的数据类型)；=== 是强等于(JS不会自动转换)

5 == '5'  //true
5 === '5'  //false

逻辑运算符 &&、||、！

&&  等价于python中的and
||  等价于python中的or
!   等价于python中的not

流程控制

分支结构

1.单if分支

1.JS语法结构：
if(条件){条件成立之后执行的代码}

2.Python语法结构:
if 条件:
    条件成立之后执行的代码

2.if...else分支

1.JS语法结构：
if(条件){
   条件成立之后执行的代码 
}else{
    条件不成立之后执行的代码
}

2.Python语法结构:
if 条件：
    条件成立之后执行的代码
else:
    条件不成立之后执行的代码

let a = 10;
undefined
if (a>5){
    console.log('yes');
}else {
    console.log('no')
}

3.if...else if...else分支

1.JS语法结构：
if(条件1){
   条件1成立之后执行的代码 
}else if(条件2){
    条件1不成立条件2成立执行的代码
}else{
    条件不成立之后执行的代码
}

2.Python语法结构:
if 条件1：
    条件1成立之后执行的代码
elif 条件2:
    条件2成立之后执行的代码
else:
    条件不成立之后执行的代码

var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

4.switch

switch中的case子句通常会加break语句，否则程序会继续执行后续case中的语句

switch(表达式)
{
case 常量1:语句1;break
case 常量2:语句2;break
default:语句n;break;
}

var day = new Date().getDay();
switch (day) {
  case 0:
  console.log("Sunday");
  break;
  case 1:
  console.log("Monday");
  break;
default:
  console.log("...")
}

循环结构

1.for语句

for(表达式1; 表达式2; 表达式3){
    语句块
}

for (let i=0;i<10;i++){
    console.log(i);
}

需求：打印数组内所有的数据值(l1 = [11, 22, 33, 44, 55, 66, 77, 88, 99, 'jason'])

let l5 = [11, 22, 33, 44, 55, 66, 77, 88, 99, 'jason']
for(let i =0;i<l5.length;i++){
    console.log(l5[i]);
}

2.while循环

    while(条件){
        循环体代码
    }

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

三元运算

布尔表达式 ？ 表达式1 ：表达式2

var a = 1;
var b = 2;
var c = a > b ? a : b

函数

无参函数

function 函数名(){
    函数代码体
    return 返回值
}

function f2() {
    console.log('你好');
}

f2()  //你好

有参函数

function 函数名(形参){
    函数体代码
    return 返回值
}

参数的个数不需要一一对应，如果想要限制蚕食个数需要使用内关键字arguments

function f3(a,b) {
    console.log(a,b);
}

f3(1,2) // 1 2
f3()  //undefined undefined
f3(1)  // 1 undefined
f3(1,2,3,4,5)  // 1 2

function f4(a, b) {
  console.log(arguments);  // 内置的arguments对象
  console.log(arguments.length);
  console.log(a, b);
}

function f5(a,b) {
    if(arguments.length===2) {
        console.log(a,b)
    }else{
        console.log('要2个参数')
    }}

带返回值的函数

function f6(a, b){
  return a + b;
}

f6(1,2)  //3

匿名函数

function(){
    函数体代码
}  //需要使用到变量名

let f7 = function(a,b) {
    return a+b;
}

f7(3,5)  //8

立即执行函数

书写立即执行的函数，首先先写两个括号()()这样防止书写混乱

(function(形参) {函数体代码})(实参)

(function(a,b){return a+b;})(1,2)  //3

箭头函数

如果箭头函数不需要参数或需要多个参数，就是用圆括号代表参数部分

var f = function(v){
    return v;
}
等同于：
var f = v => v;

var f  = () =>5;
等同于:
var f = function(){
    return 5;
}

var sum = (num1,num2) =>num1+num2;
等同于:
var sum = function(num1,num2){
    return num1 + num2; //这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
}

闭包函数

var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();  // ShangHai

JS的内置对象和方法

JavaScript中的所有事物都是对象：字符串、数字、数组、日期，等等。在JavaScript中，对象是拥有属性和方法的数据。

内置对象类似于python中的内置函数或者内置模块

自定义对象

语法：var 变量名 = new 内置对象名();

Date日期对象

方法	含义
getDate()	获取日
getDay ()	获取星期
getMonth ()	获取月（0-11）
getFullYear ()	获取完整年份
getYear ()	获取年
getHours ()	获取小时
getMinutes ()	获取分钟
getSeconds ()	获取秒
getMilliseconds ()	获取毫秒
getTime ()	返回累计毫秒数(从1970/1/1午夜)

实例

let d = new Date();

d.getDate() //25
d.getDay() //4
d.getMonth()  //7
d.getFullYear()  //2022
d.getYear()  //122
d.getHours()  //18
d.getMinutes()  //45
d.getMilliseconds()  //677
d.getTime()  //1661424356677

JSON序列化对象

1.python的序列化
    import json
    json.dumps()   其他数据类型转换成json格式字符串
    json.lode()    将json格式字符串转换成对应的数据类型
2.JS中的序列化
    JSON.stringify()  对象转换成JSON字符串
    JSON.parse()  JSON字符串转换成对象

var Obj1 = {"name": "Alex", "age": 18};
var str = JSON.stringify(Obj1)
str  //'{"name":"Alex","age":18}'

var Json_Str = '{"name": "Alex", "age": 18}';
var obj = JSON.parse(Json_Str)
obj  //{name: 'Alex', age: 18}

RegExp正则表达式对象

定义正则表达式的方式

定义正则表达式两种方式:RegExp();/符号组合/

var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;

正则校验数据

object.test()

reg1.test('jason666')  //true
reg2.test('jason666')  //true

注意

1.正则表达式中不能有空格
2.全局匹配(/g)时有一个lastIndex属性,
3.校验时，不传值的话，就相当于自动传了：underfined

var s1 = 'egondsb dsb dsb';
s1.match(/s/)  //['s', index: 5, input: 'egondsb dsb dsb', groups: undefined]
s1.match(/s/g)  // ['s', 's', 's']


var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('egondsb');  // true
reg2.test('egondsb');  //false
reg2.test('egondsb');  //true
reg2.test('egondsb');  //false
reg2.lastIndex;   //0

var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
reg2.test();
reg2.test(undefined);

var reg3 = /undefined/;
reg3.test();

BOM

BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。

window对象

所有浏览器都支持 window 对象，它表示浏览器窗口。

常用 window方法

1.window.innerHeight、window.innerWidth

window.innerHeight :浏览器窗口的内部高度；window.innerHeight：浏览器窗口的内部宽度

window.innerHeight  //724
window.innerWidth  //675

window.open()、window.close()

window.open() ：打开新窗口；window.close() : 关闭当前窗口

window.open("https://www.cnblogs.com/")
window.close("https://www.cnblogs.com/")

window的子对象

navigator对象

navigator对象：浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。

对象	含义
navigator.appName	Web浏览器全称
navigator.appVersion	Web浏览器厂商和版本的详细字符串
navigator.userAgent	客户端绝大部分信息
navigator.platform	浏览器运行所在的操作系统

navigator.appName //'Netscape'
navigator.appVersion  //'5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Mobile Safari/537.36'
navigator.userAgent  //'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Mobile Safari/537.36'
navigator.platform  //'Win32'

history对象

window.history 对象包含浏览器的历史,可以简单的用来前进或后退一个页面。

对象	含义
history.forward()	表示前进一页
history.back()	表示后退一页

location对象

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

对象	含义
location.href	获取URL
location.href="URL"	转到指定页面
location.reload()	重新加载页面

location.href
'https://www.cnblogs.com/Dominic-Ji/p/9121560.html'
location.href="https://www.cnblogs.com/Dominic-Ji/p/9121560.html"
location.reload()

弹出框

可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

警告框

alert():警告框经常用于确保用户可以得到某些信息;当警告框出现后，用户需要点击确定按钮才能继续进行操作

alert("警告框弹出来没有")

确认框

confirm():确认框用于使用户可以验证或者接受某些信息。

当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认，那么返回值为 true;如果用户点击取消，那么返回值为 false。

confirm("认真的吗")

提示框

prompt():提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

如果用户点击确认，那么返回值为输入的值;如果用户点击取消，那么返回值为 null。

prompt("请输入答案")  // '过过过'
prompt("请输入答案")  // null

计时相关

通过使用 JavaScript，我们可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

setTimeout()

语法：var t=setTimeout("JS语句",毫秒)

ps:
1.setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个setTimeout()，你可以使用这个变量名来指定它。
2.第一个参数：含有 JavaScript 语句的字符串
3.第二个参数指示从当前起多少毫秒后执行第一个参数（1000 毫秒等于一秒）。

setTimeout('alert("看见了吗")',3000)

clearTimeout()

语法：clearTimeout(setTimeout_variable)

var t= setTimeout('alert("看见了吗")',3000)
clearTimeout(t)

setInterval()

语法：setInterval("JS语句",时间间隔)

ps:
1.setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
2.setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 id值可用作 clearInterval() 方法的参数。

setInterval('alert("怎么样，看见了吗")',3000)

clearInterval()

语法：clearInterval(setinterval返回的ID值)

    var t=setInterval('alert("怎么样，看见了吗")',3000)
    clearInterval(t)

练习

    var s1 = null
    function showMsg() {
        function func1(){
            alert('终于要干饭了')
        }
        s1 = setInterval(func1, 3000)
    }
    function clearMission(){
        clearInterval(s1)
    }
    setTimeout(clearMission, 9000)
    showMsg()

DOM

DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。

查找标签

直接查找

方法	含义
document.getElementById	根据ID获取一个标签,结果直接是标签对象本身
document.getElementsByClassName	根据class属性获取,结果是数组类型
document.getElementsByTagName	根据标签名获取标签合集,结果是数组类型

document.getElementById('d1')  //<div id=•"d1">•div(id)•</div>•
document.getElementsByClassName('c1')  // [div.c1, p.c1]0: div.c11: p.c1length: 2[[Prototype]]: HTMLCollection
document.getElementsByTagName("div")  // [div#d1, div.c1, div, d1: div#d1]

间接操作

方法	含义
parentElement	父节点标签元素
children	所有子标签
firstElementChild	第一个子标签元素
lastElementChild	最后一个子标签元素
nextElementSibling	下一个兄弟标签元素
previousElementSibling	上一个兄弟标签元素

let divEle = document.getElementById("d1")

divEle.parentElement  //<body>•…•</body>•
divEle.children // [p, span, p]
divEle.firstElementChild  //<p>•…•</p>•
divEle.lastElementChild  //<p>•div>p•</p>•
divEle.nextElementSibling  //<span>•222•</span>•
divEle.previousElementSibling  //<p>•321•</p>•

节点操作

DOM标准规定HTML文档中的每个成分都是一个节点(node)

创建节点

语法：createElement(标签名)
eg: var divEle = document.createElement("div");
    divEle  //<div>•</div>•

添加节点

1.追加一个子节点（作为最后的子节点）：somenode.appendChild(newnode)；
2.把增加的节点放到某个节点的前边：somenode.insertBefore(newnode,某个节点);

删除节点

获得要删除的元素，通过父元素调用该方法删除。

语法：somenode.removeChild(要删除的节点)

替换节点

语法：somenode.replaceChild(newnode, 某个节点);

练习

let aEle= document.createElement('a')

aEle  //<a>•</a>•
aEle.href = "https://www.csdn.net/?spm=1001.2014.3001.4476"
aEle  //<a href=•"https:•/•/•www.csdn.net/•?spm=1001.2014.3001.4476">•</a>•
aEle.innerText ='博客园首页'
aEle  //<a href=•"https:•/•/•www.csdn.net/•?spm=1001.2014.3001.4476">•博客园首页•</a>•
var divEle1 = document.getElementById('d1')
divEle1.append(aEle)

总结

创建节点：let XXXEle = document.createElement('标签名')  
定义属性：XXXEle.id = 'id值'
添加内部文本：XXXEle.innerText = '内部文本'
添加节点：divEle.append(XXXEle)
ps:动态创建 临时有效 非永久

属性节点

获取文本节点的值

divEle.innerText 只获取了文本

divEle.innerHTML 获取了所有内容

var divEle = document.getElementById("d1")
divEle.innerText  //'div\n\ndiv>p div>p>span\n\ndiv>span\n\ndiv>p'
divEle.innerHTML  //'div\n    <p>div&gt;p\n        <span>div&gt;p&gt;span</span>\n    </p>\n    <span>div&gt;span</span>\n    <p>div&gt;p</p>\n'

设置文本节点的值

divEle.innerText=值不识别标签 divEle.innerHTML=值识别标签

var divEle = document.getElementById("d1")
divEle.innerText="哈哈"
divEle //<div id=•"d1">•哈哈•</div>•
divEle.innerHTML="哈哈"
divEle //<div id=•"d1">•哈哈•</div>•

divEle.innerText="<p>11</p>"
divEle  //<div id=•"d1">•<p>11</p>•</div>•
divEle.innerHTML= "<p>11</p>"
divEle  //<div id=•"d1">•<p>•11•</p>•</div>•

定义属性的值

XXXEle.属性 :只能是默认属性;

XXXEle.setAttribute() :默认属性、自定义属性

var dEle = document.createElement("div")
dEle  //<div>•</div>•
dEle.setAttribute("aaa",111)
dEle  //<div aaa=•"111">•</div>•