04_JavaScript入门

1 什么是 JavaScript

JavaScript 是 Web 开发领域中的一种功能强大的编程语言。主要用于开发交互式的 Web 页面，使网页的互动性更强，用户体验更好。

JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言（Script 是脚本的意思）。

脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行

Web页面是由多个网页组成的。网页制作涉及的技术：HTML、CSS 和 JavaScript。

HTML 代表了结构，结构是网页的骨架，从语义的角度，描述页面结构。
CSS 代表了样式，样式是网页的外观，从审美的角度，美化页面。
JavaScript 代表行为，行为是网页的交互逻辑，从交互的角度，提升用户体验。

JavaScript 内嵌于 HTML 网页中，通过浏览器内置的 JavaScript 引擎直接编译，把一个原本只用来显示的页面，转变成支持用户交互的页面程序。

2 JavaScript 的由来

1995 年，Netscape（网景）公司，现在的 Mozilla 的 Brendan Eich（布兰登·艾奇）在网景导航者浏览器上首次设计出了 JavaScript。

Netscape 最初将这个脚本语言命名为 LiveScript。由于当时Sun公司（2009年被Oracle公司收购）推出的 Java 语言备受关注，Netscape 公司为了营销借用了 Java 这个名称。JavaScript 与 Java 本质上是两种不同的编程语言，并无任何关系。

JavaScript 在设计之初是一种可以嵌入到网页中的编程语言，用来控制浏览器的行为。比如，直接在浏览器中进行表单验证，用户只有填写格式正确的内容后才能够提交表单，避免了因表单填写错误导致的反复提交，节省了时间和网络资源。

JavaScript 缺点：

JavaScript 语言非常灵活，其语言特性也产生了一些不良的影响。
利用 JavaScript 制作网页上的漂浮广告、弹窗，让用户感到厌烦。
利用 Web 开发中的安全漏洞，在网页中编写恶意代码，窃取用户网站身份信息、传播病毒等。

JavaScript 特点：

解释性语言
基于原型的面向对象
Ajax 技术兴起之后，浏览器和服务器可以进行异步交互了，网站的用户体验又得到了更大的提升。当人们在百度的搜索框中输入几个字以后，网页会智能感知用户接下来要搜索的内容。
JavaScript 语言不依赖操作系统，仅需要浏览器的支持。

3 JavaScript 与 ECMAScript 的关系

ECMAScript 指的是 Ecma 发布的浏览器脚本语言的标准。
JavaScript 是网景公司在 Navigator 2.0 浏览器中内置的脚本语言。
ES6 指的是 2015 年 Ecma 国际发布了新版本 ECMAScript 2015。

JavaScript 包括 ECMAScript、DOM、BOM

ECMAScript
- ECMAScript 是由ECMA 国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。
- ECMAScript 规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。
DOM文档对象模型
- 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。
BOM浏览器对象模型
- BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

4 浏览器内核

排版引擎（渲染引擎）
- 负责将取得的网页内容（如HTML、CSS等）进行解析和处理，然后显示到屏幕中。
- 俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit
JavaScript 引擎
- 用于解析 JavaScript 语言，通过执行代码来实现网页的交互效果。
- 比如 chrome 浏览器的 V8

浏览器本身并不会执行 JS 代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码。

JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以 JavaScript 语言归为脚本语言，会逐行解释执行。

5 第一个 JavaScript 程序

<script>
    alert('第一个 JavaScript 程序');
</script>

JavaScript 语法规则：

JavaScript严格区分大小写，在编写代码时一定注意大小写的正确性。
JavaScript代码对空格、换行、缩进不敏感，一条语句可以分成多行书写。
如果一条语句结束后，换行书写下一条语句，后面的分号可以省略。
在HTML中我们推荐使用双引号，JS中我们推荐使用单引号

6 JavaScript 引入方式

6.1 嵌入式

嵌入式就是使用 <script> 标签包裹 JavaScript 代码，直接编写到HTML文件中。

<!-- 语法 -->
<script>
    JavaScript语句;
</script>

<script type="text/javascript">
     JavaScript语句;
</script>

type 属性用于告知浏览器脚本的类型。
type 默认值为text/javascript（HTML5），可以省略 type 属性。

6.2 外链式

外链式是指将 JavaScript 代码保存到一个单独的文件中，通常使用“js”作为文件的扩展名，然后使用 <script> 标签的src属性引入文件中。

<!-- 语法 -->
<script src="js/test.js"></script>

相比嵌入式，外链式优点：

嵌入式会导致 HTML 与 JavaScript 代码混合在一起，不利用修改和维护。
嵌入式会增加 HTML 文件的体积，影响网页本身的加载速度，而外链式可以利用浏览器缓存提高速度。
外链式有利于分布式部署。网页中链接的 js、css、图片等静态文件可以部署到 CDN 服务器上，利用 CDN 的优势加快下载速度。

6.3 行内式

行内式是将 JavaScript 代码作为HTML标签的属性值使用。

<!-- 语法 -->
<a href="javascript:alert('Hello');">test</a>
<input type="button" onclick="alert('Hello');" value="test" />

目前网页开发推崇结构、样式、行为的分离，即分离HTML、CSS、JavaScript三部分的代码，避免直接写在HTML标签的属性中，从而更有利于维护。因此在实际开发中不推荐使用行内式。

7 JavaScript 异步加载

在引入 JavaScript 代码时，页面的下载和渲染都会暂停，等待脚本执行完成后才会继续（内嵌式或外链式）。这样会导致页面出现白屏，或者打开页面样式错乱。

解决方案：

对于不需要提前执行的代码，将 <script> 标签放在 <body> 标签的底部，可以减少对整个页面下载的影响。

可用 HTML5 为 <script> 标签新增的两个可选属性：async 和 defer

<!-- 方式一：async 脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）-->
<script src="http://js.test/file.js" async></script>
<!-- 方式二：defer 当页面已完成加载后，才会执行脚本 -->
<script src="http://js.test/file.js" defer></script>

8 常用输出语句

8.1 alert() 警告框

alert(msg) 会在页面弹出一个提示框，内容是 msg。

<script>
    alert(msg);
</script>

8.2 console.log() 控制台输出

console.log(msg) 会在开发者工具控制台，输出内容 msg。

<script>
    console.log(msg);
</script>

8.3 document.write() 文档页面输出

document.write(msg) 会在网页当中输出内容 msg。

<script>
    document.write(msg);
</script>

9 JavaScript 注释

注释可便于代码的可读性，在程序解析时会被 JavaScript 解释器忽略。

9.1 单行注释

单行注释使用“//”。以“//”开始，到该行结束或 JavaScript 标记结束之前的内容都是注释。

<script>
  document.write('Hello, JavaScript'); // 输出一句话
</script>

9.2 多行注释

多行注释使用“/* */”。多行注释以“/*”开始，以“*/”结束，它们之间的内容为多行注释。

<script>
  /*
  alert('Hello, JavaScript');
  console.log('1234');
  */
</script>

多行注释中可以嵌套单行注释。
多行注释中不能再嵌套多行注释。

10 数据与运算

10.1 数学运算

JavaScript支持加（+）减（-）乘（*）除（/）四则运算。
小括号可以改变优先顺序。

alert(220 + 230);             // 输出结果：450
alert(2 * 3 + 25 / 5 - 1);    // 输出结果：10
alert(2 * (3 + 25) / 5 - 1);  // 输出结果：10.2

10.2 比较大小

比较的结果是 true 或 false，这是一种布尔类型的值，表示真和假。
如果比较结果为 true，表示成立；如果比较结果为 false，表示不成立。

alert(22 > 33);			// 输出结果：false
alert(22 < 33);			// 输出结果：true
alert(22 == 33);		// 输出结果：false
alert(22 == 22);		// 输出结果：true

10.3 字符串

当需要在警告框中输出“Hello”时，为了在代码中保存“Hello”这个数据，就需要用到字符串这种数据类型。
在 JavaScript 中，使用单引号或双引号包裹的数据是字符串。

alert('Hello');		// 单引号字符串
alert("Hello"); 	// 双引号字符串

使用“==”运算符可以比较两个字符串是否相同。

alert('22' == '22');	// 输出结果：true
alert('22' == '33');	// 输出结果：false

字符串与数字的拼接

“+”运算符的操作数只要有一个是字符串，就表示字符串拼接。
“+”运算符的操作数全部为数字时，表示相加。
字符串内数据不进行运算

alert('220' + '230');		            // 输出结果：220230
alert('220 + 230 = ' + 220 + 230);	    // 输出结果：220 + 230 = 220230
alert('220 + 230 = ' + (220 + 230));	// 输出结果：220 + 230 = 450

10.4 比较语句

if…else 语句用于需要根据比较的结果，来执行不同的代码。

if (22 > 33) {
    
    
  alert(true);	// 判断成立时执行此语句
} else {
    
    
  alert(false);	// 判断不成立时执行此语句
}

10.5 变量

当一个数据需要多次使用时，可以利用变量将数据保存起来。

概念：变量是保存数据的容器，每一个变量都有唯一的名称。

定义：利用var关键字定义。

var num1 = 22;	
var num2 = 33;	
alert(num1 + num2);
alert(num1 - num2);

var temp = num1;
num1 = num2;
num2 = temp;
alert('num1 = ' + num1);
alert('num2 = ' + num2);

10.6 函数

代码量增多，维护困难、条理不清、阅读困难。所以代码应该模块化、组件化，才能更好的维护。

常将一些常用的功能模块编写成函数，通过调用函数来完成任务。alert() 就是一个函数。
函数执行后可返回一个表示执行结果的值。
函数支持传入一个或多个参数，多个参数可使用逗号分隔。
除直接调用 JavaScript 内置的函数，用户还可自己定义函数，用于封装代码。

var name = prompt('请输入你的名字：','匿名');

// 定义函数
function sum(a, b) {
    
    
    var c = a + b; 
    return c;
}
// 调用函数，输出结果：33
alert(sum(11, 22));
// 调用函数，输出结果：55
alert(sum(22, 33));

10.7 对象

编写程序如同打游戏，在程序中划分对象，如同在游戏中划分角色。
一个对象的成员由属性和方法组成，如同角色有基本角色，有技能。
属性就是一些变量，可以用来保存角色的基本信息，比如攻击、防御、法强、魔抗等等。
方法就是一些函数，就是角色的技能。
当我们操作一个角色时，通过查看角色的属性来了解基本信息，通过角色的技能来进行游戏。

window 对象

window 对象是 JavaScript 与浏览器之间交互的主要接入点。
提供了用于 JavaScript 脚本控制浏览器的一些接口。
弹出警告框、输入框，或者更改网页文档内容等效果。

window.console;
window.document;
window.alert('test');
window.prompt('test');
window.console.log('test');
window.document.write('test');

document 对象

document 对象是 window 对象的属性之一，主要用于与网页文档进行交互。

<div id="test">Hello</div>
<script>
    var test = document.getElementById('test');
    alert(test.innerHTML);
</script>

String 对象

在代码中直接定义的字符串，就可以作为对象来使用。
String对象用于对字符串进行处理。

var str = 'apple';		     // 定义一个字符串
alert(str.length);		     // 获取字符串长度，输出结果：5
alert(str.toUpperCase());	 // 获取转换大写后的结果，输出结果：APPLE
alert('aa'.toUpperCase());	 // 直接调用字符串的成员方法，输出结果：AA

自定义对象

除了直接使用 JavaScript 中的内置对象，用户也可以自己创建一个自定义对象。

// 创建对象
var stu = {
    
    };          // 创建一个名称为stu的空对象
// 添加属性
stu.name = '小明';      // 为stu对象添加name属性
stu.gender = '男';      // 为stu对象添加gender属性
stu.age = 18;		   // 为stu对象添加age属性
// 访问属性
alert(stu.name);       // 访问stu对象的name属性，输出结果：小明
// 添加方法
stu.introduce = function () {
    
    
  return '我叫' + this.name + '，今年' + this.age + '岁。';
};
// 调用方法
alert(stu.introduce());	// 输出结果：我叫小明，今年18岁。

10.8 事件

事件是指可以被 JavaScript 侦测到的交互行为。

在网页中滑动、点击鼠标，滚动屏幕，敲击键盘等。

当发生事件以后，可以利用 JavaScript 编程来执行一些特定的代码，从而实现网页的交互效果。

<input id="btn" type="button" value="test">
<script>
    document.getElementById('btn').onclick = function() {
      
      
        alert(this.value);  // 获取按钮的value属性，输出结果：test
    };
</script>

11 练习作业

比较两个数字的大小
- 定义A，B两个数。
- 运用if条件语句，判断是两数之间是大于、小于还是等于的关系。
- 通过consloe.log()函数输出比较的结果。
编写一个将用户输入的信息输出到网页的 JavaScript 程序。
计算 1*2*3*4*……*100 的乘积。
页面中输出 1+2+3+4+……+100 算式，并计算结果。
输入钱数，点击按钮，输出由多少张100元，多少张50元，多少张20元，多少张10元，多少张5元，多少张1元。
改变网页背景色
- 编写网页，提供按钮。
- 为按钮添加点击事件。
- 根据函数传递的不同参数设置网页的背景色。
验证用户输入的密码
- 通过输入框获取用户输入的密码。
- 判断用户输入的密码。
- 若输入正确，则提示“密码输入正确！”，否则提示“密码输入错误！”
计算年龄小游戏
- 在输入窗口中输入出生年份，得到你的年龄