JavaScript 基础入门 语法 严格模式 DOM

本文地址

JavaScript 基础入门 语法 严格模式 DOM

参考

基础入门

• 输出标准 HTML 模版：输入英文符号 !
• 即时预览：在扩展中输入live server，安装后，在文件上右键 open with live server
• 添加脚本 <script src="test.js"></script>
• 添加按钮 <button type="button" onclick="test()">按钮</button>
• 修改元素内容 document.getElementById("demo").innerHTML = "Hello"
• 修改元素样式 document.getElementById("demo").style.color = "#ff0000"
• 运行 js 文件：node test.js 或 ts-node test.js
• 运行 ts 文件：ts-node test.ts
• 输出日志 console.log() 覆盖内容 document.write() 弹窗 alert()
• 查看日志：F12 -> Console -> console.log() 或直接输出变量名或表达式
• 代码调试：F12 -> Sources -> 点击添加断点，或在代码中添加 debugger;

基础语法

• 获取对象类型 typeof xxx
• 字符串可以使用单引号或双引号，可以在字符串中使用引号
• 字符串中可以使用 反斜杠 换行继续写，和 \n 的区别是：并不实际换行
• 运算符 === 表示绝对等于（值和类型均相等）
• 定义数组、对象时，最后不能添加逗号，否则可能有问题(如数组的长度不符合预期)
• 将 json 字符串转换为对象 JSON.parse(text)，反之为 JSON.stringify(obj)
• 变量不要使用 name 否则会与 DOM 中的全局 window 对象下的 name 属性出现了重名

5 ==  "5" // true
5 === "5" // false

"5" ==  new String("5") // true
"5" === new String("5") // false

var obj = { "a": 'Hello', b: "World" }    // js 对象，键名可以使用引号包裹，也可以省略
var json = '{"a": "Hello", "b": "World"}' // json 字符串，键名必须使用双引号包裹

严格模式

• 严格模式通过在脚本或函数的头部添加 use strict; 表达式来声明
• 指令只允许出现在脚本或函数的开头
• 只在函数内使用严格模式，则仅在函数内生效

严格模式的限制

• 不允许使用未声明的变量
• 不允许删除变量、对象、函数 delete x;
• 不允许变量重名 function x(p1, p1) {};
• 不允许使用八进制 var x = 010;
• 不允许使用转义字符 var x = \010;
• 不允许对只读属性赋值
• 不允许对一个使用 getter 方法读取的属性进行赋值
• 不允许删除一个不允许删除的属性
• 变量名不能使用 "eval"、 "arguments" 字符串
• 在作用域 eval() 创建的变量不能被调用
• 禁止 this 关键字指向全局对象
• 严格模式新增了一些保留关键字：

javascript:void

void() 仅仅是代表不返回任何值，但是括号内的表达式还是要运行。

<a href="javascript:void(0)">单击后什么也不会发生</a>
<a href="javascript:void(alert('Warning!!!'))">点击后弹出警告信息</a>
<a href="#pos">点击后定位到指定的位置</a>

var a = void (666); // 参数 a 将返回 undefined

DOM

查找元素

• document.getElementById("xxx")
• document.getElementsByTagName("xxx")，返回的是伪数组
• document.getElementsByClassName("xxx")，返回的是伪数组

改变 HTML

• 改变 HTML 输出流：document.write(Date())，注意，在DOM加载完成之后调用会覆盖整个文档
• 改变 HTML 内容：document.getElementById("p1").innerHTML="新文本!"
• 改变 HTML 属性：document.getElementById("image").src="bgm.jpg"
• 改变 HTML 样式：document.getElementById("p2").style.color="blue"

DOM 事件

点击事件(还包括onmousedown 和 onmouseup)

鼠标进入、离开事件

window.onload = function () {
    console.log("onload");
    document.getElementById("demo").onmouseenter = function () {
        console.log("onmouseenter");
    }
    document.getElementById("demo2").addEventListener("click", function () {
        console.log("click");
    })
}

EventListener

element.addEventListener(event, function, useCapture);

• 第一个参数是事件的类型，如 "click" 或 "mousedown"
• 第三个参数是个布尔值，用于描述事件是冒泡还是捕获；该参数是可选的
  • 默认值为 false, 即冒泡传递
  • 冒泡：内部元素的事件会先被触发，然后再触发外部元素的事件
  • 捕获：外部元素的事件会先被触发，然后再触发内部元素的事件
• 通过此方法添加的事件句柄不会覆盖已存在的事件句柄，可以向同个元素添加多个同类型的事件句柄
• 可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素，如： window 对象

element.addEventListener("click", myFunction);
element.addEventListener("click", () => { alert("Hello!"); })
element.removeEventListener("click", myFunction);

2017-06-16