第十一节：JavaScript 入门
JavaScript 内嵌于 HTML 网页中，通过浏览器内置的 JavaScript 引擎直接编译，把一个原本只用来显示的页面，转变成支持用户交互的页面程序
3.1.1 JavaScript 介绍
JavaScript 脚本语言
JavaScript 是一种脚本（Script）语言，简单来说就是一条条的文本命令
非脚本语言一般 需要编译、链接、生成独立的可执行文件后才能运行；而脚本语言缩短了传统语言 “编写 - 编译 - 链接 - 运行” 的过程
JavaScript 的跨平台性
JavaScript 语言不依赖操作系统，仅需要浏览器的支持，几乎所有的浏览器都支持 JavaScript
JavaScript 支持面向对象
面向对象是软件开发中一种重要的编程思想，优点非常之多。如：基于面向对象思想诞生了许多优秀的库和框架，可使 JavaScript 开发变得快捷高效，降低了开发成本。
除了经典的 JavaScript 库 JQuery，还有 Bootstrap、AngularJS、Vue.js、Backbone.js、React、webpack 等框架和工具
3.1.2 开发工具
JavaScript 的开发工具主要包括浏览器和代码编辑器两种软件。浏览器用于执行、调试 JavaScript 代码，代码编辑器用于编写代码
排版引擎
-
Trident
Trident 是 Internet Explorer（IE）浏览器使用的引擎
-
EdgeHTML
EdgeHTML 是 Microsoft Edge 浏览器使用的引擎
-
Gecko
Mozilla FireFox（火狐浏览器）使用的引擎
-
Webkit
开源的浏览器引擎，包含WebCore 排版引擎和 JavaScriptCore 引擎来自于 KDE 项目组的 KHTML 和 KJS
-
Blink
Google 公司 和 Opera Software ASA 开发的浏览器排版引擎
JavaScript 引擎
-
Chakra
IE 9~11 中使用的 JavaScript 引擎
-
SpiderMonkey
Mozilla 项目中的一个 JavaScript 引擎
-
Rhino
Mozilla 项目中的一个使用 Java 语言编写的 JavaScript 引擎
-
JavaScriptCore
苹果在 Safari 浏览器中使用的 JavaScript 引擎
-
V8
Google 为 Chrome 浏览器开发的 JavaScript 引擎，具有较快的执行速度。Node.js 也整合了 V8 引擎
代码编辑器
-
Notepad++
一款在 Windows 环境下免费开源的代码编辑器
-
Sublime Text 3
轻量级的代码编辑器，友好的用户界面，还可以用过灵活的插件机制扩展编辑器的功能，可以利用 Python 开发
-
NetBeans
由 Sun 公司建立的开放源代码的软件开发工具，，是一个可扩展的开发平台。
NetBeans 开发环境可提供代码编写、调试、跟踪、语法高亮、语法检查、格式化代码风格等功能
-
HBuilder
由 DCloud（数字天堂）推出的一款支持 HTML5 的 Web 开发编辑器
-
Adobe Dreamweaver
集网页制作和网站管理于一身的所见即所得网页编辑器
-
WebStorm
JetBrains 公司推出的一款 Web 前端咖啡啊工具，JavaScript、HTML5 开发是其强项，支持许多流行的前端技术
3.1.3 JavaScript 引入方式
嵌入式
使用
<html>
<head>
<script> JavaScript代码 </script>
</head>
<body>
网页内容
</body>
</html>
外链式
将 JavaScript 代码保存到一个单独的文件中，通常使用 js 作为文件拓展名，然后使用
<html>
<head>
<script src="js/text.js"> </script>
</head>
<body>
网页内容
</body>
</html>
行内式
将 JavaScript 代码作为 HTML 标签的属性值使用
<a href="Javascript: alert('htllo');"> test </a>
**注意：**在引入 JavaScript 代码时，无论使用内嵌式还是外链式，页面的下载和渲染都会暂停，等待脚本执行完成后才会继续。
对于外链式，由于页面加载脚本文件会阻塞其他资料的下载，因此对于不需要提前执行的代码，将
3.1.4 JavaScript 阻塞问题
为了降低 JavaScript 阻塞问题对页面造成的影响，可以使用 HTML5 为
-
async
用于异步加载，即先下载文件，不阻塞其他代码执行，下载完成后再执行
-
defer
用于延后执行，即先下载文件，直到网页加载完成后再执行
3.1.5 常用的输出语句
alert()
用于弹出一个警告框
alert('警告框');
console.log()
用于在浏览器的控制台中输出内容
console.log('控制台输出');
document.write()
用于在 HTML 文档页面中输出内容
<html>
<head>
<script> document.write('这是加粗文本'); </script>
</head>
<body>
<script> document.write('这是拓展文本'); </script>
</body>
</html>
效果： 这是加粗文本这是拓展文本
3.1.6 注释
单行注释 //
// 单行注释
多行注释 /**/
/*
多行注释
多行注释
*/
3.1.7 函数
将一些常用的功能模块编写成函数，通过调用来实现，可以简化，方便阅读
函数执行后可以返回一个表示结果的值
自定义函数
// 定义函数
function sum(a,b) {
var c = a + b;
return c;
}
// 调用函数
alert(sum(11,22)); // 结果为：33
3.1.8 对象
一个对象的成员由属性和方法组成
- 属性就是一些变量，用来保存部门名称
- 方法就行一些函数，用来保存部门的各种工作任务
Windows 对象
Windows 对象是 JavaScript 与浏览器之间交互的主要接入点
window 后面的 " . " 用于访问对象的属性和方法，两者通过有无小括号来区分，有小括号表示可以作为方法进行调用
Windows 对象的属性
window.console; // 访问 window对象 的 console 属性
window.document; // 访问 window对象 的 document 属性
window.alert('test'); // 调用 window对象 的 alert() 方法
window.prompt('test'); // 调用 window对象 的 prompt() 方法
document 对象
document 对象是 window 对象的属性之一，主要用于与网页文档进行交互
当通过 JavaScript 访问或者修改网页中的某个元素时，需要先利用 document 对象提供的方法，根据元素的标签名（如：div、span 等）或元素的属性（如：id、class、name）来获取一个元素对象，然后再使用这个对象的属性、方法来进行操作
<body>
<div id="test"> hello </div>
<script>
var test = document.getElementById('test'); // 根据元素id 获取元素对象
alert(test.innerHTML); // 通过 innerHTML 属性获取元素内容，输出结果为 hello
</script>
</body>
String 对象
String 对象在 JavaScript 中几乎无处不在，在代码中直接定义的字符串，就可以作为对象来使用，一个对象包含了多个属性和方法，用来获取信息或进行处理
var str = 'apple';
alert(str.length); // 获取字符串的长度
alert(str.toUpperCase()); // 获取转换大写后的结果：APPLE
alert('aa'.toUpperCase()); // 直接调用字符串的成员方法：AA
自定义对象
// 创建空对象
var stu = {};
// 添加属性
stu.name = '小明';
stu.gender = '男';
stu.age = 18;
// 访问属性
alert(stu.name); //访问属性，输出结果为：小明
// 添加方法
stu.introduce = function() {
return '我叫' + this.name + '，今年' + this.age + '岁';
}
// 调用方法
alert(stu.introduce()); // 调用方法，输出结果为：我叫小明，今年18岁
3.1.9 事件
事件指可以被 JavaScript 侦测到的交互行为，如：在网页中滑动、点击鼠标、滚动屏幕、敲击键盘 等
<input type="button" onclick="alert('hello');" value="test" />
实际开发写法
<body>
<input id="btn" type="button" value="test" />
<script>
document.getElementById('btn').onclick = function {
alert(this.value); // 获取按钮的 value 属性，输出结果为：test
}
</script>
</body>
案例1：改变网页背景色
<html>
<head>
<script>
// 定义一个color() 函数，函数参数 str 表示传入的颜色值
function color(str) {
document.body.style.backgroundColor = str;
// backgroundColor 表示 css 中的 background-color
}
</script>
</head>
<body>
<input type="button" value="设为红色" onclick="color('red')" />
<input type="button" value="设为蓝色" onclick="color('blue')" />
</body>
</html>
案例2：验证用户输入的密码
<script>
var password = prompt('请输入密码：');
if (password == "123456") {
alert('密码输入正确');
} else {
alert('密码输入错误');
}
</script>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
