Day 53

今日内容概要

• JS数据类型
  • JS数据类型—布尔值
  • JS数据类型—对象object
  • JS数据类型—自定义对象object
• JS运算符
• JS流程控制
• JS函数
• JS内置对象
• JS的BOM与DOM操作（核心）

今日内容详细

一.JS数据类型

1.JS数据类型—布尔值

python中的布尔值bool:
	True
	False：0、None、''、[]、{}..
JS中的布尔值boolean:
    true
    false：(空字符串)、0、null、undefined、NaN
    
'''
null与undefined的区别
	null可以理解为曾经拥有过,现在暂时空了
	undefined可以理解为从来没拥有过
'''

2.JS数据类型—对象object

'JS中同样也是一切皆对象'

对象之数组(相当于python中的列表)
let l1=[11,22,33]

eg: forEach() 类似Python中for循环
var numb_list=[11,22,33,44]
numb_list.forEach(function(a){console.log(a)})
结果为依次打印11 22 33 44  

eg: splice()
numb_list.splice(2,1,'aa') #从索引为2的位置删一位数,改为aa

3.JS数据类型—自定义对象object

自定义对象(相当于python中的字典)
	定义方式1:
        let d1 = {'name':'张三','pwd':123}
 	定义方式2:
        let d2 = new Object()#此时d2是空字典,typeof下是对象
        
自定义对象操作数据值的方式更加简单 直接使用句点符
	d1.name#结果就会出来值张三
	d1.hobby='run'#显示d1就会发现新增了一个键值对

二.JS运算符

var x=10;
var res1=x++;  先赋值再自增 此时res1是10
var res2=++x;  先自增再赋值 此时res2是12

==	弱等于(JS会自动转换成相同数据类型比较)
=== 强等于(不自动转换相同数据类型)
#所以在js中涉及到比较时尽量用===,防止判断错误

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

三.JS流程控制

1.分支结构

	1.单if分支
    	if(条件){条件成立之后执行的代码}
        
	2.if..else分支
    	if(条件){
            条件成立后执行的代码
        }else{
            条件不成立后执行的代码
        }
        
	3.if..elif..else分支
    	if(条件1){
            条件1成立后执行的代码
        }else if(条件2){
            条件1不成立,条件2成立执行的代码
        }else{
            条件都不成立后执行的代码
        }
        
————————————————————————————————————————————
    这里还有一种语法,其他编程语言里有但python里没有,因为完全可以用if实现：switch(相当于连续的多个if判断) '以下仅了解即可'
	var day = new Date().getDay();#获取当前是星期几
	switch (day) {
       case 0:
         console.log("Sunday");
         break;
       case 1:
         console.log("Monday");
         break;
      default:
         console.log("不知道今天是星期几")
    	}
    
    switch中的case子句通常都会加break语句，如果去掉的花程序会继续执行后续case中的语句。

2.循环结构

【for循环】
  eg:
    循环打印1~100
	for(let i=1;i<101;i++){  #定义开始位置,循环条件,每次循环完做什么事
        console.log(i)		#打印i
    }
    
  eg:
    打印数组内所有的数据值
    l1 = [11, 22, 33, 44, 55, 66, 77, 88, 99, 'jason']
    for(let i=0;i<l1.length;i++){
        console.log(l1[i])
    }
—————————————————————————————————————————————————————————
【while循环】
  eg:
    循环打印1~10
 	var i = 0;
	while (i < 11) {
  		console.log(i);
  		i++;
	}

四.JS函数

语法结构：
	function 函数名(形参){
        函数体代码
        return 返回值
    }

/*以下仅列举三个重要的、或python中没有的,其余与python差不多*/


【有参函数】：
#参数的个数不需要一一对应,如果想限制参数个数则需要使用内置关键字arguments：
function func(a, b){
    if(arguments.length===2){   /*如果参数数量是2则往下执行*/
       console.log(a, b) 
    }else{
       console.log('参数个数不对')
    }   
}

【匿名函数】
    function(a){console.log('我是匿名函数')} #没有函数名
    如果要使用匿名函数则：
    let 函数名 = function(a){console.log('我是匿名函数')}

【箭头函数】

     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只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
    }

五.JS内置对象

相当于python中的内置方法或内置模块
固定语法：
	var 变量名 = new 内置对象名();

1.Date日期对象
let Obj=new Date(); /*获取当前时间对象*/
Obj.toLocaleString()/*转成当地时间 2022/8/25 21:17:00*/
Obj.getDay();		/*获取今天星期几  4*/

2.JSON序列化对象(重点)
	python的序列化：
    	  import json
    	  json.dumps() #序列化
    	  json.loads() #反序列化
	JS中的序列化：
    	  JSON.stringify() #序列化
    	  JSON.parse()	#反序列化
        
eg:
    let ddd={'name':'torry','pwd':'123'}
    let strJson=JSON.stringify(ddd)  #序列化
    JSON.parse(strJson)		#反序列化

 3.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}$/;
 	
当遇到一些无法理解的bug时,大概率是JS内部的bug，百度一下

六.JS的BOM与DOM操作（核心）

BOM:浏览器对象模型
    通过写js代码可以跟浏览器交互
DOM:文档对象模型
    通过写js代码可以跟html文档交互

【BOM操作】
    window.innerHeight  	#获取浏览器当前窗口高度
    window.innerWidth   	#获取浏览器当前窗口宽度
    window.open('网站','')   #打开子页面 (内部可以添加属性)
    window.close()			#关闭当前窗口(只能关闭自己打开的)
    window.navigator.userAgent() #获取浏览器信息(主要用于爬虫)
    window.history.forward()	#页面前进下一页
    window.history.back()		#页面后退前一页
    window.location.href		#获取当前页面网址 *
    window.location.href = 新网址 #重新访问一个新网址 *
    window.location.reload()	#刷新当前页面 *
    alert()   警告			#弹出一个警告框
    confirm()  确认			#弹出一个确认框(有按钮 会返回true或false)
    prompt()  提示			#弹出一个提示框,用户输入的信息会返回回来
    ——————————————————————————————————————————————————————————————————
  	定时器相关操作(重要)：
            function func1(){
                alert('要吃饭了')
            }

            let t =setTimeout(func1,3000) //3秒后自动执行一次func1函数
            clearTimeout(t)//取消上面的延时定时任务
            let s1 = setInterval(func1,3000)//3秒后自动循环执行func1函数(缺陷:会叠加)
            clearInterval(s1)//取消上面的循环延时定时任务
    ——————————————————————————————————————————————————————————————————————
    eg:3s后循环警告要干饭了，且10秒后取消该警告
    
    <body>
	<script>
    	var s1 = null
        function showMsg() {
            function func1(){
                alert('要干s饭了')#弹出警告
            }
            s1 = setInterval(func1, 3000)#3s后自动循环执行func1函数
        }
        function clearMission(){
            clearInterval(s1)#取消上面定时器
        }
        setTimeout(clearMission, 10000)#10秒后执行clearMission函数来取消定时器
        showMsg()
    </script>
    </body>

【DOM操作】
  JS操作html和CSS操作html学习套路一致 都是先学如何查找标签:
    document.getElementById()
    	根据id值查找标签 结果直接是标签对象本身
    document.getElementsByClassName()
    	根据class值查找标签 结果是数组类型
    document.getElementsByTagName()
    	根据标签名查找标签 结果是数组类型
   #当涉及到标签查找时需注意要在标签加载下面写(只有加载了标签才能查找到)
    parentElement            父节点标签元素
    children                 所有子标签
    firstElementChild        第一个子标签元素
    lastElementChild         最后一个子标签元素
    nextElementSibling       下一个兄弟标签元素
    previousElementSibling   上一个兄弟标签元素	
  	 
   #当有一个标签对象需要反复使用,可以用变量名接收存储一下(减少打字的量！)
  	 let divEle = document.getElementById('d1')
  ——————————————————————————————————————————————————————————————————————
        
   	节点(标签)操作:   #节点就是标签！
        let XXXEle = document.createElement('标签名,如a') #创建a标签
        XXXEle.id = 'id值'				#给创建的标签添加id值
        aEle.href='某个网址'				#给创建的a标签添加一个网址
        XXXEle.innerText = '内部文本' 		#给创建的标签添加内部文本文字
        divEle.append(XXXEle)			#把创建的标签添加到某个标签内部
    	注：这是动态创建！生效一次,不是永久生效的！！

 	属性操作
       XXXEle.属性  		    只能设置默认属性
       XXXEle.setAttribute()  可以设置默认属性、自定义属性
       
   	文本操作
        divEle.innerHTML  #获取标签内部所有内容
        divEle.innerText  #获取标签内部所有文本内容

    1.divEle.innerHTML = '<h1>嘿嘿嘿</h1>'
      结果会改变文字大小
    2.divEle.innerText = '<h1>哈哈哈</h1>'
      结果会显示后面文本：'<h1>哈哈哈</h1>' 

作业

1.整理今日内容及博客
2.自行完善上午默写题并流畅说出
3.预习明日内容
	DOM操作、jQuery框架