iT邦幫忙

2022 iThome 鐵人賽

DAY 7
0
Modern Web

給心理人的前端網頁開發系列 第 7

[給心理人的前端網頁開發] 07 關卡〇:簡介開發環境

  • 分享至 

  • xImage
  •  

前面我們介紹了寫網頁會用到的語言:HTML、CSS、JavaScript。但其實在寫程式時,有一個前置作業是必須的:也就是準備開發環境。

開發環境是個很廣泛的用詞。比喻來說,為了能夠專心讀書,就會尋找一個安靜的環境像是圖書館。為了能夠方便工作,可能就會找個空間夠大、桌椅夠多的辦公環境。

而開發環境就是指,為了開發程式,需要在電腦上準備好能方便開發的環境。例如作業系統(operate system)、命令列界面 (command line interface, CLI)、文字編輯器(text editor)、整合開發環境 (Integrated Development Environment, IDE)。

為了讓初學者快速進入狀況,這邊只介紹文字編輯器與整合開發環境的部份。

一、文字編輯器

廣義上來說,只要是能透過敲擊鍵盤寫字的軟體,都可以叫做文字編輯器。例如 Word 軟體可以打字,也可以算是廣義的文字編輯器。但 Word 功能很多樣,已經超出文字編輯器的範疇太多,所以通常會被歸類在文書處理軟體。

文字編輯器通常最在意一件事情:就是打字。不管樣式、不管顏色,就是在意打字的體驗。例如 Windows 預設的 notepad、或是台灣人開發的 notepad++,都屬於文字編輯器。

在程式開發中,有一款很多開發者都在使用的軟體:Visual Studio Code,簡稱 VSCode。雖然不是九天玄女唯一指定,但如果要入門前端的話,這款文字編輯器已經非常好用了。

二、整合開發環境

如果說文字編輯器是專注在打字體驗,那整合開發環境 (IDE) 專注的範圍更廣,像是還專注在程式的除錯、編譯與執行。其實現在文字編輯器與整合開發環境的區隔越來越模糊了,只要知道這兩種軟體,都能用來開發程式就好。

順帶一題,微軟旗下有一款號稱地表最強 IDE 的軟體:Visual Studio。若往後有機會繼續寫程式的話,或許有機會接觸到這款軟體。

三、線上開發環境

通常在開發程式、寫網頁時,都會在自己電腦上打開文字編輯器進行開發。但為了程式開發者方便,很多線上服務直接把文字編輯器 / IDE 搬上網頁,讓開發者能直接在網頁上面寫網頁 (有點繞口)。

例如,在 Hello World 範例中使用到的 Codepen,就屬於線上版本的文字編輯器 + IDE。

目前常見的網頁前端開發環境有:

小結

本文介紹了開發程式時必須要的軟體服務:文字編輯器 / IDE / 線上開發環境。先前在 Hello World 範例中,為了讓初學者也能快速上手而使用的 Codepen,就是一種線上開發環境。

明天將開始進入第一關:自己用網頁寫一個自介履歷吧


上一篇
[給心理人的前端網頁開發] 06 關卡〇:簡介 JavaScript
下一篇
[給心理人的前端網頁開發] 08 關卡一:自介履歷的開發環境 - codesandbox
系列文
給心理人的前端網頁開發20
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言