JsJava官方中文博客

最优秀的Javascript类库解决方案和界面应用开发支撑框架!

Archive for 9月, 2007

九月 25 2007

Javascript对数组的操作

Published by admin under 应用样例/案例

【来源:JsJava官方中文博客】 

  Javascript自身提供了一些操作,可以对数组实现一定的处理,例如排序、连接、堆栈等等,下面做一下简单的介绍。

 1,concat(arrayName2, arrayName3, …, arrayNameN) ,将数组本身和另外一个或多个数组进行连接,例如:
    var arr1=[”a”,”c”];
    var arr2=[”b”,”d”];
    var arr22=[”e”,”f”];
    var arr3=arr1.concat(arr2,arr22);
   document.write(arr3);//结果显示为:a,c,b,d,e,f

  2,join(separator),通过间隔符将数字连接为字符串,例如:
    var arr1=[”a”,”b”,”c”,”d”,”e”];
    var arr1Str=arr1.join(”-”);
    document.write(arr1Str);//结果显示为:a-b-c-d-e

 3,pop()/push(element1, …, elementN) ,实现了堆栈的操作,push是入栈,pop是出栈,例如:
    var arr1=[”a”,”b”];
    arr1.push(”c”,”d”);
    document.write(arr1);//结果为:a,b,c,d
    var value=arr1.pop();
    document.write(value);//结果为:d

  4,reverse() ,将数组反向排序,例如:
   var arr1=[”a”,”b”,”c”];
    arr1.reverse();
    document.write(arr1);//结果为:c,b,a

  5,sort(compareFunction),按照指定的排序规则进行排序,如果参数为空,则按照默认的字母和数字进行排序,例如:
    function mySort(o1,o2){
        if(o1.length>o2){
            return 1;
        }
        return -1;
    }
    var arr1=[”a”,”c”,”bd”];
    arr1.sort();
    document.write(arr1);//结果为:a,bd,c
    arr1.sort(mySort);
    document.write(arr1);//结果为:bd,c,a

  6,shift() /unshift,将数组的第一个值取出(或者将值插入到数组第一个位置),并且数组长度缩短(加长),例如:
    var arr1=[”a”,”b”,”c”];
    var value=arr1.shift();
    document.write(value);//输出为:a
    document.write(arr1);//输出为:b,c
    var value2=arr1.unshift(”g”);
    document.write(value);//IE输出为undefined,Firefox输出为3
    document.write(arr1);//输出为:g,b,c

  7,slice(begin[,end]) ,类似字符串的substring方法,就是截取数组,例如:
    var arr1=[”a”,”b”,”c”];
    var arr2=arr1.slice(0,2);
    document.write(arr2);//输出为:a,b

  8,splice(index, howMany, [element1][, …, elementN]) ,从指定的位置(index)开始,删除后面多个(howMany)数组的值,并从删除处开始依次插入新的值,例如:
    var arr1=[”a”,”b”,”c”];
    arr1.splice(1,1,”m”,”n”,”o”);
    document.write(arr1);//输出为:a,m,n,o,c

  应该说,Javascript本身对数组提供的操作能力,还是不错的,但是在实际应用中,我们需要对数组做更多的操作,例如Java、PHP、.NET中对数组都提供了强大的操作能力,而且许多优秀的开源项目中,也提供了对数组的许多操作,但是Javascript这方面还需要进一步加强。

  为了对数组提供更多的操作,JsJava定义了许多类,来加强对数组的操作,介绍如下:

  1,jsjava.util.Arrays类,仿照Java的Arrays类,对数组提供了一些高效的操作,例如:
  var list=Arrays.asList([”a”,”b”,”c”]);//通过数组创建一个不可变的列表
  而且通过binarySearch,提供了二分法搜索的一个实现,其它的请参考JsJavaDoc

  2,jsorg.apache.commons.lang.ArrayUtils类,该类的实现是参考Apache优秀的commons-lang开源项目实现的,实现其中的所有功能,例如对数组进行插入、删除、搜索、填充、截取等等,例如:
    var arr=ArrayUtils.clone([0,1,2,9,0]);
    document.write(arr+”<br>”);
    document.write(ArrayUtils.subarray(arr,0,3)+”<br>”);
    arr.reverse();
    document.write(arr);
    显示结果为:
    0,1,2,9,0
    0,1,2
    0,9,2,1,0

  3,jsorg.eob.lang.MultiDimensionArrayUtils类,该类实现了对多维数组的创建支持,例如可以方便创建二维和三维数组,具体可以参考文章《在Javascript之中如何创建多维数组

  4,org.apache.commons.math.linear.RealMatrixImpl类,实现对矩阵的操作,矩阵实际上就是多维数组,即实现了对多维数组的支持,例如可以实现多维数组的加、减、乘、除等操作,还有数学运算中对矩阵的其它操作,具体可以参考JsJavaDoc

  JsJava是对Javascript语言最好的扩展和延伸,它与目前流行的prototype.js的方向是不一样的,如果你正在构建web应用,那么JsJava将是你界面应用最好的支撑。

3 responses so far

九月 24 2007

Javascript对日期的操作

Published by admin under 应用样例/案例

【来源:JsJava的官方中文博客网站】 

  对日期的操作,历来都是非常重要的,在Java、.NET和PHP等语言中,有许多标准的类和方法,例如在Java之中,就有Date、Calendar和GregorianCalendar等类,可以实现对日期和日历的许多操作,那么Javascript对日期的支持又如何呢?

  在Javascript之中,提供了标准的Date类,通过Date可以实现对日期的一些常规操作,例如,可以获得年、月、日、时、分、秒、毫秒等值,例如:

  var date=new Date();
  var year=date.getYear();
  var month=date.getMonth()+1;

  另外,通过Date也可以获取具有一定格式化的日期描述信息,例如通过toLoaleString、toLocaleDateString、toLocaleTimeString可以获得本地化的日期描述信息,例如:

  var date=new Date();
  var desc=date.toLocaleString();//返回值:2007年9月24日 0:11:14

  当然了,前面我们写过文章,专门讲述了JsJava中对日期格式化的支持。

  但是仅靠Javascript提供的一个Date对象,面对实际的web应用场景,多少还是有些应付不过来的,例如如何知道某个日期是这一个月的的几周,是本年的第几天等等,还有如何与中国的农历进行转换等等。

  为了解决Javascript中日期处理的这些问题,JsJava提供了几个专门的类,分别介绍如下:

  1,提供了jsjava.text.SimpleDateFormat类,通过该类,可以实现对日期对象的格式化,可以将一个日期对象,格式化为指定格式的字符串结果,这个在《如何使用Javascript格式化日期显示》一文中做过讲述。

  2,提供了jsjava.util.Calendar类和GregorianCalendar类,这与Java语言的Calendar和GregorianCalendar类一样强大,可以很容易的获得,今天是这一年的第几个月、第几周等信息,例如:

  var c = new GregorianCalendar();
  c.setTime(new Date(2007,2,8));
  document.write(c.getField(Calendar.DAY_OF_WEEK_IN_MONTH));//值为2
  document.write(c.getField(Calendar.WEEK_OF_YEAR));//值为10,即是这一年的第10周

  具体API可以查看JsJavaDoc

  3,提供了jsorg.eob.calendar.country.cn.ChinaLunarCalendar类,改类提供了对农历的操作,可以方便的公历日期转换为农历日期,可以获取农历中常用的天干、地支、生肖等等,例如:

  var c=new ChinaLunarCalendar();
  c.setTime(new Date(2005,5,6));
  document.write(“生肖:”+c.getDescOfShengXiao());//鸡
  document.write(“时辰:”+c.getDescOfHours());//子时

  具体API可以查看JsJavaDoc

  JsJava对日期的处理能力是非常强大的,熟练使用JsJava,给web应用开发带来的效率是显而易见的,欢迎大家学习使用。

5 responses so far

九月 23 2007

JsJava2.0发布包更新

Published by admin under 最新动态

【来源:JsJava官方中文博客网站】 

  2007年9月22日,JsJava团队对JsJava2.0发布包进行正式更新,并将原来的jsjava_2_0.zip拆分为四个包,分别介绍如下:

  1,all包,即jsjava_2_0_all.zip,包含JsJava的整个工程,这是一个eclipse工程。

  2,src包,即jsjava_2_0_src.zip,包含了JsJava的所有的Javascript类的源码。

  3,bin包,即jsjava_2_0_bin.zip,包含了JsJava所有的Javascript的lib包,例如JsJava-2.0.js等等,就是直接在web开发中使用的js文件。

  4,doc包,即jsjava_2_0_doc.zip,包含了JsJava的API文档和用户手册。

  建议如下:

  如果只是想在web开发中使用JsJava,那么只需下载bin包,里面包含了JsJava相关的Javascript类库,例如JsJava-2.0.js,这是包含了JsJava所有功能的综合类库,当然了还有一些其它的专用的类库,例如ajax类库、collection类库等等。

  如果想具体查看每一个类的实现,那么请下载src包,里面是按包结构存放的各Javascript类。

  如果想看JsJava API文档和用户手册,可以下载doc包,当然了这两部分,可以直接从JsJava官方网站 http://www.jsjava.com查看。

  如果想查看JsJava代码相关的所有部分,请直接下载all包,这是一个eclilpse工程目录,另外你可以直接通过cvs下载,cvs的匿名配置,请参考https://sourceforge.net/cvs/?group_id=171523.

  JsJava的功能是非常强大的,它来源于web开过过程中的一点一滴,但是以更合理的形式展现给web开发人员,无论你是J2EE开发人员,还是.NET的爱好者,或者是PHP的忠实粉丝,但是有一点是共有的,那就是web开发,尤其是Javascript的使用,那么走进JsJava的世界,它能让你的web开发走的更远。

6 responses so far

九月 22 2007

Javascript对字符串操作的支持

Published by admin under 应用样例/案例

【来源:JsJava官方中文博客网站

字符串操作历来是各种编程语言的基础功能之一,毕竟我们面对的各种各样的数据、对象等等,实际上都可以称之为信息,而信息更多的是以字符串的方式存储的,因此对字符串的操作就显得尤为重要了,我们都知道Perl有强大的字符串处理能力,Java、php、python等也都提供了字符串较为强大的支持,那么对于Javascript,它对字符串的处理能力又如何呢?

Javascript中对于字符串有标准的String对象来支持,String对象提供了一些对字符串的常规操作,例如charAt、substring、indexOf、fromCharCode等等,对于一般的处理来说,这些基本上也够用了,但是我们的web应用往往许多时候都是比较复杂,仅靠这些基本的字符串操作,感觉还是力不从心,不得不在这些基本操作的基础之上,编写大量的上层代码,以适应特地的解析要求。

既然如此,那么有没有更好的方式或方案来处理字符串呢?答案是有的,那就是选择JsJava。

JsJava可以说是最为优秀的Javascript类库解决方案,也是web应用开发界面端应用框架的首选,JsJava对于字符串的处理提供了非常强大的支持,下面就做一下简单的介绍。

1,提供了位于jsjava.lang包下的StringBuffer类,该类的功能就是对字符串进行各种增删改查的操作,提供的具体方法有:

void append(pvalue)
append a string after the current string
Object charAt(index)
return the char at specified index
void deleteBetween(index1,index2)
delete content from index1 to index2
void deleteCharAt(index)
delete a char at specified index
Object getChars()
return the chars array from the current string
Object getLength()
return the length of the current string
Object getValue()
return the current string
Object indexOf(str)
return the index of str in the current string
void insert(index,str)
insert a string in specified index
Object lastIndexOf(str)
return the last index of str in the current string
void reverse()
reverse the current string char sequence
Object substring(index)
return the substring from index
Object substringBetween(index1,index2)
return the substring from index1 to index2
Object toString()
return a string description

2,提供了位于jsjava.text包下的StringCharacterIterator类,该类的功能就是对字符串进行功能丰富的迭代器操作,提供的具体方法有:

Object current()
return the current char
Object first()
return the first char
Object getBeginIndex()
return the begin index from where the iterator start
Object getEndIndex()
return the end index where the iterator stop
Object getIndex()
return the current index
Object hasMore()
judge whether the iterator has more elements
Object last()
return the last char
Object next()
return the next char
Object previous()
return the previous char
void setIndex(index)
set the current index
void setText(text)
set the string

3,提供了位于jsorg.apache.commons.lang包下的StringUtils类,该类的功能就是对字符串进行功能丰富的操作,该类是非常强大的,例如可以将比较长的字符串缩短成指定长度的字符串,后面自动加上省略号,并提供的具体方法有:

<static> Object abbreviate(str,offset,maxWidth)
Abbreviates a String using ellipses.
<static> Object capitalize(str)
Capitalizes a String changing the first letter to title case.
<static> Object charLength(str)
Get the char length of the string.
<static> void isAlpha(str)
Checks if the String contains only unicode letters.
<static> void isAlphanumeric(str)
Checks if the String contains only unicode letters or digits.
<static> Object isAlphanumericSpace(str)
Checks if the String contains only unicode letters, digits or space (’ ‘).
<static> Object isAlphaSpace(str)
Checks if the String contains only unicode letters and space (’ ‘).
<static> Object isAsciiPrintable(str)
Checks if the string contains only ASCII printable characters.
<static> Object isBlank(str)
Checks if a String is whitespace, empty (”") or null.
<static> Object isEmpty(str)
Checks if a String is empty (”") or null.
<static> void isNotBlank(str)
Checks if a String is not empty (”"), not null and not whitespace only.
<static> void isNotEmpty(str)
Checks if a String is not empty (”") and not null.
<static> void isNumeric(str)
Checks if the String contains only unicode digits.
<static> void isNumericSpace(str)
Checks if the String contains only unicode digits or space (’ ‘).
<static> void isWhitespace(str)
Checks if the String contains only whitespace.
<static> Object joinArray(arr,separator)
Joins the elements of the provided array into a single String containing the provided list of elements.
<static> Object joinIterator(iterator,separator)
Joins the elements of the provided iterator into a single String containing the provided list of elements.
<static> Object joinList(list,separator)
Joins the elements of the provided list into a single String containing the provided list of elements.
<static> Object trim(str)
Removes control characters (char <= 32) from both ends of this String, handling null by returning null.

JsJava中对字符串操作的定义,汲取了Java、PHP语言本身以及重要开源项目中的实现,因此对应该开发提供了很好的支持,后续版本中,JsJava将进一步从web开发人员的实际运用出发,将开发过程中经常遇到的字符串解析问题进行整理,并进行标准的实现,也希望web开发的朋友们,提供使用场景和问题,下面是JsJava相关的一些资源:

JsJava官方网站:http://www.jsjava.com
JsJava官方中文网站:http://cn.jsjava.com
JsJava官方中文博客:http://cnblog.jsjava.com
JsJava团队Email:jsjava@gmail.com
JsJava开源工程的管理员Email:freeeob@gmail.com

2 responses so far

九月 20 2007

JsJava2.0在jsp中报js错误,怎么解决?

Published by admin under 最新动态

【来源:JsJava官方中文博客】 

JsJava2.0发布后,许多web开发人员都进行了下载,在html页面中使用非常的出色,但是在jsp中使用时却发现了问题,加载过程中就出现了语法错误,大概错误如下图所示:
JsJava2.0错误信息

经过在UTF-8模式下查看jsjava-2.0.js文件,发现在EventUtils类处有八九行代码前面有一些特殊的字符,这些字符使得jsp引擎解析出现了问题。现在JsJava官方网站已经更新了JsJava2.0的发布包,请您重新下载,给您带来的不便,深感抱歉!

JsJava2.0下载地址:http://download.jsjava.com

10 responses so far

九月 18 2007

Javascript中如何操作剪贴板

Published by admin under 应用样例/案例

【来源:JsJava的官方中文博客网站

  也许你认为只有像Java、C++这样的语言,才能够操作系统的剪贴板,其实Javascript也可以对系统剪贴板进行操作,想想现在网上有那么多的在线编辑器,大都可以支持拷贝网页,就可以想到通过客户端技术也可以实现对剪贴板的操作。

  为了能够更加规范的通过Javascript支持系统剪贴板的操作,JsJava从2.0版本开始,创建了专门的Javascript对象,来实现对剪贴板的操作,主要是一个工具类,即jsorg.eob.document.ClipboardUtils,该类提供了两个静态方法,即将文本拷贝到剪贴板和从剪贴板获取数据。

  JsJava对剪贴板操作的实现,是经过IE和Firefox测试的,因此具有很好的通用性。下面就举一个具体的例子。

    <script>
    function getData(){
        var data=ClipboardUtils.getTextFromClipboard();
        t.value=data;
    }
    function setData(){
        var text=”这是需要拷贝的一段文本,这些文本将会被拷贝到系统的剪贴板之中。”;
        ClipboardUtils.copyTextToClipboard(text);
    }
    </script>
    <textarea id=”t” cols=”65″ rows=”15″></textarea><br>
    <input type=”button” value=”拷贝内容到剪贴板” onclick=”setData()”/>
    <input type=”button” value=”从剪贴板获取内容” onclick=”getData()”/>

  由上面可以看出,使用ClipboardUtils对系统剪贴板进行操作,是非常方便的,我们在网上看到的其它方法,要么不能兼容各种浏览器,要么就是有其它问题,JsJava对此进行了封装,形成了专门的类,为我们操作剪贴板带来了很大的方便。

  JsJava发展到2.0版本,已经完全可以作为一个JS基础框架和应用框架,支持界面端JS产品的开发,也适合于web项目和产品的日常开发与应用,JsJava的关注点,是数据结构的完整和类库体系的完整,这与目前流程的portotype.js等是不太一样,因此JsJava是更适合为应用服务的,欢迎大家下载使用。

  JsJava官方网站:http://www.jsjava.com
  JsJava官方中文网站:http://cn.jsjava.com
  JsJava官方中文博客:http://cnblog.jsjava.com
  JsJava团队Email:jsjava@gmail.com
  JsJava开源工程的管理员Email:freeeob@gmail.com

9 responses so far

九月 18 2007

JsJava2.0使用时需要注意的地方

Published by admin under 内容介绍

【来源:JsJava官方中文博客

  JsJava2.0相对于1.0而言,要成熟了许多,类结构体系也完善了许多,功能和应用也强大了许多,但是由于JsJava2.0大量引入了类的继承和实现机制,因此对JsJava1.0的一些类从结构上做了修改或者变动,这样使得有些基于1.0做的程序,放到2.0中运行可能会有一些问题,下面我们就列举一些变动的地方。

  变动最大的一个地方就是聚集,也就是java.util下的大部分类,聚集做为一个重要数据结构集,在任何一种编程语言中都是非常受重视的,然而Javascript只是一个数组机制,尽管可以充当列表、哈西表、堆栈等等,但是要满足聚集的大部分要求,还是很麻烦的,因此从JsJava1.0开始就着手按照J2SE1.4实现聚集的常用类,例如List、Stack、Hashtable等等,不过1.0版本没有严格按照J2SE1.4中聚集类的继承体系去做,例如List类,在Java中本来是一个接口,但是在JsJava1.0版本中,则直接在List类中进行了实现,这些问题在JsJava2.0中被整体修复了过来。

  在JsJava2.0中,完全按照Java的聚集继承体系,对这部分类做了重新的梳理,Collection类为基础接口类,List、Set为子接口,List接口有AbstractList的抽象类实现,Set接口有AbstractSet的抽象实现,AbstractList下有ArrayList和Vector两个实体类,AbstractSet下也有HashSet一个实体类,另外还有Map接口及其实现类等等,请看下面的类图:

  下面再看一下Map的类图结构:

  由上面可以看出,JsJava2.0的聚集几乎是按照Java聚集规范实现的,因此也是面向对象实现的,使用起来非常方便,当然要注意与JsJava1.0版本的不同,例如List、Set在1.0和2.0中角色的不同,1.0中是实体类,而在2.0中则成为了接口了。当然相应程序代码也需要做相应的修改,例如:

  var list=new ArrayList();//如果使用new List(),虽然不会报错,但是当调用接口方法时会抛出JS异常
  list.add(new Date());
  list.add(new Array(3));

  var vector=new Vector();
  vector.addElement(”abc”);

  var map=new HashMap();
  map.put(”key1″,”value1″);

  JsJava2.0另外一个变动较大的,就是java.text下面的类,例如日期和数字的格式化等,2.0版本也按照J2SE1.4的标准重新定义该包下类的继承机制,我们看一下类图:

由上图可见,我们实际中应该使用DecimalFormat去格式化数字,使用SimpleDateFormat去格式化日期,例如:

   //格式化数字
    var nf=new DecimalFormat();
    nf.applyPattern(”000.000%”);
    var res=nf.format(-0.893566);
    document.write(res+”<br>”);
    nf.applyPattern(”0000.00″);
    var res=nf.format(-53.385967);
    document.write(res+”<br>”);
    nf.applyPattern(”0000.000E00″);
    var res=nf.format(53.385967);
    document.write(res+”<br>”);

   //格式化日期
    var df=new SimpleDateFormat();
    df.applyPattern(”yyyy-MM-dd hh:mm:ss”);
    var date=new Date(2007,3,30,10,59,51);
    var str=df.format(date);
    document.write(str);

   从JsJava2.0开始不要再通过new DateFormat和new NumberFormat去格式化日期和数字了,要使用其实现类。

   由于JsJava2.0的继承和实现使用较多,这对于JsJava的类扩充和面向对象都是非常有好处的,当然了为了方便使用,你可以直接将jsjava-2.0.js引入到页面中,而不要自己一个类一个类的引入。

   JsJava2.0是非常优秀和实用的,它的意义已经远远超过了现在人们津津乐道的prototype.js,JsJava2.0为Javascript以更规范化的方式深入客户端产品研发和项目开发以及业务,提供了一个重要的平台和基础,更为重要的是它将Javascript的功能以严格的类库方式扩充,使得Javascript的应用更为广泛,应用模式也日趋明朗,相信JsJava的后续版本将会为我们提供更多的精彩!

One response so far

九月 18 2007

JsJava发布2.0版本

Published by admin under 最新动态

 【来源:JsJava的官方中文博客网站

  2007年9月11日,JsJava团队发布了JsJava2.0版本,该版本不仅增加了许多新的类库,而且参照J2SE1.4,大量使用了类的继承和实现机制,更加符合面向对象的原则,也更加方便用户使用和扩充,而且对原来版本中存在一些bug进行了修改,下面主要介绍一下2.0版的主要功能。

  1,实现了完整的聚集(collections)框架,主要包括列表(List)、哈西表(Hashtable)、集合(Set)、位集合(BitSet)、属性表(Properties)、迭代器(Iterator)、堆栈(Stack)、枚举器(Enumeration)、比较器(Comparator)等等,这大大方便了与聚集相关的操作,例如:

    var list=new ArrayList();
    list.add(”a”);
    list.add(”b”);
    list.add(new Date());
    Iterator it=list.iterator();
    while(it.hasNext()){
      var elem=it.next();
   }

   var hash=new Hashtable();
   hash.put(”key1″,”value1″);
   hash.put(new Date(),”value2″);

   var set=new TreeSet();
   set.add(”a”);

2,实现了xml的处理,主要是对主流浏览器的内置xml解析做了封装,2.0版本中对非IE的Xpath做了很好的封装,因此可以直接使用JsJava2.0的xpath来处理xml文本,下面举一个使用JsJava xml处理的例子:

 <script src=”jsjava-2.0.js” mce_src=”jsjava-2.0.js”></script>
 <script>
    var xp=new XmlBrowserParser();
    var xml=”<users><user>user1</user><user>user2</user><user>user3</user></users>”;
    xp.loadXml(xml);
    var xmlDoc=xp.toDocument();
    var usersElem=xmlDoc.getElementsByTagName(”user”);
    document.write(”The number of user tag:”+usersElem.length);
    //You can alse use xpath
   var usersElem= xmlDoc.documentElement.selectNodes(”user”);
   document.write(”The number of user tag:”+usersElem.length);

</script>

3,实现了对部分高等数学算的支持,包括矩阵、概率分布、统计、复数等等,具体可以参考http://jsjava.sourceforge.net/solutions/mathsolution.html ,下面举一个简单例子:

<script src=”jsjava-2.0.js” mce_src=”jsjava-2.0.js”></script>
<script>
    var c=new Complex(3,5);
    document.write(c.abs()+”<br>”);
    document.write(c.add(new Complex(5,7))+”<br>”);
    document.write(c.conjugate()+”<br>”);
    document.write(c.isInfinite()+”<br>”);
    document.write(c.isNaN()+”<br>”);
    document.write(c.multiply(new Complex(6,6)).getReal()+”<br>”);
    document.write(c.negate()+”<br>”);
    document.write(c.subtract(new Complex(2,4)));
</script>

4 ,实现了对日期和数字的格式化处理,这个在实际编程中是非常方便的,例如:

    var df=new SimpleDateFormat();
    df.applayPattern(”MM-dd-yyyy hh:mm:ss”);
    var str=df.format(new Date());
    alert(str);//结果形式形如:11-25-2006 13:23:35

    var df=new DecimalFormat();
    df.applayPattern(”00.000%”);
    var str=df.format(0.0678567);
    alert(str);// the result is 6.786%

5,实现了数据验证,并默认支持了多种验证器,包括URL、Email、范围、IP等验证器。例如:

    var urlValidator=new URLValidator();
    var flag=urlValidator.validate(”http://www.jsjava.com”);
    alert(flag);//the result is true
    而且提供了一个通用的验证工具类ValidatorUtils,里面提供许多实用类方法,另外针对中国地区用户我们实现了许多常用的一些验证器,例如汉字验证、居民身份证验证、Oicq号码验证等等。

6,实现了页面动画的支持,动画的播放原理,借鉴了Flash的思想,即一个动画是有一系列场景组成,每个场景是由一系列关键帧组成,而每一个帧则代表了一个实际控制点,那么当时间线流过的时候,多个场景的帧依次播放,就形成了任意线程合成动画效果,具体可以参考http://jsjava.sourceforge.net/solutions/webpageanimation.html

7,实现了对Ajax的支持,JsJava2.0中对Ajax做了一层面向对象的封装,留出了许多接口,可以让编程人员更多的控制Ajax的细节,举例如下:

    var req=new AjaxRequest();
    req.setRequestMethod(”post”);
    req.setRequestURL(”ajaxresponse.jsp”);
    req.setAsync(true);
    req.setMethodOnSuccess(parseXml);
    req.setRequestHeader(”Content-Type”,”text/html;charset=gb2312″);
    req.send();

    function parseXml(){
      alert(req.getResponseText());
   }

8,实现了对地理信息的封装,JsJava2.0主要实现了对中国省级、市级行政区的信息封装,可以方便获取相关信息,例如:

<script src=”js/jsorg/eob/information/country/cn/ChinaCountry.js” mce_src=”js/jsorg/eob/information/country/cn/ChinaCountry.js”></script>
<script src=”js/jsorg/eob/information/country/cn/ChinaProvince.js” mce_src=”js/jsorg/eob/information/country/cn/ChinaProvince.js”></script>
<script src=”js/jsorg/eob/information/country/cn/ChinaCity.js” mce_src=”js/jsorg/eob/information/country/cn/ChinaCity.js”></script>
<script src=”js/jsorg/eob/information/country/cn/ChinaCounty.js” mce_src=”js/jsorg/eob/information/country/cn/ChinaCounty.js”></script>
<script src=”js/jsorg/eob/information/country/cn/ChinaTown.js” mce_src=”js/jsorg/eob/information/country/cn/ChinaTown.js”></script>
<script src=”js/jsorg/eob/information/country/cn/ChinaVillage.js” mce_src=”js/jsorg/eob/information/country/cn/ChinaVillage.js”></script>
<script src=”js/jsorg/eob/information/country/cn/ChinaInformationLoader.js” mce_src=”js/jsorg/eob/information/country/cn/ChinaInformationLoader.js”></script>
<script src=”js/jsjava/util/List.js” mce_src=”js/jsjava/util/List.js”></script>
<script src=”js/jsjava/util/Iterator.js” mce_src=”js/jsjava/util/Iterator.js”></script>
<script>
    function w(str){
        document.write(str+”<br>”);
    }
    var country=ChinaInformationLoader.load();
    w(country);
    w(”—————”);
    var province=country.getProvinceById(”Guangxi”);
    w(province);
    w(”—————”);
    var cities=province.getCities();
    for(var i=0;i<cities.getSize();i++){
        var city=cities.get(i);
        w(city);
    }
</script>

显示如下:

9,实现了对日历和农历的支持,日历对象Calendar是参照java.util.Calendar实现的,农历仅实现对中国农历的支持,举例如下:

var c = new GregorianCalendar();
c.setTime(new Date(2007,2,8));
document.write(”Calendar.WEEK_OF_YEAR:”+c.get(Calendar.WEEK_OF_YEAR);

  通过JsJava的日历对象,你可以方便的获得与日期相关的许多方面,例如可以知道某个日期是所在月的第几周,知道是这一年中的第几天等等,如果你对Java的Calendar很熟悉,你就明白它的强大了。

  输出为:Calendar.WEEK_OF_YEAR:10

  另外,为了方便中国区用户对农历的计算,我们特别定义了一个ChinaLunarCalendar对象,该对象可以方便将公历转换为农历,例如下面的例子:

<script src=”jsjava-2.0.js” mce_src=”jsjava-2.0.js”></script>
<script>
    var c=new ChinaLunarCalendar();
    c.setTime(new Date(2005,5,6));
    out(c.getTianGan()+”:”+c.getDescOfTianGan());
    out(c.getDiZhi()+”:”+c.getDescOfDiZhi());
    out(c.getShengXiao()+”:”+c.getDescOfShengXiao());
    out(c.getYear()+”:”+c.getDescOfYear());
    out(c.getMonth()+”:”+c.getDescOfMonth());
    out(c.getDate()+”:”+c.getDescOfDate());
    out(c.getDay()+”:”+c.getDescOfDay());
    out(c.getHours()+”:”+c.getDescOfHours());
    function out(str){
        document.write(str+”<br>”);
    }
</script>

输出结果为:

1:乙
9:酉
9:鸡
2005:乙酉年
4:四月
30:卅
1:星期一
1:子时

10,实现了对I/O的支持,I/O是重量级编程语言中都支持的输入/输出的各种操作,例如读取系统中的文件,或者将内容输入到本地文件系统中,当然I/O的概念的外延很广,例如可以从某个URL来获取URL所代表的资源的内容,那么这就代表了一个输入。

  那么I/O体现到Web界面之中,又该如何解释呢?我们知道在HTML之中,有文本输入空间text input和textarea,这个可以理解为输入设备,而<div/></p>等则可以看做是输出设备,当然了对于text input和textarea而言,它们也可以被看做是输出设备,我们看一个JsJava中的一个实现:

<script src=”jsjava-2.0.js” mce_src=”jsjava-2.0.js”></script>
<script>
    window.onload=function(){
        var outputDevice=new HTMLTextDevice(”info”);
        var append=true;
        var outputStream=new HTMLTextOutputStream(new OutputStream(outputDevice),append);
        outputStream.println(”This is a text output stream!”);
        outputStream.println(”Is append:”+append);
    }
</script>
<textarea id=”info” rows=”6″ cols=”30″></textarea>

  另外我们为JS添加了一个类似系统命令行窗口的JS控制台,使用方式如下:

<script src=”jsjava-2.0.js” mce_src=”jsjava-2.0.js”></script>
<script>
    Console.open();
    System.out.println(”This is very good!”);
    System.out.println(”Now ok!”);
    function getNowTime(){
        System.out.println(”start method”);
        for(var i=0;i<100;i++){
            var str=”";
            str+=new String(i);
        }
        System.out.println(”end method”);
        System.out.println(”over”);
        System.err.println(”Error!”);
    }
    getNowTime();
    //System.exit(0);
</script>

  显示结果为:

 

11,实现了对blog中rss内容的解析,并将解析后的结果生成为一系列的JsJava对象,操作起来很方便,如下例子所示:

  <script src=”jslib/jsjava-2.0.js” mce_src=”jslib/jsjava-2.0.js”></script>
<script>
    var xmlStr=’<rss version=”2.0″ xmlns:dc=”http://purl.org/dc/elements/1.1/” xmlns:trackback=”http://madskills.com/public/xml/rss/module/trackback/” xmlns:wfw=”http://wellformedweb.org/CommentAPI/” xmlns:slash=”http://purl.org/rss/1.0/modules/slash/”><channel><title>eye_of_back的专栏 - IT技术经验交流中心</title><link>http://blog.csdn.net/eye_of_back/category/245118.aspx</link><description /><dc:language>af</dc:language><generator>.Text Version 1.0.1.1</generator><image>http://counter.csdn.net/pv.aspx?id=72</image><item><dc:creator>回眸</dc:creator><title>IT技术经验交流中心简介…(rss xml内容较多省略)</channel></rss>’;
    var reader=new BlogRssReader();
    var blogRss=reader.readRss(xmlStr);
    var channel=blogRss.getRssChannel();
    document.write(channel.getImage()+”<br>”);
    var items=channel.getItems();//获取该频道所有的文章
    for(var i=0;i<items.getSize();i++){
        document.write(items.get(i)+”<br>”);//输出每个blog文章的相关内容(标题、作者、发布时间、内容、回复等等)
    }
</script>

 显示结果为:

  {title=undefined,link=undefined,url=http://counter.csdn.net/pv.aspx?id=72}
{id=http://blog.csdn.net/eye_of_back/archive/2007/02/28/1517453.aspx,creator=回眸,title=IT技术经验交流中心简介,link=http://blog.csdn.net/eye_of_back/archive/2007/02/28/1517453.aspx,pubDate=Wed, 28 Feb 2007 20:00:00 GMT,comments={id=http://blog.csdn.net/eye_of_back/comments/1517453.aspx,itemId=undefined,commentRss=undefined}}
{id=http://blog.csdn.net/eye_of_back/archive/2007/02/25/1514302.aspx,creator=回眸,title=面对未来我们更需要思考,link=http://blog.csdn.net/eye_of_back/archive/2007/02/25/1514302.aspx,pubDate=Sun, 25 Feb 2007 21:39:00 GMT,comments={id=http://blog.csdn.net/eye_of_back/comments/1514302.aspx,itemId=undefined,commentRss=undefined}}
{id=http://blog.csdn.net/eye_of_back/archive/2007/02/09/1506668.aspx,creator=回眸,title=介绍目前中心关注的群,link=http://blog.csdn.net/eye_of_back/archive/2007/02/09/1506668.aspx,pubDate=Fri, 09 Feb 2007 22:24:00 GMT,comments={id=http://blog.csdn.net/eye_of_back/comments/1506668.aspx,itemId=undefined,commentRss=undefined}}
{id=http://blog.csdn.net/eye_of_back/archive/2007/02/09/1506666.aspx,creator=回眸,title=中心知识库建成!,link=http://blog.csdn.net/eye_of_back/archive/2007/02/09/1506666.aspx,pubDate=Fri, 09 Feb 2007 22:21:00 GMT,comments={id=http://blog.csdn.net/eye_of_back/comments/1506666.aspx,itemId=undefined,commentRss=undefined}}
{id=http://blog.csdn.net/eye_of_back/archive/2006/10/10/1328096.aspx,creator=回眸,title=面向大学生IT技术培训,link=http://blog.csdn.net/eye_of_back/archive/2006/10/10/1328096.aspx,pubDate=Tue, 10 Oct 2006 07:44:00 GMT,comments={id=http://blog.csdn.net/eye_of_back/comments/1328096.aspx,itemId=undefined,commentRss=undefined}}
{id=http://blog.csdn.net/eye_of_back/archive/2006/10/09/1327718.aspx,creator=回眸,title=欢迎大家访问IT技术经验交流中心,link=http://blog.csdn.net/eye_of_back/archive/2006/10/09/1327718.aspx,pubDate=Mon, 09 Oct 2006 21:11:00 GMT,comments={id=http://blog.csdn.net/eye_of_back/comments/1327718.aspx,itemId=undefined,commentRss=undefined}}

12,实现了对页面打印的支持,当然了调用的window.print就可以实现页面整体打印,但是在实际应用中,我们用的更多的则是对页面中某个部分进行打印,例如只想打印文章正文内容,对于上面的边框和下面的一些按钮就不需要,那如何实现局部的打印呢?

  当然通常的做法有两种,一种是打印前将不需要的页面部分隐藏,打印完成后在放开,这个只要定义document的onbeforeprint和onafterprint事件即可,另外一种方式,就是将需要打印的内容拷贝到事先准备好的一个隐藏的iframe之中,然后调用iframe的打印即可。

  那么JsJava之中如果方便的对打印提供支持呢?如下面的代码:

    var print=new HtmlPrint();
    var printArea=new HtmlPrintArea(”info”);//打印区域的页面id,例如可能是某个div的标识
    print.setArea(printArea);
    print.print();

  具体使用和方案,可以访问http://www.jsjava.com网站,参看其中的solutions。

13,实现了对光标的操作,尤其是web程序员们都非常苦恼的光标定位等问题,JsJava2.0都做了很好的实现,通过JsJava的API,你可以方便的获得光标在文本输入域中的具体位置,可以方便的将光标移动到文本框的指定位置,也可以任意选择指定范围的文本,例如下面的例子:

  <script>
    function getCursorPosition(textObj){
        alert(CursorUtils.getCursorPosition(textObj));
    }
    function setCursorPos(){
        CursorUtils.moveCursorTo(document.getElementById(”t”),8);
    }
    function setSelectText(){
        CursorUtils.textSelect(document.getElementById(”t”),8,12);
    }
    </script>
    <textarea id=”t” cols=”35″ rows=”10″ onclick=”getCursorPosition(this)>
        This is a text,aha!
    </textarea>
 <br>
 <input type=”button” value=”设置光标位置” onclick=”setCursorPos()”>
 <input type=”button” value=”设置选择文本” onclick=”setSelectText()”>

14,实现了对系统剪贴板的操作,可以方便的将内容放到到剪贴板以及从剪贴板中获取内容,例如下面的例子:

  <script>
    function getData(){
        var data=ClipboardUtils.getTextFromClipboard();
        t.value=data;
    }
    function setData(){
        ClipboardUtils.copyTextToClipboard(”This is a copy test!”);
    }
    </script>
    <textarea id=”t” cols=”65″ rows=”15″></textarea><br>
    <input type=”button” value=”将数据放到剪贴板” onclick=”setData()”/>
    <input type=”button” value=”从剪贴板获取数据” onclick=”getData()”/>

15,实现了对颜色的相关操作,例如实现了RGB颜色以及灰度的控制,可以方便的在RGB和十六进制颜色之间进行转换,也提供了相关方法,可以方便的得到一个随机的颜色矩阵,这为颜色面板的制作提供了很好的数据,例如:

  <script>
    var hexColors=ColorUtils.toPaletteDatum(9,9);
    var str=”<table>”;
    for(var i=0;i<hexColors.length;i++){
        str+=”<tr>”;
        for(var j=0;j<hexColors[i].length;j++){
            str+=”<td title=’”+hexColors[i][j]+”‘ bgcolor=’”+hexColors[i][j]+”‘>  </td>”;
        }
        str+=”</tr>”;
    }
    str+=”</table>”;
    document.write(str);
    </script>

  显示结果为:

 

16,除上面之外,JsJava2.0还实现了许多其他的功能,具体可以参考http://jsjava.sourceforge.net/howtouse/

  JsJava发展到2.0版本,已经完全可以作为一个JS基础框架和应用框架,支持界面端JS产品的开发,也适合于web项目和产品的日常开发与应用,JsJava的关注点,是数据结构的完整和类库体系的完整,这与目前流程的portotype.js等是不太一样,因此JsJava是更适合为应用服务的,关于JsJava的一些资源列举如下:

  JsJava官方网站:http://www.jsjava.com
  JsJava官方中文网站:http://cn.jsjava.com
  JsJava官方中文博客:http://cnblog.jsjava.com
  JsJava团队Email:jsjava@gmail.com
  JsJava开源工程的管理员Email:freeeob@gmail.com

12 responses so far

九月 18 2007

如何使用JsJava类库

Published by admin under 内容介绍

JsJava官方中文博客

    如果你刚刚接触倒JsJava,那么你应该好好读一读《什么是JsJava》这篇文章了,如果你已经知道JsJava是什么,而且你想在自己的项目中或者公司的项目中应用,那么你将会去JsJava官方网站下载JsJava的源码包,不过目前的JsJava源码包,包含了JsJava的所有工程文件,目前是在Eclipse中进行开发的。

    那么面对下载下来的JsJava工程,我们该如何使用呢?也就是说,如果我们想在项目中使用JsJava的类库,该怎么引用呢?

    下面,就以JsJava1.0的源码工程结构为基础,讲一下下载的工程的目录结构,然后说一下如何引用。

    源码包解开后,可以看到四个主目录:

    1)/doc目录,该目录下包含了JsJava的API文档和使用手册。
    2)/examples目录,该目录下包含了JsJava的所有例子,目前例子还比较少,大部分使用例子都放在了/doc下面的使用手册中了。
    3)/jslib目录,该目录下包含了JsJava的所有Javascript类库,其中jsjava-1.0.js包含了所有的类,其它的js文件则包含了各自功能的类,关于这些js文件的具体用途,以及相互的引用关系,请看《JsJava1.0中Javascript类库介绍 》。
    4) /src目录,该目录下包含了JsJava的所有类定义,类的路径及其命名都是按照Java的风格进行的。

    那么如果想在项目中使用JsJava,该如何引用呢?

    1)最简便也是万无一失的方式,就是直接引用/jslib目录下的jsjava-1.0.js文件,该文件包含了所有的类。

    2)如果只是使用某个方面的功能,例如Ajax处理、XML处理等等,则只需引用/jslib目录下的专用类库,例如专门用于Ajax处理的jsjava-ajax-1.0.js,不过使用这些专用类库时,要注意类库之间的依赖关系,具体可以看上面提到过了的《JsJava1.0中Javascript类库介绍》。

   3) 当然了,我们也可以直接引用/src下面的具体的类,不过不建议这种方式,因为一般来说类与类之间可能会存在依赖关系,如果自己来解决这些依赖,有些时候费的精力比较大。

    上面的三种引用方式,建议使用前两种,当然了如果你对JsJava很熟悉的话,也可以使用第三种方式。

    最后介绍一下JsJava的相关资源:

     JsJava官方主站
     JsJava官方中文圈子
     JsJava团队
     JsJava创始人
     JsJava1.0用户手册

No responses yet

九月 18 2007

如何使用Javascript格式化数字显示

Published by admin under 应用样例/案例

【来源:JsJava官方中文博客

  对数字进行格式化输出,是非常有意义的一件事情,例如许多时候,我们希望一个数字能够输出为指定格式的字符串,拿25.9878来说,我们可能会希望它能保留两位小数来说出,即结果为25.99,或者对于0.345678,希望能够按百分号输出,并保留小数点后两位,即结果为34.57%,又例如我们希望将数字56456456按照科学计数法来显示,并保留小数点后两位,即结果为5.65e+7,类似例子当然还有很多。

  那么在Javascript标准之中,是否提供了对这些格式化输出的支持呢,可以说Javascript也提供了部分支持,但是提供的并部完善,具体你可以看一下Number对象的使用,里面提供了对数字的一些格式化输出,几个函数如下:

  toExponential([fractionDigits])  :将数字按科学计数法格式返回,其中的fractionDigits值小数点后保留的位数。
  toFixed([fractionDigits])  :将数字按指定的小数点位数返回,其中的fractionDigits值小数点后保留的位数。
  toPrecision([precision])  :将数字按指定的精度返回(这个精度不是指小数点后几位),其中precision是指定的精度值。

  如果你不会使用上面的函数,我简单给你举个例子:

  var num=56.45678;
  var rs1=num.toExponential(2);//rs1的值为5.65e+1
  var rs2=num.toFixed(2);//rs的值为56.45
  var rs3=num.toPrecision(2);//rs的值为56

  虽然说Number对象提供的这些方法能够解决不少的数字转化问题,但是对于许多情况还是不好满足的,例如对百分号的支持等等。

  为了解决这个问题,并提供更为强大和灵活的数字格式化要求,JsJava专门提供了的Javascript自定义类来进行支持,你可以下载jsjava-1.0.js,引用其中的src/jsjava/text/NumberFormat.js或者直接引用jslib/jsjava-1.0.js,举例如下:
//2.0版本中使用jsjava-2.0.js
    var nf=new NumberFormat();//2.0版本中使用DecimalFormat
    nf.applyPattern(”000.000%”);
    var res=nf.format(-0.893566);
    document.write(res+”<br>”);
    nf.applyPattern(”0000.00″);
    var res=nf.format(-53.385967);
    document.write(res+”<br>”);
    nf.applyPattern(”0000.000E00″);
    var res=nf.format(53.385967);
    document.write(res+”<br>”);

  显示结果为:

  -89.357%
  -53.39
  5338.597e-2

  JsJava是非常强大的,它是目前世界上最为全面的Javascript类库体系,使用JsJava,将更使你的界面脚本逻辑开发变得更加简单。

No responses yet

Next »