JS是什么
- JS是一种运行在客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能
- 浏览器就是一种运行JS脚本语言的客户端，JS的解释器被称为JS引擎，为浏览器的一部分
JS的组成(面试可能会问)
** ECMAScript 和DOM 和BOM**
1. ES: 定义了JS的语法规范, 描述了语言的基本语法和数据类型
简单来说,也就是JS怎么写,需要根据ES的规定
2. DOM(文档对象类型)
*有一套成熟的操作DOM节点的API ,通过DOM可以操作页面中的元素(其实就是标签)
比如:增加一个div
删除一个span
修改h1标签的内容
3. BOM(浏览器对象模型)
*有一套成熟的操作 BOM 的API
比如: 弹出框
浏览器跳转
获取浏览器相关信息
获取浏览器尺寸
js 的三种书写方式
1.行内式 不推荐,了解即可,这种写法,代码量多了,不好维护
onclick="要执行的js代码"onclick:单击这个标签的时候会触发
<button onclick="alert('你好 qwer')"></button>
2.内嵌式 学习阶段推荐使用,因为代码量少,如果代码量多,不推荐,内嵌式的script标签一般推荐写在body标签的尾部
alert('我是内嵌式的js')
- 外链式 目前公司都是外链式,因为项目代码量大
<script src="./02测试.js">
js 定义变量
- js的变量是什么
变量是计算机中存储数据的一个标识符,通过在合格标识符可以找到内存中存储的数据,变量其实就相当于一个容器，内部可以存储任意类型的数据，使用变量时，用的是内部存储的数据。
翻译为大白话，我有一个东西需要暂时存储起来，比如说就是一个数字 100，我把它存放到了变量 a 中，我后续想要使用他的时候就可以直接通过变量 a 获取到数字 100
使用变量可以方便的获取或者修改内存中的数据
1.定义变量
var a //定义一个变量变量名为a
var b
var c
2.赋值变量(暂时只使用数字作为值)
a = 100
b = 200
c = 300
3. 打印变量
console.log(a) //100
console.log(b)
console.log(c)
4.定义变量与赋值变量的简化写法
var q = 666 //定义一个变量,变量名为q,并且给这个变量赋值为666
var w = 888 //定义一个变量,变量名为w,并且给这个变量赋值为888
console.log(q)
console.log(w)
<script>
var a = 100
var b = 200
var c = a //定义一个变量C并赋值为变量a的值 ,此时c=100
var a = b //将变量a赋值为变量b内保存的值,此时a的值为200
var b = c //
console.log(a) //200
console.log(b)
</script>
变量的命名规则与规范
1. 规则(必须遵守的,如果不遵守会报错)
在书写变量名时,必须由数字 字母 下划线 $符号(英文状态的)组成
* 并且不能以是数字开头
* 书写时会区分大小写
* 书写变量名时,不能使用关键字或者保留字作为变量名
* 关键字:在js中具有特殊含义的字母组合
var if for function
* 保留字: 在js中 目前没有特殊含义,但在将来的某个版本中可能会用到
在ES6 还没出现的时候具有的保留字
let const promise
2. 规范(建议遵守,如果不遵守也不会报错)
* 变量名具有含义,符合见名如意
* 尽量不要用字母作为变量名,除非是练习
* 多个单词的组合命名时,使用驼峰命名法(多个单词拼接时,后一个单词的首字母大写)
* bigbox->bigBox
!以下两种推荐第一种,选中的时候更方便
* big_box
big-box
// 错误书写
// var 1der = 100
var a = 100
var A = 500
// var 1A = 300
// 错误写法,一旦报错其他的就都不显示
var $1 = 1000
var $_a = 666
console.log(a)
console.log(A)
console.log($1)
console.log($_a)
JS的数据类型
JS中变量可以存储任意类型的值
JS中数据类型的分类 (基本数据类型)
-
- Number类型
数字类型 :不区分 整数浮点数
var a = 1000
-
- String类型
字符串类型:只要是引号包裹的内容,就是字符串类型(引号不区分单双引号)
var str1 = '你好'
var str2 = "你好哇"
var str3 = 'qwer'
var str4 = '100'//string
var str5 = 999 //num
console.log(a)
console.log(str1)
console.log(str2)
console.log(str3)
console.log(str4)
-
3.undefined
undefined 类型:他是一个数据,表明未定义
变量只定义,不赋值的时候,默认值就是undefined,表明未定义
var un = undefined
var z
console.log(un) //定义一个变量，交量名为 un，并赋值为 undefined
console.log(z) //定义一个变量，交量名为 z，不赋值,默认为 undefined
-
- boolean 类型
只有两个值,一个是TRUE,一个是FALSE
*true 代表真,正确的
*FALSE 代表假,错误的
var boo1 = true //定义一个变量，名为 boo1，值为布尔
var boo2 = false//定义一个变量，名为 boo2，值为布尔值，false
var boo3 = 'true' //// 因为 true 是在 引号内的，所以 boo3 是一个字符串类型的
-
5.null类型
-
代表空
本身是一种数据类型,只不过代表的是 空(啥也没有)
null和undefined不同!!!
使用场景:在创建对象的时候,如果开始不知道内部对象有什么,可以给一个null 类似于在创建变量的时候,只定义,不赋值,默认是一个undefined
var nu = null //定义一个变量，名为 nu，值为 null类型，代表空
console.log(boo1)
console.log(boo2)
console.log(nu)
JS的数据类型检测
通过一个方法去检测 数据类型的值是什么
语法:typeof(要检测数据类型的值是什么)
typeof 的问题,不能正确检测出null这个类型的实际类型,检测null的时候打印结果为object null代表的含义是空,也就是空对象,所以typeof 会把他当成一个对象来输出
延伸:一道面试题
typeof能正确检测所有数据类型的值吗
不能,因为他没有办法准确的检测出null的值是什么
var str1 = '100'
var str2 = 100
var str3 = 'true'
var str4
var str5 = true
var str6 = false
var str7 = null
console.log(typeof(str1)) //string
// console.log(typeof str1) 这种写法也可以
console.log(typeof(str2)) //number
console.log(typeof(str3)) //string
console.log(typeof(str4)) //undefined
console.log(typeof(str5)) //boolean
console.log(typeof(str6)) //boolean
console.log(typeof(str7)) //object
JS的数据类型转换
1. 转换为数字类型
a. number(数据)
可以用于任何数据类型,将其转换为数字类型
-
字符串转数字
如果转换的字符串是纯数字组成的
如果转换的字符串是 空字符串或者空白字符串,那么直接转换为数字0
其他类型的字符串(不是 空--空白--纯数字字符串)会转换为NaN
NaN:表示的是number 的数字,但是没有办法通过常规的数字表明它,所以只能用NaN来代替
console.log(Number('100'))//注意字母N大写,会将'100 转换为数字,然后打印控制台 console.log(typeof(Number('100')), Number('100')) //number100会将'100'转换为数字,然后打印到控制台 console.log(typeof(Number(' ')), Number(' '))//number0 console.log(typeof(Number('')), Number(''))//number0 console.log(typeof(Number('abc')), Number('abc')) //number NaN -
布尔值转数字
true转为1
false转为0
console.log(typeof(Number(true)), Number(true)) //number1 console.log(typeof(Number(false)), Number(false)) //Number 0 -
undefined 转数字
会直接转为转为NaN
console.log(typeof(Number(undefined)), Number(undefined)) //number NaN -
+null转数字
会直接转换为0
console.log(typeof(Number(null)), Number(null))//number 0
b. parseInt(数据) 转换为整数
- 会将数据转换为number类型,并且值是整数(直接忽略小数点以后的值,并不是四舍五入)
console.log(typeof Number('100.12344544'), Number('100.12344544')) console.log(typeof(parseInt('100.123456789')), parseInt('100.123456789')) console.log(typeof(Number('100.123456789')), Number('100.123456789')) // number 100.123456789 console.log(typeof(parseInt('100.123456789')), parseInt('100.123456789')) // number 100 console.log(typeof(parseInt('100')), parseInt('100')) // number 100 console.log(typeof(parseInt('100abc')), parseInt('100abc')) // number 100 console.log(typeof(parseInt('999abc')), parseInt('999abc')) // number 999 console.log(typeof(parseInt('abc')), parseInt('abc')) // number NaN console.log(typeof(parseInt('abc666')), parseInt('abc666')) // number NaN console.log(typeof(parseInt('')), parseInt('')) // number NaN console.log(typeof(parseInt(' ')), parseInt(' ')) // number NaN console.log(typeof(parseInt(true)), parseInt(true)) // number NaN console.log(typeof(parseInt(false)), parseInt(false)) // number NaN console.log(typeof(parseInt(undefined)), parseInt(undefined)) // number NaN console.log(typeof(parseInt(null)), parseInt(null)) // number NaN
c. parseFloat(数据) 转换为小数
-
转换结果和parseFloat类似,但是在转换小数的时候会保留小数点后的数字
console.log(typeof(parseFloat('100.123456789')), parseFloat('100.123456789')) // number 100.123456789 console.log(typeof(parseFloat('100')), parseFloat('100')) // number 100 console.log(typeof(parseFloat('100abc')), parseFloat('100abc')) // number 100 console.log(typeof(parseFloat('999abc')), parseFloat('999abc')) // number 999 console.log(typeof(parseFloat('abc')), parseFloat('abc')) // number NaN console.log(typeof(parseFloat('abc666')), parseFloat('abc666')) // number NaN console.log(typeof(parseFloat('')), parseFloat('')) // number NaN console.log(typeof(parseFloat(' ')), parseFloat(' ')) // number NaN console.log(typeof(parseFloat(true)), parseFloat(true)) // number NaN console.log(typeof(parseFloat(false)), parseFloat(false)) // number NaN console.log(typeof(parseFloat(undefined)), parseFloat(undefined)) // number NaN console.log(typeof(parseFloat(null)), parseFloat(null)) // number NaN拓展:在实际开发中, 数据减-0
console.log(typeof('100'), '100') // string 100 console.log(typeof('100' - 0), '100' - 0) // number 100 console.log(typeof('100.99' - 0), '100.99' - 0) // number 100
2. 转换为字符串类型
- 变量.toString() 方法 注意: S 是大写的
- 注意: undefined 类型 和 null 不能使用 toString 方法 |
- (因为 JS 没有给我们提供, 或者说 JS 不允许)
变量.toString()
var str1 = 100
console.log(typeof(str1.toString()), str1.toString()) // string 100
var str2 = true
console.log(typeof(str2.toString()), str2.toString()) // string true
var str3 = false
console.log(typeof(str3.toString()), str3.toString()) // string false
var str4 = undefined
console.log(typeof(str4.toString()), str4.toString()) // 这里会报错, 因为 undefined 不能使用 toString
var str5 = null
console.log(typeof(str5.toString()), str5.toString()) // 这里会报错, 因为 null 不能使用 toString
- String(变量) 注意 S 也是大写
- 什么类型都可以转换为字符串类型的, 包括undefined 和 null 类型
String(变量)
var str1 = 100
console.log(typeof(String(str1)), String(str1)) // string 100
var str2 = true
console.log(typeof(String(str2)), String(str2)) // string true
var str3 = false
console.log(typeof(String(str3)), String(str3)) // string false
var str4 = undefined
console.log(typeof(String(str4)), String(str4)) // string undefined
var str5 = null
console.log(typeof(String(str5)), String(str5)) // string null
- 扩展: 开发时常用的一个方法!
- 变量 + '' (暂时不考虑原理)
- 转换结果于 String 类似, 写法上更简单一些, 所以推荐使用
变量 + ''
var str1 = 100
var str2 = true
var str3 = false
var str4 = undefined
var str5 = null
console.log(typeof(str1 + ''), str1 + '') // string 100
console.log(typeof(str2 + ''), str2 + '') // string true
console.log(typeof(str3 + ''), str3 + '') // string false
console.log(typeof(str4 + ''), str4 + '') // string undefined
console.log(typeof(str5 + ''), str5 + '') // string null
3. 转换为布尔类型
Boolean(变量) 将其他数据类型, 转换为 布尔值(也就是转换为 true 或者 false)
1. 数字转换布尔值, 只有0会转换为 false 其他的数字都会转换为 true, (非0即为真)
var num1 = 100
var num2 = 0
var num3 = -1
console.log(num1, '-->', Boolean(num1)) // 100 ---> true
console.log(num2, '-->', Boolean(num2)) // 0 ---> false
console.log(num3, '-->', Boolean(num3)) // -1 ---> true
2. 字符串转换布尔值, 只有 空字符串 会转换为 false 其他的字符串都会转换为 true
var str1 = ''
var str2 = ' '
var str3 = 'abc'
var str4 = '0'
console.log(str1, '-->', Boolean(str1)) // '' ---> false
console.log(str2, '-->', Boolean(str2)) // ' ' ---> true
console.log(str3, '-->', Boolean(str3)) // 'abc' ---> true
console.log(str4, '-->', Boolean(str4)) // '0' ---> true
3. undefined 和 null 转换为 布尔值的时候 就是 false (重点, 以后会常用!!!)
var und = undefined
var nul = null
console.log(und, '-->', Boolean(und)) // undefined ---> false
console.log(nul, '-->', Boolean(nul)) // null ---> false
