Using the charat() function

 

Another useful in-built JavaScript function is chartAt(). We'll see how this works by creating an anagram programme. We'll keep the same format of text box and button. But this time, when the button is clicked, the programme will create an anagram of the name in the text box. Try it out by clicking the button below (though you might need to click the button a few times before you get anything useful):

 

An Anagram Programme

To create your own anagram programme, you need a button and a text box on a your web page. The form is called f1, and the text box is called t2. The onClick event of the button is this:

onClick = anagram()

Again, we start our function by getting the name from the text box:

function anagram() {

fname = document.f1.t2.value

}

Once we've got the name, the technique we're going to use is this:

Before we tackle the first step, let's use a simple in-built function to convert all the letters in the name:

function anagram() {

fname = document.f1.t2.value
fname = fname.toLowerCase()

}

The two inbuilt JavaScript function toLowerCase() and toUppercase() do exactly what you'd expect them to do: convert all the characters to either lower case letters or to uppercase letters. The string you're trying to convert comes first. In the code above, we wanted to convert whatever was in the variable fname to lowercase letters.

Now that we've got the name from the text box, and converted the letters to lowercase, we can tackle the first step of our three on the list: Put all the individual letters (and spaces) into an array.

We set up the array like this:

function anagram() {

fname = document.f1.t2.value
fname = fname.toLowerCase()

aryText = new Array(fname.length)
}

All we're doing here is setting up an array called aryText. The number of slots (positions) in the array is set by fname.length. This will get you how many characters are in the variable fname. The number of characters is also the size of the array - one slot for each character.

Once we've created the array, we can fill all the slots with the characters from our text box. First we get the length of the array:

len = aryText.length

We then use the length as the upper boundary for a for loop:

for (i = 0; i < len; i++) {
aryText[i] = fname.charAt(i)
}

Notice the line that is filling our new array:

aryText[i] = fname.charAt(i)

We are accessing each slot in the array with aryText[i]. We're setting the value of each slot to a character from our text box:

= fname.charAt(i)

And there's the charAt() function. The charAt() function returns the position of character in a string.

 

charat()

The syntax for the charat() function is this:

stringname.charAt(index)

First you type the string you want the function to search. After a full stop, you type the name of the function: charAt(). In between the round brackets, you type a number (index). This number is used by the function to search your string. The search will start at 0. So if you type charAt(5), the function will tell you what character is at this position. For example:

Text = "Some text"
OneCharacter = Text.charAt(5)

The variable OneCharacter will hold the letter "t" of text.

We used the charAt() function like this:

= fname.charAt(i)

The sting fname will be searched by the function. We've set the search position to our loop number. So what we're really doing is this:

= fname.charAt(0)
= fname.charAt(1)
= fname.charAt(2)
= fname.charAt(3)

The character at these positions is then transferred to a slot in our array:

aryText[i] = fname.charAt(i)

And that will fill the array with each character from our text box. Once the array is filled, we can move on to step two - Use a shuffle algorithm to jumble up the letters in the array.

This is not as complicated as it sounds. In fact, you've already met the shuffle algorithm. We used one when we created the lottery programme. We can use the same one again:

for (i = 1; i < len; i++) {
newnumber = (Math.random() * len)
newnumber = parseInt(newnumber, 10)
temp = aryText[i]
aryText[i] = aryText[newnumber]
aryText[newnumber] = temp
}

The last time we met this, we selected a random number from 1 to 49, which corresponded to a lottery number. This time, we want a random number from zero to the length of our array. We've already got the length of the array in the len variable. So we can use that to grab a random number:

newnumber = (Math.random() * len)

Remember: the Math.random() function gets you a random number from zero to 1. If we multiply this by the length of our array, we can use this number as an index. But the random number will be a floating point number. So we have to chop off all the .342678 bit. That's what this does:

newnumber = parseInt(newnumber, 10)

Once we have our index number, we can use it to swap the letters around in our array:

temp = aryText[i]
aryText[i] = aryText[newnumber]
aryText[newnumber] = temp

Now that we've jumbled up all the letters in our array, we can use the join() function to join all the separate letters in the array. When we've done that, we'll have one single name again, and we can display it in the text box:

NewName = ""
NewName = aryText.join("")

document.f1.t2.value = NewName

Notice the join() function:

aryText.join("")

We're saying join all the elements in the array, but don't use anything as a separator. That's we've put a pair of double quotes in between the round brackets. But the double quotes have no space between them.

Finally, display the new name in the text box:

document.f1.t2.value = NewName

And that's it - our own little anagram generator. Here's the entire code, in case you want to copy and paste it:

<SCRIPT Language = JavaScript>
function anagram() {
fname = document.f1.t1.value
fname = fname.toLowerCase()

aryText = new Array(fname.length)
len = aryText.length

for (i = 0; i < len; i++) {
aryText[i] = fname.charAt(i)
}

newnumber = ""
temp = ""
i = 0

for (i = 1; i < len; i++) {
newnumber = (Math.random() * len)
newnumber = parseInt(newnumber, 10)
temp = aryText[i]
aryText[i] = aryText[newnumber]
aryText[newnumber] = temp
}

NewName = ""
NewName = aryText.join("")

document.f1.t1.value = NewName
}

</SCRIPT>

Now that you know a thing or two about string manipulation, we can end this section. In fact, the entire javascript course is coming to an end. You should now have the skills to take your programming further, and develop better scripts than the ones you've learned with us. Good luck - and have fun with your JavaScript programming.

<--Back to the JavaScript Contents Page