CodingForums.com - Creating and using custom script blocks

Two custom script block examples can be found in the page in the attached zip file.

Anyone can make their own language for writing code, running a data management system, incorporating a templating engine,
etc that uses a custom script block and a JS interperter to read and interpret the custom script.

This means you can create your own way of applying and using custom script commands you make up.

Custom script blocks have been around and in use for a long time, but not every one is familar with them, nor how easy they are to create.

The two custom script blocks (bob and carl) used in the example page are simple JS wrap language partials for demonstration purpose,
and not ment to be complete or even adequate languages.

Quick and Simple Directions to build your own custom script blocks
Creating the custom script block:

1) write an opening script tag and add your own type.
<script type='text/yourCustomNameHere'>
You could leave out the structure if want and just write:
<script type='yourCustomNameHere'>

2) Write you custom code after the opening custom script tag.
Whatever you enter here will be ignored by the browser, but the text will be avilable for parsing as desired.
The bob-script example from the page in the attached zip file:

Code:

************

make a div called phquote and add to bingo

create a span with id quote1 and add it to phquote 

make span quoted1 add to phquote

put <strong>I</strong> know of no way of judging the future but by the past. into quote1

put ...___ <i>Partick Henery</i> in quoted1

at .sinclair hilite        this is a trivial, example of a custom language.

add blue hilite to quote1    the color can be a named color or a hex value #0000ff.

color quote1 green

add href http://www.brainyquote.com/quotes/authors/p/patrick_henry.html to quote1

************

3) Close the script tag
</script>

Creating the interperter for the custom script:

1)grab the text contained in the custom script block
One way to get the scripts text is by grabbing all of the script elements and checking their types for your custom type.

Code:

var s = document.getElementsByTagName("script")

for(var i=0; i < s.length; i++){

        if(s[i].type=="text/yourCustomNameHere"){

                //found the custom block;

                var scTxt = s[i].text;

                //now lex/parse/evaluate the script to do something.

                //...

        }

}

One alternative is:

Code:

for(var i in s){

        if(s[i].type=="text/yourCustomNameHere"){

                var scTxt = s[i].text;

                //...

        }

}

2) Now that you have the script text you can use simple regular expressions to lex/parse/evaluate it,
or you can build your own full blown lexer/parser/evaluator to handle the interpretation, or you can use one you find on the web.
The point is, you can do anything you want with the custom script.

An example regular expression from the example page:

Code:

var m=v[j].match(/^add href\s+[a-zA-Z_\.\/#\?](?:[a-zA-Z0-9_%\.\/#:\?]+)?\s+(?:to\s+)?[a-zA-Z0-9_$](?:[a-zA-Z0-9_$]+)?(?:\s.*)?/);



to match the command statement:



add href <url> (to)? <element_id>

A few ideas are for using the custom script blocks are
- Make your own language wrapper</li>
- Make a custom data store</li>
- Make a templating system</li>
- Make a login control system</li>
- Pretty much whatever you want to do that can be wrapped or stored or controlled</li>

Create your own
It's dead simple to create a wrapper for JS functionality. Help those who dont know or like code to easily work with the underlying system
by creating a friendly language wrapper for the functionality you want to make available for those users.

Instead of

Code:

$("#micadee").click(function(){

        $("#boelfreed").css("color","red").html("Nice and Sweet!");

})"

You could allow the use of a familiar laguage structure, something like:

Code:

when micadee is clicked color beolfreed red and set html to Nice and Sweet!

or maybe you want to make a terse language for faster development -

Code:

*:mica.dee :beol.freed C|red H|Nice and Sweet!

Anyway, even though it throws another layer of code between the user and the interpreter, it can be useful, and it's easy to build wrappers.

You can achieve similar results using a hidden textarea instead of a custom script block, and the page can validate in that case.
But, using a custom script block lets you parser the custom script before any body elements are loaded into the page.

A drawback to the above method of using custom script blocks is they must reside in the page. You can't use an external call to
load a custom script because the text attribute of the script block is blank for external code by design.

A good example of a proposed use for custom script blocks is found at this site
http://ejohn.org/blog/javascript-micro-templating/

Note: ** Custom script blocks are supported by all major browsers. **
BUT: A page with a custom script block will not Validate.
Reason: Unrecognized script type causes an unrecoverable unmatched closing script error in the validation algorithm.