7 most common questions about JavaScript

JavaScript is one of the most popular and versatile programming languages in the world today. As a fundamental part of web development, JavaScript powers interactive web pages and applications. However, as with any complex language, developers often have questions, especially when starting out or delving into advanced concepts.

In this blog, you'll get answer of the most common questions about JavaScript, providing clear and concise explanations to help you better understand the language.

1. What is JavaScript, and why is it so important?
2. How to capitalize first letter in a string javascript?
3. How to add attribute to json object in javascript​?
4. How to separate the digits of a number in javascript​?
5. How to draw Pacman ghost in javascript​?
6. How to play a .mp3 file in javascript?
7. How to delete a task row in javascript?

1. What is JavaScript, and why is it so important?

JavaScript is a dynamic, high-level, interpreted programming language that is primarily used for creating interactive effects within web browsers. It enables developers to manipulate HTML and CSS, handle events, validate forms, create animations, and even interact with servers without reloading the entire page (thanks to AJAX).

JavaScript is important because:

• Interactivity: Without JavaScript, websites would be static. It allows for dynamic content such as animations, form validation, and much more.
• Versatile: While it's most commonly used for client-side scripting in browsers, JavaScript is also used for server-side development (Node.js), mobile apps (React Native), and even desktop applications.
• Support: Virtually all modern web browsers support JavaScript, making it the standard language for client-side scripting.

2. How to capitalize first letter in a string javascript?

Need to make the first letter of a string uppercase in JavaScript? JavaScript provides a straightforward way to do it. This little function will handle it for you:

jsCopy
function capitalizeFirstLetter(str) {
  if (!str) return ""; // Handle empty strings
  return str.charAt(0).toUpperCase() + str.slice(1);
}

// Example usage:
const input = "hello world";
const output = capitalizeFirstLetter(input);
console.log(output); // Output: "Hello world"

This function works by pinpointing the very first character of your string using str.charAt(0) and then instantly transforming it to uppercase with .toUpperCase(). After that, it grabs the rest of the string from the second character onwards with str.slice(1). Finally, it cleverly combines these two pieces - the uppercase first letter and the remaining part of the string - to give you the capitalized result you're looking for. Simple and effective!

3. How to add attribute to json object in javascript​?

Working with JSON objects in JavaScript and need to add a new attribute, or maybe a key-value pair? JavaScript gives you a couple of really handy ways to do this using either the dot (.) or bracket ([]) notation. Take a look at this example:

jsCopy
let jsonObject = { name: "John", age: 30 };

// Adding an attribute using dot notation
jsonObject.city = "New York";

// Adding an attribute using bracket notation
jsonObject["country"] = "USA";

// Adding an dynamic key using a variable
let key = "color";
jsonObject[key] = "blue";

console.log(jsonObject);
// Output: { name: "John", age: 30, city: "New York", country: "USA" }

If you're adding a straightforward attribute, you can just use the dot notation like jsonObject.city = "New York";. Think of it as directly attaching a new label to your object. Now, if you've got a key name that's a bit more complex, maybe stored in a variable, or has spaces or special characters, then bracket notation is your friend! You'd use it like jsonObject["country"] = "USA"; or even with a variable like we did with jsonObject[key] = "blue";. Both ways get the job done, giving you flexible options for updating your JSON objects!

4. How to separate the digits of a number in javascript​?

Ever needed to work with the individual digits of a number in JavaScript? It's a bit like taking apart a Lego creation piece by piece! Luckily, JavaScript gives you a few neat ways to do this. Let's explore some straightforward methods:

i. Using split() after converting to a string

jsCopy
let number = 12345;
let digits = number.toString().split("").map(Number);

console.log(digits);
// Output: [1, 2, 3, 4, 5]

This method is like a quick magic trick. We first turn your number into a string using toString(). Think of it as writing the number out in words. Then, split("") acts like scissors, cutting that string into individual characters, each digit becoming its own little string. Finally, map(Number) is like saying, "Hey, JavaScript, remember these are supposed to be numbers!" and it converts each digit-string back into a proper number. Easy peasy!

ii. Using Mathematical Operations

jsCopy
let number = 12345;
let digits = [];

while (number > 0) {
  digits.unshift(number % 10); // Extract the last digit
  number = Math.floor(number / 10); // Remove the last digit
}

console.log(digits);
// Output: [1, 2, 3, 4, 5]

This way is a bit like counting backwards. number % 10 is like asking for the remainder when you divide by 10 – which cleverly gives you the last digit. Math.floor(number / 10) then chops off the last digit from our number. We keep doing this in a loop until our number becomes zero. And digits.unshift()? It just makes sure we add each digit to the front of our list so they end up in the correct order – just like reading the digits from left to right!

iii. Using ES6 Spread Syntax

jsCopy
let number = 12345;
let digits = [...number.toString()].map(Number);

console.log(digits);
// Output: [1, 2, 3, 4, 5]

This is a super concise way to achieve the same thing as our first method. [...number.toString()] uses the spread syntax (the ...) to instantly unpack the string of our number into individual characters, creating an array. Then, just like before, map(Number) converts those character digits back into actual numbers. It's a really slick and modern way to get the job done!

5. How to draw Pacman ghost in javascript​?

To draw a Pac-Man ghost in JavaScript, use the HTML5 canvas element along with the CanvasRenderingContext2D API. Here's how can do it:

htmlCopy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pac-Man Ghost</title>
</head>
<body>
  <canvas id="pacman-ghost" width="200" height="200"></canvas>
  <script>
    const canvas = document.getElementById("pacman-ghost");
    const ctx = canvas.getContext("2d");

    function drawGhost(x, y, color) {
      const width = 100; // Ghost width
      const height = 100; // Ghost height
      const eyeSize = 10;
      const pupilSize = 5;

      // Draw the body
      ctx.beginPath();
      ctx.arc(x + width / 2, y + height / 2, width / 2, Math.PI, 0, false); // Head (top half-circle)
      ctx.lineTo(x + width, y + height); // Right side
      const step = width / 8;
      for (let i = 0; i < 8; i++) {
        // Bottom zigzag
        ctx.lineTo(x + width - i * step - step / 2, y + height + (i % 2 === 0 ? 10 : 0));
      }
      ctx.closePath();
      ctx.fillStyle = color;
      ctx.fill();

      // Draw eyes
      ctx.fillStyle = "white";
      ctx.beginPath();
      ctx.arc(x + width / 3, y + height / 3, eyeSize, 0, 2 * Math.PI); // Left eye
      ctx.arc(x + (2 * width) / 3, y + height / 3, eyeSize, 0, 2 * Math.PI); // Right eye
      ctx.fill();

      // Draw pupils
      ctx.fillStyle = "black";
      ctx.beginPath();
      ctx.arc(x + width / 3, y + height / 3, pupilSize, 0, 2 * Math.PI); // Left pupil
      ctx.arc(x + (2 * width) / 3, y + height / 3, pupilSize, 0, 2 * Math.PI); // Right pupil
      ctx.fill();
    }

    // Draw a red ghost at (50, 50)
    drawGhost(50, 50, "red");
  </script>
</body>
</html>

Think of creating this ghost drawing in stages, like building it up piece by piece on your screen! First off, we need our drawing surface – and that's where the canvas element comes in. It's essentially our digital canvas where we can paint our spooky friend. When it comes to shaping the ghost itself, we start with the head, drawing a smooth, rounded top using something called ctx.arc(). Imagine it as sketching a perfect semi-circle to begin. Then, for that classic ghosty bottom, we create a zigzag edge. This isn't done with curves, but with lots of little straight lines using lineTo() – it's like drawing a jagged, wave-like pattern to give the ghost its fluttering appearance.

Want to give your ghost a different vibe? Changing its color is super easy – just pick a new shade when you're telling the code to draw the ghost, and you can have ghosts of any color you can imagine! And of course, what's a ghost without eyes? We add a pair of round, white eyes using ctx.arc() again, and then pop in those smaller, dark pupils in the middle to give it that spooky stare. That's the magic behind bringing our canvas ghost to life!

6. How to play a .mp3 file in javascript?

Want to spice up your webpage with sound? Playing MP3 files is actually pretty straightforward in JavaScript! You can use the built-in tools of the web browser to easily add music or sound effects. Let's look at a couple of simple ways to do it:

i. Using audio element

htmlCopy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Play MP3</title>
</head>
<body>
  <audio id="audioPlayer" src="example.mp3"></audio>
  <button onclick="playAudio()">Play</button>
  <button onclick="pauseAudio()">Pause</button>

  <script>
    const audio = document.getElementById("audioPlayer");

    function playAudio() {
      audio.play(); // Starts playback
    }

    function pauseAudio() {
      audio.pause(); // Pauses playback
    }
  </script>
</body>
</html>

This method is all about using the audio element directly in your HTML. Think of audio as embedding a simple music player right into your webpage. We give it an id so we can easily find it with JavaScript, and tell it where our MP3 file (src="example.mp3") is located. Then, we just add a couple of buttons - one to "Play" and one to "Pause". The JavaScript part is super simple too! We grab our audio player element using its id, and then create two little functions: playAudio() which tells the player to start playing with audio.play(), and pauseAudio() to stop it with audio.pause(). That's it – basic sound control right there!

ii. Using audio Constructor

htmlCopy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Play MP3</title>
</head>
<body>
  <button onclick="playAudio()">Play</button>
  <button onclick="pauseAudio()">Pause</button>

  <script>
    const audio = new Audio("example.mp3");

    function playAudio() {
      audio.play(); // Starts playback
    }

    function pauseAudio() {
      audio.pause(); // Pauses playback
    }
  </script>
</body>
</html>

In this version, we're cutting out the audio element from the HTML. Instead, we create it dynamically in JavaScript using const audio = new Audio("example.mp3");. This is like saying "Hey JavaScript, build me an audio player and load 'example.mp3' into it!". The rest is almost identical to the first example. We still have our "Play" and "Pause" buttons, and the playAudio() and pauseAudio() functions work exactly the same way - audio.play() to start the music and audio.pause() to stop it.

7. How to delete a task row in javascript?

Ever wanted to make your webpage tables a bit more dynamic, allowing users to actually remove rows, like in a task list? It's simpler than you might think with JavaScript! We can make those "Delete" buttons actually work. Let's see how it's done:

htmlCopy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Delete Task Row</title>
</head>
<body>
  <table id="taskTable" border="1">
    <thead>
      <tr>
        <th>Task</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Task 1</td>
        <td><button onclick="deleteRow(this)">Delete</button></td>
      </tr>
      <tr>
        <td>Task 2</td>
        <td><button onclick="deleteRow(this)">Delete</button></td>
      </tr>
      <tr>
        <td>Task 3</td>
        <td><button onclick="deleteRow(this)">Delete</button></td>
      </tr>
    </tbody>
  </table>

  <script>
    function deleteRow(button) {
      // Get the parent <tr> of the button
      const row = button.parentNode.parentNode;

      // Remove the row from the table
      row.remove();
    }
  </script>
</body>
</html>

First, when you click a "Delete" button, we need to figure out which row it belongs to, so we can remove that whole row. The line const row = button.parentNode.parentNode; is doing just that! Think of button as the button you clicked. button.parentNode takes you one step up in the family tree to the parent of the button – which is the td cell containing the button. Then, .parentNode again takes you another step up to the parent of that td, which is the tr – the table row itself! So, row now holds the entire table row element that we want to get rid of.

Finally, row.remove(); is the magic line! It's like saying to that row, "Okay, you're outta here!" The remove() function is a simple way to tell the browser to just delete that HTML element (in our case, the table row) completely from the page. And just like that, the task row disappears from your table when you click "Delete"! Pretty neat, right?

Conclusion

JavaScript is a rich and powerful language, and understanding these common questions will help you build a strong foundation for more advanced concepts. Whether you are just starting out or are already working on complex web applications, a clear understanding of JavaScript’s core concepts will enhance your development experience.

Follow and Support me on Medium and Patreon. Clap and Comment on Medium Posts if you find this helpful for you. Thanks for reading it!!!