ASCRI.PT

Ascript is minimlist-friendly Javascript UI library (hopefully beginner-friendly too). It doesn't require templates, dependencies, minifications, etc.

Usage

When you load <script src=//ascri.pt/a.js></script> into the webpage, global variable a is set. You can then instantiate element instances (which is so-called virtual dom) in various ways.

Generation

// creates div tag containing link
a.div('test div', a.a({href:'google.com'}), document.body);

// a.style() doesn't require targetElement as it is obvious
a.style(`body{background-color:black;}`);
a.div(
    a.img({
        src: 'https://f4.bcbits.com/img/a1119518482_16.jpg',
        position: 'center',
        scale: 0.7
    }),
    document.body
);
If you don't care old browsers, use ES Module m.js version. (Put <script> with type=module attribute and start with import a from //ascri.pt/m.js.)
<script type="module">
import a from //ascri.pt/m.js
var md = a.div({
    text : 'sample',
    content : function(){ return a.parse(this.param.text); }
}, document.body);
a.textarea({cols: 100, rows: 20, oninput: function(event){
    md.param.text = event.target.value;
    md.render();
}}, document.body);
</script>

Elements can be directly created through new a.Element() or a.create(), but in most cases, using predefined methods is easy. e.g. a.link(), a.textarea().

Three variations above would result in the same results.

Component Definition

Just call a.define(name, optionalParent, parameters) to define your custom components. It also returns the object just defined so you can export.
// Calling inside codes:
a.define('Test', {
    init : function(){
        this.super();
    }
}
// Wrap into independent file Widen.js and export:
export default a.define('Widen', a.textarea, {
});

Typical Properties / Methods

a.Element()

Created element has many methods to help handle events, animations, and page construction. Partly, especially in recent versions it contains jQuery-sh methods to shorten codes.

a()

Page Load : a.ready()
a.ready(<callback>) : callback will be executed after webpage load and other a.js components are ready. It takes callback or returns Promise which resolves after page load.
Element selector : a(<elementid>)
a(<elementID>) : returns Element specified by ID on webpage.

Source Repository

Currently preparing the server. For the moment, please email: ultravistor@716.es