JS超详细的入门小结

1、js三个组成部分

(1) ECMAScript - JavaScript的核心

(2)dom 文档的对象模型

(3)bom 浏览器对象模型

2、js的书写方式

(1)行内样式

<button onclick="alert" >我是行内样式</button>

(2)内部样式

<script> alert('我是内部样式')</script>

(3)外部样式

和css相似需要引入 scr文件

  <script src="./js外部.js"></script>
  <!-- js三种书写位置(与css一致)

1.行内写法 : 写在标签行内

2.内部写法 : 写在script标签内部

3.外部写法 : 写在js外部文件中,使用script标签的src属性导入

* 注意： 如果script标签写了src属性，就表示外部写法。此时内部的js代码不会执行。 -->

1、js的两种注释写法

1.单行注释：vscode快捷键 CTRL + /

2.多行注释：vscode快捷键 ALT + SHIFT + A

2、输入与输出语句

输出语句1：在网页弹出一个提示框，输出数据，弹出一个提示框，通常用于提示用户，也可以用于调试

alert("hello world");

输出语句2：在控制台打印某个数据，打印某个数据的值，查看数据是否成功
这个写法不是给用户看的，而是给程序员自己调试看的

console.log("欢迎来到我的世界");

输出语句3：将数据显示到网页

document.write("你是世界上最厉害的王者");

输入语句1：在网页弹出一个输入框，让用户输入数据

prompt("请问你今年多大了？");

输出语句：在网页弹出一个确认框，让用户输入确认/取消 二选一

confirm("你确定你今天吃饭了吗？");

3、五种基本数据类型

5.1 string类型 : 字符串 一切以 单引号’’ 双引号"" 反引号``包起来的内容
作用 : 用于展示文本

console.log("我是菜鸟程序猿")

5.2 number类型 : 数值 一切数学中的数字。

//作用 : 用于数学计算
console.log(123) //整数,默认正整数
 console.log(-123) //负数
console.log(9.9) //小数
console.log(Infinity) //特殊数值,无穷大

5.3 boolean类型 : 布尔 只有两个值 : true(真) false(假)

 //作用 : 用于条件判断  true:条件成立  false:条件不成立
 console.log(true)
 console.log(false)

5.4 undefined : 未定义 只有一个值 undefined

在程序中，字符串未声明变量时，后台打印输出会出现undefined

console.log( undefined )

5.5 null : 空值 只有一个值 null

console.log( null )

4.typeof 检测数据类型

 console.log( typeof 123 )             //'number'
 console.log( typeof '123' )            //'string'
 console.log( typeof true )             //'boolean'
 console.log( typeof undefined )    //'undefined'
 console.log( typeof null )              //'object'

5.变量

变量的作用及原理
作用：将数据存储在内存中
原理：内存中一块存储数据的空间

 <script> 
        1.变量语法：
            1.1 声明变量 ：   let 变量名;
            1.2 变量赋值 :    变量名 = 值;
            1.3 变量取值 :    变量名
        2.变量使用注意点：
            2.1 变量不能重复声明，程序会报错
            2.2 变量重复赋值，会先销毁旧值，然后存入新值
            2.3 一个变量 赋值给 另一个变量，会将自己的数据拷贝一份然                   后赋值
        //声明变量并且赋值
        let num1 = 10;
        /* 注意点1 ： 变量不能重复声明，否则程序会报错 */
        // let num1 = 20;
        /* 注意点2 ： 变量重复赋值，会先销毁旧值，然后存入新值 */
        num1 = 20;
        /* 注意点3 ： 一个变量 赋值给 另一个变量，会将自己的数据拷贝一份然后赋值 */
        let num2 = num1;
        console.log(num1,num2);
    </script>
    </script>

补充：变量命名的规范与规则
规则：必须要遵守，否则会报错。由语法决定
1. 变量只能以下划线、字母、$开头，后面接任意的数字、下划线、字母、$；
2. 不能以JS的关键字作为变量名
3.1 js是严格区分大小写的， 例如：age与Age这是两个不同的变量名
3.2 规范: 大家都遵守的一种编码习惯，主要是为了提高代码的易读性
1.起名要有意义，最好用英语名词作为变量名
2.使用驼峰命名法：变量名第一个单词首字母小写，后面如果由其他单词则每一个单词的首字母大写
小练习：

<script>
        //需求：交换两个变量里面的值
        let num1 = 10
        let num2 = 20
        //思考：能否直接交换
        // num1 = num2
        // num2 = num1
        // console.log( num1,num2)//20 20
        //正确方式：使用临时变量交换
        let temp = num1
        num1 = num2
        num2 = temp
        console.log( num1,num2 )//20 21
    </script>

常量和变量的区别
变量 : 值可以修改, 使用let声明
常量 : 值不可以修改,使用const声明

   //变量可以修改值
        let age = 18
        age = 19
        console.log(age)

        //常量不可以修改值
        const G = 9.8
        let PI = 3.14 
        G = 10//程序报错
        console.log(G)

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

 // name是变量, '张三'是字面量
        let name = '张三'
        console.log( name )//变量取值,控制台打印'张三'
        console.log( '李四' )//字面量(又叫直接量)
        //字面量举例
        console.log( 123 )//数字字面量
        console.log( '123' )//字符串字面量
        console.log( true )//布尔字面量
        console.log( [10,20,30] )//数组字面量
        console.log( {name:'ikun'} )//对象字面量

6 运算符与表达式

1.1 算术运算符
1.运算符 : 有运算作用的符号
2.算术运算符 : 用于 数学算术运算
+ - * / %(求模运算,相当于取余数)
3.表达式 : 由运算符组成的式子
4.算术表达式 ： 由算术运算符组成的式子 例如 1+1
重点： 任何表达式,都一定会有运算结果
1.2 赋值运算符

<script>
    /*赋值运算符 
    =  +=  -=  *=  /=   %=
    */
    //+=
    let num1 = 10;
    num1 += 10;//这行代码相当于 num1 = num1 + 10 的简写形式
    console.log ( num1 );//20
    //-=
    let num2 = 70;
    num2 -= 10; //相当于  num2 = num2 - 10;
    console.log(num2);//60
    //*=
    let num3 = 20;
    num3  *=  4;  //相当于  num3 = num3 * 4;
    console.log(num3);//80
    // /=
    let num4 = 90;
    num4 /= 3;//相当于 num4 = num4 / 3
    console.log(num4);//30
    let num5 = 10;
    num5 %= 3; // num5 = num5 % 3;
    console.log(num5);//1
</script>

1.3自增自减运算符

//1.自增运算符 ++
 //自增表达式:   num++
    let num1 = 10;
    num1++;//这行代码相当于 num1 = num1 + 1 的简写形式
    console.log ( num1 );//11
    //2.自减运算符 --
    //自减表达式： num--
    let num2 = 20;
    num2--;//这行代码相当于 num2 = num2 - 1 的简写形式
    console.log ( num2 );//12

1.4 关系运算符

<script>
    1.关系运算符（比较运算符）：比较两个数据之间的关系（某种条件是否成立）
        * 八种： >  >=  <  <=  ==  !=  ===全等 !== 不全等
    * 2.关系表达式：由关系运算符组成的式子    例如:  2 > 1
            * 只要是表达式，就会有运算结果
     * 3.关系表达式的结果一定是布尔类型：true代表成立，false代表不成立
    //1.基本使用
    console.log ( 5 > 3 );//true  成立
    console.log ( 100 < 1 );//false 不成立
    //2.相等与不等:只比较数据的值，不比较数据的类型
    //注意：一个 = 号表示赋值运算符  两个 == 是比较运算符，它们作用不一样，不要搞混淆了
    console.log ( 1 == 1 );//true   常用
    console.log ( "1" == 1 );//true  他们的值一样，只是数据类型不一样
    //3.全等不全等： 先比较数据的值，再比较数据的类型
    console.log ( "1" === 1 );//false  两者的值虽然相等都是1，但是他们数据类型不一样，所以不成立
</script>

1.5 逻辑运算符

<script>
        0.关系运算符：某种条件的关系（成立/不成立），例如我的年龄大于你的年龄30>20
        1.逻辑运算符：多个条件之间的关系
        2.逻辑运算符只有三种
            * && :逻辑与 ，读作并且
            * || :逻辑或，读作或者
            * !  :逻辑非，读作取反
                * true（真）变false（假），false（假）变true（真）
     * 3.逻辑表达式: 表达式1 逻辑运算符 表达式2 
     
    //1.逻辑与&&结果： 一假为假     （左右两边同时成立，才为真，否则为假）
    //表达式1    &&  表达式2       运算结果
    //真              真             真
    //真              假             假
    //假              真             假
    //假              假             假
    console.log ( 100 > 50 && 10 > 9 );//true  左右两边同时成立
    console.log ( 100 > 500 && 10 > 9 );//false   因为左边不成立
    
    //2.逻辑或 ||结果 : 一真则真  （左右两边同时为假，才为假，否则为真）
    //表达式1    ||  表达式2    运算结果
    //真               真         真
    //真               假         真
    //假               真         真
    //假               假         假
    console.log ( 100 > 500 || 10 > 9 );//true  只要有一边为真则为真
    console.log ( 100 > 500 || 8 > 9 );//false 只有两边都不成立才为假 
    //3.逻辑非！ ： 又叫做取反  真变假 假变真
    //    ！    表达式   结果
    //           假       真
    //           真       假
    let res = !false;
    console.log ( res );//true  假变真，真变假
    console.log ( ! ( 2 > 1 ) );//false     2>1的结果是true    与true相反的就是false
</script>

1.7-运算符优先级
小括号>一元运算符>算数运算符>关系运算>相等运算>逻辑运算>赋值运算>逗号运算
一元运算符里面的逻辑非优先级很高
逻辑与比逻辑或优先级高