2015年11月30日

2015年11月27日

[筆記] CKEditor內容編輯器安裝說明

       
不管你使用的是痞客邦、wordpress、google blogger或其它相關的內容管理系統(CMS, content management system)，在編輯文章的時候，勢必會有一個HTML編輯器，這個編輯器可以讓你選擇字型、改變字體大小、甚至可以直接針對HTML語法進行編輯，少了這個編輯器，部落格大概也經營不下去了。

可是，如果你是想要從頭寫一個網站，而不想要直接套用CMS系統的話，CKEditor就是一個很好的內容編輯器的選擇。
Read More

2015年11月26日

[Guide] 用 JavaScript 來取得表單元素內容的值（取值）

      ,  
用 JavaScript 取得表單中的元素有很多不同的方法，今天我們來說明一下其中一些方法，像是getElementById, getElementsByTagName, getElementsByName。
先來看一下結果：
See the Pen getElementById by PJCHEN (@PJCHENder) on CodePen.

建立 HTML 表單

我們先用 HTML 建立一個表單（form）
<form name='form' id='form'>
  姓名：
  <input type='text' name='name' id='name' /> E-mail：
  <input type='text' name='email' id='email' />
  <input type='button' name='submit' value='送出' onclick='processFormData();' />
</form>
我們可以看到，在這段 html 表單中，可以看到幾個屬性（attribute），包含 input，name 和 id，下面我們就可以分別用這些屬性來取得表單中的內容。

使用 getElementById

我們可以利用 getElementById 來取得表單中的值，像是這樣：
function processFormData() {
  const nameElement = document.getElementById("name");
  const name = nameElement.value;
  const emailElement = document.getElementById("email");
  const email = emailElement.value;
  alert("你的姓名是 " + name + "\n電子郵件是 " + email);
}
我們也可以針對「表單」的 id 去進使用 getElementById，像是這樣：
function processFormData() {
  const formElement = document.getElementById("form");
  const name = formElement[0].value;
  const email = formElement[1].value;
  alert("你的姓名是 " + name + "\n電子郵件是 " + email);
}

使用 getElementsByTagName

使用 getElementsByTagName 的方法如下，可以留意的地方是，這裡是 getElement"s"
，表示我們一次會取得一整個陣列的值，因此最後要加上要取得的是陣列中的第幾個值。
像是這樣：
function processFormData() {
  const inputElement = document.getElementsByTagName('input');
  const name = inputElement[0].value;
  const email = inputElement[1].value;
  alert("你的姓名是 " + name + "\n電子郵件是 " + email);
}

使用 getElementsByName

最後，我們也可以用 getElementsByName 來根據 name 這個屬性取得表單元素的值，寫發類似，如下：
function processFormData() {
  const nameElement = document.getElementsByName('name');
  const name = nameElement[0].value;
  const emailElement = document.getElementsByName('email');
  const email = emailElement[0].value;
  alert("你的姓名是 " + name + "\n電子郵件是 " + email);
}

取得 form 裡面的元素（elements）

除了使用 getElementById, getElementsByTagName 和 getElementsByName 之外，我們也可以直接取得某個 form 裡面的元素。
寫法像是這樣：
function processFormData() {
  const form = document.forms['form'];    // 取得 name 屬性為 form 的表單
  const name = form.elements.name.value;  // 取得 elements 集合中 name 屬性為 name 的值
  const email = form.elements.email.value;// 取得 elements 集合中 name 屬性為 email 的值
  alert("你的姓名是 " + name + "\n電子郵件是 " + email);
}
透過類似的方法，一樣可以取得像是textarea等其它表單類型的值。

其他

若是想取得其它比較特殊類型的值，像是radio, select，則可進一步參考 [筆記] 透過 JavaScript 擷取 HTML 元素（讀取radio, select, id 的值）。

參考資料

Read More

2015年11月22日

[閱讀筆記] 經理人月刊：關於工作的16個哲學思考

      ,  
圖片來源：Binghamton University

哲學家帶你探索考工作意義的方法

哲學家 內涵
蘇格拉底 人要先承認自己的無知，勇於承認自己的錯誤並加以排除。他說：「我唯一知道的事，就是我什麼都不知道」
黑格爾 在面臨關鍵抉擇時，除了A和B之外，千萬別忘了還有第三條路。
辯證法：任何事物（正）都有一個相對立的事物（反）， 當兩者產生衝突時，便會出現更上一層次將兩者都納入其中的第三種立場（合）
尼采 「這個世界原本就同時存在著美好與不幸，但是人往往一廂情願地假設應該只有美好」。
困境是為了讓你變得更強大。
尼采 「這個世界原本就同時存在著美好與不幸，但是人往往一廂情願地假設應該只有美好」。
困境是為了讓你變得更強大。
威廉‧詹姆斯 實用主義：別人的目標和意義是別人的，你的是你的。只要你相信這件事情對你有意義，那就去做吧，別管其它人。
海德格 存在主義：時刻提醒自己生命有限，以「死亡」做為思考人生、工作的基礎，站在未來的時間點，回過頭來檢視現在，就可以找回真正的自己，也能夠看到存在的意義。
齊克果 人生就像一個酒醉的農夫駕著馬車，表面上，是由農夫駕著馬車，實際上卻是老馬拖著農夫回家。因為農夫醉得不省人事，根本沒有清楚的意識，完全依靠識途老馬帶他回家。
識途老馬代表的是社會既存的價值觀和生活方式，大多數人不假思索，日復一日的生活，如同酒醉的農夫，毫無意識地任由老馬決定他的去處。

哲學家帶你省思解決工作煩惱的方法

哲學家 內涵
勒內‧笛卡兒 在不疑處有疑，對任何事抱持著懷疑的態度。
伊比鳩魯 放棄什麼都要的心態，追求你真正在乎的事物。
無欲則剛。
阿爾弗雷德‧阿德勒 你無法讓每個人都喜歡你，不管多麼努力當好人，一定都會有人不喜歡你。
以上內容為本人閱讀經理人月刊（NO. 131：關於工作的16個哲學思考）所整理之筆記
Read More