2c:null 2d:["$","title",null,{"children":"Observable 简单中文教程 | GnimOay | Observable"}] 32:[{"id":"efe4a7ad6f61364787d78a41fe10fb88e973852571c5024e4dfda5852073819ba9426c99319eb4d709b30a8f3497dbc519e79d9690bb5e683bf937c53e617702","href":"https://static.observableusercontent.com/files/efe4a7ad6f61364787d78a41fe10fb88e973852571c5024e4dfda5852073819ba9426c99319eb4d709b30a8f3497dbc519e79d9690bb5e683bf937c53e617702","name":"Snipaste_2020-03-18_22-12-09.png","type":"image/png","lastModified":1584565970015.208,"size":120774}] 30:{"id":"9bee34229a552db7","slug":"observable","title":"Observable 简单中文教程","thumbnail":"34a0bccaee7b4350d79d0bf81742e3695b642e0fad26d90f9f694e923b50e97e","access_level":"public","create_time":"$D2020-03-17T11:58:22.768Z","update_time":"$D2021-02-03T08:22:31.219Z","view_time":null,"first_public_time":"$D2020-03-17T12:55:00.442Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"26d48fae205ffe62","login":"gnimoay","name":"GnimOay","avatar_url":"https://avatars-next.observableusercontent.com/79b9cc7dde40573c60d0ca1646cec2d280ec0c69bcd5262fb2336627858a40e3","tier":"starter_2024"},"version":607,"publish_version":607,"role":null,"authored":false,"authors":[{"type":"individual","id":"3ffbfa94b6a22199","login":"gnimoay","name":"GnimOay","avatar_url":"https://avatars-next.observableusercontent.com/79b9cc7dde40573c60d0ca1646cec2d280ec0c69bcd5262fb2336627858a40e3","tier":null}],"members":[{"type":"individual","id":"3ffbfa94b6a22199","login":"gnimoay","name":"GnimOay","avatar_url":"https://avatars-next.observableusercontent.com/79b9cc7dde40573c60d0ca1646cec2d280ec0c69bcd5262fb2336627858a40e3","tier":null,"role":"editor"}],"comments":[{"id":"91ed665428659469","reply_to_id":null,"content":"123","create_time":"$D2024-05-08T16:38:25.521Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"75b5cc24c7ed7e1a","login":"bian-yu-xuan","name":"卞宇轩","avatar_url":"https://avatars-next.observableusercontent.com/685428323428a54cfc8119f47ab218c1d85036866407ee551515a05646ae8225","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Observable 简单中文教程","cells":[{"id":0,"value":"md`# Observable 简单中文教程\n>这是一个面向无编程基础同学的快速入门教程
\n尽管这是一个中文教程, 但一些必要使用英文的地方, 我会使用英文介绍\n\n#### Observable 是什么?\n它是一个在线的 Javascript 编程环境, 但一些小细节与 JS 稍有不同.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`---\n## 基本概念\n
\n### 0.0 变量 Variable\n\n变量 Variable 就是可以被改变的量, 与之对应的是常量 Constant, 常量不能被改变
\n变量常量在代码里写作 var 和 const, 而现代的 Javascript 会用 let 描述变量.\n\nlet const var 等, 被称作关键字\n\\`\\`\\`js\n//两个反斜杠后面的内容是注释, 不会被当成代码, 是给你自己看的, 程序会忽略它\n//每句代码后用 ; 符号进行结尾, 暂时把它理解成中文里的句号就行\nlet a=1; //定义变量 a = 1 \nvar b=2; //定义变量 b = 2, 之后忘记 var 就好了, 本教程只使用 let\nconst c=3; //定义常量 c = 3\nlet a=222; // 刚刚已经定义过 a 了, 所以本行代码会报错. 不能重复定义.\n\n// 上面定义好了几个变量与常量, 现在我们可以使用它们.\n//写 a = 的过程称为赋值\na=3; // 重新把 a 赋值为 3\nc=3; // 这是不被允许的, 因为 c 使用 const 定义, 它是常量\nb=a+c; // b赋值为 a+c, 这就是你初中写的方程, 于是 b就会等于 3 + 3 = 6\n\n// 代码是从上到下按顺序执行的\nd = 5; // 因为现在 d 还没有被定义, 所以会报错, let d; 应该写在这行前面. \nlet d; // 定义变量的时候, 也可以不给它赋值, 此时 d 会被自动赋值为 undefined, 表示它的值为未定义\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"md`\n了解了变量与常量, 你就差不多能写代码了.接下来了解一下数据类型/结构`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"md`\n\\`\\`\\`js\nlet num = 3; // 这是数字\nlet str = '你好' // 这是字符串, 使用引号包裹起来, 可以用单引号' 或者双引号\", \nconst str2 = \"hello\" // 两种引号没有区别, 看你喜好, 但不能混用, '这样不行\"\n\n// 下面的是更复杂的数据类型, 列表, 列表里面可以放很多数据, 可以是数字,字符串, 也可以是变量, 或者是其他列表.\nlet list = [3,'你好啊', a]\n\n//你可以用这种方式访问到列表中的元素\nlist[0]; // 列表中的第一个元素,也就是数字 3. 注意, 计数是从0开始的.\nlist[1]; // 第二个元素, 字符串 '你好啊'\nlist[3]; // 这不行, 列表中没有第四个元素, 于是程序会报错\n\\`\\`\\`\n还有其他更复杂的数据类型/结构, 比如字典栈等等, 暂时就不介绍了\n\n
\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"md`### 0.1 函数 function\n\n函数是一段可以被重复使用的代码
\n举个例子, 定义一个叫做 hello 的函数:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"function hello(param) {\n //当使用函数的时候,可以传参数进来, 我们给参数取个名字,就叫 param, 这和给变量取名是一个道理\n console.log('我是 hello 函数', param); // console.log 是浏览器提供的函数, 我们可以随时调用它\n\n /*\n 这是注释的另一种写法, 这样的注释可以写多行, 而 // 后面的注释只能写一行\n\n log 函数会打印你指定的内容, 可以用逗号隔开多个要打印的内容\n 类似 log 这样的自带函数还有很多, 大部分你要做的事情, 都有自带函数可以使用, 那为什么还要写函数? \n 因为有些事情没有自带函数能做, 还有的时候, 同样的代码你需要用到n次, 但你不想写n次\n */\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"md`按一下电脑上的 F12 键, 然后选择如图左侧的 console 栏目`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"FileAttachment(\"Snipaste_2020-03-18_22-12-09.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"md`下面出现了两个新东西, 一对花括号 {}, 还有一个 \\`\\` return \\`\\` 符号
\n这两个东西就在下面的 **块 Block** 章节解释`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"{\n // 点击最右边的运行符号,就会运行本块代码, 也可以使用快捷键 {shift + 回车}\n hello(); // 调用函数时不提供参数\n hello(332); // 提供一个数字 332 作为参数,\n hello('嘿嘿'); // 提供一个字符串作为参数\n return '下面执行了刚刚编写的 hello 函数, 所以能看到 console.log 函数输出的内容';\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"md`---\n## 块 Block\n\n这是 Observable 的基本构成元素, 比如你看到的这些文字就是在一个Block中.
\n你可以在 Block 里面写的东西, 其实只能是代码, 但显示结果可能就是普通文字与图片,甚至视频, 这一点我尽量在接下来的内容里解释明白\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"{\n // 这是一个 Block, 因为用花括号{}包裹起来了, 所以可以写 n 行代码\n // 你能看到上面显示 undefined, 上面部分是 Block 代码执行完成后的返回结果\n // 而这些注释, 就是 Block 的代码\n console.log('有点饿');\n // 因为这段代码没有返回任何东西所以上面显示 undefined(未定义)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"{\n return '👈点我左边空白区域看看'; // 这边返回了一个字符串,所以不会显示 undefined, 就是这么回事\n // 你可以点击 Block 左侧把一个 Block 的代码显示或隐藏起来\n // 这个页面的所有内容都是这样子的, 比如上面的图片还有文字\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"md`每次你点 +, 就能插入一个新的 Block, 比如说你看到的本 Block.
\n 鼠标点击 Block 的左边, 就能显示/隐藏 Block 的代码. \n

\n// 这也是一个 Block, 但是没有花括号 {}
\n  a=now\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"sn`👈请点上面这个 + 号创建一个新的 Block, 然后把方框中内容复制进去, 最后点击右边三角形运行一下\n\n>__现在我们能看到 a 是一个数字, 并且一直在变化, 有点神奇?__ \n_now 是 Observable 提供的一个变量, 类似于浏览器提供的函数. now 代表从 1970-01-01 到现在所经过的毫秒数_ \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"md`\n上面我们定义了变量 a = now. 对, 在不使用花括号的 Block 内, 定义变量不需要写 let 关键字 _(这就是 Observable 和 Javascript 不同的地方)_ . 如果你还记得之前在 __0.0 变量__ 章节, 我们有说过, 一个变量只能定义一次, 那这里为什么没报错? \n\n现在学习一个新概念: 作用域\n\n你在一个使用花括号的 Block 内定义了变量, 那么它的作用域只在该 Block 内 \n而对于一个没有使用花括号的 Block, 它的作用域是整个页面, 于是,你可以再新建一个 Block, 然后输入 a 并运行看看.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"md`👈请点上面这个 + 号创建一个新的 Block`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"md`__这个 Block 并没有 return 任何东西, 为什么会显示数字?__ \n对于不使用花括号的 Block, 里面写的那行代码会被自动 return, 这里的效果与这样写是等价的\n\\`\\`\\`js\n{\nreturn a;\n}\\`\\`\\`\n\n__为什么这次只有数字, 不显示 a = 了?__ \n因为你这次是在使用 a, 而非定义 a, 另外, 你也不能重复定义 a, 否则会报错\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"md`然后变个魔术~~(假的)~~, 把数字变成时间`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"time = new Date(a).toLocaleString()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"md`与花括号内部定义的变量常量不同, 类似于刚刚定义的 a 和 time, 这种不写关键字定义的变量, 他们不是顺序执行的, 你可以在 time 或者 a 定义之前新建一个 Block, 然后输入它们, 程序也能正确运行`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"md`---\n## 类 Class\n... 待更新`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"md`\n---\n## Appendix\n>以下内容可暂时忽略`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"import { sn, note } from '@j-f1/sidenotes'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"