练习向----- js三大核心—变量—浏览器输出语法—js 的数据类型—检测数据类型—数据类型转换—检测非数字的方法—运算符—条件分支 - if

本文链接：https://blog.csdn.net/know__ledge/article/details/132117674

一、 js 的书写位置

行内式(强烈不推荐)

a 标签
在 href 属性上书写 javascript: 一段js代码 ;
当你点击该 a 标签的时候, 会执行这一段 js 代码
非 a 标签

需要在标签上添加一个行为属性onclick
在属性值的位置直接书写 js 代码即可
内嵌式(不太推荐)
把 js 代码书写在一个 script 标签对内
注意:

script 标签可以书写在页面任何位置
一般推荐书写在 head 的末尾或者 body 的末尾
script 标签内的 js 代码不需要任何行为, 打开页面就会执行
一个页面可以书写多个 script 标签, 会按照从上到下的顺序依次执行

外链式(推荐)

把 js代码书写在一个.js后缀的文件内
在当前页面内以 script 标签的 src 属性引入

注意:

src 属性, 不是href
script 标签可以书写在页面任何位置一般推荐书写在 head 的末尾或者 body 的末尾
script 标签内的 js 代码不需要任何行为, 打开页面就会执行
一个页面可以书写多个 script 标签, 会按照从上到下的顺序依次执行
当一个 script 标签被当做外链式引入一个 js 文件以后, 不能当做内嵌式使用了

第一段 js 代码
语法: alert(‘文本内容’)
注意: 小括号内的内容如果不是纯数字, 那么要使用引号包裹(单引号或者双引号)
作用: 在浏览器出现一个弹出层(提示框), 显示对应的文本内容

<!-- a 标签行内式 -->
<a href="javascript: alert('努力努力1') ;">this</a>

<!-- 非 a 标签行内式 -->
<div onclick="alert('努力努力2')">this</div>

<!-- 内嵌式 js 代码 -->
<script>
	 alert('努力努力3')
</script>

<!-- 外链式 js 代码 -->
<script src="./js/day02.js"></script>

二、js三大核心

DOM - Document Obejct Model 文档对象模型
- 本质: 把所有的和页面元素相关的内容抽象出来, 做成一个模型 API
- 私人: 规定了文档的显示结构，可以轻松地删除、添加和替换节点
BOM - Borwser Obejct Model 浏览器对象模型
- 本质: 把所有的和浏览器相关的内容抽象出来, 做成一个模型 API
- 私人: 操作和浏览器相关的属性和方法，浏览器自带的功能
ECMAScript(ES)
- js 的语法标准

三、变量

变量的命名规则和规范
规则:
1. 变量只能由数字(0-9) 字母(a-zA-Z) 美元符($) 下划线(_) 组成
2. 变量不能由数字开头
3. 严格区分大小写
4. 不能使用关键字或者保留字
规范：
1. 变量语义化
2. 驼峰命名法
3. 不要用中文

/*
  多行注释
*/

// 单行注释

js 的变量
    + 在程序的运行过程中用来保存一个中间值的内容
    + 例子:
      => 202308051s 是多少天 ?
      => 202308051 / 60 / 60 / 24
      => 提前准备一个变量: 叫做 n, 保存的值是 60 * 60 * 24
      => 再次计算的时候, 202308051 / n 就可以

  语法:
    + 定义变量: var 变量名 = 值
      => var 定义变量的关键字, 告诉浏览器, 我要定义变量了
      => 变量名: 你自己定义的名字
      => 等于号(=): 赋值符号, 把右边的内容给到左边的变量
      => 值: 该变量存储的内容

定义变量
- 定义了一个叫做 n 的变量, 保存的值是 100
- 将来只要你使用 n 这个变量的时候, 就是在使用 100 这个值

例子: n * 22 等价于 100 * 22

var n = 100;

定义多个
- 多个之间使用逗号(,) 分隔

var n = 100, m = 200;

四、浏览器输出语法

在浏览器输出一些内容
目的:

1.展示给用户看到
2. 排错 / 检验

语法

弹出层alert('文本内容')
控制台console.log('文本内容')
页面输出document.write('文本内容')

共同点

当你在小括号内书写内容的时候
=> 如果有引号包裹, 表示你要输出的是一段没有意义的文本
=> 如果没有引号包裹, 表示你要输出的是纯数字, 布尔值或者变量

五、js 的数据类型

基础数据类型(简单数据类型)

=> Number 数值
=> String 字符串
=> Boolean 布尔
=> Undefined 空
=> Null 空

复杂数据类型(引用数据类型（地址）)

=> Object
=> Function
=> 以后再说

Number 数值

+ 整数
+ 浮点数(小数)
+ 科学计数法
+ 其他进制表示方式
	=> 二进制     0b 开头
	=> 八进制     0o 开头
	=> 十六进制   0x 开头
+ NaN(Not a Number): 非数字

var n1 = 100
var n2 = -100
var n3 = 100.222
var n4 = -234.567
// e5 表示 10 的 5 次方
// 10e5 表示 10 * 10^5
var n5 = 10e5
console.log(n5)

String 字符串

+ 就是一段文本
+ 所有被引号包裹的内容都叫做 字符串
	=> 单引号或者双引号无所谓
+ 在 JS 内被 反引号(``) 包裹的也叫作字符串
	=> 叫做 模板字符串

var s1 = 'hello world'
var s2 = "hello world"
var s3 = `hello world`
console.log(s1)
console.log(s2)
console.log(s3)

模板字符串

1. 可以换行书写字符串(``)
	=> 单引号和双引号不行,会报错
2. 可以直接解析变量
	=> 当你需要在字符串内插入一段变量内容的时候
	=> 直接书写 ${ 变量 }

var s1 = '<div><div></div><div></div><div></div><div></div></div>'
    console.log(s1)
var s2 = `
      <div>
        <div></div>
      </div>
    `
    console.log(s2)
var s3 = "${n}"
    console.log(s3)
var s4 = `${n}`
    console.log(s4)

在这里插入图片描述

六、检测数据类型

+ typeof 检测
  + 语法:
    => typeof 要检测的变量
    => typeof(要检测的变量)
  + 返回值(结果): 以`字符串`的形式返回你检测的变量是什么数据类型

注意: 在 js 内, 赋值符号(=) 是优先级最低的符号
注意: 当 两个及以上 typeof 连用的时候, 返回值必然是 'string'
注意: typeof 只能准确的检测`基本数据类型`，NAN的数据类型是number

解释: typeof 工作原理（二进制）
  + 所有的数据在计算机存储的时候都是按照 二进制存储
  + js 是一种 32 位的二进制存储机制
  + 32位的前三位用来表示数据类型
    => 整数 1
    => 浮点数 010
    => 字符串 100
    => 布尔  110
    => 所有的复杂数据类型都是 000  (typeof检测不出) 
    => null 从头到尾全是 0

代码描述

  var age = 18
    //1. 使用 typeof 关键字检测 age 变量存储的是什么数据类型
   //2. 把检测结果赋值给 result 变量
   var result = typeof age
   console.log(result)
   var res = typeof result //双typeof返回String
   console.log(res)
   // 因为前一个 typeof 检测的是后一个 typeof 的返回值
   var res = typeof typeof age
   console.log(res)

在这里插入图片描述

两种语法的区别
    1. 检测的是 100 这个内容的数据类型, 得到 'number'
    2. 'number' 和 200 进行加法运算
    3. 把运算结果赋值给 r1
    var r1 = typeof 100 + 200 //number200,要加括号哈
    console.log(r1)
    1. 先计算 100 + 200 的结果, 得到 300
    2. 检测 300 这个数据的数据类型, 得到 'number'
    3. 把 'number' 赋值给 r2
    var r2 = typeof(100 + 200)
    console.log(r2)

七、数据类型转换

数据类型转换
 + 其他数据类型转换成 数值类型
   1. Number()  整体转换
   2. parseInt() 一位一位转换(不认识小数点)
   3. parseFloat() 一位一位转换(认识小数点)
   4. 取正负 整体转换
   5. 非加法运算 整体转换
 + 其他数据类型转换成 字符串类型
   1. String()  所有都能转换
   2. toString()  null 和 undefined 不能转换
   3. 字符串拼接
 + 其他数据类型转换成 布尔类型
   1. Boolean()
     => 五个是 false 的内容
       -> 数值 0
       -> 数值 NaN
       -> 空字符串
       -> null
       -> undefined

数据类型转换 - 转数值

Number()

  + 语法: Number(要转换的内容)
  + 返回值(结果): 转换好的数值类型内容
  + 转换规则:
    => 把你要转换的内容当做一个整体
    => 如果可以转换成数字, 那么就是一个合法数字
    => 如果不能转换成合法数字, 那么就是 NaN
  + 注意:
    => 布尔类型转换结果就是 1 和 0

var s = 'false'
console.log(s) //false
console.log(typeof s)  //String
var res = Number(s) 
console.log(res)  //NAN
console.log(typeof res)  //number  !!!!NAN的数据类型是number

parseInt()

  + 语法: parseInt(要转换的内容)
  + 返回值(结果): 转换好的数值类型内容
  + 转换规则:
    => 不管什么数据, 都会一位一位看待
    => 如果第一位就不能转换成合法数字, 那么直接给出结果 NaN 停止转换
    => 如果第一位可以转换为合法数字, 那么第一位保留, 继续第二位
    => 直到不能转换成合法数字位置或者结束为止
  + 注意:
    => 不认识 小数点

var s = true
console.log(s) //true
console.log(typeof s) //Boolean
var res = parseInt(s) 
console.log(res)//NAN
console.log(typeof res) //number
var re = parseInt(123+123) 
console.log(re)//246  ， 可做数学运算
var r = parseInt(123+'adfs') 
console.log(r)//123  ， 后面转换不了整数自动略去

parseFloat()

+ 语法: parseFloat(要转换的内容)
+ 返回值(结果): 转换好的数值类型内容
+ 转换规则:
 => 和 parseInt 一模一样
 => 只不过多认识了一个小数点

var s = '100.234'
console.log(s) //100.234
console.log(typeof s)  //String
var res = parseFloat(s) 
console.log(res)//100.234
console.log(typeof res) //number

取正负

+ 直接使用 + 或者 - 来决定变量
+ 转换规则: 和 Number 一模一样

var s = '100.234'
    console.log(s) //100.234
    console.log(typeof s) //String
    var res = +s 
    console.log(res)//100.234
    console.log(typeof res) //number

非加法的数学运算

+ 减法 / 乘法 / 除法 / 取余 / 位运算 / ...
+ 转换规则: 和 Number 一模一样

var s = '100.234'
    console.log(s) //100.234
    console.log(typeof s) //String
    var res = s - 0
    console.log(res) //100.234
    console.log(typeof res) //number

数据类型转换 - 转字符串

1. String()
    + 语法: String(要转换的内容)
    + 返回值: 转换好的字符串类型内容
    + `所有数据类型`都可以进行转换

2. toString()
    + 语法: 要转换的内容.toString()
    + 返回值:+ 转换好的字符串类型内容
    + 注意: 不能转换 null 和 undefined

3. 字符串拼接
    + 使用 加号(+) 进行字符串拼接
    + 加号:
      => 只有运算符两边都是 数字或者布尔 的时候, 会进行加法运算
      => 只要符号任意一边是 字符串, 就会进行字符串拼接

1. String()
var n = 100
console.log(n) //100
console.log(typeof n) //number
var res = String(n)
console.log(res) //100
console.log(typeof res) //String

2. toString()
var n = 100
console.log(n) //100
console.log(typeof n) //number
var res = n.toString()
console.log(res) //100
console.log(typeof res) //String
var s = undefined
// console.log(s.toString()) //直接报错
console.log(toString(null)) //[object Undefined]  语法错误 语法是   要转换的内容.toString()

3. 字符串拼接
var n = 100
console.log(n) //100
console.log(typeof n) //number
var res = n + ''
console.log(res)//100
console.log(typeof res)//String

console.log(1 + 2 + 3 + 4) //10
console.log(1 + '2' + 3 + 4) //1234
console.log(1 + '2' + 3 * 4) //1212
//1. 计算 '3' * 4 得到 12
//2. 1 + 2 + 12 得到 15
console.log(1 + 2 + '3' * 4) //15       字符串拼接只能用加号，其他相当于使用number转化
console.log(1+2+3+'a'*4);//NaN   number不能转化为合法数字返回NAN

数据类型转换 - 转布尔

1. Boolean()
  + 语法: Boolean(要转换的内容)
  + 返回值: 转换好的布尔类型内容
  + 在 JS 内只有五个内容转换完毕是 false
    => 数值 0
    => 数值 NaN
    => 空字符串 ''
    => null
    => undefined

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

console.log(Boolean(0.1)) //true
console.log(Boolean(-100))//true
console.log(Boolean('0'))//true
console.log(!NaN == !NaN);//true

八、检测非数字的方法

 + isNaN()
        + 语法: isNaN(要检测的内容)
        + 返回值: 是一个布尔值
          => true: 表示你检测的内容是一个 非数字
          => false: 表示你检测的内容不是一个 非数字

var r1 = isNaN('100')
console.log(r1) //false
var r2 = isNaN('abc')
console.log(r2) //true

九、运算符

1. 算数运算符
  + - * / %
  加法:
    => 当运算符任意一边是字符串的时候, 会进行字符串拼接
    => 只有运算符两边都是 数字或者布尔 的时候, 会进行数学运算
  取余:
    => 获取两个数字的余数, 不能整数的部分内容
2. 赋值运算符
  = += -= *= /= %=
  注意: += -= *= /= %= 不能直接在 var 的时候使用
3. 比较运算符(结果必然是一个 布尔值)
  > 大于
  < 小于
  >= 大于等于
  <= 小于等于
  == 等于, 在不考虑数据类型的情况下, 只要值一样就是 true
  === 等等于(全等于), 必须数据类型和值都一样的时候, 才能得到 true
  != 不等, 在不考虑数据类型的情况下, 只要值不一样就是 true, 和 == 是完全相反
  !== 不等等, 值或者数据类型只要有一个不一样, 就是不全等, 和 === 是完全相反
4. 逻辑运算符
  && 与(且)
    => 运算符两边都是 true 的时候, 才能最终结果是 true
    => 只要运算符任意一边是 false 的时候, 最终结果就是 false
    => 短路表达式
      -> 只有左边为 true 的时候, 才会执行右边的代码
      -> 如果左边为 false, 那么右边的代码不在执行
  || 或
    => 运算符两边只要任意一边是 true 的时候, 最终结果就是 true
    => 只有运算符两边都是 false 的时候, 最终结果才是 false
    => 短路表达式
      -> 只有左边是 false 的时候, 才会执行右边的代码
      -> 如果左边为 true, 那么右边的代码不在执行
  !  非(取反)
    => 本身是 true 变成 false
    => 本身是 false 变成 true
    => 双取反可以转布尔
5. 自增自减运算符
	-- ++

补充: 空值运算符 ??
  + 记录:
    => ||: 左边为 false 的时候, 使用右边的
    => ??: 左边为 空 的时候, 使用右边的

自增自减运算符

以 ++ 为例
        + 书写:
          => 前置++: ++变量
          => 后置++: 变量++
        + 共同点:
          => 不管前置还是后置, 只要执行了, 变量自身的值就会 +1
          => 在运算的过程中, 会先把计算项变成数值类型, 然后进行 +1 或者 -1 的运算
        + 区别:
          => 前置++: 先把变量的值改变(+1), 用改变后的值参与运算
          => 后置++: 先把变量的值参与运算, 然后在改变变量的值(+1)

var n = 10
var m = 10
var res = ++n + --m + ++m + n-- - m++ + n--
console.log(res) // 41
console.log(n) // 9
console.log(m) // 11

十、条件分支 - if

if (条件) { 代码段 }
if (条件) { 代码段 } else { 代码段 }
if (条件) { 代码段 } else if (条件2) { 代码段 }
if (条件) { 代码段 } else if (条件2) { 代码段 } else { 代码段 }

+++ 作用: 根据给出的条件决定是否执行代码, 或者执行哪一段代码

1. if 语句
  + 语法: if (条件) { 代码段 }
  + 作用: 如果条件最终为 true, 那么 {} 内代码段执行, 否则不执行

2. if else 语句
  + 语法: if (条件) { 代码段 } else { 代码段 }
  + 作用: 条件为 true 的时候, 执行 if 后面的 {} 内的代码, 否则执行 else 后面 {} 内的代码
  + 注意: 两个 {} 内的代码, 能且只能执行一个

3. if else if 语句
  + 语法: if (条件) { 代码段 } else if (条件2) { 代码段 }
  + 作用: 从头开始依次判断每一个条件, 哪一个条件满足, 执行哪一个条件后面的 {} 内的代码
  + 注意: 只要有任何一个条件满足了, 那么后续代码就不执行了
  + 注意: 多个 {} 内的代码, 最多只能执行一个

4. if else if else 语句
  + 语法: if (条件) { 代码段 } else if (条件2) { 代码段 } else { 代码段 }
  + 从头开始依次判断每一个条件, 哪一个条件满足, 执行哪一个条件后面的 {} 内的代码, 当所有条件都不满足的时候, 执行 else 后面的 {} 内的代码
  + 注意: 只要有任何一个条件满足了, 那么后续代码就不执行了
  + 注意: 多个 {} 内的代码, 能且只能执行一个

十一、三目运算符(三元表达式)

三目运算符(三元表达式)
        + 作用: 对 if else 语句的简写形式
        + 语法:
          => if: if (条件) { 代码 } else { 代码 }
          => 三元: 条件 ? 条件为true的代码 : 条件为false的代码

十二、条件分支 - switch

      + 准确对于某一个值的判断

      基础语法
        switch (你要判断的变量) {
          case 情况1:
            满足情况1执行的代码
            break
          case 情况2:
            满足情况2执行的代码
            break
          default:
            所有情况都不满足的时候执行的代码
        }

      注意:
        1. 变量和 case 之间, 必须是 值和数据类型 都一样, 才叫做满足条件
        2. case 不写范围性的判断
          => 如果你在 case 位置书写了一个表达式, 那么会把表达式的结果当做 case 来进行判断
        3. default 可以不写, 不写的时候, 所有 case 都不满足就没有代码执行
        4. break 可以不写, 如果不写会发生 break穿透(switch穿透)

      穿透
    => 从第一个满足条件的 case 开始, 如果没有 break 不会考虑下一个 case 是否满足, 直接执行代码
    => 直到遇到 break 或者 switch 结束为止

var week = 1
console.log(3||2) //3    左边为true直接执行左边

 switch (week) {
   case 1 || 2: //case里不能是表达式，执行的是表达式的结果(左边为true直接执行)
     console.log('星期一')
   case 2:
     console.log('星期二')
   case 3:
     console.log('星期三')
   case 4:
     console.log('星期四')
   case 5:
     console.log('星期五')
   case 6:
     console.log('星期六')
   case 0:
     console.log('星期日')
   default:
     console.log('请填入一个 0 ~ 6 之间的数字') //穿透default都穿
    }

十三、循环分支语句 - while

循环分支语句 - while
        + 作用: 根据条件重复的执行某一段代码
        + 循环三要素
          1. 开始: 定义初始变量
          2. 结束: 条件判断
          3. 步长: 修改初始变量的值

      while 循环的语句
          while (条件) {
                    重复执行的代码

                    修改初始变量
          }
        + 意义: 只要条件为 true , 就执行一遍 {} 内的代码段, 执行完毕以后再次进行条件判断, ...

案例:
在页面输出 1000 ~ 2000 之间所有的闰年
四个一个换行
需要一个计数器变量
每输出一个内容, 计数器++
判断计数器为 4 的倍数的时候, 输出一个换行

var n = 1900
// 准备一个变量当做计数器
var count = 0
while (n <= 2000) {
	 if (n % 100 !== 0 || n % 400 === 0) {
	   // 输出方式换一下
	   document.write(n + ' ')
	   // 计数器统计数字++
	   count++
	   // 判断计数器数字
	   if (count % 5 === 0) document.write('<br/>')//5个一换行
	 }
 n += 4
}