|Areas of Science||
|Time Required||Short (2-5 days)|
|Prerequisites||Familiarity with Web browser and text editing programs|
|Material Availability||Readily available|
|Cost||Very Low (under $20)|
Cite This PageGeneral citation information is provided here. Be sure to check the formatting, including capitalization, for the method you are using and update your citation, as needed.
Last edit date: 2020-11-20
- You'll need to write your file with a text editor, which is a program that can save plain text files. The "Notepad" program that comes with Windows will do just fine. You should not use a word processing program (e.g., Word), because word processors do not save files as plain text by default.
writing is like a simple web page. Here is the basic format of an HTML file: <!-- comment line: ignored by browser, use these as notes to
yourself about your program -->
[The parts you want to appear on the page go here.]
- For practice, try using your text editor to write a very simple HTML file like
the one below. (You can write it yourself, or you can copy and paste from your browser
to your text editor.)
<!-- Science Buddies: HelloWorld.html -->
- Use your text editor to save the file. Call it something like "HelloWorld.html" (when choosing a name for your file, always end the name with ".htm" or ".html").
- Now open your HelloWorld.html file with your browser. In your browser, use the "File" menu, and choose the option "Open..." (for Firefox, choose "Open File..."). Using the controls in the File Open dialog box that pops up, navigate to your file and select it. In Windows, you can also open the file by right-clicking it, selecting "Open with..." and then choosing a web browser from the list of available programs. You should see "Hello, world!" on both the browser title bar and on the body of the page.
To help get you started, here is an example of the kind of program we have in mind. This is just one of many ways to accomplish this task. You can use this example as a basis for your program, or you can start from scratch.
Simple SorterThere are five more pieces which you will need to understand in order to write this program:
- the <TEXTAREA> object, which you can use in an HTML <FORM>.
1. You'll use two TEXTAREA objects in your HTML FORM, one for the user to input the list of words, and one for the program to output the alphabetized list. Here are two examples:<TEXTAREA name="inputText" rows=5 cols=80 wrap=on></TEXTAREA>
<TEXTAREA name="outputText" rows=5 cols=80 wrap=on readonly></TEXTAREA>
The quotation marks enclose a single space character, so the input text string will be split at each occurrence of a space. And where does all of the split text end up?
An Array object has a .length property that tells you how many elements are in the array. Remember that array index numbers start with 0, so the index of the last element in an array will be the array length minus 1. So to access the last element in our example array, we could write:
inputTextArray[inputTextArray.length - 1]
5. Finally, we need to get the alphabetized word list back into the form of a single string in order to put it in the output TEXTAREA. The .join() method comes in handy here. The .join() method has a single argument, the separator character, which separates the individual elements as they are placed into a single output string. It's the converse of the .split() method for strings, which we discussed previously. You can figure out how to call the .join() method by analogy.
Now you've seen all the pieces, you just need to put them together. Have fun writing your sorting program!
If you want to continue to use Internet Explorer, try adding the following line at the beginning of your file:
<!-- saved from url=(0014)about:internet --> This line will cause Internet Explorer to run your file according to the security rules for the Internet zone on your computer. In our experience this may work, or it may not. For more information see http://www.phdcc.com/xpsp2.htm.
- HTML concepts:
- start tags and end tags,
- the <HEAD> section,
- the <SCRIPT> section,
- the <BODY> section,
- the <FORM> section,
- the <INPUT> tag,
- the <TEXTAREA> tag.
- .split(), a String object method for separating text into arrays,
- .join(), an Array object method for joining all of an array's elements into a single string,
- .sort(), for sorting arrays.
- general programming concepts:
- reserved words,
- control statements (e.g., if...else statements, for loops).
- How do you use a TEXTAREA object in an HTML form to get one or more lines of input from the user and store it in a variable?
- Introduction to Programming by Matt Gemmell describes what programming actually is: Gemmell, M. (2007). Introduction to Programming. Dean's Director Tutorials & Resources. Retrieved March 14, 2014.
- HTML Forms reference: W3C. (1999). Forms in HTML Documents, HTML 4.01 Specification. World Wide Web Consortium: Massachusetts Institute of Technology, Institut National de Recherche en Informatique et en Automatique, Keio University. Retrieved June 6, 2006.
- If you get interested and start doing a lot of web development, you may want to use a text editor that is a little more sophisticated than Notepad. An editor designed for web development and programming can help with formatting so that your code is more readable, but still produce plain text files. This type of editor can also fill in web-specific HTML coding details and do "syntax highlighting" (e.g., automatic color-coding of HTML), which can help you find errors. Search online for "free HTML editor" to find one.
Materials and Equipment
- Computer with internet browser
- Text-editing program like Notepad or a more advanced editor of your choice
- 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
- 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.
- 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.
- 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.
Keep the fun going! Find local opportunities related to this project.Register on ActivityHero
If you like this project, you might enjoy exploring these related careers:
- In the example sort program above, try including Some Capitalized Words in your list, along with all-lowercase words. What happens? The ".sort()" method uses the ASCII code values for characters to sort the words (see: Table of ASCII Characters ). Capital letters and lower-case letters are not equivalent in this sorting scheme. How can you change the program so that it ignores the case of the letters?
function reverseStrings(a, b)
if(a > b) //a comes after b, alphabetically
return(-1); //so sequence it earlier
if(a < before="" b,="" alphabetically return(1); //so sequence it later
return(1); //so sequence it later
Write a comparison function that will sort numbers properly.
Ask an ExpertThe Ask an Expert Forum is intended to be a place where students can go to find answers to science questions that they have been unable to find using other resources. If you have specific questions about your science fair project or science fair, our team of volunteer scientists can help. Our Experts won't do the work for you, but they will make suggestions, offer guidance, and help you troubleshoot.
Ask an Expert
Looking for more science fun?
Try one of our science activities for quick, anytime science explorations. The perfect thing to liven up a rainy day, school vacation, or moment of boredom.Find an Activity
Explore Our Science Videos
Build an Infinity Mirror
How to Build a Brushbot
Colorful Melting Ice Ball Patterns - STEM Activity