2023/12 on BenzHub

DOM 是什麼？前端 DOM 操作完整教學

Sat, 30 Dec 2023 00:00:00 +0000

DOM（Document Object Model，文件物件模型） 是瀏覽器將 HTML 文件解析後，在記憶體中建立的一個樹狀結構。透過 JavaScript 操作 DOM，我們可以動態地新增、修改、刪除頁面上的元素，實現各種互動效果，而無需重新載入整個頁面。

For Loop(迴圈) | Javascript

Sat, 30 Dec 2023 00:00:00 +0000

在 JavaScript 中，‘for’循環是一個強大的工具，允許開發人員遍歷一系列元素或執行一段程式碼特定次數。掌握’for’循環是 JavaScript 開發人員的基本技能。

Looping Breaking and Continuing(迴圈中斷 & 繼續) | Javascript

Sat, 30 Dec 2023 00:00:00 +0000

JavaScript 提供了控制循環流程的機制，使開發人員能夠提前退出循環或跳過特定的迭代，這些功能被稱為循環中斷和繼續。

Object Methods(物件 & 操作方法) | Javascript

Sat, 30 Dec 2023 00:00:00 +0000

JavaScript 物件不僅僅是資料的容器；它們還可以具有相關聯的方法，這些方法是定義為屬性的函數。物件方法提供了一種在物件內封裝功能的方式，使代碼更有組織性和模塊化。

String Formatting(字串格式化) | Python

Sat, 30 Dec 2023 00:00:00 +0000

字串格式化是 Python 中一個強大的功能，允許開發人員創建動態且可讀的輸出。無論你是構建用戶界面、記錄消息還是生成報告，理解 Python 字串格式化技術是非常重要的。

Variables(變數) | Python

Sat, 30 Dec 2023 00:00:00 +0000

變量是任何程式語言的基礎， Python 也不例外。它們充當存儲和管理數據的容器，使開發人員能夠在程序中操縱信息。

While Loop(無限迴圈) | Javascript

Sat, 30 Dec 2023 00:00:00 +0000

在 JavaScript 中，while 循環是一種多用途的控制流結構，允許開發人員在指定條件仍為真時重複執行一段代碼塊。while 循環在迭代次數未知的情況下非常重要。

點與括號表示法(Dot vs Bracket Notation) | Javascript

Sat, 30 Dec 2023 00:00:00 +0000

在 JavaScript 中，物件是組織和存儲數據的基本結構。在訪問物件內部的屬性時，開發人員通常使用兩種表示法：點號表示法（"）和方括號表示法（[]）。

Functions(函數) | Javascript

Fri, 29 Dec 2023 00:00:00 +0000

JavaScript 函數(Functions)實現動態且可重複使用的程式碼。函數(Functions)封裝了一組指令，使你能夠定義可用不同輸入執行的邏輯。了解函數對於掌握 JavaScript 非常重要，因為它們實現了模塊化、可維護性和代碼效率。

函數：聲明 vs. 表達式(Functions: Declarations vs. Expressions) | Javascript

Fri, 29 Dec 2023 00:00:00 +0000

JavaScript 中，定義函數的兩種主要方式是通過聲明式(Declarations)和表達式(Expressions)。沒有了解聲明式和表達式的不同，很多開發者會因為提升(hoisting)的問題，而在錯誤的地方調用函數。

陣列(Arrays) | Javascript

Fri, 29 Dec 2023 00:00:00 +0000

JavaScript 陣列(Arrays)是開發時常見的數據結構。它提供了一種方便的方式來組織和操作資料集合。我們將介紹 JavaScript 陣列(Arrays)的各種常見操作方式以及它們在各種情境中的有效應用。

箭頭函數的簡潔之美(Arrow Functions) | Javascript

Fri, 29 Dec 2023 00:00:00 +0000

JavaScript 箭頭函數，引入自ES6，提供了一種簡潔而優雅的編寫函數的方式。箭頭函數簡化了代碼並提供了一種更具表達性的處理函數的方式。

簡潔的決策工具: 三元運算符(Ternary Operator) | Javascript

Fri, 29 Dec 2023 00:00:00 +0000

在 JavaScript 的決策工具中，三元運算符以其簡潔而強大的特性脫穎而出。通常被稱為條件運算符，它提供了一種簡化的方式來表達簡單的條件語句。讓我們探討三元運算符是什麼，以及它如何增強你的代碼。

嚴格模式的威力(Strict Mode) | Javascript

Fri, 29 Dec 2023 00:00:00 +0000

JavaScript 在默認情況下對某些編碼並不 嚴謹。然而，對於開發要求更嚴謹的開發者， JavaScript 提供了一個稱為嚴格模式的功能。啟用嚴格模式對代碼實施更嚴格的規則，捕捉常見錯誤並防止使用某些易於出錯的功能。讓我們來看嚴格模式的好處以及如何有效利用它。

Statements and Expressions(陳述式 VS 表達式) | Javascript

Thu, 28 Dec 2023 00:00:00 +0000

在 JavaScript 中，理解表達式(Javascript Expressions)和陳述式(Javascript Statements)之間的區別對於編寫高效而有效的代碼非常重要。表達式是產生值的代碼，而陳述式則是完整的代碼指令。讓我們將區分這兩者之間的區別並探索它們的重要性。

Switch Statement | Javascript

Thu, 28 Dec 2023 00:00:00 +0000

在 JavaScript 中， switch 語句是簡化代碼中決策過程的強大工具。它提供了一種優雅的替代方案，取代了多個 if-else 語句，提升了代碼的可讀性和可維護性。 switch 語句根據匹配的情況評估表達式並執行一個代碼區塊。

Boolean Logical Operators(布林邏輯操作) | Javascript

Wed, 27 Dec 2023 00:00:00 +0000

布林邏輯運算子是 JavaScript 中製定決策和控制程式流程的基本工具。這些運算子允許你建立複雜的條件並有效地處理不同的情境。讓我們探索 JavaScript 中一些基本的布林邏輯運算子。

Background and Border(背景和邊框) | CSS

Tue, 26 Dec 2023 00:00:00 +0000

在前端工程師的日常工作中，最常使用的應該就是 background 和border ，不管是在切版或是在關於美感的調配畫面比例，幾乎是每天都會使用，對於前端工程師來說， background 和border 是一定要熟練掌握的。

Box Sizing Margin Padding(內容盒子與邊框盒子與內外距) | CSS

Tue, 26 Dec 2023 00:00:00 +0000

CSS 內容盒子與邊框盒子、外邊距和內邊距！這些基本屬性影響了你網頁中元素的大小、間距和位置。

Color(顏色) | CSS

Tue, 26 Dec 2023 00:00:00 +0000

CSS 在顏色上可以使用 Hex、RGB和文字，我們這邊會用案例介紹這3種的使用方式。

Font Property(字體屬性) | CSS

Mon, 25 Dec 2023 00:00:00 +0000

字體實際上很大程度的影響使用者對你的網站的好感度，因為如果使用錯誤的字體的話，網頁的可讀性太低，使用者可能會想要馬上就關閉你的網頁

Values and Units(計量單位介紹) | CSS

Mon, 25 Dec 2023 00:00:00 +0000

CSS 計量單位分為絕對單位和相對單位，許多人因為使用錯誤的單位，常常導致在RWD(響應式)中畫面發生顯示元素錯誤

CSS Basic Selector(基礎的CSS選擇器) | CSS

Sun, 24 Dec 2023 00:00:00 +0000

常見的 CSS 選擇器的使用方式

CSS Import(CSS引用方式) | CSS

Sun, 24 Dec 2023 00:00:00 +0000

3種 CSS 在 HTML 中引用的方式

div and span(常見塊級元素和內聯元素的搭配使用) | HTML

Sat, 23 Dec 2023 00:00:00 +0000

<div> 是塊級元素，<span> 是內聯元素因此常常互相搭配 <p> 標籤使用，讓文章不會有強制換行的問題

HTML Character Entity(字符實體和符號) | HTML

Sat, 23 Dec 2023 00:00:00 +0000

HTML 字符實體在顯示特殊字元方面非常的方便，且可以避免引用大量圖片，提升網頁的效能。

Block Element and Inline Element(塊級元素&內聯元素) | HTML

Fri, 22 Dec 2023 00:00:00 +0000

HTML 塊級元素和內聯元素！理解這兩者之間的差異對於打造結構良好的網頁非常重要。

Form and Input(表單和輸入框標籤) | HTML

Fri, 22 Dec 2023 00:00:00 +0000

HTML 表單和輸入框！常常是使用者與網站的互動的元件。清楚的認識這兩個HTML標籤是非常重要的。

HyperLink and Image(超鏈結和圖片) | HTML

Thu, 21 Dec 2023 00:00:00 +0000

探討了 HTML 的 <a> 和 <img> 標籤的基礎知識，揭示了它們的簡單性和重要性

List and Table(有序列表&無序列表&表格) | HTML

Thu, 21 Dec 2023 00:00:00 +0000

使用 HTML 中列表和表格！列表結構的內容，或用表格以邏輯方式條列資訊。

Paragraph-and-Tags(基礎標題段落排版標籤) | HTML

Thu, 21 Dec 2023 00:00:00 +0000

理解 HTML 的標籤和其他基本元素的強大之處是網頁開發的基礎。

Meta Tag & SEO(meta標籤和搜尋引擎) | HTML

Wed, 20 Dec 2023 00:00:00 +0000

學習撰寫描述、標題和其他，以提升你網站的可見性。無論你是網站所有者、開發人員還是 SEO 實踐者，了解這些 HTML 標籤策略對於優化你的網站存在、有效地觸及目標受眾至關重要。

前端常用開發工具

Wed, 20 Dec 2023 00:00:00 +0000

我們再進行前端開發的時候，利用工具可以幫助我們進行快速得開發而且還可以更加美觀

Equality Operators(嚴格等式VS鬆散等式) | Javascript

Tue, 19 Dec 2023 00:00:00 +0000

理解如何比較值是程式設計的基礎。我們探討了等值運算子 == 和 === 的微妙差異，用範例理解它們的內在細節差異。我們將解開鬆散和嚴格等值比較，當你在編寫更複雜的程式碼中的會有巨大幫助。

利用VS Code 快速創建並開啟HTML頁面 | HTML

Tue, 19 Dec 2023 00:00:00 +0000

新手在撰寫HTML頁面的時候，往往會不知道從哪裡下手，我們利用 VS Code，先快速創建簡易HTML模板，讓我們快速上手

Truthy and Falsy(真值、假值) | Javascript

Mon, 18 Dec 2023 00:00:00 +0000

了解真值（例如，字串、數字）和假值（例如，null、undefined）對於編寫高效且清晰的程式碼至關重要。透過實際範例列出常見的真值(Truthy)和假值(Falsy)場景，很好的幫助你寫出高效的程式碼。

Type Conversion(型別轉換) | Javascript

Sun, 17 Dec 2023 00:00:00 +0000

理解 JavaScript 如何進行型別轉換和強制轉換非常重要。這就是為什麼一個字串 5 可以變成數字 5 的原因。在這篇文章中，我們將示範 JavaScript 如何進行這些轉換，讓你簡單的理解運作的原理。

安裝&啟動JupyterLab | Python

Sun, 17 Dec 2023 00:00:00 +0000

Python JupyterLab 是一個功能強大的開源基於 Web 的 Python 交互式計算環境。它允許用戶創建並共享包含實時代碼、方程式、可視化和敘述文本的文檔。由於其多功能性和易用性， JupyterLab 支持各種語言並在數據科學、機器學習和科學計算中被廣泛使用。

if else Statements(條件式) | Javascript

Sat, 16 Dec 2023 00:00:00 +0000

JavaScript 的 if 和 else 語法就像程式碼中的決策者。它允許你的程式根據條件選擇不同的路徑。想像一下它就像是一個岔路口：如果一個條件為真，就走一條路；如果為假，就走另一條路。

给Linux配置漂亮且强大的zsh | Linux

Sat, 16 Dec 2023 00:00:00 +0000

Zsh 因為有自動補全指令的功能，因此深受工程師的喜愛，這邊我們使用熱門的 oh-my-zsh ，一步一步來安裝設定我們的 Zsh 吧!

Linux有哪些Shell | Linux

Fri, 15 Dec 2023 00:00:00 +0000

我們來介紹一些常見的Linux Shell。以及講解 Shell 、 Bash 和 Zsh 的區別在哪?

Template Literals(字串模板) | Javascript

Fri, 15 Dec 2023 00:00:00 +0000

Template Literals(字串模板) ，在 Javascript 中我們會很常用使用到，在字串(string)中帶入變數(variable)的技巧一定要熟練的掌握。

在Windows上使用wsl2執行Linux | Linux

Fri, 15 Dec 2023 00:00:00 +0000

如果我們想要練習 Linux 指令，但又只有 Windows 的電腦的話，這邊推薦你安裝 Windows wsl2 ，在上面執行 Linux 系統，這樣你就可以輕鬆在 Windows 電腦中使用 Windows Terminal 切換到 Linux 系統

Linux 常用指令大全：新手必學指令完整一覽表

Thu, 14 Dec 2023 00:00:00 +0000

這份 Linux 常用指令大全，將所有必學指令依照功能分類整理，包含檔案管理、使用者管理、權限設定、套件管理、服務管理、網路指令與防火牆設定，並附上簡短說明與範例，適合 Linux 新手快速查詢，也適合有經驗的使用者作為速查表。

Operator Precedence(運算子優先序) | Javascript

Thu, 14 Dec 2023 00:00:00 +0000

Operator Precedence(運算子優先序) ，在 Javascript 中大部分我們的運算都跟我們數學中的方式很像，都是先乘除後加減的方式在運作

Variables(變數) | Javascript

Wed, 13 Dec 2023 00:00:00 +0000

變數(Variables)是任何程式的基礎石，作為儲存和管理資料的容器。與其他語言中的資料類型不同， JavaScript 變數(Variables)是動態類型的。這種靈活性可以使 Javascript 開發人員能夠創造更多具有靈活性的程式碼。