Norse Power Metal

    haxcvjs

    1.4.6 • Public • Published

    haxcv Js

    what is Haxcv ?

    Haxcv is Javascript framework based on the idea of ease of work and flexibility in the implementation of projects with new features that enable you to write HTML with Javascript through a technique called jsH It also contains all the components you need as a developer.

    what should I know first ?

    You must have a background or knowledge about HTML, Javascript, CSS

    You must have a background or knowledge about JSON

    what it's new ?

    with jsH you can control with content by Javascript Expression another word you don't need to use DOM Selector to render Content jsH is working like server side language . anything in Javascript can be use in jsH

    why I need jsH ?

    jsH is useful when you try to create dynamic application and you can use it in Components , modules , router , single page Application beside if you need to use JS loop , if-else statement , etc... ok let's create a simple Component

    haxcv Contents

    Components

    jsH

    MVC

    SPA

    Route

    jsH :-

    <div fn-init >
      {%
        var name = prompt("what is your name ?");
       if(name == 'admin'){
         {{
          <h1>welcome  {{+name+}} to control panel </h1>
         }}
      }else{
        {{
          <h1>hello single user {{+name+}} </h1>
        }}
      }
      %}
    </div>

    Components :-

     
    <script type="text/jsh"  myComponent >
      <table>
      <tr>
      <td>Name</td>
      <td>Price</td>
      </tr>
        {%
        var items = [
        {name:"iphone" , price:"180.56 $"},
        {name:"car"    , price:"12,000.00 $"},
        {name:"Bitcoin" , price:"14,443 $"}
        ];
         for(var i =0; i < items.length; i++)
         {
          {{
           <tr>
      <td>{{+items[i].name+}}</td>
      <td>{{+items[i].price+}}</td>
      </tr>
          }} 
         }
        %}
        </table>
    </script> 

    Note :

    variable case :
    if you need to call variable from external component make sure that variable 
    is defined as global with window Object
    but the good news is any data can be accessed 
    from script whatever the location of the tag
    because jsH is working when the DOM load
    

    Module -> Controller

    <div fn-module="myController" >
       <div >Name : <span v-scope="myController.name"></span> </div>
       <div >Age  : <span v-scope="myController.age"></span>  </div>
       <div fn-click fn-exec="myController.alert(5 , 5)" >alert</div>
    </div>   
     
    <script type="text/javascript">
    haxcv.module("myController" , ($xes) => { 
       
        myController.name = "Manassa Joseph";
        myController.age  = 23;
        myController.alert = function(a , b){
           alert( a + b);
        }
     
    });
    </script> 

    Simple Directives

    <div fn-click fn-store="div" sel >hello from DIV</div>       
    <div fn-click fn-store="div" fn-copy="sel">use above div </div>       
    <div fn-click fn-store="div" fn-script="myScript">use script Component </div>       
    <div fn-click fn-store="div" fn-call="div">use div variable </div>       
    <div fn-click fn-store="div" fn-exec="myfun()">use function </div>       
    <script type="text/javascript" >
    function myfun(){ alert('hello');}
    </script> 
    <script type="text/jsh" myScript >
    {%
     {{
       <p>date is {{+new Date()+}}</p>
     }}
    %}
    </script>     
    <div v-render="div">div var will be show here</div>  

    Route

    <script>
    var app =  Router.View("fn-data");
        app.createSPA({
            v1:{
                when:"page1",
                title:"",
                url:"page1.php"
            },
            v2:{
                when:"about",
                title:"",
                url:"page2.php"
            },
            v3:{
                when:"contact",
                title:"",
                url:"page3.php"
            },
    });
    </script>   

    Route to Component you can route Component with jsH with getComponent key but you need to unset url key .

    <div fn-data ></div>  
    <a href="#login" >login</a> 
     
    <Component hidden loginComponent >
      <form>
         <input type="text" name="user" />
         <input type="password" name="pass" />
         <input type="submit"   name="login" value="login" />
      </form>
    </Component>
        
    <script>
    var app =  Router.View("fn-data");
        app.createSPA({    
            login:{
                when:"login",
                title:"",
                getComponent:"loginComponent"
            },
    });
    </script>     

    Docs

  • Intro
  • attributes
  • jsH
  • Components
  • Events
  • SPA
  • Modules
  • simple JSON
  • HTTP Request
  • Ajax
  • Form
  • Router
  • Install

    npm i haxcvjs

    Homepage

    haxcv.org

    DownloadsWeekly Downloads

    7

    Version

    1.4.6

    License

    MIT

    Unpacked Size

    115 kB

    Total Files

    3

    Last publish

    Collaborators

    • haxcv