前端基础分享:小白也能轻松上手

195 阅读4分钟

Js 组成:ECMAscript DOM BOM JS 引入方式: 1.行内样式:<标签 onclick.log()></标签>> 2.内联样式:,放置于body最底部 3.

变量 定义:var = 变量名 变量赋值:变量名 = xxx;定义跟赋值连写:var 变量名 = xxx 变量名命名规则: 可以有字母,数字,$,_下划线,不能以数字开头,尽量见名知意 不能用js关键字:var/if/for/let 区分大小写 多个单词连写时中间用下划线连接,使用驼峰命名

数据类型显示:typeOf(变量)

简单数据类型 数字(number)类型:整数,浮点数。数学上的数字 字符串(string)类型:包含在单引号或者双引号里的都可以理解为字符串 布尔(boolean)类型:true 正确的、false 错误的 undefined类型:表示未定义的 null类型:空

数据类型转换: 转为数字(number)类型 方式1:Number(要转换的数据) 字符串转数字:字符串为纯数字时转换为number,其他转为NaN 布尔转数字:true为1,false为0 undefined转数字:NaN null转数字:0 方式2:parseInt(变量) 字符串转数字:字符串为纯数字/或者以数字开头的转换为number,小数保留小数点前的数据,当字符串为空白字符串时转为8;其他转为NaN 布尔转数字:真假均转为NaN undefined转数字:NaN null转数字:NaN 方式3:parseFloat(变量) 字符串转数字:字符串为纯数字/或者以数字开头的转换为number,小数也完整转换;其他转为NaN 布尔转数字:真假均转为NaN undefined转数字:NaN null转数字:NaN 方式4:变量 - 0 字符串转数字:字符串为纯数字的转换为number,小数也完整转换,空字符和空白字符转为0;其他转为NaN 布尔转数字:true为1,false为0 undefined转数字:NaN null转数字:0 转为字符串(string)类型 方式1:变量 .toString() 除了undefined和null其他均可以转化为字符串 方式2:String(变量) 所有类型均可以转成字符串 方式3:变量 + "" 所有类型均可以转成字符串 转为布尔(boolean)类型 Boolean(变量) 空字符、undefined、null转为false,其他转为true

运算符: 一:算术运算符(+ - * / %) 1. + - * / 就是数学的加减乘除 2. % 表示求余,也就是除以某个数取结果的余数 3. 注意点: - * / %,以上几个符号参与运算的时候,如果符号前后存在非数字类型时会将其转为数字(number)类型

二:赋值运算符(+=  -=  *=  /=  %=)
     1. 语法:a += 5,执行的代码就是a = a + 5 ;  a %= 4 ,执行的代码就是a = a % 4

三:比较运算符( >  <  >=  <=  ==  ===  !=  !==)
    1. 比较运算符输出的结果为布尔值,结果为真输出true,为假输出false
    2. 注意点:==  === 都可以判断两个值是否相等,==(等于) 只判断大小,===(全等于)不仅判断大小,还判断数据类型
    3. != / !== 意为不等于,例如 a != b 如果a不等于b则输出结果为truea等于b就输出false;!== 也是不仅判断大小,还判断数据类型

四:逻辑运算符(&&  ||)
    1. 语法:a && b  ;  a || b ,输出结果为布尔值
    2. a && b 表示逻辑与,当符号前的值为真时输出符号后面的值(前真出后)当符号前的值为假时输出符号前面的值(前假出前)
    3. a || b 表示逻辑或,只要符号前后有一个为真时则返回该真值,前后都为真时符号返回前面的值(有真为真)只有符号前后都为假时才返回false

五:自增自减运算符(++ --1. 语法:变量++  ++变量   变量--  --变量  
    2. 作用:将自身 加1 或 减1
    3. 符号在变量前后的区别:都可以自加或自减。符号在前, 先运算自减或自加, 然后参与周围表达式    符号在后, 先参与周围表达式运算, 然后自减或自加


六:三目运算符 
    1. 语法:  ?判断为真时候的操作  :判断为假时候的操作
    2. 例如:<script>
            var xb = "女"
            console.log(xb == "男" ? "他" : "她")
            </script>

分支语句 一:if-else (常用于判断多个逻辑性条件) 1. 语法:if(判断条件){ 符合条件的操作 }else{不符合条件的操作} 2. 例如:

二:switch-case语句
    1. 语法:
        switch(变量){
        case 条件1console.log(输出满足条件1的结果)
            break
        case 条件2console.log(输出满足条件2的结果)
            break
        。。。。。。
        defaultconsole.log("都不满足选择我")
        }
    2.注意点:break可以不写,但不写会造成switch穿刺现象
    3.<!-- switch-case判断给年份显示该年各月份的天数 -->
    <script>
    var year = 2020
    var month = 2
    var day
    switch(month){
    case 2:
        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
            day = 29
        } else {
            day = 28
        }
        break
    case 1:
    case 3:
    case 5:
    case 7:
    case 8:
    case 10:
    case 12:
        day = 31
        break
    case 4:
    case 6:
    case 9:
    case 11:
        day = 30
        break
    }
    console.log(year,"年",month,"月有",day,"天")
    </script>

Js循环 一:while循环

二:do-while循环
<script>
var a = 1   //初始化
do(
    console.log("code....")   // 循环体:需要循环执行的内容代码
    a++     // 改变自身,漏写会导致死循环
  )while(a < 10);  // 定义循环结束条件 a < 10
</script>

三:for循环
    for(1.初始化 ;2.循环结束条件 ;3.改变自身){
    4.循环体
    }

关键字:break/continue 的作用以及两者的区别 作用:二者都用于打断代码执行 区别:break 打断后后续的循环不再执行,continue 打断后该行代码不执行,不影响后面的循环体执行 举例:

函数: 赋值式定义====> var 变量名 = function (此处书写参数){需要调用的代码} 声明式定义====> function 函数名 (此处书写参数){需要调用的代码} 调用:变量名/函数名() 区别:赋值式定义的函数在调用时只能在函数后面进行,声明式定义的函数调用时在函数前后均可调用(原因可以去了解函数的变量提升以及声明提升)

函数的参数设置:以上函数语法中的所指的参数 1.形参:放置于function或者函数名后的小括号内;例如:function fn (a , b) 2.实参:放置于调用函数时函数名后的小括号内;例如:fn(100,20) 3.注意:形参与实参的值一一对应;如果形参与实参设置的值数量不对应的话,浏览器根据形参与实参从左往右的顺序对应解析

函数的返回值: 定义: 每个函数都有返回值,默认情况下返回undefined,如果我们设定了返回值就返回人为设定的 函数返回值设置语法: return 要返回的内容 注意: 函数返回值具有中断函数的功能,所以一般人为设定返回值时都放在最后

作用域:变量使用区间(目前暂时介绍两个) 一:全局作用域 范围:script内部 二:局部(函数)作用域 范围:函数内部的大括号内部

递归函数: 条件1:一个函数在内部调用自身 条件2:在合适的时机结束调用(结束递归) 举例: