技術問答
技術文章
iT 徵才
Tag
聊天室
2023 鐵人賽
登入/註冊
問答
文章
Tag
邦友
鐵人賽
搜尋
2021 iThome 鐵人賽
DAY
4
0
Modern Web
我的網頁前端小小小教室
系列 第
4
篇
Day4 Javascript介紹
13th鐵人賽
karta1366796
團隊
imac_跳過這篇
2021-09-18 12:07:11
617 瀏覽
分享至
在前面的文章中,我們有淺談到Javascript在網頁中所扮演的角色,而Javascript到底是甚麼呢?網頁中呈現給使用者是靜態的資料,但若我們不想要死板板的,而是能夠跟使用者進行互動,譬如說當你滑鼠觸碰到這張圖片時,進行幻燈片的效果、又或者是當註冊帳號時,後面通常都會有個檢查的綠色勾勾,以及購物網站點購物車時跳出你的商品清單,這些都是網頁跟使用者互動的行為,Javascript就是扮演著讓網頁生動起來的角色!
然而Javascript還可以串接API,API是甚麼呢?API( Application Programming Interface),中文是"應用程式介面"。好,我相信你還是不懂,API白話來說,就是溝通的介面,你想要查詢墾丁怎麼去,你要先上網在Google Maps上面搜尋墾丁,系統知道你要去的地方是墾丁後,去資料庫搜尋,把結果回傳到網頁上讓使用者閱讀。
所以我們要把這個搜尋地區的功能帶到我們的網頁裡,就可以使用到Google Maps API,像是一些美食網站、旅遊網站,就可以替使用者省下要再把地址貼到Google Maps上面的時間,而是能夠直接的在你設計的網頁裡進行瀏覽!是不是大大提升了你網頁的互動性呢!
當然API不會只有Google Maps一種而已,還有像是氣象的API、播放音樂的API、3D影像的API,這些都可以透過Javascript讓你的網頁更加多元、豐富!
留言
追蹤
檢舉
上一篇
Day3 CSS裝潢大師
下一篇
Day5 網頁製作環境建設
系列文
我的網頁前端小小小教室
共
30
篇
目錄
RSS系列文
訂閱系列文
8
人訂閱
26
Day26 Bootstrap建立網頁
27
Day27 Javascript元件庫 Jquery介紹
28
Day28 JQuery應用
29
Day29 JQuery蓋板廣告應用
30
Day30 JQuery 控制CSS
完整目錄
直播研討會
{{ item.subject }}
{{ item.channelVendor }}
{{ item.webinarstarted }}
|
{{ formatDate(item.duration) }}
直播中
立即報名
尚未有邦友留言
立即登入留言
iThome鐵人賽
參賽組數
1123
組
團體組數
52
組
累計文章數
23096
篇
完賽人數
656
人
看影片追技術
看更多
{{ item.subject }}
{{ item.channelVendor }}
|
{{ formatDate(item.duration) }}
直播中
熱門tag
看更多
15th鐵人賽
13th鐵人賽
14th鐵人賽
12th鐵人賽
11th鐵人賽
鐵人賽
2019鐵人賽
2018鐵人賽
javascript
2017鐵人賽
python
windows
php
c#
windows server
linux
css
react
程式設計
vue.js
熱門問題
公司有人常常亂改IP位置(想問有甚麼辦法可以將IP鎖住不給更改)
請問我晚上開發一款工具,早上給公司使用,沒特別條款,法律知識產權還是我的嗎?
DDR3記憶體 只抓到一半
和朋友討論不出來 ,關鍵字搜尋方法,我也想學EXCEL了
請教外網如何連到家裡內部裝置
自家官網連線不到 (已解決)
請問公司網路通暢,卻部分固定的使用者無法連到特定網頁 ,求救~~~
Alma Linux與Rocky Linux,選擇哪一個比較好?
API網址列 網址問題
請教各位前輩關於 IT 管理者為 User 重設 AD 帳號的密碼的行政流程
熱門回答
公司有人常常亂改IP位置(想問有甚麼辦法可以將IP鎖住不給更改)
自家官網連線不到 (已解決)
請問公司網路通暢,卻部分固定的使用者無法連到特定網頁 ,求救~~~
DDR3記憶體 只抓到一半
請問有提供對外http連線服務的主機,都需要上SSL嗎?
熱門文章
筆電Wifi不見後, 筆電該怎麼上網?
在任何雲端上運行:雲端的可移植性你有考慮過嗎?
量子計算「基礎」3. 量子操作
[C#] Remove Element 解法
「天文學Python」如何在《獵星者旅店》中學會用Python取得星座的亮星資料來繪製星座圖?
IT邦幫忙
×
標記使用者
輸入對方的帳號或暱稱
Loading
找不到結果。
標記
{{ result.label }}
{{ result.account }}