Thursday, December 13, 2012

Object-Oriented JavaScript (Part 1) - An Example

Part 2 of this post goes into this topic in detail and gives a Google Apps Script example that should be much more suited to anyone wanting to apply OO JavaScript in Google Spreadsheets (Note added 28-Jan-2013).
To be expanded, updated and improved in due course.  The code on GitHub is ok but I would like to elaborate on the whole topic of object-oriented JavaScript.  Meanwhile, if you get a chance, check out Nicholas Zakas' book mentioned below.  I have the 2nd edition and that has a  very good chapter on OO. (Added: 21-Dec-2012).
This entry uses the same example of DNA sequence translation into protein as was described in an earlier entry where VBA was used.  As in that example, the code deals with DNA sequence ambiguity expressed using IUPAC codes (R = A and G mixture).  This is its only novel or interesting feature from a functionality point of view in the example given.
The aims of this entry are to:
  • Demonstrate the Combination Constructor/Prototype Pattern as described in the book "Professional JavaScript For Web Developers" by Nicholas Zakas.
  • Show how the same JavaScript code can be used in 
    1. A simple web page
    2. In a Google spreadsheet
    3. In server-side Node.js

The code is on GitHub

The main file is JavaScript/TranslateDna.js on this GitHub link.

Firstly, there is a HTML test page with some embedded JavaScript to show how the JavaScript "TranslateDna.js" can be used in a web page form, see HTML page link.

To use
  • Copy the HTML to a file named "DNA_Translator.html"
  • Save this in a location recognized by your web server (On my Mac running Apache, I save it to "/Library/WebServer/Documents/".
  • Save the JavaScript file "TranslateDna.js" to the same location.
  • View the web page using the URL http://localhost/DNA_Translator.html
  •  Assuming the web server is is working, you should see a crude form with two inpout textareas and one button, screenshot:
 The dummy input DNA sequence is in the upper textarea and the translated output is in the lower one.  The form is very crude, and the HTML-embedded JavaScript is very simple but it works fine in Safari, Chrome and Firefox, I cannot test IE on my Mac.

The same JavaScript code that the HTML page uses to do the translation can also be called as user-defined functions (UDFs).

To do this:
  • Create a new Google spreadsheet.
  • Paste the code containing the user-defined functions in this GitHub link into the script editor.
  • Add another script file by selecting File->New->Script File in the script editor and paste in the code from this GitHub link.
  • To use call the functionality as UDFs, enter these dummy DNA sequence values in cells A1 and A2:

  • In cell B1, this function call "=getTripletsFromDNA(A1, "|")" produces AAA|CCC|GGG|TTT
  • while "=getTripletsFromDNA(A2 "|")" gives RAA|CCC|GGG|TTT
  • To test the translation of these two dummy sequences enter the formulas "=getAminoAcidsFromDNA(A1,"|")" and "=getAminoAcidsFromDNA(A2,"|")" into cells C1 and C2, respectively. The output from these calls is:

See how the R is dealt with in the second call, it results in a double amino acid mixture.

The main point of this blog entry is that Google Apps Script is JavaScript. Functionality can be developed in Google Apps Scripts that can then be used on a web page as well as in a Google spreadsheet. The same code can even be run in Node.js. Therefore learning Google Apps Scripting is well worthwhile and confers immediately transferable skills.

 In the next entry, I will discuss the code in the TranslateDna.js file as part of a broader object-oriented JavaScript theme.

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.