重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
var a = document.getElementById("slideContainer"), f = document.getElementById("slidesImgs").getElementsByTagName("li"), h = document.getElementById("slideBar"), n = h.getElementsByTagName("li"), d = f.length, c = c || 3000, e = lastI = 0, j, m;
专注于为中小企业提供成都网站制作、成都做网站、外贸营销网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业汇川免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上1000+企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
//各个对象,变量
function b() {
m = setInterval(function () {e = e + 1 = d ? e + 1 - d : e + 1;g()}, c)//定时器从第一张每隔C毫秒执行一次,从1到Banner张数,然后重复轮
}
function k() {
clearInterval(m);//清除 名为m 的定时器;
}
function g() {//轮换方法
f[lastI].style.display = "none";//上一张图片,隐藏
n[lastI].className = "";//赋值空值
f[e].style.display = "block";//进入下一张显示
n[e].className = "on";//标题显示
lastI = e//设置当前 显示的 图片位标数字
}
a.onmouseover = k;//鼠标移动上去后,清除定时器(暂停轮播)
a.onmouseout = b;//鼠标离开,开始定时器
h.onmouseover = function (i) {//计算id slideBar 里面的li数量,为了显示banner下标
j = i ? i.target : window.event.srcElement;
if (j.nodeName === "LI") {
e = parseInt(j.innerHTML, 10) - 1;
g()
}
};
b()
}
新系列 深入浅出TypeScript 来了,本系列至少20+篇。本文为第一篇,来介绍一下TypeScript 以及常见的类型。
TypeScript是一门由微软推出的开源的、跨平台的编程语言。它是JavaScript的超集,扩展了 JavaScript 的语法,最终会被编译为JavaScript代码。
TypeScript的主要特性:
TypeScript 主要是为了实现以下两个目标:
下面就来看看这两个目标是如何实现的。
为什么要给JavaScript加上类型呢?
我们知道,JavaScript是一种轻量级的解释性脚本语言。也是弱类型、动态类型语言,允许隐式转换,只有运行时才能确定变量的类型。正是因为在运行时才能确定变量的类型,JavaScript代码很多错误在运行时才能发现。TypeScript在JavaScript的基础上,包装了类型机制,使其变身成为 静态类型 语言。在 TypeScript 中,不仅可以轻易复用 JavaScript 的代码、最新特性,还能使用可选的静态类型进行检查报错,使得编写的代码更健壮、更易于维护。
下面是 JavaScript 项目中最常见的十大错误,如果使用 TypeScript,那么在 编写阶段 就可以发现并解决很多 JavaScript 错误了:
类型系统能够提高代码的质量和可维护性,经过不断的实践,以下两点尤其需要注意:
可以认为,在所有操作符之前,TypeScript 都能检测到接收的类型(在代码运行时,操作符接收的是实际数据;在静态检测时,操作符接收的则是类型)是否被当前操作符所支持。当 TypeScript 类型检测能力覆盖到所有代码后,任意破坏约定的改动都能被自动检测出来,并提出类型错误。因此,可以放心地修改、重构业务逻辑,而不用担忧因为考虑不周而犯下低级错误。
在一些语言中,类型总是有一些不必要的复杂的存在方式,而 TypeScript 尽可能地降低了使用门槛,它是通过如下方式来实现的。
TypeScript 与 JavaScript 本质并无区别,我们可以将 TypeScipt 理解为是一个添加了类型注解的 JavaScript,为JavaScript代码提供了编译时的类型安全。
实际上,TypeScript 是一门“ 中间语言 ”,因为它最终会转化为JavaScript,再交给浏览器解释、执行。不过 TypeScript 并不会破坏 JavaScript 原有的体系,只是在 JavaScript 的基础上进行了扩展。
准确的说,TypeScript 只是将JavaScript中的方法进行了标准化处理:
这段代码在TypeScript中就会报错,因为TS会知道a是一个数字类型,不能将其他类型的值赋值给a,这种类型的推断是很有必要的。
上面说了,TypeScript会尽可能安全的推断类型。我们也可以使用类型注释,以实现以下两件事:
在一些语言中,类型总是有一些不必要的复杂的存在方式,而 TypeScript 的类型是结构化的。比如下面的例子中,函数会接受它所期望的参数:
为了便于把 JavaScript 代码迁移至 TypeScript,即使存在编译错误,在默认的情况下,TypeScript 也会尽可能的被编译为 JavaScript 代码。因此,我们可以将JavaScript代码逐步迁移至 TypeScript。
虽然 TypeScript 是 JavaScript 的超集,但它始终紧跟ECMAScript标准,所以是支持ES6/7/8/9 等新语法标准的。并且,在语法层面上对一些语法进行了扩展。TypeScript 团队也正在积极的添加新功能的支持,这些功能会随着时间的推移而越来越多,越来越全面。
虽然 TypeScript 比较严谨,但是它并没有让 JavaScript 失去其灵活性。TypeScript 由于兼容 JavaScript 所以灵活度可以媲美 JavaScript,比如可以在任何地方将类型定义为 any(当然,并不推荐这样使用),毕竟 TypeScript 对类型的检查严格程度是可以通过 tsconfig.json 来配置的。
在搭建TypeScript环境之前,先来看看适合TypeScript的IDE,这里主要介绍Visual Studio Code,笔者就一直使用这款编辑器。
VS Code可以说是微软的亲儿子了,其具有以下优势:
因为 VS Code 中内置了特定版本的 TypeScript 语言服务,所以它天然支持 TypeScript 语法解析和类型检测,且这个内置的服务与手动安装的 TypeScript 完全隔离。因此, VS Code 支持在内置和手动安装版本之间动态切换语言服务,从而实现对不同版本的 TypeScript 的支持。
如果当前应用目录中安装了与内置服务不同版本的 TypeScript,我们就可以点击 VS Code 底部工具栏的版本号信息,从而实现 “use VS Code's Version” 和 “use Workspace's Version” 两者之间的随意切换。
除此之外,VS Code 也基于 TypeScript 语言服务提供了准确的代码自动补全功能,并显示详细的类型定义信息,大大的提升了我们的开发效率。
1)全局安装TypeScript:
2)初始化配置文件:
执行之后,项目根目录会出现一个 tsconfig.json 文件,里面包含ts的配置项(可能因为版本不同而配置略有不同)。
可以在 package.json 中加入script命令:
3)编译ts代码:
TSLint 是一个通过 tslint.json 进行配置的插件,在编写TypeScript代码时,可以对代码风格进行检查和提示。如果对代码风格有要求,就需要用到TSLint了。其使用步骤如下: (1)在全局安装TSLint:
(2)使用TSLint初始化配置文件:
执行之后,项目根目录下多了一个 tslint.json 文件,这就是TSLint的配置文件了,它会根据这个文件对代码进行检查,生成的 tslint.json 文件有下面几个字段:
这些字段的含义如下;
在说TypeScript数据类型之前,先来看看在TypeScript中定义数据类型的基本语法。
在语法层面,缺省类型注解的 TypeScript 与 JavaScript 完全一致。因此,可以把 TypeScript 代码的编写看作是为 JavaScript 代码添加类型注解。
在 TypeScript 语法中,类型的标注主要通过类型后置语法来实现:“ 变量: 类型 ”
在 JavaScript 中,原始类型指的是 非对象且没有方法 的数据类型,包括:number、boolean、string、null、undefined、symbol、bigInt。
它们对应的 TypeScript 类型如下:
JavaScript原始基础类型TypeScript类型 numbernumber booleanboolean stringstring nullnull undefinedundefined symbolsymbol bigIntbigInt
需要注意 number 和 Number 的区别:TypeScript中指定类型的时候要用 number ,这是TypeScript的类型关键字。而 Number 是 JavaScript 的原生构造函数,用它来创建数值类型的值,这两个是不一样的。包括 string 、 boolean 等都是TypeScript的类型关键字,而不是JavaScript语法。
TypeScript 和 JavaScript 一样,所有数字都是 浮点数 ,所以只有一个 number 类型。
TypeScript 还支持 ES6 中新增的二进制和八进制字面量,所以 TypeScript 中共支持 2、8、10和16 这四种进制的数值:
字符串类型可以使用单引号和双引号来包裹内容,但是如果使用 Tslint 规则,会对引号进行检测,使用单引号还是双引号可以在 Tslint 规则中进行配置。除此之外,还可以使用 ES6 中的模板字符串来拼接变量和字符串会更为方便。
类型为布尔值类型的变量的值只能是true或者false。除此之外,赋值给布尔值的值也可以是一个计算之后结果为布尔值的表达式:
在 JavaScript 中,undefined和 null 是两个基本数据类型。在 TypeScript 中,这两者都有各自的类型,即 undefined 和 null,也就是说它们既是实际的值,也是类型。这两种类型的实际用处不是很大。
注意,第一行代码可能会报一个tslint的错误: Unnecessary initialization to 'undefined' ,就是不能给一个变量赋值为undefined。但实际上给变量赋值为undefined是完全可以的,所以如果想让代码合理化,可以配置tslint,将" no-unnecessary-initializer "设置为 false 即可。
默认情况下,undefined 和 null 是所有类型的子类型,可以赋值给任意类型的值,也就是说可以把 undefined 赋值给 void 类型,也可以赋值给 number 类型。当在 tsconfig.json 的"compilerOptions"里设置为 "strictNullChecks": true 时,就必须严格对待了。这时 undefined 和 null 将只能赋值给它们自身或者 void 类型。这样也可以规避一些错误。
BigInt是ES6中新引入的数据类型,它是一种内置对象,它提供了一种方法来表示大于 2- 1 的整数,BigInt可以表示任意大的整数。
使用 BigInt 可以安全地存储和操作大整数,即使这个数已经超出了JavaScript构造函数 Number 能够表示的安全整数范围。
我们知道,在 JavaScript 中采用双精度浮点数,这导致精度有限,比如 Number.MAX_SAFE_INTEGER 给出了可以安全递增的最大可能整数,即 2- 1 ,来看一个例子:
可以看到,最终返回了true,这就是超过精读范围造成的问题,而 BigInt 正是解决这类问题而生的:
这里需要用 BigInt(number) 把 Number 转化为 BigInt ,同时如果类型是 BigInt ,那么数字后面需要加 n 。
在TypeScript中, number 类型虽然和 BigInt 都表示数字,但是实际上两者类型是完全不同的:
symbol我们平时用的比较少,所以可能了解也不是很多,这里就详细来说说symbol。
symbol 是 ES6 新增的一种基本数据类型,它用来表示独一无二的值,可以通过 Symbol 构造函数生成。
注意:Symbol 前面不能加 new关键字,直接调用即可创建一个独一无二的 symbol 类型的值。
可以在使用 Symbol 方法创建 symbol 类型值的时候传入一个参数,这个参数需要是一个字符串。如果传入的参数不是字符串,会先自动调用传入参数的 toString 方法转为字符串:
上面代码的第三行可能会报一个错误:This condition will always return 'false' since the types 'unique symbol' and 'unique symbol' have no overlap. 这是因为编译器检测到这里的 s1 === s2 始终是false,所以编译器提醒这代码写的多余,建议进行优化。
上面使用Symbol创建了两个symbol对象,方法中都传入了相同的字符串,但是两个symbol值仍然是false,这就说明了 Symbol 方法会返回一个独一无二的值。Symbol 方法传入的这个字符串,就是方便我们区分 symbol 值的。可以调用 symbol 值的 toString 方法将它转为字符串:
在TypeScript中使用symbol就是指定一个值的类型为symbol类型:
在ES6中,对象的属性是支持表达式的,可以使用于一个变量来作为属性名,这对于代码的简化有很多用处,表达式必须放在大括号内:
symbol 也可以作为属性名,因为symbol的值是独一无二的,所以当它作为属性名时,不会与其他任何属性名重复。当需要访问这个属性时,只能使用这个symbol值来访问(必须使用方括号形式来访问):
在使用obj.name访问时,实际上是字符串name,这和访问普通字符串类型的属性名是一样的,要想访问属性名为symbol类型的属性时,必须使用方括号。方括号中的name才是我们定义的symbol类型的变量name。
使用 Symbol 类型值作为属性名,这个属性是不会被 for…in遍历到的,也不会被 Object.keys() 、 Object.getOwnPropertyNames() 、 JSON.stringify() 等方法获取到:
虽然这些方法都不能访问到Symbol类型的属性名,但是Symbol类型的属性并不是私有属性,可以使用 Object.getOwnPropertySymbols 方法获取对象的所有symbol类型的属性名:
除了这个方法,还可以使用ES6提供的 Reflect 对象的静态方法 Reflect.ownKeys ,它可以返回所有类型的属性名,Symbol 类型的也会返回:
Symbol 包含两个静态方法, for 和 keyFor 。 1)Symbol.for()
用Symbol创建的symbol类型的值都是独一无二的。使用 Symbol.for 方法传入字符串,会先检查有没有使用该字符串调用 Symbol.for 方法创建的 symbol 值。如果有,返回该值;如果没有,则使用该字符串新创建一个。使用该方法创建 symbol 值后会在全局范围进行注册。
上面代码中,创建了一个iframe节点并把它放在body中,通过这个 iframe 对象的 contentWindow 拿到这个 iframe 的 window 对象,在 iframe.contentWindow上添加一个值就相当于在当前页面定义一个全局变量一样。可以看到,在 iframe 中定义的键为 TypeScript 的 symbol 值在和在当前页面定义的键为'TypeScript'的symbol 值相等,说明它们是同一个值。
2)Symbol.keyFor() 该方法传入一个 symbol 值,返回该值在全局注册的键名:
看完简单的数据类型,下面就来看看比较复杂的数据类型,包括JavaScript中的数组和对象,以及TypeScript中新增的元组、枚举、Any、void、never、unknown。
在 TypeScript 中有两种定义数组的方式:
以上两种定义数组类型的方式虽然本质上没有任何区别,但是更推荐使用第一种形式来定义。一方面可以避免与 JSX 语法冲突,另一方面可以减少代码量。
注意,这两种写法中的 number 指定的是数组元素的类型,也可以在这里将数组的元素指定为其他任意类型。如果要指定一个数组里的元素既可以是数值也可以是字符串,那么可以使用这种方式: number|string[] 。
在JavaScript中,object是引用类型,它存储的是值的引用。在TypeScript中,当想让一个变量或者函数的参数的类型是一个对象的形式时,可以使用这个类型:
可以看到,当给一个对象类型的变量赋值一个对象时,就会报错。对象类型更适合以下场景:
在 JavaScript 中并没有元组的概念,作为一门动态类型语言,它的优势是支持多类型元素数组。但是出于较好的扩展性、可读性和稳定性考虑,我们通常会把不同类型的值通过键值对的形式塞到一个对象中,再返回这个对象,而不是使用没有任何限制的数组。TypeScript 的元组类型正好弥补了这个不足,使得定义包含固定个数元素、每个元素类型未必相同的数组成为可能。
元组可以看做是数组的扩展,它表示已知元素数量和类型的数组,它特别适合用来实现多值返回。确切的说,就是已知数组中每一个位置上的元素的类型,可以通过元组的索引为元素赋值::
可以看到,定义的arr元组中,元素个数和元素类型都是确定的,当为arr赋值时,各个位置上的元素类型都要对应,元素个数也要一致。
当访问元组元素时,TypeScript也会对元素做类型检查,如果元素是一个字符串,那么它只能使用字符串方法,如果使用别的类型的方法,就会报错。
在TypeScript 新的版本中,TypeScript会对元组做越界判断。超出规定个数的元素称作越界元素,元素赋值必须类型和个数都对应,不能超出定义的元素个数。
这里定义了接口 Tuple ,它继承数组类型,并且数组元素的类型是 number 和 string 构成的联合类型,这样接口 Tuple 就拥有了数组类型所有的特性。并且指定索引为0的值为 string 类型,索引为1的值为 number 类型,同时指定 length 属性的类型字面量为 2,这样在指定一个类型为这个接口 Tuple 时,这个值必须是数组,而且如果元素个数超过2个时,它的length就不是2是大于2的数了,就不满足这个接口定义了,所以就会报错;当然,如果元素个数不够2个也会报错,因为索引为0或1的值缺失。
TypeScript 在 ES 原有类型基础上加入枚举类型,使得在 TypeScript 中也可以给一组数值赋予名字,这样对开发者比较友好。枚举类型使用enum来定义:
上面定义的枚举类型的Roles,它有三个值,TypeScript会为它们每个值分配编号,默认从0开始,在使用时,就可以使用名字而不需要记数字和名称的对应关系了:
除此之外,还可以修改这个数值,让SUPER_ADMIN = 1,这样后面的值就分别是2和3。当然还可以给每个值赋予不同的、不按顺序排列的值:
我们可以将一个值定义为any类型,也可以在定义数组类型时使用any来指定数组中的元素类型为任意类型:
any 类型会在对象的调用链中进行传导,即any 类型对象的任意属性的类型都是 any,如下代码所示:
需要注意:不要滥用any类型,如果代码中充满了any,那TypeScript和JavaScript就毫无区别了,所以除非有充足的理由,否则应该尽量避免使用 any ,并且开启禁用隐式 any 的设置。
void 和 any 相反,any 是表示任意类型,而 void 是表示没有类型,就是什么类型都不是。这在 定义函数,并且函数没有返回值时会用到 :
需要注意: void 类型的变量只能赋值为 undefined 和 null ,其他类型不能赋值给 void 类型的变量。
never 类型指永远不存在值的类型,它是那些 总会抛出异常 或 根本不会有返回值的函数表达式的返回值 类型,当变量被永不为真的类型保护所约束时,该变量也是 never 类型。
下面的函数,总是会抛出异常,所以它的返回值类型是never,用来表明它的返回值是不存在的:
never 类型是任何类型的子类型,所以它可以赋值给任何类型;而没有类型是 never 的子类型,所以除了它自身以外,其他类型(包括 any 类型)都不能为 never 类型赋值。
上面代码定义了一个立即执行函数,函数体是一个死循环,这个函数调用后的返回值类型为 never,所以赋值之后 neverVariable 的类型是 never 类型,当给neverVariable 赋值 123 时,就会报错,因为除它自身外任何类型都不能赋值给 never 类型。
基于 never 的特性,我们可以把 never 作为接口类型下的属性类型,用来禁止操作接口下特定的属性:
可以看到,无论给 props.name 赋什么类型的值,它都会提示类型错误,这就相当于将 name 属性设置为了只读 。
unknown 是TypeScript在3.0版本新增的类型,主要用来描述类型并不确定的变量。它看起来和any很像,但是还是有区别的,unknown相对于any更安全。
对于any,来看一个例子:
上面这些语句都不会报错,因为value是any类型,所以后面三个操作都有合法的情况,当value是一个对象时,访问name属性是没问题的;当value是数值类型的时候,调用它的toFixed方法没问题;当value是字符串或数组时获取它的length属性是没问题的。
当指定值为unknown类型的时候,如果没有 缩小类型范围 的话,是不能对它进行任何操作的。总之,unknown类型的值不能随便操作。那什么是类型范围缩小呢?下面来看一个例子:
这里由于把value的类型缩小为Date实例的范围内,所以进行了value.toISOString(),也就是使用ISO标准将 Date 对象转换为字符串。
使用以下方式也可以缩小类型范围:
关于 unknown 类型,在使用时需要注意以下几点:
在实际使用中,如果有类型无法确定的情况,要尽量避免使用 any,因为 any 会丢失类型信息,一旦一个类型被指定为 any,那么在它上面进行任何操作都是合法的,所以会有意想不到的情况发生。因此如果遇到无法确定类型的情况,要先考虑使用 unknown。
script
var a=document.links; //把页面上所有的链接存在数组a中
for(i=0;ia.length;i++) //在数组a中循环
document.write(a[i]+'br'); //在页面上显示数组a中的每个元素,也就是页面上的每个链接,br是换行用的
/script
if(userinfo.name.value.length2){ //如果USERINFO的名字参数长度小于2个字节的话
userinfo.name.focus(); //这是一个方法,就是光标返回到text框
alert("用户名不能为空或长度小于2,请重新输入!");
return false; //失败,返回重新输入。
}
if(userinfo.password.value.length6){
userinfo.password.focus();
alert("密码长度不能小于6,请重新输入");
return false;
}
if(userinfo.password.value!=userinfo.password1.value){
userinfo.password.focus();
userinfo.password.value=''; //如果密码为空
userinfo.password1.value=''; //如果密码2为空
alert("两次输入的密码不同,请重新输入");
return false;
}
if(document.userinfo.useremail.value.length!=0){ //从这里到下面都是验证邮件格式的,用 了“||”并且来说明,验证一下邮件的格式是否准确
if(document.userinfo.useremail.value.charAt(0)=="."|| //同上
document.userinfo.useremail.value.charAt(0)=="@"|| //同上
document.userinfo.useremail.value.indexOf('@',0)==-1|| //同上
document.userinfo.useremail.value.indexOf('@',0)==-1){ //同上
alert("地址不正确!");
document.userinfo.useremail.focus(); //和
return false;
}
}
else{
alert("地址不能为空");
document.userinfo.useremail.useremail.focus(); //和userinfo.name.focus()一个意思。
return false;
如果采用html5的话,不需要使用这段js来验证表单中的输入格式是否正确。
html
head
title表单数据验证/title
script
function checknumber(){ //定义一个函数,函数名为checknumber,用来验证输入
if(userform.acctno.value==""||userform.cname.value==""){ //判断输入控件accton和cname是否有输入数据,假如两个控件的值都为空
alert("账号或姓名没有填写!"); //则弹出对话框:“帐号或姓名没有填写”
return false; //返回值为false
}
else{
if (isnumeric(userform.acctno.value)) //判断输入空间acctno录入的值是否为数字
return false;
else{
alert("请输入有效的账号!");
return false;
}
}
}
function isnumeric(str){ //定义一个函数isnumeric,用来判断字符串是否为数字组成
for (var i=0;istr.length;i++){ //循环遍历字符串,从第一个下标开始循环到字符串长度为止
var ch=str.substring(i,i+1); //定义变量ch用于存储循环中下标到下标+1的值(即获取字符串中每个字符的值)
if(ch"0"||ch"9"||str.length==null) //判断字符是否是数字(符合此条件则不是数字)
return false;
}
return true; //不符合上述条件则是数字
}
/script
/head
body
form method="get"action=""name="userform" onsubmit="return checknumber()" //这个代码里的onsubmit="return checknumber()"是什么意思 这句的意思是当表单提交的时候获取checknumber()里面的返回值
p账号;input type="text" name="acctno" size="16"
p姓名;input type="text" name="cname" size="10"
p input type="submit" value="提交"
input type="reset" value="重填"
/form
/body
/html
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
headtitlesdfds/title
style
body{ word-spacing:12pt} !--控制间隙--
/style
/head
body
script LANGUAGE="JAVASCRIPT"
var arr=new Array(); /* 定义存放的数组 */
for(var i=0;i10;i++)
arr[i]=new Array();
arr[0][0]=1;
document.write("center"); //使输出的杨辉三角居中
for(var row=0;row10;row++){
for(var col=0;col=row;col++)
{
if(col==0||col==row) //如果是每一行的开头或结尾都为1
arr[row][col]=1;
else
arr[row][col]=arr[row-1][col-1]+arr[row-1][col]; //否则值等于上一行的本列与前一列之和
document.write(arr[row][col]);
document.write(" ");
}
document.write("br");//换行
}
document.write("/center");
/script
/body
/html