H5小游戏入门:JavaScript / Typescript基础概念

什么是JavaScript

JavaScript是解释性脚本语言,
JavaScript 是基于对象和事件驱动的,无需特定的语言环境,只需在支持的浏览器上就能运行。
JavaScript 的语法简单,使用的变量为弱类型。

什么是ES6?

ECMAScript 6,ES6是JS的一种规范,

什么是Typescript?

TypeScript 是微软开发的自由和开源的编程语言,
它是 JavaScript 的超集,包含了 JavaScript 的所有元素,可以载入 JavaScript 代码运行,并扩展了 JavaScript 的语法。
TypeScript 是ES6的一个超集, 扩展了JavaScript的语法。支持强类型、面向对象、类。
TypeScript 的强类型是「静态类型检查」的「弱类型」。
TS引入了 接口、类、继承的编程思想,「类」和「继承」都不是 TypeScript 引入的,直接作为 JavaScript 的超集包含进来了。
TypeScript 中引入了模块的概念,可以把声明、数据、函数和类封装在模块中。
IDE推荐使用Visual Studio Code。

JavaScript和Typescript对比

本地浏览器支持
TypeScript 代码需要被编译(输出 JavaScript 代码),这是 TypeScript 代码执行时的一个额外的步骤。

JS / TS常见笔试题

JS 笔试题:var和函数的提前声明

function fn(a) {
console.log(a);
var a = 2;
function a() {}
console.log(a);
}

fn(1);
  输出:function a() {} 2

我们知道var和function是会提前声明的,而且function是优先于var声明的(如果同时存在的话),所以提前声明后输出的a是个function,然后代码往下执行a进行重新赋值了,故第二次输出是2。

JS 笔试题:this

function JSClass() {
this.m_Text = ‘division element’;
this.m_Element = document.createElement(‘div’);
this.m_Element.innerHTML = this.m_Text;
this.m_Element.addEventListener(‘click’, this.func);
// this.m_Element.onclick = this.func;
}

JSClass.prototype.Render = function() {
document.body.appendChild(this.m_Element);
}

JSClass.prototype.func = function() {
alert(this.m_Text);
};

var jc = new JSClass();
jc.Render(); // add div
jc.func(); // 输出 division element
//click添加的div元素division element会输出underfined,为什么?
  答案:division element undefined

第一次输出很好理解,第二次的话仔细看,this其实已经指向了this.m_Element,因为是this.m_Element调用的addEventListener函数,所以内部的this全指向它了。可以试着加上一行代码this.m_Element.m_Text = ‘hello world’,就会alert出hello world了。

笔试题:let

今天我们使用ES6提供的let来解决这个问题。接下来就看看let的神奇吧。

window.onload = function(){
var aLi = document.getElementsByTagName(‘li’);
for (let i=0;i<aLi.length;i++){
aLi[i].onclick = function(){
alert(i);
}
};
}
有看出什么区别吗?奥秘就在for循环中var i=0变成了let i=0,我们仅仅只改了一个关键字就解决了这个问题,还避免了使用闭包可能造成的内存泄漏等问题。

上述代码中的for 循环头部的 let 不仅将 i 绑定到了 for 循环的块中, 事实上它将其重新绑定到了循环的每一个迭代中, 确保使用上一个循环迭代结束时的值重新进行赋值。

后面就让我们好好来了解一下let这个神奇的关键字吧。

let 关键字可以将变量绑定到所在的任意作用域中(通常是 { … } 内部)。换句话说,let为其声明的变量隐式地了所在的块作用域。 ----《你所不知道的JavaScript(上)》P32

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
智慧校园整体解决方案是响应国家教育信息化政策,结合教育改革和技术创新的产物。该方案以物联网、大数据、人工智能和移动互联技术为基础,旨在打造一个安全、高效、互动且环保的教育环境。方案强调从数字化校园向智慧校园的转变,通过自动数据采集、智能分析和按需服务,实现校园业务的智能化管理。 方案的总体设计原则包括应用至上、分层设计和互联互通,确保系统能够满足不同用户角色的需求,并实现数据和资源的整合与共享。框架设计涵盖了校园安全、管理、教学、环境等多个方面,构建了一个全面的校园应用生态系统。这包括智慧安全系统、校园身份识别、智能排课及选课系统、智慧学习系统、精品录播教室方案等,以支持个性化学习和教学评估。 建设内容突出了智慧安全和智慧管理的重要性。智慧安全管理通过分布式录播系统和紧急预案一键启动功能,增强校园安全预警和事件响应能力。智慧管理系统则利用物联网技术,实现人员和设备的智能管理,提高校园运营效率。 智慧教学部分,方案提供了智慧学习系统和精品录播教室方案,支持专业级学习硬件和智能化网络管理,促进个性化学习和教学资源的高效利用。同时,教学质量评估中心和资源应用平台的建设,旨在提升教学评估的科学性和教育资源的共享性。 智慧环境建设则侧重于基于物联网的设备管理,通过智慧教室管理系统实现教室环境的智能控制和能效管理,打造绿色、节能的校园环境。电子班牌和校园信息发布系统的建设,将作为智慧校园的核心和入口,提供教务、一卡通、图书馆等系统的集成信息。 总体而言,智慧校园整体解决方案通过集成先进技术,不仅提升了校园的信息化水平,而且优化了教学和管理流程,为学生、教师和家长提供了更加便捷、个性化的教育体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值