iT邦幫忙

2022 iThome 鐵人賽

DAY 1
9

今天是第一天, 也是我唯一一篇有提前準備好的文章...


main.js 這份檔案裡面,有一段 JavaScript 的程式碼長這樣:

// main.js
var msg = 'I Love Holiday!';

console.log('msg: ', msg)

而如果想要看到 console.log() 的執行結果,我想我會近乎反射地執行下列的動作:
(PS. 我真的覺得這句話好羞恥我好抱歉為什麼我要這麼寫但是刪掉感覺很對不起留言所以還是加回來...)

  1. 在與 main.js 同一個層級的資料夾中建立一份 index.html 檔案
  2. 用習慣的 IDE(這邊使用 VS Code)打開 index.html 後
  3. 輸入 ! 加上 tab 快速建立一份基本的 HTML 檔案
  4. 在 index.html 檔裡面用 <script src="./main.js"></script>mian.js 引入
  5. 雙擊 index.html 來開啟預設的瀏覽器頁面
  6. 在瀏覽器頁面中按下 f12cmd(ctrl)+shit+c 將開發者工具打開,切換到 主控台(Console) 的分頁中就可以看到執行的結果

瀏覽器

打開瀏覽器去看被 index.html 所引入的 main.js 執行結果的這個行為,同時也代表著我透過瀏覽器去執行了 main.js 這份檔案。

有沒有什麼方法能讓我們用瀏覽器以外的方式,去執行 main.js 這份檔案呢?

在重現瀏覽器帶來的成果之前,要先了解為什麼瀏覽器能做到這件事。

在本次使用的瀏覽器 Google Chrome 中,是透過一個叫做 V8 的 JavaScript 引擎來執行 JavaScript 的。

關於 V8 的說明可以從官方的文件上看到介紹:

V8 是由估狗使用 C++ 所開發的開源高效能的 JavaScript、WebAssembly 引擎,被用在 Chrome、Node.js 等地方。

V8 is Google’s open source high-performance JavaScript and WebAssembly engine, written in C++. It is used in Chrome and in Node.js, among others.

從這邊我們可以得知除了瀏覽器(Chrome)之外,還有一個叫 Node.js 的東西也用了相同的引擎來解析 JavaScript。

Node.js

我們可以從閱讀 Node.js 官方文件的介紹得知:

Node.js 是一個開源且跨平台的 JavaScript 執行環境

Node.js is an open-source and cross-platform JavaScript runtime environment.

Node.js 在瀏覽器以外的地方使用了 Google Chrome 的 V8 JavaScript 引擎來執行 JavaScript。

It is a popular tool for almost any kind of project!
Node.js runs the V8 JavaScript engine, the core of Google Chrome, outside of the browser. This allows Node.js to be very performant.

Node.js 可以讓前端開發者使用相同的語言(JavaScript),進行伺服器端(後端、server-side)的開發。

Node.js has a unique advantage because millions of frontend developers that write JavaScript for the browser are now able to write the server-side code in addition to the client-side code without the need to learn a completely different language.

歷史

從 Node.js 官方文件的歷史介紹可以得知 Node.js 的緣起與 server-side javascript 的發展息息相關。

在以前 Web 1.0 的時代,網站的目的大多以靜態頁面的資訊呈現為主,使用者在網站上的行為就是瀏覽頁面所提供的資訊。

而到了 Web 2.0 的時代,使用者在網站上可以做到的行為已不單單只是瀏覽了,而是能與網站進行互動,像是社群網站、部落格等等,使用者可以在網站上與其他的使用者進行互動、交流。

為了滿足網站中的這些互動需求,出現了 JavaScript 引擎來強化瀏覽器對 JavaScript 的處理效能,來提供使用者更好的互動體驗,而其中一個 JavaScript Engine 便是 V8 Engine。

Node.js 使用了為了增進網頁體驗而開發出來的 V8 Engine 作為核心,除了讓開發者可以在瀏覽器以外的地方執行 JavaScript 之外,更因採用了 V8 引擎而讓 Node.js 在處理 JavaScript 的編譯上有了大幅的改善。

安裝 node.js

前往 node.js 官方網站安裝 LTS(長期維護的穩定版)版本的即可。
安裝完成後打開終端機輸入 node -v 確認是否安裝成功。

看到這個的話恭喜你,成功的安裝了 node.js

用 node.js 執行 js

透過終端機移動到與 main.js 同層級的資料夾中,輸入 node main.js 來執行 js,可以看到以下的畫面:

如此一來就能成功地在瀏覽器以外的地方執行了 js!

參考文章

  • link - What Is Node.js and Why You Should Use It
  • link - Explain V8 engine in Node.js
  • link -「Node.js系列」深入淺出講解 V8 引擎如何執行 JavaScript 程式碼

下一篇
Day02 - 因 Node 而存在的 npm
系列文
因為拖延症而沒有好好準備有系統性文章架構的我只能靠一天一筆記來贖罪30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
4
alpha
iT邦新手 5 級 ‧ 2022-09-16 09:36:13

我想我會近乎反射的去點贊這篇文

謝謝...不...先不要...

不明 檢舉
【**此則訊息已被站方移除**】
5
Ray
iT邦研究生 4 級 ‧ 2022-09-16 09:43:17

樓上真巧我也會近乎反射的去點讚

no.......謝謝...

4
孤獨一隻雞
iT邦研究生 5 級 ‧ 2022-09-16 09:49:57

樓上上好巧我也會久違的出沒然後近乎反射的去點讚

雞哥!!!!!!TAT

Calvin iT邦新手 4 級 ‧ 2022-09-16 19:46:35 檢舉

2
雷N
iT邦研究生 1 級 ‧ 2022-09-16 10:03:10

樓上真巧我也會近乎反射的去點讚

感謝閱讀!!!

2
json_liang
iT邦研究生 5 級 ‧ 2022-09-16 10:32:32

這篇的內容太棒 讓我近乎反射的去點讚

不...QAQ 承擔不起...謝謝您的捧場!!!

2
吠吠
iT邦新手 3 級 ‧ 2022-09-16 13:49:34

新手菜雞表示受用 讓人近乎反射的一看再看 回味無窮

笑死你夠了ㄛ假新手

2
heiyuyu
iT邦新手 5 級 ‧ 2022-09-16 19:16:47

好喜歡系列名稱XDDD簡直說出了我的心情

在開窗邊緣來回試探

1
ashramwen
iT邦新手 5 級 ‧ 2022-09-17 12:10:17

讓人近乎反射的受用無窮

哭R...TAT

1
一顆蘋果熊
iT邦新手 5 級 ‧ 2022-09-17 13:23:42

回過神來才發現已經點讚

瓜張欸你笑死

帥恩 iT邦新手 5 級 ‧ 2022-09-20 16:42:36 檢舉

你什麼時候才要回鍋

是帥恩!!!!(尖叫!!)啊~帥恩留言給我耶啊啊啊!!!!!!!!!
it邦好爛喔都沒有通知我~ T__T

1
harry xie
iT邦研究生 1 級 ‧ 2022-09-18 11:43:21

怎麼大家都那麼巧 XD 我是發現上了熱門文章進來近乎反射的去點讚的

感謝閱讀與反射!!!TAT

1
轉圈圈
iT邦新手 5 級 ‧ 2022-09-20 09:03:34

我近乎反射地按讚追蹤訂閱

圈圈你怎麼沒感覺

1
帥恩
iT邦新手 5 級 ‧ 2022-09-20 10:30:28

樓上真巧我近乎反射地辦帳號、按讚、追蹤、訂閱
優質好文必須推!

笑死,謝謝帥恩 XDD

0
husky16
iT邦新手 5 級 ‧ 2022-09-20 11:51:30

樓上真巧我也近乎反射地辦帳號、按讚、追蹤、訂閱
優質好文必須推!

僥倖能得哈博士青睞實屬萬幸...謝謝您...

husky16 iT邦新手 5 級 ‧ 2022-09-22 14:53:51 檢舉

所以到底找到為什麼要在local執行nodeJs的理由了沒?

因為在前端的開發中有用到許多套件是從 npm 來的,而為了使用這些套件所需的環境就是 node.js,它會將框架 vue、SCSS、jsx、tsx 這些東西編譯成瀏覽器能看懂的 HTML、CSS、JS。

在開發時也能透過 npm run dev 將 node.js 作為一個虛擬的伺服器架設起來,讓我們看到專案編譯後的結果。

雖然是現學現賣ㄉ...希望這樣有算回答到

我要留言

立即登入留言