目前最流行的语言是哪一种？或许是Javascript。做为一种前端语言，Javascript这几年得到了很长足的发展，AJAX或许是它发展的一个里程碑。Firefox与Chrome等现代浏览器的流行，更使得Javascript的开发效率大大提升。另一方面，Web应用的蓬勃发展，也使得Javascript编程的市场极大。

   前端技术的发展，把美工设计与逻辑实现相分离，之前把Javascript嵌入到HTML代码中的日子一去不复返了，一整个项目，都是由Javascript构成，这在之前的时代是多么不可想像的事情。不过，在众多Javascript类库的支持下，这一梦想其实早就成为现实了。程序员们也终于可以利用Javascript当一个纯粹的程序员，不掺一点美工的。

   我们或许可以从Javascript如何为数据库监控服务做为切入点聊聊这个语言。

   10g以后，EM中的等待事件图应该是最受欢迎的也被使用最多的一个功能，下面是一个例子：

   如何自己利用Javascript显示上面的图形呢？

   当然，我们需要有一个Javascript的图形库，把划图的工作交给它，做为DBA的我们要知道的是如何获取数据源，如何转换数据以交给图形库显示。

   图形库，我推荐用ExtJS中的相应组件。ExtJS是一个非常值得使用的Javascript类库，拥有极其丰富的例子和文档，基本上UI设计中的所有元素都可以从这些例子中找到踪迹，进而利用这些例子，实现自己业务逻辑的展现。例如，和上图EM中的等待事件图类似的例子：

   相应的源代码看起来非常简洁呢：

window.generateData = function(n, floor){
        var data = [],
            p = (Math.random() *  11) + 1,
            i;
            
        floor = (!floor && floor !== 0)? 20 : floor;
        
        for (i = 0; i < (n || 12); i++) {
            data.push({
                name: Ext.Date.monthNames[i % 12],
                data1: Math.floor(Math.max((Math.random() * 100), floor)),
                data2: Math.floor(Math.max((Math.random() * 100), floor)),
                data3: Math.floor(Math.max((Math.random() * 100), floor)),
                data4: Math.floor(Math.max((Math.random() * 100), floor)),
                data5: Math.floor(Math.max((Math.random() * 100), floor)),
                data6: Math.floor(Math.max((Math.random() * 100), floor)),
                data7: Math.floor(Math.max((Math.random() * 100), floor)),
                data8: Math.floor(Math.max((Math.random() * 100), floor)),
                data9: Math.floor(Math.max((Math.random() * 100), floor))
            });
        }
        return data;
    };
 
 window.store1 = Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9'],
        data: generateData()
    });
 
var chart = Ext.create('Ext.chart.Chart', {
            style: 'background:#fff',
            animate: true,
            store: store1,
            legend: {
                position: 'bottom'
            },
            axes: [{
                type: 'Numeric',
                position: 'left',
                fields: ['data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7'],
                title: 'Number of Hits',
                grid: {
                    odd: {
                        opacity: 1,
                        fill: '#ddd',
                        stroke: '#bbb',
                        'stroke-width': 1
                    }
                },
                minimum: 0,
                adjustMinimumByMajorUnit: 0
            }, {
                type: 'Category',
                position: 'bottom',
                fields: ['name'],
                title: 'Month of the Year',
                grid: true,
                label: {
                    rotate: {
                        degrees: 315
                    }
                }
            }],
            series: [{
                type: 'area',
                highlight: false,
                axis: 'left',
                xField: 'name',
                yField: ['data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7'],
                style: {
                    opacity: 0.93
                }
            }]
        });

   store1存储的就是用来显示的数据，data是一个数组，里面有12行记录，每行对应一个月份，name即为月份的名字，其它的data1到data9代表该月份不同种类(如等待事件)的值。

   那么回到等待事件图，如何动态给图形提供数据呢？显然，每隔一个时间间隔，如5秒，我们会从数据库获取一行新的记录，把它存放进store1中，同时，删除store1中的最旧的一行记录，以此就可以实现图形的动态前移了。

   Javascript做为一门动态语言，对数据操纵的灵活性在这里得到了极大的展示，如上面逻辑对应的基本代码为：

//构造等待事件类别的名字数组
var allfields = [ 'time',
                  'total',
                  'ON CPU',
                  'User I/O' ,
                  'System I/O',
                  'Concurrency',
                  'Commit',
                  'Cluster',
                  'Scheduler',
                  'Other',                        
           ];
 
 
//初始化一行记录。
var item = {};
 
 
//给这一行记录赋值。item['time'] = xxx;
for ( var i = 1; i < allfields.length; i++) {
item[allfields[i]] = xxx;
 }
 
//删除最旧的一行记录，加入最新的一行记录
 
 store1.data.removeAt(0);
 store1.loadData([item], true);
 
//图形库看到底层的数据发生了改变，就会动态地更新UI。

   在这里，对比一下Java和Javascript这两种语言或许是很有趣的事情。想想如何使用Java去实现上面的逻辑？首先，Java中类的属性是不能动态定义的，于是你需要定义一个记录类，里面是诸如time,total,on_cpu这些属性。其次，Java中属性的名字是不能包含空格的，于是你需要为”ON CPU”定义一个类似on_cpu的变量名。还有，你不能方便地遍历一个类里面的所有属性，于是只能把上面的那个循环写成9行类似下面的语句：

   item.time=xxx;

   item.total=xxx;

   看起来Java的代码比Javascripts臃肿多了。

   写到这，再顺便一提，Javascript中类的属性可以动态定义，体现在item['time']这种写法其实等价于Java程序员非常熟悉的写法item.time。习惯了Java的语法，看到这种形式一定会感觉特别新鲜。这也许是Java和Javascript的一个最显著的区别。

   继续说说如何从Oracle数据库中得到这些等待事件类别对应的数值(active session number)。相应的查询语句如下：

select
        decode(ash.wait_class,'','ON CPU',ash.wait_class)，
        decode(ash.session_state,'ON CPU','ON CPU',ash.event) ，
        round(count(1)/l_elapsed,2)  avg，
        round(max(time_waited/1000))  max_waited
    from
       gv$active_session_history ash
    where
       sample_time  >= p_pre_time - numtodsinterval(1,'SECOND') and
       sample_time  < p_cur_time - numtodsinterval(1,'SECOND')
    group by decode(ash.session_state,'ON CPU','ON CPU',ash.event),decode(ash.wait_class,'','ON CPU',ash.wait_class)

   当然，这里统计的粒度其实是等待事件，而不是等待事件类别，Javascript代码中还需要对其做进一步做汇总，才能给上面的图形提供数据，不过，这带来一个好处，有了这些等待事件的信息，我们可以在合适的时候加以展示，例如，当鼠标移到某一时刻时，显示这一时刻看对应的所有等待事件的比例图。当鼠标再次移动某个等待事件上时，只显示出这个等待事件的趋势图。

   下面就是最终的一个效果图：

   Javascript或许是被低估的一门语言。在WEB流行的时代，学学javascript是一个很酷的事情。

建议继续学习：

1. 规范自己的JavaScript书写    (阅读：5966)
2. JavaScript，只有你想不到    (阅读：5111)
3. 我希望我知道的七个JavaScript技巧    (阅读：4549)
4. JavaScript是Web的汇编语言（一）：语义Web已死！    (阅读：4370)
5. 能说明你的Javascript技术很烂的五个原因    (阅读：3971)
6. javascript语句的执行过程分析    (阅读：3146)
7. JavaScript是Web的汇编语言（二）：疯狂，亦或只是精神错乱？    (阅读：2920)
8. JS不是前端的全部    (阅读：2751)
9. Javascript诞生记    (阅读：2690)
10. JavaScript解析：让搜索引擎看到更真实的网页    (阅读：2595)