标签：function python 标签 JS 学习 let var Day53

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]

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

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*/

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

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框架

标签：function,python,标签,JS,学习,let,var,Day53
来源： https://www.cnblogs.com/Oreoxx/p/16626170.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。