iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 2
1
Modern Web

JavaScript初心者ノ研究日記。系列 第 2

二日目:在VScode 撰寫JavaScript。插件。Chrome檢查工具。

大家安 我是SONYKO  ٩(ˊωˋ*)و✧
今天進入第二天~

  
相信大家都知道撰寫程式必須用「文字編輯器」來撰寫,今天就簡單的來介紹一下目前很多開發者在使用的編輯器 「 VScode 」。

每次都這樣稱他,但他其實叫做 Visual Studio Code 。是由微軟開發,支援Window、Mac 及Linux 的「免費程式碼編輯器」。其於介紹詳見wiki ((
看到關鍵字了嗎? 免費 !!!!!

來,下載網址:
https://code.visualstudio.com/

  

啊我英文很爛,VSCode怎麼用啊?

啓動時是英文介面,沒關係我英文也很爛。但VScode會那麼多人用的其中一個原因是因為「他可以下載許多方便的插件」。當然今天也有讓你的面版中文化的插件,這樣就不怕不怕惹。
https://ithelp.ithome.com.tw/upload/images/20200915/20129506xyy4nJfWvC.png
  
  
  
這邊來分享一些(對初學者有幫助的)便利的插件:
  

  • Chinese (Traditional) Language Pack for Visual Studio Code
      
    怕英文的裝一下,想學日文的可以裝日文版(在搜尋欄打Japanese )
    裝完重開你的VScode就會變中文哩。
      

  • cdnjs
      
    初學的朋友可能有人不知道載入cdn要幹嘛 ,恩... 簡單的解釋就是,不知道你有沒有聽過bootstrap、jQuery、fontAwsome 這些東西,你要載入這些套件、框架來用的話,一定要貼上他的cdn 你才能用他。
    所以這個插件方便的地方在於,你不用到處去搜官網 找人家的cdn 複製貼上,直接用VScode 搜尋cdn,可以省下不少時間(2分鐘左右
      

  • Bracket Pair Colorizer
      
    今天寫扣當然會運作很重要,but !! 美觀也很重要。code 寫太醜會被笑(((
    這個插件會有對齊的線 ( ? ) 讓你可以找到自己的 括號 的開頭跟結尾在哪裡。
    以後可能會寫到很長很長的code ,如果又亂爆 這樣在debug 的時候可能會崩潰,所以各位水水們 可以下載這個插件,讓你的code 變美麗 心情也變美麗。
      

  • Live Server

    這個很重要,必裝。今天寫了一段程式碼,我們要怎麼看他到底 長什麼樣子、會不會動之類的,就可以使用這個 Live Server 來看你的code 。 因為當你存檔時,它就會立即刷新網頁,渲染你寫的code 。所以前端很少有「忘記存檔」的問題,因為你要看你的網頁現在長怎樣就會用這種即時顯示網頁的插件,邊存檔邊寫扣。
      
      
      
    另外還有像是:
      

  • jQuery Code Snippets
    讓你的VScode裡有jQuery 的Emmet 可以用。

  • 我用的主題 www
    很夢幻,超可愛。想裝可愛的人可以用。
      
    大概就先這樣~
      
    什麼? 你說我的文章感覺像在湊天數?
    不不不、 像我可愛的主題 ,你就不知道有這個東西吧!還...還是有幫助的...
      
      
      

圖解在VScode 上撰寫 JS 的畫面

https://ithelp.ithome.com.tw/upload/images/20200915/20129506ILsDf3ppbi.png
VSCode 有內建叫 Emmet 的東西,寫code 只要輸入第一個文字就會出現提示字元給大家選,否則像JavaScript 的監聽 addEventListener,那麼長的字要一個字一個字敲出來會敲到死。
  
輸入「 ! 」驚嘆號 就可以快速打完 上面一大串 head 的部分,也可以自定義emmet 。
  
JavaScript 引入的位置 day1 文章也有提到的,因為網頁渲染是由上至下,若將JS 嵌入語法像CSS一樣放在head 中的話,會導致 Javascript 取不到 HTML 元素,跳出一堆錯誤。
  
  
https://ithelp.ithome.com.tw/upload/images/20200915/201295063sGvlWhcFt.png
然後這個是JS 的撰寫介面,什麼都不用加 就可以直接開寫哩~
圖中為 JS 使用註解 的方法講解。
   


   

您寫code 的好夥伴 —— chrome 除錯工具

插件的部分我們有提到 Live Server 這個插件,我們可以用他開起撰寫的網頁。記得,網頁是HTML 載入 CSS 和 JS 做成的,所以打開 Live Server 是要開啓你的 HTML 檔歐。
想當年我還很天真的一直對 JS 檔按右鍵,還一直疑惑為什麼不能開啓網頁 (遠望)

我們用Live Server 將上面 VSCode 圖片範例的 HTML 打開來~
https://ithelp.ithome.com.tw/upload/images/20200915/20129506mdkT3kcSXq.png

https://ithelp.ithome.com.tw/upload/images/20200915/20129506V0FNgLhfR3.png
打開網頁後,右鍵可以找到「檢査」。
然後我們再檢査裡面找到 console 這個東西。

https://ithelp.ithome.com.tw/upload/images/20200915/20129506rldFI0iizz.png

今天我們也可以在這個 console 欄位做各式各樣的檢査,像是 我今天建立的變數 現在裡面是什麼値 。

明天就來說說什麼是變數~
每個程式語言都有變數,只是建立它的方式會不大一樣。

那文章就先到這邊,明天見じゃあねー

  
  
  
 


每日日文 單字 Corner ~~~~ ( 今天很懶所以打5個 )

  • 年収 ( 年收入 ) ne n shu u
  • 採用メディア ( 人才招募網站 ) sai yo u me di a
  • プログラム ( 程式 program ) pu ro gu ra mu
  • スキル ( 技能 skill ) su ki ru
  • インストール(安裝 install )i n su to ru

音檔

昨天說到 r 的音發越不標準日文越標準是什麼意思呢?

就是像 ru 就發 魯
ra 不要唸成 ㄖㄨㄚ 要念 "拉"

ri 念 "哩" 不是 ㄖㄨ一

所以是 拉 哩 嚕 勒 摟

然後其實你去日本只要跟他們說 摳你幾哇 阿哩嘎斗狗災一媽斯,
日本人就會「 哇~~~~你日文好厲害歐 」((((

還不跟他們講一串日文嚇死他們


上一篇
一日目:JavaScript 雑談 始ノ章
下一篇
三日目:JavaScript 變數 変数ノ章
系列文
JavaScript初心者ノ研究日記。30

尚未有邦友留言

立即登入留言