iT邦幫忙

web互動式網頁相關文章
共有 30 則文章
鐵人賽 Modern Web DAY 30
Web互動式網頁 系列 第 30

技術 DAY30(31?) 鐵人完賽!!! (但哪裡怪怪的??)

還沒發DAY30就鐵人練成了呢!(好耶) 言歸正傳,這次也是順利完賽了,從這三十天學到了許多前端技術,對於學後端的我而言是新的知識地帶,也是對前端技術感興趣而訂...

鐵人賽 Modern Web DAY 29
Web互動式網頁 系列 第 29

技術 DAY29 JavaScript網絡請求(Fetch API)

在Web開發中與伺服器進行數據交換是不可或缺的一部分。Fetch API就是專門用於簡化和改進網絡請求方面的強大工具,來看看吧! 什麼是Fetch API? F...

鐵人賽 Modern Web DAY 28
Web互動式網頁 系列 第 28

技術 DAY28 JavaScript網絡請求(Ajax)

什麼是Ajax? Ajax是一種技術,允許JS在不刷新整個頁面的情況下向伺服器發送和接收數據。全名是"Asynchronous JavaScript...

鐵人賽 Modern Web DAY 27
Web互動式網頁 系列 第 27

技術 DAY27 JavaScript 本地存儲(LocalStorage & SessionStorage)

JS有兩個方法可以在瀏覽器中保存用戶的數據,以便在不同頁面之間或甚至在瀏覽器會話之間保持數據的一致性。分別是LocalStorage 與 SessionStor...

鐵人賽 Modern Web DAY 26
Web互動式網頁 系列 第 26

技術 DAY26 JavaScript 事件委託(Event Delegation)

當網頁上有多個元素需要添加事件監聽器(Event Listeners)常會遇到一個問題: Q: 要為每個元素都添加一個事件監聽器嗎?A: 可能會導致程式碼變得...

鐵人賽 Modern Web DAY 25
Web互動式網頁 系列 第 25

技術 DAY25 JavaScript錯誤處理

當使用JS來開發網頁時,不可避免的會有錯誤和異常情況發生。來介紹一下如何處理JS中的錯誤和異常情況確保程式碼能夠掌握在自己手中! 什麼是JavaScript錯誤...

鐵人賽 Modern Web DAY 24
Web互動式網頁 系列 第 24

技術 DAY24 JavaScript異步編程

允許處理非同步的操作,像是網絡請求、事件處理和計時器,建立更加響應性和效能的網頁應用程序並提高用戶體驗。來介紹異步編程的基本概念、回調函數和Promise吧!...

鐵人賽 Modern Web DAY 23
Web互動式網頁 系列 第 23

技術 DAY23 JavaScript & DOM操作

DOM是什麼? 用於表示和操作HTML和XML文檔的程式接口。簡單來說就是將網頁文檔視為樹狀結構的方法,其中每個元素都是樹的節點通過JS來訪問和修改。 目的是允...

鐵人賽 Modern Web DAY 22
Web互動式網頁 系列 第 22

技術 DAY22 JavaScript事件處理

當我們在網頁上進行互動時,我們可以透過JS來捕捉和處理各種用戶操作,例如滑鼠點擊、按鍵按下、表單提交等等。 什麼是事件? 事件是網頁上發生的各種動作,例如用戶的...

鐵人賽 Modern Web DAY 21
Web互動式網頁 系列 第 21

技術 DAY21 JavaScript數組(Array)與物件(Object)

JS中數組(Array)與物件(Object)是用於存儲和操作數據。來探討數組和物件的基本概念和操作方法吧! JS數組(Array) 一種有序的數據集合,每個數...

鐵人賽 Modern Web DAY 20
Web互動式網頁 系列 第 20

技術 DAY20 JavaScript函數

在JS中,函數是一個可重複使用的程式碼區塊,執行特定的任務或操作。可以將程式碼片段組織成更小的部分,使程式碼更容易維護和重用。函數通常會執行一個特定的操作,並返...

鐵人賽 Modern Web DAY 19
Web互動式網頁 系列 第 19

技術 DAY19 JavaScript流程控制

今天就來介紹一下JS是如何根據條件執行不同的操作或者多次執行相同操作的吧! 條件語句(if、else) 迴圈語句(for、while) 以及其他流程控制結構的...

鐵人賽 Modern Web DAY 18
Web互動式網頁 系列 第 18

技術 DAY18 JavaScript基本語法

今天來介紹JS的常見基本語法: 變數(Variables) 使用變數來存儲和管理數據。使用 var、let 或 const 關鍵字來宣告變數。 使用 var(...

鐵人賽 Modern Web DAY 17
Web互動式網頁 系列 第 17

技術 DAY17 JavaScript入門

(JavaScript, JS)是一種高級的動態編程語言,用於實現互動性和動態性的網頁。它是前端開發中不可或缺的一部分,允許開發者創建具有互動性的網頁應用程序。...

鐵人賽 Modern Web DAY 16
Web互動式網頁 系列 第 16

技術 DAY16 響應式網頁設計(Responsive Web Design)

響應式網頁設計(Responsive Web Design,RWD)是網頁設計的方法使網站能夠適應不同尺寸和設備的螢幕,包括桌面電腦、平板電腦和手機,使網站的佈...

鐵人賽 Modern Web DAY 15
Web互動式網頁 系列 第 15

技術 DAY15 CSS網格佈局(Grid Layout)

今天要來介紹CSS網格佈局(Grid Layout),它也是用於設計佈局的好幫手,不用複雜的HTML或CSS程式碼也能處理多列和多行結構,實現複雜的佈局哦! 為...

鐵人賽 Modern Web DAY 14
Web互動式網頁 系列 第 14

技術 DAY14 CSS彈性盒(Flexbox)

今天要來介紹CSS彈性盒(Flexbox),它也是網頁佈局的好幫手,創建靈活、自適應且可讀的佈局,無論屏幕大小如何都能保持一致的外觀。 為何需要Flexbox?...

鐵人賽 Modern Web DAY 13
Web互動式網頁 系列 第 13

技術 DAY13 CSS浮動(Floating)和與定位(Positioning)

CSS浮動(Floating) 用於將元素從正常的文檔流中移出,使其可以自由浮動在其容器內。這意味著元素將被放置在容器的左側或右側,並且其他內容將繞過它。浮動元...

鐵人賽 Modern Web DAY 12
Web互動式網頁 系列 第 12

技術 DAY12 CSS背景顏色與圖片

我們可以設置元素的背景顏色、圖片、漸變等效果來美化網頁元素的背景,所以這篇來介紹怎麼調整喜歡的背景顏色來使網頁更加吸引人吧! 背景顏色 使用background...

鐵人賽 Modern Web DAY 11
Web互動式網頁 系列 第 11

技術 DAY11 CSS文本與字體設計

這次來介紹如何調整文本外觀和字體設計,來美化文字顏色、大小、字體、對齊方式等以及好用的屬性吧!(畢竟身為人都是外貌協會對美的事物都有好感的嘛-v-) 文字顏色...

鐵人賽 Modern Web DAY 10
Web互動式網頁 系列 第 10

技術 DAY10 CSS盒模型(box)與佈局

除了把字體調整成我們要的大小與顏色之外,我們也會想自己安排布局讓網頁變得更漂亮更好看一些。CSS盒模型就派上用場啦! 定義是每個HTML元素都由一個個矩形盒子所...

鐵人賽 Modern Web DAY 9
Web互動式網頁 系列 第 9

技術 DAY09 CSS屬性和值

根據昨天的問答... Q: 既然我們要用CSS來設計網頁外觀和佈局,那要如何選擇我們要的元素以及改變外觀呢?A:當然是通過選擇器(Selectors) 與屬性...

鐵人賽 Modern Web DAY 8
Web互動式網頁 系列 第 8

技術 DAY08 CSS選擇器

Q: 既然我們要用CSS來設計網頁外觀和佈局,那要如何選擇我們要的元素以及改變外觀呢?A:當然是通過選擇器(Selectors) 與屬性和值來完成外觀的選擇的啦...

鐵人賽 Modern Web DAY 7
Web互動式網頁 系列 第 7

技術 DAY07 給HTML畫個妝-認識CSS

CSS全名為層疊樣式表(Cascading Style Sheets)圖片來源用來控制網頁外觀和佈局的語言,可以定義網頁元素的外觀、顏色、大小、位置等視覺效果讓...

鐵人賽 Modern Web DAY 6
Web互動式網頁 系列 第 6

技術 DAY06 認識HTML的表單標籤

HTML表單標籤是互動設計中不可或缺的一部分,透過收集用戶輸入的數據、執行搜索、註冊、訂閱等來實現各種互動功能。我們了解一些常見的HTML表單標籤以及如何使用它...

鐵人賽 Modern Web DAY 5
Web互動式網頁 系列 第 5

技術 DAY05 認識HTML的表格標籤與列表標籤

在HTML中,還有許多有趣且實用的標籤與使用者互動的元素,今天要來介紹表格標籤與列表標籤。馬上來看看吧! 一、表格標籤<table>, <tr...

鐵人賽 Modern Web DAY 4
Web互動式網頁 系列 第 4

技術 DAY04 認識HTML的基本標籤

當我們在HTML中寫程式時,必定會包含以下這些標籤:<!DOCTYPE>, <html>, <head>, 和 <bo...

鐵人賽 Modern Web DAY 3
Web互動式網頁 系列 第 3

技術 DAY03 認識HTML結構

今天我們來認識HTML的基本結構,先來新增一個檔案名為app.html再用VScode打開它。 在第一行打上一個驚嘆號(!) 出現快捷選項選第一個按下Enter...

鐵人賽 Modern Web DAY 2
Web互動式網頁 系列 第 2

技術 DAY02 認識HTML長老

來介紹一下長老HTML(HyperText Markup Language 取大寫部分) 根據維基百科記載:HTML5是由全球資訊網協會(W3C)於2014年1...

鐵人賽 Modern Web DAY 1
Web互動式網頁 系列 第 1

技術 DAY01 踏上互動式網頁的旅程吧!

大家好,我是LX !2023年鐵人賽開跑拉,這次將學習互動式網頁的點滴成果寫成鐵人賽文分享給大家! 之所以會選擇互動式網頁是看到有些商品介紹頁面(不是一頁式的詐...