Best Practices and Useful Techniques
During our time developing JS Hack packages we have learnt a few techniques which help get the most out of JS Hack and increase performance.
#Use Prototype JS Blackboard uses the Prototype Javascript library and it is therefore already loaded into the browser memory and for this reason it is recommended that you utilise this functionality in your hack packages.
In almost all cases you probably want to wait for the dom:loaded event:
This is because Javascript is executed as it is being parsed by the browser, but chances are that the rest of the page has not yet been parsed at this time.
As the browser parses the HTML source, it build what is known as the Document Object Model (DOM). Most of the operations you are going to want to do involve the use of the DOM and therefore will fail if executed prior to it's completion.
For this reason the default snippet in the JS Hack edtor includes the code required to wait for the dom:loaded event.
Instead of putting Javascript and CSS directly in to the injected content put it in a seperate file and upload it as a resource.
For example the Javascript in the following example is not cacheable by the browser as it is injected directly into the HTML on every request:
Contrasted with the following example, which injects a script tag into the HTML each time which references an external JS file. This external file will be cached by the browser and therefore the javascript within will only be downloaded once.
This technique can make development harder as you will need to modify the JS file and reupload it on each modification. To work around this, develop the hack inside the injected content, and move it all to external files at the end once you are happy with it's behavior.
Refer to the URL restriction documentation for information on supporting all Blackboard versions.
Often packages will require adding new elements to the DOM, but none of the injection points will be where uou require the element to be inserted. To avoid long strings in the Javascript and the delays involved in parsing, DOM elements can be injected into the DOM with the injected content already hidden:
These DOM elements will be parsed by the browser at the same time as the rest of the page. The elements can be then moved using Javascript and shown:
