目录
TypeScript 函数与 JavaScript 函数的区别
软件配置
VS Code
JavaScript
JavaScript 是脚本语言，是一种解释性脚本语言(代码不进行预编译)
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行
JavaScript基本语法
变量
语法:var 变量名称;
变量的命名规则
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头
- 变量名称对大小写敏感(y 和 Y 是不同的变量) 不能使用关键字保留字
JavaScript的数据类型
字符串String
字符串是存储字符的变量。字符串可以是引号中的任意文本。必须使用单引号或双引号;
布尔Boolean
只能有两个值:true 或 false
var a = true;
var b = false;
空Null
var c = null;
JavaScript中的运算符
| 运算符类型 | 符号 |
|---|---|
| 算数运算符 | ±* /%、++、 – |
| 赋值运算符 | :=、 +=、-=、*=、 /=、%= |
| 字符串的连接符 | + |
| 逻辑运算符 | && |
| 条件运算符 | ?: |
| 比较运算符 | == 、!=、> 、<、 >=、 <= |
JavaScript对象
JavaScript的String对象
String对象属性–长度属性
<script>
var str="我喜欢看NBA,最喜欢的球员是\'库里"; //注意:字符串中出现的\'是一个字符，转义为一个单引号
console.log(str); //获取字符串的长度:，切记:所有转移符号的长度都算一个，即\'长度为1
alert("字符串的长度="+str.length);//18
</script>
JavaScript的Array对象
Array 对象用于在变量中存储多个值，也就是数组
数组的长度 length属性
var nameArr=["a","b","c"];
var len=nameArr.length; //获取数组的长度，因为是属所以不是length()
alert(len);
JavaScript的Date对象
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)
getFullYear() 从 Date 对象以四位数字返回年份
getHours() 返回 Date 对象的小时 (0 ~ 23)
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)
getMonth() 从 Date 对象返回月份 (0 ~ 11)
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)
setDate() 设置 Date 对象中月的某一天 (1 ~ 31)
setFullYear() 设置 Date 对象中的年份(四位数字)
setHours() 设置 Date 对象中的小时 (0 ~ 23)
setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)
setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)
setMonth() 设置 Date 对象中月份 (0 ~ 11)
JavaScript的Math对象
Math常用属性
var pi=Math.PI;//返回圆周率
Math常用方法
var num=Math.random();// 返回 0 ~ 1 之间的随机数。
var max=Math.max(12,34,-90,9);//返回 n个数值中的最大值。
var min=Math.min(12,34,-90,9);//返回 n个数值中的最小值。
JavaScript的函数
JavaScript的自定义函数
自定义函数语法
使用function关键字定义函数
function 自定义函数名称(参数列表){
//函数体
}
注： 1、函数的形参直接写参数名称，不需要声明类型，即不需要写var.
2、函数的返回取决于函数体中是否有return关键字。
JavaScript变量的作用域
局部 JavaScript 变量
在 JavaScript 函数内部声明的变量(使用 var)是 变量，所以只能在函数内部访问。
在不同的函数中可以声明名称相同变量，因为局部变量出该函数就失效了。
全局 JavaScript 变量
在函数外声明的变量是 变量，网页上的所有脚本和函数都能访问它。
变量的生命周期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。
JavaScript自定义对象
对象也是一个变量，但对象可以包含多个值(多个变量)
定义对象
对象中可以有属性，也可以有方法
对象的属性
可以说 “JavaScript 对象是变量的容器”。
但是，我们通常认为 “JavaScript 对象是键值对的容器”。
键值对通常写法为 name : value (键与值以冒号分割)。
键值对在 JavaScript 对象通常称为 对象属性。
访问对象的属性
//访问对象的属性
//方式1:
var n = student.name;
//方式2:
var n2 = student["name"];
JavaScript与HTML
HTML 事件是发生在 HTML 元素上的事情。当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
HTML 事件可以是浏览器行为，也可以是用户行为。
例如页面加载完成、点击个按钮、文本框输入了文字等等，都是HTML事件的案例。
通过当事件发生时，可以做些事情，例如点击完毕按钮之后希望跳转页面、文本框输入完毕之 后验证有效性等，那么这些要做的事情就可以通过JavaScript实现。
常用的HTML事件
onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载
onfocus 元素获取焦点时触发
onblur 元素失去焦点时触发
<script>
function fun1(){
alert('选择的内容发生了变化');
}
function fun2(){
alert("触发了单击事件");
}
function fun3() {
document.getElementById("btn").innerHTML="鼠标移动到按钮上了";
}
function fun4() {
document.getElementById("btn").innerHTML="点击我试试";
}
function fun5() {
alert("键盘按下了");
}
function fun6() {
alert("获取到了焦点");
}
function fun7() {
alert("input失去了焦点");
}
function myLoad(){
alert("页面加载完毕");
}
</script>
<body onload="myLoad()">
<input id="userName" onkeydown="fun5()" onfocus="fun6()" onblur="fun7()"/>
<input id="password" type="password" />
<button id="btn" type="button" onclick="fun2()"
onmouseover="fun3()" onmouseout="fun4()">点击我试试</button>
<select id="month" onchange="fun1()">
<option>1月份</option>
<option>2月份</option>
</select>
</body>
JavaScript之DOM模型
DOM:Document Object Model,文档对象模型
通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素
当网页被加载时，浏览器会创建页面的文档对象模型
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML：
JavaScript 能够改变页面中的所有 HTML
元素 JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
document对象
当浏览器载入 HTML 文档, 它就会成为 Document 对象
Document 对象是 HTML 文档的根节点
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问
document对象常用方法
查找 HTML 元素常用方法
document.getElementById() 返回对拥有指定 id 的第一个对象的引用。
document.getElementsByClassName() 返回文档中所有指定类名的元素集合，作为 NodeList 对象
document.getElementsByTagName() 返回带有指定标签名的对象集合
document.getElementsByName() 返回带有指定名称的对象集合
修改 HTML 内容和属性
修改内容
修改 HTML 内容的最简单的方法是使用 innerHTML 属性
修改 HTML 元素的内容的语法:
document.getElementById(id).innerHTML= HTML。
修改 HTML 属性
修改 HTML 元素属性的语法:
方式1:
document.getElementById(id).attribute=新属性值;
方式2:
document.getElementById(id).setAttribute(属性名，属性值);
修改 HTML 元素的css
修改 HTML 元素属性的语法:
方式1:
document.getElementById(id).attribute=新属性值;
方式2:
document.getElementById(id).setAttribute(属性名，属性值);
JavaScript实操
网页表格实现全选
TypeScript
TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。
TypeScript 基础类型
Boolean 类型
let isDone: boolean = false;
Number 类型
let count: number = 10;
String 类型
let name: string = "Semliker";Array 类型(数组)
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3]; // Array<number>泛型语法
TypeScript 断言
有时候你会遇到这样的情况，比 TypeScript 更了解某个值的详细信息。通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。
。类型断言好比其他语言里的类型转换，但是不进行特殊的数据检查和解构。它没有运行时的影响，只是在编译阶段起作用。
类型断言有两种形式：
“尖括号” 语法
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;as 语法
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;TypeScript 函数
TypeScript 函数与 JavaScript 函数的区别
| TypeScript | JavaScript |
|---|---|
| 含有类型 | 无类型 |
| 箭头函数 | 箭头函数（ES2015） |
| 函数类型 | 无函数类型 |
| 必填和可选参数 | 所有参数都是可选的 |
| 默认参数 | 默认参数 |
| 剩余参数 | 剩余参数 |
| 函数重载 | 无函数重载 |
箭头函数(特点：简化函数定义、解决this问题)
常见语法
myBooks.forEach(() => console.log('reading'));
myBooks.forEach(title => console.log(title));
myBooks.forEach((title, idx, arr) =>
console.log(idx + '-' + title);
);
myBooks.forEach((title, idx, arr) => {
console.log(idx + '-' + title);
});
示例
// 未使用箭头函数
function Book() {
let self = this;
self.publishDate = 2016;
setInterval(function () {
console.log(self.publishDate);
}, 1000);
}
// 使用箭头函数
function Book() {
this.publishDate = 2016;
setInterval(() => {
console.log(this.publishDate);
}, 1000);
}
参数类型和返回类型
function createUserId(name: string, id: number): string {
return name + id;
}
函数类型
let IdGenerator: (chars: string, nums: number) => string;
function createUserId(name: string, id: number): string {
return name + id;
}
IdGenerator = createUserId;
可选参数及默认参数
// 可选参数
function createUserId(name: string, id: number, age?: number): string {
return name + id;
}
// 默认参数
function createUserId(
name: string = "Semlinker",
id: number,
age?: number
): string {
return name + id;
}
在声明函数时，可以通过 ? 号来定义可选参数，比如 age?: number 这种形式。在实际使用时，需要注意的是可选参数要放在普通参数的后面，不然会导致编译错误。
剩余参数
function push(array, ...items) {
items.forEach(function (item) {
array.push(item);
});
}
let a = [];
push(a, 1, 2, 3);
TypeScript 类
类的属性与方法
在面向对象语言中，类是一种面向对象计算机编程语言的构造，是创建对象的蓝图，描述了所创建的对象共同的属性和方法。
在 TypeScript 中，我们可以通过 Class 关键字来定义一个类：
class Greeter {
// 静态属性
static cname: string = "Greeter";
// 成员属性
greeting: string;
// 构造函数 - 执行初始化操作
constructor(message: string) {
this.greeting = message;
}
// 静态方法
static getClassName() {
return "Class name is Greeter";
}
// 成员方法
greet() {
return "Hello, " + this.greeting;
}
}
let greeter = new Greeter("world");
访问器
在 TypeScript 中，我们可以通过 getter 和 setter 方法来实现数据的封装和有效性校验，防止出现异常数据。
let passcode = "Hello TypeScript";
class Employee {
private _fullName: string;
get fullName(): string {
return this._fullName;
}
set fullName(newName: string) {
if (passcode && passcode == "Hello TypeScript") {
this._fullName = newName;
} else {
console.log("Error: Unauthorized update of employee!");
}
}
}
let employee = new Employee();
employee.fullName = "Semlinker";
if (employee.fullName) {
console.log(employee.fullName);
}
类的继承
可以通过extends关键字继承其它类，从而成为其子类
class Animal {
name: string;
constructor(theName: string) {
this.name = theName;
}
move(distanceInMeters: number = 0) {
console.log(`${this.name} moved ${distanceInMeters}m.`);
}
}
class Snake extends Animal {
constructor(name: string) {
super(name);
}
move(distanceInMeters = 5) {
console.log("Slithering...");
super.move(distanceInMeters);
}
}
let sam = new Snake("Sammy the Python");
sam.move();
TypeScript与HTML
TypeScript在HTML里的应用与Javascript大致相同，建议使用外部连接；即编写一个.ts文件，进行编译后.ts会生成对应的.js文件，再通过.html文件去调用.js文件。
结语
通过JavaScript和typescript能对HTML生成的web页面加上互动功能，增加页面的互动性，使页面活动起来，能实现更多功能。typescript对比JavaScript有了更多的规范、更加简洁，且更适用于大型项目的开发。初步学习，知之甚少，还需努力。
475
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
