-
Notifications
You must be signed in to change notification settings - Fork 0
The Basics
First of all, you will still need to write a little bit of HTML to get started, you can utilize an existing web project, but for simplicity it's best to practice on a clean slate.
<html>
<head>
<title>jsonHTML EXAMPLE!</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.2.min.js'></script> <!--MAKE SURE TO INCLUDE JQUERY-->
<script type='text/javascript' src='jsonHTML.js'></script> <!-- MAKE SURE TO INCLUDE jsonHTML -->
</head>
<body></body>
</html>As of v0.6 and newer, you can now append directly to the body, this is one of two incompatibilities between v0.5 and v0.6. This "root" div can be any current div in the DOM, you may have to experiment to see exactly how your DOM will render, and make changes to css styling, luckily you can do that on the fly which will be covered later.
Now, within the head tags, or within an external linked script, you can begin using jsonHTML, for this example, for simplicity, were going to place the code within the html in the head between script tags.
For the sake of simplicity, there is a jsonHTML constructor that you can call to quickly begin coding, it's called $jConstruct. This sets up an object that you can manipulate and have renderd to the DOM. If you dont like syntactic sugar, check out the documentation for v0.2 near the bottom of this documentation, v0.5.x is currently backwards compatible in that code style. Similar documentation is coming for v0.6+.
<script>
//lets make a div that says hello world!
var helloDiv = $jConstruct('div');
helloDiv.text = 'Hello World';
</script>Cool! You made a div that will say Hello World, but if you run this right now, you wont see anything, because the html output has not been appended to any container, so we need to write code to do that.
//first we want to wait until the DOM is finished rendering, we can use jQuery to do this.
$(document).ready(function() {
//now lets append helloDiv to the root div.
helloDiv.appendTo('body');
});The code so far between the script tags should look like this:
//lets make a div that says hello world!
var helloDiv = $jConstruct('div');
helloDiv.text = 'Hello World';
//first we want to wait until the DOM is finished rendering, we can use jQuery to do this.
$(document).ready(function() {
//now lets append helloDiv to the root div.
helloDiv.appendTo('body');
});Now, When you reload the page, it should be rendered on the DOM, and you can even hit "inspect element" in your browser, and you can view the HTML which was appended to the specified HTML container, in this case the "body" of the DOM. Notice how, every object you create with jsonHTML has a random character string as an ID. This random ID is created if you don't specify one yourself, in order for jsonHTML to manage appends in it's internal workings, add flexibility, and decrease code complexity so others can view and understand your code better. It is not known if having lots of ID's decreases performance in page rendering, but so far, even big web applications don't appear to mind. Although, performance really depends on the users processing power. So far, jsonHTML has been stress tested against an old 3.4GHz Celeron D (Single Core) computer, and even with large complex webpages, it ran reasonably well.
Soon to be in the next release, the append function now supports jQuery deferreds, you can gain this experimental functionality by simply downloading the code repository directly. Example:
helloDiv.appendTo('body').state.done(function() {
console.log('Everything is now rendered, have fun!');
});Now that you made your first helloWorld page with jsonHTML, we can begin with doing some tad bit more crazy, and mind bending stuff, but first, lets cover the basic HTML styling which is typically done naturally.
)
c (
o ) )
p (
y .---------------------.
r | _____ |___
i | .'`_,-._`'. __ \
g | / ( [ ] ) \ | ||
h | /.-""`( )`""-.\ | ||
t | ' <'```(.)```'> ' | _||
| <'```(.)```'> |/ _/
2 | <'``(.)``'> ./
0 | <``\_/``> |
1 | `'---'` |
6 \github.com/trillobite/
\_________________/ Keep it black, keep it free.
Permission is granted to copy, distribute and/or modify this document
under the terms of the GNU Free Documentation License, Version 1.3
or any later version published by the Free Software Foundation;
with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts.
A copy of the license is included in the section entitled "GNU
Free Documentation License".