java方式来写js程序(demo)
java方式来写js程序(demo) javascript应用是非常广泛的,而且功能特别强大,但是javascript程序就是没有java代码好看,这点是好无疑问的,不过因为js应用太广了,在web应用中几乎离不开它,我初学js,总想像写java程序那样写js。
一个是过滤相同的元素：
<script src='core.js'></script>
<script src='collection.js'></script>
<script>
var a='74,77,74,74,89,45,45,55,89';
//'74,77,89,45,55'
var arr=a.split(',');
var set=new HashSet();
set.addAll(Arrays.asList(arr));
a=set.toArray();
alert(a);
</script>
另一个程序完全是模拟CGI的：
<script src='core.js'></script>
<script src='collection.js'></script>
<style>
td{
font-size:12px;
}
th{
font-size:14px;
}
</style>
<body>
<table width='50%' align='center'>
<tr>
<td>用户名称:<input type='text' id='search_name'></td>
<td><a href='#' onClick='searchUser()'>查找用户</a></td>
</tr>
</table>
<div id='list_table' align='center'>
</div>
<table width='50%' align='center'>
<tr>
<td>用户ID:<input type='text' id='txt_id'></td>
<td>用户名称:<input type='text' id='txt_name'></td>
<td><a href='#' onClick='addUser()'>添加用户</a></td>
</tr>
</table>
</body>
<script>
function User(id,name){
this.id=id;
this.name=name;
this.equals=equals;
function equals(obj){
return this.id==obj.id;
}
this.compareTo=compareTo;
function compareTo(obj){
return 1;
}
}
function AscID(){
this.compare=compare;
function compare(obj1,obj2){
if(obj1.id>obj2.id) return 1;
else if(obj1.id==obj2.id) return 0;
else return -1;
}
}
function DescID(){
this.compare=compare;
function compare(obj1,obj2){
if(obj1.id>obj2.id) return -1;
else if(obj1.id==obj2.id) return 0;
else return 1;
}
}
var table=document.getElementById('list_table');
var list=new SortedList();
var buffer=new ArrayList();
buffer.add(new User('100','Heery'));
buffer.add(new User('101','Marry'));
buffer.add(new User('102','JIM'));
buffer.add(new User('200','Bush'));
buffer.add(new User('201','Eey'));
buffer.add(new User('203','Boy'));
buffer.add(new User('300','Oush'));
buffer.add(new User('1111111','胡江涛'));
buffer.add(new User('2324424','温家宝'));
buffer.add(new User('24325324','刘淇'));
buffer.add(new User('245325353','吴树根'));
list.setComparator(new AscID());
list.addAll(buffer);
//var id_asc=true;
var pageSize=10;
var curPage=1;
function getTotalPage(){
return Math.ceil((list.size()/pageSize));
}
function getNavigation(){
var nav='<tr><td colspan=2>';
nav+='<a href='#' onClick='firstPage()'>首页</a> ';
nav+='<a href='#' onClick='prePage()'>上一页</a> ';
nav+='<a href='#' onClick='nextPage()'>下一页</a> ';
nav+='<a href='#' onClick='lastPage()'>末页</a> ';
nav+='总共:'+list.size();
nav+=' '
nav+='页次:'+curPage+'/'+getTotalPage();
nav+=' ';
nav+='每页显示:'+pageSize;
nav+=' ';
nav+='当前页数:'+curPage;
nav+='</td></tr>';
return nav;
}
function firstPage(){
curPage=1;
table.innerHTML=getInnerHTML(curPage,pageSize);
}
function nextPage(){
if(curPage==getTotalPage()) return;
table.innerHTML=getInnerHTML(++curPage,pageSize);
}
function prePage(){
if(curPage==1) return;
table.innerHTML=getInnerHTML(--curPage,pageSize);
}
function lastPage(){
curPage=getTotalPage();
table.innerHTML=getInnerHTML(curPage,pageSize);
}
function refresh(){
if(curPage>getTotalPage()) curPage=getTotalPage();
table.innerHTML=getInnerHTML(curPage,pageSize);
}
function addUser(){
var id=document.getElementById('txt_id').value;
var name=document.getElementById('txt_name').value;
//if(id_asc)
buffer.add(new User(id,name));
list.add(new User(id,name));
refresh();
}
function searchUser(){
var key=document.getElementById('search_name').value;
var com=list.getComparator();
list=new SortedList();
if(com!=null) list.setComparator(com);
for(var i=0;i<buffer.size();i++){
var u=buffer.get(i);
if(u.name.indexOf(key)!=-1) list.add(u);
}
refresh();
}
function delUser(id){
buffer.remove(new User(id,name));
list.remove(new User(id,name));
refresh();
}
function getInnerHTML(pg,size){
var s='<table width=50% align=center><tr><th id=\'user_id\' align=left width=40%>用户ID[<a href='#' onClick='descID()'>降序</a>]</th><th align=left>用户名称</th><th></td></tr>';
var first=(pg-1)*size;
for(var i=0;i<size;i++){
var index=first+i;
if(index>=list.size()) break;
var u=list.get(index);
s+='<tr><td>';
s+=u.id;
s+='</td><td>';
s+=u.name;
s+='</td><td>';
s+='<a href='#' onClick=\'delUser('';
s+=u.id;
s+='')\'>删除</a>';
s+='</td></tr>';
}
s+=getNavigation();
s+='</table>';
return s;
}
//delay()
table.innerText='loading';
function oneStep(){
table.innerText='loading..';
}
function twoStep(){
table.innerText='loading....';
}
function threeStep(){
table.innerText='loading.........';
}
function fourStep(){
table.innerText='loading............OK!';
}
function descID(){
var oldList=list;
list=Collections.sort(oldList,new DescID());
refresh();
var id=document.getElementById('user_id');
id.innerHTML='用户ID[<a href='#' onClick='ascID()'>升序</a>]';
}
function ascID(){
var oldList=list;
list=Collections.sort(oldList,new AscID());
refresh();
}
setTimeout('oneStep()',500);
setTimeout('twoStep()',1000);
setTimeout('threeStep()',1500);
setTimeout('fourStep()',2000);
setTimeout('firstPage()',3000);
//firstPage();
</script>
