Uncategorized

HTML入門系列:基本觀念介紹!

HTML入門&基本觀念介紹!         構成一個網頁,最重要的就是他的結構,而HTML就像是他的骨架,而CSS就是像是我們身體上的肌肉一般,而JS則像是人體的神經、血管般調整著我們身體、傳遞訊息,那麼HTML究竟是指哪些語法呢?   什麼是HTML?       HTML全文又稱為HyperText Markup language ,也就是所謂的超文本標記語言,是網頁構成的基本要素,換言之,網頁就是由一堆html所構成,透過瀏覽器,顯示文字、圖片、以及其他相關我們可以在網頁上看見的基本元素。而對於剛學程式的朋友來說,HTML有以下幾個重點: HTML的基本架構: HTML的基本觀念與優點1.容易學習-HTML的文檔製作非常簡單易懂﹐功能強大之餘還支持不同格式的文件鑲入。2.製作門檻低-HTML是文本﹐它需要瀏覽器的解釋。只要你學會了HTML﹐你就可以直接在Windows的記事本或寫字版上進行製作和編輯﹐當然你也可以用WPS來編寫﹐只要注意在存檔的時候用.htm或.html來做檔名就可以了3.有利於搜尋引擎理解你的內容,透過HTML所構成的頁面被稱作所謂的”靜態頁面”﹐而Google爬蟲會優先收錄靜態網頁﹐所以HTML對於Google來說就像是鯊魚聞到血腥味一樣﹐有利於吸引Google爬蟲。4.加快瀏覽速度-因為靜態網頁無需連接數據庫﹐因此比打開動態網頁的速度較快﹐對於消費者體驗來說有所幫助。5.網站更安全-因為HTML頁面不會受Asp相關漏洞所影響。 HTML的缺點與限制 1.太簡單﹐不能適應現在越來越發達的網路世界和應用的需要﹐比如手機﹑PDA﹑信息家電等都不能直接顯示HTML2.太龐大﹐由於HTML代碼不規范﹑臃腫﹐瀏覽器需要足夠智能和龐大才能夠正確顯示HTML。顯然在你的PDA上裝一個IE6是不可能的。空間不夠﹐運算也跟不上3.數據與表現混雜。這樣你的頁面要改變顯示﹐就必須重新制作HTML。對不同的網路設備顯示同樣的數據都需要制作不同的HTML4.只能對文本進行排版﹐而且HTML樣式使用標準文本標識﹐不能創建一些特殊效果 所以我該如何學習HTML? 有什麼比較快的方法嗎?       答案是沒有的﹐學習程式語言就像是學習廚藝一樣﹐只有透過不停的嘗試﹑嘗試和嘗試才能讓自己有所成長﹐並且慢慢強大。過程中你會一直遇上困難和失敗﹐但你在不斷解決困難的過程中能夠不斷發掘新的知識﹐從失敗中發才能不停的成長。無論你是學習那一種程式語言﹐都需要經歷困難和失敗才能讓自己更加強大﹐正所謂:不經一番寒徹骨,怎得梅花撲鼻香呢?對吧﹐我們能做的不是要找捷徑﹐而是透過不同的媒介和平台去不斷學習﹐那麼下面快樂學程式會為大家介紹一些很棒的程式教學網站﹐讓大家可以不斷提升自己。 1.w3schools.com- 語法練習的好地方這個網站是目前全球訪問量最大的網頁開發教程網站﹐網站裡有多種程式語言的教學﹐而且每種程式語言由淺到深的解說﹐從語言的介紹到不同的功能和方法都會分章節說明。所以無論你是從零開始學的白紙﹐還是已經在學習但遇到困難的新手都可以在這個網站上找到相關資訊﹐是個非常不錯的網站。那麼網址我們當然要雙手奉上﹐請慢用https://www.w3schools.com/ 2.CodeAcademy- 免費的教學網站這是全球其中一個最受歡迎的免費coding教學網站﹐已經有超過2400萬人透過這個網站學習到了如何去coding。這個網站是非常適合新手入門的同學去學習的﹐網站會一步一步仔細的教導而且還有實作﹐所以學習起來非常的快速! 3.StackOverflow- 實際案例與疑難雜症的解決處  這個網站比較適合一些已經有在嘗試動手實作的同學﹐當你在coding的時候遇上困難了﹐那麼你可以在這個可以解決超過80種程式語言問題的網站上找到答案﹐讓你的coding之路更加順暢。  如果你覺得爬網站麻煩又費時,不妨直接點擊快樂學程式的網頁前端課程,老師直接手把手帶你入門HTML !完整的基礎入門課程省下你獨自摸索花費的時間!   課程上架Udemy ! 準備一個輕鬆的週末,只要一天的時間,帶你建置靜態網頁。從實作中打開靜態網頁的大門,讓你的研究之路不是只有自己,有我們跟你一起努力!課程中你可以瞭解網站建置的世界觀與網站版型掌握HTML5的使用方式掌握 CSS3的使用方式使用Bootstrap處理前端UI框架現在開始上課!如果你的入門還在單打獨鬥,歡迎來到快樂學程式找到志同道合的夥伴,你的自學之路不孤單。快樂學程式  
jing
April 21, 2021
Uncategorized

JS 學資料結構與演算法 (排序篇) — 選擇排序法 & 插入排序法

前言這篇文章將為排序篇章做一個結尾,文章會介紹選擇排序 (Selection Sort) 與插入排序 (Insertion Sort) 兩種排序法,透過上圖的排序法複雜度一覽表可以發現他們的執行效能相比其他排序法來的差一點,因此比較不常被使用,但要強調的是他們仍然有適合使用的情境,本篇文章將會簡單紀錄這兩個演算法的定義與程式碼實作。選擇排序法 (Selection Sort) 選擇排序法示意圖簡單來說選擇排序法一直重複的做兩件事:從尚未經過排序的陣列中找到最小值將當前找到最小值擺到最左邊時間複雜度 O(n²)程式碼範例這邊先設陣列的第一個數字是目前的最小值,然後往後把陣列的數值一個一個讀取,如果讀取的下個數比最小值大,就不作處理。而如果讀取到的數比目前的最小值小,就把目前的最小值換成這個數。重複這個方法把所有陣列裡的數都讀過一遍,就能確保目前的最小值為整個數列的最小值,扣除掉已經確定的最小值,剩下未確定的元素再重複執行以上步驟,直到陣列完成排序。function selectionSort(array) { const length = array.length; for(let i = 0; i < length; i++){ //…
學程式助教
March 16, 2020
Uncategorized

用Vue.js框架實作自己的Blog – CH3 Vue實例

上回這裡成功的建置環境後,進入下個環節的討論。就是在接觸框架之前,其實並不是非常明白所謂的架構,就會常常出現各種功能混在一起的情況,像是一個Js事件需要同時處理「資料變動」、「樣式修改」或是「資料處理」以及「後端互動」,雖說在開發時都算順利,但過了幾天後回來開發,或是後來要針對網站進行改動維護,卻完全不知該從何下手,而這也就是框架最大的價值,他讓我們在開發時,每一段Code可以專注處理某一個部分的任務,結構分明,在維護上也能更加輕鬆。   開始使用Vue.js   在Vue的官網其實有明確指出「建議不熟悉Vue或是node.js環境使用的開發者先不要使用Vue-Cli」,所以建議一開始接觸Vue.js框架可以先從CDN開始熟悉,基本上只需要在HTML檔的 <head> 中引入CDN即可使用: //開發者模式版本 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> //產品開發使用的穩定版本 <script src="https://cdn.jsdelivr.net/npm/vue"></script>   創建Vue實例 在引入CDN之後,要讓網頁能夠成功顯示需要有兩個要件,分別是模板 (Template)與實例 (Vue Instance),模板可以直接建立在HTML檔中,而實例則是Vue的Javascript物件實例,首先我們先從實例開始說起。 Vue的實例主要是關注資料面的操作,他會負責控管資料以及處理資料,而在Vue的實例中,物件的屬性與方法是有既定寫法的,最核心的屬性設定有 el 以及 data ,el 是指Vue實際掛載在DOM的哪一個節點,通常這個屬性會設定為 "#app" ,這個「掛載」的觀念會在後面的章節中做解釋,這邊可以先把他理解為Vue實際能在DOM中的作用範圍,如果超出這個節點,Vue就無法控制了;接著 data 則是這個頁面會使用到的資料,寫法就是 Object ,key是在模板使用的資料名稱,Value是資料的實際內容,像下方的範例就是我們在Vue中建立了一筆資料,資料的變數名稱叫作 text ,而資料內容是 "Hello World!": var vm = new Vue({ el:…
學程式助教
March 11, 2020
Uncategorized

用Vue.js框架實作自己的Blog – CH2 環境建置

在上回這裡對Vue有了基礎概念後,在開寫Vue之前肯定需要經歷一番環境建置的陣痛期啦~不過其實在建置Vue.js的環境我個人覺得還算友善,不像某Tensor開頭的機器學習框架,要建立GPU計算的環境真的是弄到懷疑人生......,今天就來跟大家分享一下小弟在建置Vue.js環境時遇到的過程以及遇到的狀況   首先,那個Node.js與NVM (Node Version Manager)   因為在學習Vue之前我主要都是利用SFTP auto save上傳到Host然後再看改動的方式開發,基本上沒有接觸過本地端的開發方式,所以也沒有使用過Node.js的經驗,所以在安裝Vue之前必須先進行Node.js的環境安裝,基本上這也是在所以過程中最讓我印象深刻的地方。   安裝Node.js有幾種方式,第一種就是直接上Node.js的官方網站下載直接安裝,我一開始也是直接利用這種方法,但後來後悔了;第二種是利用Node的版本控制工具 - NVM進行安裝,這是我蠻推薦的作法,畢竟在開發或維護不同的專案時,每個專案開發時的Node版本可能不盡相同,所以這時候NVM的優勢就是可以讓我們直接快速地進行Node.js的版本切換,不用再刪除重裝之類的。   要安裝NVM的方法基本上非常簡單,只需要使用他們官方的Github上說明的指令,即可在Terminal進行安裝: curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash 在下載完NVM之後可以嘗試在Terminal執行 nvm --version 如果他有回應相應的版本號,就代表NVM安裝成功了,接著就可以進一步利用NVM安裝Node.js。   利用NVM安裝Node.js…
學程式助教
March 11, 2020
Uncategorized

用Vue.js框架實作自己的Blog – CH1 新的開端

接觸前端到現在也差不多快一年半了,過去在開發前端的時後,都是使用原生javascript與jQuery以及php進行開發,雖然隨著時間推移接觸到的東西越來越多,開始有了有系統性開發與後續維護的需求,剛開始頂多就是將JS與php物件化,但還是無法完全解決頁面控制以及資料、事件、渲染、樣式控制等不同任務間的分離,所以開始接觸Vue.js框架來增加開發效率並且將原本幾乎純手刻的這個Glovecoding blog進行翻新,順便寫篇系列紀錄一下~ Beginner of Vue 在約莫半年前的時候其實就有試著自學Vue框架的想法了,但當時自己的背景知識量還不大夠,包括AJAX的運作以及同步異步的線程阻塞問題等,在當時都是我無法掌握的技術,最近把這些東西補齊並且看了根webpack相關的技術之後,才回頭撿起這個框架慢慢開始啃。Vue的框架有一個非常大的優點,尤其是對於英文較不熟練的開發者而言,因為開發Vue框架的工程師是來自中國的,所以他本身官網的技術文件都支援簡體中文,如果不習慣閱讀簡中的朋友也可以利用Chrome 的功能把它翻成繁中XD,在進入實作之前還是得先來了解一下這個框架本身的特性。 Components 組件的概念 在使用Vue框架的時候會不斷地使用到Components來進行網站頁面的組裝,依照不同的頁面需求,引入不同的components 到根(Root) 或是常見的App頁面,在這個框架中,其實整個網站結構很像一個葡萄串,從最上面的Root 到下面的頁面(View) 與組件(Component) 不斷的往下串,最終變成一個不斷串連組裝的網站結構,像我的Blog 結構大概長這樣: 整個部落格主要分為首頁、分類、關於、文章、404Notfound 五個頁面,這五個頁面會附著於#APP這個根上,而每一個頁面各自會使用到不一樣的組件進行組裝,這些組件的方便之處就在於:像是首頁與分類頁面都會使用到卡片作為文章的顯示方式,在一般的情況我們需要把相同的版型寫在不同的頁面,這就會造成在維護上的麻煩,尤其又是使用PHP生成內容的時候,只會使頁面變得越來越複雜,然而在Vue框架中,我們可以把這些會重複使用到的版型部分化做組件(Component) 他是一個獨立的模板,在需要使用到這個模板的時候,我們只需要引入這個版型即可,像blog首頁的卡片式文章顯示就是利用上圖中的紅色組件 - CardUi 所架構,而組件的運作方式在之後的文章中,我會在獨立介紹他。 資料驅動一切 在Vue框架當中,有另一項特色就在於它是利用資料驅動所有變化的,當資料發生變化時,Vue會根據我們設定的情況做出相應的改變,首先在這個架構中,資料與模板是獨立分離的,在一開始寫網頁時,我們會直接將內容寫在HTML的標籤當中,或是透過PHP在預處理階段時生成,但在Vue框架中,資料會獨立存取在Vue物件的Data中,然後在物件被實例化的Creat階段時渲染(Render) 進模板當中,像是這樣:…
學程式助教
March 11, 2020
Uncategorized

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
Uncategorized

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
Uncategorized

[筆記] 從零接觸 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
Uncategorized

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

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