通過有趣的實驗改善JavaScript學習

本文經Mark Brown同行評審。感謝所有SitePoint的同行評審員，使SitePoint的內容達到最佳狀態！

Web開發領域的學習永無止境。我們的行業不斷更新和改進，我們也應該如此！不幸的是，跟上潮流可能令人筋疲力盡，但並非必須如此。在本文中，我將向您展示小型實驗如何成為一種有趣且有效的新知識學習方法，並確保學習和保持最新狀態始終充滿樂趣。

關鍵要點

• 小型實驗可以成為一種有趣且有效的方法，用於學習Web開發和JavaScript中的新知識。通過設定一些規則，例如準備工作、安排任務、避免最後期限以及給自己一些娛樂時間，學習可以變得更愉快，不那麼令人筋疲力盡。
• 回顧您的實驗可以幫助您提高技能和知識。問問自己，執行過程中出現的問題是否可以通過更好的準備來避免，或者如何改進已執行工作的質量，這些都能提供寶貴的見解。
• 有大量資源和工具可用於激發靈感和學習。從CodePen、Dribbble或Behance等視覺資源，到Node.js、Electron、Cordova和React Native等JavaScript運行時，再到API、庫、框架，甚至Raspberry Pi、Arduino和LEGO® MINDSTORMS®等物理世界工具，都有各種各樣的選擇可以幫助您增強JavaScript技能。

保持實驗的趣味性

您是否做過副項目？如果您做過，我相信您曾經做過一個項目，一開始非常有趣，但很快就變成了混亂不堪的局面。陷入困境並不有趣，而且會嚴重損害副項目以及工作的動力。這其中的主要原因通常是范圍蔓延或壓力，而您應該在業餘時間放鬆身心。通過強制執行一些規則，我們可以確保不會遇到不愉快的意外：

1. 準備您的工作。確保您確切地知道實驗有多大以及它包含什麼內容。如果太多，將其分成易於管理的塊，每個塊都有開始和結束，或者放棄。
2. 安排任務。不要每個晚上都熬夜。只需每周安排一到兩次，每次一到兩個小時即可。
3. 沒有最後期限。包括您在內的每個人都需要放鬆。設定目標是可以的，錯過目標也應該可以。
4. 給自己一些娛樂時間。雖然你不應該拖延，但生活不僅僅是一堆待辦事項清單上的勾選。花時間享受勞動成果。

進行小型實驗並不意味著它們不能成為更大項目的一部分。例如，以數據可視化項目為例。它可能需要一些時間，但很容易分成較小的任務：

• 設置構建工作流程
• 查找並獲取有趣的數據（這是一個很酷的API列表，可以激發您的靈感）
• 使用Node.js獲取和處理數據，利用ES2015特性
• 比較並選擇一種技術（canvas、WebGL、DOM/SVG）或庫（d3.js、p5.js、THREE.js）來可視化數據
• 使用您選擇的工具可視化數據

我使用Trello看板來跟踪我所有的實驗。在那裡，我會列出和計劃它們，並在開始實驗之前添加相關信息。對於較大的項目，我傾向於專門為該項目創建一個新的看板，並為每個任務添加卡片。任何替代方案都足夠。記錄事情可以消除我頭腦中的雜音！

回顧實驗

除了通過實際操作新事物來學習之外，實驗也是提高自我的絕佳機會。回顧您的實驗，並問問自己以下問題：

1. 執行過程中出現的問題是否可以通過更好的準備來避免？如果是，怎麼辦？
2. 已執行工作的質量如何，我該如何改進？
3. 我能否更有效地準備我的實驗？

回顧和改進我們所做的事情會給我們帶來經驗——這在我們的行業中非常寶貴。溝通和記錄也是如此。許多實驗回顧都構成了很棒的博客文章。

雖然與JavaScript關係不大，但我特別有趣的一個實驗是在Sass中創建矢量圖形，我將坐標圖轉換為路徑，並將其柵格化為單像素框陰影。我不僅學習了我以前不太熟悉的Sass功能，還必須研究一些算法。

尋找靈感

如果您不確定接下來要學習什麼，最好隨時掌握一些資源來獲取靈感。

如果您喜歡視覺效果和藝術，CodePen是一個不錯的起點。精選作品通常充滿了令人驚嘆的筆觸，值得仔細研究以了解其工作原理。如果您感覺更冒險，可以嘗試Dribbble或Behance。

SitePoint由來自不同背景的許多作者提供支持。因此，JavaScript頻道充滿了各種各樣的JavaScript精華。

運行時環境

您可能已經知道JavaScript可以在瀏覽器中運行，但您知道也可以在瀏覽器之外運行JavaScript嗎？

• Node.js是迄今為止最流行的非瀏覽器JavaScript運行時。使用它，您可以編寫腳本、命令行界面或桌面應用程序等等。它可在Windows、OS X和Linux上運行。
• Electron允許您使用傳統的HTML、CSS和JavaScript構建跨平台桌面應用程序。
• Cordova允許您使用HTML、CSS和JavaScript構建移動應用程序。
• React Native允許您使用React框架構建移動應用程序。

瀏覽器API

在過去幾年中，瀏覽器中引入了許多新的API，允許您做各種有趣的事情。

• Service Worker API是一個大型API，允許我們執行各種操作，例如提供離線支持。
• WebRTC是一個API，允許我們與另一台計算機建立實時連接並傳遞音頻和視頻數據。

一些API允許我們使用設備硬件，例如讀取傳感器或讓設備執行某些操作（例如振動）。

• 環境光傳感器提供有關環境光線亮度的信息，我們可以使用它來調整我們的網站或應用程序。
• 電池狀態相當不言自明；我們可以請求電池狀態。較重的應用程序可以使用它來啟用省電模式。
• 地理位置向我們提供有關用戶位置的信息。
• 我們可以利用網絡信息向客戶端提供較小的文件。
• 通知對於許多應用程序（例如聊天應用程序）非常有用。
• 您是否正在構建一個使用鼠標進行輸入的遊戲？指針鎖定是您的朋友。
• 接近傳感器可以讓您了解用戶與設備的距離。也許這可以用來檢測擁抱？
• 設備方向允許我們檢測方向變化時。
• 振動允許我們振動設備，這對於遊戲來說非常棒。

庫和框架

大多數庫的目的是輕鬆完成任務，因此擁有使用它們的經驗總是有益的。更流行的庫和框架（例如Angular和React）甚至可能是工作的必備條件。一兩個實驗也可以成為您為面試做準備的好方法。

要知道庫和框架的壽命有限。雖然它們很有用，但您應該能夠理解它們解決的問題，並能夠在沒有它們的情況下解決這些問題。

架構

• Angular是一個MVC框架，許多團隊仍在使用。
• React是一個用於渲染視圖的庫。
• Polymer是一個用於創建Web組件的庫。
• Lodash.js、Underscore.js和Ramda.js都是函數式編程庫。一些團隊喜歡使用它們，但許多團隊並不喜歡。無論哪種方式，對函數式編程的良好理解都是一項非常受歡迎的技能。

視覺

• D3.js是一個圖形和DOM操作庫，如果您想使用SVG或HTML渲染圖形，它非常有效。
• p5.js是一個受Processing啟發的庫（一個靈活的軟件速寫本和一種用於“>在視覺藝術的背景下學習如何編碼”的語言）。它有一系列豐富的函數來繪製形狀和進行計算。
• Three.js是一個高級3D API，用於抽象掉WebGL的困難部分。

物理世界

就我個人而言，當我可以編寫軟件來做物理世界中的事情時，我真的很興奮。如果您也是如此，請考慮購買以下任何一套：

• Raspberry Pi是一款信用卡大小的單板計算機，非常適合教學或學習。
• Arduino類似於Raspberry Pi，但更側重於電子方面。
• LEGO® MINDSTORMS®是一款可以控制LEGO硬件的微型計算機。有什麼不喜歡的呢？
• Johhny-Five是一個用於機器人技術和物聯網的JavaScript框架，可以安裝在Arduino或類似設備上。

以上所有內容都可以用JavaScript編程，或者能夠運行JavaScript。

結論

小型實驗是一種學習新事物的絕佳實踐方法。另一個好處是它們可以幫助您改進工作方式，這在我們的行業中非常寶貴。通過強制執行一些規則，我們可以保持實驗的趣味性，激勵自己學習更多知識並變得更好。

對於那些陷入困境的人，我希望本文能激勵您開始一個新的、有趣的實驗。對於那些不確定接下來要處理什麼的人，我希望本文能給您一些靈感。或者您可能有一些關於實驗的好主意？或者我可能遺漏了什麼？無論哪種方式，我都非常樂意在下面的評論中聽到您的聲音。

關於JavaScript學習實驗的常見問題

我可以做哪些實用的項目來提高我的JavaScript技能？

您可以進行許多實用的項目來提高您的JavaScript技能。例如，您可以創建一個簡單的計算器、一個數字時鐘或一個天氣應用程序。這些項目將幫助您了解JavaScript如何與HTML和CSS交互以創建功能性Web應用程序。您還可以嘗試創建一個待辦事項列表應用程序，這將幫助您了解如何使用JavaScript操作文檔對像模型(DOM)。

我如何在Google實驗中使用JavaScript？

Google實驗是一個平台，允許您測試和展示您的JavaScript技能。您可以使用JavaScript創建交互式實驗並與世界分享。要在Google實驗中使用JavaScript，您需要對JavaScript的工作原理以及如何使用它來操作Web元素有一個基本的了解。

JavaScript在創建交互式網頁中的作用是什麼？

JavaScript在創建交互式網頁中起著至關重要的作用。它允許您根據用戶操作來操作網頁上的元素。例如，您可以使用JavaScript在用戶單擊按鈕時更改網頁的內容，或在網頁上為元素添加動畫。

我如何使用JavaScript創建動畫？

JavaScript提供了多種在網頁上創建動畫的方法。您可以使用requestAnimationFrame方法創建流暢的動畫。此方法告訴瀏覽器執行動畫，並請求瀏覽器在下一個重繪之前調用指定函數來更新動畫。

JavaScript在Web開發中的重要性是什麼？

JavaScript是Web開發的基本組成部分。它允許您通過操作網頁上的元素來創建交互式和動態網頁。如果沒有JavaScript，網頁將是靜態的，並且對用戶操作沒有響應。

我如何提高我的JavaScript編碼技能？

提高JavaScript編碼技能的最佳方法是練習。您可以進行各種項目，例如創建計算器或待辦事項列表應用程序，來練習您的技能。您還可以參加CodePen等平台上的編碼挑戰來測試您的技能。

學習JavaScript有哪些資源？

有許多資源可用於學習JavaScript。 Codecademy、freeCodeCamp和Mozilla Developer Network等網站提供關於JavaScript的免費教程和指南。您還可以在YouTube上找到許多視頻教程。

我如何調試我的JavaScript代碼？

您可以使用瀏覽器開發者工具中的控制台來調試JavaScript代碼。控制台允許您記錄消息、顯示錯誤和實時運行JavaScript代碼。

JavaScript在前端開發中的作用是什麼？

JavaScript是前端開發的關鍵部分。它允許您創建交互式和動態網頁，驗證用戶輸入並與Web服務器通信。

我如何使用JavaScript與Web服務器交互？

您可以使用JavaScript向Web服務器發送請求並接收響應。這是使用fetch API或XMLHttpRequest對象完成的。這允許您更新網頁的部分內容而無需重新加載整個頁面。

以上是通過有趣的實驗改善JavaScript學習的詳細內容。更多資訊請關注PHP中文網其他相關文章！