js 的书写位置——三大核心——变量——输出语法——js 的数据类型——检测数据类型——数据类型转换——检测非数字的方法——运算符——条件分支 - if——条件分支 - switch
Posted 勇敢*牛牛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js 的书写位置——三大核心——变量——输出语法——js 的数据类型——检测数据类型——数据类型转换——检测非数字的方法——运算符——条件分支 - if——条件分支 - switch相关的知识，希望对你有一定的参考价值。
DAY_2
一、 js 的书写位置
行内式(强烈不推荐)
- a 标签
在 href 属性上书写 javascript: 一段js代码 ;
当你点击该 a 标签的时候, 会执行这一段 js 代码
- 非 a 标签
需要在标签上添加一个行为属性
onclick
在属性值的位置直接书写 js 代码即可
内嵌式(不太推荐)
把 js 代码书写在一个script标签对内
注意:
1.script标签可以书写在页面任何位置
一般推荐书写在 head 的末尾或者 body 的末尾
2. script 标签内的 js 代码不需要任何行为, 打开页面就会执行
3. 一个页面可以书写多个 script 标签, 会按照从上到下的顺序依次执行
外链式
把 js 代码书写在一个 .js 后缀的文件内
在当前页面内以 script 标签的 src 属性引入
注意:
1.src属性, 不是href
2. script 标签可以书写在页面任何位置 一般推荐书写在 head 的末尾或者 body 的末尾
3. script 标签内的 js 代码不需要任何行为, 打开页面就会执行
4. 一个页面可以书写多个 script 标签, 会按照从上到下的顺序依次执行
5. 当一个 script 标签被当做外链式引入一个 js 文件以后, 不能当做内嵌式使用了
- 第一段 js 代码
语法: alert(‘文本内容’)
注意: 小括号内的内容如果不是纯数字, 那么要使用引号包裹(单引号或者双引号)
作用: 在浏览器出现一个弹出层(提示框), 显示对应的文本内容
<!-- a 标签行内式 -->
<a href="javascript: alert('hello world') ;">你点我一下试试</a>
<!-- 非 a 标签行内式 -->
<div onclick="alert('你好 世界')">你点我一下试试</div>
<!-- 内嵌式 js 代码 -->
<script>
alert('你好 我是前端小灰狼')
</script>
<!-- 外链式 js 代码 -->
<script src="./test.js"></script>
二、三大核心
-
DOM - Document Obejct Model 文档对象模型
- 本质: 把所有的和页面元素相关的内容抽象出来, 做成一个模型 API
- 私人: 操作页面元素的相关属性和方法
-
BOM - Borwser Obejct Model 浏览器对象模型
- 本质: 把所有的和浏览器相关的内容抽象出来, 做成一个模型 API
- 私人: 操作和浏览器相关的属性和方法
-
ECMAScript(ES)
- js 的语法规范
三、变量
/*
多行注释
*/
// 单行注释
js 的变量
+ 在程序的运行过程中用来保存一个中间值的内容
+ 例子:
=> 123456789s 是多少天 ?
=> 123456789 / 60 / 60 / 24
=> 提前准备一个变量: 叫做 n, 保存的值是 60 * 60 * 24
=> 再次计算的时候, 123456789 / n 就可以
语法:
+ 定义变量: var 变量名 = 值
=> var 定义变量的关键字, 告诉浏览器, 我要定义变量了
=> 变量名: 你自己定义的名字
=> 等于号(=): 赋值符号, 把右边的内容给到左边的变量
=> 值: 该变量存储的内容
- 定义变量
- 定义了一个叫做 n 的变量, 保存的值是 100
- 将来只要你使用 n 这个变量的时候, 就是在使用 100 这个值
例子: n * 22 等价于 100 * 22
var n = 100
- 定义多个
- 多个之间使用 逗号(,) 分隔
var n = 100, m = 200
四、 输出语法
- 在浏览器输出一些内容
- 目的:
- 展示给用户看到
- 排错 / 检验
弹出层
- 语法:
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></div>
<div></div>
<div></div>
<div></div>
</div>
`
console.log(s2)
六、检测数据类型
+ typeof 检测
+ 语法:
=> typeof 要检测的变量
=> typeof(要检测的变量)
+ 返回值(结果): 以字符串的形式返回你检测的变量是什么数据类型
注意: 在 js 内, 赋值符号(=) 是优先级最低的符号
注意: 当 两个及以上 typeof 连用的时候, 返回值必然是 'string'
注意: typeof 只能准确的检测基本数据类型
解释: typoof 工作原理
+ 所有的数据在计算机存储的时候都是按照 二进制存储
+ js 是一种 32 位的二进制存储机制
+ 32位的前三位用来表示数据类型
=> 整数 1
=> 浮点数 010
=> 字符串 100
=> 布尔 110
=> 所有的复杂数据类型都是 000
=> null 从头到尾全是 0
代码描述
var age = 18
//1. 使用 typeof 关键字检测 age 变量存储的是什么数据类型
//2. 把检测结果赋值给 result 变量
var result = typeof age
console.log(result)
var res = typeof result
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
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
数据类型转换 - 转数值
1. Number()
+ 语法: Number(要转换的内容)
+ 返回值(结果): 转换好的数值类型内容
+ 转换规则:
=> 把你要转换的内容当做一个整体
=> 如果可以转换成数字, 那么就是一个合法数字
=> 如果不能转换成合法数字, 那么就是 NaN
+ 注意:
=> 布尔类型转换结果就是 1 和 0
var s = 'false'
console.log(s)
console.log(typeof s)
var res = Number(s)
console.log(res)
console.log(typeof res)
2. parseInt()
+ 语法: parseInt(要转换的内容)
+ 返回值(结果): 转换好的数值类型内容
+ 转换规则:
=> 不管什么数据, 都会一位一位看待
=> 如果第一位就不能转换成合法数字, 那么直接给出结果 NaN 停止转换
=> 如果第一位可以转换为合法数字, 那么第一位保留, 继续第二位
=> 直到不能转换成合法数字位置或者结束为止
+ 注意:
=> 不认识 小数点
var s = true
console.log(s)
console.log(typeof s)
var res = parseInt(s)
console.log(res)
console.log(typeof res)
3. parseFloat()
+ 语法: parseFloat(要转换的内容)
+ 返回值(结果): 转换好的数值类型内容
+ 转换规则:
=> 和 parseInt 一模一样
=> 只不过多认识了一个小数点
var s = '100.234'
console.log(s)
console.log(typeof s)
var res = parseFloat(s)
console.log(res)
console.log(typeof res)
4. 取正负
+ 直接使用 + 或者 - 来决定变量
+ 转换规则: 和 Number 一模一样
var s = '100.234'
console.log(s)
console.log(typeof s)
var res = +s
console.log(res)
console.log(typeof res)
5. 非加法的数学运算
+ 减法 / 乘法 / 除法 / 取余 / 位运算 / ...
+ 转换规则: 和 Number 一模一样
var s = '100.234'
console.log(s)
console.log(typeof s)
var res = s - 0
console.log(res)
console.log(typeof res)
数据类型转换 - 转字符串
1. String()
+ 语法: String(要转换的内容)
+ 返回值: 转换好的字符串类型内容
+ 所有数据类型都可以进行转换
2. toString()
+ 语法: 要转换的内容.toString()
+ 返回值:+ 转换好的字符串类型内容
+ 注意: 不能转换 null 和 undefined
3. 字符串拼接
+ 使用 加号(+) 进行字符串拼接
+ 加号:
=> 只有运算符两边都是 数字或者布尔 的时候, 会进行加法运算
=> 只要符号任意一边是 字符串, 就会进行字符串拼接
1. String()
var n = 100
console.log(n)
console.log(typeof n)
var res = String(n)
console.log(res)
console.log(typeof res)
2. toString()
var n = 100
console.log(n)
console.log(typeof n)
var res = n.toString()
console.log(res)
console.log(typeof res)
3. 字符串拼接
var n = 100
console.log(n)
console.log(typeof n)
var res = n + ''
console.log(res)
console.log(typeof res)
console.log(1 + 2 + 3 + 4)
console.log(1 + '2' + 3 + 4)
console.log(1 + '2' + 3 * 4)
//1. 计算 '3' * 4 得到 12
//2. 1 + 2 + 12 得到 15
console.log(1 + 2 + '3' * 4)
console.log(1+2+3+'a'*4);//NaN
</script>
数据类型转换 - 转布尔
1. Boolean()
+ 语法: Boolean(要转换的内容)
+ 返回值: 转换好的布尔类型内容
+ 在 JS 内只有五个内容转换完毕是 false
=> 数值 0
=> 数值 NaN
=> 空字符串 ''
=> null
=> undefined
console.log(Boolean(''))
console.log(Boolean(0))
console.log(Boolean(NaN))
console.log(Boolean(null))
console.log(Boolean(undefined))
console.log(Boolean(0.1))
console.log(Boolean(-100))
console.log(Boolean('0'))
console.log(!NaN == !NaN);//true
八、检测非数字的方法
+ isNaN()
+ 语法: isNaN(要检测的内容)
+ 返回值: 是一个布尔值
=> true: 表示你检测的内容是一个 非数字
=> false: 表示你检测的内容不是一个 非数字
var r1 = isNaN('100')
console.log(r1)
var r2 = isNaN('abc')
console.log(r2)
九、运算符
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
+++ 作用: 根据给出的条件决定是否执行代码, 或者执行哪一段代码
1. if 语句
+ 语法: if (条件) 代码段
+ 作用:以上是关于js 的书写位置——三大核心——变量——输出语法——js 的数据类型——检测数据类型——数据类型转换——检测非数字的方法——运算符——条件分支 - if——条件分支 - switch的主要内容，如果未能解决你的问题，请参考以下文章