[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>