JS基础 | JavaScript 组成部分

2019/07/17 06:00
阅读数 107

前面一篇我们简单介绍了 JavaScipt 的历史,在 JavaScript 发展的前十几年时间,Nodejs 出现以前,JavaScript 主要是用于 Web 开发,也就是俗称网页或网站开发。

早期 JavaScript 只是寄生在浏览器上面的一门脚本语言,离开了浏览器它什么都做不了,还需要浏览器提供的 文档对象模型DOM、浏览器对象模型BOM才能正真的工作起来。

1. 文档对象模型(DOM)

用户需要与网页内容和浏览器窗口互动,浏览器除了呈现内容以外,还提供了一套机制,让开发者能够使用 JavaScript 语言控制网页上的元素(HTML),称之为“文档对象模型(Document Object Model,简称DOM)”。

对于网页开发,可以理解 DOM 是 HTML 文档在内存中的抽象节点树,通过全局对像 document.getElement(s)ByXXX 函数获取 HTML 元素对象,如下图:

通过修改返回的节点对象属性,就能实时改变Web页面的表现,你也可以通过 DOM 提供的其它 API 接口创建、删除 HTML 元素。

总之来说,如果你是想开发网站,设计互动网页,DOM 的学习必不可少,但对于使用 Cocos Creator 做 H5 游戏则不是必须的。

几乎所有的 UI(user interface 用户界面)开发框架,都是使用的抽像树状节点模型,如果你已经了解 DOM 的机制,对于 Cocos Creator 中的场景树、节点理解起来会非常轻松。

2. 浏览器对象模型(BOM)

除了对网页内容的控制,Web 开发人员,还需要使用 JavaScrip 控制 浏览器窗口,例如:

窗口提示 alert

使用 BOM 提供的 alert 函数可以使用浏览器弹出一个提示窗口,代码如下:

alert('欢迎关注「少年奎特尔」微信公众号!')

运行效果:

历史记录 history

使用 history 对象接口,保存了用户浏览网页的历史,使用 history.forward() \ history.back() 与我们点击浏览器的前进后退的作用相同,在浏览器控制台输入下面代码,可以看到效果:

history.forward(); //前进
history.back();    //后退

屏幕对象 screen

获取当前浏览器窗口高宽、位置等信息

定位 location

设置 location.href 可以跳转到指定链接,在浏览器控制台输入如下代码跳转链接:

location.href = 'http://www.creator-star.cn';

3. ECMAScript

ECMAScript 是用来标准化 JavaScript 语言的基本语法结构,对于使用 JavaScript 编写游戏来说它才是我们需要掌握的重点,主要有以下内容:

  1. 基本语法

  2. 内置对象

  3. 原型继承

随着 ECMAScript 规范的迭代发展 ECMAScript 6、7 (简称ES6、7),现代化的浏览器已经支持绝大部分ES6、ES7的新语法,同时 Cocos Creator 引擎内置有 Bable 编译器,在构建时会将 ES6、ES7 语法转换为 ES5 语法可兼容旧版本浏览器。虽然运行在目标设备上仍然是 ES5 的代码,但不影响我们使用新版本的语法。

在接下来的教程中,Shawn 将从 ECMAScript 最基础的语法开始讲解,欢迎关注,期待你的加入!

英文专业术语解释

  • HTML:全称 Hypertext Markup Language,超文本标记语言

  • document:n. 文件;公文;文献;证件;(计算机) 文档

  • object:n. 目标;物体;(计算机) 对象

  • model:n. 模型;样式

  • browser:n. 浏览器;浏览书本的人

  • ECMA:全称 European Computer Manufacturers Association,欧洲计算机制造商协会

  • script:n. 剧本;电影剧本;(计算机)脚本

  • bable:n. 通天塔;这里 Babel指的是一个 JavaScript 编译器

  • creator:n. 上帝;造物主;这里指的是 Cocos Creator 游戏引擎



少年奎特尔」公众号专注青少年游戏编程启蒙,通过游戏编程了解计算机与软件开发的一般知识,学习计算机思维,并能将日常的数学 、英语、表达、创意等能力应用于编程实践之中,Shawn 的愿景是:

——让游戏编程成为教育的最强武器!

本文分享自微信公众号 - Creator星球游戏开发社区(creator-star)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部