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 添加完整程式碼
2017年7月29日 星期六
2017年7月28日 星期五
[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());
#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());
2017年7月25日 星期二
[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() 無條件捨去
如需重新讀取 input 值,記得在函數中再 assign 一次。
#73
善用 array 中 splice 的參數。
console.log(arrayName) 能在 console 輸出 array
#77
while loop 常用在循環次數未知的情況
(相較於 for loop)
#81
split 可以將字串化為 array
Math.floor() 無條件捨去
2017年7月20日 星期四
[練習]切版 科技島讀 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 改回來,沒有成功。
最後成功結果如下,文字再回彈卻沒有顯現:
#7/21
找到另一個 top bar 教學,
只要能讀取得到網頁滑動高度,就有辦法做!
取得 body 捲動後高度 JS & jQuery:
http://www.eion.com.tw/Blogger/?Pid=1154
照此方法 5分鐘搞定!太適合自誇了!!
最後是 slide-showing menu 與 整份間距微調,即大功告成!
slide-showing menu 已經邊改邊想到腦袋疲乏,決定尋覓高人指點學功夫,
間距懶得調了,先眠去補充體力。本次切版決定告一段落!
花一天的時間切出 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 已經邊改邊想到腦袋疲乏,決定尋覓高人指點學功夫,
間距懶得調了,先眠去補充體力。本次切版決定告一段落!
2017年7月17日 星期一
[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
作品集加入表單 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
2017年7月13日 星期四
[Life]進補 P2P夏季大會 18小時關鍵字
其實只是和大 Peter 聚餐並討教,
趕快記下關鍵字:
標籤準確度
float & flex (?)
父子都要 clear
z-index & position
抽獎、彩球、轉盤設計最近好夯 (機率、統計)
Dashapp、MAMP、emmet
髒東西
作品集推薦整個專案
Git大概知道即可,但 Github很值得「現在」就拿來用
「精熟」只是人資寫的
買課程不要衝動、不要跟風
眼神有可見光、碰到撞牆不要放棄
Youtube 一定要打上 tutorial
感恩!又一個貴人,好幸運
趕快記下關鍵字:
標籤準確度
float & flex (?)
父子都要 clear
z-index & position
抽獎、彩球、轉盤設計最近好夯 (機率、統計)
Dashapp、MAMP、emmet
髒東西
作品集推薦整個專案
Git大概知道即可,但 Github很值得「現在」就拿來用
「精熟」只是人資寫的
買課程不要衝動、不要跟風
眼神有可見光、碰到撞牆不要放棄
Youtube 一定要打上 tutorial
感恩!又一個貴人,好幸運
2017年7月11日 星期二
2017年7月9日 星期日
[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
但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
2017年7月7日 星期五
[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 打造互動性網頁動畫效果
接著以 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 部分充滿大量範例,我想實作時再當作參考資料即可,
一直看範例太片段、不連續,吸收效率可能會很差。
PHP 篇幅也不少,有點煎熬呀!
----
後面 Example 部分充滿大量範例,我想實作時再當作參考資料即可,
一直看範例太片段、不連續,吸收效率可能會很差。
2017年7月6日 星期四
[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.
點擊下方列表,在上方呈現,
類似畫廊功能,但是改成文字。
是同步與不同步的意思嗎?
2017/7/10 得到答案了!asynchronous 指"非"同步
https://www.youtube.com/watch?v=JjnbWNUBY48
----
這幾個 XTMHttp 的章節都很相似、艱澀,
列出一個應該很實用的程式碼範例連結
Try it yourself.
點擊下方列表,在上方呈現,
類似畫廊功能,但是改成文字。
2017年7月3日 星期一
[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>
覺得這個計時器、停止時間按鈕的範例很重要,先記下來
----
|| 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
2017年7月1日 星期六
[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>
使用 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>
訂閱:
文章 (Atom)
-
2019.07.26 此文章發表時,使用 gulp 版數為 3.9.1,所以在專案資料夾安裝 gulp 時請使用:gulp@3.9.1; 或在 package.json 降為 "gulp": "^3.9.1",但有網友說在 Node v1...
-
引入: 使用Skrollr.js實作視差滾動-(一)入門篇 lala0812.logdown.com 使用方法 art.is.com.tw 有提到parallax設計方向,及另開初始設定css的觀念 How To Create A Parallax Scrolling ...