[CSS]Flex (Taker course)

https://www.everyonecanwebsite.com/blog/post/flexbox-basic?utm_source=facebook&medium=video-post&utm_content=flexbox

https://www.youtube.com/watch?v=epHSeA7OCZU
取代 flaot的平易近人新屬性，以上課程連結 (Taker)。

display: flex;
設定後除了本身，其所有子元素會自動帶有此屬性，但只限一層，再下去就沒有了。

main axis & cross axis: flex line 與 main axis平行
各自還有 start & end，預設上，寫一個"十"字可以理解。

flex 主要設定方向、寬度、對齊方式

• flex container
• about axis
• about wrap
• flex item

flex: 0 1 auto; /*defult
flex-grow: 值有(0,1)；設定 item是否展開填滿容器，想像為是否要從樹成長成林
flex-shrink: 值有值有(0,1)；設定 overflow時是否自動縮小
flex-basis: 單位有(px,%)還可設定為 auto；設定 item的寬度

[Git]完整學會Git GitHub Git Server 的24堂課 Unit.1~Unit.3

Unit. 1

git init

git add 'poem.txt' /* preparing add, can be files or file fold
git status

git commit -m 'description' --author='name <email>' /* acting adding

git commit --amend -m 'new description' --author='(changed) name <email>'
/* modifying description or author name/ email

gitk

exit
----

Unit. 2

git config alias.name 'full commend'

e.g.

git config alias.con 'config -l'

/* then,
/* git con = git config -l
----

Unit. 3

touch .gitignore

[jQM]Udemy Keen Cen 9語言0基礎 #165-#174 流水帳筆記

#168-#169
手機程序型網頁範例
但教學中是直接刪改官方檔案

將 .click 改為 .on("vclick", function())
減少裝置反應延遲

示範不切換網址切換內容頁面
可能會有網址列#1-1改#1-2內容卻沒切換的問題

#170-171
如何將 jQ 製成的程序轉換成不同平台(安卓、蘋果、win...)
由 node.js (網頁服務器)
cordova

[php]Udemy Keen Cen 9語言0基礎 #128-#146 流水帳筆記

#137
php 發送郵件若成功，會回傳 1，表 true
$emailTo="";
$subject="";
$body="";
$headers="";

mail($emailTo, $subject, $body, $headers)

#143-145 天氣預報網站範例
擷取外部網頁特定部分資料

background-position: center;
background-size: cover;

<?php

$city= $_GET['city'];

$city= str_replace(" ", "", $city); // 空格替換成沒有空格，從$city取出替換

$content= file_get_contents("http://www.weather-forecast.com/locations/San-Francisco/forcasts/latest");

preg_match("/3 Day Weather Forecast Summary:/i", $content, $matches);

print_r($matches)

?>

[BS]Udemy Keen Cen 9語言0基礎 #107-#120 流水帳筆記

http://getbootstrap.com 官網有 tutorial 可學！
w3school 一樣也有

#109
CDN = Content Delivery Network

#110
.col-md-* grid classes
class = "col-md-6"

#117-119
至 w3sch Get Started Bootstrap CDN 添加完整程式碼

[jQuery]Udemy Keen Cen 9語言0基礎 #84-#106 流水帳筆記

jQuery / jQuery UI 官網有 tutorial 可學！

#88
$('p').html("This is test text.")
<iframe>
.css("display","none") = .hide() 或 .fadeOut( 時間 )

#92
$.ajax ({
  url:"test.html"
}).done(function(data)){
    $("h1").append(data);
});
呼叫外部文件

#93
RegExp
搜尋、檢查字串

#94-95
表單檢查範例：

除了控制輸入框大小，也能控制輸入字的大小、字與邊框距離。
在 input 前運用 label 清楚定義；input 中運用 type="password" 設定密碼文字不顯示

e.preventDefault()
阻止提交

在#95 2:21直接套用 email 驗證程式碼

$isNumeric()
驗證數值(字)
----

#98
jQuery UI
這裡示範在 document 中直接線上引用 google API jQuery UI，而非下載檔案使用

#99
使用 .resizable() 前要先載入 jQuery UI 的 CSS <link>

#101
.accordion() 可以很容易使多個文章變成標題卷軸，也可嘗試運用在 nav menu 上
.sortable() 讓使用者將項目拖動並排列

#102-105
代碼播放器範例：
切 JS Bin 網站

$(window).height();
$('.className').height(varName or method+'px');

$().click(function(){
  $(this).toggleClass('selected');
});

var activeDiv = $(this).html();
$('#'+activeDiv+'Container').toggle();

var showingDiv = $('.codeContainer').filter(function(){    return($(this).css('display') != none );
}).length;

CSS屬性: overflow: hidden;

$('iframe').contents().find('html').html($('#htmlcode').val());

[JS]Udemy Keen Cen 9語言0基礎 #65-#83 流水帳筆記

#72
如需重新讀取 input 值，記得在函數中再 assign 一次。

#73
善用 array 中 splice 的參數。
console.log(arrayName) 能在 console 輸出 array

#77
while loop 常用在循環次數未知的情況
(相較於 for loop)

#81
split 可以將字串化為 array
Math.floor() 無條件捨去

[練習]切版 科技島讀 7/19~7/21

#7/19
花一天的時間切出 70%，
差 slide-showing menu、
頁面滾動超過一定的範圍浮現的 top bar、
下方 fixed footer bar。

top bar 教學：
https://www.minwt.com/webdesign-dev/js/8891.html

#7/20
top bar 直接套用失敗了，只好自己想辦法生。

下方 fixed footer bar 做伸縮效果花好多時間，
尤其為了只讓 bar 區域游標維持 pointer，所以沒把整個 bar height拉高，而是分割，
試了margin-bottom 在 click 時增加而向上推移，
但第二次 click 為了要讓它向下，
賦予一個暫時用 id (或 class) 再將 margin 改回來，沒有成功。
最後成功結果如下，文字再回彈卻沒有顯現：

$(function () {

$('#getmoreclick').hide();

$('.fixedfooter')

.click(function (e) {

if ($('.fixedfooter').css('marginBottom') === '358px') {

$('.fixedfooter').animate({

marginBottom: '0px'

}, 500);

$('.getmore img').attr('src', 'pic/up-arrow-footer.png');

$('.getmore p').css('opacity', '1');

} else {

$('.fixedfooter').animate({

marginBottom: '358px'

}, 500);

$('.getmore img').attr('src', 'pic/down-arrow-footer.png');

$('.getmore p').css('opacity', '0');

}

if ($('#getmoreclick').css('display') === 'block') {

$('#getmoreclick').slideUp(500);

$('.getmore p').hide();

} else {

$('#getmoreclick').slideDown(500);

}

});

});

#7/21
找到另一個 top bar 教學，
只要能讀取得到網頁滑動高度，就有辦法做！

取得 body 捲動後高度 JS & jQuery：
http://www.eion.com.tw/Blogger/?Pid=1154

照此方法 5分鐘搞定！太適合自誇了！！

$(function () {

$('#top-bar').hide();

$(window).scroll(function () {

var scrollH = $(this).scrollTop();

if (scrollH > 205) {

$('#top-bar').slideDown(500);

} else {

$('#top-bar').slideUp(500);

}

});

});

最後是 slide-showing menu 與 整份間距微調，即大功告成！
slide-showing menu 已經邊改邊想到腦袋疲乏，決定尋覓高人指點學功夫，
間距懶得調了，先眠去補充體力。本次切版決定告一段落！

[HTML/CSS]Udemy Keen Cen 9語言0基礎 #0-#64 流水帳筆記

https://www.udemy.com/ken-cens/learn/v4/overview

#24
作品集加入表單 form HTML5 的元素，不然都沒練習到，
就放在 reserve 裡試試。

#25
自定義屬性，HTML5 的特性，之後在 php 或 boostrap 可能會使用到。

CSS & CSS3

#37
區別流向的不同：
一個 div 包兩個元素，加入 float；兩個 div 個別包一個元素，加入 float

#40
padding 會延伸原本設定的 width & height，而不是往內擠，
這好像挺重要的但常常忽略，自然而然就讓 padding 幫我延伸。

#41
如何用 border 畫圓框？

#42
擅用 w3school 幫忙寫字體的順序，很方便！

#44
visited 在統一色調的時候跟 hover 一樣重要；
在 CSS 就設定表現會更好，與script相比，因讀取的順序

#46
box-sizing: border-box
畫圓形、水滴狀

#47
background: linear-gradient()
漸層顏色

#48
box-shadow

#49
column-count，分欄。要注意瀏覽器相容的問題與對應寫法

#50
animation-name-duration
-delay ... 還有很多，
如一次控制多個、時間差表現、單一物件的長寬色不同時間差

#51-#53
實作範例：靜態動畫地球軌跡，以 CSS 寫成。
突然覺得因學過 PS 有圖層概念，滿有幫助的，真幸運～
@keyframe name {from{}to{}}

#54-#62
切版：BBC 網站。別忘善用 span

[Life]進補 P2P夏季大會 18小時關鍵字

其實只是和大 Peter 聚餐並討教，
趕快記下關鍵字：

標籤準確度
float & flex (?)
父子都要 clear
z-index & position
抽獎、彩球、轉盤設計最近好夯 (機率、統計)
Dashapp、MAMP、emmet

髒東西
作品集推薦整個專案
Git大概知道即可，但 Github很值得「現在」就拿來用
「精熟」只是人資寫的

買課程不要衝動、不要跟風
眼神有可見光、碰到撞牆不要放棄
Youtube 一定要打上 tutorial

感恩！又一個貴人，好幸運

[jQuery]HF學習 第一章關鍵字紀錄

這次要試試"回想關鍵字"紀錄：不詳述，只顯示想到的關鍵字

CH 1

display: block none
slide toggle

[jQuery]HF學習 序

序中請學習者先安裝開發環境，
但apache跟php下載後的安裝檔都不是 .exe 或 .msi，沒有install wizard，
使我找了一夜總算找到可能可行的手動安裝方式。

http://www.jimmyp.org/2016/04/04/%E5%9C%A8windows%E6%89%8B%E5%8B%95%E5%AE%89%E8%A3%9Dapache%E5%92%8Cphp/

碰到找不到 vcruntime140.dll (已google解決)
但現在又卡住了，卡在第 6 點：

可至 conf/httpd.conf 內容搜尋 ServerName，查看原因

該如何至 conf/httpd.conf 呢？

大 Peter 解釋，進去 txt，看裡面的 code

[JS]網頁學習 w3school 第一次閱畢

看到後面很頭昏，可能吸收只有20%。

接著以 Codecademy 複習 HTML&CSS，
下週購買 Udemy、hexschool 的課程，實作學習、跟著生產作品，
總算要乖乖產生作品集了！持續持續

Udemy

The Web Developer Bootcamp (已於7/11購買註冊)

建網百科全書-使用HTML,CSS,Javascript,jQuery,php,mySQL建立网站-中文課程 (已於7/11購買註冊)

建網進階篇-製作您自己的WordPress主題使用HTML,CSS,php,mySQL,Bootstrap-中文課程

hexschool

使用 jQuery 打造互動性網頁動畫效果

[JS]網頁學習 第八章 JSON PHP, JS Example 小節 心得小記

只要出現 PHP 程式碼，就進入放空出神的狀態，
PHP 篇幅也不少，有點煎熬呀！
----

後面 Example 部分充滿大量範例，我想實作時再當作參考資料即可，
一直看範例太片段、不連續，吸收效率可能會很差。

[JS]網頁學習 第七章 AJAX Request, AJAX Application 小節 心得小記

async: true (asynchronous) or false (synchronous)

是同步與不同步的意思嗎？

2017/7/10 得到答案了！asynchronous 指"非"同步
https://www.youtube.com/watch?v=JjnbWNUBY48
----

這幾個 XTMHttp 的章節都很相似、艱澀，
列出一個應該很實用的程式碼範例連結

Try it yourself.

點擊下方列表，在上方呈現，
類似畫廊功能，但是改成文字。

[JS]網頁學習 第六章 JS Window, JS Timing 小節 心得小記

var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

原來宣告變數也能用 or 表示
----

<body>

<p>A script on this page starts this clock:</p>

<p id="demo"></p>

<button onclick="clearInterval(myVar)">Stop time</button>

<script>
var myVar = setInterval(myTimer ,1000);
function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>


</body>

覺得這個計時器、停止時間按鈕的範例很重要，先記下來
----

More Examples

Another simple timing

A clock created with a timing event

[JS]網頁學習 第五章 DOM Navigation, DOM Nodes 小節 心得小記

A common error in DOM processing is to expect an element node to contain text.

使用 childNodes[n].nodeValue 等同於使用innerHTML，
但若接在 getElementById 之後，Id 有唯一性，
又何必用 node 呢？還需要找出 elemnt 的序數。
----

Nodes creat 有個感覺是相當重要的範例：

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);

var element = document.getElementById("div1");
element.appendChild(para);

</script>

[JS]網頁學習 第五章 DOM Events, DOM Events Listener 小節 心得小記

Events 這節教一個實作法：

document.getElementById("myBtn").onclick = displayDate;

看似很方便，但會導致程式 runtime 變長吧？
----

實作範例錯誤集：

<button onclick=myFunction>Click Me</button>

<span onMoveover="this.style.color='red'">Mouse over me!</span>

還有疑似錯誤(因結果跑得出來，但程式碼與正解不同)：

document.getElementById("myBtn").onclick = displayDate;
----

解答：

<button onclick="myFunction()">Click Me</button>

<span onmouseover="this.style.color='red'">Mouse over me!</span>

document.getElementById("myBtn").onclick =
function(){displayDate()};
----

Events Listener 小節有個酷炫的範例，
隨著視窗被調整改變顯示的文字：

<p id="demo"></p>

<script>
window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = Math.random();
});

</script>

[JS]網頁學習 第五章 DOM Elements, DOM CSS 小節 心得小記

在範例練習中，寫錯成；

<p>Use the DOM to change my text!</p>

<script>
document.getElementsByTaName("p").innerHTML = "Change"
</script>
----

  <head>
    <title>W3Schools Demo</title>
  </head>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"The title of this document is: " +
document.getElementByTagName("title")[0].innerHTML ;
----

<p id="demo">Hello World!</p>

<script>
document.getElementById("demo").style.backgroundcolor = yellow;
</script>

在此紀錄犯過的錯誤，



正解為：

document.getElementsByTagName("p")[0].innerHTML = "Change"
----

document.getElementById("demo").innerHTML =
"The title of this document is: " +
document.title ;
----

document.getElementById("demo").style.backgroundColor = "yellow";

[JS]網頁學習 第四章 Function Closures小節 心得小記

本節先說明 local variable & global variable，
而後解釋 closure。

<button type="button" onclick="myFunction()">Count!</button>

<p id="demo">0</p>

<script>
var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

function myFunction(){
    document.getElementById("demo").innerHTML = add();
}
</script>

以下是網站解釋：

The variable add is assigned the return value of a self-invoking function.

The self-invoking function only runs once. It sets the counter to zero (0), and returns a function expression.

This way add becomes a function. The "wonderful" part is that it can access the counter in the parent scope.

This is called a JavaScript closure. It makes it possible for a function to have "private" variables.

The counter is protected by the scope of the anonymous function, and can only be changed using the add function.

紅字不懂啊！

[JS]網頁學習 第四章 Function Definitions, Function Parameters小節 心得小記

原來 Hoisting 也適用 function，
所以才會出現先有 function( ); 後面才宣告該 function 執行碼。

myFunction(5);

function myFunction(y) {
    return y * y;
}

但這樣是個好的寫法嗎？
----

以下認知待商榷：

未被呼叫的 function，其參數稱為 parameters；
被呼叫的 function，其參數稱為 arguments。

method 是長的像 function 的 property。

[JS]網頁學習 第三章 Object Methods, Object Prototypes小節 心得小記

總覺得這是一個很好的參考範例，使用到 this 及帶有參數的 function，
因此特別收錄，以便隨時參閱：

<script>
function person(firstName,lastName,age,eyeColor) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
    this.eyeColor = eyeColor;
    this.changeName = function (name) {
        this.lastName = name;
    }
}
var myMother = new person("Sally","Rally",48,"green");
myMother.changeName("Doe");
document.getElementById("demo").innerHTML =
"My mother's last name is " + myMother.lastName;
</script>
----

講述 prototype 若要新增新的 property/ method 不可使用如下
(新增一般已存在物件的syntax)：

Person.nationality = "English";

因 prototype 並非已存在物件，而是建構子；

若要新增，則要在定義 prototype 區塊寫入。

但是允許以下作法，使用 prototype property：

Person.prototype.nationality = "English";

Person.prototype.name = function() {

    return this.firstName + " " + this.lastName;

};

[JS]網頁學習 第二章 JS Forms, Forms API 小節 心得小記

說明、舉例驗證 user input，避免無填入或範圍外的數值，
這裡提到經常使用在檢驗數字。

輸入錯誤可選擇顯示跳出視窗，或是在 input 附近提示。
驗證無填入、跳出視窗：

<script>
function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == "") {
        alert("Name must be filled out");
        return false;
    }
}
</script>
</head>
<body>

<form name="myForm" action="/action_page_post.php"
onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>


</body>

以上畫紅字不懂：
1. 為何不可刪除 ["myForm"]？
2. 輸入 false 是為了停止繼續執行？
3. 可以使用 onclick 嗎？

試著將var x 改為常用的 getElementById("fname")、
onsubmit 改為 onclick 並移至 input type="submit" 中，
完全錯誤不驗證跳下一頁！why~

另外，document.forms[][] 好像是第一次出現，留意一下這個句型。

[JS]網頁學習 第一章 JS RegExp, JS Performance, JS JSON 小節 心得小記

使用 RegExp 來搜尋字串，
若 modifier 設 i ，則搜尋無大小寫之分。

----

接近第一章尾聲，
開始講解如何撰寫是較佳的句型，使程式更有效率，
是很實用也很貼心的數個小節，而非我原以為的行數越少越好：

Bad:
var i;
for (i = 0; i < arr.length; i++) {
Better Code:
var i;
var l = arr.length;
for (i = 0; i < l; i++) {

----

<h2>Create Object from JSON String</h2>

<p id="demo"></p>

<script>
var text = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';

obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>

上例用 JSON 編寫，但又為何要多此一舉用 JSON 呢？
可能後面章節會說明，先在此紀錄問題。

[JS]網頁學習 第一章 JS Type Conversion, JS Bitwise 小節 心得小記

最喜歡樹狀圖 & 條列式了！
以下引用網頁內文，type們的彙整：

In JS there are 5 different data types that can contain values:

•   string
•   number
•   boolean
•   object
•   function

There are 3 types of objects:

• Object
• Date
• Array

And 2 data types that cannot contain values:

• null
• undefined

----

這個章節出現一個回傳並印出 "true" 的範例，在此練習解釋：

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = isArray(fruits);

function isArray(myArray) {
    return myArray.constructor.toString().indexOf("Array") > -1;
}
</script>

在 id = "demo" 的標籤加入 isArray(fruits) method 的回傳值，
所以要解釋 isArray()：
isArray(example) 回傳括弧中參數 example 的 constructor 為何種型別方法，
並將回傳結果顯示為字串 (string? array?)，
indexOf使得若字串 (string? array?) 中有 "Array" 字串，則 indexOf 必大於等於0，
故 > -1 為 true.

以上除了 (string? array?)，其他都較有把握解釋正確。
這邊將腳本碼改成下述也是回傳 true，意義應該相同：(待高人指點)

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = 
(fruits.constructor.toString().indexOf("Array") > -1);
</script>

網頁中還有更簡化的範例，使用到" === "，也不難該試著想想看。

----

Bitwise 的章節，以下範例有疑問：
Converting Decimal to Binary
Example

function dec2bin(dec){
    return (dec >>> 0).toString(2);
}

dec >>> 0 表示什麼？將參數補0右移0個位子？
toString(2) 的2表示2進位嗎？

[JS]書面學習 犀牛書 第一部第一至四章 心得小記

第一章

在 12頁時放上一個貸款計算的範例，
這時才知道， canvas 的功能發揮在此：

使用者填入資訊 (本金、利率、分期數)，
canvas 汲取資訊繪出圖樣 (償貸交叉圖表)

因先前的書都是在程式碼中繪成的範例，
所以後知後覺發現是這樣厲害的功能！

----

第三章

型別「只有」兩種：primitive type, object type。
非 primitive type 則 object type，有非p則q的感覺。
primitive type : numbers, strings, Boolean, (null and undefined)

實務上對 null 使用 typeOf operator 會回傳 "object"，
null 被看成自成一型別，它是這個型別的唯一成員。
對 undefined 使用 typeOf operator 會回傳 "undefined"，
也是自成一型別的唯一成員。

物件導向語言的解釋
「JS是物件導向語言，
粗略地說，代表型別它們自己可以定義 methods 來處理 values(運算值)，
而非使用一個 global function 去處理各種型別的運算值。例如：

   使用 a.sort() // invoke a 的 method，
   而不是使用 sort(a) // 把 a 傳給一個 sort() 函式。」--第30頁

型別分類除了基本型別與物件型別，
也可分為有方法與沒方法 (null and undefined) 的型別；
還可分為可變與不可變的型別primitive type 屬 immutable，
object type 則 mutable。

[JS]網頁學習 第一章 JS Array Sort 小節 進度紀錄

用網站學有點吃力，晚上看螢幕也覺得很刺眼，
試著改成網站 ( w3school JS ) + 書目 ( 犀牛書！ ) 雙管齊下，所以時間要重新設定。

網站進度原訂 6/30，目前已落後 2日份量；
犀牛書大約 1000頁，與 HF 系列排版不同，字較密集，留白、圖片較少
加上工作關係，應該最快也要 15天才能讀完。

皆以扣除假日、工作時數計算：
改成 w3school 網站研讀量每日減半為 4p / d，日期拉長至 7/15，
犀牛書若要 15日看完，需在工作最鬆的情況，先估計 20日，7/11 ( 50p / d )。

若能維持至少 w3school 4p / d，則能在 7/11 與犀牛書同步完成。

[JS]網頁學習 第一章 JS Array Sort 小節 問題

以下引用 w3school 網站內文

The Compare Function
The purpose of the compare function is to define an alternative sort order.

The compare function should return a negative, zero, or positive value, depending on the arguments:

function(a, b){return a-b}

唸到這邊非常卡：

1. a, b 是什麼？
並無宣告 var a, b，所以是預設 Arrays 中的每個 element 嗎？

2. 為何 a - b < 0 則 a 就排序在 b 前面，也是預設嗎？
return 結果可為負數、0、正數，分別如何影響排序？

3. 為何改為 return b - a 就是從大到小排序？

4. 為何改為 return 0.5 - Math.random() 就是亂數？不需要用到 a, b了嗎？


----

var points = [40, 100, 1, 5, 25, 10];

document.getElementById("demo").innerHTML = myArrayMax(points);

function myArrayMax(arr) {
    return Math.max.apply(null, arr);

}

null 的作用是？ 為何將 Math.max.apply() 參數去掉或打錯就變 -Infinite？

----

<h2>JavaScript Array Sort</h2>

<p>Click the buttons to sort car objects on age.</p>

<button onclick="myFunction()">Sort</button>

<p id="demo"></p>

<script>
var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}]

displayCars();

function myFunction() {
    cars.sort(function(a, b){return a.year - b.year});
    displayCars();
}

function displayCars() {
  document.getElementById("demo").innerHTML =
  cars[0].type + " " + cars[0].year + "<br>" +
  cars[1].type + " " + cars[1].year + "<br>" +
  cars[2].type + " " + cars[2].year;
}

</script>

上述是依照年份排列，改成依 type 字母排序，
想取出各 element 的 type 再以 charAt(0) 比較，
  cars.sort(this.type.charAt(0));
測試結果無法將 type 依序排列，why ?

[JS]網頁學習 第一章 JS String Methods 小節 進度紀錄

用網頁學習省錢但無法好好筆記、快速翻閱，
相較容易分心，但能跟著實作，是相當重要的優點。

十個章節 全113小節 (113頁網頁)，
距離上次紀錄是 6/14 大約 00:00起至今 6/17 02:20，
經過 3天，其中 6/16 穿插了一份外地工作，
讀完 18頁，估算成 7p / d 好像有點慢，雖全英但前面章節較簡單，應更凝聚專注。

透過中文學習，可以讓你快速入門；
透過英文學習，才能讓你真正理解。
-Will 保哥

若去除假日、工作日 (工作日估一週一天，會念比較少的量)，
且考慮難度遞增，(113-18)/7=13.6 d
那就暫定 6/30 共14d(含工作日、假日) 第一次閱畢，快快趕工了！
還有 bootstrap 跟今天入手的 HF jQ ...一大堆在排隊，
專注專注！

https://www.w3schools.com/js/default.asp
第一章 JS Tutorial         49小節
第二章 JS Forms           2小節
第三章 JS Objects         4小節
第四章 JS Functions      6小節
第五章 JS HTML DOM    13小節

第六章 JS Browser BOM  8小節
第七章 JS AJAX              10小節
第八章 JS JSON              11小節
第九章 JS Examples        8小節
第十章 JS References      2小節

[HTML/CSS]別再說你不懂HTML5 第一次閱畢

趕在 6/13 23:48 讀完。

又一本後半部章節使人節節敗退的書，
從中後半的 canvas 章節開始以雜誌翻閱方式看，
很多部分沒有細講，在單元開始的引文也寫
「內容會有不少困難主題，請努力理解它們。」

看來趕快把 JS 功力打起來治百病，
沒有 JS 底，真是越唸越覺得心虛，對不起付出的時間。

接下來， JS 學習天數先以10天為目標。
以免費線上課程為主，但書錢該噴還是要噴。
都要吃土了，還是好想買 Taker 網頁基礎15天的課程啊

[HTML/CSS]第三章 UNIT 37 下載字形：進度紀錄 & 心得小記

趕在 6/12前唸完的計畫大失敗，
中間有看 Taker 的切版技巧，但遇到六日即可能會因約會打斷計畫，
已控制在兩周一次、一天半的約會還是會嚴重耽誤，
看來要把假日的時間預先抓出，不能放在計畫內。

這兩天沒有工作，公、私約會也較少，進度應可大躍進，
6/13 可以唸完剩餘一百頁的《別再說你不懂HTML5》。

進入HTML5的章節，講述很多新標籤，
看來還是得靠作品集邊做邊記才實為上策。
今天發現進度條 & 技能樹網站：

六角學院 - 邁向前端工程師之路
https://quip.com/D59vAxcgG8Qc

[jQuery]10天就懂！一定學會jQuery的36堂關鍵課程 第一次閱畢

6/7 PM 3:38 完成初次閱畢，是本錯字、錯誤內容不少的書。

後面章節利用 xampp，但已經是三年前的書，
該網站的內容已不相同，找不到security的位置在哪，
所以從 Lesson 27 到最後 Lesson 36 的範例都無法實作實現。

也不知道是因為台灣出版社的問題，還是本來著作就是如此，
後半章節講解錯字跟錯誤都較多，
感到虎頭蛇尾，有點失望，後面非常困難，
應該先讀 JS 再念 jQuery 才是。

批評完也說點好話，裡面教的動畫效果呈現，的確讓人振奮，
只是用到 this 的時候，思路要夠敏捷清楚，不然很容易錯亂。

接著是JS的線上學習，及另一本《別再說你不懂HTML5》研讀，
書籍的出版社與 10天jQuery 相同，希望不會再錯誤連連。

頁數 200，且在念 HF 系列前就是碰這本，
估計 3天結束，DL 是 6/12。
起始日延後至 6/10，因配合 6/10 UX 講座，得先看完手上相關書目。
雖然還是會偷唸一些。
線上學習目前沒實做過，時間估上還無法做估算，
總之持續進度記錄，再做統計推算。

[jQuery]第五章 Lesson21 徹底研究事件物件：進度紀錄

這本書屬於入門書，所以以極簡方式說明，
做到盡量讓初學者理解，但說要徹底理解還是需要靠其他書籍、網站輔助。

從第五章  Lesson16 物件處理開始難度開始直線上升，進度因此緩下來。
Lesson16 瞬間使用到 this ，也提到：

「各位讀者讀到這說不定會覺得，不如一開始就先在HTML或CSS設定就好，
    何必透過jQuery處理呢？」

忍不住在旁邊用力寫下「對呀！」
真是善解人意的一本入門書啊！
還請讀者忽略太艱澀的概念，先繼續學下去。

6/5 中午，進度 59%。
想在 6/6 結束還有 40%，可能很困難，
最慢要在 6/7 下午完成，拒絕拖延症。

[jQuery]第四章 Lesson15 元素之間穿梭：進度紀錄

jQuery第2天，進度達43%，
離預估的7天( 6/8前)應可順利提前至( 6/6)達成。
目前還沒感受到其威力，只覺得是不是「檢查html碼的人」在使用？
不然其實都可以在html就簡單解決，何必多加上script標籤。

html/css整本複習改為搭配作品集進行，時間增長為150天。

JS方面換個方式學習：以大Peter前輩提供的網站為參考，
感謝Mina熱心引薦，同一天認識兩位貴人！
且建議一開始可以從 landing page開始，
先不用想動態，純用 CSS與 html實踐的靜態切版。

w3cschool 免費教學網站
https://www.w3schools.com/
https://www.w3schools.com.cn/

codeschool 免費教學網站
https://www.codecademy.com/

CodePen 有很多創作者實作的小東西可以學習
https://codepen.io/

[HTML/CSS]深入淺出 HTML and CSS 第一次閱畢

趕在 6/2前閱畢，首次閱讀以blog紀錄來看花了 16天，
實際上因為在 5/17是先唸其他本書籍，所以應該更少，
暫時抓 13天，第二次整本複習因為也非只專門攻讀複習，
時間先抓7天，但可能是個大挑戰。

接著要唸的是 深入淺出JavaScript (2008/07初版)，
同系列書籍，以厚度來估算(600/700)應該會較快讀完，
但同時有另外工作會占用時間，
還是要抓短不抓長，估計11天唸完，趕上6月中生作品集。

所以，6/15完成 HF系列 HTML and CSS複習第二次、JS已唸完。



出現了一些問題，從圖書館借來的HF JS在官網上的範例已不是舊版本，
新版本的檔案為HF JS Programming，待買新書再念。
先念jQuery 《10天就懂！一定學會jQuery的36堂關鍵課程》，
估計7天( 6/8前)唸完，至於JS用網路教學的資源來學習。

[HTML/CSS]第十二章 HTML5標記 當代的HTML：進度紀錄

總算在 5/31 PM 11:57進入到第十二章節，
必須在 6/2 之前完成，還有四個章節，
得趕快繼續趕工了！

[HTML/CSS]第九章 Box Model 深入親近元件：media query

此章節說明在不同裝置上瀏覽器選擇套用的不同樣式，

難怪有時候在印列網頁時，視覺瀏覽與列印出來的樣式會有差異。

上次發文是5/24，今天是5/29，
從第三章迄今已第九章閱畢，總共有15章，得快加緊腳步在6/2號念完。

[HTML/CSS]第三章 建立區塊 網頁架構：第116頁勘誤

在深入淺出HTML and CSS 第二版的第116頁有誤，
我的書是2016年04月初版三刷，
官網勘誤表( http://books.gotop.com.tw/o_A327 )的錯誤在我的書裡已是更正過，
但表格內也沒有指出該項錯誤。

勘誤如下，提示縱橫及項目數字錯誤，應修正為：

橫向
1. Segway 的最高時速。
6. 把某個元件放在另一個元件，就稱為______。
9. <q>屬於這類元件。
10.使用<ol>製作此類清單。
13.另一個空元件。
14.Tony的交通工具。
15.網頁上的主要結構單元。

縱向
2. Tony 不會做這類事情。
3. 一起開著 T-bird 離開。
4. 使用<ul>製作此類清單。
5. 沒有內容的元件。
7. 知名又引人注目的廣告招牌。
8. 用於引文的區塊元件。
11.需要兩個元件。
12.空元件沒有______。

[HTML/CSS]第三章 建立區塊 網頁架構：心得小記

使用書籍：深入淺出HTML and CSS P.96
發文時已經到第三章了。

第一本書：別再說你不懂HTML5 圖解網頁設計必學的九堂課
說明不夠完整，現在使用的《深入淺出》內容活潑詳盡。

在這一頁，練習把手寫遊記寫成網頁，
出現了第二個無closing tag的元件：<br>
使用的位置也不同。 在此紀錄同時掌握進度，目前算是落後。

[LIFE]轉折 主動認識MagicLen之後：前端三大請進，JAVA再相會

從連結點到這個網站
https://magiclen.org/

看到是台中人，也曾有過餐飲經歷，主因在文末也有聲明歡迎加好友。
於是詢問之下，決定將JAVA學習比例下放，
應該今天下午JS的書就會到，要開始猛攻三大(JS HTML CSS)了，
日後發文也會以三大的為主要篇幅，暫時與JAVA分手。

[JAVA]第4章 認識物件：課後練習(二)

2.撰寫：簡單的樸克牌洗牌程式

失敗作品：

    public static void main(String[] args) {
        String[] type = {"桃", "心", "磚", "梅"};
        String[] number
                = {"A", "2", "3", "4", "5", "6", "7",
                    "8", "9", "10", "J", "Q", "K"};
        
        for (int j = 0; j < 52; j++) {
            int t = (int) (Math.random() * 4);  //隨機產生0~3索引值
            int n = (int) (Math.random() * 13); //隨機產生0~12索引值
            String[] card = new String[52];
            card[j] = type[t] + " " + number[n];
              //若有元素重複則重新產生，若使用break會少一張牌
//            if (j + 1 < 52 && card[j + 1].equals(card[j])) {
//                break;
//            }
            System.out.print(card[j] + " ");
        }
        System.out.println();
    }


}

後來想到new在迴圈裡可能會造成程式效率差，
把new拉到迴圈開始前，繼續思考元素可能重複的問題，最後想不出解。
於是換個想法：先把所有的牌都「依序」製造出來，再隨機排列。