本文改编和学习自 A JavaScript Primer For Meteor 和 MDN Web教程

前文 Web开发初探

概述

本文以介绍 JavaScript 为主,初学者掌握本文的内容后,将能够对 JavaScript 有大体了解。

JavaScript(缩写:JS)是一门完备的 动态编程语言。当应用于 HTML 文档时,可为网站提供动态交互特性。由布兰登·艾克( Brendan Eich,Mozilla 项目、Mozilla 基金会和 Mozilla 公司的联合创始人)发明。

JavaScript 的应用场合极其广泛,简单到幻灯片、照片库、浮动布局和响应按钮点击,复杂到游戏、2D/3D 动画、大型数据库驱动程序等等。

JavaScript 相当简洁,却非常灵活。开发者们基于 JavaScript 核心编写了大量实用工具,可以使 开发工作事半功倍。其中包括:

  • 浏览器应用程序接口(API)—— 浏览器内置的 API 提供了丰富的功能,比如:动态创建 HTML 和设置 CSS 样式、从用户的摄像头采集处理视频流、生成3D 图像与音频样本等等。
  • 第三方 API —— 让开发者可以在自己的站点中整合其它内容提供者(Twitter、Facebook 等)提供的功能。
  • 第三方框架和库 —— 用来快速构建网站和应用。

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

边读边尝试

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

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

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

变量(Variable)

变量 是存储值的容器。在 JavaScript 中,我们像这样声明一个变量,先输入关键字 letvar,然后输入合适的名称:

var a;
let myVariable;

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

var a = 12;

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

a = 12;

注:行末的分号表示当前语句结束,不过只有在单行内需要分割多条语句时,这个分号才是必须的。然而,一些人认为每条语句末尾加分号是一种好的风格。

注:几乎任何内容都可以作为变量名,但还是有一些限制:如类型名无法作为变量名(详情请参阅 变量命名规则)。如果你不确定,还可以 验证变量名 是否有效。

注:JavaScript 对大小写敏感,myVariablemyvariable 是不同的。如果代码出现问题了,先检查一下大小写!

注:想要了解更多关于 varlet 的不同点,可以参阅 var 与 let 的区别

注:注意变量可以有不同的 数据类型

那么变量有什么用呢?我们说,编程时它们无所不在。如果值无法改变,那么就无法做任何动态的工作,比如发送个性化的问候,或是改变在图片库当前展示的图片。

注释

类似于 CSS、C++,JavaScript 中可以添加注释。

/*
这里的所有内容
都是注释。
*/

如果注释只有一行,可以更简单地将注释放在两个斜杠之后,就像这样:

// 这是一条注释。

函数

函数 用来封装可复用的功能。如果没有函数,一段特定的操作过程用几次就要重复写几次,而使用函数则只需写下函数名和一些简短的信息。

比如:在 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!)
}

注:return 语句告诉浏览器当前函数返回 result 变量。这是一点很有必要,因为函数内定义的变量只能在函数内使用。这叫做变量的 作用域

if

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

if (foo) {
return bar;
}

if / Else

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

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

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

foo ? function1() : function2();
//三目运算符:条件:条件True时返回值:条件False时返回值

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, 456, 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 中嵌套其他对象,或者由一组对象组成的数组:

myProfile = {
name: "Jare Guo",
email: "blabla@gmail.com",
city: "Xiamen",
points: 1234,
isInvited: true,
friends: [
{
name: "Johnny",
email: "blablabla@gmail.com"
},
{
name: "Nantas",
email: "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) {
// do something
}

再复习一下将函数作为参数传入其他函数调用中的用法:

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

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

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

我们这次并没有声明 square 函数,并将 square 作为参数传递,而是在参数的位置直接写了一个新的函数体,这样的做法被称为匿名函数,在 JavaScript 中是最为广泛使用的模式。

链式语法

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

var myArray = [123, 456];
myArray.push(789) // 123, 456, 789
var myString = "abcdef";
myString.replace("a", "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);
// do something
}

另外一个方法是将 this 赋值给另外一个变量:

myFunction = function (a, b) {
var myObject = this;
// do something
}

乍一看好像这样子并没有什么作用,实际上它允许你安全的使用 myObject 这个变量来指代最初执行函数的对象,而不用担心在后面的代码中 this 会变成其他东西。

关于 JavaScript 里 this 的详细原理说明,请参考这篇文章 this 的值到底是什么?一次说清楚

运算符

运算符 是一类数学符号,可以根据两个值(或变量)产生结果。以下表格中介绍了一些最简单的运算符,可以在浏览器控制台里尝试一下后面的示例。

译注:这里说“根据两个值(或变量)产生结果”是不严谨的,计算两个变量的运算符称为“二元运算符”,还有一元运算符和三元运算符,下表中的“取非”就是一元运算符。

运算符 解释 符号 示例
将两个数字相加,或拼接两个字符串。 + 6 + 9;"Hello " + "world!";
减、乘、除 这些运算符操作与基础算术一致。只是乘法写作星号,除法写作斜杠。 -, *, / 9 - 3;8 * 2; //乘法在JS中是一个星号9 / 3;
赋值运算符 为变量赋值(你之前已经见过这个符号了) = let myVariable = '李雷';
等于 测试两个值是否相等,并返回一个 true/false (布尔)值。 === let myVariable = 3;myVariable === 4; // false
不等于 和等于运算符相反,测试两个值是否不相等,并返回一个 true/false (布尔)值。 !== let myVariable = 3;myVariable !== 3; // false
取非 返回逻辑相反的值,比如当前值为真,则返回 false ! 原式为真,但经取非后值为 falselet myVariable = 3;!(myVariable === 3); // false

运算符种类远不止这些,不过目前上表已经够用了。完整列表请参阅 表达式和运算符

注:不同类型数据之间的计算可能出现奇怪的结果,因此必须正确引用变量,才能得出预期结果。比如在控制台输入 "35" + "25",为什么不能得到 60?因为引号将数字转换成了字符串,所以结果是连接两个字符串而不是把两个数字相加。输入 35 + 25 才能得到正确结果。

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

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

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

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

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

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

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

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

a = true;
!a; // false

! 运算符总会得到一个 boolean 类型的值,所以可以用来将非 boolean 类型的值转为 boolean 类型:

a = 12;
!a; // false
!!a; // true

或者:

a = 0;
!a; // true
!!a; // false

代码风格

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

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

组合我们学到的知识

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

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 学习,但这里介绍的几种语法模式已经能够帮助你理解绝大部分 Javascript 文档和教程中的代码了,至少从语法上完全可以理解。

如果你像我一样喜欢通过实践学习,那么现在就可以开始跟随教程和文档学习在 MDN上进阶学习

JavaScript Resources

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

Web开发初探之JavaScript 快速入门的更多相关文章

  1. Web开发初探(系统理解Web知识点)

    一.Web开发介绍 我们看到的网页通过代码来实现的 ,这些代码由浏览器解释并渲染成你看到的丰富多彩的页面效果. 这个浏览器就相当于Python的解释器,专门负责解释和执行(渲染)网页代码. 写网页的代 ...

  2. web前端基础知识及快速入门指南

    web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...

  3. JavaScript快速入门(四)——JavaScript函数

    函数声明 之前说的三种函数声明中(参见JavaScript快速入门(二)——JavaScript变量),使用Function构造函数的声明方法比较少见,我们暂时不提.function func() { ...

  4. 移动端web开发初探之Vuejs的简单实战

    这段时间在做的东西,是北邮人论坛APP的注册页.这个注册页是内嵌的网页,因为打算安卓和IOS平台同时使用.因此实际上就是在做移动端的web开发了. 在这过程中遇到了不少有意思的东西. DEMO的git ...

  5. Snap.svg – 现代 Web 开发必备的 JavaScript SVG 库

    SVG 是一种很好的 Web 技术方案,可以用来创建互动,在任何大小的屏幕上都会很好看.与分辨率无关的矢量图形.而这里推荐的 Snap.svg 这个 JavaScript 可以让你像 jQuery 操 ...

  6. JavaScript快速入门(一)——JavaScript概览

    JavaScript是什么? JavaScript的诞生 在1995年前后,当时世界上的主流带宽为28.8Kbps,现在世界平均下载带宽为21.9Mbps(数据来源于http://www.netind ...

  7. 第十五章:Python の Web开发基础 (二) JavaScript与DOM

    本課主題 JavaScript 介绍 DOM 介绍 JavaScript 介绍 JavaScript 是一门编程语言,它可以让网页动起来的,JavaScript 的变量有两种,一个是局部变量:一个是全 ...

  8. javascript快速入门22--Ajax简介

    Ajax是什么? 首先,Ajax是什么?一个很酷的新兴词汇!仅仅是某种早就有了的技术的一种新说法而已! Ajax是指一种创建交互式网页应用的网页开发技术.要谈到网页应用程序,则必须从WEB的历史来讲: ...

  9. javascript快速入门7--ECMAScript语法基础

    ECMAScript的基础概念 熟悉Java.C和Perl这些语言的开发者会发现ECMAScript的语法很容易掌握,因为它借用了这些语言的语法.Java和ECMAScript有一些关键语法特性相同, ...

随机推荐

  1. java里equals和hashCode之间什么关系

    如果要比较实际内存中的内容,那就要用equals方法,但是!!! 如果是你自己定义的一个类,比较自定义类用equals和==是一样的,都是比较句柄地址,因为自定义的类是继承于object,而objec ...

  2. 使用Javax.mail 发送邮件

    使用Javax.mail 发送邮件 详细说明都在代码中: 引入依赖  <!--sun定义的一套接收.发送电子邮件的API-->    <dependency>      < ...

  3. MySQL 增删查改 必知必会

    MySQL 数据库中的基础操作 3.表的修改 对表的表名.字段.字段类型.字段长度.约束等进行修改. 3.1 表的名称修改 -- 语法: ALTER TABLE 库名.表名 RENAME TO 新表名 ...

  4. JVM—01

    目录 1.1 JVM系统架构图 2.1 类加载器 2.1.1 双亲委派机制 2.1.2 沙箱安全机制 3.1 Native 4.1 PC寄存器 1.1 JVM系统架构图 JVM是什么? JVM是Jav ...

  5. HTML语言基本单词与css基本单词

    DOCTYPE  文档     html 网页     head 头部   body 主体   title 题目   p 段落    color 颜色    style 样式    backgroun ...

  6. 解放生产力:Spring Boot的注解校验

    关于对象入参的校验,我们可能第一个想到的就是在Controller层或者Service层增加很多if else的判断,如: if (user.getPassword() == "" ...

  7. 2020重新出发,NOSQL,redis高并发系统的分析和设计

    高并发系统的分析和设计 任何系统都不是独立于业务进行开发的,真正的系统是为了实现业务而开发的,所以开发高并发网站抢购时,都应该先分析业务需求和实际的场景,在完善这些需求之后才能进入系统开发阶段. 没有 ...

  8. Java中构建长字符串的四种模式

    回字有四种写法,构建字符串也有四种方式. 用+号最快,第二第三种可读性好,第四种是log4j自有的.下面请见代码: package logbackCfg; import java.text.Messa ...

  9. Linux/Unix Terminal中文件/目录的颜色各代表什么意思?

    注意:console/terminal中文件目录的颜色设置是可以更改的,故环境不同颜色就可能不一样. 下面是我所用终端的颜色示例: 颜色说明: 白色:普通文件 紫色:目录 红色:有问题的链接文件 蓝绿 ...

  10. 关于Vue的那些事儿

    Vue 渐进式框架 众前端周知,Vue是一套用于构建用户界面的渐进式框架,自底向上逐层应用,关注视图层.那我们就来说道说道: 渐进式:声明式渲染->组件系统->客户端路由(router)- ...