Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Convert Characters to ASCII Code using JavaScript?
ASCII, stands for American Standard Code for Information Interchange which is a method used for encoding characters by assigning them to a specific numerical value. The numerical values thus assigned are known as ASCII codes and are extensively utilized in computer systems to represent various characters including letters, numbers, punctuation marks, and special control characters.
Example 1: Using charCodeAt()
The following code illustrates a program to receive input character from the user using the ‘charCodeAt()’ function and then display the corresponding ASCII code for that character.
Syntax
string.charCodeAt(index)
Algorithm
Step 1 :Start with declaring the HTML tag.
Step 2 :Adding some UI functionality to the web page using internal CSS.
Step 3 :Create an input field to allow users to enter characters.
Step 4 :Create a button that will trigger a function to convert the character to ASCII.
Step 5 :Create a script tag.
Step 6 :Declare a convert function inside the <script> tag.
Step 7 :Declare the input variable to take input from users.
Step 8 :Use the charCodeAt() function to convert characters into 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 index as parameters and returns the character's ASCII code at that index. The user enters a character in an input field in the HTML example. When the "Convert" button is clicked, the JavaScript code retrieves the character, applies the charCodeAt() function, and displays the ASCII code on the webpage.
Example 2 − Using codePointAt()
The codePointAt() function is an inherent method in JavaScript for strings. It accurately obtains the Unicode code point value of the character at the determined index.
In this particular code it is employed to retrieve the Unicode code point value of the initial character from the users input and exhibit it as output.
Syntax
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 provided code utilises a JavaScript function called "codePointAt()" to transform characters into their corresponding Unicode code points. It comprises an input field where you can type a character. Upon clicking the "Convert" button, the code calculates and presents the Unicode code point of the entered character. The output is displayed in a paragraph element with the id "output." This functionality conveniently lets you obtain a character's Unicode code point value.
Conclusion
Converting characters to ASCII code in JavaScript is a fundamental operation with practical applications in various programming scenarios. By utilizing methods like charCodeAt() and charPointAt(), developers can easily obtain the ASCII code of a character or a Unicode code point value. Whether you need to work specifically with ASCII codes or handle a broader range of characters, JavaScript provides these versatile methods to assist you in performing character−to−ASCII conversions efficiently and accurately.
1K+ Views
