5 Useful JavaScript/jQuery codes and techniques with examples - Must use

JavaScript is one of the most powerful programming languages in website development. It has the power to controls the frontend parts through event handlers and provides easy inbuild methods that make life easier on the backend part also. It is used almost everywhere.

Here are some advantages of JS:

JavaScript is relatively simple to learn and implement.
Client-side JavaScript is very fast.

Disadvantages:

The main problem in JavaScript is that the code is always visible to everyone anyone can view JavaScript code.
If the error occurs in JavaScript, it can stop rendering the whole website.

check here to see more pros and cons.

To make the easiness in code, jQuery is introduced which is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax.

In this article, we are talking about some useful techniques of JavaScript / jQuery that everyone should know to strongly improve the user experience.

1️⃣ Use of forEach() loop to make the code neat and smart

The forEach() method calls a function once for each element in an array, in ascending order. Here is the example


const array = ['Hello', 'World', 'Javascript', 'loops']
array.length // output = 4

array.forEach(( item, index ) => console.log( item, index ))


//Output

Hello, 0
World, 1
Javascript, 2
loops, 3

const array = ['Hello', 'World', 'Javascript', 'loops']

array.length // output = 4

array.forEach(( item, index ) => console.log( item, index ))

//Output

Hello, 0

World, 1

Javascript, 2

loops, 3

forEach() loop that will also skip the empty index value, for example


const array = ['Hello', , 'Javascript', 'loops']
array.length // output = 4

array.forEach(( item, index ) => console.log( item, index ))


//Output

Hello, 0
Javascript, 2
loops, 3

const array = ['Hello', , 'Javascript', 'loops']

array.length // output = 4

array.forEach(( item, index ) => console.log( item, index ))

//Output

Hello, 0

Javascript, 2

loops, 3

So, forEach() is useful to iterate over all array items, without breaking, involving simultaneously some side-effects. Its first argument is the callback function, which is invoked for every item in the array with 3 arguments: item, index, and the array itself.

Or else you can check array methods also.

2️⃣ Get the Text of the selected item from <select> tag

I think most people know how to get the value of a selected item from the dropdown list, but I am asking about the Text of that selected item. There is a very simple way to do this:


---HTML---

<select id="select_language">
  <option value="1">One</option>
  <option value="2" selected>Two</option> <!-- let us suppose, user selected this -->
  <option value="3">Three</option>
</select>


---JS---

var learn = document.getElementById('select_language');

learn.value; // Output = 2
learn.options[learn.selectedIndex].text; // Output = Two

---HTML---

<option value="3">Three</option>

</select>

---JS---

var learn = document.getElementById('select_language');

learn.value; // Output = 2

learn.options[learn.selectedIndex].text; // Output = Two

3️⃣ How to get the day name, date, and more from DateTime Picker in jQuery

Today, Most websites are using the DateTimePicker plugin of jquery. It’s very easy to integrate with the project by just providing the CDN links. Why we should use this? Because it has customized properties, so that, we can add anything that we want.

We were having inbuild methods to find out the date, year, time, and so on… But how to use this? I describe you one by one


// I assumed that you have already provided the CDN link for DateTimePicker

$("#date").datetimepicker({
  format: 'MM-DD-YYYY HH:mm',
  minDate: new Date(),
});

// I assumed that you have already provided the CDN link for DateTimePicker

$("#date").datetimepicker({

format: 'MM-DD-YYYY HH:mm',

minDate: new Date(),

});


// After choose the date from datetimepicker 

var date_time = $('#date').val();  // Output = 03-07-2021 17:13

var selected_day = new Date(date_time); // creates a date object

// Creates Array of days, because the method getDay returns only index values
var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
var dayName = days[selected_day.getDay()];

console.log(dayName) // Output = Sunday

// and many more..
var date = selected_day.getDate(); // Output = 7
var month = selected_day.getMonth(); // Output = 3
var year = selected_day.getFullYear(); // Output = 2021

// if you want time also...
var minutes = selected_day.getMinutes(); // Output = 13
var milliseconds = selected_day.getMilliseconds(); // Output = 0
var hours = selected_day.getHours(); // Output = 17
var seconds = selected_day.getSeconds(); // Output = 0
var timezone = selected_day.getTimezoneOffset(); // Output = +530

// After choose the date from datetimepicker

var date_time = $('#date').val(); // Output = 03-07-2021 17:13

var selected_day = new Date(date_time); // creates a date object

// Creates Array of days, because the method getDay returns only index values

var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

var dayName = days[selected_day.getDay()];

console.log(dayName) // Output = Sunday

// and many more..

var date = selected_day.getDate(); // Output = 7

var month = selected_day.getMonth(); // Output = 3

var year = selected_day.getFullYear(); // Output = 2021

// if you want time also...

var minutes = selected_day.getMinutes(); // Output = 13

var milliseconds = selected_day.getMilliseconds(); // Output = 0

var hours = selected_day.getHours(); // Output = 17

var seconds = selected_day.getSeconds(); // Output = 0

var timezone = selected_day.getTimezoneOffset(); // Output = +530

That’s all about DateTimePicker. ✌

4️⃣ Want to generate a random SecureToken number of a particular length?

Need to save any file like images, Docx, pdf, etc.. in a secure way. Like if you saved the file with the real name creates ambiguity between the user’s data. If it is good to use some secure way to save any files then? Yes, there are a lot of ways or methods to do so… But I have taken a very simple and very effective method to give the random name to the files.


function makeSecureTokenId(length) {
  var result = '';
  var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  var charactersLength = characters.length;

  for (var i = 0; i < length; i++) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength));
  }

  return result;
}

// pass the parameter value
makeSecureTokenId(15); 

// Output = FEnowei2150pty1

function makeSecureTokenId(length) {

var result = '';

var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

var charactersLength = characters.length;

for (var i = 0; i < length; i++) {

result += characters.charAt(Math.floor(Math.random() * charactersLength));

}

return result;

}

// pass the parameter value

makeSecureTokenId(15);

// Output = FEnowei2150pty1

Use this secure token id to save in a secure way.🙌

We used this secureToken concept in one of the Related Post – Easy way to Upload the File/Image in Laravel using AJAX jQuery with example

5️⃣ Check validation of any input type using jQuery

We can validate the input by using the regex patterns in <input> tag


---HTML---

// for example we use emailid pattern
<input pattern="^[a-z0-9][a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" type="text" id="email" value="" maxlength="128" placeholder="Email address">

<button id="submit">Submit</button>


---JS---

$('#submit').click(function () {
  if ($('#email')[0].checkValidity() && $('#email').val().trim().length > 0) {
    console.log('Email is valid');
  }
  else {
    console.log('Email is invalid');
  }
});

---HTML---

// for example we use emailid pattern

<button id="submit">Submit</button>

---JS---

$('#submit').click(function () {

if ($('#email')[0].checkValidity() && $('#email').val().trim().length > 0) {

console.log('Email is valid');

}

else {

console.log('Email is invalid');

}

});

In this way, we can validate any input type by using the checkValidity() method. Simple as that 😉

So, these are some snippets, and techniques of Javascript / jQuery which you would like to use. I hope you enjoyed the article and if you found this useful then share this among your friends or on social media.

If you have any queries please feel free to post them in the comments section or anything that you wanted to ask through mail contact.

Thanks.😉

Related Article

5 Useful JavaScript/jQuery codes and techniques with examples – Must use

1️⃣ Use of forEach() loop to make the code neat and smart

2️⃣ Get the Text of the selected item from <select> tag

3️⃣ How to get the day name, date, and more from DateTime Picker in jQuery

4️⃣ Want to generate a random SecureToken number of a particular length?

5️⃣ Check validation of any input type using jQuery

You may also like...

2 Responses

Leave a Reply Cancel reply

Share on social

Categories

Recent Posts

5 Useful JavaScript/jQuery codes and techniques with examples – Must use

1️⃣ Use of forEach() loop to make the code neat and smart

2️⃣ Get the Text of the selected item from <select> tag

3️⃣ How to get the day name, date, and more from DateTime Picker in jQuery

4️⃣ Want to generate a random SecureToken number of a particular length?

5️⃣ Check validation of any input type using jQuery

You may also like...

Setup AWS CLI on MAC, Windows and Linux

Introduction to Linux – Ubuntu Basic Commands

Introduction to Comparison and Logical Operators in JS

2 Responses

Leave a Reply Cancel reply

Share on social

Categories

Recent Posts