Category Archives: Java Script

Java, java 8, Java Script

Java 8 : Nashorn JavaScript Engine

Leave a comment

Java 8 introduced a new Nashorn Javascript Engine to replace existing Rhino. Nashorn Javascript engine provides 2 to 10 times better performance and it directly compiles the code in memory and passes the bytecode to JVM. Nashorn JavaScript Engine enhanced version of javax.script.ScriptEngine and follows the same set of rules, permitting for Java and JavaScript interoperability.

Points to remember

  • Use jjs command to run Javascript through Nashhorn Engine.
  • The class name for the Nashorn Javascript engine is jdk.nashorn.api.scripting.NashornScriptEngine.

Exmaple: Nashorn JavaScript Engine

import javax.script.ScriptEngine;
import javax.script.ScriptEngineManager;
import javax.script.ScriptException;

public class NashornEngineTest {

	public static void main(String[] args) {
		try {
			ScriptEngineManager manager = new ScriptEngineManager();
			ScriptEngine engine = manager.getEngineByName("JavaScript");

			System.out.println(engine.getClass().getName());
			System.out.println("Result:"
					+ engine.eval("function increment() { return 1; }; increment() + 1;"));
		} catch (ScriptException ex) {
			ex.printStackTrace();
		}

	}

}

Output


jdk.nashorn.api.scripting.NashornScriptEngine
Result:2.0

References

Advertisements
HTML, Java, Java Script, JQuery, JSP, Mask

Mask Aadhar Number On Page

Leave a comment

What is Aadhaar?

Aadhaar is a verifiable 12-digit identification number issued by UIDAI (“Authority”) to the resident of India for free of cost after satisfying the verification process laid down by the Authority.
Any individual, irrespective of age and gender, who is a resident of India, may voluntarily enrol to obtain Aadhaar number based on demographic and biometric information.

What is Masked Aadhaar?

Aadhar number is very senstive information by which we can track an individual complete information thats why UIDAI provide both the options for down load Aadhar card.

1) Regular Aadhar Card : All digits visible
2) Masked Aadhar Card : Replacing of first 8 digits of Aadhaar number with some characters like “xxxx-xxxx” while only last 4 digits of the Aadhaar Number are visible.

How to Mask Aadhaar in your web page?

Making aadhar number Replacing of first 8 digits of Aadhaar number with some characters like “xxxx-xxxx” while only last 4 digits of the Aadhaar Number are visible. In web page
aadhar number text box when user click/focus or hover on text box will display regular aadahr number otherwise will display as masked.

See Also :

Mask Aadhar Number Example

how to mask aadhar number on web page masked aadhar number on page

HTML Changes

Create a text box on your page with below html.

Aadhar Number:

Java Script/JQuery Changes

Copy below java script in your head section of page.


var originalVal;
$(document).ready(function()
{
       if($('#txtAadhar').val().length>0)
		 {
		 if($('#txtAadhar').val().indexOf("X")==-1)
			{
			  originalVal=$('#txtAadhar').val();
			}
		    maskAadhar(this);
		 }

	    $('#txtAadhar').blur( function(e)
		{
	    	if($('#txtAadhar').val().indexOf("X")==-1)
	    	{
	    	  originalVal=$('#txtAadhar').val();
	    	}
	    	 maskAadhar(this);
		});

		$('#txtAadhar').focus( function(e)
		{
			$(this).val(originalVal);
		});
});
function maskAadhar(regularAadhar)
{
	 var varlen =$(regularAadhar).val().length;
	 if(varlen > 12)
	 {
	 $("#error").text('Not Valid Aadhar Number.');
	 }
	 else
	 {
	 $("#error").text('');
	 var str = $(regularAadhar).val();

	 var mask = varlen > 0 ? varlen > 1 ? varlen > 2 ? varlen > 3 ? varlen > 4 ? varlen > 5  ? varlen > 6 ? varlen > 7 ?
	        'XXXX XXXX'
          : 'XXXX XXX'
          : 'XXXX XX'
          : 'XXXX X'
          : 'XXXX'
		  : 'XXX'
		  : 'XX'
		  : 'X'
          : '';
          if (varlen < 9) {
          $(regularAadhar).val(mask);
          } else {
          $(regularAadhar).val(mask +' '+ $(regularAadhar).val().substring(8));
          }
   }
}

Download Source code

To download the source code of this example, click on below given download link.

Mask Aadhar Card

Drop me your questions in comments section.

References

https://www.uidai.gov.in/my-aadhaar/about-your-aadhaar.html
https://www.uidai.gov.in/283-faqs/aadhaar-online-services/e-aadhaar/1887-what-is-masked-aadhaar.html

CSS, HTML, Java Script, JQuery, Sort, sorting

How to sort HTML Table Columns in ascending and descending by JQuery and JAVA Script and show sorting image

2 Comments

Below example is for sorting HTML table on ascending and descending order after click on header name. Based on sorting will display ascending and descending images.

Source Code

Copy your ascending and descending images on images folder and change path according to you project configuration.


Sort Table

var order;
function sortTable(col)
{
	changeSortHeaderImage(col);
	//get list of all rows of table content except header
	var rows=$('#employeeTbl tbody tr').get();

	rows.sort(function(a,b){
	var A= $(a).children('td').eq(col).text().toUpperCase();
	var B= $(b).children('td').eq(col).text().toUpperCase();
	//sort in ascending order
	if(order=="asc")
		{
	return (A <b> B) ? 1 : 0);
		}
	//sort in descnding order
	if(order=="desc")
		{
	return (B <a> A) ? 1 : 0);
		}
	});
	//iterate each row of table for changing order
	$.each(rows, function(index, row) {
	    $('#employeeTbl').children('tbody').append(row);
	  });
}
//Change image for column sorting
function changeSortHeaderImage(col)
{	

	var imgArr= document.getElementById("employeeTbl").getElementsByTagName('input');
    var altAtr;
    for (i = 0; i &lt; imgArr.length; i++) {

            altAtr=imgArr[i].getAttribute(&quot;alt&quot;);

              if(i==col &amp;&amp; &quot;asc&quot; == altAtr)
                 {
                    imgArr[i].setAttribute(&quot;src&quot;, &quot;images/desc.png&quot;);
                    imgArr[i].setAttribute(&quot;alt&quot;, &quot;desc&quot;);
                    order=&quot;desc&quot;;
                  }
           else if (i==col &amp;&amp; (&quot;nosort&quot; == altAtr ||  &quot;desc&quot; == altAtr))
                 {
                 imgArr[i].setAttribute(&quot;src&quot;, &quot;images/asc.png&quot;);
                 imgArr[i].setAttribute(&quot;alt&quot;, &quot;asc&quot;);
                 order=&quot;asc&quot;;
                 }
           else
                 {
                 imgArr[i].setAttribute(&quot;src&quot;, &quot;images/nosort.png&quot;);
                 imgArr[i].setAttribute(&quot;alt&quot;, &quot;nosort&quot;);
                 }
           }

}</a></b></pre>
&nbsp;
<table id="employeeTbl">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Designation</th>
<th>Salary</th>
</tr>
<tr>
<td>1</td>
<td>Saurabh Gupta</td>
<td>34</td>
<td>Sr Lead</td>
<td>50000</td>
</tr>
<tr>
<td>2</td>
<td>Gaurav Gupta</td>
<td>30</td>
<td>Software Engineer</td>
<td>40000</td>
</tr>
<tr>
<td>3</td>
<td>Ranjith Kumar</td>
<td>45</td>
<td>Manager</td>
<td>60000</td>
</tr>
<tr>
<td>4</td>
<td>Sakshi Mehta</td>
<td>25</td>
<td>Trainee</td>
<td>25000</td>
</tr>
<tr>
<td>5</td>
<td>Arun Roi</td>
<td>35</td>
<td>Tester</td>
<td>28000</td>
</tr>
<tr>
<td>6</td>
<td>Nitin Verma</td>
<td>40</td>
<td>SEO</td>
<td>55000</td>
</tr>
</thead>
</table>
<pre><b><a>

Initial Table Without Soring

HTML Table Sort column by Jquery Intial
Initial Employee Detail Table Without Sorting

Sort in Ascending Order for Column Designation

HTML Table Sort columns by Jquery Ascending
Employee Table  with Ascending Order soring for column  Designation

Sort in Descending Order for column Designation

HTML Table Sort columns by Jquery descending
Employee Table  with Desscending Order soring for column  Designation

 Summary

In above example. I try to cover below topics.

  • How to create HTML Table with column header and rows column content.
  • Apply JQuery and Java Script for sorting ascending and descending order on click each columns.
  • On click Change columns header sorting images by Java Script.
  • How to apply CSS on table column headers and background image.