javascript Archives - Page 2 of 3

跟著 YDKJS 作者 Kyle Simpson 打造全新 JavaScript Mindset : 序 (一)

Photo by Hitesh Choudhary on Unsplash 前言這是一系列我參加完鐵人賽的整理，最近也透過火箭隊軟體工程師培訓計畫（高雄）的場地，舉辦一系列實體的讀書會導讀，已經進展到一半了，每次約 3 小時，一週一次已經連續約一個月左右。透過實際寫過文章、實際講過 YDKJS 這個系列，這次回顧，把一些真正重要的「大綱」整理出來。這部分主要會分享一些「自己」的看法，如果想知道 YDKJS 作者 Kyle Simpson 對於 JS 的想法，可以參考我的鐵人文章。鐵人賽…

學程式助教March 14, 2020

Javascript 工程思維網頁前端

如何在主流 JavaScript 框架中做選擇？横向對比 Vue, React, AngularJS, and Angular2

本文原文撰寫於2017年，部分資料可能因時空背景而有不同。如果你不曉得該如何為你的產品選擇一個合適的前端框架，這篇文章也許可以給你一些啟發。一個有趣的事實是：IBM 發表的 2017 年最值得學習編程語言名單中，JavaScript 榜上有名。正是這位 IT 巨頭指出，JS 在網站中驚人地達到 94.4％的使用率，而且「不太可能降低」。 JavaScript 能確保「對用戶非常友好的網頁，因為它負責整個 web 界面，包括動畫和交互」。不管你怎麼看，JavaScript 很重要。這也指明了潛在 Web 開發人員的方向：如果你深入前端，你不得不在某些時刻面對 JavaScript。並且正確的開發指南可能有助於此。讓我們假設你知道 JavaScript 基礎知識，不是一無所知的那種，如果假設是正確的，…

學程式助教March 11, 2020

Algorithm Javascript 工程思維

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

Algorithm Javascript 工程思維

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

Algorithm Javascript

JavaScript 的 Leetcode 演算之路(一)

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

學程式助教December 2, 2019

Javascript 網頁前端

使用Vue的時候如何共用Sass變數?

我們在開發網站的時候常常會需要說將Sass的環境變數，或是function與mixin給抽取出來，達到共用，不要重複造輪子! 但是你會發現我在使用Vue開發的時候，雖然組件化方便我們管理每個組件的Sass，但是多了個不方便的就是如果要使用變數，或是function與mixin的時候要怎麼辦? 如果是聰明的你一定會想到這樣! 但是問題來了，如果今天你有100個 component 你就要引入100次，然後如果你忘記引入一個你就要慢慢找........(WTF 所以那有沒有方法可以全域共用了? 答案是 "有的" !!! 其實很簡單，我們只要對webpack的設定做一點小小修改就可以達到了 { test: /\.(sass|scss)$/, use: }, 看到了嗎~就是在loader裡面去做設定，這樣他就會幫你把那個_mixin.scss變成全域的使用，你就不用在component裡面在載入_mixin.scss了! 是不是很方便XD (more…)

學程式助教November 26, 2019

Javascript

如何在Vue裡面使用Element-ui並修改CSS樣式呢？

大家好！我是Mike，今天要來說說大部分使用 Vue 開發公司內部後台系統的時候，通常大部分都會需要使用 Vue 的 Ui framework 來開發，雖然大部分的Ui framework 都有自己的 CSS 風格，我們不用再去寫 CSS，但是難免會有需要自己修改 UI 的 CSS的時候，但是每套 Ui framework 的修改方式又不太一樣，在這邊我將介紹這套 Element-ui 是如何在Vue裡面去做 CSS 修改。首先我們先掛載 Element-ui 在這邊我們把所有的 element-ui 給掛載到全域，還有它的…