JavaScript & TypeScript 学习总结

一、JavaScript

1、JavaScript简介

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

2、JavaScript的组成

• 核心 （ECMAScript）
• 文档对象模型 （DOM）
• 浏览器对象模型 （BOM）

3、JavaScript特性

1. 解释性：JavaScript是一种解释性的语言，不需要编译成二进制代码，而是直接在浏览器中解释执行。

2. 动态性：JavaScript具有动态类型的特性，变量的类型可以根据上下文自动转换。

3. 事件驱动：JavaScript可以通过事件的触发执行相应的操作，例如单击按钮、键盘按键等。

4. 面向对象：JavaScript是一种面向对象的语言，支持类、继承、封装等面向对象的特性。

5. 轻量级：JavaScript的代码比较简单，文件体积较小，不会占用过多的系统资源，因此具有很好的性能和响应速度。

6. 跨平台：JavaScript可以在多个平台上运行，例如Web页面、Node.js环境、桌面应用程序等。

7. 操作DOM：JavaScript可以通过操作DOM（文档对象模型）来实现动态的网页效果和交互功能。

8. 支持异步编程：JavaScript具有异步编程的特性，可以通过异步处理机制来解决网络请求等耗时操作对页面渲染的影响，提高页面的响应速度。

4、JavaScript基本语法

4.1、标识符

所谓标识符，就是指变量、函数、属性的名字，或者函数的参数。标识符可以是按照下列格式规则组合起来的一或多个字符:
第一个字符只能是字母、下划线（ _ ）或美元符号（ $ ）之一；
其他字符可以是字母、下划线、美元符号或数字。
按照惯例，ECMAScript（European Computer Manufacturers Association） 标识符采用 驼峰大小写格式，也就是第一个字母小写，剩下的每个单词的首字母大写，如getNameById

4.2、插入标签

如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。

<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。

<script> 和 </script> 之间的代码行包含了 JavaScript:

例：<script> alert("我的第一个 JavaScript"); </script>

4.3、变量

与代数一样，JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）。

变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

• 变量必须以字母开头
• 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
• 变量名称对大小写敏感（y 和 Y 是不同的变量）

注意：JavaScript语句和JavaScript变量都对大小写敏感。

声明（创建） JavaScript 变量

在 JavaScript 中创建变量通常称为"声明"变量。

我们使用 var 关键词来声明变量，变量声明之后，该变量是空的（它没有值）。如需向变量赋值，使用等号。

例：var carname="Volvo"; document.getElementById("demo").innerHTML=carname;

4.4、注释

我们可以添加注释来对 JavaScript 进行解释，或者提高代码的可读性。

单行注释以 // 开头，多行注释以 /* 开始，以 */ 结尾。

4.5、函数语法

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

当调用该函数时，会执行函数内的代码。

可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。

例：function myFunction()
{
    var x=5;
    return x;
}

5、JavaScript 显示数据

JavaScript 可以通过不同的方式来输出数据：

• 使用 window.alert() 弹出警告框。
• 使用 document.write() 方法将内容写到 HTML 文档中。
• 使用 innerHTML 写入到 HTML 元素。
• 使用 console.log() 写入到浏览器的控制台。

6、JavaScript事件

HTML 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

通常，当事件发生时，你可以做些事情。

在事件触发时 JavaScript 可以执行一些代码。

HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。

例：<button οnclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>

7、JavaScript运算符

7.1、算术运算符

具体实例：

 7.2、赋值运算符

具体实例：

 除此之外，+ 运算符用于把文本值或字符串变量加起来（连接起来）。

如需把两个或多个字符串变量连接起来，请使用 + 运算符。

例：txt1="What a very";    txt2="nice day";      txt3=txt1+txt2;

运算结果如下：What a verynice day

7.3、比较运算符

具体实例：

 7.4、逻辑运算符

具体实例：

8、JavaScript类型转换

 JavaScript 变量可以转换为新变量或其他数据类型：

• 通过使用 JavaScript 函数
• 通过 JavaScript 自身自动转换

8.1、将数字转换为字符串

全局方法 String() 可以将数字转换为字符串。

该方法可用于任何类型的数字，字母，变量，表达式：

例：

String(x)         // 将变量 x 转换为字符串并返回
String(123)       // 将数字 123 转换为字符串并返回
String(100 + 23)  // 将数字表达式转换为字符串并返回

8.2、将布尔值转换为字符串

全局方法 String() 可以将布尔值转换为字符串。

Boolean 方法 toString() 也有相同的效果。

例：String(false)        // 返回 "false"
String(true)         // 返回 "true"

false.toString()     // 返回 "false"
true.toString()      // 返回 "true"

8.3、将日期转换为字符串

Date() 返回字符串。

例：Date()    // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

全局方法 String() 可以将日期对象转换为字符串。

例：String(new Date())    // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

Date 方法 toString() 也有相同的效果。

例：obj = new Date()
obj.toString()   // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

8.4、将字符串转换为数字

全局方法 Number() 可以将字符串转换为数字。

字符串包含数字(如 "3.14") 转换为数字 (如 3.14).

空字符串转换为 0。

其他的字符串会转换为 NaN (不是个数字)。

例：

Number("3.14")    // 返回 3.14
Number(" ")       // 返回 0
Number("")        // 返回 0
Number("99 88")   // 返回 NaN

9、语句

9.1、if语句

• if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
• if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
• if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
• switch 语句 - 使用该语句来选择多个代码块之一来执行

语法：

if (condition)
{
    当条件为 true 时执行的代码
}
else
{
    当条件不为 true 时执行的代码
}

9.2、switch语句

switch 语句用于基于不同的条件来执行不同的动作。

语法：

switch(n)

{

case 1: 执行代码块 1 break;

case 2: 执行代码块 2 break;

default: 与 case 1 和 case 2 不同时执行的代码

}

9.3、for循环

语法：

for (语句 1; 语句 2; 语句 3)
{
    被执行的代码块
}

语句 1 （代码块）开始前执行

语句 2 定义运行循环（代码块）的条件

语句 3 在循环（代码块）已被执行之后执行

例：

for (var i=0,len=cars.length; i<len; i++)
{ 
    document.write(cars[i] + "<br>");
}

9.4、while和do while循环

while 循环会在指定条件为真时循环执行代码块。

语法：

while (条件)
{
    需要执行的代码
}

例：

while (i<5)
{
    x=x + "The number is " + i + "<br>";
    i++;
}

do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。

语法：

do
{
    需要执行的代码
}
while (条件);

例：

do
{
    x=x + "The number is " + i + "<br>";
    i++;
}
while (i<5);

10、数组

数组对象是使用单独的变量名来存储一系列的值。

10.1、创建数组

创建一个数组，有三种方法。

下面的代码定义了一个名为 myCars的数组对象：

1、常规方式:

var myCars=new Array();
myCars[0]="Saab";      
myCars[1]="Volvo";
myCars[2]="BMW";

2、简洁方式

var myCars=new Array("Saab","Volvo","BMW");

3、字面

var myCars=["Saab","Volvo","BMW"];

10.2、访问数组

通过指定数组名以及索引号码，你可以访问某个特定的元素。

以下实例可以访问myCars数组的第一个值：

var name=myCars[0];

10.3、数组的方法和属性

使用数组对象预定义属性和方法：

var x=myCars.length             // myCars 中元素的数量
var y=myCars.indexOf("Volvo")   // "Volvo" 值的索引值

---

二、TypeScript

1、TypeScript简介

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

TypeScript 是一种给 JavaScript 添加特性的语言扩展。增加的功能包括：

• 类型批注和编译时类型检查
• 类型推断
• 类型擦除
• 接口
• 枚举
• Mixin
• 泛型编程
• 名字空间
• 元组
• Await

2、基础语法

TypeScript 程序由以下几个部分组成：

• 模块
• 函数
• 变量
• 语句和表达式
• 注释

2.1、模块

TypeScript 模块的设计理念是可以更换的组织代码。

模块是在其自身的作用域里执行，并不是在全局作用域，这意味着定义在模块里面的变量、函数和类等在模块外部是不可见的，除非明确地使用 export 导出它们。类似地，我们必须通过 import 导入其他模块导出的变量、函数、类等。

两个模块之间的关系是通过在文件级别上使用 import 和 export 建立的。

模块导出使用关键字 export 关键字，语法格式如下：

// 文件名 : SomeInterface.ts 
export interface SomeInterface { 
   // 代码部分
}

要在另外一个文件使用该模块就需要使用 import 关键字来导入:

import someInterfaceRef = require("./SomeInterface");

2.2、函数

函数是一组一起执行一个任务的语句。

您可以把代码划分到不同的函数中。如何划分代码到不同的函数中是由您来决定的，但在逻辑上，划分通常是根据每个函数执行一个特定的任务来进行的。

函数声明告诉编译器函数的名称、返回类型和参数。函数定义提供了函数的实际主体。

函数的定义和调用：

function test () {

// 函数定义

console.log("调用函数") }

test（）     //调用函数

函数返回值：

• return_type 是返回值的类型。

• return 关键词后跟着要返回的结果。

• 一般情况下，一个函数只有一个 return 语句。

• 返回值的类型需要与函数定义的返回类型(return_type)一致。

例：

• 实例中定义了函数 greet()，返回值的类型为 string。

• greet() 函数通过 return 语句返回给调用它的地方，即变量 msg，之后输出该返回值。。

编译以上代码，得到以下 JavaScript 代码：

 2.3、变量

变量是一种使用方便的占位符，用于引用计算机内存地址。

我们可以把变量看做存储数据的容器。

TypeScript 变量的命名规则：

• 变量名称可以包含数字和字母。

• 除了下划线 _ 和美元 $ 符号外，不能包含其他特殊字符，包括空格。

• 变量名不能以数字开头。

变量使用前必须先声明，我们可以使用 var 来声明变量。

我们可以使用以下四种方式来声明变量：

声明变量的类型及初始值：

var [变量名] : [类型] = 值;

变量作用域：

变量作用域指定了变量定义的位置。

程序中变量的可用性由变量作用域决定。

TypeScript 有以下几种作用域：

全局作用域 − 全局变量定义在程序结构的外部，它可以在你代码的任何位置使用。

类作用域 − 这个变量也可以称为 字段。类变量声明在一个类里头，但在类的方法外面。 该变量可以通过类的对象来访问。类变量也可以是静态的，静态的变量可以通过类名直接访问。

局部作用域 − 局部变量，局部变量只能在声明它的一个代码块（如：方法）中使用。

以下实例说明了三种作用域的使用：

 以上代码使用 tsc 命令编译为 JavaScript 代码为：

输出结果：

全局变量为: 12
10
实例变量: 13

2.4、语句和表达式

2.4.1、if语句

TypeScript if 语句由一个布尔表达式后跟一个或多个语句组成。

语法格式如下所示：

if(boolean_expression){
    # 在布尔表达式 boolean_expression 为 true 执行
}

如果布尔表达式 boolean_expression为 true，则 if 语句内的代码块将被执行。如果布尔表达式为 false，则 if 语句结束后的第一组代码（闭括号后）将被执行。

 

2.4.2、 if...else 语句

一个 if 语句后可跟一个可选的 else 语句，else 语句在布尔表达式为 false 时执行。

语法格式如下所示：

if(boolean_expression){
   # 在布尔表达式 boolean_expression 为 true 执行
}else{
   # 在布尔表达式 boolean_expression 为 false 执行
}

2.4.3、if...else if....else 语句

语法格式如下所示：

if(boolean_expression 1) {
    # 在布尔表达式 boolean_expression 1 为 true 执行
} else if( boolean_expression 2) {
    # 在布尔表达式 boolean_expression 2 为 true 执行
} else if( boolean_expression 3) {
    # 在布尔表达式 boolean_expression 3 为 true 执行
} else {
    # 布尔表达式的条件都为 false 时执行
}

注意：

一个 if 判断语句可以有 0 或 1 个 else 语句，她必需在 else..if 语句后面。

一个 if 判断语句可以有 0 或多个 else..if，这些语句必需在 else 之前。

一旦执行了 else..if 内的代码，后面的 else..if 或 else 将不再执行。

2.4.4、switch…case 语句

一个 switch 语句允许测试一个变量等于多个值时的情况。每个值称为一个 case，且被测试的变量会对每个 switch case 进行检查。

switch 语句的语法：

switch(expression){

case constant-expression :

statement(s);

break; /* 可选的 */

case constant-expression :

statement(s);

break; /* 可选的 */

/* 您可以有任意数量的 case 语句 */

default : /* 可选的 */ s

tatement(s);

}

switch 语句必须遵循下面的规则：

• switch 语句中的 expression 是一个要被比较的表达式，可以是任何类型，包括基本数据类型（如 number、string、boolean）、对象类型（如 object、Array、Map）以及自定义类型（如 class、interface、enum）等。
• 在一个 switch 中可以有任意数量的 case 语句。每个 case 后跟一个要比较的值和一个冒号。
• case 的 constant-expression 必须与 switch 中的变量 expression 具有相同或兼容的数据类型。
• 当被测试的变量等于 case 中的常量时，case 后跟的语句将被执行，直到遇到 break 语句为止。
• 当遇到 break 语句时，switch 终止，控制流将跳转到 switch 语句后的下一行。
• 不是每一个 case 都需要包含 break。如果 case 语句不包含 break，控制流将会 继续 后续的 case，直到遇到 break 为止。
• 一个 switch 语句可以有一个可选的 default case，出现在 switch 的结尾。default 关键字则表示当表达式的值与所有 case 值都不匹配时执行的代码块。default case 中的 break 语句不是必需的。

3、类

TypeScript 是面向对象的 JavaScript。

类描述了所创建的对象共同的属性和方法。

TypeScript 支持面向对象的所有特性，比如 类、接口等。

TypeScript 类定义方式如下：

class class_name { 
    // 类作用域
}

定义类的关键字为 class，后面紧跟类名，类可以包含以下几个模块（类的数据成员）：

1、字段 − 字段是类里面声明的变量。字段表示对象的有关数据。

2、构造函数 − 类实例化时调用，可以为类的对象分配内存。

3、方法 − 方法为对象要执行的操作。

3.1、创建类的数据成员：

以下实例我们声明了类 Car，包含字段为 engine，构造函数在类实例化后初始化字段 engine。

this 关键字表示当前类实例化的对象。注意构造函数的参数名与字段名相同，this.engine 表示类的字段。

此外我们也在类中定义了一个方法 disp()。

编译以上代码，得到以下 JavaScript 代码：

3.2、创建实例化对象：

我们使用 new 关键字来实例化类的对象，语法格式如下：

var object_name = new class_name([ arguments ])
类实例化时会调用构造函数，例如：

var obj = new Car("Engine 1")
类中的字段属性和方法可以使用 . 号来访问：

// 访问属性
obj.field_name 

// 访问方法
obj.function_name()

3.3、类的继承

TypeScript 支持继承类，即我们可以在创建类的时候继承一个已存在的类，这个已存在的类称为父类，继承它的类称为子类。

类继承使用关键字 extends，子类除了不能继承父类的私有成员(方法和属性)和构造函数，其他的都可以继承。

TypeScript 一次只能继承一个类，不支持继承多个类，但 TypeScript 支持多重继承（A 继承 B，B 继承 C）。

语法格式如下：

class child_class_name extends parent_class_name

具体实例：

类的继承：实例中创建了 Shape 类，Circle 类继承了 Shape 类，Circle 类可以直接使用 Area 属性：

 编译以上代码，得到以下 JavaScript 代码：

输出结果为：

圆的面积：233

 4、对象

对象是包含一组键值对的实例。 值可以是标量、函数、数组、对象等，如下实例：

 以上对象包含了标量，函数，集合(数组或元组)。

TypeScript类型模板

假如我们在 JavaScript 定义了一个对象：

var sites = { 
   site1:"Runoob", 
   site2:"Google" 
};

这时如果我们想在对象中添加方法，可以做以下修改：

sites.sayHello = function(){ return "hello";}

如果在 TypeScript 中使用以上方式则会出现编译错误，因为Typescript 中的对象必须是特定类型的实例。

 编译以上代码，得到以下 JavaScript 代码：

输出结果为：hello  Runoob

---

三、总结

       综上所述就是我在这个学期学到的有关JavaScript和TypeScript的一些相关知识，再次感谢老师教导指正，欲学习更多相关的知识，可参照以下几个网站：
     1、棋歌教学网JavaScript学习：Web技术基础
     2、棋歌教学网TypeScript学习：Web技术基础

     3、菜鸟教程HTML学习：JavaScript 教程 | 菜鸟教程

     4、菜鸟教程CSS学习：TypeScript 教程 | 菜鸟教程