iT邦幫忙

鐵人檔案

第 12 屆 iThome 鐵人賽
回列表
Modern Web

JavaScript 菜鳥研究室 系列

學習過JavaScript、jQuery與Vue框架,但對於JS基礎觀念並不熟悉。希望透過30天的時間,將JS的基本知識融會貫通,並藉此打造一個簡易的電商網站。

鐵人鍊成 | 共 30 篇文章 | 7 人訂閱 訂閱系列文 RSS系列文
DAY 1

菜鳥日記Day 1-序

大家好,我叫阿瀚是一位軟體開發經驗非常資淺的程式菜鳥大學讀的是外文系,出社會後找過幾份工作,皆圍繞在語文強項,做的是海外業務、英文翻譯及市政府新創單位的招商工作...

2020-09-15 ‧ 由 阿瀚 分享
DAY 2

菜鳥日記Day 2-建立「森林步道資訊網」

一開始先建立一個專案資料夾「Taiwan_Forest」,並新增HTML、CSS、JS檔案 設置完初始環境後,透過axios從遠端撈取林務局的資料 注意:...

2020-09-16 ‧ 由 阿瀚 分享
DAY 3

菜鳥日記Day 3-什麼是JSON?

JSON是由「道格拉斯·克羅克福特」所構想並設計的一種輕量級資料交換語言 在閱讀JSON資訊前,請記得安裝JSONView套件,否則會像下圖一樣,看到一堆亂碼...

2020-09-17 ‧ 由 阿瀚 分享
DAY 4

菜鳥日記Day 4-載入Leaflet地圖套件

在載入林務局的JSON資料庫以後,使用者即可透過select選擇器,查詢森林步道的文字資訊。此外我們還可以載入Leaflet的地圖套件,讓網站畫面看起來更加豐富...

2020-09-18 ‧ 由 阿瀚 分享
DAY 5

菜鳥日記Day 5-在地圖上增加標記(marker)

在加入Leaflet地圖元件後,我們還可以在地圖上製作標記(marker)及註釋增加複數標籤的方式如下 設定變數名稱,如let = Alisan 設定標籤座標...

2020-09-19 ‧ 由 阿瀚 分享
DAY 6

菜鳥日記Day 6-在地圖上增加圓圈與多邊形標示

若想在地圖上畫出特殊的標記可使用圓圈(circle)與多邊形(polygon)這兩種語法1.設定變數circle = L.circle2.設定圓心座標[23.4...

2020-09-20 ‧ 由 阿瀚 分享
DAY 7

菜鳥日記Day 7-用for迴圈撈取座標資訊並增加標記

前幾天我學會如何使用手動的方式,使用Google地圖將座標位置一個一個撈出來,並標記在森林步道的網站地圖裡。但使用手動方法撈取資料,真的太沒效率了!所以我就在想...

2020-09-21 ‧ 由 阿瀚 分享
DAY 8

菜鳥日記Day 8-使用MarkerCluster增加網頁讀取效能

昨天我們成功透過for迴圈的方式,從JSON資料庫裡撈出座標資料,並將其標記在地圖上。但因口罩地圖的原生資料有16萬筆,除了藥局名稱、地址、口罩數量、座標外,還...

2020-09-22 ‧ 由 阿瀚 分享
DAY 9

菜鳥日記Day 9-使用判斷式區分標記顏色

目前臺灣的口罩數量非常充沛,大部分藥局都可以買到口罩但在今年2、3月新冠肺炎爆發之際,許多藥局的口罩被搶購一空若口罩地圖上所有標記(marker)都是同一種顏色...

2020-09-23 ‧ 由 阿瀚 分享
DAY 10

菜鳥日記Day 10-用Leaflet版的Geolocation擷取所在地資訊

為方便使用者找到離自己最近的藥局,我在口罩地圖裡加入Leadlet版的Geolocation來標記使用者的所在位置。 在初始版本裡,我們是使用center語法,...

2020-09-24 ‧ 由 阿瀚 分享