Ocean 學習筆記: 04/01/2014

2014年4月20日星期日

JavaScript toString( ) and valueOf

toString() , valueOf() 與 Java 、 ActionScript3 基本原理相似。

JavaScript Array native function

Array Native forEach

var data = [3,5,6,9,7,8,4,3,2,1];
var str = '';
//array native forEach
data.forEach(function(e){
str += e + ',';
});
//print 3,5,6,9,7,8,4,3,2,1
console.log(str.substring(0,str.length-1));

Array Native Sort
var data = [3,5,6,9,7,8,4,3,2,1];
var str = '';
data.sort();
data.forEach(function(e){
str += e + ',';
});
//1,2,3,3,4,5,6,7,8,9
console.log(str.substring(0,str.length-1));

Customer Compare Funciton
var data = [3,5,6,9,7,8,4,3,2,1];
var str = '';
function compare(a,b){
return b - a;
}
data.sort(compare);
data.forEach(function(e){
str += e + ',';
});
//9,8,7,6,5,4,3,3,2,1
console.log(str.substring(0,str.length-1));

2014年4月19日星期六

輸出三角形

想輸出

*
**
***
**
*

一開始學程式時會寫雙迴圈
後來利用%可以只單迴圈

最近有靈感這麼用

function draw(count){
var bag='',i=0,e=count;
while(i < e || count-- > 0){
var out = (i++ < e) ? (bag+='*') : bag.substring(0,count);
console.log(out);
}
}
draw(3);

2014年4月15日星期二

常用術語收集

Memory Leak 記憶體漏洩

2014年4月14日星期一

application/x-www-form-urlencoded

Jquery ajax contentType 預設為： 'application/x-www-form-urlencoded; charset=UTF-8'

可用有：

application/x-www-form-urlencoded
application/json
text/xml

要注意：如果不是使用 application/x-www-form-urlencoded 在Servlet端無法從request.getparameter(key)，取回資料，只能從StreamInput中取得。

form 的enctype 發送格式預設是：'application/x-www-form-urlencoded;
可用有：

application/x-www-form-urlencoded
multipart/form-data
text/plain

jsrender 範例

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="author" content="hua" />
<script src="../js/jquery-1.8.1.min.js"></script>
<script src="../js/jsrender.min.js"></script>
<style>
.table201404120200{
}

.table201404120200 td{
border: solid 1px #CCCCCC;
}
</style>
</head>
<body>
<div id="content20140412">
</div>


<script id="mainTmpl201404120200" type="text/x-jsrender">
<table width="400px" class='table201404120200'>
<thead>
<tr ><th colspan="4">{{:title}}</th></tr>
</thead>
<tbody>
<tr>
<td>品名</td>
<td>數量</td>
<td>成本</td>
<td>售價</td>
<td>價差</td> 
<td>價差*2</td>
<td>index</td>
<td>color</td>
</tr>
</tr>
{{for data tmpl="#reportTmpl201404120200" /}}
</tbody>
</table>
</script>

<script id="reportTmpl201404120200" type="text/x-jsrender">
<tr>
<td>{{: nam }}</td>
<td>{{: quantity }}</td>
<td>{{: cost }}</td>
<td>{{: price}}</td>
<td>{{: ~method( price , cost)}}</td> 
<td>{{: ~method( price , cost) * 2}}</td> 
<td>{{: #index }}</td>
{{if #index % 2 == 0}}
<td style="background:#FF0080 ">#FF0080</td>
{{else}}
<td style="background:#FF8000 ">#FF8000</td>
{{/if}}

</tr>
</script>

<script>
(function(){
//資料,以資料驅動畫面
var report = {
title : '貨品資訊列表',
data : [
{
nam : '精工表',
quantity : 2,
cost : 10000,
price : 30000,
},
{
nam : '魯夫公仔',
quantity : 20,
cost : 100,
price : 399,
},
{
nam : 'RX-78 RG 1/144',
quantity : 10,
cost : 500,
price : 1000,
}
]
};

function difference(price, cost){
return price - cost;
}

var html = $("#mainTmpl201404120200").render(report , {method : difference});
//console.log(html);
$('#content20140412').html(html);
})();
</script>
</body>

2014年4月20日 星期日