前端开发04

JS数据类型之布尔值

python
bool
True
False:0 None ‘’ [] {} …
JS
boolean
true
false:(空字符串)、0、null、undefined、NaN

null与undefined的区别
null可以理解为曾经拥有过 现在暂时空了
undefined可以理解为从来没拥有过

JS数据类型之对象(object)

‘’‘在JS中也是一切皆对象’‘’
1.对象之数组(相当于python中的列表)
let l1 = [11, 22, 33, 44]

常见内置方法(push、forEach…)

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

1.自定义对象(相当于python中的字典)
定义方式1:
let d1 = {‘name’:‘jason’,‘pwd’:123}
定义方式2:
let d2 = new Object()
自定义对象操作数据值的方式更加简单 直接使用句点符

ps:思考python中如何让字典也可以通过句点符操作字典的数据值

运算符

var x=10;
var res1=x++; 先赋值后自增
var res2=++x; 先自增后赋值

== 弱等于(自动转换成相同数据类型)
=== 强等于(不自动转换)

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

流程控制

1.分支结构
1.单if分支
if(条件){条件成立之后执行的代码}
2.if…else分支
if(条件){
条件成立之后执行的代码
}else{
条件不成立之后执行的代码
}
3.if…elif…else分支
if(条件1){
条件1成立之后执行的代码
}else if(条件2){
条件1不成立条件2成立执行的代码
}
else{
条件不成立之后执行的代码
}
“”"
var day = new Date().getDay();
switch (day) {
case 0:
console.log(“Sunday”);
break;
case 1:
console.log(“Monday”);
break;
default:
console.log(“…”)
}
“”"
2.循环结构
for(let i=1;i<101;i++){
console.log(i)
}
课堂小练习
打印数组内所有的数据值
l1 = [11, 22, 33, 44, 55, 66, 77, 88, 99, ‘jason’]
for(let i=0;i<l1.length;i++){
console.log(l1[i])
}

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

函数

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

function func(a, b){
console.log(a, b)
}
参数的个数不需要一一对应 如果想限制参数个数需要使用内置关键字arguments
function func(a, b){
if(arguments.length===2){
console.log(a, b)
}else{
console.log(‘去你妹的 参数都没给我!!!’)
}

}

匿名函数
function(a, b){
return a + b;
}

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

JS内置对象

类似于python中的内置函数或者内置模块
固定语法
var 变量名 = new 内置对象名();

1.Date日期对象
2.JSON序列化对象
回顾python序列化
import json
json.dumps()
json.loads()
JS中的序列化
JSON.stringify()
JSON.parse()
3.RegExp正则对象
var reg1 = new RegExp(“¹[a-zA-Z0-9]{5,11}”);
var reg2 = /²[a-zA-Z0-9]{5,9}$/;
注意有一些小特点

BOM与DOM操作

BOM:浏览器对象模型
    通过写js代码可以跟浏览器交互
DOM:文档对象模型
    通过写js代码可以跟html交互
    
BOM操作
	window.open()
 	window.close()
   window.navigator.userAgent() 
	window.history.forward()
   	window.history.back()
   	window.location.href
   window.location.href = 新网址
 	window.location.reload()
  	alter()   警告
   confirm()  确认
	prompt()  提示
  	定时器相关操作(重要)
   		function func1(){
        	alert('终于要干饭了')
        }
       let t = setTimeout(func1,3000)  // 3秒中之后自动执行func1函数
       clearTimeout(t)  // 取消上面的定时任务
        
       
    	  var s1 = null
        function showMsg() {
            function func1(){
                alert('终于要干饭了')
            }
            s1 = setInterval(func1, 3000)
        }
        function clearMission(){
            clearInterval(s1)
        }
        setTimeout(clearMission, 9000)
        showMsg()
        
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('标签名')
       XXXEle.id = 'id值'
    	XXXEle.innerText = '内部文本'
       divEle.append(XXXEle)
    	ps:动态创建 临时有效 非永久
 	属性操作
    	XXXEle.属性  			 只能是默认属性
       XXXEle.setAttribute()  默认属性、自定义属性
   	文本操作
    	  divEle.innerHTML
        divEle.innerText

    	  divEle.innerHTML = '<h1>嘿嘿嘿</h1>'
        '<h1>嘿嘿嘿</h1>'
        divEle.innerText = '<h1>哈哈哈</h1>'
        '<h1>哈哈哈</h1>' 

---

1. a-zA-Z ↩︎

2. a-zA-Z ↩︎