JavaScript API Part-3

Hi All,

This week I am coming with three interesting topics that are very useful to you all in your projects which improves non-functional requirements..

Pagination

       In presenting a report as the user action it may get very long data that which is shown in too long tables. This table will makes you to scroll whole web page which not a intuitive to look and effects the beauty of the web page. for this same problem i have suggested a trick in previous post i.e., Simply scrolling table that makes  to scroll the table but not page. actually the solution in pagination. i.e., dividing the all the result into some reasonable parts and displaying a limited part and for renaming we have to provide navigation buttons or links. Implementation of this Pagination is tough if it is server side pagination.There are many disadvantages of a server-side pagination like this:

1. You have to use the HTTP Session (and remember to clean up when it's nomore needed).
2. You have to reload the page on every page switch.
3. You cannot go forward and backward to check previous data without loosing the view on current resultset.
4. You have to write code for the server side actions handling all the page-switch work.

         Here is a simple and Perfect solution which avoids reloading the page on every page switch, and also avoid using HTTP Session when not strictly necessary. i.e., writing a JavaScript paginator object that handles the job of paginating any html table rendering also a simple pagination bar.

Example

S.No	Name	City	Zipcode
1	NOKIA Theatre L.A. LIVE	Los Angeles	85521
2	Los Angeles Theatre	Los Angeles	74101
3	Regal Cinemas LA Live Stadium 14	Los Angeles	74125
4	Million Dollar Theater	Los Angeles	93258
5	Music Center	Los Angeles	12589
6	REDCAT	Los Angeles	74125
7	The Wiltern	Los Angeles	98523
8	Downtown Independent	Los Angeles	78965
9	mad max	Los Angeles	23456
10	Mad Max2	Los Angeles	23456
11	San Diego Civic Theatre	San Diego	98989
12	San Diego Theatre	San Diego	65656
13	The Old Globe	San Diego	87878
14	Starlight Theatre	San Diego	23456
15	Spreckels Theatre	San Diego	64654
16	Pacific Theaters -Gaslamp 15	San Diego	65466
17	AMC Theatres Fashion Valley 18	San Diego	44984
18	Hillcrest Cinema	San Diego	63546
19	Reuben H. Fleet Science Center	San Diego	84798
20	viswas	Augusta	22123
21	WIPRO Theater	Augusta	56983
22	balas	Columbus	23234
23	The 5th Avenue Theatre	Seattle	65464
24	AMC Theatres	Seattle	65432
25	A Contemporary Theatre	Seattle	65465
26	Moore Theatre	Seattle	65465
27	Intiman Theatre	Seattle	65465
28	Village Centre Cinemas	Spokane	32133
29	Spokane Civic Theatre	Spokane	64640
30	Garland Theater	Spokane	68465
31	INB Performing Arts Center	Spokane	69465
32	Bing Crosby Theater	Spokane	65465
33	River Park Square	Spokane	65465
34	Magic Lantern Theatre	Spokane	65488
35	Grand Cinema	Tacoma	32132
36	Tacoma Musical Playhouse	Tacoma	32162
37	Tacoma Little Theatre	Tacoma	65467
38	Broadway Center for the Performing Arts	Tacoma	65444
39	Vogue Theatre	Vancouver	65466
40	Centre In Vancouver For Performing Arts	Vancouver	65456
41	Commodore Ballroom	Vancouver	64864
42	Rio Theatre	Vancouver	63515
43	Lincoln Square Cinemas	Bellevue	65465
44	Regal Cinemas Crossroads Stadium	Bellevue	65455
45	AMC Loews Theatres	Bellevue	65452
46	Lincoln Square	Bellevue	64987
47	Bellevue Galleria Stadium 11	Bellevue	44555
48	The Theatre at Meydenbauer Center	Bellevue	65525
49	Bellevue Civic Theatre	Bellevue	41652
50	Tateuchi Center	Bellevue	46984
51	Bellevue Youth Theater	Bellevue	46546
52	AMC Theatres - Kent Station 14	Kent	66656
53	Valley 6 Drive In	Kent	65656
54	Starplex Gateway Movies 8	Kent	98989
55	Regal Cinemas Parkway Plaza Stadium 12	Kent	32323
56	Regal Cinemas Auburn Stadium 17	Kent	56565
57	Auburn Ave Theater	Kent	12589
58	Regal Cinemas East Valley Stadium 13	Kent	15963
59	Broadway Center for the Performing Arts	Kent	55346
60	Galaxy 8	Kent	22145
61	Village Theatre Everett	Everett	55589
62	Everett Theatre	Everett	66669
63	Village Theatre	Everett	55666
64	Regal Movie Theaters	Everett	66555
65	Everett Civic Auditorium	Everett	69998
66	Movie Bank	Everett	63666
67	Thumbnail Theater	Everett	58589
68	Regal Cinemas Marysville 14	Everett	25669
69	AMC Loews Theatres - Alderwood Mall 16	Everett	99585
70	Clyde Theatre	Everett	66666

Source Code


<script type="text/javascript" src="DOMhelp.js"></script>
<script type="text/javascript" src="pagination.js"></script>

<link href="pagination.css" rel="stylesheet"></link>


<table class="pagination">
.
.
.
<table>

Download

1. http://www.beginningjavascript.com/DOMhelp.js
2. http://www.beginningjavascript.com/Chapter7/pagination.js
3. http://www.beginningjavascript.com/Chapter7/pagination.css

Syntax Highlighter 

         I an some applications like Online Exam, Online Quiz, and discussion forums you need to show some source code. but over html-css presention can not highlight syntax or keywords of the language to present..

but here i find this Syntax Highlighter  that highlights the syntax of the source code we are presenting. simply liking the js file to our web page will view the source code.. with syntax. SyntaxHighlighter is a fully functional self-contained code syntax highlighter developed in JavaScript.

Hello SyntaxHighlighter

What is the result?

class Money { 
private String country = "Canada"; 
public String getC() { return country; } 
} 
class Yen extends Money { 
public String getC() { return super.country; } 
} 
public class Euro extends Money { 
public String getC(int x) { return super.getC(); }
public static void main(String[] args) { 
System.out.print(new Yen().getC() + " " + new Euro().getC()); 
} 
}

Source Code

 
 
 
 
 
 

class Money { 
private String country = "Canada"; 
public String getC() { return country; } 
} 
class Yen extends Money { 
public String getC() { return super.country; } 
} 
public class Euro extends Money { 
public String getC(int x) { return super.getC(); }
public static void main(String[] args) { 
System.out.print(new Yen().getC() + " " + new Euro().getC()); 
} 
}

Downloads

1. http://alexgorbatchev.com/SyntaxHighlighter/download/

Graph Representation

        Before going to topic let me explain the motivation behind it.. My B.Tech final year project in Online Voting System in which I have to show the results of the polling in a graph or chart representation either in histogram or a pie-chart.. In those days i dont find any API for implementation. then I have implements using a <HR> tag using width, size and color . Solution is solved there but not a perfect solution. In earlier days I found a site http://www.jscharts.com which provides a prefect solution and sleek representational of the report.. As you see the site I think need not to explain various types of graphs. So, let us disscussion about the implementation...

Example

Histogram Graph (BAR)

Loading graph...

Line Graph

Loading graph...

Pie-Charts

Loading graph...

Source Code

Loading graph...

Download

1. http://www.jscharts.com/script/jscharts.js

Refernces

1. http://alexgorbatchev.com/SyntaxHighlighter/
2. http://www.jscharts.com/
3. http://www.beginningjavascript.com/

Ok guys..

This is up to this week...

Let us meet next week with another few interesting topics..


My Best Wishes.

regards,
M.Agni
Assistant Professor
ACE Team member
Aditya Edu. Group.
Ph: 9491520200
Email: agni2020@gmail.com
          agnim@aec.edu.in

JavaScript API part2

Hi All,


Welcome back.
This week I am coming with three interesting, super, and so on...


Virtual Keyboard

        Hackers, whose primary focus, be it for malicious or beneficial reasons, are weaknesses in computer security. As the techniques are increasing they are simply  spreading the virus and worms to attack the security issues of the system. I think, I don't need to explain the job of a Hacker. I want to discuss a security issues by an Hacker. As we are developing web applications in which some of them are Banking, Mailing, Voting or any other else where password have greater importance. 

        There exits some softwares like Key Logger, System Tracker, keystroke detector which will run in background of the system and maintains a separate log which contains the every key that we type on key board.Usually we can see in some net cafes. It leads to Password Theft. Our System must able to check these applications for this we can use a JavaScript API called Virtual KeyBoard referred from http://www.greywyvern.com/code/javascript/keyboard .

         This API will provide a keyboard as we see in Banking Sites or Onscreen Keyboard. It is just a simple Javascript implementation, Easy Plugin... 


For Example


                 Username:
                 Password:

Source Code:
        We Can Download for following links

1. JavaScript Source code: http://www.greywyvern.com/code/javascript/keyboard.js
2. CSS Source code: http://www.greywyvern.com/code/javascript/keyboard.css
3. Icon: http://www.greywyvern.com/code/javascript/keyboard.png

Configuration:
          Place the following in <head> Tag



<script type="text/javascript" src="keyboard.js"></script>
<link rel="stylesheet" type="text/css" href="keyboard.css">


         Define the input field as..
<input type="text" value="" class="keyboardInput">        





Dragable and Sortable Tables

          In our application we are having some reports like Staff Salary Details, Student Attendance Details, Marks, Revenue and so on.. In these kind of report we need to have compare all the records with other ones. some of them to sort according to some criteria in a single table i.e., In one instance of time we need highest value a top and in another instance we need least value a top.. So the table have to sorted dynamically on user actions..

         For this I found a API at http://www.danvk.org. This will provides draggable and Sortable tables..

Here we can re-arrange the tables columns according to our requirement and can be sorted according to specified column.

For Examples
Click on the Column Head to sort the table according to that column

Student Marks Details

S.No	Name	Subject1	Subject2	Subject3
1	Raja	34	55656	445
2	Kiran	76	3434	45
3	Prasad	89	45656	323
4	Prem	12	5665	676
5	Ashok	87	2343	7889
6	Mohan	45	9898	23
7	Shyam	89	76878	78

Source Code:


<script src="sorttable.js"></script>
<script src="dragtable.js"></script>


<table class="draggable sortable">

...

</table>

Download:

1. http://www.kryogenix.org/code/browser/sorttable/sorttable.js
2. http://www.danvk.org/dragtable/dragtable.js

Captcha

           A CAPTCHA is a type of challenge-response test used in computing as an attempt to ensure that the response is generated by a person. The process usually involves one computer (a server) asking a user to complete a simple test which the computer is able to generate and grade. Because other computers are assumed to be unable to solve the CAPTCHA, any user entering a correct solution is presumed to be human. Thus, it is sometimes described as a reverse Turing test, because it is administered by a machine and targeted at a human, in contrast to the standard Turing test that is typically administered by a human and targeted at a machine. A common type of CAPTCHA requires the user to type letters or digits from a distorted image that appears on the screen.

There many no.of application implemented in different languages.Here, I am presenting you a simple Captcha Generator using javascript//

For Example:

Contact Us

Contact form

Name

Email
Phone
Write code below >

Message

Source Code:
If the Example doesnt works please try with below source code...

<html>
<head>
<script type="text/javascript">
function generate()
{
var a = Math.ceil(Math.random() * 9)+ '';
var b = Math.ceil(Math.random() * 9)+ '';
var c = Math.ceil(Math.random() * 9)+ '';
var d = Math.ceil(Math.random() * 9)+ '';
var e = Math.ceil(Math.random() * 9)+ '';
var code = a + b + c + d + e;
document.getElementById("txtCaptcha").value = code;
document.getElementById("txtCaptchaDiv").innerHTML = code;
}
function checkform(theform){
var why = "";
if(theform.txtInput.value == ""){
why += "- Security code should not be empty.\n";
}
if(theform.txtInput.value != ""){
if(ValidCaptcha(theform.txtInput.value) == false){
why += "- Security code did not match.\n";
}
}
if(why != ""){
alert(why);
return false;
}
}
// Validate the Entered input aganist the generated security code function
function ValidCaptcha(){
var str1 = removeSpaces(document.getElementById('txtCaptcha').value);
var str2 = removeSpaces(document.getElementById('txtInput').value);
if (str1 == str2){
return true;
}else{
return false;
}
}
// Remove the spaces from the entered and generated code
function removeSpaces(string){
return string.split(' ').join('');
}
</script>
</head>
<body onload="generate()">
<form id="form3" action="#" method="post" onsubmit="return checkform(this);">
<h3><span>Contact Us</span></h3>
<fieldset>
<legend>Contact form</legend>
<p class="first">
<label for="name">Name</label>
<input type="text" name="name" id="name" size="30" />
</p>
<p>
<label for="email">Email</label>
<input type="text" name="email" id="email" size="30" />
</p>
<p>
<label for="phone">Phone</label>
<input type="text" name="phone" id="phone" size="30" />
</p>
<p>
<label for="code">Write code below > <span id="txtCaptchaDiv" style="color:#F00"></span><!-- this is where the script will place the generated code -->
<input type="hidden" id="txtCaptcha" /></label><!-- this is where the script will place a copy of the code for validation: this is a hidden field -->
<input type="text" name="txtInput" id="txtInput" size="30" />
</p>
</fieldset>
<fieldset class="last">
<p>
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
</p>
</fieldset>
<p class="submit">
<button type="submit">Send</button>
</p>
</form>
</body>
</html>

Ok Guys,

Let us meet next week...


regards,
M.Agni
Assistant Professor,

ACE Team member
Aditya Edu. Group.
Ph: 9491520200
Email: agni2020@gmail.com
          agnim@aec.edu.in