<CFSCRIPT language="javascript">

OpenBD ships with deep integration with JavaScript. This lets you run write applications in pure Javascript and run them at the server side by simply dropping your Javascript code inside the <CFSCRIPT language="javascript"> tag block. This manual page will detail the power that is available and how you integrate it with your CFML application.

JavaScript standard

OpenBD ships with its own version of the latest cutting edge Mozilla Rhino JavaScript engine that provides ECMAScript5 and partial JavaScript 1.8 support. It has been optimized specifically for OpenBD to integrate it to the CFML language with minimal fuss.

  • Read/Write to CFML scopes from within JavaScript (varibles, form, url, cgi, session, client, application)
  • Define JavaScript functions that are callable from CFML
  • Call out to CFML functions from within JavaScript using $cf
  • Load external JavaScript libraries into the scope

This powerful and deep integration gives you the best of both worlds, dropping in and out of either language depending on what you want to achieve. This deep relationship permits you to write your complete server side application in pure JavaScript.

Getting Started

To start embedding JavaScript into your pages, simply define the <CFSCRIPT language="javascript">, making sure you have the language attribute set to "javascript", and start writing JavaScript code. No special setup, no restart, just write it. Consider the following very simple example, that defines a Javascript function, that takes in two parameters, adds them together and returns the result.

<cfscript language="javascript">
function addNumbers( a, b ){
  return a+b;
}

var r = addNumbers(2,8);

$cf.print( r );
</cfscript>

<cfset result = addNumbers(1, 3)>

As you can see, we are calling it inside the JavaScript block and assigning the result to r. We are then printing out the value of r to the output using the special helper JavaScript function $cf. This is very similiar to how you think of the JQuery $ global variable. In OpenBD, $cf, is always available and gives you a window into the CFML world. More later.

In addition to calling the function inside the JavaScript block, any JavaScript function that is defined, is automatically exported to the CFML page as a whole and made available to the the rest of the CFML processing. The example shows us calling the JavaScript function from outside the JavaScript world.

CFML Variables

CFML has a number of different scopes of variables available. The popular ones are available to the JavaScript block as top level variables (varibles, form, url, cgi, session, client, application) which can be accessed directly.

<cfscript language="javascript">
variables.person = {
  name : "Alan",
  location : "Scotland"
};

if ( variables.person.name == "Alan" ){
  $cf.print( variables.person.location );
}
</cfscript>

This example illustrates getting access to the standard 'variables' scope and setting/reading elements. In CFML the variables scope is implicit and not necessary to define all the time in CFML code. Inside JavaScript however, you have to specificaly reference it, other wise any variable you declare inside the block will be localized to JavaScript and not available to the CFML application.

Global Functions

As discussed the $cf is a global variable that lets you interact with the CFML runtime world. It provides a number of helper methods.

Function Name Description
print(.) This is similar to WriteOutput() function letting you quickly output to the browser window.
console(.) This is similar to Console() function letting you quickly output to the debugging console.
load(.) Loads in an external file that has JavaScript defined in it. This is like the JavaScript version of renderInclude
$cf.tocfml(.) This is convience method to let you set a JavaScript variable into the CFML world.
$cf.get(.) This lets you get at a complex CFML variable from inside JavaScript.
$cf.XXXXX(.) This is how you get at core CFML functions from inside JavaScript. You can call any core CFML function using this technique. You cannot (yet) call user defined functions using this technique.

An example of calling out to a core CFML function from inside JavaScript

<cfscript language="javascript">
var g = $cf.left( "alan", 2 );
</cfscript>

The future

The integration with JavaScript and CFML opens up some exciting possibilities.