JavaScript
文章目录
- 用途
- 用法
- 显示数据
-
- 弹出警告框window.alert()
- 操作 HTML 元素
- 向HTML 文档写入内容
- 输出到控制台
- 关键字
- JavaScript 值
-
- 字面量.
- 变量
-
- 声明（创建）变量
- 运算符
-
- 算数运算符
- 赋值运算符
- 比较运算符
- JavaScript 逻辑运算符
- JavaScript 位运算符
- 注释
- 标识符
- const变量
- 数据类型
-
- Number
- 字符串
- 布尔值
- 数组
- 对象
- null和undefined
-
- Undefined 与 Null 的区别
- JavaScript 类型运算符
JavaScript 是 web 开发者必学的三种语言之一：
- HTML 定义网页的内容
- CSS 规定网页的布局
- JavaScript 对网页行为进行编程
JavaScript 是脚本语言，是一种轻量级的编程语言。JavaScript 是可插入 HTML 页面的编程代码。JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
用途
- 直接写入 HTML 输出流
- 对事件的反应
- 改变HTML内容
- 改变HTML图像
- 改变HTML样式
- 验证输入
用法
HTML 中的 Javascript 脚本代码必须位于 标签之间。
Javascript 脚本代码可被放置在 HTML 页面的
外部 JavaScript 文件的文件扩展名是 .js。
使用外部文件，在
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<p id="demo">p>
<script>
document.getElementById("demo").innerHTML = "测试 JavaScript";
script>
body>
html>
JavaScript 没有任何打印或者输出的函数
显示数据
弹出警告框window.alert()
DOCTYPE html>
<html>
<body>
<h1>测试标题h1>
<p>测试段落。p>
<script>window.alert(警告);script>
body>
html>
操作 HTML 元素
从 JavaScript 访问某个 HTML 元素，使用 document.getElementById(id) 方法。innerHTML 来获取或插入元素内容：
DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面h1>
<p id="demo">我的第一个段落p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
script>
body>
html>
innerHTML = “段落已修改。” 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。
向HTML 文档写入内容
DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面h1>
<p>我的第一个段落。p>
<script>
document.write(Date());
script>
body>
html>
DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面h1>
<p>我的第一个段落。p>
<button onclick="myFunction()">点我button>
<script>
function myFunction() {
document.write(Date());
}
script>
body>
html>
输出到控制台
DOCTYPE html>
<html>
<body>
<h1>我的第一张网页h1>
<p>我的第一个段落p>
<script>
console.log(5 + 6);
script>
body>
html>
关键字
| 关键词 | 描述 |
|---|---|
| break | 终止switch或循环。 |
| continue | 跳出循环并在顶端开始。 |
| debugger | 停止执行 JavaScript，并调用调试函数（如果可用）。 |
| do ... while | 执行语句块，并在条件为真时重复代码块。 |
| for | 标记需被执行的语句块，只要条件为真。 |
| function | 声明函数。 |
| if ... else | 标记需被执行的语句块，根据某个条件。 |
| return | 退出函数。 |
| switch | 标记需被执行的语句块，根据不同的情况。 |
| try ... catch | 对语句块实现错误处理。 |
| var | 声明变量。 |
注释：JavaScript 关键词指的是保留的单词。保留词无法用作变量名。
JavaScript 值
JavaScript 语句定义两种类型的值：混合值和变量值。
混合值被称为字面量（literal）。变量值被称为变量。
字面量.
书写混合值最重要的规则是：写数值有无小数点均可：15.90，10011。
字符串是文本，由双引号或单引号包围：“Bill Gates”，‘Bill Gates’ 。
变量
在编程语言中，变量用于存储数据值。
JavaScript 使用 var 关键词来声明变量。
= 号用于为变量赋值。
var x;
x = 7;
声明（创建）变量
在 JavaScript 中创建变量被称为“声明”变量。通过 var 关键词来声明 JavaScript 变量：
var carName;
声明之后，变量是没有值的。（技术上，它的值是 undefined。）
赋值给变量，使用等号：carName = "porsche";
运算符
算数运算符
+ - * / 来计算值：(7 + 8) * 10
| 运算符 | 描述 |
|---|---|
| + | 加法 |
| - | 减法 |
| * | 乘法 |
| / | 除法 |
| % | 取模（余数） |
| ++ | 递加 |
| -- | 递减 |
赋值运算符
使用赋值运算符（=）向变量赋值：
var x, y;
var x = 7;
var y = 8;
赋值运算符向 JavaScript 变量赋值。
| 运算符 | 例子 | 等同于 |
|---|---|---|
| = | x = y | x = y |
| += | x += y | x = x + y |
| -= | x -= y | x = x - y |
| *= | x *= y | x = x * y |
| /= | x /= y | x = x / y |
| %= | x %= y | x = x % y |
比较运算符
| 运算符 | 描述 |
|---|---|
| == | 等于 |
| === | 等值等型 |
| != | 不相等 |
| !== | 不等值或不等型 |
| > | 大于 |
| < | 小于 |
| >= | 大于或等于 |
| <= | 小于或等于 |
| ? | 三元运算符 |
==比较：它会自动转换数据类型再比较，很多时候，会得到非常诡异的结果；
===比较，它不会自动转换数据类型，如果数据类型不一致，返回false，如果一致，再比较。
由于JavaScript这个设计缺陷，不要使用比较，始终坚持使用=比较。
NaN这个特殊的Number与所有其他值都不相等，包括它自己：NaN === NaN; // false isNaN(NaN); // true
比较两个浮点数是否相等，只能计算它们之差的绝对值，看是否小于某个阈值：
Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true
JavaScript 逻辑运算符
| 运算符 | 描述 |
|---|---|
| && | 逻辑与 |
| || | 逻辑或 |
| ! | 逻辑非 |
JavaScript 位运算符
位运算符处理 32 位数。
该运算中的任何数值运算数都会被转换为 32 位的数。结果会被转换回 JavaScript 数。
| 运算符 | 描述 | 例子 | 等同于 | 结果 | 十进制 |
|---|---|---|---|---|---|
| & | 与 | 5 & 1 | 0101 & 0001 | 0001 | 1 |
| | | 或 | 5 | 1 | 0101 | 0001 | 0101 | 5 |
| ~ | 非 | ~ 5 | ~0101 | 1010 | 10 |
| ^ | 异或 | 5 ^ 1 | 0101 ^ 0001 | 0100 | 4 |
| << | 零填充左位移 | 5 << 1 | 0101 << 1 | 1010 | 10 |
| >> | 有符号右位移 | 5 >> 1 | 0101 >> 1 | 0010 | 2 |
| >>> | 零填充右位移 | 5 >>> 1 | 0101 >>> 1 | 0010 | 2 |
JavaScript 使用 32 位有符号数。因此，在 JavaScript 中，~ 5 不会返回 10，而是返回 -6。
~00000000000000000000000000000101 将返回 11111111111111111111111111111010。
注释
双斜杠 // 或 /* 与 */ 之间的代码被视为注释。
注释会被忽略，不会被执行：
var x = 7; // 会执行
// var x = 8; 不会执行
标识符
在 JavaScript 中，标识符用于命名变量（以及关键词、函数和标签）。
首字符必须是字母、下划线（-）或美元符号（$）。
- 名称可包含字母、数字、下划线和美元符号
- 名称必须以字母开头
- 名称也可以 $ 和 _ 开头（但是在本教程中我们不会这么做）
- 名称对大小写敏感（y 和 Y 是不同的变量）
- 保留字（比如 JavaScript 的关键词）无法用作变量名称
提示：数值不可以作为首字符。这样，JavaScript 就能轻松区分标识符和数值
const变量
JavaScript const 变量必须在声明时赋值
数据类型
Number
JavaScript不区分整数和浮点数，统一用Number表示。
var length = 7; // 数字
123; // 整数123
0.456; // 浮点数0.456
1.2345e3; // 科学计数法表示1.2345x1000，等同于1234.5
-99; // 负数
NaN; // NaN表示Not a Number，当无法计算结果时用NaN表示
Infinity; // Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，就表示为Infinity
0xff00 //十六进制
字符串
字符串是以单引号’或双引号"括起来的任意文本
var lastName = "Gates"; // 字符串
布尔值
true、false两种值
数组
数组是一组按顺序排列的集合，集合的每个值称为元素。可以包括任意数据类型。数组用[]表示，元素之间用,分隔。
例如：[1, 2, 3.14, ‘Hello’, null, true];
另一种创建数组的方法是通过Array()函数实现：new Array(1, 2, 3); // 创建了数组[1, 2, 3]
数组的元素可以通过索引来访问。请注意，索引的起始值为0：
var arr = [1, 2, 3.14, 'Hello', null, true];
arr[0]; // 返回索引为0的元素，即1
arr[5]; // 返回索引为5的元素，即true
arr[6]; // 索引超出了范围，返回undefined
对象
对象是一组由键-值组成的无序集合，例如：
var person = {
name: 'Bob',
age: 20,
tags: ['js', 'web', 'mobile'],
city: 'Beijing',
hasCar: true,
zipcode: null
};
对象的键都是字符串类型，值可以是任意数据类型。其中每个键又称为对象的属性。
要获取一个对象的属性，我们用对象变量.属性名的方式：
person.name; // 'Bob'
person.zipcode; // null
null和undefined
在 JavaScript 中，没有值的变量，其值是 undefined。typeof 也返回 undefined。
var person; // 值是 undefined，类型是 undefined。
undefined仅仅在判断函数参数是否传递的情况下有用。
任何变量均可通过设置值为 undefined 进行清空。其类型也将是 undefined。
person = undefined; // 值是 undefined，类型是 undefined。
null表示一个“空”的值，它和0以及空字符串’‘不同，0是一个数值，’'表示长度为0的字符串，而null表示“空”。
Undefined 与 Null 的区别
Undefined 与 null 的值相等，但类型不相等：
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
JavaScript 类型运算符
| 运算符 | 描述 |
|---|---|
| typeof | 返回变量的类型。 |
| instanceof | 返回 true，如果对象是对象类型的实例。 |
使用 JavaScript 的 typeof 来确定 JavaScript 变量的类型：
typeof 运算符返回变量或表达式的类型：
typeof "" // 返回 "string"
typeof "Bill" // 返回 "string"
typeof "Bill Gates" // 返回 "string"
typeof 0 // 返回 "number"
typeof 314 // 返回 "number"
typeof 3.14 // 返回 "number"
typeof (7) // 返回 "number"
typeof {name:'Bill', age:62} // 返回 "object"
typeof [1,2,3,4] // 返回 "object" (并非 "array"，参见下面的注释)
typeof null // 返回 "object"
typeof function myFunc(){} // 返回 "function"