Tip of the day - JavaScript

Un trucchetto al giorno per mantenerti allenato o per conoscere qualcosa di nuovo sul magico mondo di JavaScript.

63

Work with the CSS classes of an element

2021-04-21 - JavaScript

1// JS Tip of the Day
2// Work with the CSS classes of an element
3
4// <p id="hero" class="steel-wing">Batman</p>
5
6let elem = document.querySelector('#hero');
7
8// Add multiple classes
9elem.classList.add('dark-knight', 'caped-crusader'); 
10// class="steel-wing dark-knight caped-crusader"
11
12// Remove multiple classes
13elem.classList.remove('steel-wing');
14// class="dark-knight caped-crusader"
15
16// Toggle a class
17elem.classList.toggle('dark-knight');
18// class="caped-crusader"
19
20elem.classList.toggle('dark-knight');
21// class="dark-knight caped-crusader"
22
23// Replace a class
24elem.classList.replace("caped-crusader", "batsy");
25
26// Check if an element has a class
27if (elem.classList.contains('dark-knight')) {
28	console.log("I'm the night!");
29}
30
31// Get the number of classes 
32console.log(elem.classList.length); // 2
#JStipoftheday
62

A tiny random ticker

2021-04-20 - JavaScript

1// JS Tip of the Day
2// Random Ticker
3
4let minDelay = 1000;
5let maxRandomDelay = 3000;
6
7let timerId = setTimeout(
8  function request(randomDelay) {
9    let tickDelay = Math.floor(Math.random() * randomDelay + minDelay);
10    console.log('tick', tickDelay);
11    timerId = setTimeout(request, tickDelay, randomDelay);
12  }, 
13  minDelay, 
14  maxRandomDelay
15);
#JStipoftheday
61

Displays tabular data as a table

2021-04-19 - JavaScript

1// JS Tip of the Day
2// Displays tabular data as a table
3
4console.table(['Batman', 'Superman', 'Green Arrow']);
5console.table({ name: 'Batman', weapon: 'Batarang', vehicle: 'Batmobile' });
6console.table([
7                { name: 'Batman', superPower: 'Money', partner: 'Robin' },
8				{ name: 'Superman', superPower: 'Strenght', partner: 'Wonder Girl' },
9             ]);
#JStipoftheday
60

How to detect the type of a function

2021-04-16 - JavaScript

1// JS Tip of the Day
2// How to detect the type of a function
3
4Object.prototype.toString.call(function() {}); // [object Function]
5Object.prototype.toString.call(function*() {}); // [object GeneratorFunction]
6Object.prototype.toString.call(async function() {}); // [object AsyncFunction]
#JStipoftheday
59

Simple and Quick Array Comparison (A better solution!)

2021-04-15 - JavaScript

1// JS Tip of the Day
2// Simple and Quick Array Comparison (A better solution)
3
4const arrayComparison = (firstArray, secondArray) =>
5  firstArray.length === secondArray.length &&
6  firstArray.every((v, i) => v === secondArray[i]);
7
8const heroes = ['Batman', 'Superman', 'Green Arrow'];
9const moreHeroes = [new String('Batman'), 'Superman', 'Green Arrow'];
10
11arrayComparison(heroes, moreHeroes); // false
12
13moreHeroes[0] = 'Batman';
14
15arrayComparison(heroes, moreHeroes); // true
#JStipoftheday

Preferisci ricevere i tips via mail? Iscriviti alla newsletter.

Iscriviti alla newsletter

Tip of the day - JavaScript

Hai in mente un progetto e vorresti realizzarlo?
Sei interessato a migliorare le tue competenze o quelle del tuo team in ambito di programmazione e sviluppo?

Anche se - semplicemente - vuoi prendere un caffè con noi o vedere la nostra collezione di Action Figures scrivici tramite questo form.

Questo sito è protetto da reCAPTCHA e si applicano le Norme sulla privacy e i Termini di servizio di Google.