0%

new Date() 物件的時間處理

我們常需要在網頁上處理或顯示時間,例如文章是何時編輯的、購物時間或是在觀察程式碼的效能時也會需要時間的處理,JavaScript 是如何處理日期和時間的呢?

JavaScript 包含了一個處理時間的物件:new Date(),透過這個構造式裡的方法或參數,我們可以精準的計算任何形式的時間。在這個物件的時間計算單位為毫秒(1000 毫秒為一秒),所以處理時需要另外除以 1000 才能得到我們熟悉的秒數。

Date()物件是基於世界標準時間(UTC) 1970 年 1 月 1 日開始的毫秒數值來儲存時間的。要得到當下的時間是很容易的,這個當下時間來自於我們本身使用的電腦當下的時間,而電腦的時間,有可能是透過網路而得到電腦當下所在時區的時間。但如果我們想要「計算時間」就必須透過一些方式與計算,例如想要計算不是在同時需的時間,或是要對某個時間點做倒數。

Read more »

第三十關,第三十關 C3.js 圖表整合

內容:以 Axios 讀取 API、使用 D3js 顯示視覺畫圖表。
方式:

引進所需的函式庫

讀取 API 的 Axios
資料視覺畫的 D3js, C3js 以及 C3 所需的 CSS

Read more »

學習路上跌跌撞撞、過程總是零散,生活中總是被瑣事切割成碎片,如何把碎片時間拾揀與拼湊成可專心學習的塊狀已是一種考驗。

遇到六角舉辦的「JS 學徒特訓班」,給自己一次機會跟上進度,也要求自己要真的理解才寫,這需要時間,而語法的不熟悉仍然花時間,這樣一次、兩次、三次的記憶,希望能夠多留在腦中,很清楚知道自己忘的比記的還快,也在找尋且動自己對語法記憶的一把鑰匙。學習程式是非常全面性的,也因此看到自己在幾十年歲月裡看不到的盲點,雖然開始的非常慢,但總是比沒開始的好,那就透過寫程式當作一種自我的修煉吧。

Read more »

想解決問題的慾望

大約是一週前,準備在因新冠疫情禁足的一個月之後,重啟一天發一篇文的挑戰。

因為每日練習英文打字,加上五十肩的疼痛,在無法讓肩膀適時休息之下,肩膀痛到不行,也因此學習之旅走鐘的頗嚴重,同時也清楚如果自己不持續下去,勢必有些學過的東西又會遺忘,所以決定每天就打一小小篇文就好。結果計畫又因一個zsh: command not found hexo的出現,又壞壞去了。

實在搞不清楚為什麼平常用得好好的指令突然就不能用了,在找問題出現在哪,且花了許多還是找不出來的狀況下,決定上「親愛的好想」的 slack 發問,在許多夥伴的幫助下,慢慢釐清可能的問題點,但由於自己的基本知識欠缺,而發生一知半解的狀況。

Read more »

大部分的許多專案的開發,都是偏向 Cli 環境部署的方式開發,也就是常聽到的「腳手架」的方式,但為什麼是「腳手架」?還是這也代表「起手式」?也就是專案在開發,應該就把要開發與運行的環境架設好,到時要打包輸出相容個瀏覽器的語法就會變得簡單多了。

雖然剛開始設定有點繁複,但只要習慣了、工具都齊了,這樣開發起來在測試也會順手許多,所以開發基本功還是要學起來。

實際上以 Cli 的方式部署,也有許多優點,因為他不只會幫你部署,還把整個專案需要用的檔案與資料夾都自動生成,讓你一安裝完就可以寫「Hello World」,當然這些自動生成的檔案我們也需要去了解其作用與規則,不然檔案放錯位置也是會產生錯誤的。

Read more »

這系列是由觀看法國這位求職教練 Yves Gautier 的 QuestionEntretien 這一系列的影片Parlez moi de vous, présentez-vous, exemples de réponses (coaching emploi)的筆記。

在法國找工作必須先進入「找工作」領域,也就是說,要先學習如何找工作。從如何寫履歷、寫動機信、得到面試機會,如何面試,都有種種的眉眉角角的地方要注意,而歐洲文化與東方的不同,也讓面試時所注重的點不同,這是文化上的差距,需要多聽聽法國的求職教練怎麼說,才能較為清楚與正確地在面試中表達自己。

在法國面試,一定會先請你口頭自我介紹,如何在幾分鐘內把自己的動機和特質介紹給對方,且讓對方對你有印象還真不是件容易的事,當對方請你做簡短的自我介紹,以下為建議。

請你談談你自己

  1. 為什麼自我介紹是必要的
  • 是面試的開端
  • 好的內容是給對方對的訊息
  • 讓對方聆聽
  1. 常犯的錯誤
  • 敘述履歷、太攏長、偏離主題
  1. 回答範例
  • 有主題的敘述自己的專長與特質,從技術面、工作經驗等等條例式的敘述。
  • 以目標來敘述自己,例如想成為開發者的,用關鍵字的方式說明自己的特質。
  • 如果得到這個職位後的計畫。

重新看了 Chris 的鐵人賽糙扣系列,在這一篇裡糙 code 與他們的產地 - if 的判斷式 看到了 Array 去重的部分,卻看不懂…先記下,看以後有沒有辦法看懂。

Array 去掉重複值

在處理 Array 元素重複問題時,常常會寫 if 並且走訪元素找重複。
好一點的,會使用 Array.prototype.includes

1
2
3
4
5
6
7
8
var arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5];
var arr2 = [];
arr.forEach(item => {
if (!arr2.includes(item)) {
arr2.push(item);
}
});
arr2; // [1, 2, 3, 4, 5]

但是,這很糙!!! <– Chris 大大說的。
其實,只要換容器,就可以輕鬆做到這件事。

1
2
var arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5];
var arr2 = [...new Set(arr)]; // [1, 2, 3, 4, 5]

你看!沒有任何的 if 這樣的品味才對。<– 也是 Chris 大大說的。

待續….

常常聽到 JavaScript 的語法作用域和其它語言有些不同,主要是 JavaScript 是屬於使用「靜態作用域」的語言,那什麼又是「靜態作用域」呢?

簡單來說,「靜態作用域」就是變數的作用域在被解析時,就已經確定了作用域,且不會再改變。有靜態就有動態,而「動態作用域」又是什麼?
「動態作用域」是變數的作用域,在調用函式的時候才決定。

靜態作用域,是在 語法解析的時候,就已經確定了。
動態作用域,是在函式被調用呼叫的時候才決定的。

1
2
3
4
5
function callName() {
let moi = 'Tsuifei';
console.log(moi);
}
callName(); // Tsuifei

function裡的變數因為被函式包住,所以是區域變數,而在函式最外層的則是全域變數,所以在上面這段程式中,我們呼叫了callName()這個函式,再進去一行行執行函式內,當我們要它印出moi時,他會先去上面(已經讀到的)找,這時會找到let moi = 'Tsuifei';而把'Tsuifei'印出來。

但是如果函式裡面找不到moi,又要在函式裡面印出moi呢?因為moi這個變數是在callName()這個函式被定義的,所以它的作用域就會在這個函式裡。

1
2
3
4
5
function callName() {
let moi = 'Tsuifei';
}
callName(); //
console.log(moi);
1
2
3
4
5
6
7
8
9
let moi = 'Philippe';
function callName() {
let moi = 'Tsuifei';
console.log('內:' + moi);
}
console.log('外:' + moi);
callName();
// 外:Philippe
// 內:Tsuifei

參考:
Javascript 進階 2-3 語法作用域(Lexical scope) - iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天

Ajax 全名為 Asynchronous JavaScript and XML,一種允許瀏覽器與伺服器交換資料,而不需刷新頁面的技術,都可以叫做 Ajax.

Ajax 這個名字是在 2005 年 5 月的時候,Adaptive Path 的 Jasse James Garrett 在他所寫的文章 Ajax : New Approach to Web Application 中提出的。而 Ajax 這項技術,是由 Google 在 Google labs 發佈的 Google Maps 和 Google Suggest 後真正為人所認識。

Ajax 的技術特殊在於,資料在瀏覽器端與伺服器端交換資料時是「獨立傳輸」而不需要返回整個頁面,只需要更新頁面的一部分。

不需要更新整個頁面資料的技術有好幾種:

  • Flash
  • Java applet
  • 框架
  • 隱藏的 iframe
  • XMLHttpRequest : 此物件是 JavaScript 的一個模組,可使網頁與伺服器進行溝通,是創建 Ajax 應用的最佳選擇,實際上通常我們會把 Ajax 當成 XMLHttpRequest 物件的代名詞。

Ajax 的工作原理

客戶端 傳輸 伺服器端
xhtml 協議:xmlhttp PHP…等
css 載體: Text, xml, Json… 其他語言
JavaScript

Ajax 相關工具

Ajax 並不是新技術,它實際上是集合好幾種技術,每種技術各盡其職,整合起來而成的技術。

  • 伺服器端語言:伺服器端需具備像瀏覽器發送特定訊息的能力,Ajax 與伺服器端語言無關。
  • XML(eXtensible Markup Language, 可擴展標記語言),是一種描述資料的格式。Ajax 需要某種格式化的格式來在客戶端和伺服器端之間傳遞資料,XML 是其中一種。
  • XHTML 和 CSS 標準化呈現
  • DOM 可以與之實現動態顯示與互動。DOM 簡介
  • 使用 XMLHTTP 組件 XHLHttpRequest 物件進行非同步資料讀取。
  • 使用 JavaScript 綁定和處理所有的資料。

Ajax 缺點

  • 由 JavaScript 和 AJAX 引擎導致的瀏覽器兼容問題。
  • 頁面局部更新,導致後退功能失效。
  • 對串接媒體的支持沒有 Flash, JavaScript 好。
  • 部分 Mobile 設備如手機、平板支援度差。

XMLHttpRequest 概述

XMLHttpRequest 最早是在 IE 5 中以 ActiveX 組件的型態實現的,它並不是 W3C 的標準。

  • Internet Explorer 把 XMLHttpRequest 當成是一個 ActiveX 物件。
  • 其他瀏覽器如 FireFox, Safari, Opera 把 XMLHttpRequest 當成一個本地端的 JavaSCript 的物件。
  • XMLHttpRequest 在不同瀏覽器上是可以互相兼容的,所以可以用同樣的方法去走訪 XMLHttpRequest 實例的屬性和方法,不論這個實例是用哪種方式創建。

創建 XMLHttpRequest 物件

為了每次寫 Ajax 的時候可快速開發,可以把 XMLHttpRequest 物件測試寫成一個可重複用的函式:

1
2
3
4
5
6
7
8
function getHTTPObject() {
let xhr = false;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
}

HTTP 請求(request)與回應(response)

一個 HTTP 請求(request)由四個部分組成

  • HTTP 請求方法(method)或「動詞」(verb)
  • 所請求的 url
  • 一組選擇性的請求標頭(headers),其中包含認證(authentication)資訊
  • 一組選擇性的請求主體(body)

伺服器所送出的的 HTTP 回應(response)有三個部分

  • 由數值與文字所組成的狀態碼(status code),指定請求或失敗。
  • 一組回應標頭(headers)
  • 回應主體(body)

使用 Axios

Axios 在 Github 上說明,可透過 npm 安裝在開發專案上,或者也可以使用 CDN 將 Axios 引進來,就可以開始用了。

先以 GET 的方式向 Server 請求資料,因為 Axios 是非同步,所以response會在程式一行行都跑完後,最後才會跑.then的部分。

線上模擬 api www.mocky.io

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>;

// 使用 GER 方法

// Make a request for a user with a given ID
axios
.get('/user?ID=12345')
.then(function (response) {
// handle success 接收伺服器的回應
console.log(response);
})
.catch(function (error) {
// handle error 如有錯誤會到這裡
console.error(error);
})
.then(function () {
// always executed 無論如何都會執行
});

// 使用 POST 方法

HTTP Methods

運作方式為 Server -> JSON -> Client -> AJAX -> Server

1. GET 讀取 readoncy

只有 GET 才應使用 Query String (重要)
如果 fd 結尾 -> 讀取單一物
如果沒有 fd 結尾 -> 讀取該物的 collection

2. DELELE 刪除特定資料

3. POST 建立新資源

會把資源的 ID 傳回給用戶
如果 POST 兩次怎麼辦?

4. PATCH 更動資源的部分內容

  • URL = /v1/users/1001
  • Method = PATCH
  • Request Body = { “age” : 31}

5. PUT 新上傳的內容、覆蓋原來的

或是 Partial Update 部分更動

6. Method OPTIONS

  • 用來查詢某ㄧ資源,並能使用的 method
  • 在 cors domain request 時 Client 端會先發出 OPTIONS 查詢

相關連結:
axios/axios: Promise based HTTP client for the browser and node.js

什麼時候會用到自定義指令?除了原本的默認內置指令,雖然 Vue 的元件是可以複用的,但有時候我們仍然需要對普通 DOM 元素進行不同效果的操作,這時候就會用到自定義指令。在 Vue 內建的指令無法滿足需求或需要一個特別的功能時,就可以自己攥寫自定義指令,好處是可以重複使用。

自定義指定有兩種:全域自定義指令與局部的自定義指令。有時候我們在一個頁面裡可能會引入或增加好幾個 Vue 的實例,如果是全域的自定義指令,表示所有的 Vue 實例都可使用這個指令,但如果是局部自定義指令,需要指定能使用這組指令的 Vue 實例。

Read more »