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 103 102 101 100
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:
103 = 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 0th 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 211 210 29 28 27 26 25 24 23 22 21 20
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 ( = 210 bytes). Similarly, a megabyte (MB) is 1024×1024 bytes ( = 1,048,576 bytes = 220 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 = 24, 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 (28) 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

    Materials and Equipment

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

    Experimental Procedure

    1. Using what you have learned about integer representation in different bases and programming in Javascript, create a binary/decimal/hexadecimal converter.
    2. 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.
    3. 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.
    4. There are several sub-tasks here. Take the sub-tasks one at a time, and gradually build up the capabilities of your program.
    5. Verify that the code for each sub-task is working properly before moving on to the next sub-task.
    6. 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.

    1. 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?
    2. 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.
    3. 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.
    4. 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.
    5. 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.

    Credits

    Andrew Olson, Ph.D., Science Buddies


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

    		•

    I Did this Project!I Did This Project!
    Tell us about your experience with this science project.


    characters left

    characters left

    characters left
    Poor OK Good Very Good Excellent

    Optional:  Attach a picture of your project (JPG, JPEG, GIF, PNG only)



    Related Links

    • Science Fair Project Guide

    Project Summary

    Difficulty  6  –  7 
    Time required Short (several days)
    Prerequisites You should be able to:
    1. write a basic HTML file with a text editing program (like Notepad);
    2. create HTML <FORM> elements for user input;
    3. 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

    Share this Project Idea!


    Facebook Twitter MySpace More Services

    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

    Career Focus

    If you like this project, you might enjoy exploring related careers.

    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.
    Software Quality Assurance Engineer & Tester
    Software quality assurance engineers and testers oversee the quality of a piece of software's development over its entire life cycle. Their goal is to see to it that the final product meets the customer's requirements and expectations in both performance and value. During the software life cycle, they verify (officially state) that it is possible for the software to accomplish certain tasks. They detect problems that exist in the process of developing the software, or in the product itself. They try and make things not work (try to "break" the software) by creating errors or combinations of errors that a user might make. For example, if a user enters a period or a pound sign for a password, will that break the software? They seek to anticipate potential issues with the software before they become visible. At the end of the life cycle, they reflect upon how problems or bugs arose, and figure out ways to make the software development process better in the future.     		 


    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?

    		 


     


    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.

    Science Fair Project Home     Our Sponsors     Partners     About Us     Work for Us     Volunteer     Donate     Contact Us     Academic Outreach Partnerships     Site Map

    Science Fair Project Ideas     Science Fair Project Guide     Ask an Expert     Blog     Teacher Resources     Parent Resources     Student Resources     Science Careers     Join Science Buddies    

    Privacy Policy Science Buddies

    Copyright © 2002-2012 Science Buddies. All rights reserved.
    Reproduction of material from this website without written permission is strictly prohibited.
    Use of this site constitutes acceptance of our Terms and Conditions of Fair Use.