Hi, good day to our valued blog readers! My name is Htay Min Khaung, and I work at WIT Lab Co., Ltd. Today, I would like to share how to use some useful JavaScript functions in web app projects. JavaScript is one of the most powerful languages in the web development environment. JQuery is also one of the most useful library in the web development. jQuery offers a wide range of powerful functions and built-in animations to help achieve customer requirements efficiently.

How to add customize function to the String prototype ?

If you want to customize the String prototype with a function similar to .toLowerCase(), you can add it as follows:

String.prototype.capitalizeEachWord = function(){
     return this.replace(/\b\w/g, char => char.toUpperCase());
}

String.prototype.replaceUnderscoreWithSpace = function(){
      return this.split('_').join(' ');
}

The first function will be added to the String prototype and can be used to capitalize each word in a sentence. The second function will replace all underscores (_) with spaces (' '). After defining them, you can easily call these functions on any string using the dot (.) notation.

How to add Classes to the DOM using JavaScript ?

const ele = document.querySelector('#app');

In the above code, element with id (app) is selected.

ele.className += ' color-red border-yellow bg-green';
ele.classList.add(...['color-red', 'border-yellow', 'bg-green']);
ele.setAttribute('class', 'color-red border-yellow bg-green');

There are three ways to add a class name to the DOM. The first is by string concatenation, the second is by adding a value to an array, and the third is by setting the class attribute with a string.

How to clear classes from the DOM ?

ele.className = '';
ele.classList = [];
ele.setAttribute('class', '');

You can remove class names from the DOM using the same three methods: clearing the string, emptying the array, or setting the class attribute to an empty string.

Next is how to use $.fn in jQuery ?

In jQuery, you can use $.fn, which is an alias for jQuery. This feature is particularly useful for controlling DOM elements and managing all child elements under a parent, especially in dynamic web applications like chat apps. For jQuery CDN, you can get from this link https://releases.jquery.com/

        
Hello Word
    
    Text Red
    Background Green
    Border Yellow
    

In this function, an element with the ID 'app' is created and controlled by 'bx'. You can add custom functions to $.fn.box and call them from outside the box function using method chaining.

JavaScript, along with jQuery, offers powerful tools to enhance web applications efficiently. By leveraging built-in functions, extending prototypes, and using $.fn, developers can create more dynamic and interactive user experiences. Whether you're working on a simple project or a complex dynamic web app, mastering these techniques will help streamline your development process. I hope this article has provided valuable insights into utilizing JavaScript effectively. Happy coding!