一口气学会 JavaScript

TypeScript 是一种面向对象的编程语言，是 JavaScript 的超集，包含了 JavaScript 的所有元素

扩展了 JavaScript 语法（静态类型、类、模块、接口和类型注解），编译结果为 JavaScript 代码

文中红色部分，属于 TypeScript 语言独有，其余部分属于 JavaScript 和 TypeScript 二者共有

---

弹出信息警示框：alert("Hello JavaScript");

弹出输入提示框：prompt("请输入您的密码");

输出到页面中：document.writeln("Hello JavaScript");

输出到控制台：console.log("Hello JavaScript");

一、语言基础

JavaScript 在语言风格上，与 C、C++、Java、C# 等语言基本相同

1、代码规范

（1）注释：// 单行注释 、/* 多行注释 */                      
（2）语句以分号结束
（3）程序块以{}划出范围
（4）用关键字与名称来声明变量
（5）把 boolean 测试放在括号中
（6）字符串既可以使用双引号，也能使用单引号

2、运算符及优先级

（1）算数运算符：四则/求余/自增/自减...
（2）比较运算符
（3）逻辑运算符
（4）赋值运算符
（5）位运算
（6）运算优先级

3、流程控制语句

（1）条件语句
        1、if 条件语句
                a、单向条件语句
                b、双向判断语句  or  三目表达式
                c、多向判断语句
        2、switch 条件语句
（2）循环语句
        1、while 循环
        2、do...while 循环
        3、for 循环
（3）跳转语句
        1、break 语句
        2、continue 语句
（4）Throw 和 Try 语句
        1、throw 语句：抛出异常或错误：throw new Error('this error')
        2、try 语句：捕获和处理异常或错误：try{  // 可能会异常的语句 }      catch (e){ // 异常处理 }

---

4、变量与数据类型 (正片开始)

（1）声明：
        1、变量声明：以关键字 let 开头的声明引入变量，该变量在执行期间可以具有不同的值。
        2、常量声明：以关键字 const 开头的声明引入只读常量，该常量只能被赋值一次。

（2）基本数据类型
        数值型：
           1、number 数字型
           2、boolean 布尔型
        非数值型：
           1、string 字符串：双引号中，只能含单引号
           2、undefined 未定义
           3、null 空
           4、JS  Array  数组
           5、TS  array  数组
           6、TS  tuple  元组               // JS 数组支持任意类型，但 TS 并不支持，于是引入了元组
           7、TS  enum 枚举 

        示例：let   a = 100，b = "程序员"，c = true；
                   d = [100，"程序员"，true];                                                               //  JS 数组

                   d = [100，150，200];                                                                      //  TS 数组
                   let   a: number = 100, b: string = "程序员", c: boolean = true;        //  TS 类型注解
                   let   d: (number | string | boolean)[] = ["程序员"，true，100];         //  TS 联合类型
                   let   d: (number , string , boolean)[] = [100，"程序员"，true];         //  TS 元组
                   enum  Color{ Red, Pink, Black }      let  bc: Color = Color.Pink;      //  TS 枚举

5、函数

（1）定义函数：函数是一段被命名的、用于完成特定任务的代码块。
                function  func_Name( parameters_list ){  body  }
                function  func_Name( parameters_list：type_list )：return_type{  body  }
        1、返回值类型：因为 TS 支持类型推断，故可以省略标注返回类型
        2、参数可选，且该参数为形参 (局部变量)
        注：多返回值时，可以用数组来返回多个值，再用数组的解构接收数值

（2）调用函数：参数严格对应（位置参数）
        1、默认参数：function  add( price, rate = 0.50){  body  }
                                function  add( price：number, rate：number = 0.50)：return_type{  body  }
        2、可选参数：function   add( price：number, rate ? : number )：return_type{  body  }
        3、剩余参数：function sum( firstName, ...restOfName){  body  }
        ​​​​​注：最后一个参数将成为一个由剩余的参数组成的数组，索引从 0 到 restOfName.length -1

（3）匿名函数：没有名称的函数： let  multiply = function(a, b){  return a * b;  };
         主要用于 函数表达式、回调函数、立即执行函数、数组方法、对象方法 ...

（4）TS 箭头函数：const  add = (a: number, b: number): number => a + b;

（5）TS 函数重载：多个具有相同名称，但参数类型或参数数量不同的函数

6、类与对象

JavaScript 和 TypeScript 是面向对象的编程语言，支持面向对象的所有特性，比如 类、接口等。

（1）类与对象
        1、类：对象的模板，拥有所有对象的共同特征和属性（抽象）
        2、对象：具体的个体，拥有一组属性和方法的集合（具体）
        3、属性：描述对象特性的数据，即若干变量。                        
        4、方法：操作对象的若干动作，即若干函数。                        
        static 修饰的 变量/方法，只此一份，被所有对象共享，可以直接通过类名调用。

（2）定义类：class  class_name{    成员变量 (属性)  +  构造方法  +  成员方法    }
        this 代表当前对象。this.x = x , 表示把方法参数的值 (局部变量) 赋给当前对象的成员变量
                class Car {   
                        engine：string;                                                                         // 成员变量（属性） 
                        constructor(engine：string)：string{                                        // 构造方法
                                this.engine = engine   
        ·               }  
                        disp()：void {  console.log("发动机为 : "+this.engine) }}          // 成员方法
（3）使用类： 先 new 一个对象：var  object_name = new class_name()；
                        再通过“.”操作符，使用这个对象的属性和方法

（4）继承类：class child_class extends parent_class{...}                            // 单继承
        1、子类可以直接使用父类的非私有属性和方法（使用 super 关键字）
        2、子类可以重写父类的方法，以实现更具体或不同的行为。
（5）封装类：setter 和 getter 可用于提供对对象属性的受控访问（被 private 修饰）
                private _age: number = 0
                get  age(): number{  return this._age;  }
                set  age(x: number){
                        if (x < 0){  throw Error('Invalid age argument');  }
                        this._age = x;
                }

7、Math 类

JavaScript 只有一种数字类型，因此不存在类型转换，只能介绍一下数字的运算了。
Math 类 ：包含了执行基本数学运算的属性和方法，可以通过 Math 在主函数中直接调用。
                含数学函数、三角函数、随机函数、数学常量，参考  Java Math 类

8、字符串类

字符串是一个不可变的字符序列。如果对字符串进行操作，实际上会创建一个新的字符串对象。

（1）定义字符串：var  b = "程序员"；                    let   b: string = "程序员";

（2）使用字符串：
        1、拼接：字符串 + 数字 = 字符串（先转换为串，再做拼接。都是字符串，才能拼接）
        2、格式化：
                a、帮忙占位：在串中，使用 ${变量}  帮变量占位
                      示例：let name = "John";        let person = "Hello, my name is ${name} ";          
                b、表达式格式化：把上述变量替换为表达式即可
        3、类的常用方法：参考 JavaScript 字符串类

9、JS 数组类

JavaScript 的数组数据元素可以是任意类型，不同于常规数字。但 TypeScript 的数组元素，通常只能是同种类型。为了存储任意类型，TypeScript 引入了元组的概念（后文会详细介绍）
数组名表示数组首个元素的地址，即 &arry[0] ；而 arry[0] 表示第一个元素，而非地址。

（1）定义数组
        1、常规式 ：var  myCars = new Array();         myCars[0] = "Saab";  ...
                             var  myCars: string[] = new Array();                                       // TS 数组
        2、直接写 ：var  myCars = ["Saab" , 520 , true];                           

（2）使用数组：
        1、解构：把数组元素赋值给变量
                        let  arr = [10, 20, 30];                          let   [a, b, c] = arr;
                        var arr：number[] = [10, 20, 30];        var  [x, y, z ] = arr;
        2、多维数组 (二维为例)：数组的数组：type[typeLength1][typeLength2]
        3、类的常用方法：参考  JavaScript Array（数组）对象

10、TS 元组类

TypeScript 元组就相当于 JavaScript 数组，并且，我们可以对元组的元素进行操作。

（1）定义元组：let  myCars = ["Saab" , 520 , true];

（2）使用元组：
        1、解构：把元组元素赋值给变量：var  a = [10, "Runoob"];        var  [b, c] = a;
        2、添加：push() 方法：向元组添加元素，添加在最后面
        3、删除：pop()   方法：从元组中移除最后一个元素，并返回移除的元素

11、TS 枚举类

在 TypeScript 中，枚举是一个特殊的类，一般表示一组常量，使用 enum 关键字来定义。
其成员有一个默认数值，从 0 开始递增，我们能手动为枚举成员指定具体的数值 or 字符串。

（1）定义枚举：enum Color {  Red, Green, Blue  }        
                            let   myColor = Color.Red;                  console.log(myColor);        // 输出 0

（2）赋数字：enum Direction {  Up = 1, Down, Left = -1, Right  }
                        let  myDirection = Direction.Right;         console.log(myDirection);   // 输出 0 !!!

（3）赋字符串：enum Status {  Success = 'SUCCESS', Failure = 'FAILURE'  }
                           let myStatus = Status.Success;           console.log(myStatus);      // 输出 'SUC..'

二、ArkTS 语言

ArkTS 是 HarmonyOS 的主力应用开发语言。其围绕应用开发在 TS 基础上做了进一步扩展，保持了 TS 的基本风格，同时通过规范定义强化开发期静态检查和分析，提升程序执行稳定性和性能。

1、关于类与对象：
   （1）必须显式初始化类的属性（必须被精确标注）
   （2）禁止向对象中添加、删除新的属性或方法，禁止将 any 类型的值赋值给对象属性。

三、语言进阶

注：下述的 BOM 对象、DOM 对象、事件处理 均是 JS 的内容，即写在<script>标签中的。

1、BOM 对象 - window 对象

BOM（Browser Object Model）浏览器对象模型，提供了一些对象及其方法，用于与浏览器窗口进行交互。BOM 对象的核心是 window 对象，位于 BOM 对象的最顶层（老大哥般的存在）

一个窗口就是一个 window 对象，通过使用 Window 对象的属性和方法来操作这个窗口。

注：对于 window 对象来说，无论是它的属性，还是方法，都可以省略 window 前缀。

（1）常用属性：建议去网上做个全面了解
        width：宽度
        height：高度

（2）常用方法
        alert()：提示对话框
        confirm()：判断对话框
        prompt()：输入对话框
        open() 和 close()：打开/关闭窗口
        setTimeout() 和 clearTimeout()：开启/关闭“一次性”定时器
       setInterval() 和 clearInterval()：开启/关闭“重复性”定时器

（2）location 子对象：包含有关当前 URL 的信息，并且可以用于加载新的页面。

（3）navigator 子对象：提供有关浏览器的信息，例如浏览器的名称、版本等。

（4）screen 子对象：包含有关客户端屏幕的信息，如屏幕的宽度和高度。

2、DOM 对象 - document 子对象

虽然 document 对象是 window 对象的子对象，但一般会看成独立的，即 DOM 文档对象模型。

一个窗口就是一个 window 对象，这个窗口里面的 HTML 文档，就是一个 document 对象，document 对象是 window 对象的子对象，document 对象操作的是 HTML 页面中所有的元素。

（1）DOM 操作前
        第一步：等待页面完全解析：window.onload = function(){  ...  }
        第二步：先找到目标元素（先访问），再赋给变量（方便操作）

（2）访问指定的元素对象
        1、document.getElementById("id名")
        2、document.getElementsByTagName("元素名")
        3、document.getElementsByClassName("类名")
        4、document.getElementsByName("name名")
        5、document.document.title 和 document.body
        6、document.querySelector("选择器") 和 querySelectorAll("选择器")，返回一个类数组
        注：类数组，即可以使用数组的 length 属性、数组下标

（2）新建 DOM 对象，并插入文档中
        1、新建元素对象：var elem = document.createElement("元素名");
        2、新建文本对象：var txt = document.createTextNode("文本内容");

        3、插到某元素末尾：某元素对象.appendChild(新对象)
        4、插到某元素之前：某元素对象.insertBefore( 新对象, 某子元素)

（3）删除元素对象：某元素对象.removeChild(某子元素)

（4）复制元素对象：被复制元素.cloneNode(bool)

（5）替换元素对象：某元素对象.replaceChild(新对象, 旧子元素);

3、事件处理

事件一般是用户对页面的一些“小动作”引起的，例如按下鼠标、移动鼠标等，这些都会触发相应的一个事件。不懂事件操作，JavaScript等于白学。

（1）事件操作前
        第一步：等待页面完全解析：window.onload = function(){  ...  }
        第二步：先找到目标元素（先访问），再赋给变量（方便操作）
        第三步：事件调用（如下）

（1）事件调用：obj.事件名 = function() { …… };
        obj 是一个DOM对象，即使用 getElementById() 等方法，获取到的元素节点（容器标签）

（2）常见事件
        1、鼠标事件
                onclick：单击：任何元素都能添加鼠标单击事件
                onmouseover 和 onmouseout：移入/移出
                onmousedown 和 onmouseup：按下/松开
                onmousemove：移动
        2、键盘事件
                onkeydown 和 onkeyup：按下/松开（一瞬间所触发的事情）
        3、表单事件
                onfocus 和 onblur：获取/失去焦点：仅限于表单元素和超链接
                onselect：选中文本框中的内容时，都会弹出对应的对话框
                onchange：选择
        4、编辑事件
                语法格式：document.body.编辑事件名 = function () { return false; }
                oncopy：防止页面内容被复制：
                onselectstart：防止页面内容被选取
                oncontextmenu：禁止鼠标右键  
        5、页面事件
                onload：文档加载成后，再执行的一个事件
                onbeforeunload：离开页面前，触发的一个事件