web应用基础 JavaScript & TypeScript 学习总结

一、javascript

1.引入方式

1.内嵌

<div id="box" onclick="alert('这是行间JS')"></div>

直接写在元素内部

2.行内

<script>
	console.log("hello");
</script>

js代码写在html文件内，一般写在body的最下方，因为网页是从上到下编译的，但也可以在body外，但要加上window.onload = function() {}，在function内部写代码，此时js代码会提前编译。

3.行外

js代码为单独的文件，引入位置同行内写法。

2.输出方式

1.alert

alert(“text”)会在浏览器弹出text内容。

2.console.log

console.log(“text”)会在控制台内输出相应text内容，按f12找到控制台即可。

3.prompt

prompt(“text”)和alert类似，只不过会带有一个输入框，并且输入输入框的内容可以用变量接收。

3.变量和函数

1.变量声明

声明变量用关键字var，注意js中的变量是松散类型，即变量不像c、java中的变量有类型，在这时可以令变量为数字，下一步操作还可以令它为字符串

2.变量类型

变量有五个类型，字符串型、数值型、布尔型、undefined和null，其中undefined就是不知道是什么类型，例如只声明一个变量，不进行赋值，此时输出该变量就是undefined类型，要想判断变量是什么类型，可以使用typeof。

3.变量类型转换

常用的有：数值型转字符串num.toString() String(num)，字符串类型转整形和浮点型 parseInt() parseFloat()。

4.函数

声明函数用关键字function

var sayHello = function(name) {
	console.log("hello " + name);
}

4.条件语句

1.if else

一种是

if() {
}

else {
}

还有一种是

if() {
}
else if () {
}
else {
} 

2.switch

switch(语句) {
	case 表达式: 语句
	case 表达式: 语句
	default: 语句
}

5.循环语句

1.while

while(条件表达式) {
	语句
}

2.for

var colors = ['red', 'green', 'blue', 'brown'];	//colors是一个数组
//传统遍历
for(初始语句;条件表达式;循环后执行操作){
	语句
}
//for-in
for(var 变量 in 迭代对象){
	语句 //变量为下标
}
//for-of
for(var c of colors){
	语句 //变量为具体元素
}
//高级遍历
colors.forEach(c => console.log(c));
var other = colors.map(c => c + 'X');//map不仅遍历，还返回另一个数组
console.log(other);

6.数组和对象

1.数组

数组的字面量是[]一对方括号，数组内部可以装任意类型的数据，通过属性length可以获得数组的长度，通过函数push可以增加数组元素，pop删除元素，可以通过函数slice可以获得数组切片，arr.slice(0,2)会返回数组从0开始到1的数组切片，即从start到end-1，还可以split()函数可以将字符串通过指定字符串分割获得数组，而join则相反。

2.对象

对象的字面量是{}一堆花括号，里面可以装值也可以装函数，例如

var obj = {
	name = "wlx";
	age = 18;
	SayHello = function() {
		console.log("hello");
	}
}

但这种方式一次只能创建一个对象，利用工厂模式可以使用类似构造函数调用函数构造对象

function CreateObj(name,age) {
	this.name=name;
	this-age=age;
}
var t = CreateObj("wlx",20);

二、typescript

1.ts简介

TypeScript是JavaScript类型的超集，它可以编译成纯JavaScript。js代码是可以直接在ts文件中运行的，反过来则不行。TypeScript 由微软开发的自由和开源的编程语言。TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。想要运行ts文件需要先安装nodejs。

2.变量声明

ts是使用关键字let和const来声明变量的，变量声明时若赋值了，则可以自行选择是否加变量类型声明，若没赋值则必须加，且const声明的变量不仅类型不能变，值也无法改变。

let str: string = 'test';//若不加变量str也是string类型
const num: number = 123;//num不可改变，若强行改变则会报错

3.函数

ts中的函数中若有参数则需要增加类型声明，且个数不能少于参数个数，在参数和类型声明中间加一个问号，则该参数变为可选参数，即使对应少它一个也可以，若直接给参赋值，则若该参数没有值传进来，则它为默认赋的值，该参数为默认参数，还可使用…变量数组接收剩下左右变量。

function test(t1: string, t2 = 'wlx', t3:?string, ...restS: string[]):string {
  return `Hello ${t2}!`; //模板字符串
}

4.类class

ts中的类和java等有面对对象的语言中class类似，同样存在属性方法的访问权限，public,private,protected，也存在构造函数，并且有专门的set和get函数，同时也还有继承等思想。