04_JavaScript入门

以你之姓@ 2023-10-16 14:24 32阅读 0赞

### 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 程序 ###

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
    
        
        <script src="http://js.test/file.js" async></script>
        
        <script src="http://js.test/file.js" defer></script>

### 8 常用输出语句 ###

#### 8.1 alert() 警告框 ####

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

#### 8.2 console.log() 控制台输出 ####

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

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

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

### 9 JavaScript 注释 ###

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

#### 9.1 单行注释 ####

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

#### 9.2 多行注释 ####

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

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

### 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元。
 *  改变网页背景色
    
     *  编写网页，提供按钮。
     *  为按钮添加点击事件。
     *  根据函数传递的不同参数设置网页的背景色。
 *  验证用户输入的密码
    
     *  通过输入框获取用户输入的密码。
     *  判断用户输入的密码。
     *  若输入正确，则提示“密码输入正确！”，否则提示“密码输入错误！”
 *  计算年龄小游戏
    
     *  在输入窗口中输入出生年份，得到你的年龄