JavaScript 魔法入门 - 前言

前情提要

那天窗外微微透点薄光,听到门外传来了些许奇妙的声响,走到门外看到地板上掉落一张纸。
https://ithelp.ithome.com.tw/upload/images/20210914/20139066n8foLuszat.png
拿起了那张纸:「是谁一大早乱丢垃圾?(╬☉д⊙)」

拿去垃圾桶的途中,卡片好像有了生命一样动了起来,转瞬间,我感觉到自己的身体起了异常的变化。

「我...我好像拥有魔力了?」

望着手上淡淡的微光,情不自禁地笑了起来:「不愧是我,一定是这世界的主角吧。(〃∀〃)」

殊不知,笑了不久後,脑海响起了一句声响:
「少年欸,你知道魔力总量要透过学习 JavaScript 魔法入门才能增长吗?你现在的魔力大概连一只蚂蚁都不如吧!」

蛤,逼不得已,只好开始照着入学申请书的指引,开启了一条修炼 JavaScript 魔法的不归路。


真 - 前言

这次铁人赛的参赛主题,反覆思索了数次,刚好有机会成为六角学院 JavaScript 新课程的助教,当助教时常常会统整一些小重点给同学,并且累积了不少课程笔记,藉由这个契机,让自己慢慢产生一点信心,虽然是小菜鸟,但还是希望能藉由自己的力量帮助一些新手同学了解 JavaScript。

在写作文章时,会分为入门与中阶,入门的地方会简单讲解基础观念,而中阶会等到入门学习完後才会补上,中阶会补充一些不熟悉容易出现奇怪错误的知识点,最後也会有实作题。

接下来就让我们来了解怎麽使用 VSCode 开始撰写 JavaScript 吧!

步骤一、建 js 档案
首先我们要新增一个副档名为 js 的档案:
https://ithelp.ithome.com.tw/upload/images/20210914/20139066EjH2RtP0fn.png

步骤二、引入 js 档案
接着在 index.html </body> 标签上方透过 script 标签的 src 属性,放入 JavaScript 档案路径,在输入路径时可以透过输入斜线/的方式,编辑器就会跳出下拉式选单,提醒你拥有哪些档案,在选取想要放置的档案即可,透过这个小技巧,可以避免输入路径错误!
https://ithelp.ithome.com.tw/upload/images/20210914/201390661p4Og1Wqqm.png
要怎麽知道有没有引入成功呢?

步骤三、测试是否引入成功
透过在 js 档案输入以下弹跳式视窗指令:

alert('Hello World!!');

打开浏览器後跳出:
https://ithelp.ithome.com.tw/upload/images/20210914/20139066ApBBoWTlrZ.png
这样就成功罗!

後续的文章会很常用到开发人员工具去测试,底下补充开发人员工具使用的方式。


开发人员工具 Console 使用方式

如果看到文章出现程序码,想透过开发人员工具查看是否会报错时:
(范例以 Google Chrome 浏览器操作)

步骤一、点击滑鼠左键,选取检查
https://ithelp.ithome.com.tw/upload/images/20210914/20139066AcdEckAL8Z.png
步骤二、点击 Console
https://ithelp.ithome.com.tw/upload/images/20210914/20139066Pom3t7wAgf.png

步骤三、将测试用程序码贴进去
测试用程序码

let a = 1;
let a = 2; 

结果:
https://ithelp.ithome.com.tw/upload/images/20210914/20139066cAPtLyCnqr.png

最後想补充一点关於 Google Chrome 的小知识,如果尝试将两笔分开贴上会发现,结果与上方不同。

结果:
https://ithelp.ithome.com.tw/upload/images/20210914/20139066AiZtZcKMT4.png
查询 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 篇

day25 矮额是callback,把它变成flow好了 简单的callbackFlow

终於写道flow的最後一篇了 尽管我们在自己的开发上,能够高兴地写coroutine和suspend...

Day21 xib传值的小教室2

接续昨天。 到到二个页面的程序码中,新增一字串变数,也在生命周期中,使此变数会等於第二页的文字格变数...

【C# 群益 API 开发教学】帐号登入、取得下单帐号教学 #CH2 (附范例)

群益 API 是利用自己开发的程序,结合群益 API 在群益券商下单的一种方式,通常是做程序交易下单...

Day14 - 结果今天只做小蛇,小蛇还不贪

class Snake { constructor() { // 蛇头位子 this.head = ...

D19 - 彭彭的课程# Python 文字档案的读取和储存(1)

最近看了地狱厨房 觉得好看!!! 里面一堆肉看起来超好吃的XD 今天终於进入汇入档案的部份 连结:h...