JavaScript 一直以来都被认为是最适合做网页的语言,同时也是公认坑第二多的语言。(什么?坑第一多的语言是哪家?这还用问吗?)
无论您有多努力,总有一天您必定会放弃 JS. 当然,如果您足够努力的话,也许可以坚持到 JS 语言废弃也说不定~
好了,负能量就到这里吧,如果您准备好了,那么就和青色旋律一起开始愉快的 JavaScript 旅途吧?
(此文根据之前JS学习小组的讨论进行整理,类似讨论笔记。)
目录
JS 环境配置
要学习 JS,必须有一个可以运行 JS 的环境。在阅读以下内容之前,请务必配置好自己的 JavaScript 环境。
- Chrome/Firefox 用户可以按一下
F12
,在弹出的窗口中选择 Console (控制台),在那里可以直接运行 JS。 - 各位也可以安装 Node.js (服务端常用的 JS 环境), Linux 请用包管理器安装,而 Windows 用户需要下载安装程序。具体可以看 http://nodejs.org/download/
- 如果是手机用户,或者觉得其他方式太麻烦,可以直接用这个网页,打开就能用: http://repl.it/languages/JavaScript
打开了以后,请试着运行这样一条语句(请复制粘贴):
|
|
如果出现Hello, JavaScript!
字样,则说明已经配置成功了。那么恭喜,赶快进入接下来的教程吧?
Hello, world!
上面执行的那条语句可以算是最简单的 JS 程序之一了。如果您已经学习过了其他类似的语言,那么不妨跳过这一段内容,直接进入下一节吧?或者,如果您对 JS 已经有了最基本的了解,请期待本系列的第二篇。
此处 console.log(...);
的作用是在控制台打印输出...
处的内容。其中...
可以是字符串 "ABC"
也可以是整数 9
. JavaScript 中每句语句以分号 ;
结束。
基本类型:数和文本
数据类型是指编程语言能够处理的基本单元。JS 中常见的类型包括文本(字符串,string)和整数(数,number),括号中为正式名称。
字符串顾名思义就是一串字符,以双引号开始和结束,例如 "Hello"
包含5个字符。中文字符也可以出现在字符串中,例如 "你好"
,但必须使用英文半角双引号。
数包括整数和非整数。 JS 不区分整数和小数类型,无论整数或者浮点数都统称为数。例如
3.14
与 9
均为 number
类型。
表达式和运算
JS 可以进行算术运算,支持 +
, -
, *
, /
运算符,例如表达式 1+2
. 除法的结果不会自动取整,例如 1/2
结果是 0.5
. 算术运算受浮点数精度限制,结果不一定是精确值。
复杂表达式也可以用括号分组,例如 (1 + 2) * 3
结果为 9
. 算术运算的结果必定为
number
类型。
在 console.log(1+2);
时,会先计算括号内的表达式内容,因此结果打印为 3
, 而不是打印 1+2
. 如果需要打印 1+2
, 应该使用字符串 console.log("1+2");
.
数中有特殊值 Infinity
和 -Infinity
对应正负无穷大。如果算术运算结果超出处理范围,返回值可能会是这两个值。同理由于精度限制,如果算数处理的结果非常接近于 0
,则会返回 0
, 不存在无穷小这个说法。
此外,还有特殊值 NaN
表示 Not a Number
(不是数)。例如 0/0
的结果是 NaN
,
不会报错。NaN
也属于 number
类型,尽管读作不是数。此外,其他类型的值转换为数失败的场合也会变成 NaN
值,见下述。
NaN
与任何数进行算术运算的结果均为 NaN
. 此外 NaN !== NaN
(与自身不相等)。
字符串连接
+
除了进行加法运算以外,还可以进行字符串的连接。比如
console.log("青色" + "旋律");
, 此处运算结果是两个字符串相连接,而不是加法。
如遇到字符串与数相连接的情况, JS 会将数转换为字符串再进行操作,例如
console.log("今天的气温是" + 33 + "摄氏度");
此处 33
会被转换为对应的字符串 "33"
,然后再执行连接。
字符串转换为数
但减法的情况下,两边必须都是数才能执行。此时 JS 会将字符串转换为数。例如:
console.log("3" - "1")
会输出数 2
(不是字符串 "2"
)。
此处的执行过程可以理解成两边各自转换为数变成 3 - 1
, 然后再得到 2
.
如果转换失败,则那个值用 NaN
代替,例如 "你好" - 3
变成 NaN - 3
, 结果为 NaN
.
-
, *
, /
三种运算都有此特性,会将两侧的值分别转换为数。这个特性称为“隐式类型转换”。
但 +
的处理是不同的。如果两侧均为数,则会按照加法运算来执行,结果为 number
类型。如果其中至少一侧为字符串,则会隐式转换另一侧为字符串,然后执行连接操作,结果为
string
类型。
JS 作为计算器使用
理解了数、字符串和运算以后,就可以把 JS 作为计算器使用了。例如青色旋律的访客中一共有 60 人,其中 12 人会JS,那么会JS的访客比例是 12 / 60
. 如果需要转换为百分比,需要手动乘以 100
。为了输出美观,可以在后面接上百分比符号的字符串 "%"
.
于是我们得到:
|
|
其中 "%"
是一个字符串,起到装饰作用,并不是数学运算之类的。
大部分的 REPL 不需要 console.log
也能输出表达式的计算值。例如控制台里直接输入
1+2
回车即可输出 3
, 可以方便地计算各种值。但是在完整的 JS 程序里,大部分语句是只会执行不会输出的,需要使用 console.log
等语句来进行输出。
变量
变量可以存放一个值,值的类型可以是数或者字符串等。let a = 42;
声明一个变量 a
,
其值为数 42
.
接下去假如执行表达式 a/3
, 结果是 14
, 相当于把 a 的值取出然后再参与运算。
let b = 1 + 2;
的情况下,b
的值是 3
, 而不是算术式 1 + 2
也不是字符串
"1 + 2"
.
利用这个特性,可以存储一部分运算结果供接下去的运算使用。
变量存储字符串的情况例如 let name = "Tom";
. 此时可以 console.log("Hello, " + name);
.
使用 let
或者 var
(后述)声明的变量可以修改其对应值,称为赋值。赋值语句的语法为
a = 3
, 读作”a赋值为3”,或者 a gets 3
. 这里的等号实际上可以理解成左箭头 ←
,
而不是数学意义上的相等之类的。
b = b + 1;
的执行结果为变量 b
的值增加1. (计算右侧表达式的值,然后赋值给左侧变量).
如果使用 const
代替 let
声明变量,则该变量不能再次赋值。例如 const pi = 3.14;
之后,执行 pi = 3
会报错。也有人将其称为“常量”,但其实 JS 语言中这些仍然属于变量,只是增加了赋值时会报错的检查。
let
和 const
声明的变量具有块作用域,且不可在声明语句之前访问。而另一种 var
声明的变量具有函数作用域,且声明会提升。关于作用域可以参考
这里的说明,这个属于比较高级的话题,系列之后的文章会专门介绍。
青色旋律在此推荐写程序时,变量最好用 const
声明,然后如果之后需要改变值的时候再回头将此处修改为 let
即可。正常的程序中绝大部分变量是不需要修改值的,因此这样能尽早发现一些错误的赋值。
JS 作为弱类型语言,变量本身没有类型,只有值有类型。因此 let a = 0;
之后,仍然可以执行赋值 a = "Hello";
, 而不会报错。 JS 的变量更像是指向一个值的“指针”,而不是一块固定的存储空间之类的。
变量使用举例
假如青色旋律博客当前访客人数为 62, 其中 12 人会 JavaScript. 如果用变量保存并计算其中会 JS 的人数比例,可以有以下代码:
|
|
假设在此之后,又有 3 位新访客,其中 1 位会 JS, 则可以在以上代码之后续写:
|
|
其中 totalVisitors = totalVisitors + 3;
可以简写为 totalVisitors += 3;
, 读作
totalVisitors
增加 3. 此外 visitorsWhoKnowJS = visitorsWhoKnowJS + 1;
可以简写成 visitorsWhoKnowJS++;
, 读作递增,作用为变量值增加 1. 也有人不推荐使用 ++
.
上面的例子中,不一定需要修改变量的值,也可以直接使用变量运算:
|
|
事实上,假如这两个变量使用 const
声明,则只能这样书写。实际编码中请自行选择合适的方式吧。通常来说,假如用 totalVisitors
变量记录当前人数,则推荐用 let
并修改值。但假如运算的结果意义改变了,则推荐使用另一个变量,如
const visitorsWhoDontKnowJS = totalVisitors - visitorsWhoKnowJS;
, 提高可读性。
作业
青色旋律在这里提供一些作业题目以供各位自习使用。作业内容全部为可选,不需要提交。但如果您对于以上的概念是第一次接触,建议还是尽量完成作业。
作业完成后,可以上传至 https://gist.github.com/ ,并将链接贴在下方评论区中。青色旋律会对作业进行批改和反馈。如果有任何问题也可以使用下方评论区提问。
作业的参考答案将会在下一次的系列博文中公布。
除了作业外,也请预习 JS 的各种控制语句,例如 if
, for
, while
等。如果已经有其他语言基础的话,那么请简单复习下就好。下次的内容可不会这么简单了哦?教程会假设各位基本上已经了解过控制语句了,会着重介绍 JS 与其他语言不同的地方,即使是有编程基础的各位应该也能愉快地学习~请继续关注青色旋律博客吧~
那么,下次再见了哦~
作业1: 摄氏度转换为华氏度
编写程序计算 39 摄氏度等于多少华氏度。要求将摄氏度的值保存到变量中,然后在计算公式中使用变量。输出的结果范例:
39 摄氏度等于 ? 华氏度。
其中 ?
的地方需要替换为正确答案。可以看到,需要连接字符串和数字以实现这样的文字输出。
关于计算公式,请自行搜索。
作业2: 交换两个变量的值
假设 alice
有 8 个苹果,而 bob
只有 5 个。他们互相交换所有的苹果,然后请问
alice
和 bob
分别有几个苹果?
这个作业要求用 alice
和 bob
两个变量存放苹果数量,然后输出初始的各自苹果数量。在程序运行的时候交换两个变量的值,然后再输出一次。
这样是不行的:
alice = bob;
bob = alice;
各位可以去运行一下,就知道为什么不行了。请记住 =
用于改变变量的值。一旦经过改变,变量变为存储新的值,而忘记了原有的值。
程序执行有顺序,并不能同时执行两条语句。需要用其他的方法来交换。
实在想不出的情况,请上网搜索交换两个变量的值。
作业3:JS作为计算器
上面已经说过了, JS 可以作为计算器使用。请尝试用 JS 做一些简单的运算,或者解决一些实际问题。
以下问题仅供参考:
- 使用 JS 计算一年有多少秒。简单的乘法。
- 进一步,假设自己写一行代码需要17秒,那么一年能写多少行代码?
- 愚蠢的人类需要吃饭睡觉休息,不能像高阶生物那样全年不休地写代码。
- 请估算在有休息的情况下一名普通人类(以自己为例)能写多少代码。
- (人类以外请跳过上面一行)
- 上网搜索 Linux 内核的代码行数。计算一下一个人独立完成 Linux 内核需要几年?
- 使用 JS 计算来估算 Linux 的参与人数,再与网上的统计数据对照。
(也可以是任意生活中遇到的实际问题或感兴趣的其他问题。)
各位,作业请加油~如果完成了别忘记在评论区提交作业哦。
本作品是青色旋律原创作品,采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。转载请注明来自 青色旋律,链接至 此页面 并使用相同授权协议。如需更宽松的授权协议,请联系青色旋律。