TypeScript 是一种面向对象的编程语言,是 JavaScript 的超集,包含了 JavaScript 的所有元素
扩展了 JavaScript 语法(静态类型、类、模块、接口和类型注解),编译结果为 JavaScript 代码
文中红色部分,属于 TypeScript 语言独有,其余部分属于 JavaScript 和 TypeScript 二者共有
弹出信息警示框:alert("Hello JavaScript");
弹出输入提示框:prompt("请输入您的密码");
输出到页面中:document.writeln("Hello JavaScript");
输出到控制台:console.log("Hello JavaScript");
一、语言基础
JavaScript 在语言风格上,与 C、C++、Java、C# 等语言基本相同
1、代码规范
(1)注释:// 单行注释 、/* 多行注释 */
(2)语句以分号结束
(3)程序块以{}划出范围
(4)用关键字与名称来声明变量
(5)把 boolean 测试放在括号中
(6)字符串既可以使用双引号,也能使用单引号
2、运算符及优先级
(1)算数运算符:四则/求余/自增/自减...
(2)比较运算符
(3)逻辑运算符
(4)赋值运算符
(5)位运算
(6)运算优先级
3、流程控制语句
(1)条件语句
1、if 条件语句
a、单向条件语句
b、双向判断语句 or 三目表达式
c、多向判断语句
2、switch 条件语句
(2)循环语句
1、while 循环
2、do...while 循环
3、for 循环
(3)跳转语句
1、break 语句
2、continue 语句
(4)Throw 和 Try 语句
1、throw 语句:抛出异常或错误:throw new Error('this error')
2、try 语句:捕获和处理异常或错误:try{ // 可能会异常的语句 } catch (e){ // 异常处理 }
4、变量与数据类型 (正片开始)
(1)声明:
1、变量声明:以关键字 let 开头的声明引入变量,该变量在执行期间可以具有不同的值。
2、常量声明:以关键字 const 开头的声明引入只读常量,该常量只能被赋值一次。
(2)基本数据类型
数值型:
1、number 数字型
2、boolean 布尔型
非数值型:
1、string 字符串:双引号中,只能含单引号
2、undefined 未定义
3、null 空
4、JS Array 数组
5、TS array 数组
6、TS tuple 元组 // JS 数组支持任意类型,但 TS 并不支持,于是引入了元组
7、TS enum 枚举
示例:let a = 100,b = "程序员",c = true;
d = [100,"程序员",true]; // JS 数组
d = [100,150,200]; // TS 数组
let a: number = 100, b: string = "程序员", c: boolean = true; // TS 类型注解
let d: (number | string | boolean)[] = ["程序员",true,100]; // TS 联合类型
let d: (number , string , boolean)[] = [100,"程序员",true]; // TS 元组
enum Color{ Red, Pink, Black } let bc: Color = Color.Pink; // TS 枚举
5、函数
(1)定义函数:函数是一段被命名的、用于完成特定任务的代码块。
function func_Name( parameters_list ){ body }
function func_Name( parameters_list:type_list ):return_type{ body }
1、返回值类型:因为 TS 支持类型推断,故可以省略标注返回类型
2、参数可选,且该参数为形参 (局部变量)
注:多返回值时,可以用数组来返回多个值,再用数组的解构接收数值
(2)调用函数:参数严格对应(位置参数)
1、默认参数:function add( price, rate = 0.50){ body }
function add( price:number, rate:number = 0.50):return_type{ body }
2、可选参数:function add( price:number, rate ? : number ):return_type{ body }
3、剩余参数:function sum( firstName, ...restOfName){ body }
注:最后一个参数将成为一个由剩余的参数组成的数组,索引从 0 到 restOfName.length -1
(3)匿名函数:没有名称的函数: let multiply = function(a, b){ return a * b; };
主要用于 函数表达式、回调函数、立即执行函数、数组方法、对象方法 ...
(4)TS 箭头函数:const add = (a: number, b: number): number => a + b;
(5)TS 函数重载:多个具有相同名称,但参数类型或参数数量不同的函数
6、类与对象
JavaScript 和 TypeScript 是面向对象的编程语言,支持面向对象的所有特性,比如 类、接口等。
(1)类与对象
1、类:对象的模板,拥有所有对象的共同特征和属性(抽象)
2、对象:具体的个体,拥有一组属性和方法的集合(具体)
3、属性:描述对象特性的数据,即若干变量。
4、方法:操作对象的若干动作,即若干函数。
static 修饰的 变量/方法,只此一份,被所有对象共享,可以直接通过类名调用。
(2)定义类:class class_name{ 成员变量 (属性) + 构造方法 + 成员方法 }
this 代表当前对象。this.x = x , 表示把方法参数的值 (局部变量) 赋给当前对象的成员变量
class Car {
engine:string; // 成员变量(属性)
constructor(engine:string):string{ // 构造方法
this.engine = engine
· }
disp():void { console.log("发动机为 : "+this.engine) }} // 成员方法
(3)使用类: 先 new 一个对象:var object_name = new class_name();
再通过“.”操作符,使用这个对象的属性和方法
(4)继承类:class child_class extends parent_class{...} // 单继承
1、子类可以直接使用父类的非私有属性和方法(使用 super 关键字)
2、子类可以重写父类的方法,以实现更具体或不同的行为。
(5)封装类:setter 和 getter 可用于提供对对象属性的受控访问(被 private 修饰)
private _age: number = 0
get age(): number{ return this._age; }
set age(x: number){
if (x < 0){ throw Error('Invalid age argument'); }
this._age = x;
}
7、Math 类
JavaScript 只有一种数字类型,因此不存在类型转换,只能介绍一下数字的运算了。
Math 类 :包含了执行基本数学运算的属性和方法,可以通过 Math 在主函数中直接调用。
含数学函数、三角函数、随机函数、数学常量,参考 Java Math 类
8、字符串类
字符串是一个不可变的字符序列。如果对字符串进行操作,实际上会创建一个新的字符串对象。
(1)定义字符串:var b = "程序员"; let b: string = "程序员";
(2)使用字符串:
1、拼接:字符串 + 数字 = 字符串(先转换为串,再做拼接。都是字符串,才能拼接)
2、格式化:
a、帮忙占位:在串中,使用 ${变量} 帮变量占位
示例:let name = "John"; let person = "Hello, my name is ${name} ";
b、表达式格式化:把上述变量替换为表达式即可
3、类的常用方法:参考 JavaScript 字符串类
9、JS 数组类
JavaScript 的数组数据元素可以是任意类型,不同于常规数字。但 TypeScript 的数组元素,通常只能是同种类型。为了存储任意类型,TypeScript 引入了元组的概念(后文会详细介绍)
数组名表示数组首个元素的地址,即 &arry[0] ;而 arry[0] 表示第一个元素,而非地址。
(1)定义数组
1、常规式 :var myCars = new Array(); myCars[0] = "Saab"; ...
var myCars: string[] = new Array(); // TS 数组
2、直接写 :var myCars = ["Saab" , 520 , true];
(2)使用数组:
1、解构:把数组元素赋值给变量
let arr = [10, 20, 30]; let [a, b, c] = arr;
var arr:number[] = [10, 20, 30]; var [x, y, z ] = arr;
2、多维数组 (二维为例):数组的数组:type[typeLength1][typeLength2]
3、类的常用方法:参考 JavaScript Array(数组)对象
10、TS 元组类
TypeScript 元组就相当于 JavaScript 数组,并且,我们可以对元组的元素进行操作。
(1)定义元组:let myCars = ["Saab" , 520 , true];
(2)使用元组:
1、解构:把元组元素赋值给变量:var a = [10, "Runoob"]; var [b, c] = a;
2、添加:push() 方法:向元组添加元素,添加在最后面
3、删除:pop() 方法:从元组中移除最后一个元素,并返回移除的元素
11、TS 枚举类
在 TypeScript 中,枚举是一个特殊的类,一般表示一组常量,使用 enum 关键字来定义。
其成员有一个默认数值,从 0
开始递增,我们能手动为枚举成员指定具体的数值 or 字符串。
(1)定义枚举:enum Color { Red, Green, Blue }
let myColor = Color.Red; console.log(myColor); // 输出 0
(2)赋数字:enum Direction { Up = 1, Down, Left = -1, Right }
let myDirection = Direction.Right; console.log(myDirection); // 输出 0 !!!
(3)赋字符串:enum Status { Success = 'SUCCESS', Failure = 'FAILURE' }
let myStatus = Status.Success; console.log(myStatus); // 输出 'SUC..'
二、ArkTS 语言
ArkTS 是 HarmonyOS 的主力应用开发语言。其围绕应用开发在 TS 基础上做了进一步扩展,保持了 TS 的基本风格,同时通过规范定义强化开发期静态检查和分析,提升程序执行稳定性和性能。
1、关于类与对象:
(1)必须显式初始化类的属性(必须被精确标注)
(2)禁止向对象中添加、删除新的属性或方法,禁止将 any 类型的值赋值给对象属性。
三、语言进阶
注:下述的 BOM 对象、DOM 对象、事件处理 均是 JS 的内容,即写在<script>标签中的。
1、BOM 对象 - window 对象
BOM(Browser Object Model)浏览器对象模型,提供了一些对象及其方法,用于与浏览器窗口进行交互。BOM 对象的核心是 window 对象,位于 BOM 对象的最顶层(老大哥般的存在)
一个窗口就是一个 window 对象,通过使用 Window 对象的属性和方法来操作这个窗口。
注:对于 window 对象来说,无论是它的属性,还是方法,都可以省略 window 前缀。
(1)常用属性:建议去网上做个全面了解
width:宽度
height:高度
(2)常用方法
alert():提示对话框
confirm():判断对话框
prompt():输入对话框
open() 和 close():打开/关闭窗口
setTimeout() 和 clearTimeout():开启/关闭“一次性”定时器
setInterval() 和 clearInterval():开启/关闭“重复性”定时器
(2)location
子对象:包含有关当前 URL 的信息,并且可以用于加载新的页面。
(3)navigator
子对象:提供有关浏览器的信息,例如浏览器的名称、版本等。
(4)screen
子对象:包含有关客户端屏幕的信息,如屏幕的宽度和高度。
2、DOM 对象 - document 子对象
虽然 document 对象是 window 对象的子对象,但一般会看成独立的,即 DOM 文档对象模型。
一个窗口就是一个 window 对象,这个窗口里面的 HTML 文档,就是一个 document 对象,document 对象是 window 对象的子对象,document 对象操作的是 HTML 页面中所有的元素。
(1)DOM 操作前
第一步:等待页面完全解析:window.onload = function(){ ... }
第二步:先找到目标元素(先访问),再赋给变量(方便操作)
(2)访问指定的元素对象
1、document.getElementById("id名")
2、document.getElementsByTagName("元素名")
3、document.getElementsByClassName("类名")
4、document.getElementsByName("name名")
5、document.document.title 和 document.body
6、document.querySelector("选择器") 和 querySelectorAll("选择器"),返回一个类数组
注:类数组,即可以使用数组的 length 属性、数组下标
(2)新建 DOM 对象,并插入文档中
1、新建元素对象:var elem = document.createElement("元素名");
2、新建文本对象:var txt = document.createTextNode("文本内容");
3、插到某元素末尾:某元素对象.appendChild(新对象)
4、插到某元素之前:某元素对象.insertBefore( 新对象, 某子元素)
(3)删除元素对象:某元素对象.removeChild(某子元素)
(4)复制元素对象:被复制元素.cloneNode(bool)
(5)替换元素对象:某元素对象.replaceChild(新对象, 旧子元素);
3、事件处理
事件一般是用户对页面的一些“小动作”引起的,例如按下鼠标、移动鼠标等,这些都会触发相应的一个事件。不懂事件操作,JavaScript等于白学。
(1)事件操作前
第一步:等待页面完全解析:window.onload = function(){ ... }
第二步:先找到目标元素(先访问),再赋给变量(方便操作)
第三步:事件调用(如下)
(1)事件调用:obj.事件名 = function() { …… };
obj 是一个DOM对象,即使用 getElementById() 等方法,获取到的元素节点(容器标签)
(2)常见事件
1、鼠标事件
onclick:单击:任何元素都能添加鼠标单击事件
onmouseover 和 onmouseout:移入/移出
onmousedown 和 onmouseup:按下/松开
onmousemove:移动
2、键盘事件
onkeydown 和 onkeyup:按下/松开(一瞬间所触发的事情)
3、表单事件
onfocus 和 onblur:获取/失去焦点:仅限于表单元素和超链接
onselect:选中文本框中的内容时,都会弹出对应的对话框
onchange:选择
4、编辑事件
语法格式:document.body.编辑事件名 = function () { return false; }
oncopy:防止页面内容被复制:
onselectstart:防止页面内容被选取
oncontextmenu:禁止鼠标右键
5、页面事件
onload:文档加载成后,再执行的一个事件
onbeforeunload:离开页面前,触发的一个事件