search

Home  >  Article  >  Web Front-end  >  How to convert characters to ASCII codes using JavaScript?

How to convert characters to ASCII codes using JavaScript?

WBOY
WBOYforward
2023-08-29 09:25:021239browse

如何使用 JavaScript 将字符转换为 ASCII 代码？

ASCII, which stands for American Standard Code for Information Interchange, is a method of encoding characters by assigning them to specific numerical values. Numeric values ​​so assigned are called ASCII codes and are widely used in computer systems to represent a variety of characters, including letters, numbers, punctuation marks, and special control characters.

Example 1: Using charCodeAt()

The following code illustrates a program that uses the "charCodeAt()" function to receive a character entered by the user and then displays the corresponding ASCII code for the character.

grammar

string.charCodeAt(index)

algorithm

Step 1: Start by declaring HTML tags.

Step 2: Add some UI functionality to the web page using internal CSS.

Step 3: Create an input field to allow the user to enter characters.

Step 4: Create a button that will trigger a function that converts characters to ASCII.

Step 5: Create script tag.

Step 6: Declare a conversion function within the <script> tag. </script>

Step 7: Declare input variables to obtain user input.

Step 8: Use the charCodeAt() function to convert characters to ASCII values.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Character to ASCII Converter</title>
//CSS Styling from here
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
      margin: 0;
      padding: 20px;
      text-align: center;
    }

    h1 {
      color: #333;
    }

    .container {
      max-width: 400px;
      margin: 0 auto;
      background-color: #fff;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    input[type="text"] {
      width: 100%;
      padding: 10px;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      border-radius: 3px;
      box-sizing: border-box;
      font-size: 16px;
    }

    button {
      width: 100%;
      padding: 10px;
      background-color: #4caf50;
      color: #fff;
      border: none;
      border-radius: 3px;
      cursor: pointer;
      font-size: 16px;
    }

    p {
      margin-top: 10px;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Character to ASCII Converter</h1>
    //Designing input area for user
    <input type="text" id="inputText" placeholder="Enter a character">
    //creating button that convert the value
    <button onclick="convert()">Convert</button>
    <p id="output"></p>
  </div>

  <script>
  //Javascript code for converting characters to ASCII code 
  //creating function that will invoke as the user click on the button
    function convert() {
      const input = document.getElementById("inputText").value;
      const asciiCode = input.charCodeAt(0);
      document.getElementById("output").textContent = `ASCII code: ${asciiCode}`;
    }
  </script>
</body>
</html>

This built-in function takes a string and an index as arguments and returns the ASCII code of the character at that index. The user enters characters into the input field in the HTML example. When you click the Convert button, the JavaScript code retrieves the characters, applies the charCodeAt() function, and displays the ASCII code on the web page.

Example 2 - Using codePointAt()

The codePointAt() function is an inherent method of handling strings in JavaScript. It accurately obtains the Unicode code point value of the character at the determined index.

In this particular code, it is used to retrieve the Unicode code point value of the initial character from the user input and display it as output.

grammar

const codePoint = input.codePointAt(0);

Example

<!DOCTYPE html>
<html>
<head>
  <title>Character to ASCII Converter Using charPointAt()</title>
  //CSS Styling from here
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
      margin: 0;
      padding: 20px;
      text-align: center;
    }

    h1 {
      color: #333;
    }

    .container {
      max-width: 400px;
      margin: 0 auto;
      background-color: #fff;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    input[type="text"] {
      width: 100%;
      padding: 10px;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      border-radius: 3px;
      box-sizing: border-box;
      font-size: 16px;
    }

    button {
      width: 100%;
      padding: 10px;
      background-color: #4caf50;
      color: #fff;
      border: none;
      border-radius: 3px;
      cursor: pointer;
      font-size: 16px;
    }

    p {
      margin-top: 10px;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Character to ASCII Converter Using charPointAt()</h1>
     //Designing input area for user
    <input type="text" id="inputText" placeholder="Enter a character">
    <button onclick="convert()">Convert</button>
    <p id="output"></p>
  </div>
   //Javascript code for converting characters to ASCII code
  <script>
     //creating function that will invoke as the user click on the button
    function convert() {
      const input = document.getElementById("inputText").value;
      const codePoint = input.codePointAt(0);
      document.getElementById("output").textContent = `Unicode code point: ${codePoint}`;
    }
  </script>
</body>
</html>

The code provided utilizes a JavaScript function called "codePointAt()" to convert characters to their corresponding Unicode code points. It contains an input field where you can type characters. After clicking the "Convert" button, the code will calculate and display the Unicode code points of the entered characters. The output is displayed in the paragraph element with ID "output". This feature allows you to easily obtain the Unicode code point value of a character.

in conclusion

Converting characters to ASCII codes in JavaScript is a basic operation that has practical applications in various programming scenarios. Developers can easily obtain the ASCII code or Unicode code point value of a character by using methods such as charCodeAt() and charPointAt(). Whether you need to work specifically with ASCII codes or with a wider range of characters, JavaScript provides these versatile methods to help you perform character-to-ASCII conversion efficiently and accurately.

The above is the detailed content of How to convert characters to ASCII codes using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to create an if statement in JavaScript to check if a variable is equal to a certain word?Next article：How to create an if statement in JavaScript to check if a variable is equal to a certain word?

Related articles

See more