JavaScript&TypeScript学习总结

---

前言

通过本次web应用基础课程，加上我之前自学的相关内容，我了解并且学到了很多的前端的知识，在此，我将对我所学到的JavaScript&TypeScript进行知识的总结

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、JavaScript是什么？

JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果。
JavaScript 运行在客户端(浏览器)的编程语言(后来有了node.js，使得JavaScript也可以运行在服务器端，因此JavaScript几乎全能)。作为一门编程语言，JavaScript是一门弱类型的语言，用来定义网页的行为。在前面，我们学习的HTML就像是小鸟的身体结构，此时只是一个雏形，所以不太美观，当我们学习了CSS后，小鸟就会长出鲜艳的羽毛，让我们赏心悦目。结合本次我们要总结的(JavaScript&TypeScript)，这只小鸟就会有 相应的行为，最终能够在湛蓝的天空中自由的翱翔！！！

二、JavaScript具体知识总结

1.JavaScript的引入

1.行内引入

行内引入方式必须结合事件来使用，但是内部js和外部js可以不结合事件

<开始标签 on+事件类型=“js代码”></结束标签>

<input type="button" onclick="alert('行内引入')" value="button" name="button">
<button 0nclick="alert(123)">点击按钮</button>

2.内部引入

在head或body中，定义script标签，然后在script标签里面写js代码

<script>
    alert("内部引入");
</script>

3.外部引入

定义外部js文件通过HTML的script标签进行文件的引入

<script type=“text/javascript” src=“./demo.js”>

2.JavaScript的基础语法

通过本学期的学习加实践，我对JavaScript的使用语法进行了相关总结：
1.JavaScript 是一个脚本语言。它是一个轻量级，但功能强大的弱类型编程语言。和其他编程语言一样，JavaScript也有自己的定义变量的语法。JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值：

var x=1

2.JavaScript的语句和其他编程语言类似，只有语法上的差异，在此仅简要举例
条件语句：

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

如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。

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

可以使用 typeof 操作符来查看 JavaScript 变量的数据类型。

typeof "wode"                 // 返回 string
typeof 10                    // 返回 number
typeof NaN                    // 返回 number
typeof false                  // 返回 boolean
typeof [ 1,2,3]              // 返回 object
typeof {name: 'Alice', age:18}  // 返回 object
typeof new Date()             // 返回 object
typeof function () {}         // 返回 function
typeof wanglaoshi                 // 返回 undefined

在JavaScript中，函数即对象，可以随意地被程序操控，函数可以嵌套在其他函数中定义，这样可以访问它们被定义时所处的作用域中的任何变量。

function myFunction()
{
alert("yep");
}

正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。

• 正则表达式是由一个字符序列形成的搜索模式。
• 当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。
• 正则表达式可以是一个简单的字符，或一个更复杂的模式。
• 正则表达式可用于所有文本搜索和文本替换的操作。

在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。

var str = "hello world";
var n = str.search("world");

var str = "hello world";
var res = str.replace(/world/i, "hello");

基础语法在此不再过多赘述

3.JavaScript的DOM(文档对象模型)

1.我们通过JavaScript来操作HTML的元素，需要获取元素对象，例如

var x=document.getElementById("wodeid");
var y=document.getElementsByClassName("wodeclass");
var z=document.getElementsByTagName("p");

2.获取到元素对象后，我们就可以对其内容进行修改

var x=document.getElementById("header");
x.innerHTML="这是标题";

3.获取到元素对象后，我们就可以对其样式属性进行修改

document.getElementById("p1").style.color="red";

4.获取到元素对象后，我们就可以对其绑定事件

var btn1 = document.querySelector('.btn1');
        var btn2 = document.querySelector('.btn2');
        // 1.传统方法
        btn1.onclick = function () {
            alert('hello');
            btn1.onclick = null;
        }
        // 2.注册监听
        btn2.addEventListener('click', fn);
        function fn() {
            alert('hello');
            btn2.removeEventListener('click', fn)
        }

5.HTML DOM 模型被构造为对象的树，这种结构被称为节点树：
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

获取到对应的HTML元素后，有一些常用的 HTML DOM 方法可以使用：

appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）
innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点

获取到对应的HTML元素后，有一些常用的 HTML DOM 属性可以使用：

innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点

3.JavaScript的BOM(浏览器对象模型)

BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
BOM 比 DOM 更大，它包含 DOM。
1.浏览器顶级对象window

它是 JS 访问浏览器窗口的一个接口。
它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。

2.window对象的窗口加载事件，当文档内容完全加载完成会触发该事件

window.onload = function(){}

3.window对象调整窗口大小

//监听窗口大小改变的事件
window.addEventListener("resize",function(){});

4.定时器
setInterval() 方法重复调用一个函数，每隔这个时间，就去调用一次回调函数

 window.setInterval(回调函数, [间隔的毫秒数]);

clearInterval()方法取消了先前通过调用 setInterval()建立的定时器。

 window.clearInterval(此处是setInterval方法返回的对象，唯一标识该定时器);

5.this指针
this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象

• 方法调用中谁调用this指向谁
• 构造函数中this指向构造函数的实例
• 全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）

三、TypeScript是什么？

TypeScript 是由微软开发的一款开源的编程语言，TypeScript 是 Javascript 的超集，遵循最新的 ES6、ES5 规范，TypeScript 扩展了 JavaScript 的语法。 TypeScript 更像后端 Java、C#这样的面向对象语言，可以让 TypeScript 开发大型企业项目。

为什么要学习TypeScript？

• 它使用基于类的面向对象编程，便于操作
• TypeScript的出错在编译阶段就能提示
• Typescript能够编译出一个能在所有浏览器上运行的JavaScript版本
• 它提供了可选静态类型的优点。

四、TypeScript具体知识总结

TypeScript的基础语法

1.TypeScript的数据类型

1.number类型

let num: number = 111;

2.string类型

let str: string = "world";

3.布尔类型

let flag: boolean = true;

4.在ts中 null和undefined

var n = null;
var u = undefined;
在ts中 null和undefined他们是类型 也是值

5.数组类型

let arr3 = ["www",777, false];

6.any类型
它可以是任何类型但是它也会失去某些数据

let msg: any = "1234";

2.TypeScript的语法

函数：

function add(x: number, y: number): number {
  return x + y;
}

箭头函数：

let jiantou = () => `this is arrow function`;

TypeScript中的类：

class Person{
    name!:string;
    age:number;
 
    constructor(name:string, age:number) {
        this.name = name;
        this.age = age;
    }
    work(){
        console.log(this.name + " work")

}

接口 Interfaces：
接口（Interfaces）是一个很重要的概念，可以理解为一种规范或者约束，用来描述 对象(object) 的形状 或者对 类(class) 的行为 进行抽象。对类的行为抽象将在后面 类与接口 一章中介绍，下面主要介绍对对象的形状进行描述。

interface Person {
  name: string;
  age: number;
}
let tom: Person = {
  name: 'Tom',
  age: 25
};

匿名函数：

let mySum = function (x: number, y: number): number {
    return x + y;
};

类实现接口implements：
实现（implements）是面向对象中的一个重要概念。一个类只能继承自另一个类，不同类之间可能会有一些共有特性，提取多个类的共有特性，作为一个接口，再用 implements 关键字来实现就可以大大提高面向对象的灵活性。

interface Ieat {
   eat();
}

class Person implements Ieat{
  eat(){}
}

class Animal implements Ieat {
  eat(){}
}

模块：
实现（implements）是面向对象中的一个重要概念。一个类只能继承自另一个类，不同类之间可能会有一些共有特性，提取多个类的共有特性，作为一个接口，再用 implements 关键字来实现就可以大大提高面向对象的灵活性。

模块导出使用export关键字
export interface SomeInterface { 

}

模块导入使用import关键字
import shape = require("./demo"); 

---

总结

以上就是今天对JavaScript&TypeScript的学习总结，本文简单总结了JavaScript&TypeScript使用，我自己更多的是使用JavaScript和封装之后的jQuery，TypeScript用的不是很多，很多总结不到位，在今后的前端道路上我一定坚持努力学习，希望在实践中多尝试并加以总结，祝大家在前端的学习道路上收获满满！！！