js基础(学前端js一定要打牢基础)

314 阅读3分钟

js组成的3个部分

ECMAscript,BOM,DOM三部分

js书写位置

js是一门编程语言(高级语言)

js代码有三个位置可以书写(与css类似):

1.可以写在script标签下

    <script>
        alert('你好,js')
    </script>

2.行内式

    <button onclick="alert('你好,js')">你好,js</button>

3.外部式(外联式)

新建一个js文件(可以直接写js代码),然后引入

    <script src="./js外部式.js"></script>

js中的输入与输出

1.弹出提示框

    <script>
        alert('你好,js')
    </script>

2.弹出输入框

    <script>
        prompt('请输入一个数值')
    </script>

3.弹出确认框

    <script>
        confirm('你喜欢我吗?')
    </script>

4.在控制台打印

    <script>
        console.log('你觉得我在那里?');
    </script>

在页面中显示

    // 括号内可以输入html标签,必须要用引号括起来
    document.write('<p>你好,js</p>')

数据类型

数据类型:String(字符串)、number(数字型)、boolean(布尔)、null(空)、undefined(未定义)

String(字符串):一切以 '单引号' "双引号" ``(反引号),包起来的内容都是字符串型

作用:用于展示文本

number(数字型):数值 数学中的任何数字

作用:一般用于数学计算

boolean(布尔):只有两个值 true(真),false(假)

作用:一般用于判断条件真假

nall(空):空值 只有一个值 空

undefined(未定义):未定义 只有一个值 undefined

变量

作用:在内存中存储数据

声明变量

声明变量:let(新版本,推荐使用),var

解释:在内存中开辟部分空间来存储数据

let 不允许重复定义相同的变量否则会报错

    <script>
        let age
    </script>

变量赋值

把数据存储到变量中去

    <script>
        let age
        age = 18
    </script>

或者

    <script>
        // 一步到位
        let age = 18
    </script>

变量重新赋值

变量重新赋值会先把原有的数据销毁,在进行赋值

    <script>
        // 定义变量
        let age = 18
        
        // 重新赋值,销毁原有的数据,然后再赋值
        age = 20
    </script>

变量与变量之间交换数据

变量之间的赋值方式:先取出变量中的数据,复制拷贝,然后再赋值

因为变量重新赋值销毁原有的数据,所以我们需要定义3个变量,一个变量充当中介的作用

<script>
    let i = 100
    let j = 200
    //中介
    let k
    // 先把i的数值赋值给k,这是k=100
    k = i
    // 吧j的值赋值给i,这是i=200
    i = j
    // 最后再把k的值赋值给j,这是j=100
    j = k
 </script>

变量的命名规范

如果有多个单词组成则采用小驼峰命名法(userName):首单词首字母小写,后面单词首字母大写

命名规则:强制遵守,不遵守则程序报错

变量名必须以: 字母、下划线_ 、符号开头,结尾可以是字母、下划线符号开头,结尾可以是字母、下划线_ 、符号、数字

变量不能使用关键字作为变量名

变量的调用方法

<script>
    // 可以直接在输出代码的小括号中写入变量名,不需要加引号
    let i = 100
    let age = 18
    alert(i)
    console.log(age)
</script>

检测数据类型

<script>
    // 用typeof来检测数据类型
    let i = 100
    // typeof写在前面然后用空格隔开变量名
    console.log(typeof age)
</script>

常量的定义方法

推荐使用 const

<script>
    // 圆周率
    const PI = 3.14
    console.log(PI)
</script>

字面量

js中的数据有两种使用方法

    第一种 :  先存入变量中, 通过变量取值语法来使用
        变量 :  指的是内存中的一块空间,里面的数据是可变的。(变量是内存空间)
    第二种 :  不存入变量中,直接拿来使用
        字面量 : 指的是一个固定的数据(字面量是数据)

运算符

加(+),减(-),乘(*),除(/),取余(%)

表达式 : 由运算符组成的式子

算术表达式 :由算术运算符组成的式子 例如 1+1

注意: 任何表达式,都一定会有运算结果

赋值运算符

    <script>
        let i = 100
        //  i = i +100
        i+ =  100
        //乘法除法取余减法均同理
    </script>

自增/自减(后置)

    <script>
        let i = 100
        // i = i+1
        i++
        // i = i-1
        i--
    </script>

连接符

    <script>
        let i = 18
        // 如果输出语句中存在文字,则需要用+;俗称"引引加加"
        alert('我今年'+i+'岁')
         console.log('我今年'+i+'岁')
    
         //新整方法 `${变量名}` 必须要用反引号
         console.log(`我今年${i}岁`)
    </script>

关系表达式

        1.关系运算符作用 : 比较两个数据的关系
            >  >=  <  <=  ==(相等)  !=(不等)  ===(全等)  !==(不全等)
        2.关系表达式 : 由关系运算符组成的式子   例如: 2 > 1
        重点: 关系表达式的运算结果一定是布尔类型 : true成立  false不成立
        
          =号注意点 
          = : 赋值运算符   右边数据存入左边容器
          == : 相等运算  只比较值,不比较数据类型
          === : 全等运算  既比较值,也比较数据类型

逻辑运算符

        0.关系运算符:某种条件的关系(成立/不成立),例如我的年龄大于你的年龄30>20
        1.逻辑运算符:多个条件之间的关系
        2.逻辑运算符只有三种
            * && :逻辑与 ,读作并且
            * || :逻辑或,读作或者
            * !  :逻辑非,读作取反
                * true(真)变false(假),false(假)变true(真)
        3.逻辑表达式: 表达式1 逻辑运算符 表达式2 

运算符优先级

        运算符优先级: 不同的运算符在一个式子中的运算顺序
            ()  : 优先级最高
            一元: ++ -- !
            算术
            关系
            逻辑
            赋值
            逗号
        开发中遇到复杂的式子,一般使用()小括号提升优先级

image.png