Inheritance is the Concept using which you can inherit properties and methods from one Class to another Class. The Class from which we will inherit properties or methods that is Called parent Class. Which Class inherit from Parent Class that is Called Child Class.

This relationship is Similar to Father and Son relationship. You must noticed in major Cases kid inherits properties depending upon his or her parents.

In below I am showing an example of Person and Teacher Classes. My Person Class is having First Name, Last Name, Age and Gender. As teacher as a person my teacher class inherits all the properties of my person class. Additionally I am adding Salary as a new property.

/*Constructor Class*/
function person(firstname, lastname, age, gender) {
this.name = { firstname, lastname };
this.age = age;
this.gender = gender;
};

Normally what we do, The time we Create the Class we design the properties and methods. Think once if we required some additional methods or properties to an existing Class without disturbing the Class, in this scenario prototyping is useful. Look at the below example here I am adding a greeting method to my person Class using Prototyping.

/*Prototyping Person Class*/
person.prototype.greeting = function() {
alert('Hi! I\'m ' + this.name.firstname + '.');
};

Here I am Creating an instance for my Person Class and Calling the method greeting.

var personInstance = new person("Bikash", "Dash", 27, "M", 20000);
personInstance.greeting();

In the below Code I am Creating the teacher Class by inheriting all the properties from Person Class. As the number of arguments known to me, here I used Call to bind person class properties to teacher class.

/*Teacher Class inherits from Person Class*/
function Teacher(firstname, lastname, age, gender, salary) {
person.call(this, firstname, lastname, age, gender);
this.salary = salary;
}

/*To assign Person prototype we have to Create Prototype for Teacher*/
Teacher.prototype = Object.create(person.prototype);
var newTeacher = new Teacher("Baby", "Roy", 26, "F", 30000);
alert(newTeacher.name["firstname"]);
alert(newTeacher.gender);

/*After Teacher.Prototype only this will work*/
newTeacher.greeting();

Here if we alert(Teacher.prototype.constructor); it will show Person Class Constructor. To display Teacher Class Constructor we have to execute the following line of Code.

Teacher.prototype.constructor = Teacher;

The post Example of Inheritance using Class, Prototype or Call Javascript methods appeared first on OneStop Shop.

During we write an address you must notice Pin code is there. According to postal Pin code make easy to reach the address. Are you in your Contact us page? Looking something like which can validate a pin code entered by the user. In the below function I had implemented Zip code validation using JavaScript. You can implement the same logic in any language.

Postal codes, also known as ZIP codes, vary widely across countries in terms of format, length, and structure. Validating these codes is crucial for e-commerce platforms, registration forms, and address verification systems to ensure data accuracy. JavaScript provides a flexible way to implement international ZIP code validation by leveraging regular expressions (regex) and country-specific rules.

Understanding ZIP Code Formats

Different countries follow distinct patterns for their postal codes. For example:

United States: 5 digits (e.g., 90210) or 5+4 format (e.g., 90210-1234).
Canada: Alphanumeric with the pattern A1A 1A1.
United Kingdom: Complex formats like AA1 1AA or A1A 1AA.
Germany: 5 digits (e.g., 10115).
Australia: 4 digits (e.g., 2000).

The Control here I used to take input from user is txt_zip. In-case you copy the below code. Update this with your Control Name. The logic I implemented here is so Simple. Using indexOf I am checking all the characters in txt_zip value.

Zip Code Validation Function

function zipcode_org(source,arguments)
{
var ValidChars = "0123456789";
var Char;
var sText=document.getElementById("txt_zip").value;
for (i = 0; i < sText.length; i++)
{
Char = sText.charAt(i);
if (ValidChars.indexOf(Char) == -1)
{
arguments.IsValid = false;
return;
}
}
return;
}

Handling Edge Cases

Case Sensitivity: Some countries (e.g., Canada) use letters in their postal codes. The regex should account for both uppercase and lowercase inputs.

Whitespace and Hyphens: Users may enter spaces or hyphens inconsistently. The regex should normalize input by removing or allowing optional separators.

Unsupported Countries: If a country isn’t in the lookup table, the function should return an appropriate response.

Conclusion

A well-designed ZIP code validation function in JavaScript enhances data integrity by ensuring users enter correctly formatted postal codes based on their country. By combining regex patterns with dynamic country checks, developers can create a flexible solution that accommodates global address requirements. Proper error handling and user feedback further improve the experience, reducing form submission errors and enhancing usability.

The post JavaScript Function for international Zip Code Validation appeared first on OneStop Shop.

During a visitor visit a web page, if he/she like the page he/she do bookmarking for future reference. In such case as a programmer you require a bookmarking script to implement in your app. Look at the below demo app, here I implemented a JavaScript bookmark function. This function is cross browser compatible. By simply copy paste the below code you can easily add bookmarking functionality to your HTML page.

The logic I implemented here is very simple. By using JavaScript indexOf() method I am checking which kind of browser client is using. Depending upon the browser I am displaying a message about the shortcut key to bookmark in that browser.

JavaScript Bookmark Function

function bookmarkPage(url, title) {
if (!url) { url = window.location }
if (!title) { title = document.title }
var browser = navigator.userAgent.toLowerCase();
if (window.sidebar) { // for Mozilla, Firefox & Netscape
window.sidebar.addPanel(title, url, "");
} else if (window.external) { // IE or chrome
if (browser.indexOf('chrome') == -1) { // ie
window.external.AddFavorite(url, title);
} else { // for Google Chrome
alert('Please Press CTRL+D (or Command+D for macs) to bookmark this page');
}
}
else if (window.opera && window.print) { // Opera - automatically adds to sidebar if rel=sidebar in the tag
return true;
}
else if (browser.indexOf('konqueror') != -1) { // for Konqueror
alert('Please press CTRL+B to bookmark this page.');
}
else if (browser.indexOf('webkit') != -1) { // for Safari
alert('Please press CTRL+B (or Command+D for macs) to bookmark this page.');
} else {
alert('Your browser cannot add bookmarks using this link. Please add this link manually.')
}
}

The post Cross Browser Compatible JavaScript Bookmark Function appeared first on OneStop Shop.

JavaScript is one of the most popular Client Scripting language. To make your journey easier in this session we are sharing some functions related to JavaScript Date Functions. Whether you want to add days or subtract days from a specific date or difference between two dates these functions are very useful.

Here I have 5 functions getDateInMilliseconds, getDifferenceInDays, addDays, subtractDays & compareDate. getDateInMilliseconds function returns date in milliseconds & this function is used in addDays & subtractDays functions. getDifferenceInDays function accepts 2 parameters as date 1 & date 2. It returns the difference in days. addDays & subtractDays functions accepts 2 parameters each date & days. The last function compareDate returns true if date 2 is after date 1 else returns false.

Function to get Date In Milliseconds

/* Returns Date object expressed as number of milliseconds since January 1, 1970.  This is the internal date format used by JavaScript. */
function getDateInMilliseconds(d) {

var str = new String(d);
var length = str.length;

var month = 0;
var day = 0;
var year = 0;
var dateObj;
var ms = 0;

if (length == 8) {

month = str.substr(0,1);
day = str.substr(2,1);
year = str.substr(4,4);
}

else if (length == 9) {

var regExp = new RegExp("\\d{2}/\\d{1}/\\d{4}");
var expResult = regExp.test(str);
if (expResult) {

month = str.substr(0,2);
day = str.substr(3,1);
year = str.substr(5,4);
} else {

month = str.substr(0,1);
day = str.substr(2,2);
year = str.substr(5,4);
}
}

else if (length == 10) {

month = str.substr(0,2);
day = str.substr(3,2);
year = str.substr(6,4);
}

dateObj = new Date(year, (month - 1), day);
ms = dateObj.getTime();
return ms;
}

Function to get date difference in Days

/* Returns the number of days between the two Date arguments.  Assumes the first argument, d1, is the earlier date. */
function getDifferenceInDays(d1,d2) {

var d1ms = getDateInMilliseconds(d1);
var d2ms = getDateInMilliseconds(d2);
var days = (d1ms - d2ms) / (DAY_IN_MILLISECONDS);

return days;
}

JavaScript Date Function to add Days

/* Returns a Date string equivalent to the first parameter (date) plus the number of days specified by the second parameter. */
function addDays(date,days) {

var dateInMs = getDateInMilliseconds(date);
var daysInMs = days * DAY_IN_MILLISECONDS;

var newDateInMs = dateInMs + daysInMs;
var newDate = new Date();
newDate.setTime(newDateInMs);

var year = new String(newDate.getYear());
if (year.length == 2) {
year = "19" + yearStr;
}

var dateString = (newDate.getMonth() + 1) + "/" + newDate.getDate() + "/" + year;
return dateString;
}

Function to Subtract Days

function subtractDays(date,days) {

var dateInMs = getDateInMilliseconds(date);
var daysInMs = days * DAY_IN_MILLISECONDS;

var newDateInMs = dateInMs - daysInMs;
var newDate = new Date();
newDate.setTime(newDateInMs);

var year = new String(newDate.getYear());

if (year.length == 2) {
year = "19" + year;
}
// Assemble Date as a string resembling mm/dd/yyyy format
var dateString = (newDate.getMonth() + 1) + "/" + newDate.getDate() + "/" + year;

return dateString;
}

JavaScript Date Function to Compare Dates

/* Returns true if first date parameter, d1, is earlier than second date parameter, d2.  Otherwise, returns false. */
function compareDate(d1,d2) {

date1 = new Date(d1.value);
date2 = new Date(d2.value);

if (date1 > date2)
{
return false;
}
return true;
}

The post JavaScript Date Functions to Add, Subtract & Compare in Days appeared first on OneStop Shop.

This function generally we required while integrating payment system to the website. There are various currencies are available. The below isCurrency function accepts one argument as string. If the string is in form of Currency it returns true or else the function returns false.

JavaScript Format Currency

function isCurrency(arg) {

// instantiate argument as a String (for String operations)
var str = new String(arg);

// control-related
var i;
var ch;
var len = str.length;
var offset = 0;
var position = 0;

// counters
var decimals = 0;
var commas = 0;
var dollarsigns = 0;

if (str.length >= 1) {
// Increment counts for commas, decimals, and dollar signs
for (i = 0; i < len; i++) {
ch = str.charAt(i);
if (!isNaN(ch)) {
continue;
} else if (ch == ".") {
decimals++;
continue;
} else if (ch == ",") {
commas++;
return false;
} else if (ch == "$") {
dollarsigns++;
return false;
} else {
return false;
}
}
// If more than 1 dollar sign, invalid
if (dollarsigns > 1) {
return false;
} else if (dollarsigns == 1) {
if (!(str.charAt(0) == "$")) {
return false;
}
}
// If more than 1 decimal, invalid
if (decimals > 1) {
return false;
// If exactly 1 decimal and in correct position, valid; otherwise, invalid
} else if (decimals == 1) {
ch = str.charAt(len - 3);
if (!(ch == ".")) {
return false;
}
}

if (commas >= 1) {

if (str.charAt(0) == ",") {
return false;
}
if (decimals == 1) {
if ((str.charAt(len - 1) == ",") || (str.charAt(len - 2) == ",")) {
return false;
}
offset = 3;
}
for (i = ((len - offset) - 1); i >= 0; i--) {
ch = str.charAt(i);

if (position != 3) {
if (ch == ",") {
return false;
}
position++;
} else {
if (!(ch == ",")) {
return false;
}
position = 0;
}
}
}
}
// Optimistically assume program flow gets this far . . . !
return true;
}

The post JavaScript Format Currency isCurrency Validator Function appeared first on OneStop Shop.

JavaScript is one of the most popular Client-side programming language. It is designed for creating network-centric applications. The concept behind Client side script is to reduce load from the Server. Many Operations is more healthy to operate in Client side. This activity helps to improve performance & speed.

Are you looking for a JavaScript function using which you can Convert date difference in Milliseconds. In the below Function I am passing the date upto which you want to calculate the difference in milliseconds. Here date difference I am calculating from January 1, 1970.

Convert date difference in Milliseconds

function getDateInMilliseconds(d) {
var str = new String(d);
var length = str.length;
var month = 0;
var day = 0;
var year = 0;
var dateObj;
var ms = 0;

if (length == 8) {
month = str.substr(0,1);
day = str.substr(2,1);
year = str.substr(4,4);
}
else if (length == 9) {
var regExp = new RegExp("\\d{2}/\\d{1}/\\d{4}");
var expResult = regExp.test(str);
if (expResult) {
month = str.substr(0,2);
day = str.substr(3,1);
year = str.substr(5,4);
} else {
month = str.substr(0,1);
day = str.substr(2,2);
year = str.substr(5,4);
}
}
else if (length == 10) {
month = str.substr(0,2);
day = str.substr(3,2);
year = str.substr(6,4);
}

dateObj = new Date(year, (month - 1), day);
ms = dateObj.getTime();
return ms;
}

The post JavaScript function to Convert date difference in Milliseconds appeared first on OneStop Shop.

In an Employee Management System dashboard let’s assume we are fetching Employee Date of Joining from Database. While displaying this date in top left corner what I want is we required to validate the date for a specific format. In the below function I am checking 4 date formats. These are M/D/YYYY, MM/D/YYYY, M/DD/YYYY & MM/DD/YYYY.

JavaScript isDate function to Validate Date

Working with dates and times is a common requirement in web development, whether for displaying timestamps, scheduling events, or calculating durations. JavaScript provides a built-in `Date` object and a variety of methods to handle date and time operations efficiently. This article explores the core functionalities of JavaScript Date functions, their usage, and practical examples to help developers work with dates effectively.

/* 24 hrs * 60 mins * 60 seconds * 1000 ms */
var DAY_IN_MILLISECONDS = 86400000;

function isDate(d) {
var val = new String(d.value);
var char, len, i, sub, result, remainder;
var flag = 0;

if ((val.length >= 8) && (val.length <= 10)) {
len = val.length;

sub = new String(val.substr((len - 4), 4));

if (!(isNumeric(sub))) return false;

char = val.charAt(len - 5);
if (char != '/') return false;

char = val.charAt(len - 6);
if (!(isNumeric(char))) return false;

char = val.charAt(len - 7);
if (!(isNumeric(char))) {
if (char == '/') {
flag = 1;
} else return false;
}

char = val.charAt(len - 8);
if (!(isNumeric(char))) {
if (char != '/') return false;
if ((char == '/') & (flag == 1)) return false;
}

if (len > 8) {
remainder = len - 8;
sub = val.substr(0, remainder);
if (!(isNumeric(sub))) return false;
}
} else {
return false;
}
return true;
}

Conclusion

JavaScript’s `Date` object and its associated methods provide essential functionality for handling dates and times in web applications. By understanding how to create, manipulate, and format dates, developers can efficiently manage time-related operations. For more advanced use cases, third-party libraries offer additional flexibility and ease of use. Mastering these techniques ensures accurate and efficient date handling in any JavaScript application.

The post JavaScript isDate function to Validate Date formats appeared first on OneStop Shop.

During String Operation while we found unwanted spaces before or after the string, we apply trim() functions to remove those spaces. Here in this example I have 4 functions. ltrim, rtrim, trim & isWhitespace.

ltrim function is responsible to remove unwanted space from left side of the string. Similarly rtrim function removes space from right side of the string. When both these functions come together it acts like trim function.

The logic behind ltrim & rtrim functions is quite simple. While removing space from left side of the string I am increasing counter inside a for loop. For each space it checking the characters with isWhitespace function. Similarly to remove space from right side of the string I am reducing the counter.

JavaScript Trim Functions

Strings are a fundamental data type in JavaScript, often requiring manipulation to ensure clean and consistent data. One common operation is removing extra whitespace from the beginning, end, or both sides of a string. JavaScript provides built-in methods to handle this efficiently: `trim()`, `trimStart()`, and `trimEnd()`. Understanding these functions is essential for developers working with user inputs, file processing, or data validation.

function ltrim(str) 
{ 
for(var k = 0; k < str.length && isWhitespace(str.charAt(k)); k++);
return str.substring(k, str.length);
}

function rtrim(str) 
{
for(var j=str.length-1; j>=0 && isWhitespace(str.charAt(j)) ; j--) ;
return str.substring(0,j+1);
}

function trim(str) 
{
return ltrim(rtrim(str));
}

function isWhitespace(charToCheck) 
{
var whitespaceChars = " \t\n\r\f";
return (whitespaceChars.indexOf(charToCheck) != -1);
}

What is Whitespace?

Whitespace refers to invisible characters that create space between text. These include spaces (` `), tabs (`\t`), and newline characters (`\n`). While whitespace improves readability, excessive or unintended whitespace can cause issues in data processing, comparisons, or storage.

Performance Considerations

While `trim()` functions are optimized in modern engines, excessive use in large datasets can impact performance. For batch processing, consider combining operations or using regular expressions for complex trimming needs.

Common Pitfalls

1. Immutable Strings: JavaScript strings are immutable, so trim methods return new strings rather than modifying the original.

2. Middle Whitespace: Trim functions do not remove spaces between words. Use `replace()` with regex for such cases.

3. Non-Standard Whitespace: Some whitespace characters (e.g., non-breaking spaces) may require additional handling.

Alternatives to Trim Functions

For advanced scenarios, developers can use:

Regular Expressions: Custom patterns for selective trimming.
Third-Party Libraries: Utilities like Lodash offer extended string manipulation.

Conclusion

JavaScript’s `trim()`, `trimStart()`, and `trimEnd()` methods provide simple yet powerful ways to manage whitespace in strings. By leveraging these functions, developers can ensure cleaner data processing, improve user experience, and avoid common formatting issues. Understanding their differences and appropriate use cases is key to writing efficient and maintainable code.

The post JavaScript Trim functions (L-Trim, R-Trim) to remove Whilespace appeared first on OneStop Shop.

JavaScript is a popular client-side programming language. It is also known as ECMAScript. ECMAScript was first introduced in 1997. Before we explore more into JavaScript first let us know how JavaScript help in web development. In client server architecture JavaScript helps to reduce http requests by performing possible operations in client end. Let’s talk about an employee registration form. Using this form to register an employee we need to provide valid data before form submission. It can possible user will submit the form with blank fields or invalid data. To protect this we need to check user data before form submission.

It can be done using server. But to do this we have to play with response & request mechanism. Which is time consuming & can increase server load. That’s why client script, to check whether data filed or user trying to submit the form with blank fields it is better to use client resource rather then sending a request to server. Like this there are several cases where client-script is more useful then server-script. Are you looking to learn such a powerful client-script? If so, this is the right place for you. Let us learn JavaScript. I know you will enjoy while learning.

How to write JavaScript in a HTML page?

In a HTML page JavaScript can wrote using 2 ways. One is inside <script> tag & other one is using js file. Look at the examples below.

<script type="text/javascript">
document.write('JavaScript Hello World Program');
</script>

OR

<script type="text/javascript" src="hello-world.js"></script>

Keep remember if you will not add type=”text/javascript” still your script will run. But it is a best practice to use type with script tag. Compare to script block using js files you can modularize your code. I mean if you are designing a form validation related scripts you can keep in validation.js & dynamic theme related scripts you can keep in theme.js.

How to comment in JavaScript?

During development code commenting is an essential skill. Think once in a thousand line program how much time you required to understand the flow. In this matter comment helps. By looking comments you can take less time to understand where which changes are required. In JavaScript we can do comment using 2 ways. To comment a single line of text we need to add two back slash (//). To comment multiple lines syntax is /* ……. */. Look at the example below.

<script type="text/javascript">
// This is a Single line Comment.
document.write('JavaScript Single line Comment.');
/* This is a Multi-line Comment.
You can add more Comments here... */
document.write('JavaScript Multi-line Comment.');
</script>

How to display data using JavaScript?

JavaScript doesn’t have any in-built print or display function. There are 4 ways through which you can display data to outside from a JavaScript function. window.alert(), document.write(), innerHTML & console.log().

JavaScript Data Types, Variable & Scope

JavaScript is a loosely coupled programming language. It has three primitive data types. Number, String & Boolean. To declare a variable in JavaScript we use syntax var. For an example if we are declaring var x = 6; then here x belongs to Number data type. In case we are declaring var x = “6”; here x belongs to String data type. In the similar way if we declare var x = true or var x = false, here data type of x is Boolean.

JavaScript is a case sensitive programming language. While declaring a variable stay aware variable names are case sensitive. variable “MyVar” is not same as “myVar”.

JavaScript variables are only two scope Local & Global. Global variable is accessible to all functions while Local variable is specific for that function inside which it is declared. Look at the example below.

<script type="text/javascript">
<!--
//Global variable
var myVar = "this is a global variable.";
function variablescope( ) {
//Local variable
var myVar = "this is a local variable.";
document.write(myVar);
}
//-->
</script>

JavaScript Operators

JavaScript supports various types of operators. These are Arithmetic Operators, Comparison Operators, Logical Operators, Assignment Operators & Conditional Operators.

Arithmetic Operators

Arithmetic Operators are used to perform arithmetic operations. In JavaScript arithmetic operators are + (Addition), – (Subtraction), * (Multiplication), / (Division), % (Modulus Division), ++ (Increment) & – – (Decrement). Addition used to add two integer values. Similarly subtraction, multiplication & division works for numeric values. Modulus Operator and remainder of after an integer division. Increment operator increase the value by one. If the value of variable A is 5 by adding increment operator A++ value is equal to 6. Similar to increment operator decrement operator decrease the value by one.

Comparison Operators

JavaScript supports 6 Comparison Operators. These are == (Equal), != (Not Equal), < (Less than), > (Greater than), <= (Less then Equal to) & >= (Greater then Equal to). Let’s talk about two variable X & Y. I assigned their values X = 10 & Y = 20. In this case equal operator (X == Y) returns false. X != Y returns true. X < Y returns true. X > Y returns false & So on. Keep remember Comparison Operators returns Boolean results.

Logical Operators

JavaScript supports 3 logical operators AND (&&), OR (||) & NOT(!). Where both the conditions need to valid we can use AND operator, if from both conditions at least one condition need to valid in this scenario we can use OR. While the condition is not valid in this case we can use NOT operator.

Assignment Operators

There are 6 Assignment Operators available in JavaScript =, +=, -=, *=, /= & %=. = operator helps to assign values from right side operand to left side operand. For an example if var Y = X; then during execution Y will hold X value. += It adds right operand value to the left operand & store the result to left operand. -= It subtracts right operand value from the left operand & store the result to left operand. *= It multiplies right operand value with the left operand & store the result to left operand. /= It divides left operand value with the right operand & store the result to left operand. %= It takes modulus using two operands & assign the result to left operand.

Conditional Operators

Conditional Operator is generally the ?:. The syntax is If Condition is true ? Then value X : Otherwise value Y.

If…Else Statement in JavaScript programming

I can say if else is the primary conditional statement for any programing language. Let’s assume you have a variable X which hold the value of employee age. How can you display a message for employees greater then 50 plus. Here if else helps to take the decision. Look at the example below how to use if else in JavaScript program.

<script type="text/javascript">
<!--
var age = 52;
if( age > 50 ) {
document.write("<b>This is an old Employee.</b>");
}
//-->
</script>

Note: JavaScript supports nested if else.

Switch Case in JavaScript programming

Compare to nested if else switch case is a very similar conditional statement. If you have less then 8 to 10 conditions in this matter it’s not a problem which conditional statement you prefer to use. You can choose if else or switch case. But if you have more then 10 conditions in your function it is better to choose switch case. Compare to if else switch case gives better performance. Look at the example below how to use switch case in a JavaScript program.

<script type="text/javascript">
<!--
var level='A';
document.write("Example of switch case<br />");
switch (level)
{
case 'A': document.write("This is a Good job.<br />");
break;
case 'B': document.write("This is a Pretty good job.<br />");
break;
case 'C': document.write("You are Passed.<br />");
break;
default: document.write("Default level for unknown value.<br />")
}
//-->
</script>

A switch case comes with cases. Refer to the above example Case ‘A’: mean when the level is A at that time this condition will execute. After each block of case execution switch case restricted to provide break so the next block of code will not execute. Finally if no condition will satisfy switch case provides a default case. I mean in the above example if the level value is not equal to A, B or C then the default: part will execute.

While Statement in JavaScript programming

During writing a program some time we required until the condition is satisfied we need iterations. In this case while is useful. Look at the example below how to use while statement in JavaScript program.

<script type="text/javascript">
<!--
var count = 0;
document.write("Example of while Loop" + "<br />");
while (count < 12){
document.write("Print Current Count : " + count + "<br />");
count++;
}
//-->
</script>

For loop in JavaScript programming

For loop starts from a value we initialize & the iterations goes up to the condition satisfied. Using for loop we can increase or decrease the conditional value from the initial value. Syntax for for loop is as below.

for (initialization; test condition; iteration statement){
//Statement(s) to be executed if test condition is true
}

Let’s talk about a case where I want a loop where count will start from 0 & it will go up to less then 10. Look how I did this using for loop JavaScript.

<script type="text/javascript">
<!--
var count;
document.write("Example of for Loop" + "<br />");
for(count = 0; count < 10; count++){
document.write("Printing the Count value : " + count );
document.write("<br />");
}
//-->
</script>

The post Best way to learn JavaScript programming for beginners appeared first on OneStop Shop.

Captcha is a technique to protect web forms from auto submission. Hackers use various tools to insert spam records in to your business. Validating Captcha is a proof that the user is a real human. Today inside this growing network many hackers are sitting around the world. They have several tools to hack your blog or business websites.

It plays a critical role in preventing spam, unauthorized access, and automated attacks on websites. While traditional CAPTCHAs rely on server-side validation, client-side CAPTCHA has emerged as an alternative approach that processes verification directly in the user’s browser. This article explores the concept, advantages, challenges, and implementation of client-side CAPTCHA.

Where we need JavaScript Captcha?

Let’s talk about a simple login form. In a login form basically we have 2 input fields (username & password) with 1 submit button. To hack if we will pass random strings to username & password using a program there can be a chance in some point of time submit will successful. While manually it is quite difficult. Another scenario where let you have a signup form. If you are not taking protection 1000+ spammers can signup per day. Which is practically brings difficulties in maintainance. That’s why JavaScript Captcha. Captcha protects our forms from illegal submission.

Captcha is generating a code in the format of an image or string. Something like “DSERTT” or “D9K22A” or “325889”. User need to provide Captcha code before submitting a Form online. Here my intention to tell you adding Captcha to reduce the chance of unnatural form submissions. Captcha can be created at both the end server-side and client side. Compare to server-side captcha client-side captcha is much good for your websites. Client-side captcha reduce network load as well as performance rich.

In this example I created a Simple JavaScript Captcha. Client side Captcha helps to reduce http requests. It gives better performance compair to other type of Captcha techniques.

In the below code using math class I am generating 7 numeric characters randomly. Concatenating them with space in-between. Then assigning this value to txtCaptcha value. While user entering the text to txtCaptcha I am comparing these two values. If it is equal I am returning true or else returning false.

Simple JavaScript Captcha Example

<!DOCTYPE html>
<html>
<head>
<title>Simple JavaScript Captcha Example</title>
<script type="text/javascript">
/* Function to Generat Captcha */
function GenerateCaptcha() {
var chr1 = Math.ceil(Math.random() * 10)+ '';
var chr2 = Math.ceil(Math.random() * 10)+ '';
var chr3 = Math.ceil(Math.random() * 10)+ '';
var chr4 = Math.ceil(Math.random() * 10)+ '';
var chr5 = Math.ceil(Math.random() * 10)+ '';
var chr6 = Math.ceil(Math.random() * 10)+ '';
var chr7 = Math.ceil(Math.random() * 10)+ '';

var captchaCode = chr1 + ' ' + chr2 + ' ' + chr3 + ' ' + chr4 + ' ' + chr5 + ' '+ chr6 + ' ' + chr7;
document.getElementById("txtCaptcha").value = captchaCode
}

/* Validating Captcha Function */
function ValidCaptcha() {
var str1 = removeSpaces(document.getElementById('txtCaptcha').value);
var str2 = removeSpaces(document.getElementById('txtCompare').value);

if (str1 == str2) return true;
return false;
}

/* Remove spaces from Captcha Code */
function removeSpaces(string) {
return string.split(' ').join('');
}
</script>
</head>
<body onload="GenerateCaptcha();">
<h2>Generating Captcha Demo</h2>
<input type="text" id="txtCaptcha" style="text-align: center; border: none; font-weight: bold; font-family: Modern" />
<input type="button" id="btnrefresh" value="Refresh" onclick="GenerateCaptcha();" />
<input type="text" id="txtCompare" />
<input id="btnValid" type="button" value="Check" onclick="alert(ValidCaptcha());" />
</body>
</html>

What is Client-Side CAPTCHA?

Client-side CAPTCHA refers to CAPTCHA mechanisms that perform validation on the user’s device rather than sending data to a server for verification. Unlike traditional server-side CAPTCHAs, which require a round-trip communication with a backend system, client-side solutions process the user’s response locally, reducing latency and server load.

Types of Client-Side CAPTCHA

1. JavaScript-Based CAPTCHA – These rely on JavaScript to generate and validate challenges without requiring server interaction. Examples include puzzle-solving tasks, drag-and-drop verifications, or simple math problems.

2. Invisible CAPTCHA – Uses behavioral analysis (mouse movements, keystrokes, etc.) to determine if the user is human without explicit challenges. Google’s reCAPTCHA v3 is a popular example.

3. Local Hash Verification – Some implementations use cryptographic hashes stored on the client side to verify responses without server dependencies.

Advantages of Client-Side CAPTCHA

Explores the key benefits of client-side CAPTCHA, including Improved User Experience, Reduced Server Load, Enhanced Privacy, and Offline Functionality.

Improved User Experience

One of the most significant advantages of client-side CAPTCHA is the enhancement of user experience. Traditional server-side CAPTCHAs often introduce delays as the request must travel to a server, be processed, and return a response. This round-trip latency can frustrate users, especially in regions with slower internet connections.

Client-side CAPTCHA eliminates this delay by performing validation directly in the user’s browser. Since no external server communication is required, the verification process is nearly instantaneous. This results in smoother interactions, reducing the likelihood of user abandonment due to slow-loading security checks.

Additionally, client-side CAPTCHAs can be designed with more intuitive interfaces, such as simple checkbox verifications or interactive puzzles that require minimal effort from the user. By minimizing friction, websites can maintain security without compromising usability.

Reduced Server Load

Server-side CAPTCHAs place a considerable burden on web servers, particularly for high-traffic websites. Each CAPTCHA validation requires computational resources to generate, verify, and log the interaction. As traffic increases, the server must handle a growing number of requests, potentially leading to slower response times or even downtime during peak periods.

Client-side CAPTCHA shifts the computational workload from the server to the user’s device. Since the validation occurs locally, the website’sending fewer requests to the server, thereby conserving bandwidth and processing power. This efficiency allows servers to allocate resources to other critical tasks, improving overall website stability and performance.

For businesses, this reduction in server load can translate to cost savings, as fewer server resources are needed to handle the same volume of traffic. It also reduces the risk of server crashes during traffic spikes, ensuring a more reliable experience for legitimate users.

Enhanced Privacy

Privacy concerns have become increasingly important in the digital age, with users growing wary of unnecessary data collection. Server-side CAPTCHAs often require sending user interactions—such as mouse movements, keystrokes, or IP addresses—to third-party servers for analysis. This data can sometimes be used for tracking or profiling, raising privacy red flags.

Client-side CAPTCHA addresses these concerns by keeping user data within the browser. Since the validation process occurs locally, sensitive information is not transmitted to external servers. This approach minimizes the risk of data breaches or misuse, fostering greater trust between users and website operators.

Furthermore, some client-side CAPTCHA solutions employ cryptographic techniques to verify human interaction without exposing personal data. By prioritizing privacy, websites can comply with stringent data protection regulations such as GDPR while still preventing bot activity.

Offline Functionality

Another notable benefit of client-side CAPTCHA is its ability to function without an active internet connection. Traditional server-side CAPTCHAs fail when a user is offline, as they rely on real-time communication with a remote server. In contrast, client-side CAPTCHAs can operate independently, making them ideal for progressive web apps (PWAs) or scenarios with intermittent connectivity.

This offline capability ensures that users can still complete forms or access secured content even in low-connectivity environments. For businesses, this means uninterrupted service delivery, improving accessibility and user satisfaction.

Challenges of Client-Side CAPTCHA

1. Security Vulnerabilities Client-side validation can be bypassed if attackers manipulate JavaScript or reverse-engineer the verification logic. Unlike server-side CAPTCHAs, which rely on secret keys, client-side solutions may expose validation rules.

2. Limited Complexity To ensure smooth execution in the browser, client-side CAPTCHAs often use simpler challenges, making them potentially easier for bots to crack compared to advanced server-side counterparts.

3. Dependency on JavaScript If a user disables JavaScript, client-side CAPTCHAs may fail, forcing fallback mechanisms that could be less secure or more cumbersome.

4. Inconsistent Bot Detection Behavioral analysis CAPTCHAs (like reCAPTCHA v3) may incorrectly flag legitimate users as bots based on unusual but harmless interactions.

Best Practices for using CAPTCHA

CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) is a widely used security measure designed to distinguish between human users and automated bots. While CAPTCHAs help prevent spam, fraud, and abuse, their implementation must be carefully managed to ensure they do not hinder user experience or compromise accessibility. Below are the best practices for effectively using CAPTCHA while maintaining security and usability.

Combine with Server-Side Validation

Relying solely on CAPTCHA for security is insufficient, as sophisticated bots can sometimes bypass these challenges. To enhance protection, CAPTCHA should be combined with server-side validation. Server-side checks verify input data, detect suspicious patterns, and enforce additional security layers such as rate limiting and IP blocking.

For example, if a user submits a form, the server should validate the input fields for anomalies—such as unusually fast submissions or repeated failed attempts—before even presenting a CAPTCHA. This multi-layered approach reduces the chances of automated attacks while minimizing unnecessary CAPTCHA prompts for legitimate users.

Regularly Update Mechanisms

Cyber threats evolve continuously, and so should CAPTCHA mechanisms. Outdated CAPTCHA systems may become vulnerable to machine learning-based attacks or automated solving tools. Developers must stay informed about emerging threats and update CAPTCHA implementations accordingly.

For instance, traditional text-based CAPTCHAs are now less effective due to advancements in optical character recognition (OCR). Modern alternatives like reCAPTCHA v3 or hCaptcha leverage behavioral analysis and risk assessment to provide stronger security without disrupting user experience. Regularly reviewing and upgrading CAPTCHA solutions ensures they remain resilient against new attack vectors.

Monitor Performance

CAPTCHA implementations should be continuously monitored to assess their effectiveness and impact on user experience. High failure rates or excessive user complaints may indicate that the CAPTCHA is too difficult or causing accessibility issues. Analytics tools can track metrics such as completion rates, abandonment rates, and time taken to solve CAPTCHAs.

If data shows that many users abandon a form after encountering a CAPTCHA, it may be necessary to adjust the difficulty level or switch to a less intrusive alternative. Monitoring also helps identify potential bot breakthroughs, allowing for timely adjustments to security measures.

Provide Fallback Options

Not all users can easily solve CAPTCHAs. Individuals with disabilities, such as visual impairments, may struggle with image or audio-based challenges. To ensure accessibility, CAPTCHA implementations should include fallback options, such as alternative verification methods or manual approval processes.

For example, offering an audio CAPTCHA alongside a visual one accommodates users with visual impairments. Additionally, providing a contact option for users who cannot complete the CAPTCHA ensures they are not excluded from accessing services. Compliance with accessibility standards, such as WCAG (Web Content Accessibility Guidelines), is essential for inclusive design.

Future of Client-Side CAPTCHA

Advancements in AI and machine learning pose challenges for CAPTCHA systems, as bots grow more sophisticated. However, client-side CAPTCHAs are evolving with techniques like biometric verification (e.g., fingerprint scanning) and adaptive behavioral analysis.

Conclusion

Client-side CAPTCHA role in modern web security continues to expand as developers seek frictionless yet effective bot-detection methods. By understanding its strengths and limitations, businesses can implement client-side CAPTCHA solutions that enhance both protection and user experience.

The post Simple JavaScript Captcha Example (Client Side Captcha) appeared first on OneStop Shop.

As we know Ajax (Asynchronous JavaScript and XML) is a technology to implement partial loading. The idea is in place of sending request to load whole the page from server we can fetch the line of changes we required in our page. This process helps to reduces network load. The result we have better performance & faster web.

Understanding AJAX: The Foundation of Asynchronous Web Requests

What is AJAX?

AJAX allows web pages to send and receive data in the background without reloading. Think of it as a way to fetch data without stopping everything else. Unlike old websites that load entire pages, AJAX updates parts of a page on the fly. It uses JavaScript to send requests and jQuery or vanilla JavaScript to process responses. XML was once popular for data transfer, but JSON is now king because it’s easier to use and lighter.

How AJAX Works in Web Development?

The process begins when a user does something—like clicking a button or scrolling. JavaScript then creates a request to the server. This request runs in the background, so the user doesn’t see the page refresh. When the server responds, JavaScript updates only the affected parts of the website. Here’s a simple visual flow:

User interacts with the page.
JavaScript sends an AJAX request.
Server processes and responds.
JavaScript updates the web page without reloading.

Modern browsers support AJAX smoothly, making it reliable for web apps, mobile sites, and more.

Benefits of Using AJAX

AJAX (Asynchronous JavaScript and XML) is a powerful web development technique that allows web applications to send and retrieve data from a server asynchronously without interfering with the display and behavior of the existing page. By enabling seamless data exchange between the client and server, AJAX enhances user experience, improves performance, and provides a more dynamic and interactive web environment. Below are the key benefits of using AJAX in modern web development.

1. Improved User Experience

One of the most significant advantages of AJAX is its ability to create a smoother and more responsive user experience. Traditional web applications require full page refreshes whenever data needs to be updated, leading to delays and a disruptive browsing experience. AJAX eliminates this issue by allowing specific parts of a webpage to update independently. For example, when a user submits a form or performs a search, only the relevant section of the page refreshes, reducing wait times and providing instant feedback.

2. Faster Page Load Times

Since AJAX enables partial page updates, it significantly reduces the amount of data transferred between the client and server. Instead of reloading the entire page, only the necessary data is fetched, leading to faster load times. This is particularly beneficial for content-heavy websites, e-commerce platforms, and social media sites where quick interactions are crucial for user retention.

3. Reduced Server Load

By minimizing the amount of data exchanged between the client and server, AJAX helps reduce server load. Traditional web applications require the server requests for every user action, which can strain server resources, especially during peak traffic. AJAX optimizes this process by handling multiple requests asynchronously, ensuring efficient resource utilization and better scalability.

4. Enhanced Interactivity

AJAX enables developers to build highly interactive web applications that respond to user inputs in real-time. Features like auto-suggestions in search bars, live form validations, and dynamic content loading create a more engaging experience. Websites like Google Maps and Gmail leverage AJAX to provide seamless navigation and real-time updates without requiring page reloads.

5. Better Bandwidth Utilization

Since AJAX transmits data in smaller chunks rather than reloading entire pages, it optimizes bandwidth usage. This is particularly advantageous for users with slower internet connections or those accessing web applications on mobile devices. Efficient data transfer ensures that applications remain functional even under limited network conditions.

6. Support for Asynchronous Processing

AJAX allows multiple operations to occur simultaneously without blocking the user interface. For instance, while one request fetches data from the server, the user can continue interacting with other parts of the application. This asynchronous processing ensures that applications remain responsive, even during data-intensive operations.

7. Seamless Integration with Existing Technologies

AJAX is not a standalone technology but a combination of existing web technologies like JavaScript, XML (or JSON), HTML, and CSS. This makes it highly compatible with most modern web frameworks and libraries, such as React, Angular, and jQuery. Developers can easily integrate AJAX into their projects without overhauling existing codebases.

8. Real-Time Data Updates

Applications requiring real-time data, such as stock market trackers, live sports updates, and chat applications, benefit greatly from AJAX. By continuously fetching the latest data in the background, AJAX ensures that users receive up-to-date information without manual refreshes.

9. Improved Form Handling

AJAX enhances form submissions by allowing validation and processing without page reloads. Users receive immediate feedback on input errors, reducing frustration associated with repeated form submissions. Additionally, AJAX can auto-save form data, preventing loss of information in case of accidental browser closures.

10. Cross-Browser Compatibility

Modern browsers widely support AJAX, making it a reliable choice for web development. While early implementations faced inconsistencies, standardized practices and libraries have resolved most compatibility issues, ensuring smooth performance across different platforms.

11. Support for RESTful APIs

AJAX works seamlessly with RESTful APIs, enabling efficient communication between front-end and back-end systems. Developers can fetch, update, and delete data using HTTP methods (GET, POST, PUT, DELETE) without disrupting the user experience.

12. Enhanced Mobile Compatibility

With the increasing use of mobile devices, AJAX plays a crucial role in optimizing web applications for smaller screens. Faster load times and reduced data consumption make AJAX-powered websites more accessible and user-friendly on mobile platforms.

13. SEO-Friendly

When Implemented Correctly While search engines traditionally struggled with dynamically loaded content, modern SEO techniques and frameworks now support AJAX-crawling. Proper implementation ensures that search engines index AJAX-driven content, improving visibility without sacrificing performance.

14. Cost-Effective Development

Since AJAX reduces server load and bandwidth consumption, businesses can save on hosting and infrastructure. Additionally, the improved user experience can lead to higher conversion rates, making AJAX a cost-effective solution for web development.

15. Future-Proof Technology

As web applications continue to evolve, AJAX remains a fundamental technology for creating dynamic, high-performance websites. Its adaptability ensures that it will remain relevant as new frameworks and standards emerge.

In short, AJAX makes websites feel more like apps — fast, interactive, and user-friendly.

Today we have many ready-made libraries are available to make an Ajax Call easier & programmer friendly. But as a core engineer it is required to know what is the basics of an Ajax Call. That’s why I am presenting this topic here. It is also very useful for fresher.

In the below example I am implementing JavaScript AJAX Example, no third-party libraries I used here. Ajax-Demo.html is the file where from I am doing an Ajax Call to Demo-Ajax.txt file to fetch its text contents. To do so on button click I am calling a function demoAjaxCall(). In side this function I created an instance xmlhttpObj for the XMLHttpRequest object. Then using open method I am instructing xmlhttpObj to locate the demo-ajax.txt file. Here in xmlhttpObj.open I am using get method. Finally using send method I am sending request to the server.

Later in xmlhttpObj.onreadystatechange() I am checking readyState & status. If readyState is equal to 4 & status is equal to 200, it mean my Ajax Call is successful. To display the response from Ajax Call here I used xmlhttpObj.responseText to the inner html of the div demoAjax.

JavaScript-AJAX-Example.html

<!DOCTYPE html>
<html>
<head>
<title>JavaScript AJAX Example</title>
<script type="text/javascript">
function demoAjaxCall()
{
var xmlhttpObj;
if (window.XMLHttpRequest)
{
/* Compatiable for IE7+, Mozilla Firefox, Google Chrome, Opera &amp; Safari */
xmlhttpObj=new XMLHttpRequest();
}

xmlhttpObj.onreadystatechange=function()
{
if (xmlhttpObj.readyState==4 &amp;&amp; xmlhttpObj.status==200)
{
document.getElementById("demoAjax").innerHTML='<h2>' + xmlhttpObj.responseText + '</h2>';
}
}
xmlhttpObj.open("GET","demo-ajax.txt",true);
xmlhttpObj.send();
}
</script>
</head>
<body>

<div id="demoAjax"><h2>On below button click this label will show you text from demo-ajax.txt using Ajax Call</h2></div>
<button type="button" onclick="demoAjaxCall()">Trigger an Ajax Call</button>

</body>
</html>

Demo-Ajax.txt

This is the text from demo-ajax.txt file. Your Ajax Call is Successful.

Conclusion

AJAX is a game changer for modern web development. It makes websites faster, more responsive, and more interactive. Whether you’re building simple features like live search or complex real-time systems, understanding AJAX is essential. Start experimenting with the Fetch API and practice integrating AJAX into your projects. As web technology advances, combining AJAX techniques with WebSockets and serverless solutions will unlock even bigger possibilities for dynamic websites. Keep pushing your skills and create websites users love to use.

The post How to implement AJAX using JavaScript? – AJAX Examples appeared first on OneStop Shop.

Let’s talk about mobile verification code where we need to send a six digit random string to the user device for verify his/her mobile number. In this case it is wise to generate the random string using client script (JavaScript or Jquery) & can send a copy to the server using Ajax post method.

In the below example I created a function where you can generate any length of random string from the specific characters you want. In the configuration variable of randomString() function I declared chars as the list of characters you want for your random string. Here for a demo purpose I added numbers (0 to 9) & alphabets in both the case (Upper & Lower). Using the variable string_length you can set the length of your random string. In body part of HTML I have a button control with a div DisplayRandomString. Onclick of button Generate I am applying html to the div using Jquery. randomString() function returns randomstring variable as string. Which I am showing in the div on click event of button btnGenerate.

To run the below example copy the html codes into a notepad file. Save it as html. The jquery library I referred here is a CDN link. Before run the html file make sure you are with Internet Connectivity.

Generate Random String Example

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/*Generate button Click event*/
$('#btnGenerate').click(function() {
$('#DisplayRandomString').html(randomString());
});

/*Function to Generate Random String*/
function randomString() {
/*Charecters you want to use for your Random String*/
var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
/*Length of the Random String you want to Generate*/
var string_length = 6;
var randomstring = '';

for (var i = 0; i < string_length; i++) {
var rnum = Math.floor(Math.random() * chars.length);
randomstring += chars.substring(rnum, rnum + 1);
}

return randomstring;
}
});

</script>

</head>
<body>
<button id="btnGenerate">Generate</button>
<!--Div to Display Random String-->
<div id="DisplayRandomString"></div>
</body>
</html>

The post Function to Generate Random String using pre-defined Characters appeared first on OneStop Shop.

In application development many times we required to use keyboard shortcuts. Let’s talk about copy paste or undo redo operations here we required CTRL + C for copy, CRTL + V for paste or CRTL + Z for undo & CRTL + Y for redo. Web application runs over Client Server architecture. During web application development we prefer to do use more Client resources rather than server resources. This technique improves application performance & speed. That’s why experienced programmers prefer to Implement keyboard shortcuts using Client side scripts.

In this knowledge sharing session I am sharing a JavaScript class which will help you to implement all required keyboard shortcuts. The keyboard keys I implemented with keydown & keyup events are Ctrl, Shift, Delete, Esc, Down Arrow, Up Arrow, Right Arrow, Left Arrow, C & V.

To implement this class in your application just copy the below codes into a js file (keyboardUtils.js). Then integrate this js file to your application.

keyboardUtils.js

KeyboardUtil = function () {
var exports = {};
var _kpRegisters = [];

exports.KEY_STROKES = {
ESC: 0,
CTRL: 1,
LEFT_ARROW: 2,
RIGHT_ARROW: 3,
UP_ARROW: 4,
DOWN_ARROW: 5,
DELETE: 6,
SHIFT: 7,
C: 8,
V: 9
};

exports.ActiveKeyStrokes = [];

exports.bindToKeyPress = function (key, callback) {

if (typeof (callback) == "function") {

switch (key) {

case exports.KEY_STROKES.SHIFT:
registerCallBack(exports.KEY_STROKES.SHIFT, callback);
break;

case exports.KEY_STROKES.CTRL:
registerCallBack(exports.KEY_STROKES.CTRL, callback);
break;

case exports.KEY_STROKES.DELETE:
registerCallBack(exports.KEY_STROKES.DELETE, callback);
break;

case exports.KEY_STROKES.ESC:
registerCallBack(exports.KEY_STROKES.ESC, callback);
break;

case exports.KEY_STROKES.LEFT_ARROW:
registerCallBack(exports.KEY_STROKES.LEFT_ARROW, callback);
break;

case exports.KEY_STROKES.RIGHT_ARROW:
registerCallBack(exports.KEY_STROKES.RIGHT_ARROW, callback);
break;

case exports.KEY_STROKES.UP_ARROW:
registerCallBack(exports.KEY_STROKES.UP_ARROW, callback);
break;

case exports.KEY_STROKES.DOWN_ARROW:
registerCallBack(exports.KEY_STROKES.DOWN_ARROW, callback);
break;

case exports.KEY_STROKES.C:
registerCallBack(exports.KEY_STROKES.C, callback);
break;

case exports.KEY_STROKES.V:
registerCallBack(exports.KEY_STROKES.V, callback);
break;
default:
break;
}
}
}

function registerCallBack(type, callback) {
if (_kpRegisters[type]) {

_kpRegisters[type].push(callback);
}
else {
var fnctrs = new Array();
fnctrs.push(callback);
_kpRegisters[type] = fnctrs;
}
}

function invokeCallBack(type, evt) {

if (_kpRegisters[type]) {
for (i = 0; i < _kpRegisters[type].length; i++) {
(_kpRegisters[type][i])(evt);
}
}
}

$(document).on("keydown", function (evt) {
switch (evt.keyCode) {

case 16:    // Shift Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.SHIFT] = true;
invokeCallBack(exports.KEY_STROKES.SHIFT, evt);
break;

case 17:    // Ctrl Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.CTRL] = true;
invokeCallBack(exports.KEY_STROKES.CTRL, evt);
break;

case 46:    // Delete Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.DELETE] = true;
invokeCallBack(exports.KEY_STROKES.DELETE, evt);
break;

case 27:    // Esc Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.ESC] = true;
invokeCallBack(exports.KEY_STROKES.ESC, evt);
break;

case 40:    // Down Arrow Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.DOWN_ARROW] = true;
invokeCallBack(exports.KEY_STROKES.DOWN_ARROW, evt);
break;

case 39:    // Right Arrow Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.RIGHT_ARROW] = true;
invokeCallBack(exports.KEY_STROKES.RIGHT_ARROW, evt);
break;

case 38:    // Up Arrow Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.UP_ARROW] = true;
invokeCallBack(exports.KEY_STROKES.UP_ARROW, evt);
break;

case 37:    // Left Arrow Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.LEFT_ARROW] = true;
invokeCallBack(exports.KEY_STROKES.LEFT_ARROW, evt);
break;

case 67:
case 99:// C Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.C] = true;
invokeCallBack(exports.KEY_STROKES.C, evt);
break;

case 86:
case 118:   // V Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.V] = true;
invokeCallBack(exports.KEY_STROKES.V, evt);
break;
default:
break;
}
});

$(document).on("keyup", function (evt) {
switch (evt.keyCode) {

case 16:    // Shift Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.SHIFT] = false;
break;

case 17:    // Ctrl Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.CTRL] = false;
break;

case 46:    // Delete Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.DELETE] = false;
break;

case 27:    // Esc Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.ESC] = false;
break;

case 40:    // Down Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.DOWN_ARROW] = false;
break;

case 39:    // Right Arrow Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.RIGHT_ARROW] = false;
break;

case 38:    // Up Arrow Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.UP_ARROW] = false;
break;

case 37:    // Left Arrow Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.LEFT_ARROW] = false;
break;

case 67:
case 99:// C Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.C] = false;
break;

case 86:
case 118:   // V Key
exports.ActiveKeyStrokes[exports.KEY_STROKES.V] = false;
break;
default:
break;
}
});

return exports;
};

After integrated the above Class file. Create an instance for the KeyboardUtil class. Then using the following code you can use most common keyboard shortcuts in your app.

_keyUtil = new KeyboardUtil();

_keyUtil.bindToKeyPress(_keyUtil.KEY_STROKES.LEFT_ARROW, function (event) {
//ToDo for Left Arrow         
});

_keyUtil.bindToKeyPress(_keyUtil.KEY_STROKES.C, function () {
if (_keyUtil.ActiveKeyStrokes[_keyUtil.KEY_STROKES.CTRL]) {
//Ctrl + C
}
});

_keyUtil.bindToKeyPress(_keyUtil.KEY_STROKES.V, function () {
if (_keyUtil.ActiveKeyStrokes[_keyUtil.KEY_STROKES.CTRL]) {
//Ctrl + V
}
});

The post JS Keyboard Utils Class to Implement Keyboard Shortcuts appeared first on OneStop Shop.

In our day today development some time we required a to find out all points between any two points. Let us discuss a scenario where I need to draw lines on a HTML5 Canvas but no two line will Cross each other. In this case to validate the new line that it is not overlapping the existing line first I need to find out all the points hold by the existing line. I have X1, Y1 & X2, Y2 as the starting & ending point of the existing line. Using the below function I am calculating the Slope & Intercept. Finally, using Console.log() I am printing all the points between X1, Y1 & X2, Y2.

Find all points between any two points

function getLinePoints(x1, y1, x2, y2) {
/*A & B are two Array which Holds x1, y1 & x2, y2 values*/
var A, B;
/*If both the lines are in same x-axis*/
if (x1 == x2) {
/*Checking for y1 greater than y2 else swapping the value*/
if (y1<y2) {
A=[x1,y1];
B=[x2,y2];
} else {
/*Swapping*/
B=[x1,y1];
A=[x2,y2];
}
/*Calculating Slope for the line*/
function getSlope(a, b) {
if (a[1] == b[1]) {
return null;
}
return (b[0] - a[0]) / (b[1] - a[1]);
}
function getIntercept(point, getSlope) {
if (getSlope === null) {
return point[0];
}
return point[1] - getSlope * point[0];
}
var m = getSlope(A, B);
var b = getIntercept(A, m);
for (var y = A[1]; y <= B[1]; y++){
/*Formula to Calculate x from y*/
var x = m * y + b;
/*Printing all line Points to Console window*/
console.log([x, y]);
}
} else {
/*Checking for x1 greater than x2 else swapping the value*/
if (x1<x2) {
A=[x1,y1];
B=[x2,y2];
} else {
/*Swapping*/
B=[x1,y1];
A=[x2,y2];
}
/*Calculating Slope for the line*/
function getSlope(a, b) {
if (a[0] == b[0]) {
return null;
}
return (b[1] - a[1]) / (b[0] - a[0]);
}
function getIntercept(point, getSlope) {
if (getSlope === null) {
return point[0];
}
return point[1] - getSlope * point[0];
}
var m = getSlope(A, B);
var b = getIntercept(A, m);
for (var x = A[0]; x <= B[0]; x++){
/*Formula to Calculate y from x*/
var y = m * x + b;
/*Printing all line Points to Console window*/
console.log([x, y]);
}
}
}

The post JavaScript Function to find all points between any two points appeared first on OneStop Shop.

There are several ways to structure our JavaScript codes. Modular programming is a best practice for easy maintenance. Let us assume we have a class drawDiagram. In this class I have to implement many functionalities like draw a shape, drag n drop or create a flowchart. While drawing several shapes they have their own properties. To store all their property related programs here I created a separate js file with the name shproperty.js. In this file I created a class shProperty. Passing shape as a parameter. Depending upon the shape (rectangle, ellipse or circle) I can access the shape properties in my class.

Modular Programming Technique

Modular programming is a software design technique that emphasizes breaking down a program into independent, interchangeable components called modules. Each module is designed to perform a specific function and can be developed, tested, and maintained separately. This approach enhances code readability, reusability, and scalability while simplifying debugging and collaboration among developers.

Key Principles of Modular Programming

1. Single Responsibility Principle (SRP) Each module should have a single, well-defined responsibility. This ensures that changes to one part of the system do not inadvertently affect unrelated components.

2. Encapsulation Modules should hide their internal workings and expose only necessary interfaces. This prevents unintended modifications and makes the system more secure and easier to debug.

3. Loose Coupling Modules should depend as little as possible on one another. This reduces the risk of cascading failures when one module is modified.

4. High Cohesion All elements within a module should be closely related to its primary function. This ensures that modules remain focused and efficient.

As shProperty is a function it returns “exports”. Exports is an array. It holds properties & methods those need to access from an another class. Simply declaring a function propertyCalculation() is only accessible to the internals of the class. To create an external function like getProperty() & setProperty() you have to add this function to exports array.

Function init() is the part where you can initialize your class requirements. Before return the exports array call init() for execution. Refer to Object Oriented Programming (OOP) while declaring a private variable use _ before the variable name. For an example in below sample code I created a private variable _shape. In case it required to access _shape from out-side the class. Use get & set methods.

JavaScript Class Example

var shProperty = function (shape) {

var exports = {};
/* Variables in Global Scope */
var _shape = null;

/* Initialization */
function init() {
}

/* Internal Function */
function propertyCalculation() {
}

/* External Function */
exports.setProperty = function () {
};
exports.getProperty = function () {
};
_shape = shape;

init();
return exports;
};

Advantages of Modular Programming

1. Improved Readability Breaking code into smaller, logically organized modules makes it easier to understand. Developers can quickly locate and modify specific functionalities without navigating through a monolithic codebase.

2. Easier Debugging and Maintenance Since modules are self-contained, isolating and fixing bugs becomes simpler. Changes made to one module are less likely to introduce errors in other parts of the program.

3. Enhanced Collaboration Multiple developers can work on different modules simultaneously without conflicts. This accelerates development and allows teams to leverage specialized expertise.

4. Scalability New features can be added by introducing new modules rather than rewriting existing code. This makes the system adaptable to changing requirements.

5. Code Reusability Common functionalities can be packaged into modules and reused across multiple projects, reducing development time and ensuring consistency.

Best Practices for Modular Programming

1. Define Clear Interfaces Ensure that each module has a well-documented interface specifying inputs, outputs, and expected behaviors.

2. Minimize Dependencies Avoid creating modules that rely too heavily on others. Use dependency injection or abstraction layers when necessary.

3. Use Meaningful Naming Conventions Module names should reflect their purpose, making the codebase easier to navigate.

4. Test Modules Independently Unit testing ensures that each module works as intended before integration.

5. Document Thoroughly Maintain clear documentation for each module, including usage examples and potential side effects.

Conclusion

By dividing a system into well-defined modules, developers can enhance readability, reusability, and collaboration while simplifying debugging and future enhancements. As software systems grow in complexity, adopting modular practices becomes increasingly essential for long-term success. Mastering modular programming allows developers to build robust applications that can evolve with changing technological demands.

The post JavaScript Class Example – Modular Programming Technique appeared first on OneStop Shop.

As we all know JavaScript improves the performance of a web application by reducing client server communication. What ever can possible to do at client end JavaScript is enough smart to take care of those tasks. Looking into this to present data visuals in our app we prefer to use client side chart & map libraries. There are many web development companies provides various JavaScript Chart and Graph Library. While choosing a chart library for your web products you have to ask few questions to you.

• Is the component is programmer friendly?
• Which kind of license the component is using?
• Is this a free or paid library?
• What is the feature of the component?

In this session let us share few of the top JavaScript Chart and Graph Library. Using these libraries you can create any kind of charts for your application.

Highcharts

Highcharts is a pure JavaScript chart library. Using an Ajax call you can fetch data from the server. By passing these data to specific methods of Highcharts you can make your data live. Highcharts is rich with interactive design. You can create real-time charts using Highcharts. Refer to many programmers view highcharts is easy to use & debug. It is free for non-commercial use. Highcharts supports all the modern browsers & devices. Using highcharts you can draw bar charts, pie charts, line charts & polar charts like many more. Including charts highcharts provides to more libraries Highstock & Highmaps. To know more about Highcharts visit them at www.highcharts.com

Highcharts offers a variety of chart types, accommodating diverse data representation needs. From traditional bar and pie charts to more complex line and polar charts, the library provides multiple options to suit different types of data and user preferences. Additionally, the Highcharts ecosystem extends further with specialized libraries like Highstock for financial data visualization and Highmaps for geographical data representation, expanding its applicability to a wide range of projects and industries.

ChartJS

ChartJS is one more JavaScript library to design several charts in client end. You can download their chart.js file and using script tag you can embed this to your application. Compare to highcharts it is more light weight. Using ChartJS you can create Line charts, Bar charts, Radar charts, Polar area charts, Pie & Doughnut charts. You can found there help manual at www.chartjs.org/docs/. To download Chart.js library file visit at www.chartjs.org.

ChartJS offers a balanced approach to creating charts for web applications with its lightweight design and ease of integration. Developers looking for a charting library that provides both versatility and performance will find ChartJS to be a suitable choice. With a variety of chart types and broad browser support, it empowers users to present their data in a visually engaging way that enhances comprehension and drives insights.

Overall, as you embark on your journey of data visualization, consider ChartJS not just for its features, but for its ability to simplify the process of turning complex datasets into compelling visual narratives. So, whether you’re a seasoned developer or just starting, give ChartJS a try and transform your data presentations today!

AmCharts

AmCharts is a high end JavaScript chart library. It supports any data to visual. AmCharts is very effective to use in touch screen & mobile devices. Using AmCharts you can create any kind of graphs. They have 2 more products in their showcase. JavaScript stock chart & interactive JavaScript maps. This component is free for commercial uses. With AmCharts you have facilities like super powerful serial charts, scrollable, zoom-able, Supports JSON objects, Availability of more themes, Word press plugin & Motion charts. To know more in details take a look at them www.amcharts.com.

One major benefit of AmCharts is its effectiveness on touchscreen and mobile devices. In our increasingly mobile world, it’s essential for data visualization tools to work seamlessly on smartphones and tablets. AmCharts excels in this regard, ensuring that users can interact with their data easily, no matter the device. This is particularly important for businesses targeting users on the go, as engaging visuals can significantly enhance user experience and retention.

AmCharts boasts an array of powerful features that elevate it above simpler alternatives. With support for JSON objects, developers can integrate data dynamically, customizing how information is presented. Users also benefit from super powerful serial charts, which allow for intricate data layering and comparison, enhancing the depth of insights gained from visualizations. Furthermore, scrollable and zoomable charts enable users to navigate large datasets without feeling overwhelmed, showcasing data insights in an accessible manner.

FusionCharts

FusionCharts is a very light weight JavaScript chart library. Using FusionCharts you can create more then 90 types of charts & 900 maps. In this component you can get the facilities like Linked Charts for easy drill down, Exporting to PDF, Interactive zoom & Scrolling, Intelligent label management, Real-time chats & Gauges, Interactive legend for charts, Informative Tooltips, Formatted numbers, 3D effects on charts & client-side data update. This is an old company stated at January 2002. To know more about then & their products visit them at www.fusioncharts.com

Interactivity is a key component of modern data visualization, and FusionCharts excels in this area. With features such as **interactive zoom and scrolling**, users can dive deeper into their data without losing context. Imagine analyzing a vast dataset of sales performance; with just a click, you can zoom into specific regions or time frames, making it easier to identify trends and anomalies.

Moreover, FusionCharts emphasizes user engagement through **informative tooltips** and **interactive legends**. These features allow viewers to hover over chart elements for instant insights, fostering a more interactive experience. The library also incorporates **intelligent label management**, ensuring that your charts remain clean and readable, even when dealing with complex datasets.

ElyCharts

ElyCharts is easy to use & you can customize this depending upon your requirements. They provides better graphic in the shape of professional look n feel. ElyCharts is under MIT license. You can use this library free with your commercial products. The features they provides are like animation, simple configuration settings, supports multiple chart types & comparability to all modern browsers. To use their chart component download the library file here www.elycharts.com

In the world of data visualization, animation can be a powerful feature. ElyCharts offers built-in animation capabilities, which help draw the audience’s attention and make the data more engaging. Animated transitions provide context and improve the storytelling aspect of your data, ensuring that the message you want to convey resonates with your viewers. By integrating animations, you can transform static data into dynamic visual narratives that capture interest and encourage further exploration.

ElyCharts is designed to handle various data visualization needs, supporting multiple chart types. From basic representations like bar and line charts to more advanced options like scatter plots and area charts, this library provides a wide range of choices. This versatility makes ElyCharts suitable for any project, regardless of how simple or complex the data visualization needs may be.

The post Advanced Free JavaScript Chart and Graph Library appeared first on OneStop Shop.