js的组成部分
- ES: 定义了 JS 的语法规范, 描述了 语言的基本语法和数据类型
- DOM(文档对象模型) 有一套成熟的 操作 DOM 节点的 API, 通过 DOM 可以操作页面中的元素(其实就是标签)
- BOM(浏览器对象模型) 有一套成熟的 操作 BOM 的API
js的书写方式
-
行内式(不推荐, 了解即可, 这种写法, 代码量多了, 不好维护)
例: onclick="要执行的 JS 代码" onclick: 单击这个标签的时候 会触发
<button style="width: 100px; height: 100px; background-color: aquamarine;">按钮</button>
-
内嵌式 (学习阶段推荐使用, 因为代码量少, 如果代码量多, 不推荐)
内嵌式的 script 标签一般推荐写在 BODY 标签的尾部
例:
当页面打开时, 会从上往下执行时发现, 有一个 alert 弹出框, 弹出的 内容是 小括号里 引号包裹的内容
<script> alert('我是内嵌的 js') </script>
- 外链式 ( 目前公司都是外链式, 因为公司项目代码量肯定比较大)
在外部创建一个js文件,通过 引入 例:
<script src="02_测试.js"></script>
js的变量
变量 是 计算机中存储数据的一个标识符, 通过这个标识符可以找到内存中存储的数据
变量就相当于是一个容器, 内部可以存储任意类型的值, 使用变量的时候, 用的是内部存储的数据
使用变量需要用两步
1. 定义变量
语法: var 变量名
2. 赋值变量
变量名 = 值
备注: JS 中 一个等号, 叫做 赋值号 例:
var a // 定义一个变量, 变量名为 a
a = 100 //给变量a赋值为100
//定义变量与赋值变量的简化写法
var q = 666 // 定义一个变量, 变量名为 q, 并且给这个变量赋值为 666
</script>
变量的命名规则与规范 (面试可能会问)
-
规则 (必须遵守的, 如果不遵守会报错)
在书写变量名的时候, 只能由 数字、字母、下划线、 $符号(英文的) 组成, 并且不能以数字开头
书写时 区分大小写
书写变量名时, 不能使用关键字或者保留字作为变量名
关键字: 在 js 中具有特殊含义的 字母组合 var if for function保留字: 在 js 中目前没有特殊含义, 但在将来的某个版本可能会用到, 所以此时也不能使用
-
规范 (建议遵守, 如果不遵守也不会报错)
变量名具有含义, 符合见名知意
尽量不要用字母作为变量名, 除非是练习
多个单词的组合名时, 使用驼峰命名法(多个单词拼接时, 后一个单词的首字母大写) bigbox -> bigBox
js的基本数据类型
1. Number 类型
数字类型: 不区分 整数浮点数
例:
<script>
var a = 100
</script>
2. String 类型
字符串类型: 只要是引号包裹的内容, 就是字符串类型(引号不区分单双引号)
例:
<script>
var a = '你好'
var b = "你好"
</script>
3. undefined 类型
undefined 类型: 他是一个数据, 表明未定义
变量只定义, 不赋值的时候, 默认的值就是 undefined 表明未定义
例:
<script>
var a = undefined
var b
</script>
4. Boolean(布尔类型) 类型 (后续更多的使用在 判断上)
只有两个值 一个是 true 一个 是 false
true: 代表真, 正确的
false: 代表假, 错误的
例:
<script>
var a = true
var b = false
</script>
5. Null 类型
代表空
本身是一种数据类型, 只不过代表的是 空(啥也没有)
<!-- !Null 和 undefined 不同!!!
使用场景: 在创建 对象 的时候, 如果开始不知道对象内部有什么, 可以给一个 null
类似于在创建 变量的时候, 只定义, 不赋值默认是一个 undefined -->
例:
<script>
var nu = null // 定义一个变量, 名为 nu, 值为 null类型, 代表空
</script>
js的数据类型检测
语法: typeof(要检测的数据类型的值)
问题: typeof 的问题, 不能正确检测出 null 这个类型的实际类型, 检测 null 的时候打印结果为 object
null 代表的含义是 空, 也就是空对象, 所以 typeof 会把他当成一个对象去输出
例:
<script>
var str1 = '100'
var str2 = 100
var str3
var str4 = true
var str5 = false
var str6 = null
console.log(typeof(str1)) // string
console.log(typeof(str2)) // number
console.log(typeof(str3)) // undefined
console.log(typeof(str4)) // boolean
console.log(typeof(str5)) // boolean
console.log(typeof(str6)) // object
</script>