Skip to content

Instantly share code, notes, and snippets.

@quietlynn
Forked from eccstartup/js01.md
Last active October 17, 2017 08:20
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save quietlynn/0492ac8e71089709d1d3 to your computer and use it in GitHub Desktop.
Save quietlynn/0492ac8e71089709d1d3 to your computer and use it in GitHub Desktop.

##Javascript

###预习

关于 JS 环境的配置请参考 https://plus.google.com/117239089659078825668/posts/jDkwn5mWdWJ

需要一个可以执行JS的环境(REPL)才能继续下面的学习。

###Hello, world

console.log("Hello, world!");

这里 console.log(...) 可以理解成在打印 ... 的值。

其中 ... 可以是文字 "Hello" 也可以是整数 9.

通过这句简单的语句,我们首先明白 console.log() 可以用于打印,或者说输出内容

然后,我们可以知道 JS能处理文字和数字

最后我们特别注意一句语句由分号;结束

###基本类型:数和文本

所谓数据类型,就是编程语言能够处理的基本单元啦,比如文本(字符串,String)和整数(数,Number

括号内为正式名称

字符串的说法是指一串字符…… "Hello" 包含 5 个字符,两个引号之间的就是字符串的内容。

引号里面也可以有中文的,比如"你好"

console.log("你好");

数(Number)类型包括整数和非整数……

3.14 和 9 的类型是一样的。JS 不区分整数和小数,无论整数或者浮点数都统称为数。

整数是可以进行数学运算的,嗯…… console.log(1 + 2);

但是这个也不严格是数学运算啦……准确来说应该是整数或者浮点数运算吧,有精度限制。

###重新考虑 console.log

现在我们回过头来再考虑一下 console.log(...);

它并不是简单的打印括号内的所有内容。它也只是能处理一些基本类型而已……比如数或者字符串。

console.log(1+2) 的场合,这里先计算了括号中的内容,数相加仍然是数,然后 console. log 只是输出了结果。

在JS中, 1+2 和 "1+2" 有明显不同。前者是两个数相加,后者是3个字符组成的字符串

###数的运算

JS中数的运算包括 + - * / ,对应加减乘除。

数运算的结果仍然是数,可以再参与其他运算,如 (1 + 2) * 3

数中比较特殊的是 Infinity 和 -Infinity ,分别是正负无穷大

不一定是数学意义上的无穷大,也可能只是太大超出处理范围

(有人可能会问,那有没有无穷小呢?答案是有的,就是 0 (请回忆之前讨论的精度问题))

还有一个特殊的值是 NaN(读作 Not a Number)。尽管读作“不是数”,但是NaN的类型也是数。

0/0 的结果是 NaN,或者转换为数失败的场合也强制作为 NaN(见下下节)

NaN 与任何数运算结果都是 NaN。

###字符串连接

+ 除了进行加法运算以外,还可以进行字符串的连接。比如 console.log("你好" + "世界");

这里的字符串连接与加法没有任何共同点,可以认为只是碰巧也写作 + 而已。

如果碰到字符串和数相加的情况呢?应该选择哪一种呢?显然有意义的只有把数转成字符串再相连接

如: console.log("今天的气温是" + 33 + "摄氏度");

这里数字被自动转换为表示数字的字符串(33 转换为 "33")。

###字符串转换为数

但如果是 - 的情况呢?显然字符串不能相减。

如: console.log("3" - "1")

遇到这种情况, JS 做出的决定是把字符串转换为数,所以结果为2。注意是数2,不是字符串"2".

转换失败的场合,强制作为NaN处理,如 "你好" - "世界" 结果为 NaN。

JS 的 - * / 与数学类似,无论两边是什么类型,都按照数来计算,不是数的转换为数。

只有 + 例外,在至少有一边是字符串的时候是连接(可能两个都是字符串,也可能只有一边是),而两边都是数的时候则是加法。

对于任意类型, - * / 的运算法则不变。只有 + 是特殊的。

实际应用

有了数和字符串就可以做很多事,比如把 JS 当计算器用

系统地学习类型知识是有必要的,但如果急着操作网页,不学也不是不行啦

习题

接下来想要让大家试试看用 JS 计算一点东西,比如说……这里菊苣的比例

假设60人中有 12 人是菊苣,要求输出菊苣的百分比

可以先计算小数,然后想想怎么转换为百分比

答案是: console.log(12 / 60 * 100 + "%");

这里先计算 12/60,再乘以100转换为百分数,最后连接上"%"输出("%"当然只有装饰作用)。

注意这里的 +是连接。

变量

变量可以存放一个值……这个值是几种类型中的一种

其语法是 var a = 9; 这样的

声明了一个变量 a ,存放的值为 9

在有了这句话的前提下,计算 a/3 结果是3,相当于把 a 的值取出

var b = 1 + 2; 的情况下, b 的值是 3 ,不是算术式 1 + 2 也不是字符串 "1 + 2"

利用这个可以存储一部分计算结果,在进行下一步运算时利用变量代替数。

变量当然也能存储字符串,如 var name = "Tom"; 然后 console.log("Hello, " + name);

变量的值可以更改,所以被称为变量

b = 3 的场合,改变 b 的值为3

想象这里的等号是 b ← 3 ,而非数学上的相等,读作赋值。

b = b + 1; 的场合, b 存储的值增加1,并非判断相等

变量练习

用 total 变量保存总人数(这里是62了吧?),然后用 juju 保存菊苣人数(假设12),计算菊苣的比例

(不要纠结百分比,小数也可以)

答案

var total = 62;
var juju = 12;
console.log(juju / total);

假设上面的代码执行过以后,又来了3人,其中1人是菊苣,要求修改变量的值(用赋值语句 =,不是重新声明),然后再输出新的菊苣比例

请问怎么做?

(在以上代码之后,再运行或者添加下面的这段代码。也就是说假设变量已经定义好并且有初始值的情况下,再修改变量。)

total = total + 3;
juju = juju + 1;
console.log(juju / total);

这里要注意 juju = juju + 1 也可以简写为 juju += 1 ,读作 juju 增加 1

也可以再简写为 juju++ ,读作juju递增。也有人反对使用 ++ ,说看起来太费劲,不过这是后话了

有时候,不修改变量的值而直接参与运算(比如 console.log((juju + 1) / (total + 3))),也是可取的。实际编写过程中请采用自己觉得适合的方案吧

一般来说,如果之后还有用,那么可以保存到变量中。

亲切的结束语

那么各位,今天大概就到这里了。稍后会有作业布置

可能进度比较慢?和大家预想的不一样?

嘛,耐心耐心……

虽然今天花费了不少时间,但是我们已经弄清大部分关于数字和字符串的坑了……真是可喜可贺

作业

这次的作业因为网络问题,推迟了一点布置。作业的完成时间是1周。即使还没到1周就进行了下一次交流,作业的完成时间仍然不变,为1周。

作业不需要通过任何方式提交,但可能在下次交流时会要求大家分享自己的学习成果。

作业1: 摄氏度转换为华氏度

编写程序计算 39 摄氏度等于多少华氏度。要求将摄氏度的值保存到变量中,然后在计算公式中使用变量。输出的结果范例:

39 摄氏度等于 ? 华氏度。

其中 ? 的地方需要替换为正确答案。可以看到,需要连接字符串和数字以实现这样的文字输出。

关于计算公式,请自行搜索。

作业2: 交换两个变量的值

假设alice有 8 个苹果,而 bob 只有 5 个。他们互相交换所有的苹果,然后请问alicebob分别有几个苹果?

这个作业要求用alicebob两个变量存放苹果数量,然后输出初始的各自苹果数量。在程序运行的时候交换两个变量的值,然后再输出一次。

这样是不行的:

alice = bob;
bob = alice;

大家可以去运行一下,就知道为什么不行了。请记住 = 用于改变变量的值。一旦经过改变,变量变为存储新的值,而忘记了原有的值。

程序执行有顺序,并不能同时执行两条语句。需要用其他的方法来交换。

实在想不出的情况,请上网搜索交换两个变量的值。

作业3:JS作为计算器

大家也看到了, JS 可以作为计算器使用。请大家尝试用 JS 做一些简单的运算,或者解决一些实际问题。

以下问题仅供参考:

  • 使用 JS 计算一年有多少秒。简单的乘法。
  • 进一步,假设自己写一行代码需要17秒,那么一年能写多少行代码?
  • 愚蠢的人类需要吃饭睡觉休息,不能像高阶生物那样全年不休地写代码。
  • 请估算在有休息的情况下一名普通人类(以自己为例)能写多少代码。
  • (人类以外请跳过上面一行)
  • 上网搜索 Linux 内核的代码行数。计算一下一个人独立完成 Linux 内核需要几年?
  • 使用JS计算来估算 Linux 的参与人数,再与网上的统计数据对照。

(也可以是任意生活中遇到的实际问题或感兴趣的其他问题。)

参考资料

推荐教材1: JavaScript: The Good Parts. (俗称蝴蝶书)

推荐教材2: JavaScript: The Definitive Guide (俗称犀牛书)

警告:推荐教材2内容过多,不建议初学者通读,只建议作为参考书使用。自认为水平已经很高了,可以无视此警告。

但,无论水平多高,读这本书应该都会受益。

免责声明:本人并未阅读过推荐教材中的任何一个字母(除封面外),不保证推荐教材不存在错误和误导,不保证该教程适合所有人。

如果被坑了,请不要哭着找妈妈。

几点补充

  1. Learn JavaScript, not just jQuery.
  2. 不要急着做大事情,建议先打好基础,对于将来学习帮助比较大。
  3. 如果不是带着批判眼光的话, w3school 尽量一眼都别看。尤其别看中文版。
  4. 学点英语对于将来查资料会有帮助的。 StackOverflow 是个好网站,可以多利用。
  5. 对于什么事情不确定的话,在之前搭建的 JS 环境里执行一遍,眼见为实。
  6. 不要轻信博客、问答类社区、个人网站。对于非常非常具体的语法可以参考这种来源, 但学习方法、编程规范和设计模式等主观性很强的内容,真的别太盲从。
@ncwhale
Copy link

ncwhale commented May 31, 2014

https://gist.github.com/ncwhale/3a759baf227e72bd0dcd

交作业喵~

请不要在意奇怪的语法问题喵

@OlingCat
Copy link

OlingCat commented Jun 1, 2014

@Anebrithien
Copy link

作业什么的:https://gist.github.com/Anebrithien/6ab4b5b057aeb7415afc
在命令行里运行没错,写上去就把console写成consloe了,哎……

@chen37106
Copy link

@RasinGue
Copy link

真.迟到的作业
https://gist.github.com/RasinGue/a1c02e9c643f10f28611

不好意思><

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment