★ Miscellaneous JavaScript Codes

miscellaneous.js

//-------------------------------------------------------
// Functions to shorten querySelector* calls
//-------------------------------------------------------

function qs( cls )
{
	return document.querySelector( cls );
}

function qsa( cls )
{
	return document.querySelectorAll( cls );
}

// Examples
qs( '.box' ).innerText = 'Hello World!';
qsa( '.box' )[ 0 ].innerText = 'Hello Universe!';


//-------------------------------------------------------
// Summary of 'for / in' & 'for / of' loop
//-------------------------------------------------------

let fruits = [ 'apple', 'orange', 'mango' ];

// for / of loop
for ( e of fruits )
{
	// e is now an element of the array
	console.log( e ); // Output: apple, orange, mango
}

// for / in loop
for ( i in fruits )
{
	// i is now an index of the array
	console.log( i ); // Output: 0, 1, 2
}


//-------------------------------------------------------
// Page Reload Related Codes
//-------------------------------------------------------

// Reload current page
location.reload();
// Ref: https://developer.mozilla.org/en-US/docs/Web/API/Location/reload

// Reload page at an interval
setTimeout( function(){ location.reload(); }, 30 * 1000 ); // Reload at every 30 seconds
// Alternative
setTimeout( () => { location.reload(); }, 30 * 1000 ); // Reload at every 30 seconds
// Ref: https://developer.mozilla.org/en-US/docs/Web/API/setTimeout


//-------------------------------------------------------
// Location Related Codes
//-------------------------------------------------------

// Get current location
const currentLocation = location.href;
// Ref: https://developer.mozilla.org/en-US/docs/Web/API/Window/location

// Redirect to new location
location.href = 'https://example.com/';
// Ref: https://www.javascripttutorial.net/javascript-bom/javascript-redirect/

// Open a new tab
open( 'https://example.com/' );
// Ref: https://developer.mozilla.org/en-US/docs/Web/API/Window/open


//-------------------------------------------------------
// Regular Expression / Regex
//-------------------------------------------------------

// Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp

// Test the existance of a string
let myString = 'Hello, World!';
let myRegex = /Hello/;
let result = myRegex.test( myString ); // Returns true / false
console.log( result );
// Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test

// Extract a part of a string
let myString = 'Hello, World!';
let myRegex = /Hello/;
let result = myString.match( myRegex );
console.log( result );
// Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match

// Also, check this https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec


//-------------------------------------------------------
// Miscellaneous Codes
//-------------------------------------------------------

// Encode a string
const encodedString = encodeURIComponent( 'Hello World!' );
// Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent

// Check if an element exists
if ( document.body.contains( document.querySelector( '.box' ) ) )
{
	console.log( 'Element exists!' );
}
// Ref: https://developer.mozilla.org/en-US/docs/Web/API/Node/contains

// Copy to clipboard
navigator.clipboard.writeText( 'Hello World!' );
navigator.clipboard.writeText( document.querySelector( '.targetClass' ).value );
// Ref: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText

// Text area auto grow script
for ( e of document.querySelectorAll( 'textarea' ) )
{
	for ( s of [ 'keyup', 'keydown', 'change', 'cut', 'paste', 'drop' ] )
	{
		e.addEventListener( s, resizeTextarea );
	}
}
function resizeTextarea()
{
	this.style.height = 'auto';
	this.style.height = this.scrollHeight + 'px';
}

// Add the number of links in the title
document.querySelector( 'title' ).innerText += ' [ ' + document.querySelectorAll( 'a' ).length + ' ]';

// A list of months in JS Array
months = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ];