目录
一.JavaScript介绍
（一）什么是JavaScript?
1.web标准也称为网页标准，由一系列的标准组成，大部分由W3C（World Wide Web Consortium,万维网联盟）负责制定
2.三个部分组成：
（1）HTML：负责网页的基本结构（页面元素和内容）
（2）CSS：负责页面的表现效果（页面元素的外观，位置等页面样式，如：颜色，大小等）
（3）JavaScript：负责页面的行为（交互效果）
（二）JS的引入
1.内部脚本：将JS代码定义在HTML页面中
（1）JavaScript代码必须位于<script></script>标签之间
（2）在HTML文档中，可以在任意地方，放置任意数量的<script>
（3）一般会把脚本至于<body>元素的底部，可改善显示速度
（4）例：
（5）如上，可以出现在任意位置，且多次
2.外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中
（1）外部JS文件中，只包含JS代码，不包含<script>标签
（2）<script>标签不能自闭合
（3）例
（三） 书写语法
1. 区分大小写：与java一样，变量名，函数名以及其他一切东西都是区分大小写的
2. 每行结尾的分号可有可无
3. 注释：
（1）单行注释：//注释内容
（2）多行注释：/*注释内容*/
4. 大括号表示代码块
//判断
if(count==3){
alert(count);
}
5. 使用window.alert()写入警告框
6. 使用document.write()写入HTML输出
7. 使用console.log()写入浏览器控制台
<script>
window.alert("Hello JavaScript");//浏览器弹出警告框
document.write("Hello JavaScript");//写入HTML，在浏览器展示
console.log("Hello JavaScript");//写入浏览器控制台
</script>
（四）变量
1. JavaScript中用var关键字（variable的缩写）来声明变量。
2. JavaScript是一门弱类型语言，变量可以存放不同类型的值
3. 变量名需要遵循如下规则：
（1）组成字符可以是任何字母，数字，下划线（_）或美元符号（$）
（2）数字不能开头
（3）建议使用驼峰命名
4. 特点
5. 注意事项
（1）ECMAScript6新增了let关键字来定义变量。它的用法类似于var，但是所声明的变量，只在let关键字所在的代码块内有效，且不允许重复声明。
（2）ECMAScript6新增了const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。
（3）let：局部变量；不能重复定义
（4）const：常量，不能给改变的
（五）数据类型
（1）JavaScript中分为：原始类型和引用类型
（2）原始类型种类:
(a)number：数字（整数，小数，NAN(Not a Number)）
(b)string：字符串，单双引皆可
(c)boolean：布尔。ture，false
(d)null：对象为空
(e)undefined：当声明的变量未初始化时，该变量的默认值是undefined
（3）使用typeof运算符可以获取数据类型
var a=20;
a="张三";
alert(typeof a);
输出结果为string
（六）运算符
（1）算术运算符：+，-，*，/，%，++，--
（2）赋值运算符：=，+=，-=，*=，/=，%=
（3）比较运算符：>，<，>=，<=，！=，==，===
注：==会进行类型转换，===不会进行类型转换
var a=10;
alert(a=="10");//true
allert(a==="10");//false
alert(a===10);//true
（4）逻辑运算符：&&，||，！
（5）三元运算符：条件表达式？true_value:false_value
（七）类型转换
（1）字符串类型转为数字：将字符串字面值转为数字。如果字面值不是数字，则转为NaN
(2) 其他类型转换为boolean：
（a）Number：0和NaN为fasle，其他均转为true。
（b）String：空字符串为false，其他均转为true。
（c）Null和undefined：均转为false。
//类型转换——其他类型转为数字
alert(parseInt("12"));//12
alert(parseInt("12A45"));//12
alert(parseInt("A45"));//NaN(Not a number)
（八）函数
（1）介绍：函数（方法）是被设计为执行特定任务的代码块
（2）定义：JavaScript函数通过function关键字进行定义，语法为：
function functionName(参数1，参数2...){
//要执行的代码
}
（3）注意：
（a）形式参数不需要类型。因为JavaScript是弱语言类型
(b) 返回值也不需要定义类型，可以在函数内部直接使用returm返回即可
（4）调用：函数名称（实际参数列表）
（九）对象
（1）数组对象：Array
（a）JavaScript中Array对象用于定义数组
（b）定义
var 变量名=new Array(元素列表)；//方式一
var 变量名=【元素列表】//方式二
（c）访问
arr[索引]=值；
（2）属性
| 属性 | 描述 |
| length | 设置或返回数组中元素的数量 |
（3）方法
| 方法 | 描述 |
| forEach() | 遍历数组中的每个有值的元素，并调用一次传入的函数 |
| push() | 将新元素添加到数组的末尾，并返回新的长度 |
| splice() | 从数组中删除元素 |
（十）JS事件监听
（1）事件绑定
（a）方式一：通过HTML标签中的事件属性 进行绑定
<input type="button" οnclick="on()" value="按钮1">
<script>
function on(){
alert('我被点击了！');}
</script>
（b）通过DOM元素属性绑定
<input type="button" οnclick="on()" value="按纽2">
<script>
document.getElemenById('btn').οnclick=function(){
alert('我被点击了！');}
</script>
（2）常见事件
| 事件名 | 说明 |
| onclick | 鼠标单击事件 |
| onblur | 元素失去焦点 |
| onfocus | 元素获得焦点 |
| onload | 某个页面或图像被完成加载 |
| onsubmit | 当表单提交时触发该事件 |
| onkeydown | 某个键盘的键被按下 |
| onmouseover | 鼠标被移到某元素之上 |
| onmouseout | 鼠标从某元素移开 |
二.TypeScript 介绍
（一）什么是TypeScript ？
TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。
（二）TypeScript和JS的对比
-
ts完全兼容javascript，它可以编译成javascript
-
使用TS会有强大的代码类型提示
-
提升了代码的可维护性，使得重构代码更容易
-
支持最新的 ECMAScript 语法
（三）TS基础语法
1. 原始类型：同JS相似
特点：简单，这些类型，完全按照JS中类型的名称来书写
2. 联合类型
定义一个变量 可以是null类型 也可以是number类型
格式
let 变量：类型1|类型2|类型3...=初始值
3. 数组类型
let变量：类型[]=[值1，...]
let变量：Array<类型>=[值1，...]
4. 函数的类型
function 函数名（形参1：类型=默认值，形参2：类型=默认值）：返回值类型{}
5. 对象类型
const对象名：{
属性名1：类型1，属性名2：类型2，
方法名（形参1：类型1，形参2：类型2）：返回值类型，
（三）函数
//函数定义
function greet():string{//返回一个字符串
return "Hello Word"
}
function caller(){
var vaule=greet()//调用greet函数
console.log(msg)
}(四)元组
数组中元素的数据类型都一般是相同的（any[] 类型的数组可以不同），如果存储的元素数据类型不同，则需要使用元组。
元组中允许存储不同类型的元素，元组可以作为参数传递给函数。
创建元组的语法格式如下：
var tuple_name=[vaule1,vaule2,vaule3,...vaule n]
324
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
