JavaScript 语法

发表于 更新于 分类于 ，

您可以在 HTML 文档中放入不限数量的脚本。
脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。
通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

直接写入 HTML 输出流

1
document.write("<p>这是一个段落。</p>")

只能在 HTML 输出中使用 document.write。如果您在文档加载完成后使用该方法，会覆盖整个文档。

对事件的反应

1
2
3
<button type="button" onclick="alert('欢迎!')">
  点我!
</button>

改变 HTML 内容

1
2
x = document.getElementById("demo") //查找元素
x.innerHTML = "Hello JavaScript" //改变内容

HTML 图像的来源（src）：

1
2
3
if (element.src.match("bulbon")) {
  element.src = "/statics/images/course/pic_bulboff.gif"
}

改变 HTML 样式

1
2
x = document.getElementById("demo") //查找元素
x.style.color = "#ff0000" // 改变样式

JavaScript：验证输入

1
2
3
4
var x = document.getElementById("demo").value
if (isNaN(x)) {
  alert("不是数字")
}

JavaScript 输出

JavaScript 可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

JavaScript 保留字

abstract else instanceof super
boolean enum int switch
break export interface synchronized
byte extends let this
case false long throw
catch final native throws
char finally new transient
class float null true
const for package try
continue function private typeof
debugger goto protected var
default if public void
delete implements return volatile
do import short while
double in static with

JavaScript this 关键字

面向对象语言中 this 表示当前对象的一个引用。

但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。
在函数中，this 表示全局对象。
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。

JavaScript 数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。

引用数据类型：对象(Object)、数组(Array)、函数(Function)。

变量

Value = undefined
在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。

js 数组

1
2
3
4
5
6
7
8
var cars = new Array()
cars[0] = "Saab"
cars[1] = "Volvo"
cars[2] = "BMW"

var cars = new Array("Saab", "Volvo", "BMW")

var cars = ["Saab", "Volvo", "BMW"]

对象

1
var person = { firstname: "John", lastname: "Doe", id: 5566 }

或者

1
2
3
4
5
var person = {
  firstname: "John",
  lastname: "Doe",
  id: 5566,
}

特殊的 Undefined 和 Null

Undefined 这个值表示变量不含有值。

可以通过将变量的值设置为 null 来清空变量。

函数和作用域

如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
carname=“Volvo”;

变量在函数内声明，变量为局部作用域。
局部变量：只能在函数内部访问。

变量在函数外定义，即为全局变量。
全局变量有 全局作用域: 网页中所有脚本和函数均可使用。

运算符

比较运算符

=== 绝对等于（值和类型均相等)

!== 不绝对等于（值和类型有一个不相等，或两个都不相等）

JavaScript for 循环

  • for - 循环代码块一定的次数
  • for/in - 循环遍历对象的属性, 还可以遍历数组。
1
2
3
4
5
var person = { fname: "John", lname: "Doe", age: 25 }

for (x in person) {
  txt = txt + person[x]
}
  • while - 当指定的条件为 true 时循环指定的代码块
  • do/while - 同样当指定的条件为 true 时循环指定的代码块

操作符

typeof 操作符

你可以使用 typeof 操作符来检测变量的数据类型。

typeof “John” // 返回 string
typeof 3.14 // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:‘John’, age:34} // 返回 object

var person = undefined; // 值为 undefined, 类型为 undefined

语法使用误区

赋值运算符应用错误

在 JavaScript 程序中如果你在 if 条件语句中使用赋值运算符的等号 (=) 将会产生一个错误结果, 正确的方法是使用比较运算符的两个等号 (==)。

if 条件语句返回 true (不是我们预期的)因为条件语句执行为 x 赋值 10，10 为 true:

1
2
var x = 0;
if (x = 10)

当采用这种形式则直接报错, 是不是很 🐮,不过这也是每办法的事

1
2
var x = 0;
if (10 = x)

这种错误经常会在 switch 语句中出现，switch 语句会使用恒等计算符(===)进行比较，这一点需要注意。

以下实例由于类型不一致不会执行 alert 弹窗：

1
2
3
4
5
6
以下实例由于类型不一致不会执行 alert 弹窗：

var x = 10;
switch(x) {
    case "10": alert("Hello");
}

浮点型数据使用注意事项

JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。

所有的编程语言，包括 JavaScript，对浮点型数据的精确度都很难确定：

1
var z = (x * 10 + y * 10) / 10 // z 的结果为 0.3

数组中使用名字来索引

在 JavaScript 中, 对象 使用 名字作为索引。

如果你使用名字作为索引，当访问数组时，JavaScript 会把数组重新定义为标准对象。注意执行这样操作后，数组的方法及属性将不能再使用，否则会产生错误。

定义数组元素，最后不能添加逗号

数组最后一个值的后面添加逗号虽然语法没有问题，但是在不同的浏览器可能得到不同的结果。

定义对象，最后不能添加逗号

同理