JavaScript 快速入门

本文改编自A JavaScript Primer For Meteor

概述

本文以介绍 JavaScript 为主,初学者掌握本文的内容后,将能够对 JavaScript 有大体了解,并且满足 Cocos Creator 的开发需求。

JavaScript是一门充满争议的编程语言:它以 Java 命名,但实际上和 Java 毫无关系。JavaScript 的创造只用了10天时间,但在20年时间里却发展成世界上最流行的 Web 开发语言。如果为 JavaScript 今日的地位和流行程度找一个原因,那毫无疑问是容易上手的语言特性。当然,精通 JavaScript 是一项艰巨的任务,但学会足够开发 Web 应用和游戏的知识却很简单,如果你已经有了一定编程基础,熟悉 JavaScript 语言特性不会花费你多长时间。

另外,在使用 Cocos Creator 开发游戏时你大多数情况下都会重复使用一些固有的模式。根据帕雷托法则(也叫二八定律),掌握一门语言的20%就足够你应付80%以上的情况了。现在就让我们来花最短的时间学习足够的 JavaScript 知识,以便我们开始使用 Cocos Creator 开发游戏。

边读边尝试

如果你能看到这篇文章,那么你已经具备了全功能的 JavaScript 开发环境——我说的就是你正在使用的浏览器!

在本页面中读到的所有例子,你都可以把他们输入到浏览器的控制台里并查看运行结果,如果你不清楚怎么做,可以阅读如何在不同浏览器中打开控制台的指南。

准备好了吗?让我们开始学习 JavaScript 吧!

变量

在 JavaScript 中,我们像这样声明一个变量:

var a;

保留字var之后紧跟着的,就是一个变量名,接下来我们可以为变量赋值:

var a = 12;

在阅读其他人的 JavaScript 代码时,你也会看到下面这样的变量声明:

a =  如果你在浏览器控制台中尝试,会发现 JavaScript 在面对省略var时的变量声明并不会报错,但在 Cocos Creator 项目脚本中,声明变量时的var是不能省略的,否则编译器会报错。 

函数

在 JavaScript 里我们像这样声明函数:

var myAwesomeFunction = function (myArgument) {
    // do something
}

像这样调用函数:

myAwesomeFunction(something);

我们看到函数声明也和变量声明一样遵从var something = somethingElse的模式。因为在 JavaScript 里,函数和变量本质上是一样的,我们可以像下面这样把一个函数当做参数传入另一个函数中:

square = function (a) {
    return a * a;
}
applyOperation = function (f,a) {
    return f(a);
}
applyOperation (square,10); // 100

返回值

函数的返回值是由return打头的语句定义的,我们这里要了解的是函数体内return语句之后的内容是不会被执行的。

myFunction = function (a) {
    return a * 3;
    explodeComputer(); // will never get executed (hopefully!)
}

If

JavaScript 中条件判断语句if是这样用的:

if (foo) {
    return bar;
}

If/Else

if后的值如果为 false,会执行else中的语句:

if (foo) {
    function1();
}
else {
    function2();
}

If/Else 条件判断还可以像这样写成一行:

foo ? function1() : function2();

foo的值为 true 时,表达式会返回function1()的执行结果,反之会返回function2()的执行结果。当我们需要根据条件来为变量赋值时,这种写法就非常方便:

var n = foo ? 1 : 2;

上面的语句可以表述为“当foo是 true 时,将n的值赋为1,否则赋为2”。

当然我们还可以使用else if来处理更多的判断类型:

if (foo) {
    function1();
}
else if (bar) {
    function2();
}
else {
    function3();
}

JavaScript 数组(Array)

JavaScript 里像这样声明数组:

a = [123,128)">456
,128)">789];

像这样访问数组中的成员:(从0开始索引)

a[1]; // 456

JavaScript 对象(Object)

我们像这样声明一个对象(object):

myProfile = {
    name: "Jare Guo",email: "blabla@gmail.com",'zip code': 12345,isInvited: true
}

在对象声明的语法(myProfile = {...})之中,有一组用逗号相隔的键值对。每一对都包括一个 key(字符串类型,有时候会用双引号包裹)和一个 value(可以是任何类型:包括 string,number,boolean,变量名,数组,对象甚至是函数)。我们管这样的一对键值叫做对象的属性(property),key 是属性名,value 是属性值。

你可以在 value 中嵌套其他对象,或者由一组对象组成的数组:

"Xiamen",points: 1234,isInvited: true,friends: [
        {
            name: "Johnny",68)">"blablabla@gmail.com"
        },{
            name: "Nantas",68)">"piapiapia@gmail.com"
        }
    ]
}

访问对象的某个属性非常简单,我们只要使用 dot 语法就可以了,还可以和数组成员的访问结合起来:

myProfile.name; // Jare Guo
myProfile.friends[1].name; // Nantas

JavaScript 中的对象无处不在,在函数的参数传递中也会大量使用,比如在 Cocos Creator 中,我们就可以像这样定义 FireClass 对象:

var MyComponent = cc.Class({
    extends: cc.Component
});

{extends: cc.Component}这就是一个用做函数参数的对象。在 JavaScript 中大多数情况我们使用对象时都不一定要为他命名,很可能会像这样直接使用。

匿名函数

我们之前试过了用变量声明的语法来定义函数:

myFunction = function (myArgument) {
     再复习一下将函数作为参数传入其他函数调用中的用法: 
return
f(a); } applyOperation(square,136); font-style:italic">// 100

我们还见识了 JavaScript 的语法是多么喜欢偷懒,所以我们就可以用这样的方式代替上面的多个函数声明:

applyOperation = function (f,a) {
    return f(a);
}
applyOperation(
    function(a){
      return a*a;
    },128)">10
)  我们这次并没有声明square函数,并将square作为参数传递,而是在参数的位置直接写了一个新的函数体,这样的做法被称为匿名函数,在 JavaScript 中是最为广泛使用的模式。 

链式语法

下面我们介绍一种在数组和字符串操作中常用的语法:

var myArray = [456];
myArray.push(789) // 123,456,789
var myString = "abcdef";
myString.replace("a",68)">"z"
); // "zbcdef"

上面代码中的点符号表示“调用myString字符串对象的replace函数,并且传递az作为参数,然后获得返回值”。

使用点符号的表达式,最大的优点是你可以把多项任务链接在一个表达式里,当然前提是每个调用的函数必须有合适的返回值。我们不会过多介绍如何定义可链接的函数,但是使用他们是非常简单的,只要使用以下的模式:something.function1().function2().function3()

链条中的每个环节都会接到一个初始值,调用一个函数,然后把函数执行结果传递到下一环节:

var n = 5;
n.double().square(); //100

This

this可能是 JavaScript 中最难以理解和掌握的概念了。

简单地说,this关键字能让你访问正在处理的对象:就像变色龙一样,this也会随着执行环境的变化而变化。

解释this的原理是很复杂的,不妨让我们使用两种工具来帮助我们在实践中理解this的值:

首先是最普通又最常用的console.log(),它能够将对象的信息输出到浏览器的控制台里。在每个函数体开始的地方加入一个console.log(),确保我们了解当时运行环境下正在处理的对象是什么。

myFunction = function (a,b) {
    console.log(this);
     另外一个方法是将this赋值给另外一个变量: 
var
myObject = this; 乍一看好像这样子并没有什么作用,实际上它允许你安全的使用myObject这个变量来指代最初执行函数的对象,而不用担心在后面的代码中this会变成其他东西。

运算符

=是赋值运算符,a = 12表示把 “12” 赋值给变量a

如果你需要比较两个值,可以使用==,例如a == 12

JavaScript 中还有个独特的===运算符,它能够比较两边的值和类型是否全都相同。(类型是指 string,number 这些):

a = "12";
a == 12; // true
a === // false

大多数情况下,我们都推荐使用===运算符来比较两个值,因为希望比较两个不同类型但有着相同值的情况是比较少见的。

下面是 JavaScript 判断两个值是否不相等的比较运算符:

a = 12;
a !== 11; // true

!运算符还可以单独使用,用来对一个 boolean 值取反:

a = true;
!a; !运算符总会得到一个 boolean 类型的值,所以可以用来将非 boolean 类型的值转为 boolean 类型: 
12
; !a; // false !!a; 或者:
0
; !a; // true !!a; // false

代码风格

最后,下面这些代码风格上的规则能帮助我们写出更清晰明确的代码:

  • 使用驼峰命名法:定义myRandomVariable这样的变量名,而不是my_random_variable
  • 在每一行结束时写一个;,尽管在 JavaScript 里行尾的;是可以忽略的
  • 在每个关键字前后都加上空格,如a = b + 1,而不是a=b+1

组合我们学到的知识

以上基础的 JavaScript 语法知识已经介绍完了,下面我们来看看能否理解实际的 Cocos Creator 脚本代码:

var Comp = cc.Class({
    extends: cc.Component,properties: {
        target: {
            default: null,type: cc.Entity
        }
    },onStart: function () {
        this.target = cc.Entity.find('/Main Player/Bip/Head');
    },update: function () {
        this.transform.worldPosition = this.target.transform.worldPosition;
    }
});

这段代码向引擎定义了一个新组件,这个组件具有一个target参数,在运行时会初始化为指定的对象,并且在运行的过程中每一帧都将自己设置成和target相同的坐标。

让我们分别看下每一句的作用(我会高亮有用的语法模式):

var Comp = cc.Class({:这里我们使用cc这个对象,通过点语法来调用对象的Class()方法(该方法是cc对象的一个属性),调用时传递的参数是一个匿名的JavaScript 对象{})。

target: { default: null,type: cc.Entity }:这个键值对声明了一个名为target的属性,值是另一个 JavaScript 匿名对象。这个对象定义了 target 的默认值和值类型。

extends: cc.Component:这个键值对声明这个 Class 的父类是 cc.Component。cc.Component 是 Cocos Creator 的内置类型。

onStart: function () {:这一对键值定义了一个成员方法,叫做onStart,他的值是一个匿名函数。

this.target = cc.Entity.find(':在这一句的上下文中,this表示正在被创建的 Component 组件,这里通过this.target来访问target属性。

继续学习

这篇简短的教程从任何角度上说都无法代替系统的 JavaScript 学习,但这里介绍的几种语法模式已经能够帮助你理解绝大部分 Cocos Creator 文档和教程中的代码了,至少从语法上完全可以理解。

如果你像我一样喜欢通过实践学习,那么现在就可以开始跟随教程和文档学习在 Cocos Creator 中开发游戏了!

JavaScript Resources

以下是 JavaScript 的一些入门教程:

  • JavaScript标准参考教程
  • JavaScript秘密花园

Cocos Creator JavaScript 快速入门(摘自官方文档)的更多相关文章

  1. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  2. HTML5数字输入仅接受整数的实现代码

    这篇文章主要介绍了HTML5数字输入仅接受整数的实现代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. amaze ui 的使用详细教程

    这篇文章主要介绍了amaze ui 的使用详细教程,本文通过多种方法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  4. html5简介_动力节点Java学院整理

    这篇文章主要介绍了html5简介,用于指定构建网页的元素,这些元素中的大多数都用于描述网页内容,有兴趣的可以了解一下

  5. ios – 如何从变量访问属性或方法?

    是否可以使用变量作为Swift中方法或属性的名称来访问方法或属性?在PHP中,您可以使用$object->{$variable}.例如编辑:这是我正在使用的实际代码:解决方法你可以做到,但不能使用“纯粹的”Swift.Swift的重点是防止这种危险的动态属性访问.你必须使用Cocoa的Key-ValueCoding功能:非常方便,它完全穿过你要穿过的字符串到属性名称的桥,但要注意:这里是龙.

  6. iOS >>块>>更改块外部的变量值

    我不是在处理一个Object并改变它,就像我的mString一样.我希望’center’属性的行为类似于myInt,因为它是直接访问的C结构,而不是指向对象的指针.我希望’backgroundColor’的行为类似于我的imstring,因为它是一个指向一个新对象的对象的指针,不是吗?

  7. ios – Xcode Bot:如何在post触发器脚本上获得.ipa路径?

    我正在使用机器人来存档iOS应用程序,我需要获取.ipa产品路径才能将其发布到我们的分发系统中.机器人设置:并使用脚本打印所有env变量,其中不包含ipa文件的路径.此外,一些变量指向不存在的目录,即:XCS_OUTPUT_DIR这里的env变量输出:除此之外,我还能够确认.ipa文件是在另一个文件夹中创建的(/IntegrationAssets//

  8. ios – 使用附加字符串本地化Info.plist变量

    我正在尝试本地化应用程序的名称,同时仍然能够根据构建配置追加字符串.所以目前它被设置为:该设置定义为:通过这种方式,我们可以为应用程序添加后缀以用于不同的beta版本.问题是,当我们尝试本地化本地化的InfoPlist.strings中的应用程序显示名称时,就像这样我们覆盖存储在Info.plist中的值,并丢失后缀字符.这有什么好办法吗?

  9. iOS – 开始iOS教程 – 变量之前的下划线?

    这是正确的还是我做错了什么?

  10. ios – 静态计算变量被多次实例化

    我有一个日期格式化程序,我试图在UITableViewCell子类中创建一个单例,所以我创建了一个这样的计算属性:问题是我不止一次看到print语句,这意味着它不止一次被创建.我已经找到了其他方法,但我很想知道这里发生了什么.有任何想法吗?解决方法您的代码段相当于只获取属性,基本上它与以下内容相同:如果你只想运行一次,你应该像定义一个惰性属性一样定义它:

随机推荐

  1. 【cocos2d-x 3.x 学习笔记】对象内存管理

    Cocos2d-x的内存管理cocos2d-x中使用的是上面的引用计数来管理内存,但是又增加了一些自己的特色。cocos2d-x中通过Ref类来实现引用计数,所有需要实现内存自动回收的类都应该继承自Ref类。下面是Ref类的定义:在cocos2d-x中创建对象通常有两种方式:这两中方式的差异可以参见我另一篇博文“对象创建方式讨论”。在cocos2d-x中提倡使用第二种方式,为了避免误用第一种方式,一般将构造函数设为protected或private。参考资料:[1]cocos2d-x高级开发教程2.3节[

  2. 利用cocos2dx 3.2开发消灭星星六如何在cocos2dx中显示中文

    由于编码的不同,在cocos2dx中的Label控件中如果放入中文字,往往会出现乱码。为了方便使用,我把这个从文档中获取中文字的方法放在一个头文件里面Chinese.h这里的tex_vec是cocos2dx提供的一个保存文档内容的一个容器。这里给出ChineseWords,xml的格式再看看ChineseWord的实现Chinese.cpp就这样,以后在需要用到中文字的地方,就先include这个头文件然后调用ChineseWord函数,获取一串中文字符串。

  3. 利用cocos2dx 3.2开发消灭星星七关于星星的算法

    在前面,我们已经在GameLayer中利用随机数初始化了一个StarMatrix,如果还不知道怎么创建星星矩阵请回去看看而且我们也讲了整个游戏的触摸事件的派发了。

  4. cocos2dx3.x 新手打包APK注意事项!

    这个在编译的时候就可以发现了比较好弄这只是我遇到的,其他的以后遇到再补充吧。。。以前被这两个问题坑了好久

  5. 利用cocos2dx 3.2开发消灭星星八游戏的结束判断与数据控制

    如果你看完之前的,那么你基本已经拥有一个消灭星星游戏的雏形。开始把剩下的两两互不相连的星星消去。那么如何判断是GameOver还是进入下一关呢。。其实游戏数据贯穿整个游戏,包括星星消除的时候要加到获得分数上,消去剩下两两不相连的星星的时候的加分政策等,因此如果前面没有做这一块的,最好回去搞一搞。

  6. 利用cocos2dx 3.2开发消灭星星九为游戏添加一些特效

    needClear是一个flag,当游戏判断不能再继续后,这个flag变为true,开始消除剩下的星星clearSumTime是一个累加器ONE_CLEAR_TIME就是每颗星星消除的时间2.连击加分信息一般消除一次星星都会有连击信息和加多少分的信息。其实这些combo标签就是一张图片,也是通过控制其属性或者runAction来实现。源码ComboEffect.hComboEffect.cpp4.消除星星粒子效果消除星星时,为了实现星星爆裂散落的效果,使用了cocos2d提供的粒子特效引擎对于粒子特效不了

  7. 02 Cocos2D-x引擎win7环境搭建及创建项目

    官网有搭建的文章,直接转载记录。环境搭建:本文介绍如何搭建Cocos2d-x3.2版本的开发环境。项目创建:一、通过命令创建项目前面搭建好环境后,怎样创建自己的Cocos2d-x项目呢?先来看看Cocos2d-x3.2的目录吧这就是Cocos2d-x3.2的目录。输入cocosnew项目名–p包名–lcpp–d路径回车就创建成功了例如:成功后,找到这个项目打开proj.win32目录下的Hello.slnF5成功了。

  8. 利用cocos2dx 3.2开发消灭星星十为游戏添加音效项目源码分享

    一个游戏,声音也是非常的重要,其实cocos2dx里面的简单音效引擎的使用是非常简单的。我这里只不过是用一个类对所有的音效进行管理罢了。Audio.hAudio.cpp好了,本系列教程到此结束,第一次写教程如有不对请见谅或指教,谢谢大家。最后附上整个项目的源代码点击打开链接

  9. 03 Helloworld

    程序都有一个入口点,在C++就是main函数了,打开main.cpp,代码如下:123456789101112131415161718#include"main.h"#include"AppDelegate.h"#include"cocos2d.h"USING_NS_CC;intAPIENTRY_tWinMain{UNREFERENCED_ParaMETER;UNREFERENCED_ParaMETER;//createtheapplicationinstanceAppDelegateapp;return

  10. MenuItemImage*图标菜单创建注意事项

    学习cocos2dx,看的是cocos2d-x3.x手游开发实例详解,这本书错误一大把,本着探索求知勇于发现错误改正错误的精神,我跟着书上的例子一起调试,当学习到场景切换这个小节的时候,出了个错误,卡了我好几个小时。

返回
顶部