TypeScript物件導向類別(Class)的使用方式大公開

文、意如老師

參考目錄:
第1篇、TypeScript初探篇
第2篇、JavaScript的型別在TypeScript中應用(一)-認識原始資料型別
第3篇、JavaScript的型別在TypeScript中應用(二)-認識物件型別
第4篇、TypeScript物件導向-類別(Class)的使用方式
第5篇、TypeScript物件導向-介面(Interface)的使用方式

在使用javascript時以往都是使用建構函式來實現類別,現在Javascript的ES6(含以上的版本) 已經完全支持類別(Class)的功能了,接下來我們就來好好認識一下在TypeScript中如何使用類別。

閱讀全文 →

網頁工程師必學!TypeScript初探教學

Photo credit:Pexels

文、意如老師

任務一:認識TypeScript是什麼?
 1-1 基礎介紹
 1-2 TypeScript強型別特色

任務二:環境建置
 2-1 下載編輯器
 2-2 下載npm套件
 2-3 安裝TypeScript

任務三:建立第一個TypeScript程式
 3-1 建立TypeScript
 3-2 編譯 TypeScript為Javascript
 3-3 執行Javascript

閱讀全文 →

Web網頁伺服器-Nginx實作架在Windows上

Photo credit:Pexels

文、意如老師

科普一下Nginx是一個輕量級的Http網頁反向代理伺服器,優點是支持多國語言、暫存少、併發強,同時間連線次數可以比較於Apache -httpd伺服器 來的更多,例Apache的連結數預設最大為250個連線,但一旦超過200以上,網頁開啟速度就會變的超級慢,反之如利用工具Docker-Nginx 則可承受大約1024個連線。

另外Nginx它有一個最大的特點是在處理靜態(多文字Html、圖片等)的性能,足足能比Apache高3倍以上,所以如果專案偏向多靜態處理,建議一定要試試看Nginx伺服器。

閱讀全文 →

工程師網頁前端框架,Vue.js屬性綁定、事件處理、計數器篇

文、意如老師

續上一篇 最熱門的網頁前端框架,工程師一定要了解Vue.js 資料綁定篇 認識資料綁定後接續著我們來認識屬性綁定及事件處理,最後我們要實作一個計數器。

任務一:屬性綁定-v-bind 使用方式
任務二:綁定css-style屬性
2-1.綁定多個css-Style屬性
2-2.綁定:style物件object 寫法(集合)
2-3.綁定:style array 寫法
任務三:事件處理
任務四:實作計數器

閱讀全文 →

自己架設我的wikipedia維基百科

Photo credit:Pexels

文、意如老師

前幾天接到任務,公司想要將自己的資訊放到維基百科,並且想要架在自己的伺服器上,說實在之前我也沒做過,但既然身為工程師就要有挑戰的精神,話不多說,開始實作吧!(實作時間約30分鐘)

任務一:下載mediawiki套件
任務二:安裝Xampp伺服器與資料庫
任務三:伺服器與資料庫基本設定
3-1.將檔案搬移至htdocs資料夾下
3-2.設定port號
3-3.錯誤排除處理
3-4.mediawiki基礎設定

閱讀全文 →

最熱門的網頁前端框架,工程師一定要了解Vue.js 資料綁定篇

Photo credit:Pexels

文、意如老師

了解了基本的程式架構後,接下來我們要來認識資料綁定以及屬性綁定

任務:資料綁定
1. 使用v-text 接資料
2. 使用大括弧 {{ }} 接資料
3. 認識資料型態function
4. 使用v-html 接資料
5. 使用v-model接資料
6. 設計表單資料綁定

閱讀全文 →

最熱門的網頁前端框架,從零開始學Vue.js 安裝篇

文、意如老師

什麼是Vue.js?
Vue.js是現在正當紅的網頁前端框架之一,主要程式語言為javascript,無論你是想寫一些簡單的網頁或者一個大型複雜的專案網站都可以快速使用Vue框架,來達到良好的開發效率。

我們直接先實作把Vue.js安裝到電腦上吧!
本篇會介紹3種比較常用的安裝方式。

方式1:下載回來至本機
方式2:使用CDN方式引入
方式3:使用command 下指令安裝

閱讀全文 →

將所有的網站導入GoogleFirebase一起分析數據

文、意如老師

上一篇我們使用Google Analytics只是針對一個網站來做分析,但是如果我們有很多網站很多專案是否可以導入一起分析呢?

答案是可以的,本篇將實作把所有的網站導入GoogleFirebase一起分析數據

閱讀全文 →

你的網站GA了嗎?Google Analytics網站分析使用教學

Photo credit:Pexels

文、意如老師

Google Analytics (Google分析) 簡稱GA,顧名思義就是Google的數據分析工具,我們可以把自己正在經營的網站導入GA,藉由GA來幫我們蒐集一些有用的資訊並把它記錄下來。

例如:使用者都是使用什麼平台來上網(手機?電腦?)、進入網站的目標對象(年齡層?性別?來自地區?)、觀察使用者進入網站後的行為(網頁瀏覽次數,按鈕點擊次數,廣告點擊次數)等等,藉著GA來幫我們蒐集了這些使用者的大量資訊與數據後再來做有效的分析,也提高未來網站改善的依據及創造更大的利益。

閱讀全文 →

工程師不告訴你的秘密!抓取股票資料只要「這樣」做!

Photo credit:Pexels

文、意如老師

首先準備好待查詢的股票代碼,此範例以長榮海運股票為例,代碼為2603,接下來到google直接搜尋2603,就可以找到長榮海運股票的資訊,也就是我們這次爬蟲要抓的資訊。

閱讀全文 →

工程師一定要知道的數據型態資料|菜鳥救星RookieSavior

文、意如老師

什麼是資料?資訊?
什麼是結構化資料?半結構化資料?非結構化資料?
這些資料的優缺點分別是?
為什麼工程師一定要知道?

要了解什麼是結構化之前,我們首先需要認識什麼是資料?資訊?

閱讀全文 →

什麼是網路爬蟲?為什麼每一個工程師都要會?|菜鳥救星RookieSavior

文、意如老師

會爬蟲的找工作很吃香?!在幾年前的確是這樣沒錯,就跟英文一樣,以前的人總說”會英文”很吃香?那現在呢?英文已經變成基本一定要會的科目了,而爬蟲也已經演變成是工程師的基本技能,這個技能已經不會幫你加到什麼分數了,但是如果你是個工程師或是你想成為工程師,爬蟲又會是一個必須所學的基本技能,所以今天我們就來分享到底什麼是爬蟲,為什麼每一個工程師都會要會。

閱讀全文 →

將你的網站快速架站到免費雲端伺服器000webhost|菜鳥救星RookieSavior

文、意如老師

寫好的網站最後一步就是要發佈到伺服器上讓大家都可以看到你的網站,所以勢必需先準備好一台伺服器電腦,接著把網站架在自己的主機上,另外還需要準備一個固定IP以及個人一定要會的基本架站技能,最後還要顧及到伺服器24小時不能關機等等一些的瑣碎的事情,但如果你只是想測試看看網站效果的話,其實就不需要這麼麻煩了,我們今天就要快速簡化這些事,首先一開始要認識的就是線上雲端伺服器。

閱讀全文 →

Javascript網頁程式_即時更新日期時間 (下)|菜鳥救星RookieSavior

文、意如老師

續上一篇 — Javascript網頁程式_處理日期、時間篇(上)|菜鳥救星RookieSavior 熟練以上基礎工後,接下來要讓日期/時間隨時即時更新。

任務一:認識setInterval() 函數,設定事件間隔時間(重複執行)
任務二:認識setTimeout() 函數,設定事件間隔時間(只執行一次)
任務三:認識onload 事件,網頁載入事件
任務四:實作即時更新日期/時間
任務五:客製化自己的日期/時間
任務六:認識 clearInterval() 函數,清除設定的間隔時間

閱讀全文 →

Javascript網頁程式_處理日期、時間篇(上)|菜鳥救星RookieSavior

Photo credit:Pixabay

文、意如老師

任務開始:先建立環境
任務一:抓取目前標準時間
任務二:把抓到的標準日期時間顯示在網頁上
任務三:抓出"年、月、日、時、分、秒"
任務四:實作按鈕功能:
日期時間: 顯示標準時間
今天日期: 只抓年/月/日
現在時間: 只抓時/分/秒

閱讀全文 →

菜鳥救星談程式:什麼是物件導向,為什麼每一個工程師都要會

文、意如老師

工程師不論你寫什麼程式語言,共通一定要學會的是物件導向,資訊本科系也一定會有的必修課程。那什麼是物件導向呢?為什麼它那麼重要?

簡單的說就是重複的事情把它寫成物件,當需要使用時直接呼叫物件即可完成功能,不需要重造輪子。

閱讀全文 →

菜鳥救星談程式:基礎工程師面試時,常用的技術問與答(三下)

文、意如老師

續上一篇-菜鳥救星談程式:基礎工程師面試時,常用的技術問與答(三上)

本篇要跟大家分享的是工程師面試筆試中主考官最愛考的題目,也是在業界寫程式一定會要會的觀念及實作。

近年來的網頁請求資料方式、程式的開發風格大多都已經改成RESTful-API,所以在面試時有非常大的機率一定會被問到什麼是REST-API ?

閱讀全文 →

菜鳥救星談程式:基礎工程師面試時,常用的技術問與答(三上)

文、意如老師

本篇要跟大家分享的是工程師面試筆試中最常出現的題型程式應用篇,這個方向類的主題會落在工作上較偏向觀念理論實作及實際應用

閱讀全文 →