这是我参与「第五届青训营 」伴学笔记创作活动的第 5 天

JavaScript 基础

简介

1. 运行在浏览器上的编程语言

2. 作用

   • 网页特效
   • 表单验证
   • 数据交互

3. JavaScript的组成

4. js的书写位置

   • js位置按照代码加载的顺序，写到body的底部，否则不能捕获页面元素
   • 外部js的内部不能写代码

5. js 的注释

   • 单行：//，快捷键：ctrl+/
   • 多行 /**/，快捷键：shift+alt+a

6. js 的结束标识

   • 可以加分号，也可以不加

初体验

控制 button 的背景颜色

<script>
    let bts = document.querySelectorAll('button')
    for (let i=0;i<bts.length;i++) {
        bts[i].addEventListener('click', function(){
            document.querySelector('.pink').className = ''
            this.className = 'pink'
        })
    }
</script>

输入输出

• 输出
  1. alert()
  2. console.log()
  3. document.write()
• 输入
  1. prompt()
• alert 和 prompt 会跳过页面渲染先被执行

字面量

1. 数字
2. 字符串
3. 数组[]
4. 对象{}

变量

1. 变量的本身是一个容器，可以容纳数据

2. 变量的声明和赋值

   • let 不允许多次声明同一个变量

   <script>
       // 声明
       let age
       // 赋值
       age = 18
       console.log(age)
       // 声明的同时直接赋值
       let name = "degim"
       // 同时声明多个变量
       let a = 1, b = 'hello'
   </script>
   

3. let 和 var 的区别

   • let 必须先声明，后使用
   • let 不允许多次声明

4. 数组 []

   • let names = ['degim', 'ldm']
   • 数组的长度：names.length
   • 数组的元素是对象，数组内可以存放元素、函数、数组
   • 查找值的索引：names.indexOf('degim')

常量

1. const PI = 3.14

数据类型

1. js是一门弱数据类型的语言

2. 数字型 number：包括整数和小数

3. 算数运算符：+ - * / %(取余数)，没有整除

4. Math.round() 四舍五入

5. 字符串 string，单引号，双引号，反引号包裹的数据都是字符串

   • 字符串拼接，用 + ，可以字符串拼接数字

6. 模板字符串

   • 必须用反引号 `我今年${27}岁了`

7. 布尔型 boolean

   let idColl=true

8. undefined 未定义类型

   console.log(undefined+1)

9. 空值 object

   let obj=null

   console.log(null+1)

10. 检测数据类型

    typeof x

    typeof(x)

11. 输入的值默认都是字符串的数据类型

12. 数据类型转换

    • 隐式转换：加号两边有一个是字符串，另一侧也会变成字符串；减号会把字符串隐士转化成数字
    • +"123"
    • 1+"1"
    • 2-"1"
    • 显式转换
    • Number("123")
    • +"123"
    • console.log(parseInt("12.3px")) // 从字符串的头部开始识别数字
    • console.log(parseFloat("12.3pi"))