CQJTU JavaScript&TypeScript学习总结

JavaScript&TypeScript学习总结

JavaScript

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

它是一门跨平台，面向对象的语言。能够控制网页行为，使网页可交互，与JAVA完全不同，但基础语法类似。他无需编译。

引入方式

1.内部脚本：JS代码定义在HTML网页中。
2.外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中。

内部脚本：在HTML中，JavaScript必须在< script >与< /script >之间

<script>
	alert("hello js")
</script>

注：1.在HTML中，JavaScript必须在< script >与< /script >之间
2.一般脚本置于< body >元素的底部，可改善显示速度，因为脚本执行会拖慢显示。

外部脚本：
外部文件： demo.js
引入外部JS文件， < script src = " …/js/demo.js " > < /script >
注：1.外部脚本不包含 < script >标签
2.< script >标签不能自闭合

书写语法&书写语句

1.区分大小写，与JAVA一样，变量名函数名以及其他都是区分大小写的。
2.每行结尾的分号可有可无。
3.注释：单行注释：//注释内容
多行注释：/* 注释内容 */
4.大括号代表代码块儿

if (count==3){
	alert(count);
}

输出语句：
用window.alert()写入警告框
用document.write()写入HTML输出
用console.log()写入控制台

变量：用var关键字声明变量
例：

var test=20;
	test="张三";
}

JS是一门弱语言，变量可存放不同类型的值
变量名遵循规则：
1.组成字符可以是任何字幕，数字，下划线或$符号
2.数字不能开头
3.建议使用驼峰写法
ECMAScript6新增了let关键字定义变量。类似于var，但是其声明的变量只在let关键字所在的代码块内有效，不允许重复声明。

ECMAScript新增了const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。

JS错误在控制台中出错(F12)

JS：原始类型和引用类型

5种原始类型：
number：数字（整数，小数，NAN）
String：字符，字符串，单双引皆可
boolean：布尔值。（true or false）
undefined：当声明的变量未初始化时，该变量的默认值是undefined
null：对象为空
使用typeof运算符可以获取类型：
alert（type of age);

运算符

JS运算符（特殊）
关系运算符：===全等于
三元运算符：条件表达式? true-value : false-value

区别：“ == ” 和 " === "
" == ":判断类型是否一样，如果不一样，则进行类型转换，在去比较他们的值
" === ":判断是否一样，不一样直接false，一样再比较值的大小。

JavaScript对象

W3School可以查看所有的对象。

一.基础执行对象
1.Array：数组对象
用于定义数组
定义:

var 变量名 = new Array(元素列表);//方式一
var 变量名=[元素列表];//方式二
var arr = new Array(1,2,3);
var arr = [1,2,3];
}

访问：

arr[索引]=值;
arr[0] = 1;
}

注：JavaScript数组类似于Java集合，长度，类型都可以改变。
没赋值的默认为Undefined

Array对象属性：
length 设置或返回数组中元素数目
方法：1.push：添加方法 arrs.push(10)
2.splice:删除元素 arrs.splice(start(从哪里开始): number , deletecount:number（删除几个元素）)

2.String
定义：

var 变量名 = new String(s);//方式一
var str = new String("hello");
var 变量名= s;//方式二
var str = "hello";
}

属性：length 字符串长度
方法：charAt()：返回在指定位置的字符
indexof()：检索字符串
alert(str.length);
trim():去除字符串前后两端的空白字符

3.自定义对象

var 对象名称 = {
		属性名称1:属性值1;
		属性名称2:属性值2;
		....
		函数名称function(形参列表){}
};

BOM和DOM

BOM:浏览器对象模型
JS将浏览器各个部分分装成对象
组成
.window：浏览器窗口对象
.navigator：浏览器对象
.screen：屏幕对象
.history：历史记录对象
.location：地址栏对象

属性：获取其他BOM对象
history
navigator
screen
location

DOM:文档对象模型
将标记语言各个组成部分封装成对象，JS通过DOM对HTML进行操作
.Document：文档对象
.Element：元素对象
.Attribute：属性对象
.Text：文本对象
.Comment：注释对象

JS通过DOM对HTML进行操作：
1.改变HTML元素内容
2.改变HTML元素的样式（CSS）
3.对HTML.Dom事件作反应
4.添加或删除HTML元素

事件监听

概念:HTML事件是发生在HTML元素上的“事情”
比如：按钮被点击
鼠标移动到某元素之上
按下键盘按键等

事件监听：JavaScript可以在事件被侦测到时执行代码

事件绑定：方式一：通过HTML标签中的事件属性绑定。

< input type = "button" onclick='onc'>
	function onc{
						alert("我被点击了");
						}

方式二：通过DOM元素属性绑定

< input type = "button" id='btn'>
document.getElementById("btn").onclick=function(){
				alert("我被点了");
				}

常见事件：该部分可以通过W3School查看到所有，具体路径为W3School->JSjiaocheng ->参考书->Dom Event
举例：
Onblur:失去焦点
Onfocus:获得焦点
Onchange:文本改变
Onclikc:点击
onmouseover:鼠标在元素之上
Onmouseout:鼠标移开

正则表达式

是定义字符串的组成规则
定义：1.定义直接量：注意不加引号

var reg = /^\w{6,12}$ddd/;

2.创建RegExp对象

var reg = new RegExp( "/^\w{6,12}$ddd/");

方法： test(str)：判断指定字符串是否符合规则。
返回true或者false

语法：
1.^表示开始
2.$表示结束
3.[]代表某个范围内的单个字符。
4.\w代表单词字符
5.\d代表数字字符
量词：
6.+至少一个
7.*零个或多个
8.?零个或一个
9.{x}x个
10.{m,}至少m个
11.{m,n}至少m个，至多n个

因为JavaScript是我们前后端编程的基础，所以其实JavaScript非常重要，基于我上学期对于JS的理解，我前面浅浅的就以为他只是一个用来描写后端操作的函数，可以写很多的function用来实现各种各样的功能，在我上学期课设的时候，也只是用JS来写点击操作啊这类简单的部分，经过本学期的这门课程以后，发现我之前肤浅了。现在的JS再也不是简单的脚本语言了，无论是针对前端或者后端，JS都有不俗的表现，我在课后有去Codepen这个网站上去看有关JS的代码，发现其实还有很多我没有看懂的部分，而这些部分恰巧实现了很多强大的功能，这说明学习之路还长，仅仅简单的学习是绝对不够去支撑我写出一个很棒的网页的。

跟到这门课程走，学习到了不少有关于JS的知识，比如他的基本语法，操作符，语句，函数，对象，数组，链式语法，闭包等。了解了各自的用途和相关的用法。

让我印象深刻的其实还是函数和闭包的讲解啊，因为函数不介意传来多少参数，也不在乎传来的参数是什么类型，就是说你可能函数需要传两个参数，但是你传了不止两个参数他可能也不会报错，解析器也不会有什么怨言，这就是上学期的课设为什么不报错却没有正确显示结果，这点真的很坑啊。

闭包部分就是指在函数里面调用函数就会产生闭包，如下：

// An highlighted block

function greeting(name) {
    var text = 'Hello ' + name; // local variable
    // 每次调用时，产生闭包，并返回内部函数对象给调用者
    return function() { console.log(text); }//注意该函数无名称，称为匿名函数
}
var sayHello = greeting('Closure');//调用greeting()返回了什么？
sayHello();  // 注意此处的使用方法。通过闭包访问到了局部变量text

总而言之，JS的学习也是很重要的一环，也需要去不断的学习。

TypeScript

TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。

TS你可以理解成是JS的超集，TS是JS plus，当然他可以编译成纯的JavaScript，TypeScript给JavaScript加上可选的类型系统，给JavaScript加上静态类型后，就能将调试从运行期提前到编码期，诸如类型检查、越界检查这样的功能才能真正发挥作用。 TypeScript的开发体验远远超过以往纯JavaScript的开发体验，无需运行程序即可修复潜在bug。

以下是跟着老师走然后总结的知识点：

let和const

不使用var，使用let或const申明变量，并加上类型说明，且作用域为块级即以{}为界

// An highlighted block

let lang: string = 'TypeScript';//如果省略类型说明，TS也可进行自动推断
lang = 1010;//error! 如果需要可以使用联合类型：let lang: number | string = 'TS';
let age: number = 89;
let age = 64;//error!

const pi: number = 3.14159;//pi以后不可改变，类似常量
pi = 3.14;//error!

解构

将对象、数组中的元素拆分到指定变量中，以方便使用

// An highlighted block


//解构数组
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);

函数

使用完整函数类型定义

//命名函数，有完整的参数和返回类型。可以不用，TS将自动进行类型推断但推荐使用！
function add(x: number, y: number): number {
  return x + y;
}
//匿名函数
let myAdd = function(x: number, y: number): number { return x + y; };
console.log(myAdd(1, '2'));//error
console.log(myAdd(1));//error
console.log(typeof myAdd(1, 2));//number 

可选参数

//可选参数，必须放在必要参数后
function greeting(firstName: string, lastName?: string) {
  if(lastName) {
      return `Hello ${firstName} ${lastName}!`;
  }
  return `Hello ${firstName}!`;
}
console.log(greeting('QiGe'));
console.log(greeting('QiGe', 'Wang'));
console.log(greeting('QiGe', 'Wang', 'Yong'));//error!

默认参数

//默认参数，不必在必要参数后
function greeting(firstName: string, lastName = 'Wang') {
  return `Hello ${firstName} ${lastName}!`;
}
console.log(greeting('QiGe'));
console.log(greeting('QiGe', 'HaHaHa'));
console.log(greeting('QiGe', 'HaHaHa', 'Yong'));//error!      

类和class

类是属性（有些什么）和函数（能干什么）的集合，是生成对象（Object）或类实例的模板。（请注意，我们要用的Angular框架大量使用类）
类的定义和使用

//类的定义和使用
class MyInfo { //class是关键字，类名默认全部大写首字母
  name: string; //属性
  weather: string; //属性
  
  constructor(name: string, weather: string){ //构造函数，一般用于初始化。如果没有，TS会自动生成一个，以备用new创建类实例时调用。
    this.name = name;
    this.weather = weather;
  }
  printInfo(): void { //其它函数，无返回值
    console.log(`Hello, ${this.name}.`);
    console.log(`Today is ${this.weather}.`);
  }
}

let myData = new MyInfo('QiGe', 'raining'); //使用new关键字生成对象，即该类的实例
myData.printInfo();             

存取器-getter、setter

当在类外部时，建议设置getter和setter操作其private属性，即使public属性也如此。

//getter和setter
class MyInfo { //class是关键字，类名默认全部大写首字母
  private readonly _name: string; //私有属性，外部不可访问。readonly使其只能在初始化时赋值，以后不可更改。    
  private _weather: string; //私有属性，习惯以_开头进行命名

  constructor(name: string, weather: string){ //构造函数，一般用于初始化
    this._name = name;
    this._weather = weather;
  }
  get name(): string {
    return this._name;
  }
  set name(value: string) {  //error！ _name有readonly属性
    this._name = value;
  }
  get weather(): string {
    return this._weather;
  }
  set weather(value: string) {
    this._weather = value;
  } 
}
  
let myData = new MyInfo('QiGe', 'raining'); //使用new关键字生成对象
console.log(myData.name, myData.weather);
myData.weather = 'sunny'; //OK
myData.name = 'Wang'; //error!
console.log(myData);              

静态属性

类中的属性或函数有static修饰，则可直接使用而不需要实例化

//静态属性，内建或自定义，无需new即可使用
console.log(Math.round(89.64)); //90
console.log(Math.pow(2, 8)); //256
class MyStaticClass {
  static place = 'Earth';
  static printInfo() {
    console.log('We have only one Earth!');
  }
}
console.log(MyStaticClass.place);
MyStaticClass.printInfo();          

对我来说啊，上课的时候跟着老师配置了相关TS的东西，也学习了相关知识，但我还是没有去写过Ts的文档，最后的期末时间也比较紧张，所以老实说对于Ts没有怎么了解，只是浅浅的有一个初步的认识，没有进行过实战，或许在今后的项目中可以用到Ts，真正领会到Ts的优势，以及它所能给我们编写网页部分所带来的便利。

总结

写到这里Web这门选修课也就上完了所有的内容，总体来说课程很好，老师也很好，我学到了很多东西关于前端框架的，认识了和我之前所学的主流框架VUE不同的Angular，同时也通过老师了解到了很多学习资源，作为一个程序员了解这些包括资源网站也好都是很重要的。

除此以外，老师还教会了我们不少道理，比如一定要有自己的思考方式，不能被别人牵着鼻子走，要有自己独特的见解，以自己的角度去看待事情。这对于今后的整个人生来说都比较重要。所以还是要谢谢老师，真的是启发了我，以后会从多角度去看待这个问题，我是一个很容易随大流去走的人，很多时候没有主见没有想法，所以这门课其实也给我带来了这方面的一些启发吧。