BETTER WeB

javascript speed test

This is a list of javascript speed test

Labels: benchmark, javascript, performance, speed

Deferred javascript in firefox

With closing of this bug, the javascript with "defer='defer'" setting finally functions as what it should.

Labels: javascript

Best javascript chart generator

Here is a list of best chart generating javascript tools.

Labels: canvas, chart, html, javascript, svg

what's new in firefox 3 for webdevelopers

CSS, CSS, CSS, DOM, Javascript, SVG.

Labels: css, DOM, firefox 3, javascript, svg

An regular expression for float point numbers


[-+]?[0-9]+[.]?[0-9]*([eE][-+]?[0-9]+)?

This should do the job.

Labels: javascript, regexp, regular expression

Safari is getting a new Javascript engine

Squirrelfish. It is fast, yeah, fast.

Labels: javascript, safari

Regular expression for URL validation


/^(?:https?|s?ftp|telnet|ssh|scp):\/\/(?:(?:[\w]+:)?\w+@)?(?:(?:(?:[\w-]+\.)*\w[\w-]{0,66}\.(?:[a-z]{2,6})(?:\.[a-z]{2})?)|(?:(?:25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.)(?:(?:25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(?:25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})))(?:\:\d{1,5})?(?:\/(~[\w-_.])?)?(?:(?:\/[\w-_.]*)*)?\??(?:(?:[\w-_.]+\=[\w-_.]+&?)*)?$/i;

This will do the job.

Labels: javascript, regular expression, URL, validation

acid 3 test

Acid 3 test is online. Let's see who will pass it firstly.

Labels: acid 3, css, DOM, javascript

Sortable table, dynamic table cell background color in action

Here. A big table of solvents properties and miscibility. Click or double click the table head to sort. The table background changes as your mouse wandering around to high light current table cell. ~~Supposed to w~~Works in IE7 too, ~~but never~~ tested. Works in Safari 3, Firefox 2, IE7, Opera 7.5. Opera has some high light problem. And the sorting works like a magic in Safari and Opera.

For mouseover event outside a tag in IE7,

is required.

Labels: background, css, javascript, sortable table, tr:hover

for...in loop and nodeList in Safari

Several years ago, I figured out that for...in loop doesn't work with a nodeList we got from dom functions like getElementsByTagName.

Or that means

var divs = document.getElementsByTagName("div"); var i; for( i in divs ){ divs.items(i).innerHTML = "B"; }

doesn't work in Safari. Some people may know that there is another way to access a nodeList in Firefox and IE, like

var divs = document.getElementsByTagName("div"); var i; for( i in divs ){ divs[i].innerHTML = "B"; }

However, this doesn't work in Safari too. (Actually it is wrong even in Firefox and IE.) The right way is

var divs = document.getElementsByTagName("div"); var i; for( i= 0; i < divs.length; i ++ ){ divs.items(i).innerHTML = "B"; }

The reason is that in Firefox or IE, nodeList is treated as an array, but Safari doesn't.

Labels: for...in, javascript, loop, safari

Dynamically create SVG with javascript

Following is an example of dynamically created SVG pattern with javascript and DOM. The name space part is tricky and can be frustrating for people not familiar with it. The hard parts are high lighted in red.

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



<?xml version="1.0" ?>

<html xmlns="http://www.w3.org/1999/xhtml" 

                 xmlns:svg="http://www.w3.org/2000/svg"

     xmlns:xlink="http://www.w3.org/1999/xlink"

     lang="en-US">

 <head>

  <meta http-equiv="Content-Type" content="application/xhtml+xml;charset=utf-8"/>

  <title>SVG</title>

  <style type="text/css">

   #drawingPad{

    width:100px;

    height:100px;

    overflow:hidden;

    border:1px solid black;

    position:absolute

   }
  </style>

  <script type="text/javascript">

  <![CDATA[

//________________________________

var xhtmlNS = "http://www.w3.org/1999/xhtml";

var svgNS = "http://www.w3.org/2000/svg";

var xlinkNS ="http://www.w3.org/1999/xlink";

function makeCircle(x, y, r){

 var vCircle = document.createElementNS(svgNS, "svg:circle")

 vCircle.setAttributeNS( null, "cx", new String( x  ) + "px" );

 vCircle.setAttributeNS( null, "cy", new String( y  ) + "px" );

 vCircle.setAttributeNS( null, "r", new String( r ) +"px");

 vCircle.setAttributeNS( null, "style", "fill:blue");

 return vCircle;

}

function makeLine(x1, y1, x2, y2){

 var vLine = document.createElementNS(svgNS, "svg:line")

 vLine.setAttributeNS( null, "x1", new String( x1  ) + "px" );

 vLine.setAttributeNS( null, "y1", new String( y1  ) + "px" );

 vLine.setAttributeNS( null, "x2", new String( x2  ) + "px" );

 vLine.setAttributeNS( null, "y2", new String( y2  ) + "px" );

 vLine.setAttributeNS( null, "style", "stroke-width:2;stroke:red");

 return vLine;

}



function drawPattern(){

 var vPad = document.getElementById( "drawingPad" );

 var vSVGElem = document.createElementNS(svgNS, "svg:svg");

 var i;

 var r = 20;

 var vAX = new Array();

 var vAY = new Array();

 for( i = 0 ; i < 7 ; i ++ ){

  var vAngle = Math.PI * 4 / 7 * i

  var vX = Math.cos(vAngle) * r + 50

  var vY = Math.sin( vAngle ) * r + 50

  var vC = makeCircle(vX, vY, 4);

  vSVGElem.appendChild( vC);

  vAX[ i ] = vX

  vAY[ i ] = vY

  if( i > 0 ){

   var vLine = makeLine(vX, vY, vAX[ i - 1 ], vAY[ i - 1 ]);

   vSVGElem.appendChild( vLine );

   

  }

 }

 vPad.appendChild(vSVGElem) 

}

 ]]>-->

</script>

</head>

<body>

<form>

 <input type="button" onclick="drawPattern(); return false;" value="Click"/>

</form>

<div id="drawingPad">

 

</div>



</body>

</html>

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

Labels: javascript, svg

sortable table with HTML and javascript

Is table should be sortable? Yes, of course.

I had a boring and frustrated afternoon, to kill my time, I wrote some code to do this.

<html>
<head>
<script>
function initiateTableSort(){
 var vTables = document.getElementsByTagName("table");
 var i;
 for( i in vTables ){
  var vFirstRow = vTables[ i ].rows[ 0 ];
  var j;
  for( j in vFirstRow.cells ){
   vFirstRow.cells[ j ].onclick=doTableSort;
   vFirstRow.cells[ j ].ondblclick=doTableSort;
  }
 }
}

var iTeBeCompared = 0;
function doTableSort( e ){
 var vTargetTable = e.target;
 while( vTargetTable.nodeName != "TABLE"  ) vTargetTable = vTargetTable.parentNode;
 var vTR = vTargetTable.rows[ 0 ];
 var i = e.target.cellIndex;
 var j;
 iToBeCompared = i;
 var vTRs = new Array();
 for( i = 1; i < vTargetTable.rows.length; i ++ ){
  var vRowData = new Array();
  var cells = vTargetTable.rows[ i ].cells;
  for( j = 0; j < cells.length; j++ ){vRowData[ j ] = cells[ j ].innerHTML;}
  vTRs[ i - 1 ] = vRowData;
 }
 if( e.type=="click") vTRs.sort( sortRoutineDes );
 else vTRs.sort( sortRoutineAs );
 for( i = 0 ; i < vTRs.length; i ++ ){
  for(j = 0 ; j < vTRs[ 0 ].length; j ++ ) 
   vTargetTable.rows[ i + 1 ].cells[ j ].innerHTML = vTRs[ i ][ j ];
 }

}

function sortRoutineDes( a, b ){
 return (a[iToBeCompared] > b[iToBeCompared])? -1:1;
}

function sortRoutineAs( a, b ){
 return (a[iToBeCompared] < b[iToBeCompared])? -1:1;
}

</script>
</head>
<body onload="initiateTableSort()">
<table border= "1">
 <tr>
  <th>a</th><th>b</th><th>c</th>
 </tr>
 <tr>
  <td>x1</td><td>3</td><td>1</td>
 </tr>
 <tr>
  <td>a2</td><td>2</td><td>2</td>
 </tr>
 <tr>
  <td>a3</td><td>4</td><td>3</td>
 </tr>
<tr>
  <td>a3</td><td>1</td><td>3</td>
 </tr>
<tr>
  <td>a3</td><td>7</td><td>3</td>
 </tr>
<tr>
  <td>a3</td><td>8</td><td>3</td>
 </tr>
<tr>
  <td>a3</td><td>0</td><td>3</td>
 </tr>
<tr>
  <td>a3</td><td>9</td><td>3</td>
 </tr>

</table>
</body>
</html>

Labels: javascript, table

change the background color of a table cell by javascript code

There are some javascript about changing the background color of a table cell around the web. I don't know why people post that, but I made one with my code that access table cell.

getTableCell( "aTable", 1, 2 )
 .style.backgroundColor="blue";

Labels: javascript, table cell

access table cell via javascript 2

Actually, from what I have tested,

 TableId.rows[ i ].cells[ j ]

works fine.

But some people say there are some problems with Safari. I didn't see problems yet.

Labels: javascript, table cell

Javascript code to access table cell via id

function getTableCell(id, row, cell){
    var vRow = document.getElementById( id ).rows[ row ];
    var i=0, j=0;
    for(;i < vRow.childNodes.length; i ++ ){
     if( "TD" == vRow.childNodes[ i ].nodeName ){
      if( j == cell ) return vRow.childNodes[ i ];
      j ++;
     }
    }
    return null;
   }

Tested on Firefox 1.02, IE6, Safari 1.2

Labels: javascript, table cell

javascript regexp email validator

I have been looking for a javascript email regexp email validator. And I found one from this web site. And the code is "/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i"

This code looks nice.

However, I am not totally satisfied with the code. Because there are emails addresses don't look like "abc@abc.com". For example, I used to send email to an address like "joel@192.168.100.1". So I am going to make some change to the regular expression filter.

Update 1: "/^([\w-]+(?:\.[\w-]+)*)\@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$|(\[?(\d{1,3}\.){3}\d{1,3}\]?)$/i" will detect email like "abc@127.0.0.1" or "abc@[127.0.0.1]".

Update 2: /^([\w-]+(?:\.[\w-]+)*)\@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$|(\[?(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\]?)$/i

Now this one won't let a.b.c@256.0.0.0 slip.

Update 3: /^(("?)[\w- ]+\1)|([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$|(\[?(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\]?)$/i

Now this regular expression thinks "Guy Joel"@abc.com or "Guy Joel"guyj@abc.com are good email address.

Update 4: /^(("?)[\w-\s]+\1)|([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$|(\[?(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\]?)$/i

A little bit more update on space in the regexp.

Update 5: /^("[\w-\s]+")?([\w-]+(?:\.[\w-]+)*)?@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$|(\[?(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\]?)$/i

Made a big mistake in the last one. So, another update.

Update 6: /^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$|(\[?((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\]?)$/i

It's getting longer and longer, better and better.

Update 7: /^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i

The update 6 thinks 256.255.255.255 is a legal ip address, fixed in update 7.

string	result
joel@joel.com	pass
joel@joel.edu	pass
joel@joel.museum	pass
joel@joel.ac.uk	pass
joel@guy.joel.ac.uk	pass
guy.joel@guy.joel.ac.uk	pass
guy.joel@127.0.0.1	pass
guy.joel@[127.0.0.1]	pass
\"Guy Joel\"guy.joel@[127.0.0.1	pass
\"Guy Joel\"@[127.0.0.1]	pass
\"Guy Joel\"@9.999.99.25	fail
\"Guy Joel\"@999.99.99.25	fail
"\"Guy Joel\""	fail

Also, regular expression for url validation.

Labels: email, javascript, regexp, regular expression

BETTER WeB

Wednesday, September 24, 2008

javascript speed test

Thursday, August 07, 2008

Deferred javascript in firefox

Best javascript chart generator

Saturday, June 14, 2008

what's new in firefox 3 for webdevelopers

Thursday, June 12, 2008

An regular expression for float point numbers

Tuesday, June 03, 2008

Safari is getting a new Javascript engine

Sunday, June 01, 2008

Regular expression for URL validation

Friday, January 11, 2008

acid 3 test

Thursday, January 03, 2008

Sortable table, dynamic table cell background color in action

Wednesday, January 02, 2008

for...in loop and nodeList in Safari

Thursday, December 27, 2007

Dynamically create SVG with javascript

Thursday, April 14, 2005

sortable table with HTML and javascript

Saturday, April 09, 2005

change the background color of a table cell by javascript code

Tuesday, April 05, 2005

access table cell via javascript 2

Wednesday, March 30, 2005

Javascript code to access table cell via id

Wednesday, January 05, 2005

javascript regexp email validator

About Me

Previous Posts

Archives