笔记

JS的引入方式

* 内部引入:在`<script>`标签内写js代码
* 外部引入：使用`<script src="路径">`引入一个外部的.js文件
* 行内引入：先不看

如果哪一个script标签用于引入了外部文件，那么浏览器会忽略掉该标签内部的js代码段

暂且需要记住的两种测试方式：


    //将括号里面表达式的返回值输出到控制台
    console.log(exp)

    //将括号里面表达式的返回值输出到警告框
    alert(exp)

    //将括号里面表达式的返回值输出到页面
    document.write(exp)

变量：存储数据的容器；利用var关键字来声明


    // 声明了一个变量，里面存放了一个1
    var a = 1;
    // 将变量a里面存放的值从原来的值变成5
    var a = 5;
    // 声明一个变量，但没赋值，此时这个变量里面存放的是一个undefined
    var b;

标识符：变量名，函数名，对象的属性名的起名字的规范。

* 由数字，字母，_和$组成。
* 数字不能作为开头首字符。

!表达式：任何有返回值(计算结果)的语句都是表达式，反之同理。

运算符：将简单表达式组成和表达式的方法。

!数据类型

* Number(数字)：1,2,3,4,0,-1,-2,1.2,-1.2,NaN(非数字),Infinity（无穷大）,-Infinity（无穷小）
* String(字符串)："王大伟","abc","1","true","false","NaN"
* Boolean(布尔值):true false
* undefined(空值):undefined
* Object(对象):
* function
* null

作业

为抵抗洪水，战士连续作战89小时，编程计算共多少天零多少小时？
小明要到美国旅游，可是那里的温度是以华氏度为单位记录的。它需要一个程序将华氏温度（80度）转换为摄氏度，并以华氏度和摄氏度为单位分别显示该温度。提示：摄氏度与芈氏度的转换公式为：摄氏度 = 5/9.0*(华氏度-32)
计算两个文本框的加减乘除

绑定事件


    元素的id.onclick = function(){
        //单击之后执行的js代码
        
        console.log(ipt.value)
    }

!表达式的副作用：如果某个表达式的存在与否会对JS执行环境上下文造成任何的影响，那么我们把这个表达式称之为有副作用的表达式。

数据类型的转换

其他数据类型转Number(exp)

* String转Number:除了纯数字是以字面量形式进行转换的以外，其他情况全为NaN（"Infinity"和"-Infinity"除外）。
* Boolean转Number:true为1，false为0

其他数据类型转String(exp)：以字面量的形式进行转换，外面加一对引号。

其他数据类型转Boolean(exp)

* Number转Boolean:除了0和NaN以外，其他全为true;
* String转Boolean:除了空字符串以外，其他所有情况全为true;、

双等号判断相等数据类型转换的底层逻辑

* !有NAN，一律返回false
* !有布尔类型，布尔类型转换成数字比较
* 有string类型，两种情况：
    1.对象，对象用toString方法转换成string相比。
    2.数字，string类型转换成数字进行比较
* !null和undefined不会相互转换，相等
* 有数字类型，和对象相比，对象用valueof转换成原始值进行比较
* 其他情况，一律返回false

if语句


    
    if(exp){
        // 代码段
    }
    --------------
    if(exp){
        //代码段1
    }
    else{
        //代码段2
    }



    switch(变量){
        case 常量1:{
            
        }
        case 常量2:{
            
        }
        case 常量3:{
            
        }
        case 常量4:{
            
        }
        // 当不满足以上所有条件时，执行这个分支
        default:{

        }
    }

判断表达式的值是否为NaN:isNaN(exp) -> Boolean

作业

判断输入的数是奇数还是偶数，将结果输出到控制台。
判断录入学生的成绩输出对应的等级，大于等于60及格；大于等于85分优秀；小于60不及格。
判断输入的年份是否是闰年（自行百度闰年计算方式）。
输入月份，输出当月的天数。（利用if 与 case穿透特性的两种写法分别实现）
（扩展）输入年月日（YYYYMMDD格式）显示这是这一年中的第几天（只考虑年份为四位数的情况）；如20200212，计算后结果为43。
（扩展）开发一款软件，根据攻击（身高-108）* 2 = 体重，可以有10斤以内的浮动

。来观察测试者体重是否合适。偏胖；偏瘦；正常

循环语句


    for(exp1;exp2;exp3){
        //循环体
    }

    // 常见的套路
    for(var i = 0; i < xxx;i++){
        console.log(i)
    }

    while(exp){
        // 循环体
    }

循环语句中流程控制关键字

* break  提前结束整个循环
* continue  结束本次循环

函数：一段可以被高度复用的代码段。


    // 声明函数：做计划。

    function 函数名(){
        // 函数体
    }

    // 调用函数：实施。

    函数名()

函数的参数：在函数体执行阶段临时的变量。


    
    // 形参：声明的变量。
    function sayHello(someone,when){
        console.log("干" + when +"饭~" + someone +"!")
        console.log( when + "安~" + someone +"!");
    }

    // 实参：为变量赋值。
    sayHello("打工人","早")

除了构造函数以外任何没有return语句的函数的执行函数表达式的返回值都是undefined。

return

* 控制调用函数表达式的返回值
* 忽略掉本次调用函数return语句下面的代码

函数的引用：当调用函数表达式去掉后面的一对括号时，这个表达式会返回该函数本身（也叫该函数的引用）这个表达式不会执行函数体内的代码，也不会返回return语句后面表达式的返回值。

IIFE自调用函数


    
    var a = (function(a,b){
        return a + b;
    })(10,5)
    
    console.log(a)  -> 15

变量作用域

* 局部变量：就是在函数体内部声明的变量，这个变量只能在函数体内或函数内部的内层函数中获取到。
* 全局变量：就是函数体外声明的变量，这种变量在任何地方都能被访问到。

在js中没有块级作用域的概念，只有函数作用域的概念。也就每一个函数形成一个封闭作用域，所有其他的东西都没有办法形成封闭作用域。

当局部作用域与全局作用域发生冲突时，在局部作用域内部以局部变量为准。

变量提升：js解释器的一种机制，当调用某个函数时，JS解释器会首先过滤一遍该函数中所有的`局部变量`，然后会将刚刚找到的局部变量放置在函数体的顶端先声明但不赋值。

如果想从函数体内部声明全局变量，只要去掉var关键字就好了。

函数中的arguments:当形参数量不确定的时候，我们会使用arguments来代替形参表示传入的实参，本质是一个类数组，具备数组下标和.length的特性。



    function(){

        arguments -> 类数组
        arguments[0] -> 返回数组中第0位的值
        arguments.length -> 数组到底有多少个值 

    }

数组:数据的有序集合;


    // 声明了一个空数组
    var arr = []
    // 声明数组并往里面塞值
    var arr = [1,5,6,3,4,1,2,5]
    // 声明数组并往里面塞值
    var arr = [1,5,6,3,4,1,2,5]

    // 利用下标(索引，角标)提取出数组中的成员
    arr[0]
    // 利用.length特性返回长度(有几个成员)




    // 循环(枚举 遍历)数组

数组的全局方法

Array.push(要插入的新元素) 向后插
Array.unshift(要插入的新元素) 向前插
Array.pop() 删掉最后一个
Array.shift() 删掉最前面的一个
Array.splice(index,howmany,item1,item2....) 替换/删除 数组中的成员
Array.concat(Array2) 返回Array和Array2数组拼接之后的值（新的数组）
Array.join("分隔符") 将数组转换为字符串，并将元素之间的分隔符以参数代替。如果参数为空，默认是,
Array.reverse() 用于颠倒数组成员的顺序。有副作用。
Array.slice()  以起始下标和终止下标截取数组中的一部分。

对象:属性的无序集合；

    
    // 声明了一个空对象
    var o = {}

// 声明空对象
        // var o = {};

        // 声明一个有属性的对象
        var o = {
            name:"王大伟",
            sex:"male",
            age:18,
            married:false,
            // 方法:如果对象中的哪一条属性的属性值存储的是一个函数，那么我们就通常把这条属性叫成方法。
            sayHello:function(){
                alert("你好~！^_^")
                return "空你急哇";
            }
        }

        // 对象属性的查询
        // console.log(o.age)
        // console.log(o["age"])
        // var age = "sex";
        // console.log(o[age])


        

        // 调用o对象下的sayHello方法。
        // o.sayHello()
        

        // 对象属性的添加/修改
        // o.age = 19;
        // o.type = "灵长类";

        // 对象属性的删除
        // delete o.married


        // 对象属性的检测
        // console.log("sex" in o)
        // console.log("type" in o)


        // 对象属性的枚举
        // for(var i in o){
        //  // 枚举对象的属性值
        //  console.log(o[i])
        //  // 枚举对象的属性名
        //  console.log(i)
        // }

对象的种类：

* 自定义对象:我们自己声明的对象
* 内置对象:不需要我们手动声明，浏览器打开就有的。console   document  .....

字符串全局方法

* charAt(index) 通过下标查找字符
* concat() 拼接字符串
* indexOf(char) 通过字符查找首次出现的位置，没找到返回-1
* split(分隔符) 通过一个字符将原字符串切割成长度若干的数组，没有副作用。
* substr(start,howmuch) 从起始下标开始，切割出来一部分个数的字符串
* slice(start,end) 以起始下标和终止下标切割字符串
* substring(start,end) 等价于slice，不能接受负数。
* replace(被替换的字符串/正则表达式,替换之后的内容) 在字符串中将里面用第二个参数的字符替换第一个参数字符
    * `String.replace(/替换的字符/g,"被替换的字符")` 全局匹配。
* toLowerCase() 转换为小写
* toUpperCase() 转换为大写

数组的ES5全局方法

* Array.forEach(function(item,index,array){})   用于循环遍历数组,返回值undefined
* Array.map(function(item,index,array){ return }) map方法作用类似于forEach,于forEach方法不同点在与它本身是有返回值的，并且返回值是一个数组，这个数组的长度与被循环数组的长度一致。但这个数组中的成员取决于参数函数中的return语句；使用场景：如果我们需要枚举遍历一个数组，并根据一定的计算生成一个与原数组长度相一致，但值不一致的新数组时，这种场景下比较适合使用map方法。

* Array.filter(function(item,index,array){ return })

    1. 循环机制与map和forEach完全一致
    2. 有返回值，返回值是一个数组。
    3. 返回数组的长度小于等于原数组的长度。
    4. 根据参数的函数中return语句表达式的返回值（布尔值类型）来决定结果数组中是否包含该成员。
    5. 使用场景：一般来说，如果我们需要根据某一个表达式条件来决定是否过滤或保留数组中的部分成员的话，这种场景就非常使用使用filter方法。

* Array.reduce(function(a,b){ return })
    1. 不能代替forEach或map语句进行遍历数组
    2. 有返回值
    3. 第一个参数第一次循环时代表数组中第一个成员，从二次开始，这个参数都会代表上次循环函数中return语句后面表达式的返回值。
    4. 第二个参数第一次循环时代表数组中第二个成员，以后每次分别代表第n+1位成员本身。
    5. reduce表达式会有返回值，返回值取决于最后一次循环函数中return语句表达式的返回值。
    6. 使用场景：累加运算

Math:数学对象

* abs() 返回绝对值
* floor() 向下取整
* ceil() 向上取整
* round() 四舍五入
* random() 0-1之间的随机数（包括0，不包括1）
* min() 返回最小值
* max() 返回最大值

Date:日期对象


    // 获取当前时间（实例化一个日期对象）
    new Date()

    // 获取未来的某一个时间点的日期对象
    var target = new Date("2020/12/19 18:00");

* getFullYear() 返回年份
* getMonth() 月 从0开始计数，一般都+1
* getDate()  日
* getHours() 返回小时数
* getMinutes() 返回分钟数
* getSeconds() 返回秒数
* getDay() 返回星期几,如果是周日则返回0
* getTime() 返回时间戳（1970年1月1日00:00:00到现在一共过了多少毫秒）
* setFullYear(2077) 将日期对象中年份字段设置到2077 getFullYear() 返回年份
* setMonth() 
* setDate()  
* setHours() 
* setMinutes() 
* setSeconds()

计时器


    // 每过第二个参数的毫秒数执行一次第一个函数中的函数体
    // 如果想使用计时器做动画，追求高帧率丝滑的效果第二个参数写16，如果追求性能就写32
    setInterval(function(){},3000)

DOM:document内置对象

document对象

* getElementById("ID") 通过ID获取页面中的元素(Node节点)
* getElementsByTagName("标签名") 通过标签名获取元素们(NodeList节点列表)
* getElemengsByClassName("类名") 通过类名获取元素(NodeList)
* querySelectorAll("css选择器") 通过css选择器来获取元素(NodeList)
* querySelector("css选择器") 通过css选择器来获取元素(Node)
* createElement("标签名")  创造一个元素节点

Node 节点

* getElementsByTagName("标签名")
* getElemengsByClassName()
* querySelectorAll()
* innerHTML 返回/设置该元素开始标签与结束标签之间的内容
* className ..........元素的类名
* style 设置/获取元素的行内样式
* getAttribute("属性名") 获取Node节点某个自定义属性所对应的属性值
* setAttribute("属性名","属性值") 设置Node节点某个自定义属性所对应的属性值
* parentNode 返回一个节点的父级元素 Node
* childNodes 返回一个元素的所有子元素 NodeList
* nodeType 检测节点类型  如果是元素节点 1 文本节点：3 注释节点：8 document节点返回：9
* children 返回所有子级元素节点
* previousElementSibling 返回上一个兄弟元素节点
* nextElementSibling 返回上一个兄弟元素节点
* remove() 移除节点
* removeChild() 移动节点 `Node.removeChild(Node)`
* appendChild() 插入到另外一个元素的结束标签之前 `父级Node.appendChild(要插入的Node)`
* insertBefore() 把一个元素插入到另外一个元素中间或前面的某个地方 
    `父级Node.insertBefore(要插入的Node,参照物的Node)`
* cloneNode(true) 复制节点,里面的true代表是否连通内容一块克隆。

NodeList

节点列表:它是由若干个Node节点组成的一个类数组。它完全独立于Node节点，不存在Node节点下的所有方法。

标准绑定事件方式：

    
    // 绑定事件
    Node节点.onclick = function(){
    }

    // 帮用户触发某一个元素上的某个事件
    Node.去on的事件名()

this出现的场景与它的指向

* this出现在事件处理函数中：它指向的是触发该事件的Node节点

补布局知识点

posted @ 2021-12-06 16:31 Teil 阅读(31) 评论(0) 收藏举报

刷新页面返回顶部

Teil

笔记

笔记

JS的引入方式

如果哪一个script标签用于引入了外部文件，那么浏览器会忽略掉该标签内部的js代码段

暂且需要记住的两种测试方式：

变量：存储数据的容器；利用var关键字来声明

标识符：变量名，函数名，对象的属性名的起名字的规范。

!表达式：任何有返回值(计算结果)的语句都是表达式，反之同理。

运算符：将简单表达式组成和表达式的方法。

!数据类型

作业

绑定事件

!表达式的副作用：如果某个表达式的存在与否会对JS执行环境上下文造成任何的影响，那么我们把这个表达式称之为有副作用的表达式。

数据类型的转换

其他数据类型转Number(exp)

其他数据类型转String(exp)：以字面量的形式进行转换，外面加一对引号。

其他数据类型转Boolean(exp)

双等号判断相等数据类型转换的底层逻辑

if语句

判断表达式的值是否为NaN:isNaN(exp) -> Boolean

作业

循环语句

循环语句中流程控制关键字

函数：一段可以被高度复用的代码段。

函数的参数：在函数体执行阶段临时的变量。

除了构造函数以外任何没有return语句的函数的执行函数表达式的返回值都是undefined。

return

函数的引用：当调用函数表达式去掉后面的一对括号时，这个表达式会返回该函数本身（也叫该函数的引用） 这个表达式不会执行函数体内的代码，也不会返回return语句后面表达式的返回值。

IIFE自调用函数

变量作用域

在js中没有块级作用域的概念，只有函数作用域的概念。也就每一个函数形成一个封闭作用域，所有其他的东西都没有办法形成封闭作用域。

当局部作用域与全局作用域发生冲突时，在局部作用域内部以局部变量为准。

变量提升：js解释器的一种机制，当调用某个函数时，JS解释器会首先过滤一遍该函数中所有的局部变量，然后会将刚刚找到的局部变量放置在函数体的顶端先声明但不赋值。

如果想从函数体内部声明全局变量，只要去掉var关键字就好了。

函数中的arguments:当形参数量不确定的时候，我们会使用arguments来代替形参表示传入的实参，本质是一个类数组，具备数组下标和.length的特性。

数组:数据的有序集合;

数组的全局方法

对象:属性的无序集合；

对象的种类：

字符串全局方法

数组的ES5全局方法

Math:数学对象

Date:日期对象

计时器

DOM:document内置对象

document对象

Node 节点

NodeList

标准绑定事件方式：

this出现的场景与它的指向

补布局知识点

公告

函数的引用：当调用函数表达式去掉后面的一对括号时，这个表达式会返回该函数本身（也叫该函数的引用）这个表达式不会执行函数体内的代码，也不会返回return语句后面表达式的返回值。

变量提升：js解释器的一种机制，当调用某个函数时，JS解释器会首先过滤一遍该函数中所有的`局部变量`，然后会将刚刚找到的局部变量放置在函数体的顶端先声明但不赋值。