開始上課

Original: https://course.andys.pro/Javascript-Intro/01-1-what-is-the-javascript-programming-language/

講義

1. JavaScript 的起源與演進

• 前世今生：原名 LiveScript (1990年代)，為了搭上 Java 的熱潮而改名為 JavaScript，但兩者完全不同。
• 效能飛躍：2008 年 Google 推出 Chrome (V8 引擎)，使 JavaScript 執行速度提升 20 倍以上。
• 應用變革：iPhone 出現與 Facebook 遊戲（如開心農場）的流行，推動網頁從靜態展示轉向動態應用 (Web Apps)。

2. Chrome 開發者工具 (DevTools) 導覽

• 如何開啟：右鍵 點擊檢查 (Inspect) 或 F12 / Ctrl+Shift+I。
• 主要面板：
  • Elements：檢視 HTML 結構與 CSS，可用左上角箭頭 (Ctrl+Shift+C) 選取元素。
  • Console：執行 JavaScript 指令，查看 Log 與錯誤訊息。
  • Sources：查看原始碼、設定 Debug 中斷點。
  • Network：監控網路請求、載入順序與檔案大小。
• Device Mode (手機模擬)：
  • 模擬不同尺寸 (iPhone, iPad) 的 RWD 效果。
  • 注意：模擬器不等於真機，雖然方便但無法完全取代實體裝置測試。

3. 網頁開發觀念

• Debug 思維：“My code doesn’t work and I don’t know why” 是開發者最怕的狀況，善用 Console 與 Network 找出問題根源。
• 效能優化：使用者耐心有限，應確保網頁主要內容（如 Logo、選單）在 3 秒內呈現。

影片逐字稿largev2

JavaScript是什麼?它原名是LiveScript1990年中的時候那時候Java很流行程式開始慢慢的要變成通用平台各個電腦或甚至是手機上面都可以跑Java大家發明了一個Script叫LiveScript結合當初很流行的Java他們就把他們的Script叫做JavaScript所以到現在大家都搞不清楚到底Java是什麼JavaScript是什麼它原名是LiveScript1990年中的時候那時候Java很流行程式開始慢慢的要變成通用平台大家都搞不清楚到底Java跟JavaScript有什麼不一樣其實是兩個完全不同的語言只是為了要借助Java當初的熱門程度所以把名字改得很像在2008年的時候JavaScript的速度因為Apple和Google的關係提升了二十幾倍所以以前大家開Internet Explorer第一件事情是要把JavaScript關掉No Script我不要任何Script你給我HTML跟CSS就好我只要看網頁電腦可以趕快把它畫出來看得到網頁這樣就好可是因為JavaScript快了二十幾倍然後因為iPhone出來大家開始在寫App大家的思維開始不一樣大家希望網頁和手機的內容是開始會動的甚至想要玩遊戲不知道大家有沒有這樣的記憶就是2008、2009年那時候Facebook剛進台灣的時候或甚至可能大家是晚一點才開始用Facebook的時候大家上Facebook要幹嘛其實不是要交朋友我要玩開心農場我要種菜、我要拔菜那這就是一個很重要的JavaScript應用可能2008年那時候還有很多的遊戲都是用Flash可是實際上慢慢慢慢的後來都轉到JavaScript去了開發者就開始都要用JavaScript來寫那所以Chrome也從剛開始它是完全08年剛開始推出來到現在市佔率接近60%到80%開一個Charge給大家看在08年的時候你看IE還有70幾%的市佔率然後Firefox越來越多因為大家想要開放的網頁同時那時候Firefox其實JavaScript速度也算蠻快的可是你看Chrome一直狂飆雖然說那時候2008、2009的時候希望Chrome可以馬上得到第一可是它也是花了大概一年到三年的時間然後慢慢的全部的人幾乎都轉換到Chrome上面去簡單講完了一下JavaScript也講了Chrome一下那為什麼我們要講這些東西呢因為我們主要在學習JavaScript的時候我們會用到很簡單的一個東西就是你的瀏覽器你就可以直接在裡面做開發那我們來看一下就是你可以做到什麼東西你要怎麼樣可以來看學習或知道一個網頁它現在在做什麼就比如說它現在的瀏覽頁面是Google當我們到Google這個頁面的時候我們可以按右鍵看到Inspect Element你可以看到後台開發者工具或是你在一個選單裡面可以在直接從上面像這邊的話就有一個Developer Tools這裡你就會開就是把這個選單打開在這個選單裡面呢我們可以看到上面會有一條ElementsConsoleSourceNetworkMemoryApplication這是我們第一章所要講的好的那我們主要來看一下Elements我們在Elements裡面呢我們可以看到這個HTML就代表這整坨的網頁然後它還有Pad和Body那我們主要可以看到網頁的內容大部分都是Body的部分當我們希望知道說Google這個Logo是怎麼做出來它的圖是在哪裡的時候這邊有一個箭頭或是你可以用這個快捷鍵它會顯示出來有沒有這個是CtrlCtrl Shift C然後你選Google它就會告訴你說Google這個Logo是一個是一個IMG然後它的高度是92然後它的位置是在哪裡然後它這邊有一個斑馬紋代表說它的背景是半透明的那它的圖檔的大小大概是272x92dp這樣子好所以我們就可以在我們要做很多元素的時候我們可以去選我們可以去了解別人網站我們就是這些東西都是很開放的因為你的電腦在Web裡面你會看到其他的code可是一般的一般的其他軟體你很難每一個元素都可以直接這樣子看好那這個是Elements的部分有的時候呢因為我們現在多裝置比如說手機的網頁啊電腦的網頁我們需要是適應很多不同使用者在不同環境的網頁這邊呢有一個裝置的一個按鈕當我按下去我就可以把它變成是iPhone X然後在iPhone X裡面呢我看到的頁面就會是長這樣然後這邊是它的解析度那我現在可以換比如說iPad Pro的話它就會換成iPad Pro的解析度那我可以把它調大一點我希望它大一點那這是它的比例這是50%嘛你可以調100%或是可以Fit to Window就是符合螢幕大小那我們也可以旋轉它然後你就可以看到你的網頁的變化是怎麼樣因為滿有趣的一件事情是當你在寫網頁的時候很多時候不見得是高端的裝置重要很多時候低端的裝置更重要因為他們解析度更低更難知道網頁會不會壞掉可是他們卻是大多數的使用者所以這些是滿重要的那再來呢它現在新增了好幾個滿有趣的裝置一個是Surface DuoMicrosoft出的雙螢幕裝置那另外一個是Galaxy Fold摺疊螢幕那我們可以看一下所以它解析度會變很奇怪就會變這樣就是很長啦就是很長的狀況好那我們可以看到Surface Duo長怎麼樣現在它雖然解析度出來了可是我們在寫網站的時候我們還是針對iPhone去做優化比較多因為其實iPhone是單一裝置裡面算是最多的解析度就是大概有三成都是可能是同一個型號或是螢幕都是差不多一樣的大小所以Android你要去支援就會很累因為有各式各樣的裝置所以這個是Responsive的部分那你會看到說如果是它移動裝置的話它的圈圈也會變成一個圓圈嘛那這個圓圈就是希望說你在點東西的時候不要用電腦的思耳去想而是你要想說它是只能戳它不會變換手指啊等等之類的這邊有提到Device Mode不能完全替代真實的設備測試所以在很多的大公司裡面像Facebook啊他們就有一整個Room然後裡面都有各式各樣每支手機他們都會買甚至不只買一支然後機器人在那邊滑然後會一直測就是他們的背景資料去測試他們的App去測試他們的網頁是不是流暢的然後去Test說哪邊會遇到Bug或是今天有一個實習生進來可能寫了一個動畫可能換頁的動畫會不會經過一千萬次以後卡住或在某一個情況下卡住因為它就是要確保它的Code是沒有問題的那有錢人有有錢人的做法Facebook他們有那麼多的裝置那我們就用Chrome的Device Mode我們就可以當開發者那我們能做的事情是我們比如說當我們寫的網頁或東西出錯了人家回饋給你的時候你趕快趕然後趕快比如說買張車票跑到他家旁邊的咖啡廳跟他說請你喝一杯咖啡你告訴我問題在哪裡那你可能只能用這樣的方式就是不太一樣的Support的模式我剛才有提到就是Element這個東西那再來我們要提到的事情是Console這個介面那有的時候呢因為我們開發者在開發一個前端的時候我們最怕的事情是My code worksI don’t know why沒有問題嘛就是我的code會跑可是我不知道為什麼那沒差嘛反正會過會動就好老闆會給我錢這樣就好那可是My code doesn’t workand I don’t know why這就很有問題了你可能就是不知道下個禮拜自己在哪裡那所以呢這時候你就要知道Console這個東西那後面他就會噴很多東西比如說像我現在用的browser是Opera他就先噴了這個東西給我然後還有這邊呢Google的DN.js他就會寫上來他錯誤他就會噴在這裡那這個紅色可能是嚴重的錯誤驚嘆號可能是Warning就是警告而已這邊呢其實就是可以寫JavaScript比如說我先寫一個Hello然後他就會噴給我Hello好那其實他叫Console嘛那我們也可以直接不叫他就是Console這樣那他裡面有很多個Function那這些Function我們等一下會講那有一個會很常用到的是Log這個FunctionFunction這個東西呢等一下我會提早講一下因為這邊呢我們等一下會用到Log這個Function然後一個一個我們會下去講再來我們來講SourceSource就是我們可以設一些中斷點喔Source這邊我們就可以看到這個網頁裡面的一些元素你看他都是已經壓成一條原因是因為他是給機器看的為了加速所以他會把它壓成一條很長一條很多時候JavaScript寫起來很漂亮可是你為了要加速或是給機器去讀你會把它壓成Min的方法來這樣做這邊可能會有Logo圖啊等等之類的都是在這邊都可以看到Search Box裡面的一些Icon這G-Static也是Google的裡面的元件這個他PNG他的縮圖然後他是一格一格再去把它填上去再來我們來看Network那Network其實很多時候Debug就是Debug在Network其實很重要你會想要知道說你的網頁是像我們很常就會有時候自己網頁希望快一點就會很常在刷這個頁面那這個頁面是怎麼看呢主要呢他現在是紅色的點是亮的代表有點像類似在錄影的樣子就他一直還是在讀這個頁面現在都還是在讀可是他現在沒有再出任何東西所以他現在不會跑那這Google他其實很快他只有傳輸22KB然後你就可以收到那像我們可以把點暫停這樣子暫停的時候他就是我們可以直接去看這裡面的元素可是同時如果我們要再重新測我們的網站的時候記得把這個紅色點打開然後我們再重整然後他就會直接每一個他刷到什麼東西進來的時候然後我們可能就要把它暫停按掉因為有的網頁他會留一條就是一直在傳輸的一條線我們就是他會一直在傳輸所以這個上面這個毫秒數就一直跑一直跑一直跑所以有時候你要先把它暫停一下那我們可以看到他第500毫秒的時候他給了這個他先給你了一個已經給你一個200的Request就是他收到然後直接塞給你OK這樣子可是有些Google的照圖啊這些東西可能都還沒有出來慢慢的他在第一秒他慢慢的東西就會慢慢進來就比如說我的使用者頭貼先進來然後Google的Logo進來然後他是這樣一個一個慢慢的把它載進來這樣子所以你就可以看到他大概1.5秒的時候他才會大部分的東西載進來所以那麼小的一個網站可能是我們現在也有在做串流的狀況下所以他的載入速度不會說到特別快那這邊是Network的部分你可以從這個河流圖你可以看到他是怎麼載進來然後這邊有可以Preview還有Response那我們把這個細節關掉我們會看到的事情是這邊他會顯示給你的事情是他的StatusStatus就是200就代表是成功然後這邊是他的檔名然後再來這邊呢是他的位置最後這邊有他的檔案大小以及KB啊然後甚至比較大的會到MB可是盡量都是KB等級就是如果你真的要塞大檔給使用者的時候盡量先塞一個小圖一個小的KB圖先塞給他然後你後面把大檔往後面去塞因為可能使用者希望說他在3秒鐘或是在更短的時間內網頁就要先顯示出來可是顯示出來有些圖沒有沒有關係嘛就是跑一個圖的照片的Logo給你看你就不會覺得說這個網站是不會動的可是你後面再去把大的檔案拉出來再把它放上去就好了所以這是一個網頁的整個就是他的載入流程那這邊我們就會看到他就是一個Waterfall就是他載入的他把它變成像一個瀑布來告訴你說他什麼時候載入什麼東西然後他總共載入了多久比如說像前面等了251毫秒這邊是等然後這邊等了106毫秒然後才給你東西所以其實有的時候是要去壓縮你等待就是Server之間打的時間而不是下載的時間那有時候不一定啦有時候等很短可是下載很長那就代表說你可能要把你的檔案或是你的Server速度要再加速那這是一些Network上面的細節MING PAO CANADA // MING PAO TORONTO