background
|
|
Games
Ruffnecks Gaming
Gaming for everyone
More icon

Random
|
|
Up Image
Navigation
Search this Site
Enter your search terms

Site Breadcrumb - You are here
|
Thau's JavaScript Tutorial
Lesson 2

by Thau!

Page 3 — The Magic of Strings

As mentioned on the previous page, any group of characters between quotes is called a string. Either single or double quotes will do. Just as variables can hold numbers, variables can hold strings. So it's legal to say:

var nice_monkey = "The monkey smiles at you and recites Shakespeare.";

var bad_monkey = "The monkey scowls at you and burps.";

Sticking these statements into a JavaScript declares the variables nice_monkey and bad_monkey and makes them equivalent to these strings. Once you've done this, you can write ...

document.writeln(nice_monkey);

... whenever you want JavaScript to write out the long message about what nice monkeys do. Here's an example of what you can do with strings. View source and we'll go through the new and interesting parts of this script.

The script starts with something new:

var monkey = prompt("What's the monkey's name?", "The monkey");

Here we're calling the prompt method to get input from a user. When the prompt method is called, it brings up a dialog box that asks for a user's input. When the user hits OK, the prompt returns whatever is in the input box. In the above line, this returned value gets put into the monkey variable.

Notice that the prompt method takes two parameters, both of which are strings. The first parameter is what gets printed above the input field in the dialog box. In this case it's, "What's the monkey's name?" The second parameter, "The monkey" in this example, is set as the default value of the input box. If you don't want a default value, just put two quote marks as the second parameter. Like this:

var monkey = prompt("What's the monkey's name?", "");

The next lines are a few straightforward variable assignments, like we've seen before. After these lines we see:

var techy_monkey = monkey + demanding + tech;

This line introduces a string operator: the plus sign. When the plus sign appears between two strings, or two variables that contain strings as above, it means "concatenate." So the above line creates a new variable called techy_monkey that contains a string made of whatever the three variables contain. In this case, it's "The monkey" + "demands, no, insists upon receiving" + "a computer that won't crash, and a homemade browser!" In other words ...

var techy_monkey = monkey + demanding + tech;

... is the same as saying ...

var techy_monkey = "The monkey demands, no, insists upon receiving a computer that won't crash, and a homemade browser!";

The next bunch of lines show some more tricks you can do with strings. All the tricks work in similar ways, so we'll just look at three of them:

var italic_hippy = hippy_monkey.italics();

var shouting_hippy= hippy_monkey.toUpperCase();

var red_bold_tech = bold_tech.fontcolor('red');

The first of these lines says, "Take the string that's contained in the variable hippy_monkey and put it in italics tags." It's actually the same thing as saying

var italic_hippy = "<i>" + hippy_monkey + "</i>";
But it looks much nicer. In either case, when you later write document.writeln(italic_hippy) in your JavaScript, you get the string in hippy_monkey printed in italics.

The next line, which declares shouting_hippy, shows a string trick that you can't do with HTML. It takes whatever's in hippy_monkey and makes all the letters uppercase.

The third line shows an example of changing a property of a string. All strings have color, and you can change the color of a string using the string.fontcolor('new color'); command. You could also do this:

var red_bold_tech = "<font color='red'>" + bold_tech + "</font>";

But that's not as easy to read as this:

var red_bold_tech = bold_tech.fontcolor('red');

You've seen everything else in this example except this line:

document.writeln(bold_tech + "<br>");

This is just a normal document.writeln(), except instead of just printing a string, we're concatenating two strings and then printing the result. This could have been done in two lines, like this:

var broken_bold = bold_tech + "<br>";

document.writeln(broken_bold);

But that would involve creating another variable, and writing another line, when it's really unnecessary.

Now that you've learned all about variables and strings, it's time to try an exercise.

next page»