Overview | Part B Folder | newStory function | User Input | Build Story | Image | Gender | Caps Function | A/An Function | Image Rollover | Story Window | Questions

Build caps function

 

Sometimes the user’s input requires adjusting some words and capitalization. Note that one of the user's words starts a sentence. We want to make sure it's capitalized. We will need two functions: the a/an function and the caps function. We'll start with the caps function.

Linda was in her kitchen, busy making a pineapple pie. Pineapple was her favorite fruit, but this pie was for her friend Ralph. She was almost done when her pet Peruvian pygmy rhinoceros Edward James Olmos leaped onto the kitchen counter...

These functions must be built outside of the newStory function. The best place to put them is immediately after the newStory function.

1. The goal of the caps function is to take a word (a string) as a parameter and return the word with the first letter capitalized.
   
   
   function caps(word)
   {
       //function body will go here
   }
   
   
   
2. Split the word into two strings: one with just the first letter and the other with the rest of it. Then, you can change the first letter to upper case and concatenate it with the rest of the word to get the desired result.
   
   
   1. If you have a word stored in a variable, you can get its first letter. charAt is a built-in JavaScript method. It returns the element in the array at the specified place. In this case we pass a zero to charAt to get the first letter in the string. The individual characters of a string are numbered starting at zero, so this code gets the zero-th, or first, character.

var firstLetter = word.charAt(0); //get first letter

2. Get everything except the first letter like this:

var restOfWord = word.substr(1); //get rest of word starting at index 1





The right-hand side is a little complicated, so don’t worry if you find it a little puzzling. Basically, it asks for all of the characters in the string, starting from the one at 1 (which is actually the second character, because we start numbering at 0 instead of 1).

3. Make restOfWord lower case to take care of any words entered in all caps by the user.

restOfWord = restOfWord.toLowerCase(); //make rest of word lower case

Now, you need to capitalize the firstLetter string so you can make it uppercase:

firstLetter = firstLetter.toUpperCase(); //make first letter upper case




4. Finally, you need to concatenate firstLetter with restOfWord.

var cappedWord = firstLetter + restOfWord; //concatenate first letter & rest of word

return cappedWord; //return result to function call




3. These few lines should all go between the opening and closing { } of the function. That completes defining the function. Any time the function is called, all the code between the opening and closing curly braces will execute.
   
   
   The returned value will replace the function call and word in the story.
   
   
4. Call the function everywhere it's needed. Look through your story for words that are supplied by the user at the beginning of a sentence and must be capitalized. For each user-supplied word that needs capitalization, pass the word to the caps function as shown below.
   
   
   story += 'busy making a <span class="highlight">' +fruit+ '</span> pie. <span class="highlight">' + caps(fruit) + '</span> was ' +gender[1]+ 'favorite fruit, ';
   
   
   
5. Save the file and preview in the browser. Fill out the form and click the Create Story button. Were the words you wanted capitalized, capitalized?
   
   If not, use the error console to find and fix the problems. If that doesn't help, look at the code for the story to see if you missed adding the caps function to a word where it was needed or maybe you forgot to pass the word to the function.
   
   
   6. Go to the Catalyst WebQ and answer Questions 13 and 14.
   

   Now that your caps function is working, you can build the a_or_an function...