前端 day 04

今日内容详细

一、JS数据类型之布尔值

1.python和JS的布尔值的区别

  Python布尔值(bool)

True
        Flase:()  None  '' [] {} ...

 JS布尔值(boolean)

        true
        flase:（空字符串）、0、null、undefined、NaN
        # 区别于python，true和flase都是小写

2.null与undefined的区别

  null表示值为空，一般在需要指定或清空一个变量时才会使用，如name=null；可以理解为曾经拥有过，现在暂时空了

  undefined表示声明一个变量但未初始化时，该变量的默认值是undefined,还有就是函数无明确的返回值时，返回的也是undefined；可以理解为从来没拥有过

知识点分析：

• null 表示变量的值是空(null可以手动清空一个变量的值，使得该变量变为object类型，值为null；
• undefined则表示只声明了变量，但还没有赋值

还不明白？上图！

二、JS数据类型之对象(object)

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

1.对象之数组(相当于Python中的列表)

let l1 = [11,22,33,44]

ps:这一块我们还是使用let多一点，var太老版本了，要跟进时代的步伐啊

2.常见内置方法

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

①

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

1.自定义对象（相当于python中的字典）

定义方式一：
    let d1 = {'name':'jason','pwd':123}
    
定义方式二:
    let d2 = new object()

  自定义对象操作数据值的方式更加简单，直接使用句点符     

四、JS常见运算符

# 算法运算符
var x=10;
var res1=x++;  先赋值后自增
var res2=++x;  先自增后赋值

# 比较运算符
   ==     弱等于(自动转换成相同数据类型)   例：5=='5'  true
  ===     强等于(不自动转换相同数据类型)       5=='5'  flase

# 逻辑运算符
   &&     等价于python中的and
   ||     等价于python中的or
  ！！    等价于python中的not

五、JS流程控制之分支结构

1.分支结构

  ①单if分支   语法结构

    if(条件){条件成立之后执行的代码}

  ②if...else分支  语法结构

    if(条件){

        条件成立之后执行的代码

    }esle{

      条件不成立之后执行的代码

    }

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

 ps：console.log类似于python中的 print

 ③if...elif...else分支  语法结构

    if(条件1){

      条件1成立之后执行的代码

    }else if(条件2){

      条件1不成立条件2成立执行的代码

    }else{

      条件1和条件2都不成立执行的代码

    }

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

2.switch

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

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

六、JS流程控制之循环结构

1.循环结构

for(let i=1;i<101;i++){
    console.log(i)
}

2.课堂小练习

  打印数组内所有的数据值

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

3.while

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

七、JS函数分类

1.函数定义

  JavaScript中的函数和Python中的非常类似，只是定义方式有点区别

2.函数语法结构

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

3.普通函数定义

function f1(){
    console.log("Hello,world");
}

4.带参数的函数

function f2(a,b){
    console.log(a,b)
}

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

function func(a,b){
    if(arguments.length===2){
        console.log(a,b)
    }else{
        console.log('去你妹的 参数都没给我!!!')
    }
}

5.匿名参数

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

6.箭头函数

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-Z][a-zA-z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;

注意有一些小特点

九、BOM操作

1.BOM(Browser Object Model)：浏览器对象模型

   它使JavaScript有能力与浏览器进行"对话"，通过写js代码可以跟浏览器交互

2.DOM(Document Object Model)：文档对象模型

   通过它，可以访问HTML文档的所有元素，通过写js代码可以跟html交互

3.BOM操作

一些常用的Window方法:

window.open()	打开新窗口
window.close()	关闭当前窗口
window.navigator.userAgent()	客户端绝大部分信息
window.history.forward()	前进一页
window.history.back()	后退一页
window.location.href	获取URL
window.location.href = 新网址	跳转到指定页面
window.location.reload()	重新加载页面
alter()	警告框
confirm()	确认框
prompt()	提示框

4.定时器相关操作(重要)

function func1(){
    alert('明天就是周五了')
}
let t = setTimeout(func1,3000)  // 3秒钟之后自动执行func1函数
clearTime(t)   // 取消上面的定时任务

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

十、DOM操作

1..DOM操作之标签查找

  JS操作html和CSS操作html学习套路一致，都是先学如何查找标签

document.getElementById()
    根据id值查找标签，结果直接是标签对象本身
document.getElementsByClassName()
    根据class值查找标签，结果是数据类型
document.getElementsByTagName()
    根据标签名查找标签，结果是数组类型

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

let divEle = document.getElementById('d1')

2.DOM操作之节点操作

let XXXEle = document.createElement('标签名')
XXXEle.id = 'id值'
XXXEle.innerText = '内部文本'
divEle.append(XXXEle)

  ps: 动态创建，临时有效，非永久

3.DOM操作之属性操作

XXXEle.属性               只能是默认属性
XXXEle.setAttribute()     默认属性、自定义属性

4.DOM操作之文本操作

divEle.innerHTML
divEle.innerText

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