Quick Script Writing Tutorial

For this tutorial we will focus on the simplest kind of script, which is one directly associated to a thought. To make one, the script file name is simply the ID of the thought.

In your thought write:

where nnnnn is the ID of the thought that contains this script. You can find the ID number in the footer at the bottom of the thought. Now your done with the thought. Make sure to check the draft checkbox and then save the thought. If you don't have a thought for this yet, create one and get it's ID before you add the

The next step is editing the script itself. Since you are in draft mode you will notice that the script reference is visible in the page and that the ID argument is clickable. Click on the ID to edit the script. A javascript editor window will open allowing you to add code.

If your script is super simple and does not involve the content of the thought, you can simply write it direct at this point. However, most of the time you want the script to display something in the thought or do something related to the thought, or be in relation to other items in the page. So to enter a context where all the thought aspects are available, you use the myScript() adverb. This adverb asynchronously generates a thought context for you and executes your code in that context. It can also be used to load other scripts your code may be dependant on.

In the simple form the myScript adverb runs your code as the thought is displayed. Again nnnnn is the ID of the current thought.

myScript(nnnnn, function($, pr) {

   // $ - contains the jQuery hook.
   // pr - is a JSON object that contains the properties (context) for the thought.
   // pr = {
   //    0: the script name
   //    1: the first argument
   //    .... any more arguments by number
   //    id: the thought id
   //    sid: the html element id for the output area attached to this script
   //    cmd: the reference that invoked the script, either !script or !plugin
   //    script: the script name (same as argument 0)
   //    props: [an array of arguments 1 to n]
   //    body: the body of the reference (advanced concept)
   // }

   // -- Your code goes here. --

});

So with a little jQuery and the help of JSON.stringify, we can print our own context property object right into the thought. Useful to see what one looks like.

myScript(nnnnn, function($, pr) {

    $(pr.sid).html('<pre>' + JSON.stringify(pr, null, 4) + '</pre>');

});

In a more practical example, we can make a button and have it do something like put our picture in the thought.

myScript(nnnnn, function($, pr) {

    $('<button>show my image</button>')
    .appendTo(pr.sid)
    .click(function(e) {
        e.preventDefault();
        $('<img/>')
        .attr('src', '/image/user/' + myFbi.session.userid + '/profileimage')
        .appendTo(pr.sid);
    });

});

And there you are! (literally)

If you don't see output, check that you replaced nnnnn with the actual thought ID and that it is correct.

In this simple example each press of the button appends another image into the thought. I'll leave it up to you to code it so that it replaces the image instead of appending another.

All the code in these examples is very basic JavaScript and jQuery. If you don't have knowledge of these languages, many good tutorials for them can be found on the web.

Here is the button example live:

proudly scribed using markdown?

Comments