JavaScript入门
JavaScript是解释性的弱类型编程语言
- 解释性: 逐行解释, 逐行执行
- 弱类型: 不区分变量的数据类型
JS的组成
一般认为浏览器中JavaScript由三部分组成
- ECMAScript: 基础语法
由ECMA（原欧洲计算机制造商协会）进行标准化的一门编程语言, 主要规定了像变量, 数据类型, 流程控制, 函数等基础语法 - DOM: 文档对象模型
由W3C组织制定的标准, 通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色、事件等） - BOM: 浏览器对象模型
由各个浏览器厂商根据DOM在各自浏览器上的实现, 不同的浏览器会略有差异, 通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等
JS的书写位置
跟CSS一样, JS也有3种书写方式
-
外部: 将JS文件单独保存, 再通过
<script src="xxx.js">引入
<script src="my.js"></script> -
内嵌: 在HTML文件中, 将JS代码写在
<script>标签中 -
行内: 现在几乎不用
变量
var a = 10
规则:
- 标识符: 由字母(A-Z, a-z)、数字(0-9)、下划线()、美元符号( $ )组成，如：usrAge, num01, name
- 变量名严格区分大小写, 如
app和App是两个不同的变量 - 不能以数字开头
- 不能是 关键字 或者 保留字
推荐使用 驼峰法 (首字母小写，后面单词的首字母需要大写)
如: myFirstName
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
// 声明变量, 同时赋值
var age = 18
console.log(age)
age = 81
console.log(age)
// 使用let声明变量
// 1. 不能重复声明
// 2. 声明前不能引用
// 3. 可以修改变量值
// 4. 全局声明不会成为全局对象的属性
let uname = 'xiaoming'
uname = 'xiaomei'
// 使用const声明常量
// 1. 不能重复声明
// 2. 不能直接修改常量值
const str = 'hello'
str = 'world'
</script>
</body>
</html>
数据类型
简单数据类型(值类型)
| 简单数据类型 | 说明 | 默认值 |
|---|---|---|
| Number | 数字型, 包含整型和小数型, 如21, 0.2333 | 0 |
| String | 字符型, 如'张三', 字符串带引号 | ''(空字符) |
| Boolean | 布尔型, 如true, false; 等价于1和0 | false |
| Undefined | 未定义, 通过var声明但是未赋值就是undefined | undefined |
| Null | 空 | null |
数字型
var num = 10 // num 数字型
var PI = 3.14 // PI 数字型
var num3 = 0xFF // 16进制数
console.log(Number.MAX_VALUE) // 数字型的最大值
console.log(Number.MIN_VALUE) // 数字型的最小值
console.log(Number.MAX_VALUE * 2) // Infinity 无穷大
console.log(-Number.MAX_VALUE * 2) // -Infinity 无穷大
console.log('小小胖' - 100) // NaN 非数
字符型
单引号, 双引号都可以, 推荐使用单引号, HTML中一般使用双引号
var str = '我是一个"程序员"'
console.log(str)
var str1 = "我是一个'程序员'"
console.log(str1)
var str = '10' + '20'
console.log(str) // 1020
console.log(typeof str) // string
// 这里的typeof是一个关键字. 当作运算符使用, 整体表达式有返回值
// typeof()是当作函数使用
// 模板字符串
let abc = 'Hello'
str = `${abc} world` // Hello world
| 转义符 | 解释说明 |
|---|---|
\n |
换行符，n 是 newline 的意思 |
\\ |
斜杠 \ |
\' |
' 单引号 |
\" |
” 双引号 |
\t |
tab 缩进 |
\b |
空格 ，b 是 blank 的意思 |
布尔型
- true 表示真
- false 表示假
引用数据类型
Object: 对象
数据类型转换
显式转换
最常见的是字符型转数值型
var num1 = prompt('请您输入第一个值：')
var num2 = prompt('请您输入第二个值：')
var result = parseInt(num1) + parseInt(num2)
alert('您的结果是:' + result)
隐式转换
+的隐式转换
// 只要+号的一边是字符, 最终的结果就是字符
console.log('123' + '456') // '123456'
console.log('123' + 456) // '123456'
console.log('123' + true) // '123true'
// 特殊
undefined + 1 // NaN
==的隐式转换
- 字符型 转换成 数字型
- 布尔型 转换成 数字型
'1' == 1 // true
true == 1 // true
'0' == false // true
// 特殊的
NaN != NaN // true
undefined == null // true
关于Boolean类型的转换
空字符串(''), NaN, 0, null, undefined => false
其余的全部 => true
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
// 1. +: 只要有一个数据是字符型, 那么其他的操作数据都会被隐式转换为字符
console.log('123' + true) // 123true
// 2. *1 -0: 将数字类型的字符串, 转换为纯数字
console.log('100' * 1, '200' - 0)
// 3. 比较 ==
// 字符型 => 数字
// 布尔型 => 数字
console.log('1' == true) // true
// 4. 转布尔型
console.log(!!111) // 111 => true
console.log(!!0) // 0 => false
</script>
</body>
</html>