目录
一.JavaScript简介
JavaScript是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
JavaScript脚本语言具有以下特点:
①JavaScript是一种解释型的脚本语言，JavaScript是在程序的运行过程中逐行进行解释。；②JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象；③JavaScript语言中采用的是弱类型的变量类型，对使用的数据类型未做出严格的要求，是基于Java基本语句和控制的脚本语言，其设计简单紧凑； ④动态性。JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应； ⑤跨平台性。JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。
二.JavaScript用法
HTML 中的 Javascript 脚本代码必须位于 <script> 与 </script> 标签之间。
<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
<script>
alert("HTML页面插入JavaScript需要使用scrip标签");
</script>运行效果：
1.<body> 中的 JavaScript
把一个 JavaScript 函数放置到 HTML 页面的 <body> 部分。
2.<head> 中的 JavaScript
把一个 JavaScript 函数放置到 HTML 页面的 <head> 部分。
3.外部的 JavaScript
把脚本保存到外部文件中。外部 JavaScript 文件的文件扩展名是 .js（这和之前css外部样式表比较相似）。使用外部文件，需在 <script> 标签的 "src" 属性中设置该 .js 文件
外部文件通常包含被多个网页使用的代码。
以上三种方式的效果图：
三.JavaScript 语句
JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
JavaScript 语句向 id="lg" 的 HTML 元素输出文本 "这是lg语法演示" ：
<h1>语法演示</h1>
<p id="lg">这里写了也没用</p>
<script>
document.getElementById("lg").innerHTML = "这是lg语法演示";
</script>
运行效果图：
JavaScript 代码是 JavaScript 语句的序列。浏览器按照编写顺序依次执行每条语句。
<h1>顺序演示</h1>
<p id="lg"></p>
<div id="LG"></div>
<script>
document.getElementById("LG").innerHTML="白色风车";
document.getElementById("lg").innerHTML="回到过去";
</script>运行效果图：
四.声明 JavaScript 变量
在 JavaScript 中我们使用 var 关键词来声明变量，变量声明之后，该变量是空的（这与c语言是一样的）。如需向变量赋值，请使用等号，可以在声明变量时对其赋值，也可以在声明变量后再对其赋值；
<script>
var x="5";
var y;
y=6;
document.write(x + "<br>");
document.write(y + "<br>");
</script>
五.JavaScript 对象
在 JavaScript中，几乎所有的事物都是对象。这一点和C++有一点类似。
对象也是一个变量，但对象可以包含多个值（多个变量），每个值以 name:value 键值对呈现。
对象由花括号分隔。在括号内部，对象的属性以名称和值的形式来定义。属性由逗号分隔：
1.对象属性
键值对在 JavaScript 对象通常称为对象属性
<script>
var Jay=
{
one: "轨迹",
two: "暗号",
three: "你听得到"
};
document.write(Jay.one+ "<br>");
document.write(Jay.two+ "<br>");
document.write(Jay.three+ "<br>");
</script>运行效果图：
2.对象方法
对象的方法定义了一个函数，并作为对象的属性存储。对象方法通过添加 () 调用 (作为一个函数)。
访问对象方法通常 fullName() 是作为 person 对象的一个方法， fullName 是作为一个属性。
如果使用 fullName 属性，不添加 (), 它会返回函数的定义：
<h1>创建和访问对象方法。</h1>
<h2>对象方法是一个函数定义,并作为一个属性值存储。</h2>
<p id="lg"></p>
<p id="LG"></p>
<script>
var Jay= {
one: "轨迹",
two: "暗号",
three: "你听得到",
four :function()
{
return this.one + " " + this.two+" "+this.three;
}
};
document.getElementById("lg").innerHTML = "不加括号输出函数表达式：" + Jay.four;
document.getElementById("LG").innerHTML = "加括号输出函数执行结果：" + Jay.four();
</script>运行效果图：
六.JavaScript 函数
1.自调函数
函数表达式可以 "自调用"，自调用表达式会自动调用。如果表达式后面紧跟 () ，则会自动调用。
<h1>自调用函数：</h1>
<p id="lg"></p>
<script>
(function myFunction(a,b){
document.getElementById("lg").innerHTML = "这自调用函数 自己调用的结果";
})();
</script>运行效果图：
2.函数是对象
toString() 方法将函数作为一个字符串返回
<p> toString() 将函数作为一个字符串返回：</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
var c=a;
var d=b;
document.write(c);document.write(d);
}
document.getElementById("demo").innerHTML = myFunction.toString();
</script>
七.JavaScript事件
HTML 事件是发生在 HTML 元素上的事情。当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。
1.onclick用户点击 HTML 元素
<h1>点击按钮事件</h1>>
<button onclick="getElementById('lg').innerHTML=Date()">点击按钮 现在的时间是:</button>
<p id="lg"></p>
运行效果：
2.onmouseover，onmouseleave事件
onmouseover：当鼠标指针移动到元素上时触发。
onmouseleave：当鼠标指针移出元素时触发。
<p id="lg" onmouseover="bianhua()" onmouseleave="huifu()">点击按钮事件</p>
<script>
function bianhua()
{
document.getElementById("lg").style.color="pink";
document.getElementById("lg").style.width="50px";
}
function huifu()
{
document.getElementById("lg").style.color="black";
document.getElementById("lg").style.width="100px";
}
</script>运行效果图：
鼠标移上来： 鼠标移开：
更多更详细的事件可以在HTML DOM 事件对象 | 菜鸟教程 这里学习
八.JavaScript 字符串
1.特殊字符\
在 JavaScript 中，字符串写在单引号或双引号中。需要使用反斜杠（\）来转义字符串中的双引号。
<script>
document.write( "\"轨迹、你听得到、暗号\"就是Jay最屌的歌")
</script>
运行效果图：
2.字符串长度
可以使用内置属性length来计算字符串的长度：
<script>
var a= "\"轨迹、你听得到、暗号\"就是Jay最屌的歌";
document.write("<p>" + a + "</p>");
var b=a.length;
document.write("<p>字符串长度：\n" + b + "</p>");
</script>运行效果图：
3.特殊字符表
反斜杠是一个转义字符。 转义字符将特殊字符转换为字符串字符。
下表中列举了在字符串中可以使用转义字符转义的特殊字符：
| \' | 单引号 |
| \" | 双引号 |
| \\ | 反斜杠 |
| \n | 换行 |
| \r | 回车 |
| \t | tab(制表符) |
| \b | 退格符 |
| \f | 换页符 |
其中\"和\n在上个示例中已经演示。
九.JavaScript 计时事件
1.setInterval() 方法
setInterval() 间隔指定的毫秒数不停地执行指定的代码
<p>在页面显示一个时钟 通过setInterval每隔1秒更新代码实现</p>
<p id="lg"></p>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
var d=new Date();
document.getElementById("lg").innerHTML=d;
}
</script>
clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
<p>在页面显示一个时钟 通过setInterval每隔1秒更新代码实现</p>
<p id="lg"></p>
<button onclick="myStopFunction()">停止</button>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
var d=new Date();
document.getElementById("lg").innerHTML=d;
}
function myStopFunction(){
clearInterval(myVar);
}
</script>
2.setTimeout() 方法
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。第二个参数指示从当前起多少毫秒后执行第一个参数。
<p>点击按钮，在等待1秒后弹出 "Hello"。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
setTimeout(function(){alert("Hello")},1000);
}
</script>clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。
<p>点击第一个按钮等待10秒后出现"Hello"弹框。</p>
<p>点击第二个按钮来阻止第一个函数运行。（你必须在10秒之前点击它）。</p>
<button onclick="myFunction()">点我</button>
<button onclick="myStopFunction()">停止弹框</button>
<script>
var myVar;
function myFunction(){
myVar=setTimeout(function(){alert("Hello")},10000);
}
function myStopFunction(){
clearTimeout(myVar);
}
</script>
十.TypeScript简介
TypeScript由微软开发的自由和开源的编程语言。TypeScript是JavaScript 的一个超集，支持ECMAScript6标准，通过在 JavaScript的基础上添加静态类型定义构建而成。给JavaScript加上静态类型后就能将调试从运行期提前到编码期，诸如类型检查、越界检查这样的功能才能真正发挥作用。 TypeScript的开发体验远远超过以往纯JavaScript的开发体验，无需运行程序即可修复潜在bug。
TypeScript 设计目标是开发大型应用，它可以编译成纯JavaScript，编译出来的 JavaScript可以运行在任何浏览器上，任何操作系统。
TypeScript 是一种给 JavaScript 添加特性的语言扩展。增加的功能包括：
类型批注和编译时类型检查；类型推断；类型擦除；接口；枚举；Mixin；泛型编程；名字空间；元组；Await
现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。TypeScript 可处理已有的JavaScript 代码，并只对其中的TypeScript 代码进行编译。
十一.TypeScript 与面向对象
面向对象是一种对现实世界理解和抽象的方法。
TypeScript 是一种面向对象的编程语言。面向对象主要有两个概念：对象和类。
对象：对象是类的一个实例，有状态和行为。例如，一个人是一个对象，他的状态有：名字、年龄，性别；行为有：吃饭、运动、学习等。
类：类是一个模板，它描述一类对象的行为和状态。
方法：方法是类的操作的实现步骤。
十二.TypeScript Map 对象
Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值(对象或者原始值) 都可以作为一个键或一个值。
创建 Map
TypeScript 使用 Map 类型和 new 关键字来创建 Map：
let myMap = new Map();初始化 Map，可以以数组的格式来传入键值对：
let myMap = new Map([
["key1", "value1"],
["key2", "value2"]
]); Map 相关的函数与属性：
- map.clear() – 移除 Map 对象的所有键/值对 。
- map.set() – 设置键值对，返回该 Map 对象。
- map.get() – 返回键对应的值，如果不存在，则返回 undefined。
- map.has() – 返回一个布尔值，用于判断 Map 中是否包含键对应的值。
- map.delete() – 删除 Map 中的元素，删除成功返回 true，失败返回 false。
- map.size – 返回 Map 对象键/值对的数量。
- map.keys() - 返回一个 Iterator 对象， 包含了 Map 对象中每个元素的键 。
- map.values() – 返回一个新的Iterator对象，包含了Map对象中每个元素的值 。
使用 es6 编译：
tsc --target es6 test.ts
十三.TypeScript 变量作用域
变量作用域指定了变量定义的位置。程序中变量的可用性由变量作用域决定。
TypeScript 有以下几种作用域：
全局作用域：全局变量定义在程序结构的外部，它可以在你代码的任何位置使用。
类作用域： 这个变量也可以称为字段。类变量声明在一个类里头，但在类的方法外面。 该变量可以通过类的对象来访问。类变量也可以是静态的，静态的变量可以通过类名直接访问。
局部作用域： 局部变量，局部变量只能在声明它的一个代码块中使用。
var global_num = 999 // 全局变量
class Numbers {
num_val = 24; // 实例变量
static sval = 11; // 静态变量
storeNum():void {
var local_num = 23; // 局部变量
}
}
console.log("全局变量为: "+global_num)
console.log(Numbers.sval) // 静态变量
var obj = new Numbers();
console.log("实例变量: "+obj.num_val)十四 .解构
将对象、数组中的元素拆分到指定变量中，以方便使用
//解构数组
let input = [89, 64, 2018, 10];
let [first, second] = input;//注意使用[]
console.log(first); // 89
console.log(second); // 64
let [one, ...others] = input; //剩余变量
console.log(...others);
//展开
let newArr = [89, ...others, 18];
console.log(newArr);
//解构对象
let o = {
a: "foo",
b: 12,
c: "bar"
};
let {a, b} = o;//注意使用{}，且变量名需与对象中道属性名一致
console.log(a, b);十五.TypeScript 命名空间
命名空间定义了标识符的可见范围，一个标识符可在多个名字空间中定义，它在不同名字空间中的含义是互不相干的。这样，在一个新的名字空间中可定义任何标识符，它们不会与任何已有的标识符发生冲突，因为已有的定义都处于其他名字空间中。
TypeScript 中命名空间使用 namespace 来定义，语法格式如下：
namespace SomeNameSpaceName { export interface ISomeInterfaceName { } export class SomeClassName { } }以上定义了一个命名空间 SomeNameSpaceName，如果我们需要在外部可以调用 SomeNameSpaceName 中的类和接口，则需要在类和接口添加 export 关键字。
要在另外一个命名空间调用语法格式为：
SomeNameSpaceName.SomeClassName;如果一个命名空间在一个单独的 TypeScript 文件中，则应使用三斜杠 /// 引用它，语法格式如下：
/// <reference path = "SomeFileName.ts" />嵌套命名空间，命名空间支持嵌套，即你可以将命名空间定义在另外一个命名空间里头，例：
namespace namespace_name1 {
export namespace namespace_name2 {
export class class_name { }
}
}十六.TypeScript 元组
数组中元素的数据类型都一般是相同的，如果存储的元素数据类型不同，则需要使用元组。组中允许存储不同类型的元素，元组可以作为参数传递给函数。
创建元组
语法格式如下：
var tuple_name = [value1,value2,value3,…value n]
访问元组
元组中元素使用索引来访问，第一个元素的索引值为 0，第二个为 1，以此类推第 n 个为 n-1，语法格式如下:
tuple_name[index]
元组运算
我们可以使用以下两个函数向元组添加新元素或者删除元素：
push() 向元组添加元素，添加在最后面。
pop() 从元组中移除元素（最后一个），并返回移除的元素。
TypeScript
var ele = [24,"Hello","World","typeScript"];
console.log("添加前元素个数："+mytuple.length) // 返回元组的大小
mytuple.push(12) // 添加到元组中
console.log("添加后元素个数："+mytuple.length)
console.log("删除前元素个数："+mytuple.length)
console.log(mytuple.pop()+" 元素从元组中删除") // 删除并返回删除的元素
console.log("删除后元素个数："+mytuple.length)更新元组
元组是可变的，这意味着我们可以对元组进行更新操作：
TypeScript
var ele = [24, "guiji", 8, "暗号"]; // 创建一个元组
console.log("元组的第一个元素为：" + ele[0])
// 更新元组元素
ele[0] = 121
console.log("元组中的第一个元素更新为："+ ele[0])解构元组
我们也可以把元组元素赋值给变量，如下所示：
var a =[10,"Runoob"] var [b,c] = a console.log( b ) console.log( c )十七.模块Module
TypeScript 模块的设计理念是可以更换的组织代码。模块是在其自身的作用域里执行，并不是在全局作用域，这意味着定义在模块里面的变量、函数和类等在模块外部是不可见的，除非明确地使用 export 导出它们。类似地，我们必须通过 import 导入其他模块导出的变量、函数、类等。
两个模块之间的关系是通过在文件级别上使用 import 和 export 建立的。
模块导出使用关键字 export 关键字，语法格式如下：
// 文件名 : SomeInterface.ts
export interface SomeInterface {
}要在另外一个文件使用该模块就需要使用 import 关键字来导入:
import someInterfaceRef = require("./SomeInterface");
总结
至此学习了web 开发人员必须学习的 3 门语言——HTML 定义了网页的内容；CSS 描述了网页的布局；JavaScript 控制了网页的行为。JavaScript语言需要学习了解的东西实在太多了，虽然有些语法规则和c++语言，qt语言的规则相似，但还是有不同的声明定义，短时间内确实还无法全部学习完总结，目前总结了这些，只能之后实时学一些再更新一些。最后TS的讲解过程比较快，所以掌握的没有前面那么好，临近期末作业也比较多，只花了比较多的时间在JavaScript上，对于TypeScript运用比较少。在之后的时间在慢慢深入学习TS，更新总结。