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

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

Disadvantages:

1. The main problem in JavaScript is that the code is always visible to everyone anyone can view JavaScript code.
2. 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

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

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

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(),
});

With the help of above code you can initialize the datetimepicker in your page.

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

If you want to read out the other useful methods in javascript then you can visit here to get the cool tech stuff.

I hope you found it useful. If so do share with others, so that they also read and learn about it.