<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 the WriteOutput() function, letting you quickly output to the browser window. |
dump() |
This is similar to the WriteDump() function, letting you quickly dump simple and complex data to the browser window. Unlike the writeDump() function, it only takes a single variable. |
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. |
Print is similar to WriteOutput() function letting you quickly output to the browser window.
<cfscript language="javascript"> print('JavaScript on OpenBD is fun'); </cfscript>
console()
This is similar to Console() function letting you quickly output to the debugging console.
<cfscript language="javascript"> console('This is output in the console'); </cfscript>
$cf.tocfml()
This is convience method to let you set a JavaScript variable into the CFML world.
<cfscript language="javascript"> jsvariable = 'Sharing variables between JS and CFML is easy'; $cf.tocfml('jsvariable'); </cfscript> <cfoutput> #jsvariable# </cfoutput>
$cf.get()
This lets you get at a complex CFML variable from inside JavaScript.
<cfset myAwesomeVar = { name: "Marcus", isAwesome: true }> <cfscript language="javascript"> myVariableInJS = $cf.get('myAwesomeVar'); print( myVariableInJS.name ); </cfscript>
load()
Loads in an external file that has JavaScript defined in it. This is like the JavaScript version of renderInclude
This lets you place JS in separate files and load as needed, cutting down on code duplication and clutter.
<cfscript language="javascript"> // Absolute paths are necessary load('C:\myjsfile.js'); // Here in conjunction with CFML expandPath() to load a file in the root directory of the application. load($cf.expandPath('myjsfile.js')); </cfscript>
Core CFML function
<cfscript language="javascript"> var g = $cf.left( "alan", 2 ); </cfscript>
The future
The integration with JavaScript and CFML opens up some exciting possibilities.