- [[stylesheet|Changing Your Story's Appearance]]
===== Scripts =====
Just as you can tag a passage ''[[stylesheet]]'' to have its contents treated as CSS style rules, you can use the ''script'' [[tag]] to include custom Javascript in your story. All [[passage]]s with this tag are executed when the game first loads, which you can use as an opportunity to do two things:
* Define [[custom macro]]s made in Javascript by other Twine users.
* Modify how the Twine engine will work. To do this properly requires careful inspection of the Twine engine.
The execution order of passages tagged ''script'' is based on the alphabetical order of the script passages' names.
**Remember:** script passages must //only// contain Javascript.
====Coding in Twine==
* More details about coding in Twine can be found under [[code|Why Use Code]]?
* Other common questions are handled in the [[frequently_asked_questions|FAQ]].
====Requesting jQuery====
You may wish to use [[http://jquery.com|jQuery]] in your scripts to manipulate the page's structure, use AJAX, or just make general coding easier. But, you may also want other people to be able to use your script without having to set the [[StorySettings]] jQuery value themselves. There is another way for a story to request jQuery: simply put the case-insensitive words "requires jQuery" in a comment or a string inside your code:
//requires jquery
You can also request the [[http://modernizr.com|Modernizr]] library with the words "requires Modernizr".
A reminder: you do **not** need to call ''$.noConflict()'' when you first invoke jQuery in Twine 1.4 or higher.
====prerender and postrender====
Two objects exist in the Twine engine that are designed for custom script writers: ''prerender'' and ''postrender''. If you add Javascript function properties to these objects, those function properties will be run every time a [[passage]] is rendered.
A ''postrender'' function looks something like this:
postrender.hello = function(a) {
...
a.className += "hello"; // An example of 'a'
console.log(this.title); // An example of 'this'
...
};
When ''postrender.hello'' is called, ''this'' is the Passage object which is currently being rendered, and the first argument ''a'' is the ''