JS初学者认知

1.js的书写格式分为 内部式,行内式,外链式,

1. <!-- 内部js写在script标签里面 -->
    <script>
        alert('大家早上好')
     </script>


2. <!-- 行内js写在标签内部 -->
       <button onclick="alert('大家早上好') ">点击我,弹出大家早上好</button>

3.<!-- 外部js 外链式 写项目时使用 -->
       <script src="./js/deom.js"></script>

2.输入和输出

 <script>
        // 输入语法:向用户输出
        // 向网页body标签内输出,还可以解析标签
        document.write('<h1>今天天气不错</h1>')


        // 向页面弹出一个弹出框
        alert("你好蔡徐坤")

        // 3控制台打印,程序员用的多,一般找bug
        console.log('控制台打印');
        
        // 输入语法:
        // 弹出对话框,提供给用户输入
        prompt("请输入你的银行密码")

         // 输出语法
        //  确认框,提供给用户进行确认,了解
         confirm('你好好看')
    </script>

3.数据类型和检测数据类型

  <!-- // 检测数据类型,目测 通过数据颜色进行判断,不推荐
    数值型和布尔型,显示颜色是蓝色或紫色
    字符串显示的是白色
    null和undefind显示灰色 -->
     <!-- 目标:精准检测数据类型  关键字:typeof  返回值 
     对应数据的数据类型 -->
    <script>
        // 写法一:
        console.log(typeof '10')//string
        // 写法二:
        console.log(typeof ('10'))

        console.log(typeof 10)//number
        console.log(typeof 'false') //string
        onsole.log(typeof false) //boolean

        onsole.log(typeof undefined) //undefind
        
        //面试题:null返回的是一个空对象
        onsole.log(typeof null) // object
    </script>

4.变量基本使用

 <script>
        // 1.变量是什么?变量是一个容器,也可以玲姐为一个装东西的盒子,黑在计算机里面
        //是用来装数据的
        //prompt('请输入你的姓名')


        // 变量基本使用
        
        //声明变量 使用关键词let 变量名 num
        let num = 20
        console.log(num);
        //声明变量 使用关键词let 变量名 uname
        let uname = "张三"
        console.log(uname)

        //   
        let age 
        console.log(age);//undefind
    </script>

5.两个变量值进行交换

<script>
        // 1.声明两个变量一个是 num1 一个是num2 赋值分别是10 和20
        let num1 = 10
        let num2 = 20
       // 2. 声明一个零食变量 let temp
       let temp 
        //   把num1的值复制一份给temp,此时临时变量值为10
         temp = num1
        //   把num2的值复制一份给num1,这样做到num1的值为20
          num1 = num2
        //  若想做到num2的值为20,那么就把temp 临时的值 赋值给num2
        //  这样才能做到原乡 num1值为10 num2值为20,转换为
        //  num1值为20,num2值为10
          num2 = temp
        // 后面的浏览器会自动删除temp变量
          console.log(num1,num2,temp)
    </script>

6.常量

 <script>
        // 常量:不会变化的值,或者也可以理解为使用const进行声明的变量叫常量

        const π = 3.1415926
        console.log(π);

        // 和变量不一样的地方
        // 1.常量必须要赋值,不初始化就报错

        const age = 18
        //  常量的值是固定不变的,如果强制修改会报错
         age = 20
         console.log(age);
         // let 和const什么时候用let什么时候用const?
         //总结: 当你的值不会修改不会发生变化时,我们用const声明,如果你的值需要
        //  进行修改和变化就是用let声明
    </script>

7.算数运算符

<script>
        // 表达式:就是一段用来求值的代码,一定会有结果产生,以来运算符进行计算


        //算数运算符,+ - * / 取余数等
         console.log(1 + 2 + 3); // 6

         //取余 % 一般判断一个数是否能整除,看他的余数是否为0 为0就可以
         console.log(10 % 3); //1
         console.log(50 % 49); //1

         //第一个值小于第二个值,直接返回第一值
         console.log(3 % 5);

         
    </script>

8.页面输出案例

<script>
     //+号 数字相加,字符串就拼接
     console.log(1 + 1); //2
     console.log('1' + '2'); //'12'

        let age = prompt('请您输入年龄')
        let uname = prompt('请您输入名字')
        document.write(`大家好,我叫${uname},今年${age}岁了`)

        // 模板字符串 es6也就是js第6个版本推荐出来拼接字符串使用
        // ``反引号里接模板,变量用${}进行包裹
    </script>

9.赋值运算简写

 <script>
        // 赋值运算符:把右边的的值赋给左边 ,左边必须是一个盒子容器

        //需求:把age+1
        //let age = 10
        //   age = age + 10
        // 简化书写:
        //    age +=1
        // console.log(age);

      //需求:把age-1
        //let age = 5
        //   age = age -1
        // 简化书写:
        //    age -=1
        // console.log(age);




        //需求:把age除以5 取得是余数
        // age = age % 5
        //  简化书写:
        //    age %=5

    </script>

10.一元运算符

 <script>
        //一元运算符:只有一个数参与运算的是一元运算符,作用是用来计数的
         let num = 1
         // num = num + 1
         // 优化
         // num += 1


         // 一元运算符 ++自增 每次+1 --自减每次-1
         //++在后
         //num++
         //++在前
         //++num
        //   console.log(num); //2

        //注意点:
        // 1.++在前和++在后单个使用时没有区别,都是+1
        //反之--和++一致的意思
        //    2.在参与计算时,++在前先+1在输出,++在后先输出再加1
        //   console.log(num + num++);//2
        console.log(num + num++ + num);//4
        //     1+2 
           console.log(num + ++num); //3

11.运算符作比较

//比较运算符 作比较: 返回都是布尔数据类型
        
        //一个=号在赋值操作
        let a = 10
         console.log(a = 10);//10
         console.log(a == 10);//true
         console.log(a === 10); false

         //2个=号是比较值,比较的是他的值和数据类型 推荐的比较使用方法,更加严谨的比较
         console.log(2 == 2);true
         console.log(2 =='2');true

         //3个=号成为全等 ,比较的是他的值和数据类型,推荐的比较使用方法,比较严谨
         console.log(2 === '2');//false
         
        // !=不等于    判断左边是否不等于右边,比较的是值
        console.log(4 != '4');// false
        // !== 推荐 不全等, 比较的是他们的值和数据类型
        console.log(4 !== '4');//true
         </script>