JavaScript Lint check in Designer

Some time ago I distributed a sample form that used Douglas Crockford’s excellent JSLint script to check form JavaScript for common coding errors.  You can read about it here. The logical next step is to use macros to integrate this capability into Designer (macros introduced here).

Here is everything you need to install the macro.

One improvement I’ve made over the previous version is to automatically populate the list of global objects with all the subform and field names in the form.  Now it will flag far fewer global objects — and if it does flag a global, you really want to pay attention, since it is very likely an un-declared variable.

I really strongly recommend this tool to you. When you run this against your script you will very likely be surprised at some of the coding errors you’ve made.  I know I was.

5 Responses to JavaScript Lint check in Designer

  1. Thank you John,

    This is an excellent tool!!! I have quite a bit of ‘red’ to get rid of. The biggest offender is using == and != for null and true/false conditions.

    I would be grateful if you could explain why it is recommending the identity operator.

    Thanks,

    Niall

    • John Brinkman says:

      Niall:

      Glad you’re finding this useful.

      JavaScript will coerce the operands of == to the same data type.
      For example, the expressions: 42 == “42” and 0 == “\n” both return true.
      The strict equality operator returns true only if the operands have the same type and
      value.
      John

  2. Hi John,

    This is a fabulous tool and has made my coding better, always a good thing, I was just wondering if you have any thoughts on how best to Unit test script object (primarily) but forms in general as well?

    Many thanks

    Malcolm

  3. Thanks John,

    Sorry, I had missed the extensive tooltips first time round – they are very helpful.

    Including the mxml gives a great insight to the workflow. Piecing the bits together (with your previous post: http://tiny.cc/5vcag), I think the process is:
    – Tools > Scripts menu runs the .js file
    – .js uses designer api and runs .swf using showFlexDialog.
    – Process handed over to .swf, awaiting user to click ok or cancel.
    – On ok .swf executes external interface call with setDialogString. Strings remain available.
    – Process handed back to .swf, which processes selected options.
    – JSLint does its magic in .js file
    – .js builds array of errors …
    – If errors .js displays PDF JSLint form with array, using showXDPinAcrobat.

    Looking at the examples it looks like I would need corresponding dialog strings to get data into and out of the .swf.

    Get data into the .swf =
    .js has setDialogString()
    .swf has getDialogString()

    Get data out of the .swf =
    .swf has setDialogString()
    .js has getDialogString()

    Apart from your original macros blog, are there any other guides/examples? I am thing of a map to show the interaction between designer / .js / .swf. Just trying to get my head around the process.

    Thanks again,

    Niall

    • Nial:

      I think you’ve captured it. I think there’s one typo. Where you said:
      “Process handed back to .swf, which processes selected options.”
      I think you meant “process handed back to .js …”

      As far as I know, my blog is the only source of information for macros at this time. I expect that once it becomes an official product feature there will be some formal documentation developed.

      John