Writing client-side JavaScript inside server-side JavaScript without losing your mind

When most people think of JavaScript, they think of client-side JavaScript.  However, JavaScript is also used as a scripting language in Webcrossing.  Here are a few tips for staying sane while using client-side JavaScript inside a server-side JavaScript environment.

Keep your client-side and your server-side code straight.  Be careful to not get your client side variables or functions mixed up with your server-side functions.  It seems like a forehead-slapping no-brainer, but we've all done it, often accompanied by a bit of head-against-brick-wall banging before the light dawns.

Writing client-side JavaScript inside server-side JavaScript can be tedious, especially if it is halfway complex, because server-side JavaScript requires that client-side JavaScript be quoted to get it to appear on the page as a literal. For best result, you'll want to write the client-side JavaScript first, by itself. Then put it into the server-side code and quote it (escaping what you need to) appropriately.  In my experience, even that sometimes produces four letter words, usually when server-side variables values needs to be inserted into the client-side code.

Debugging the client-side code later is much simpler if you also insert line breaks into the SSJS code using \r\n at the ends of the client-side function lines:

bb += 'function myFunction() {\r\n';
bb += 'var somevar = 1;\r\n';
bb += 'return somevar;\r\n';
bb += '}\r\n';

Without this, it all runs together on one line and browser debug utilities won't be much help telling you what line the problem is on.

When you can, break out your client-side JavaScript into a separate file.  Whatever is in a separate file won't need to be quoted. Duh :)

However, sometimes this is impossible because you need to set client-side JavaScript variables based on server-side values that are only known on the page being constructed.  For example, your client-side code might need to know the username and for whatever reason, you can't just send it as a parameter.  In this case, there are a couple of different things you can do.  One thing is to put a small client-side function on your page like this (this is server-side code):

bb += 'function getUserName() { return ' + user.userName + '; }';

Then in your client-side JavaScript in your separate file, all you need to do is call your getUserName function to retrieve the name.  In some cases you can also do something similar using hidden form fields (again, server side code):

bb += '<input type="hidden" name="userName" value="' + user.userName + '">';

Another thing you can do is use the special %% syntax in SSJS whereby anything inside pairs of %% gets delivered immediately to the response buffer. However, that only works if you don't have any server-side variables inside your client-side script. If you don't, you might as well put it in a separate file. And it also only works if you are not concatenating your response into a ByteBuffer and returning it all at the end of your function.

Hopefully these tips will keep your brain from becoming scrambled while using JavaScript in two simultaneous contexts.