1.HTML脚本
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
只需明白,浏览器会解释并执行位于 <script> 和 </script>之间的 JavaScript 代码。
1.1 <head> 中的 JavaScript 函数
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
</body>
</html>
1.2 <body> 中的 JavaScript 函数
<!DOCTYPE html>
<html>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</body>
</html>
1.3 外部的 JavaScript脚本
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件,请在
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
可以将脚本放置于 或者 中,放在
myScript.js 文件代码如下:
可以将脚本放置于 <head> 或者 <body>中,放在 <script> 标签中的脚本与外部引用的脚本运行效果完全一致。
myScript.js 文件代码如下:
注意:外部脚本不能包含 <script> 标签!!!
2.JavaScript 输出
JavaScript 可以通过不同的方式来输出数据:
- 使用
window.alert()
弹出警告框。 - 使用
document.write()
方法将内容写到 HTML 文档中。 - 使用
innerHTML
写入到 HTML 元素。 - 使用
console.log()
写入到浏览器的控制台。
操作 HTML 元素
如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id)
方法。
请使用 “id” 属性来标识 HTML 元素,并innerHTML
来获取或插入元素内容:
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
</body>
</html>
以上 JavaScript 语句(在 <script> 标签中)可以在 web 浏览器中执行:
document.getElementById("demo")
是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。
innerHTML = "段落已修改。"
是用于修改元素的 HTML 内容(innerHTML
)的 JavaScript 代码。
document.write()
仅仅向文档输出写内容。
如果在文档已完成加载后执行document.write
,整个 HTML 页面将被覆盖。
3.JavaScript 语法
JavaScript 数据类型
JavaScript 使用关键字var
来定义变量, 使用等号来为变量赋值;
JavaScript 语句是用分号分隔;
JavaScript 有多种数据类型:
- 值类型(基本类型):
字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol
。 - 引用数据类型:
对象(Object)、数组(Array)、函数(Function)
。
var length = 16; // Number 通过数字字面量赋值
var points = x * 10; // Number 通过表达式字面量赋值
var lastName = "Johnson"; // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"]; // Array 通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"}; // Object 通过对象字面量赋值
4.JavaScript 语句标识符
JavaScript 语句通常以一个 语句标识符 为开始,并执行该语句。
5.JavaScript 作用域
JavaScript 局部作用域
- 变量在函数内声明,变量为局部作用域。
- 局部变量:只能在函数内部访问。
JavaScript 全局变量
- 变量在函数外定义,即为全局变量。
- 全局变量有 全局作用域:
网页中所有脚本和函数均可使用
。
JavaScript 变量生命周期
- JavaScript 变量生命周期在它声明时初始化。
- 局部变量在函数执行完毕后销毁。
- 全局变量在页面关闭后销毁。
6.JavaScript 事件
HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。
HTML DOM 事件列表:https://www.runoob.com/jsref/dom-obj-event.html(包括:鼠标事件、鼠标事件、框架/对象(Frame/Object)事件、表单事件、剪贴板事件、打印事件、拖动事件等等)
7.JavaScript 字符串
8.JavaScript 比较 和 逻辑运算符
条件运算符
JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。
variablename=(condition)?value1:value2
9.JavaScript:typeof, null, undefined
typeof 操作符
你可以使用 typeof 操作符来检测变量的数据类型:
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:'John', age:34} // 返回 object
null
在 JavaScript 中 null 表示 “什么都没有”。null是一个只有一个值的特殊类型,表示一个空对象引用
。
undefined
在 JavaScript 中, undefined 是一个没有设置值的变量
。typeof 一个没有值的变量会返回 undefined。
null 和 undefined 的值相等,但类型不等:
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
10.JavaScript 声明提升
JavaScript 中,函数及变量的声明都将被提升到函数的最顶部。
JavaScript 中,变量可以在使用后声明,也就是变量可以先使用再声明。
JavaScript 初始化不会提升。JavaScript 只有声明的变量会提升,初始化的不会。
详见:https://www.runoob.com/js/js-hoisting.html
11.JavaScript this 关键字
在 JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变:
- 在方法中,this 表示该方法所属的对象。
- 如果单独使用,this 表示全局对象。
- 在函数中,this 表示全局对象。
- 在函数中,在严格模式下,this 是未定义的(undefined)。
- 在事件中,this 表示接收事件的元素。
- 类似 call() 和 apply() 方法,可以将 this 引用到任何对象。
12.JavaScript var、let的区别
使用 var 关键字声明的变量不具备块级作用域的特性,它在 {} 外依然能被访问到:
{
var x = 2;
}
// 这里可以使用 x 变量
let 声明的变量只在 let 命令所在的代码块 {} 内有效,在 {} 之外不能访问:
{
let x = 2;
}
// 这里不能使用 x 变量
比较示例:
var x = 10;
// 这里输出 x 为 10
{
var x = 2;
// 这里输出 x 为 2
}
// 这里输出 x 为 2
var x = 10;
// 这里输出 x 为 10
{
let x = 2;
// 这里输出 x 为 2
}
// 这里输出 x 为 10
13.JavaScript json解析
示例:
var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;
14.JavaScript 异步编程
异步(Asynchronous, async
)是与同步(Synchronous, sync
)
1.回调函数
function print() {
document.getElementById("demo").innerHTML="RUNOOB!";
}
setTimeout(print, 3000);
setTimeout 就是一个消耗时间较长(3 秒)的过程,它的第一个参数是个回调函数,第二个参数是毫秒数,这个函数执行之后会产生一个子线程,子线程会等待 3 秒,然后执行回调函数 “print”,在命令行输出 “RUNOOB!”。
2.异步 AJAX
除了 setTimeout 函数以外,异步回调广泛应用于 AJAX 编程。有关于 AJAX 详细请参见:https://www.runoob.com/ajax/ajax-tutorial.html
15.JavaScript Promise
Promise 是一个 ECMAScript 6 提供的类,目的是更加优雅地书写复杂的异步任务。
示例:分三次输出字符串,第一次间隔 1 秒,第二次间隔 4 秒,第三次间隔 3 秒
new Promise(function (resolve, reject) {
setTimeout(function () {
console.log("First");
resolve();
}, 1000);
}).then(function () {
return new Promise(function (resolve, reject) {
setTimeout(function () {
console.log("Second");
resolve();
}, 4000);
});
}).then(function () {
setTimeout(function () {
console.log("Third");
}, 3000);
});
Promise 构造函数只有一个参数,是一个函数,这个函数在构造之后会直接被异步运行,所以我们称之为起始函数。起始函数包含两个参数 resolve 和 reject。
当 Promise 被构造时,起始函数会被异步执行:
new Promise(function (resolve, reject) {
console.log("Run");
});
这段程序会直接输出 Run。
resolve 和 reject 都是函数,其中调用 resolve 代表一切正常,reject 是出现异常时所调用的。
16.JavaScript 闭包
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();
add();
add();
add();
// 计数器为 3
解析:
变量 add 指定了函数自我调用的返回字值。
自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。
add变量可以作为一个函数使用,它可以访问函数上一层作用域的计数器。
这个叫作 JavaScript 闭包,它使得函数拥有私有变量变成可能。
计数器受匿名函数的作用域保护,只能通过 add 方法修改。
闭包是一种保护私有变量的机制,在函数执行时形成私有的作用域,保护里面的私有变量不受外界干扰。
直观的说就是形成一个不销毁的栈环境。
17.JavaScript HTML DOM
HTML DOM (文档对象模型)
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。HTML DOM 模型被构造为对象的树:
通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML:
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
查找 HTML 元素
有三种方法来做这件事:
- 通过 id 找到 HTML 元素
- 通过标签名找到 HTML 元素
- 通过类名找到 HTML 元素