Bits, Bytes, and Bases: Write a JavaScript Binary/Decimal/Hexadecimal Converter

Project Summary

Difficulty	6 – 7
Time required	Short (several days)
Prerequisites	You should be able to: write a basic HTML file with a text editing program (like Notepad); create HTML `<FORM>` elements for user input; write basic JavaScript functions using `Arrays`, `Strings` and simple flow control statements (e.g., `if...else`, and `for` or `while` loops). Help is available for each of these topics. See the Introduction section for details.
Material Availability	Readily available
Cost	Very Low (under $20)
Safety	No issues

Donate to Science Buddies

Sponsor

Sponsored by a generous grant from Symantec Corporation

Internet Safety Tips

Get educated about online safety
with help from Symantec.

symantec.com/norton/familyresources

Abstract

This is a challenging first computer science project. You'll learn the basics of how digital devices can represent numbers using only 0's and 1's, and you'll write a JavaScript program to convert numbers between binary, decimal and hexadecimal notation.

Objective

The objective of this project is to write a JavaScript program that can convert numbers between their binary, decimal and hexadecimal representations. The number to be converted can be supplied as a binary, decimal or hexadecimal number. The program then automatically displays the number in the other two representations.

Introduction

This is an example of an advanced first-time programming project. You will learn the basics of how digital devices can represent numbers using only 0's and 1's. You will be writing a simple program to convert numbers between binary, decimal and hexadecimal notation.

Prerequisites

It is assumed that you know how to use a text editor to write an HTML file containing your program, and that you know how to load and run the file in your browser.

You will also need to know the basics of how JavaScript functions can be written to work with HTML FORM elements. Specifically, you will be working with HTML INPUT elements, and using JavaScript String and Array objects and for loop statements in your functions.

If you need help with any of this, read the Introduction section in: "ABC's of Programming: Writing a Simple "Alphabetizer" with JavaScript." For help with writing loops, read the Introduction section in: "Paragraph Stats: Writing a JavaScript Program to "Measure" Text."

Decimal and Digital: Base 10 and Base 2

You've been using decimal (base 10) numbers all your life, so by now they are second nature to you. You probably know that there are other ways to represent numbers. For example, computers and other digital devices store everything using binary (base 2) numbers, that is, numbers made up of only 0's and 1's. This is because it is much easier to distinguish between binary levels (on/off) than between the ten different levels (0–9) it would take to encode decimal numbers.

So how can you represent numbers using only 0's and 1's? Well, it's the same principle as for decimal numbers. Each digit represents a place value. For decimal (base 10) numbers, the place values are increasing powers of ten, as shown in the table below.

Decimal Representation of 3,897
place value (words)	thousands	hundreds	tens	ones
exponential notation	10³	10²	10¹	10⁰
which is the same as	10×10×10	10×10	10	1
N	1000	100	10	1
digit indicates how many N	3	8	9	7

Quick tutorial on exponential notation (you can skip this if you know it already).

Exponential notation is a compact way of expressing multiples of a number. For example, as you saw in the table:

10³ = 10×10×10 = 1000

An equivalent statement in words is: Ten to the third power equals ten times ten times ten which is also equal to one thousand.

The exponent (3, in this case), tells how many times to multiply the base (10, in this case). Any number raised to the 0^th power is equal to 1. That's it!

For binary (base 2) numbers it is similar, but now there are only two digits available (0 and 1), and the place values are increasing powers of two. The next table shows the same number (3,897) in binary representation. Obviously, it takes a lot more digits than in base ten!

Binary Representation of 3,897 is: 1111 0011 1001
exponential notation	2¹¹	2¹⁰	2⁹	2⁸	2⁷	2⁶	2⁵	2⁴	2³	2²	2¹	2⁰
N	2048	1024	512	256	128	64	32	16	8	4	2	1
digit indicates how many N	1	1	1	1	0	0	1	1	1	0	0	1

Check it out for yourself and make sure that it all adds up!

Bits and Bytes

Each binary digit is called a bit. Use the table above to see how many bits it takes to represent 3,897. Go ahead, we'll wait.

That's right, twelve bits. The right-most bit (the "one" bit) is the least significant bit and the left-most bit (the "two-thousand forty-eight" bit) is the most significant bit. Since it is easy to lose your place when reading a long string of 0's and 1's, binary numbers are often displayed in 4-bit groups, like this: 1111 0011 1001.

Two of these 4-bit groups (eight bits altogether) make a byte, which is the basic unit for measuring the size of a digital memory or storage device. What can you store in one byte? Think about how many different numbers can be encoded with one byte. (It may help to make an analogy with decimal numbers first: how many different numbers can you encode with 2 digits? how many with 3 digits?)

A kilobyte (abbreviated kB) is not 1000 bytes, as you might think if you know your metric prefixes. Since this is the digital world, everything is in powers of 2, so a kilobyte is 1024 bytes ( = 2¹⁰ bytes). Similarly, a megabyte (MB) is 1024×1024 bytes ( = 1,048,576 bytes = 2²⁰ bytes).

Hexadecimal: Base 16

Binary numbers are fine for computers, but are not particularly handy for people to use. However, when you are programming a machine that works with binary numbers, it is sometimes handy to work with numbers represented as powers of 2 instead of powers of 10. Hexadecimal notation (base 16) is often used for this reason. As you would expect, in hexadecimal there are 16 digits, and each digit represents a power of 16. We use decimal digits for 0–9, and the first six letters of the alphabet, A–F, for the hexadecimal digits corresponding to decimal numbers 10–15. The table below shows the first 16 numbers (starting with zero) in binary, hexadecimal and decimal notation.

Binary, Hexadecimal and Decimal Numbers
Binary	0000	0001	0010	0011	0100	0101	0110	0111	1000	1001	1010	1011	1100	1101	1110	1111
Hexadecimal	0	1	2	3	4	5	6	7	8	9	A	B	C	D	E	F
Decimal	0	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15

Since 16 = 2⁴, it is not surprising to see that one hexadecimal digit corresponds to 4 bits. Can you see what the hexadecimal representation for 3,897 would be?

Another interesting fact that you may have noticed is that the least significant bit of the binary representation indicates whether the number is odd or even. Error correction code algorithms for transmitting and receiving data (used in everything from NASA satellite transmissions to cell phones to CD players) often make use of this property.

An easy way to have your input elements aligned neatly is to use an HTML <TABLE> element (an example is shown below). The table has two columns. Each input is a separate row in the table. The labels are in the first column, and the input fields are in the second column. The labels are aligned at the right-hand edge of their column, and the input fields are aligned at the left-hand edge of their column. The HTML code for this sample table is also shown (beneath the table itself).

Binary/Decimal/Hexadecimal Converter Interface Example
Binary:
Decimal:
Hexadecimal:

<FORM METHOD="post"> <TABLE BORDER=1 ALIGN=CENTER CELLPADDING="10%"> <TR> <TH COLSPAN="2">Binary/Decimal/Hexadecimal Converter Interface Example</TH> </TR> <TR> <TD ALIGN=RIGHT><B>Binary: </B></TD> <TD ALIGN=LEFT><INPUT NAME="bin" VALUE="0" "readonly" onChange="ConvertBin(form)" SIZE=10></INPUT></TD> </TR> <TR> <TD ALIGN=RIGHT><B>Decimal:</B></TD> <TD ALIGH=LEFT><INPUT NAME="dec" VALUE="0" "readonly" onChange="ConvertDec(form)" SIZE=10></INPUT></TD> </TR> <TR> <TD ALIGN=RIGHT><B>Hexadecimal:</B></TD> <TD ALIGN=LEFT><INPUT NAME="hex" VALUE="0" "readonly" onChange="ConvertHex(form)" SIZE=10></INPUT></TD> </TR> </TABLE> </FORM>

Notes on the HTML table code. Note that the size of each input element in the table is the same. You will have to figure out appropriate sizes for your input elements so that they accommodate the same range of values (remember that binary numbers generally require more digits). Notice that the each of the input elements uses the onChange event to call a JavaScript function. Thus, when the user changes a value, this function is called to update the values for the other two representations. We've only attempted to cover a few key points to get you started, not every detail about how the table is put together. There is a reference in the Bibliography with detailed information on writing HTML tables. By using that reference, you should be able to answer any remaining questions you have about the table.

The first entry in the Bibliography is an excellent reference for information on writing a base conversion algorithm. Combined with the material available here, you should be able to put together a binary/decimal/hexadecimal converter.

By the way, so you can check your answers to the questions from earlier in the Introduction:

One byte can encode 256 (2⁸) unique values.
The hexadecimal representation for 3,897 is "F39". Each hexadecimal digit corresponds to 4 bits of the binary representation: 1111 0011 1001.

Terms, Concepts and Questions to Start Background Research

To do this project, you should understand the following terms and concepts (do background research to fill in any gaps in your knowledge):

binary (base 2),
decimal (base 10),
hexadecimal (base 16),
bit, byte, kilobyte (kB), megabtye (MB),
radix (number base).

basic HTML concepts:

start tags and end tags,
comments,
the <HEAD> section,
the <SCRIPT> section,
the <BODY> section,
the <FORM> section,
the <INPUT> tag,
the <TABLE> tag, for aligning your s neatly.

JavaScript concepts:

functions,
variables,
objects,
properties,
methods,
events,
arrays.

general programming concepts:

reserved words,
control statements (e.g., "if...else" statements, "for" and "while" loops)
operators:
- arithmetic operators: plus, minus, times, divide, modulus (+, -, *, /, %),
- assignment operators: e.g., =,+=,-=,*=,/=,
- comparison operators: e.g., <,>,<=,>=,==,
- logical operators: AND, OR and NOT, (&&,||,!).

Questions

Using the binary representation of integers described in the Introduction, how many unique integers can be represented with 8 bits? With 12 bits? With n bits, where n is a positive integer?
Using the hexadecimal representation of integers described in the Introduction, how many unique integers can be represented with 2 hexadecimal digits? With 3 hexadecimal digits? With n hexadecimal digits, where n is a positive integer?

Bibliography

Explanation of a JavaScript implementation of base conversion:
http://www.cut-the-knot.org/recurrence/conversion.shtml
You can find a step-by-step JavaScript tutorial at the link below. After studying the tutorial, you should be able to answer all of the questions listed above, and you'll be ready to write a simple calculator.
http://www.webteacher.com/javascript/index.html
This webpage by Matt Gemmell describes what programming actually is:
http://www.scotlandsoftware.com/articles/programming/
HTML Forms reference:
http://www.w3.org/TR/REC-html40/interact/forms.html
HTML Tables reference:
http://www.w3.org/TR/REC-html40/struct/tables.html
A list of reserved words in JavaScript (you cannot use these words for function or variable names in your program, because they are reserved for the programming language itself):
http://www.javascriptkit.com/jsref/reserved.shtml
A JavaScript reference:
http://wp.netscape.com/eng/mozilla/3.0/handbook/javascript/
If you get interested and start doing a lot of programming, you may want to try using a text editor that is a little more sophisticated than Notepad. An editor designed for programming can help with formatting, so that your code is more readable, but still produce plain text files. This type of editor can also do "syntax highlighting" (e.g., automatic color-coding of HTML) which can help you to find errors. Here is a free programmer's editor that you can try:
http://www.crimsoneditor.com/

Materials and Equipment

computer with Web browser (e.g., Internet Explorer, Firefox)
text editing program (e.g., Notepad)

Experimental Procedure

Using what you have learned about integer representation in different bases and programming in Javascript, create a binary/decimal/hexadecimal converter.
The program should have separate input fields for each type of number. Remember that binary representations generally use more digits than decimal or hexadecimal representations, so adjust the sizes of your input fields accordingly.
Use the input field's onChange event so that when the user enters a number in one of the fields, the other two are updated with the new number, converted to the appropriate base.
There are several sub-tasks here. Take the sub-tasks one at a time, and gradually build up the capabilities of your program.
Verify that the code for each sub-task is working properly before moving on to the next sub-task.
Test your program by verifying conversions from each type of input.

Here are some generally applicable programming tips to keep in mind as you get started with this project.

Plan your work.
- Methodically think through all of the steps to solve your programming problem.
- Try to parcel the tasks out into short, manageable functions.
- Think about the interface for each function: what arguments need to be passed to the function so that it can do its job?
Use careful naming, good formatting, and descriptive comments to make your code understandable.
- Give your functions and variables names that reflect their purpose in the program. A good choice of names makes the code more readable.
- Indent the statements in the body of a function so it is clear where the function code begins and ends.
- Indent the statements following an "if", "else", "for", or "while" control statement. That way you can easily see what statements are executed for a given branch or loop in your code.
- Descriptive comments are like notes to yourself. Oftentimes in programming, you'll run into a problem similar to one you've solved before. If your code is well-commented, it will make it easier to go back and re-use pieces of it later. Your comments will help you remember how you solved the previous problem.
Work incrementally.
- When you are creating a program, it is almost inevitable that along the way you will also create bugs. Bugs are mistakes in your code that either cause your program to behave in ways that you did not intend, or cause it to stop working altogether. The more lines of code, the more chances for bugs. So, especially when you are first starting, it is important to work incrementally. Make just one change at a time, make sure that it works as expected and then move on.
- With JavaScript, this is easy to do. To check your code, all you need to do is use your web browser to open the HTML file containing your code. After you've made a change in the code with your text editor, just save the file, then switch to your browser and hit the re-load page button to see the change in action.
- Test to make sure that your code works as expected. If your code has branch points that depend on user input, make sure that you test each of the possible branch points to make sure that there are no surprises.
- Also, it's a good idea to backup your file once in awhile with a different name. That way, if something goes really wrong and you can't figure it out, you don't need to start over from scratch. Instead you can go back to an earlier version that worked, and start over from there.
- As you gain more experience with a particular programming environment, you'll be able to write larger chunks of code at one time. Even then, it is important to remember to test each new section of code to make sure that it works as expected before moving on to the next piece. By getting in the habit of working incrementally, you'll reduce the amount of time you spend identifying and fixing bugs.
When debugging, work methodically to isolate the problem.
- We told you above that bugs are inevitable, so how do you troubleshoot them? Well, the first step is to isolate the problem: which line caused the program to stop working as expected? If you are following the previous tip and working incrementally, you can be pretty sure that the problem is with the line you just wrote.
- Check for simple typos first. A misspelled function name will not be recognized. In JavaScript, a misspelled variable name simply creates a new variable. This is an easy mistake to make, and can be hard to find.
- Avoid using reserved words as variable or function names.
Test your program thoroughly.
- You should test the program incrementally as you write it, but you should also test the completed program to make sure that it behaves as expected.

Variations

Add functions to check each input to make sure that only appropriate digits are entered. Use the built-in JavaScript alert() function to pop up a message telling the user what the problem is and asking them to enter a valid number.
Generalize your converter to handle base 2 to base 36 (when the alphabet runs out of letters for more digits).
The converter you wrote is designed for unsigned integers (the positive integers plus zero). What about negative numbers? For a more advanced project, do research to learn how negative numbers are represented in binary notation and extend your converter to handle negative numbers.
What about rational numbers? For a much more advanced project, do research to learn how "floating point" numbers are represented in binary notation and extend your converter to handle these numbers.

For more science project ideas in this area of science, see Computer Science Project Ideas.

Credits

Andrew Olson, Ph.D., Science Buddies

Last edit date: 2006-01-20 13:49:52

Career Focus

If you like this project, you might enjoy exploring careers in Computer Science.

Computer Programmer
Computers are essential tools in the modern world, handling everything from traffic control, car welding, movie animation, shipping, aircraft design, and social networking to book publishing, business management, music mixing, health care, agriculture, and online shopping. Computer programmers are the people who write the instructions that tell computers what to do. Computer Software Engineer
Are you interested in developing cool video game software for computers? Would you like to learn how to make software run faster and more reliably on different kinds of computers and operating systems? Do you like to apply your computer science skills to solve problems? If so, then you might be interested in the career of a computer software engineer.

Network Systems and Data Communications Analyst
Computers are an important part of our lives. We use computers to hold and process data, to control manufacturing factories, and to surf the Internet. We are all part of many different kinds of computer networks that are continually sharing information. The role of the network systems and data communications analyst is to design, model, and evaluate computer networks so that they can share information seamlessly. This is an exciting career for those people who enjoy working with rapidly changing technology. Computer Hardware Engineer
Whether you are playing video games, surfing the Internet, or writing a term paper, computers are an integral part of our daily lives. Computer hardware engineers work to make computers faster, more robust, and more cost-effective. They design the microprocessor chips that make your computer function, along with the equipment that makes computing easy and fun to do.

Join Science Buddies
Become a Science Buddies member! It's free! As a member you will be the first to receive our new and innovative project ideas, news about upcoming science competitions, science fair tips, and information on other science related initiatives.

Support Science Buddies
If this website has helped you, won't you consider a small gift so we may continue developing resources to help teachers and students?

	Computer Programmer Computers are essential tools in the modern world, handling everything from traffic control, car welding, movie animation, shipping, aircraft design, and social networking to book publishing, business management, music mixing, health care, agriculture, and online shopping. Computer programmers are the people who write the instructions that tell computers what to do.			Computer Software Engineer Are you interested in developing cool video game software for computers? Would you like to learn how to make software run faster and more reliably on different kinds of computers and operating systems? Do you like to apply your computer science skills to solve problems? If so, then you might be interested in the career of a computer software engineer.

	Network Systems and Data Communications Analyst Computers are an important part of our lives. We use computers to hold and process data, to control manufacturing factories, and to surf the Internet. We are all part of many different kinds of computer networks that are continually sharing information. The role of the network systems and data communications analyst is to design, model, and evaluate computer networks so that they can share information seamlessly. This is an exciting career for those people who enjoy working with rapidly changing technology.			Computer Hardware Engineer Whether you are playing video games, surfing the Internet, or writing a term paper, computers are an integral part of our daily lives. Computer hardware engineers work to make computers faster, more robust, and more cost-effective. They design the microprocessor chips that make your computer function, along with the equipment that makes computing easy and fun to do.

Related Links

Project Summary

Donate to Science Buddies

Sponsor

Career Focus