JS基础01

1.Javascript 介绍

     简介：

        ECMAScript：

                规定js基础与大核心知识。

        Web APIs：

                DOM：操作文档，如对页面元素进行移动大小，添加删除等操作。

                BOM： 操作浏览器，如页面弹窗，检测床偶宽度，存储数据等。

权威网站：MDN

     书写位置：

                1.内部Javascript

                        规范：script 标签写在</body>上面

                2.输入输出语法

                        a.   输入语法

                                向body内输出内容，如果输出的内容写的是标签，也会被解析成网页元素

document.write('要输出的内容');

                                页面弹出浸膏对话框

 alert('要输出的内容')；

                                控制台输出语法，程序员调试使用

console.log('控制台打印')

                        b. 输出语句

prompt('你是什么代笔')

               3.字面量 （literal）:                                                                                        

                在计算机描述事/物，数字字面量、字符串字面量、数组字面量、对象字面量等。

2. 变量

        变量是计算机存储数据的“容器”；并不是数据本身。

        1.使用变量

                a . 声明变量

                        构成：声明关键字、变量名（标识）

                        语法：

let 变量名

                b. 变量赋值---也可以在赋值之后更新变量

                        定义一个变量后就能够初始化（赋值）。在变量名之后跟上一个“=”，然后是数值。

         2. 规范变量名

                        不能使用关键字，只能用下划线、字母、数字、$组成，且数字不能开头；严格区分大小写。 

           3. 数组

                        语法：

let 数组名 = [数组1， 数组2， ···，数组n]

                        例子：

<script>
        let arr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
        console.log(arr)
        // 取其中一个值   数组名[索引]  （索引就是从第一个开始，第一个就是0，依次往后）
        // 取第一个值星期一
        console.log(arr[0])
        // 取最后一个值星期日
        console.log(arr[6])
</script>

3. 数据类型

        基本数据类型：

                number 数字型、 string 字符串型、 boolean 布尔型、 undedfind 未定义型、 null 空类型；

        引用数据类型：

                object 对象、 function 函数、 array 数组；

        1. 数字类型（number）

                Js中的正数、负数、小数等 统一称为数字类型。

         2. 字符串类型（string）

                通过单引号（''）、双引号（“”）或者反引号（`）包裹的数据都叫字符串，单双引号本质上没有区别，推荐使用单引号。

               注意：

                  1.单双引号必须成对使用；

                  2.单/双引号可以互相嵌套，但是不可以自己嵌套自己；

                  3.必要时可以使用转义符\，输出单/双引号。      

              a. 字符串拼接

// 利用 + 做拼接
        console.log('我是' + 'XXX') 

        console.log('我今年年龄是：' + 18)

        let age = 20
        console.log('我今年年龄是：' + age)

             b.模板字符串 ``

                作用：拼接字符串和变量。

                内容拼接变量时，用 ${} 包住变量。

        3.布尔类型（boolean）、未定义型（undefined）、空类型（null）

                布尔：表示肯定或者否定时在计算机中对应的时布尔类型数据；它有两个固定值 true（真） 和 false（假）。

                未定义：只声明变量，不赋值

                空：赋值，但值是没有数据的

              控制台输出语句和检测数据类型

                        a. 通过typeof关键字检测数据类型

       // 用typeof检测返回的是什么数据类型
        console.log(typeof 123)
        console.log(typeof '123')
        console.log(typeof true)
        console.log(typeof undefined)
        console.log(typeof null)

 

4. 类型转换

        Js是弱数据类型：Js也不知道变量到底属于那种类型，只有赋值了才清楚。当使用表单，prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。

        隐式转换：

                某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换成为隐式转换。

                规则：

                a . + 号两边只要有一个是字符串，都会把另外一个转成字符串。

                b . 除了+以外的算数运算符，如 - * /等都会把数据转成数字类型。 

    // 隐式转换  内部把18转化成了字符串的 '18'
        console.log('pink' + 18)
        console.log(10 + '10') //1010

        // -  *  /  把字符串的'10' 转化为 数字型 10
        console.log(10 - '10') //0


        // 小技巧：字符串转成数字型
        let num = '10'
        console.log(num)  //此时还是字符串类型
        console.log(+num)  //这个时候转化成了数字型
        console.log(10 + +'10')  //这个含义是10+正10，结果应该为20

        显示转换： 

                数字型转换：

                      Number、parseInt、parseFloat

// Number(数据)  只能放数字类型的字符，不能放abc这样的，否则返回的是NaN
        let num = '10'
        console.log(Number(num))
        console.log(Number('10.1abc'))

        //parseInt 转化为数字型，只保留整数，没有四舍五入
        console.log(parseInt(num))
        console.log(parseInt('10.111'))

        //parseFloat 转化为数字型，会保留小数;经常用于过滤单位
        console.log(parseFloat('10.999'))
        console.log(parseFloat('10.9abc'))

                字符型转换： 

        console.log(String(10))

        let age = 18
        console.log(age.toString())
        // 把18转换成二进制
        console.log(age.toString(2))