khamsat khamsat khamsat

Intro

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

Example :-


<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>    

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


<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>    
    

<div   myItems ></div>
<button   fn-click="myItems" fn-copy="myComponent" ></button>
    

Try it :)

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


<div fn-init>
  {%
     var Founder = "Manassa Joseph";
  %}
</div>

<div fn-init>
  {%
     {{
      <h1>{{+Founder+}}</h1>
     }}
  %}
</div>    
    

result :

Founder is not defined on line 2

jsH uses :

jsH is core of framework any part of framework related by jsH .
router , Ajax , components , module etc...
so you better have a knowledge about Javascript

khamsat khamsat khamsat khamsat