News from MathTran

Just another WordPress.com weblog

Archive for July 2008

JavaScript event handling problems

with 4 comments

For our live preview online TeX editor we would like to handle key events of a textarea. Depending on the context we want to intercept the key events and let the default action happen (i.e. a character will be inserted into the textarea or the cursor will be moved) or prevent the default action and execute our own code based on the information of the key event.

Well, little we knew of how difficult it is to get the event information you need due to various browser incompatibilities. We had to do some research on the topic and would like to share our findings here for future reference.

First of all, Peter-Paul Koch has an interesting blog entry with event compatibility tables for various browsers. There, you can already see that the key events are not all cross-browser compatible. As we are especially interested in these events, Jan Wolter’s JavaScript Madness: Keyboard Events proved to be an extremely valuable resource.

Based on the above articles we decided to use the keydown event to handle all special keys, which means keys that do not produce a character, i.e. Enter, Backspace, the arrow keys. To handle character input we use the keypress event. The keypress event object has a property which holds the character that corresponds to the pressed key or keys. This property has different names in different browsers but is available in all of them. An additional difficulty is the fact that some browsers do fire keypress events for special keys and some do not.

For jQuery, there exists a plugin called fix_events, which can be used to normalize event properties. Currently we do not use this plugin because our use would be very limited. Instead we incorporated the compatibility checks within our code.

Written by mystar22

July 21, 2008 at 4:35 pm

Posted in Uncategorized

More on testing JavaScript code

with one comment

In a previous post I talked about how we would like to test ‘pure’ (i.e. DOM independent) JavaScript functions in an automated fashion.

Spidermonkey offers a command line interpreter and the ability to call scripts like js.exe -f "script1.js" -f "script2.js" -e "run_this();". Unfortunately, both of these features are not available for Windows cscript.exe, cscript can only execute one script file and terminates after it is done.

Koby Kahane has created a workaround to add command line interpreter abilities to cscript (although his code did not work for me). In order to be able to load different script files and execute commands using a single command, we wrote a litle python script which uses the same interface as spidermonkey’s js.exe, create a temporary file, and call cscript with this file.

Here is the code (no error checking) msjs.py:

 

import sys, os
import subprocess

def main(argv):

    tmp_filename = 'msjs_tmp_file.wsf'
    includes = ''
    executes = ''

    for i in range(len(argv)) :
        if argv[i]=='-f' :
            includes += '\n' % argv[i+1]
        elif argv[i]=='-e' :
            executes += '\n\t%s\n\n' % argv[i+1]

    code = '\n%s%s\n' % (includes, executes)

    tmp_file = open(tmp_filename,'w')
    tmp_file.write(code)
    tmp_file.close()

    subprocess.Popen('cscript.exe '+tmp_filename).communicate()[0]

    os.remove(tmp_filename)

if __name__ == '__main__' :
    main(sys.argv[1:])

 

The use of a real temporary file using the tempfile module is not possible, as in Windows you cannot open the temporary file a second time, which cscript would have to do.

Let us assume that we have a file add_def.js

 

// Provide 'print' command in Windows scripting - cscript.
if (typeof WScript == 'object'){
    function print(str){
        WScript.echo(str)
    }
}

add = function(a,b){return a+b;}

 

Now, we can do python msjs.py -f "add_def.js" -e "print(add(2,3));" and it will result in the same code being called by cscript as by js.exe for the same command. The generated temporary file looks like this:

 

<job>
<script language="JScript" src="add_def.js"/>
<script language="JScript">
	print(add(3,4));
</script>
</job>

Written by mystar22

July 8, 2008 at 5:24 pm

Posted in Uncategorized