Javascript Strings - Changing Case

Five part section: 1 2 3 4 5

A big part of your life as a programmer is manipulating strings of text. To help you with this, Javascript comes with lots of inbuilt methods you can use. We'll take a look these in this and the next few sections. Before you go any further, though, create a new web page with two SCRIPT tags in the HEAD section. You can use the template you created in an earlier section.

Changing Case

If you need to change the case of a string of text you can use the two inbuilt methods toUpperCase and toLowerCase. They are fairly easy to use. Add the following to your two SCRIPT tags:

<SCRIPT LANGUAGE = "Javascript">

var postcode = "sr2 4jh";
var new_postcode = postcode.toUpperCase();

document.write( new_postcode );

</SCRIPT>

The first line sets up a variable called postcode. Imagine you've got this value from a text box on a form. You want to make sure that the letters are all uppercase. You can convert them by using toUpperCase (note the capital letters "U" and "C"). But look at how it's done:

var new_postcode = postcode.toUpperCase();

To the right of the equal sign you type the variable you want to convert. After a dot you type the method name, toUpperCase, followed by a pair of empty round brackets. End the line in the usual way with a semicolon.

Another thing to notice here is that we have a new variable to the left of the equal sign. The newly converted value will be placed in the variable we've called new_postcode. The reason that we're storing the converted value into a new variable is because in Javascript strings are immutable. This means that you can't actually change any characters in a string. What Javascript does instead is to create an entirely new string for you, leaving the original untouched. As an example, add the another document.write to the end of your code, as well as a BR tag to the first one:

document.write(new_postcode + "<BR>");
document.write( postcode );

When you run your script in a web browser new_postcode will be SR2 4JH while postcode will be sr2 4jh. The original postcode variable has been left untouched.

However, you can do this:

var postcode = "sr2 4jh";
postcode = postcode.toUpperCase();

But be aware that you are creating a new string to the right of the equal sign and storing it back into the postcode variable.

Exercise
Change the postcode variable to SR2 4JH on the first line of your code. Now use toLowerCase to convert it.

 

In the next lesson, you'll learn about a Javascript string method called indexOf.