icon library

http://fortawesome.github.io/Font-Awesome/icon/external-link-square/

FlexSlider, css, download

cool, download, example code


https://github.com/woothemes/FlexSlider

css html responsive @media

@media screen and (max-width: 300px) {
    body {
        background-color: lightblue;
    }
}


http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_media_example1

child selector

body > P { line-height: 1.3 }

up vote22down voteaccepted


it means that only "first nested" elements will be targeted ("child" elements), for example
   <div id="a">
       <div id="b">
         <div id="c">
       </div>
      </div>
    </div>

if you write
#a div{
 background: red;
}

then both #b and #c will be red, but if you use > like
#a > div{
 background: red;
}

CSS display Property, inline, inline-block

http://www.w3schools.com/cssref/playit.asp?filename=playcss_display&preval=block

CSS background-size

http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover

background-repeat:no-repeat;
background-size:cover;

CSS background-position 背景圖片位置

from:
http://www.wibibi.com/info.php?tid=79

方向參數
水平方向left - 靠左對齊、center - 置中對齊、right - 靠右對齊垂直方向top - 靠上對齊、center - 置中對齊、bottom - 靠下對齊

CSS background-position 範例一、各種對齊方式

background-position:right bottom;　// 靠右靠下對齊
background-position:30px 60px;　//靠左 30px 靠上 60 px 的位置
background-position:10% 50%;　// 靠左 10% 靠上 50% 的位置
background-position:10%;　// 效果同上一行，靠左 10% 靠上 50% 的位置

以上範例要確保正確顯示，需搭配 background-repeat:no-repeat 告訴瀏覽器背景圖片不要重覆顯示。特別要注意的是，如果使用了簡化寫法，只寫一個屬性值，另一個屬性值將會自動取中間值，為了將來管理方便，建議兩個方向的屬性值都寫上去比較好。

CSS background-position 範例二、垂直置中對齊

body{
　background-image:url('背景圖片');　//先給你想要放在背景的圖片路徑或網址
　background-repeat:no-repeat;　//背景圖片不要重覆顯示（僅顯示一次）
　background-attachment:fixed;　//背景圖片位置固定
　background-position:center;　//背景圖片水平位置與垂直位置均置中對齊
}

node , parse url pathname

var url = require("url");

        var pathname = url.parse(request.url).pathname;
        console.log("Request for:" +pathname+" receive");


========================

result:

http://192.168.0.13:8888/hello
pathname : hello

node 匿名函數

我們可以，就像剛才那樣，用它的名字把一個函數作為變數傳遞。但是我們不一定要繞這個 "先定義，再傳遞" 的圈子，我們可以直接在另一個函數的括號中定義和傳遞這個函數：

function execute(someFunction, value) {
  someFunction(value);
}

execute(function(word){ console.log(word) }, "Hello");

我們在 execute 接受第一個參數的地方直接定義了我們準備傳遞給 execute 的函數。






======================================================


帶著這些知識，我們再來看看我們簡約而不簡單的HTTP伺服器：

var http = require("http");

http.createServer(function(request, response) {
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.write("Hello World");
  response.end();
}).listen(8888);

現在它看上去應該清晰了很多：我們向 createServer 函數傳遞了一個匿名函數。
用這樣的程式碼也可以達到同樣的目的：

var http = require("http");
function onRequest(request, response) {
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.write("Hello World");
  response.end();
}

http.createServer(onRequest).listen(8888);

function javascript / jquery / call back function

同步（Synchronous）和异步（Asynchronous）。

"同步模式"就是上一段的模式，后一个任务等待前一个任务结束，然后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的；
"异步模式"则完全不同，每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。



/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
jQuery
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

<script>
function myFunction() {
    $("#h01").attr("style", "color:red").html("Hello jQuery")
}
$(document).ready(myFunction);
</script>


<h1 id="h01"></h1>



/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Example with Callback

$("button").click(function(){
    $("p").hide("slow", function(){
        alert("The paragraph is now hidden");
    });
});

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Example without Callback

$("button").click(function(){
    $("p").hide(1000);
    alert("The paragraph is now hidden");
});

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

https://learn.jquery.com/about-jquery/how-jquery-works/