fbpx
Category

Javascript

HTMLJavascript工程思維技術問題網頁前端資源整理

盤點10個超多人使用的前端動畫庫！

在網頁設計上，你可能固定使用某幾個動畫庫，但你知道 GitHub 上面其實有超多超夯的前端動畫庫嗎？ 前端動畫不僅能代表該網頁製作者與單位的用心，同時也能增加使用者好的體驗， 這篇文章幫喜愛網頁互動動畫的你整理了10個超多人推薦的前端動畫庫！ 我們趕快往下看吧！ 1. jQuery.countdown 創立者：hilios GitHub 人氣：2.2K stars GitHub 傳送門：https://github.com/hilios/jQuery.countdown 2. aniJS 創立者：anijs GitHub 人氣：3.6K stars GitHub 傳送門：https://github.com/anijs/anijs 3. matter-js 創立者：liabru…
學程式助教
March 4, 2020
AlgorithmJavascript工程思維

JS 學資料結構與演算法 (排序篇) — 合併排序法 Merge Sort

合併排序法 Merge Sort合併排序法定義合併演算法與上一篇介紹的快速排序法一樣，都運用了 Devide and Conquer 的概念，基本上分為兩個步驟：分割與整合。首先利用遞迴把原先未排序的陣列平均分割成兩半，直到各邊都只剩下一個元素（上圖紫色方塊），接著排序後再一一整合起來，最後會合併成一個排序後的陣列（上圖綠色區塊）。分割 （紫色區塊）把大陣列分一半成為兩個小陣列把從上一步驟切好的兩個小陣列再各自分一半重複步驟 2 直到每個小陣列都只剩一個元素整合 （綠色區塊）排序兩個只剩一個元素的小陣列並將其合併把上一步驟排序好的小陣列合併並排序成一個陣列重複步驟二直到所有小陣列都合併成一個大陣列讀者比較有疑問的也許會是這個部分： Q: 跟 這兩個陣列是如何合併成最終的已排序陣列呢？A: 因為這兩個陣列在合併前就已經各自完成排序了，因此只要比較各自最左邊的元素的大小，將比較小的元素放進新陣列中，最後就能完成排序囉！其實從一開始只有一個元素要進行合併時就是運用這個方法喔（只有一個元素的陣列視為已排序）！時間複雜度最佳：O(n log n)最差：O(n log n)平均：O(n log n)時間複雜度的部分，我們依然可以分為 “分割” 與 “整合” 兩個步驟來看。分割：分割含有 n…
學程式助教
January 14, 2020
AlgorithmJavascript工程思維

JS 學資料結構與演算法 (排序篇)— 快速排序法 Quick Sort

大家好我是老莫，也可以叫我 Kyle為什麼要寫這個主題？之前在尋找實習職缺的過程中，遇到幾次當面或者電話面試考資料結構與演算法等技術題，測驗結束才發現自己沒有透徹了解這些概念，有些概念懂了卻不知道怎麼用程式語言實作出來，想當然面試結果並不理想。因此我決定設定這樣的主題，並以自己最擅長的語言 JavaScript 將資料結構或演算法實作出來，除了能夠了解背後的概念外，也有能力可以透過程式語言實作出來，並利用這些概念去解決真實狀況遇到的技術問題。主題涵蓋的範圍？這次 “JS 學資料結構與演算法” 系列預計會包含以下範圍：排序 (sort)搜尋 (sesrch)動態程式規劃 (dynamic programming)Hash Table 雜湊表Linked List 鏈結串列Stack 堆疊Queue 佇列Tree 樹Graph 圖形Recursion 遞迴其中各類別可能又會往下細分子類別依次介紹（如排序下細分各種排序法），我想這會是一個漫長的主題，但相信踏實地走完這趟旅程一定會讓基礎更加扎實，也能幫助像我一樣對這些觀念一知半解的讀者能有更透徹的理解，如果對這個主題有興趣的朋友們記得追蹤我囉！*此後內容皆假設讀者了解基本演算法定義與時間複雜度概念快速排序法演算法定義：快速排序法採用 Devide and Conquer 的概念，將一個大問題拆分成數個較小的子問題，再將子問題的結果整合成原問題的答案。作法：選定一個基準值 (Pivot)將比基準值…
學程式助教
January 4, 2020
Javascript專案思維網頁前端

[筆記] 從零接觸 Google Map API 2：在 Vue.js 中使用 Geocoding 將地址轉換成地標

為了準備 Bootcamp 畢業前的 Final Project — 製作類似訂餐平台 — 開始接觸和學習 Google Map API，上一篇筆記是從零開始學習，並在 Vue.js 中嘗試使用，透過 Maps JavaScript API 服務實作地圖、地標、訊息視窗功能 — 最終將不同行政區的數間假餐廳展示在地圖上，提升使用者體驗 — 本篇將筆記使用 Maps JavaScript API 的另一項功能「Geocoding Service」 (more…)
學程式助教
December 11, 2019
Javascript專案思維網頁前端

[筆記] 從零接觸 Google Map API 1：在 Vue.js 中實作地圖、地標、訊息視窗

最近在準備 Bootcamp 畢業前的 Final Project，由於專案和訂餐平台有關，想說若使用者能透過地圖快速瀏覽營運中的餐廳，或能在訂單上看到地圖顯示領餐地點，可以增加使用者的體驗。由於之前還沒有碰過 Google Map API，更不用說在 Vue.js 當中使用，想說趁專案開始前，能嘗試自學一下，也看一下實作的可行性與成果。以下將筆記「從零接觸 Google Map API，在 Vue.js 中實作地圖、地標、地標訊息視窗」 (more…)
學程式助教
December 10, 2019
Javascript

[筆記] 從零開始製作 Chrome 套件到上架商店

專案緣起 在 Alpha Camp 擔任實習助教的一個好處，是可以參加大約每兩週舉辦一次的 Meetup — 不僅可以聽到他人分享獨特的專案和技術，有時也能給自己一些機會去挑戰和探索自己未知的領域。 一個多月前，公佈了隔一次的主題是「製作 Google Chome 套件」，且開放有興趣的與會者自己摸索和製作，最後再與大家分享。當時內心馬上冒出了兩種心情和想法： 眉頭一皺：這是什麼領域？會用到什麼技術？該製作什麼主題的套件？ 內心雀躍：好酷的未知領域，如果能自己做出個好用的套件，一定很棒！ 老實說，內心雀躍的心情馬上壓過所有的情緒，因此我很快就做出了決定。但馬上面臨的是主題挑選 — 在向朋友們收集可能的需求，但沒有找到合適的主題後，我開始思考著：「我在開發網路應用程式的過程中，是什麼行為不時吃掉了我很多時間？」 這可能就是我的需求，也可能會是其他開發著的需求 — 一個 Side Proeject 因此誕生。 (more…)
學程式助教
December 5, 2019
AlgorithmJavascript

JavaScript 的 Leetcode 演算之路(一)

演算法對一個工程師來說是一個非常重要的技能，先撇開在工作上面的實務影響不管，光在求職的過程中，就有許多面試需要考試，而考的內容八九不離十是演算法考題，所以對於一個厲害的工程師來說，演算法尤其的重要，偏偏我的數學跟資料結構沒有這麼厲害，所以我也需要花點苦工來好好的學習，接下來我就會透過leetcode這個演算法考題的網站，學習演算法，把我寫好的題目來分享給大家，可以一起討論。 (more…)
學程式助教
December 2, 2019
Javascript網頁前端

Node.js 是什麼?基礎入門介紹！

這篇文章適合誰 這篇文章適合想學習Node.js這個框架對於JavaScript並且對於JavaScript有一些認識的讀者，本篇文章將用hello world這個在學習每個程式語言時都會先接觸到的範例，讓你先初步認識Node.js。 何謂Node.js Node.js顧名思義便是使用JavaScript語言作為基礎的框架，特別的是，相對於jQuery或是YUI等在瀏覽器中運行使用的JavaScript框架，Node.js是作為網站程式的後端框架，就如同PHP或是Java一般開發網站。 換句話說，JavaScript不只可以跑在瀏覽器中，還可以當做網站的伺服器。主要的原因是在於隨著Gmail等AJAX網站以及技術的興起，許多的程式開發者紛紛投入心力鑽研JavaScript，並且有許多開發心得、優化技巧陸續被發掘，加上瀏覽器之間的競爭越來越激烈，JavaScript的執行效能持續性的突破，因此最終便誕生了Node.js。 (more…)
學程式助教
November 28, 2019
Javascript網頁前端

JavaScript入門系列：基礎語法介紹！

這篇文章適合誰 這邊文章適合對於JavaScript有興趣也有一點基礎的開發者，以下除了介紹何謂JavaScript外，本篇將運用簡單的範例程式，讓大家可以初步認識JavaScript。 什麼是JavaScript? 如果您想讓網頁動起來，除了使用各種程式語言外，JavaScript 是最適合使用的語言之一。早期的網頁都是用 HTML 語法，製作出一個個靜態網頁，向用戶顯示一些固定不變的資料。若想要讓網頁有更多的變化並且更加精緻，您就必須加上某些程式語言，如 Script 語言。 (more…)
學程式助教
November 28, 2019
HTMLJavascript網頁前端

JavaScript入門系列：BOM和DOM基本觀念

前言在剛開始學程式時，你是不是常常聽到一個說法：HTML、CSS 與 JavaScript 是網頁前端三大要素。HTML 主要是負責資料與結構，CSS 則負責樣式的呈現，而JavaScript 負責行為與互動。但其實JavaScript 並沒有提供網頁的操作方法，前端開發者在網頁的操作方法都是「瀏覽器」提供的。 這些操作方法基本上會分別由這兩種物件所擁有：「BOM」與「DOM」。所以在瀏覽器上的 JavaScript 包含了：JavaScript 核心 (以 ECMAScript 標準為基礎)BOM (Browser Object Model，瀏覽器物件模型)DOM (Document Object Model，文件物件模型)前端開發者就是透過 JavaScript 去呼叫 BOM 與…
學程式助教
November 27, 2019