那天窗外微微透点薄光,听到门外传来了些许奇妙的声响,走到门外看到地板上掉落一张纸。
拿起了那张纸:「是谁一大早乱丢垃圾?(╬☉д⊙)」
拿去垃圾桶的途中,卡片好像有了生命一样动了起来,转瞬间,我感觉到自己的身体起了异常的变化。
「我...我好像拥有魔力了?」
望着手上淡淡的微光,情不自禁地笑了起来:「不愧是我,一定是这世界的主角吧。(〃∀〃)」
殊不知,笑了不久後,脑海响起了一句声响:
「少年欸,你知道魔力总量要透过学习 JavaScript 魔法入门才能增长吗?你现在的魔力大概连一只蚂蚁都不如吧!」
蛤,逼不得已,只好开始照着入学申请书的指引,开启了一条修炼 JavaScript 魔法的不归路。
这次铁人赛的参赛主题,反覆思索了数次,刚好有机会成为六角学院 JavaScript 新课程的助教,当助教时常常会统整一些小重点给同学,并且累积了不少课程笔记,藉由这个契机,让自己慢慢产生一点信心,虽然是小菜鸟,但还是希望能藉由自己的力量帮助一些新手同学了解 JavaScript。
在写作文章时,会分为入门与中阶,入门的地方会简单讲解基础观念,而中阶会等到入门学习完後才会补上,中阶会补充一些不熟悉容易出现奇怪错误的知识点,最後也会有实作题。
接下来就让我们来了解怎麽使用 VSCode 开始撰写 JavaScript 吧!
步骤一、建 js 档案
首先我们要新增一个副档名为 js 的档案:
步骤二、引入 js 档案
接着在 index.html </body>
标签上方透过 script 标签的 src 属性,放入 JavaScript 档案路径,在输入路径时可以透过输入斜线/的方式,编辑器就会跳出下拉式选单,提醒你拥有哪些档案,在选取想要放置的档案即可,透过这个小技巧,可以避免输入路径错误!
要怎麽知道有没有引入成功呢?
步骤三、测试是否引入成功
透过在 js 档案输入以下弹跳式视窗指令:
alert('Hello World!!');
打开浏览器後跳出:
这样就成功罗!
後续的文章会很常用到开发人员工具去测试,底下补充开发人员工具使用的方式。
如果看到文章出现程序码,想透过开发人员工具查看是否会报错时:
(范例以 Google Chrome 浏览器操作)
步骤一、点击滑鼠左键,选取检查
步骤二、点击 Console
步骤三、将测试用程序码贴进去
测试用程序码
let a = 1;
let a = 2;
结果:
最後想补充一点关於 Google Chrome 的小知识,如果尝试将两笔分开贴上会发现,结果与上方不同。
结果:
查询 Chrome 相关文件会看到:
Support for let and class redeclarations in the Console
Support for const redeclarations in the Console
在开发人员工具直接测试,如果不同行使用 let 、 const 宣告,并不会报错,但同一行一起输入会。
所以如果在测试重复宣告时,建议都将内容一次性贴入开发人员工具 Console 内。
更详细的文件内容欢迎参考下方资料:
Chrome 相关文件
https://developer.chrome.com/blog/new-in-devtools-80/#redeclarations
https://developer.chrome.com/blog/new-in-devtools-92/#const-redeclaration
最後,让我们开始透过 JavaScript 入门来累积魔力总量吧!
<<: Day15:图形搜寻-广度优先搜寻(breadth-first search)
>>: 【Day15】AutoVC 实作 - Tensorflow 篇
终於写道flow的最後一篇了 尽管我们在自己的开发上,能够高兴地写coroutine和suspend...
接续昨天。 到到二个页面的程序码中,新增一字串变数,也在生命周期中,使此变数会等於第二页的文字格变数...
群益 API 是利用自己开发的程序,结合群益 API 在群益券商下单的一种方式,通常是做程序交易下单...
class Snake { constructor() { // 蛇头位子 this.head = ...
最近看了地狱厨房 觉得好看!!! 里面一堆肉看起来超好吃的XD 今天终於进入汇入档案的部份 连结:h...