JS 初体验

JS 的组成

ECMAScript 定义了js的语法规范，描述了语言的基本语法和数据类型
Dom 文档对象模型由HTML提供每一个 html 标签都是一个Dom
Bom 浏览器对象模型, 由浏览器提供的可以实现页面的跳转

js 的书写方式

外部样式:

外部样式与css内部的引入类似, 只不过需要写一个外部的 .js 文件, 然后通过 script 的 src 属性, 引入进来工作时常用（需要创建一个js文件用于存储js代码）

<script src="1.js"></script>

    // 在改js文件钟书写就是代码
 console.log(132);

内部样式(常用):
直接在 body 标签末尾书写一个标签 script在这个标签内部, 就能书写 JS 代码

<script>
    // JS 代码书写在 这个标签就行了
    // 在控制台, 会有一个 打印, 打印的内容为 '你好 2301'
    console.log(132);    
</script>

内联（行内）样式: (了解就行, 后续不要这样去写)

<a href="javascript:concole.log(123);">
 
<div onclick ="console.log('123456')">123456</div>

js中的变量

简单的说: JS 的变量是计算机中存储数据的标识符我们如果有数据, 不会直接放到 "手里边", 而是会存到某一个地方, 这个地方就是变量后续我们如果想用这个数据, 那么直接通过这个变量就行了

认识变量

如何创建/定义一个变量

语法: var 变量名
变量名, 通常是字母组成的, 一般没有人用拼音
定义变量后, 变量内部的值, 默认为 undefined(未定义)

如何给定义的变量赋值

定义好的变量名 = 你想存到这个变量内部的值
注意: JS 中一个等号, 叫做赋值号

JS 中分号的含义

代表当前这一行代码结束 (可写, 可不写, 推荐不写)(建议书写，后续如果在严格模式下会显示结果或者可能报错)

JS 的空格

如果是关键字后边(var) JS 语法规范要求必须加
如果是在符号的两边, 可加可不加,(建议书写，后续如果在严格模式下会显示结果或者可能报错)

// 定义一个变量
        var num;
        console.log(num);

        // 给定义的变量 赋值
        num = 100;
        console.log(num);

        // 将前两步, 结合
        var num1 = 100;  // 定义一个变量, 名为 num1, 并赋值为 999
        console.log(num1);

阶段小练习(考考你)

// 交换两个变量的值  


 var num1 = 100
        var num2 = 200

        // num1 = num2  // 此时这行代码执行完毕, 原本 num1 的值, 就已经失去了
        // num2 = num1

        // 借助第三个变量实现交换
        var num3 = num1 // 将原本 num1 内部存储的值, 保存在这个 num3 中
        num1 = num2
        num2 = num3

        console.log(num1)
        console.log(num2)

检测一下学的成果(练习上文)

/*
           需求:
          num1 内部的值为 200
          num2 内部的值为 100
*/

变量的命名规范

命名规范 (建议遵守, 不遵守也不报错)

命名是要求见名知意*
采用驼峰命名 (多个单词拼接时, 第二个单词开始的首字母大写)*

2. 命名规则 (强制要求, 必须遵守, 否则报错)

由字母数字下划线 $(英文) 组成, 并且, 不能以数字开头
字母是区分大小写的
不能是关键字或者保留字
- 关键字 var, let, const, if, function
- 保留字, 现在在 JS 中没用, 但是在将来的某个版本, JS需要使用 promise, async, await

        // var a = 1
        // var bigbox = 100
        // var bigBox = 100

        var num1 = 100
        // var 1num = 200

        console.log(NUM1)

js 的数据类型

JS 的基本数据类型 (简单数据类型)

         1. Number 类型
             不区分整数, 浮点数, 特殊值
             整数小数都可以算作 Number,  特殊值 NaN 
                 (如果一个值是 Number 类型, 但是不能用常规数字来表达, 那么就会用 NaN 来代替)
         2. String 类型
             在 JS 中, 只要是 引号包裹起来的内容, 就是 String
         3. undefined 类型
             未定义
             undefined 本身就是一种数据类型, 并且 变量 在定义但是没有赋值的时候, 默认的值就是 undefined
         4. Boolean 类型
            只代表两个意思, 真/假   正确/错误
                true    真
                false   假
         5. null 类型
            空  空对象
            null 本身就是一种数据类型

        // 1.Number
        var num = 2301

        // 2. String
        var str1 = '你好'
        var str2 = "2301"

        // 3. undefined
        var un1 = undefined
        var un2

        // 4. Boolean
        var bo1 = true
        var bo2 = false

        // 5. null
        var nu = null

js数据类型的检测

JS 的数据类型检测变量的类型没有一个固定值

语法: 
    typeof 要检测的变量名
    typeof(要检测的变量名)
  
    typeof 的缺点:
       只能用来检测基本数据类型, 并且在检测 null 的时候, 返回的不是 null 而是一个 object
  
   后续会有其他方法用来检测数据类型
  
   面试题: typeof 能检测数据类型吗? 能检测什么类型的数据? 检测 null 的时候 会返回什么

var num = 2301
        var str2 = "2301"
        var un1 = undefined
        var bo1 = true
        var nu = null

        console.log(typeof num) // 将 变量 num 值 的类型 打印到控制台
        console.log(typeof(str2))   // 将变量 str2 值的类型 打印到控制台
        console.log(typeof(un1))
        console.log(typeof(bo1))

        console.log(typeof(nu)) // 将变量 nu 值的类型, 打印到控制台

数据类型的相互转换

其他数据类型转换为数字类型

  1. Number(数据)
      Number 会将传入的 '数据' 处理为 number 类型后 返回 
              字符串: 纯数字转为对应的数字
                     空字符串和空白字符串 都转换为 0
                     非空非纯数字字符串转换为 NaN
              布尔值: true 转为 1; false 转为 0
              undefined: 转为 NaN
              null: 转为 0
    
  2. parseInt()   
      字符串转整数的方法
              浮点数: 直接做 取整操作
              字符串: 将字符串转为 整数数字, 并且包含取整操作
                         如果字符串后续有字母或者非数字的内容, 那么直接保留开头的数字, 忽略后续内容
                         如果字符串开头为 非数字, 直接转为 NaN
              布尔值: undefined, null 都会转为 NaN
    
  3. parseFloat() 
              字符串转为 浮点数(小数)
              转换规则与 parseInt 类似, 但是没有取整 
    
  4. 我个人在开发的时候 喜欢使用的一种方式(★建议运用一下我的方法)
             console.log(原本的数据 - 0)

小任务: 自己整理第四种方式的转换规则

当转换为数值类型时

// 当转换为数值类型时
var num = Number('2301')
     console.log(num)// 2301
     console.log(Number('2301')) // 2301
     console.log(Number('2301qwer')) // NaN
     console.log(Number('')) // 0
     console.log(Number(' ')) // 0
     console.log(Number('@#$')) // NaN
     console.log(Number(true))   // 1
     console.log(Number(false))  // 0
     console.log(Number(undefined))  // NaN
     console.log(Number(null))   // 0
// 当转化为(浮点数)小数 时
     console.log(parseInt(100.1))    // 100
     console.log(parseInt(100.1))    // 100
     console.log(parseInt('100.1qwert'))    // 100
     console.log(parseInt('100qwert'))    // 100
     console.log(parseInt('qwert100'))    // NaN
     console.log(parseInt('@#$%'))    // NaN
     console.log(parseInt(''))    // NaN
     console.log(parseInt(' '))    // NaN
     console.log(parseInt(true)) // NaN
     console.log(parseInt(false))    // NaN
     console.log(parseInt(undefined))    // NaN
     console.log(parseInt(null)) // Na
    // 当转化为(浮点数)小数 时
     console.log(parseFloat(100.1))    // 100.1
     console.log(parseFloat('100.1'))    // 100.1
    
    // 我的方法:
    console.log('2301' - 0)
    console.log('2301qwe' - 0)
    console.log(true - 0)
    console.log(undefined - 0)

其他类型转字符串类型

         1. 变量.toString();
                 注意: undefined 与 null 不能使用
    
         2. String(要转换成字符串的数据或者变量名);
    
         3. 我个人在开发的时候常用的一个方法
                 要转换为字符串的数据/变量名 + '';

        var num = 100
        console.log(typeof(num.toString())) // 将 num 的值转为 字符串类型
        var bo1 = true
        var bo2 = 'true'
        console.log(bo1.toString())
        var un = undefined
        var nu = null
        console.log(un.toString())
        console.log(nu.toString())
        console.log(String(100))    // '100'
        console.log(String(true))   // 'true'
        console.log(String(false))  // 'false'
        console.log(String(undefined))  // undefined
        console.log(String(null))  // null

        
        console.log(100 + '') // '100'
        console.log(undefined + '') //'undefined'
        console.log(null + '')      // 'null'

其他数据类型转布尔类型

Boolean(要转换的数据/变量名) 能够将任何数据类型, 转换为布尔类型转为 false: NaN, 0, '', null, undefined

      转为 true:
          非 0/NaN 的数字
          非空字符串
    
      我个人在开发中常用的一种方式
                  !!要转换的数据/变量名

// 转为 false:
        console.log(Boolean(NaN))
        console.log(Boolean(0))
        console.log(Boolean(''))
        console.log(Boolean(null))
        console.log(Boolean(undefined))

        // 转为 true:
        console.log(Boolean(1))
        console.log(Boolean(-1))
        console.log(Boolean(999))
        console.log(Boolean(999.999))
        console.log(Boolean(' '))
        console.log(Boolean('12345qwert#$%^&'))

        // 我的方法
        console.log(!!100)
        console.log(!!'')

JS 的算数运算符

// 称为 表达式, 每一个表达式, 都会得到一个结果, 然后用这个结果参与周围程序
         
// + - * / %
// 例如 :
   console.log(5 + 6);
   console.log(11);

重点

// 算数运算符中, + 具有特殊的地方
//    正常 符号两边如果都是 数字类型, 那么会求和然后参与周围程序
//    如果符号两边 任意一个位置 出现了 字符串, 那么会运行拼接
          
// 5 + '6' ->  拼接后的值: '56'
          
// 符号的运算顺序
//     先乘除取余, 后加减, 如果有 小括号, 那么先运算小括号
//      JS 中 中括号, 和大括号, 有特殊含义

代码解析

        console.log(5 + 6)  // 11
        console.log(4 - 1)  // 3
        console.log(2 * 3)  // 6
        console.log(9 / 3)  // 3
        console.log(9 % 3)  // 0


        console.log(5 + 6)  // 11
        console.log(5 + '6')  // '56'
        console.log(5 + 'qwer')  // '5qwer'

        console.log(4 - 1)  // 3
        console.log(4 - '1')  // 3
        console.log('4' - 'qwe')  // NaN
        console.log('4' - true)  // 3
        console.log('4' - false)  // 4
        console.log(5 * '3')     // 15
        console.log('5' * 'qwe') // NaN

作业：

// 1. var num = 3 - '36' % 5 + '2' - 2
// 2. 不考虑四舍五入 将一个数字进行保留两位小数 (提示：parseInt);

js初体验