Getting Started

Back to tutorials

Including the Script

To use the nano JavaScript framework on your website, download the latest version of the API from here and include it in the HEAD of the document: 

  <!DOCTYPE html>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <title>My Site</title>
      <script type="text/javascript" src="path/to/nano.js"></script>
    </head>
    <body>
		
      <!-- your content here -->
		
    </body>
  </html>

If you're also using plugins with the framework remember that they must be included after the core API.

Using the Framework

The nano() function is the base of the framework. It allows you to implement the core functionalities of the API depending on the type of data passed. The function receives a single argument, whcih can be any of the following data types:

To locate an element with the ID "example", just call the nano() function with the ID. Once the element is found it is wrapped in the API. For example, the following finds the element with the ID "example" and adds the class "test" to it: 

  nano('example').addClass('test');

If you already have a DOM node and want to wrap it with the API, just pass the node object instead of the ID. This will return the same DOM node wrapped with the API functionality. When a DOM node is wrapped with the API, the reference to the original element can be found in the node property.

The nano object is also the global namespace for the API. All the general purpose functions of the framework are accessed from this object, for example, the following finds all the elements with the specified class and hides each one of them: 

  nano.find('css', 'test').each(function() { this.hide(); });

To create new elements you need to call the nano() function as a constructor, using the new keyword. When called as a constructor, the function expects the argument to be an object containing the parameters to use. The following example creates a new DIV element with the content "This is an example", and attaches it to the BODY of the document: 

  var div = new nano({tag: 'div', parent: nano.body(), text: 'This is an example'});

Remember, you should only attach new nodes or modify the DOM once the document has fully loaded. To do this, always call functions which modify the DOM by passing a function as the argument which contains those calls. You can register as many functions to the onload of the document as you require. 

  nano(function() { nano.body().add({tag: 'span', text: 'I was added!'}); });

You can read more on building UI in the creating elements tutorial. You can also learn about traversing the DOM and more in the other tutorials available.

Hello World

Here is a basic example of nano in action. First, include the framework script in the HEAD of the document. Then, register an onload function, which will search for an element with the ID "example", adds a new SPAN element, then sets it's content to "Hello World", and finally, changes the font color to "blue". 

  <!DOCTYPE html>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <title>My Site</title>
      <script type="text/javascript" src="nano.js"></script>
      <script type="text/javascript">
        nano(function() {
            var span = nano('example').add({tag: 'span'});
            span.set('Hello World');
            span.style({color: 'blue'});
        });
      </script>
    </head>
    <body>
      <div id="example"></div>
    </body>
  </html>

You can try the nano JavaScript framework for yourself in the sandbox and view the results live. You can also find full documentation for the API here, and a list of official plugins here.