典型的伺服器建立方式。下面是伺服器的程式碼。這個程式碼通常取名為server.js，置放在伺服器根目錄，之後在console用「node server.js」來運行他。
===
var http = require("http");
http.createServer(function (request, response) {
response.writeHead(code, {"ContentType": mime});
response.write(content);
response.end();
}).listen(port, ip);
===.
裡面的function應該挺容易懂的，是對於客戶端得請求如何作答覆。code是200正常、404找不著那個；mime是指內容的類型，最基本的是text/plain，常見的還有text/html、text/css、text/javascript，這部分在處理一些讓客戶端自動請求的CSS、JS時需要特別處理一下，否則會發現伺服器把這些檔案當成text/plain或text/html傳出去。response.end()之後這個回應就被送出了。
http.createServer().listen()則是實質地在本機的「ip:port」上啟動一個伺服器。
伺服器開啟後，console會被占用，輸入Ctrl+C強制跳出後伺服器就算關閉了。
2018年5月31日 星期四
2018年5月25日 星期五
[JavaScript] 取得視窗卷軸位置
討論垂直方向，視窗的卷軸位置在window.scrollY。
如果要知道卷軸是否碰底，可以拿視窗卷軸位置與視窗高度相加，看是否與body的高度吻合。
===
return window.scrollY + window.innerHeight === document.body.clientHeight;
===.
如果要知道卷軸是否碰底，可以拿視窗卷軸位置與視窗高度相加，看是否與body的高度吻合。
===
return window.scrollY + window.innerHeight === document.body.clientHeight;
===.
2018年5月13日 星期日
[JavaScript] 滑鼠事件中取得滑鼠位置
在滑鼠事件中，從參數ev我們可以找到ev.target，表示滑鼠的作用對象，其中ev.target.getBoundingClientRect()會回傳一個rect，這個rect包含了x、y、left、right、top、bottom、width、height，表示的是元件的位置和長寬，滑鼠的位置在ev.pageX和ev.pageY，用他減去rect.x和rect.y就行了。
補充，如果目標元件是position: fixed的話，使用ev.pageX、ev.pageY就會有問題，因為這兩個是滑鼠之於整個document的相對位置，而上面所得到的rect是元件之於視窗的位置。為了拿到滑鼠相對於視窗的位置我們可以使用ev.clientX與ev.clientY。有人會騙你去用screenX、screenY，這兩個是相對於螢幕的，與client會有些差距。
補充，如果目標元件是position: fixed的話，使用ev.pageX、ev.pageY就會有問題，因為這兩個是滑鼠之於整個document的相對位置，而上面所得到的rect是元件之於視窗的位置。為了拿到滑鼠相對於視窗的位置我們可以使用ev.clientX與ev.clientY。有人會騙你去用screenX、screenY，這兩個是相對於螢幕的，與client會有些差距。
2018年5月12日 星期六
[JavaScript] common
修正createElement。
===
var common = {};
common.createElement = function (tag, attributes, parent) {
var element = document.createElement(tag);
for (var key in attributes) {
element.setAttribute(key, attributes[key]);
}
if (parent !== undefined) {
parent.appendChild(element);
}
return element;
};
window.common = common;
===.
===
var common = {};
common.createElement = function (tag, attributes, parent) {
var element = document.createElement(tag);
for (var key in attributes) {
element.setAttribute(key, attributes[key]);
}
if (parent !== undefined) {
parent.appendChild(element);
}
return element;
};
window.common = common;
===.
[JavaScript] 偵測元件外的點擊事件（Outclick）
有些元件需要偵測在自身以外發生的點擊事件，通常依此進行失焦。
基本原理是偵測document的點擊事件，在事件參數ev中有個事件目標ev.target，顯示了點擊事件的目標元件。從這個事件目標開始往父元件搜尋，若沒比對到註冊事件的元件的話，就觸發監聽器。
暫且把這個事件稱作外點擊事件Outclick。
===
===
document.onOutclickedListeners = [];
document.addEventListener("click", function (ev) {
var listeners = $.extend(true, [], document.onOutclickedListeners);
var target = ev.target;
do {
for (var l = 0; l < listeners.length; ++l) {
var listener = listeners[l];
if (listener.element === target) {
listeners.splice(l, 1);
}
}
target = target.parentNode;
} while (target);
for (var listener of listeners) {
listener.func(ev);
}
});
document.addEventListener("click", function (ev) {
var listeners = $.extend(true, [], document.onOutclickedListeners);
var target = ev.target;
do {
for (var l = 0; l < listeners.length; ++l) {
var listener = listeners[l];
if (listener.element === target) {
listeners.splice(l, 1);
}
}
target = target.parentNode;
} while (target);
for (var listener of listeners) {
listener.func(ev);
}
});
===.
[CSS] 文字雙邊對齊（justify）
就是紀錄一下這個雙邊對齊的英文名稱叫「justify」，是text-align這個屬性的可填值之一（回想Office，雙邊對齊與靠左對齊、靠右對齊是同質的選項）。
[HTML+CSS] 修改Blogger的中文字型
該死的洋人。
從GUI修改字型的話，只有那些Arial之類的，沒有中文字型。
邏輯是這樣的：找一個WebFont（畢竟是中文，WebFont是必須的），嵌入到部落格的模板HTML中。
WebFont的嵌入分兩個部分，一部份是連結，總之就是用<link>把字型檔讀進來；另一部份就是實用，在某個我們想要套用的對象上用CSS去聲明他的字型。
<link>簡單，找到<head>隨便插入就可。
以Google提供的WebFont為例的話，就是像這樣：
===
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" />
===.
字型可以從這裡找，Source Code Pro也在其中，是個很棒的等寬字型。
中文部分就使用Noto吧。要注意在上面的網址中找到的Noto是西文版的，沒有中日韓。
中日韓版本的叫做Noto Sans CJK TC或Noto Serif CJK TC（有分區域的，TC是正體中文），在這裡。
連結是如此簡單。問題來了，字型的實用應該寫在哪裏？
在<head>寫一個CSS聲明body的字型是沒有用的，哪怕我們加上無數個!important（想當然的）。
我所知的方法是，總之先在HTML中搜尋「font」，會看到在一個叫做<b:skin>的標籤裡有很多看似被註解的XML tags，我們會看到一些關鍵字「body.font」、「header.font」等等，看來就是這裡了。
那些Variable標籤的屬性default裡記錄的東西一目瞭然，就是我們想修改的字型，而我們的WebFont就在這裡實用。
字型的實用有很多大佬給過意見了，這一篇就很實在。
簡單來說，英文，然後中文。
我的建議就是
===
'Source Code Pro', 'Noto Sans CJK TC',
===.
後面的Arial和一大票預設字型我是沒刪的。
留意一下，我們所修改的東西實質上是個字串，外面包的是雙引號，所以字型名稱的部分用的是單引號。
從GUI修改字型的話，只有那些Arial之類的，沒有中文字型。
邏輯是這樣的：找一個WebFont（畢竟是中文，WebFont是必須的），嵌入到部落格的模板HTML中。
WebFont的嵌入分兩個部分，一部份是連結，總之就是用<link>把字型檔讀進來；另一部份就是實用，在某個我們想要套用的對象上用CSS去聲明他的字型。
<link>簡單，找到<head>隨便插入就可。
以Google提供的WebFont為例的話，就是像這樣：
===
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" />
===.
字型可以從這裡找，Source Code Pro也在其中，是個很棒的等寬字型。
中文部分就使用Noto吧。要注意在上面的網址中找到的Noto是西文版的，沒有中日韓。
中日韓版本的叫做Noto Sans CJK TC或Noto Serif CJK TC（有分區域的，TC是正體中文），在這裡。
連結是如此簡單。問題來了，字型的實用應該寫在哪裏？
在<head>寫一個CSS聲明body的字型是沒有用的，哪怕我們加上無數個!important（想當然的）。
我所知的方法是，總之先在HTML中搜尋「font」，會看到在一個叫做<b:skin>的標籤裡有很多看似被註解的XML tags，我們會看到一些關鍵字「body.font」、「header.font」等等，看來就是這裡了。
那些Variable標籤的屬性default裡記錄的東西一目瞭然，就是我們想修改的字型，而我們的WebFont就在這裡實用。
字型的實用有很多大佬給過意見了，這一篇就很實在。
簡單來說，英文，然後中文。
我的建議就是
===
'Source Code Pro', 'Noto Sans CJK TC',
===.
後面的Arial和一大票預設字型我是沒刪的。
留意一下，我們所修改的東西實質上是個字串，外面包的是雙引號，所以字型名稱的部分用的是單引號。
[JavaScript] common
更新craeteElement，自動將建立的元件加入到parent。
===
var common = {};
common.createElement = function (tag, attributes, parent) {
var element = document.createElement(tag);
for (var attribute of attributes) {
element.setAttribute(attribute, attributes[attribute]);
}
if (parent !== undefined) {
parent.appendChild(element);
}
return element;
};
===.
===
var common = {};
common.createElement = function (tag, attributes, parent) {
var element = document.createElement(tag);
for (var attribute of attributes) {
element.setAttribute(attribute, attributes[attribute]);
}
if (parent !== undefined) {
parent.appendChild(element);
}
return element;
};
===.
[JavaScript] common
新增createElement，在建立元件的同時設置他的屬性。
===
var common = {};
common["createElement"] = function (tag, attributes) {
var element = document.createElement(tag);
for (var attribute of attributes) {
element.setAttribute(attribute, attributes[attribute]);
}
return element;
};
===.
===
var common = {};
common["createElement"] = function (tag, attributes) {
var element = document.createElement(tag);
for (var attribute of attributes) {
element.setAttribute(attribute, attributes[attribute]);
}
return element;
};
===.
[JavaScript] 網頁自動腳本的建議格式（Greasemonkey、Tampermonkey）
自動腳本最好還是在網頁讀取完畢之後再執行，有些情況下甚至需要一個延遲時間。大致上如下。
===
window.loadelay = 0; // 延遲時間
window.main = function () {
// 程序內容
};
window.addEventListener("load", function (ev) {
setTimeout(window.main, window.loadelay);
};
===.
===
window.loadelay = 0; // 延遲時間
window.main = function () {
// 程序內容
};
window.addEventListener("load", function (ev) {
setTimeout(window.main, window.loadelay);
};
===.
訂閱：
文章 (Atom)