String Object. Conundrum: I would like people to have more time on the revisions… … but I don't have a lot of time myself for more grading A1 Revision

BIT116: Scripting

String Object

2

A1, A2 Revision Conundrum: I would like people to have more time on the revisions…

… but I don't have a lot of time myself for more grading

A1 Revision : I'm going to keep the revision "open" so people can work on this more Exception: If your revision got 100% then I'll email that out "soon" A1 revision will be graded & returned next Tuesday after class, at which point it will be

closed.

A2 revision due date will still be this Friday

Between now & then we're going to have 'lighter' classes, with time at the end for people to ask questions about stuff they're stuck on.

3

Using the Properties of the String Object

4

Using String Object Properties

The String object has only three properties, so this section is relatively short.

The table below provides a brief description of these properties, each of which is discussed in turn in the slides that follow.

5


The constructor Property

This property sends back the syntactic value of the constructor function. To use the constructor property, you have to use a String object rather than a literal.

The following code writes the value of the constructor property onto a web page:

<body><script>

var test = new String("Testing the Constructor is such a gas!");

document.write(test.constructor);</script></body>

This code produces text similar to the following in the browser (not that helpful, but here it is):

function String() { [native code] }

string_constructor.html

http://faculty.cascadia.edu/cduckett/bit116/Lecture_10/string_constructor.html

6


The length Property

The length property returns the length of the string, which is the number of characters contained in the string. You can use it with both String objects and string literals. You’ve seen this property with other objects as well, such as the Array object. (In that case, the value was the number of elements in an array.)

The following code uses a regular text string. It writes the length of the string variable onto the page.

<body><script>

var myname="Winkus";document.write("The name has " + myname.length + "

characters.");</script></body>

Notice how the name of the variable is used like an object name here. This is how to get JavaScript to create a temporary String object to use the property. The script writes the result to the page. Because the name has six characters, the length property has a value of 6 here. The length property will be quite useful when you want to break strings apart to get information or make changes.

7


The prototype Property

As with the other objects that have the prototype property, you can use it to add properties or methods to String objects on the page.

The following code shows an example:

String.prototype.attitude = "cool";var rightNow = new String("Rex");window.alert("This string is " + rightNow.attitude);

Now the String object “Rex” has an attitude property of “cool”

8

Using the Methods of the String Object

9

Using String Object Methods

10

Using String Object Methods CONTINUED

The String object has a lot of methods, as shown in table in the previous slide. Yes, this list is quite long!

The following slides will take a quick look at some of the more common (or most used) methods of the String object.

11

String Methods That Add HTML Tags CONTINUED

The basic methods big(), blink(), bold(), fixed(), italics(), small(), strike(), sub(), and sup() simply add the basic HTML tags around the string.

For example, to create some small text, you could use the small() method:

var singleSlice = "I only want a single slice of sausage pizza.";var dinky = singleSlice.small();document.write(dinky);

This code would then write the following into the HTML code:

<small>I only want a single slice of sausage pizza.</small>

When viewed in the browser, this text would appear smaller than it would normally have appeared without the <small> and </small> tags.

string_methods.html

http://faculty.cascadia.edu/cduckett/bit116/Lecture_10/string_methods.html

12

String Methods That Add HTML Tags CONTINUED

The remaining HTML tag methods anchor(), fontcolor(), fontsize(), and link() take in parameters and build the tags based on the string value and the parameter(s) sent to them.

These will be discussed a bit more in the following slides.

13

String Methods That Add HTML Tags

The anchor() method

This method places a text string as the text for a named anchor. The anchor() method takes a parameter that will be the name attribute for the named anchor.

Basically, it creates an HTML tag set with the following syntax:

<a name="parameterString">textString</a>

The parameterString is a string you send as a parameter in the method call. The textString is the value of the string from which you call the method.

14


The anchor() method CONTINUED

For example, take a look at this code:

var anchorText = "Some Groovy Text a the Top of the Page";var fullAnchor = anchorText.anchor("top");document.write(fullAnchor);

Here, you assign a string literal to the variable anchorText. You then call the anchor() method with a parameter of “top” from the string literal. The result is assigned to the fullAnchor variable.

The value of the fullAnchor variable is then written on the page. The code writes the following link into the code for the page:

<a name="top">Go to Top</a>

And this is what's displayed in the browser:

Go to Top

15


The fontcolor() method

The fontcolor() method adds font color to the text string that is used to call it. It takes in astring parameter that indicates what color the text should be. The color can be sent using eitherthe color "name", #hex, or (RGB) value.

<body><script>

var theText = "I am so mad I see red!";document.write(theText.fontcolor("red"));

</script></body>

<font color="red">"I am so mad I see red!"</font>

This is what is displayed in the browser:

I am so mad I see red!

http://www.w3schools.com/jsref/jsref_fontcolor.asp

http://www.w3schools.com/jsref/jsref_fontcolor.asp

16


The fontsize() method

The fontsize() method adjusts the font size of the text string that calls the method. It takes in a numeric value to represent the size of the text (between 1 and 7).

<body><script>

var theText = "I am pretty small!";document.write(theText.fontsize(2));

</script></body>

This is what is displayed in the browser:

I am pretty small!

http://www.w3schools.com/jsref/jsref_fontsize.asp



17


The link() method

NOTE: The link() method is not standard, and may not work as expected in all browsers.

The link() method is used to display a string as a hyperlink. This method returns the string embedded in the <a> tag, like this:

var someString = "Programajama or Bust!"var result = someString.link("http://www.programajama.com");$("#demo").html( result ); // '<a href="http://www.programajama.com">Programajama or Bust!</a>'

<p id="demo"></p>

This is what is displayed in the browser: Programajama or Bust!

http://www.w3schools.com/jsref/jsref_link.asp

ink_method_1.htmllink_method_2.html

http://www.programajama.com/

http://www.programajama.com/



http://faculty.cascadia.edu/cduckett/bit116/Lecture_10/link_method_1.html

http://faculty.cascadia.edu/cduckett/bit116/Lecture_10/link_method_2.html

18


The charAt() method

The charAt() method determines which character resides at a particular position in a string. You can find out what the first or last character is, or you can find any character in between. The charAt() method takes in a number representing the position where you want to know the character.

The index of the first character is 0, the second character is 1, and so on. The index of the last character in a string is string.length-1, the second last character is string.length-2, and so on.

var str = "HELLO WORLD";var res = str.charAt(0)

Result would be: H

var str = "HELLO WORLD";var res = str.charAt(str.length - 1);

Result would be: D

http://www.w3schools.com/jsref/jsref_charat.asp



19


The charCodeAt() method

The charCodeAt() method works the same way as the charAt() method, but it returns the character ASCII code for the character at the positions sent as the parameter.

The character ASCII code is a numeric code that can be substituted for characters in HTML. In HTML, you can write an angle bracket (<) to show code on a Web page—without the angle bracket converting to HTML itself—by using a special character code. In place of a regular angle bracket, for example, you could use &#60. The charCodeAt() method returns the numeric part of that code, the 60.

The charCodeAt() method can be useful if you want to find out the character code for a certain character.

var str = "HELLO WORLD";var n = str.charCodeAt(0);

The result world be: 72

http://www.w3schools.com/jsref/jsref_charcodeat.asp

http://www.asciitable.com/



20


The concat() method

This method works much like the Array object’s concat() method. It combines the text string that calls the method with any number of other text strings sent as parameters and returns the combined value. The text string calling the method comes first in the order, while the strings sent as parameters are added in order after it.

var string1 = "I went to the store ";var string2 = "then ";var string3 = "I played a video game";window.alert(string1.concat(string2,string3));var string4 = string1 + string2 + string3;

http://www.w3schools.com/jsref/jsref_concat_string.asp



21


The fromCharCode() method

The fromCharCode() method creates a string from a series of character ASCII codes sent as parameters to the method. The charCodeAt() method returns a numeric code for the character at a given position. This is the type of value you must send to the fromCharCode() method.

Also, fromCharCode() is called directly from the String object rather than from an existing string, because it is piecing together a string on-the-fly and doesn’t require one to run. Instead, it uses the parameters sent to it to return a string.

var res = String.fromCharCode(72,69,76,76,79);

The result would be: HELLO

http://www.w3schools.com/jsref/jsref_fromcharcode.asp



22


The indexOf() method

The indexOf() method returns the position of the first occurrence of a specified value in a string.

This method returns -1 if the value to search for never occurs.

Note: The indexOf() method is case sensitive.

Tip: Also look at the lastIndexOf() method on the next slide.

var str = "Hello world, welcome to the bizarre universe!";var n = str.indexOf("welcome");

The result would be: 13 (i.e., the 'w' in welcome is at the 13th position in the string starting at 0)

http://www.w3schools.com/jsref/jsref_indexof.asp



23


The lastIndexOf() method

The lastIndexOf() method finds out where the last instance of a certain character or string is located in the string. It returns the position of only the last occurrence of the character or string that is sent as the parameter. If the character or string isn’t found in the string value, a value of –1 is returned..

Note: The lastIndexOf() method is case sensitive!

var str = "Hello planet earth, you are a goofy planet.";var res = str.lastIndexOf("planet");

The result would be: 36 (i.e., the 'p' in the second 'planet' is at the 36th position in the string starting at 0)

http://www.w3schools.com/jsref/jsref_lastindexof.asp



24


The slice() method

This method pulls out a portion of a string and returns a new string, which is the text string that was sliced. The slice() method takes in two numeric parameters to tell it where to begin and end the portion of the string to be pulled. This method works much like the slice() method of an array. The first parameter tells it the position at which to start slicing, while the second parameter is one greater than the position where it will stop. For instance, take a look at the code that follows (and, yes, this still confuses me so I always have to look it up!):

var theText = "Do not cut this short!";var shorterString = theText.slice(0,7);window.alert(shorterString);

This code slices the string from position 0 through position 6. Position 7 is where the c is in “cut”; but it is not sliced because the parameter to end is not included as a position to slice, but is one greater! (see why I still get confused—it's all about 0 through 6, not 1 through 7!)

The alert will say “Do not ” (including the space after the 't' in 'not')

http://www.w3schools.com/jsref/jsref_slice_string.asp



25


The split() method

The split() method creates an array of string elements based on the string it splits. The string is split based on a character sent as a parameter that acts as a separator.

For instance, the code that follows has a string with a bunch of colons in it:

var theText = "orange-apple-pear-grape";var splitText = theText.split("-");var endCount = splitText.length;for (var count = 0; count < endCount; count++) {

document.write(splitText[count] + "<br>");}

The string assigned to the theText variable has a bunch of fruits separated by dashes (-). The next line creates an array named splitText by using the split() method on the text string theText. The parameter sent is a dash, which is what is used to separate the string into array elements. In this case, the array ends up with four unique elements.

http://www.w3schools.com/jsref/jsref_split.asp



26


The substr() method

The substr() method pulls out a portion of a string and returns the portion that is removed as a new string. It takes two numeric parameters. The first parameter specifies the beginning of the removal, and the second parameter specifies how many characters to remove.

For instance, the following code removes a portion of a string beginning at position 0 and continues until seven characters are removed:

var theText = "Don't taze me, bro!";var shorterString = theText.substr(0,6);window.alert(shorterString);

This code removes everything up to the beginning of the word 'taze' in the string. The string returned is the portion of the string that has been removed. Thus, the alert will say “Don't t”.

http://www.w3schools.com/jsref/jsref_substr.asp



27


The substring() method

This method works much like the substr() method, but it allows you to send parameters for the beginning position and the ending position of the portion of the string you want to remove. It then returns the removed portion as a new string.

For example, take a look at the code below. Rather than specifying the number of characters to remove, you give an ending position. The characters are removed beginning at the starting position and ending at one less than the ending position. [And yes, this still confuses me to this day…I always have to look it up!]

var theText = "Do not cut this short!";var shorterString = theText.substring(3,7);window.alert(shorterString);

You remove everything between the beginning of the string and the beginning of the word “cut”.

The alert will say “not ” (including the space after the 't' in 'not')

http://www.w3schools.com/jsref/jsref_substring.asp



28


The toString() method

The toString() method returns a string literal value for a String object that calls it. Here’s an example of how you can use this method:

var stringObject = new String("Cool");var stringLiteral = stringObject.toString();

This code takes the String object and uses the toString() method to get its string literal value. It then assigns that value to the stringLiteral variable.

http://www.w3schools.com/jsref/jsref_tostring_string.asp



29


The toLowerCase() method

This method returns in lowercase letters the value of the string that called it. Take a look at this code:

<body><script>

var theText = "I FEEL CALM, REALLY.";document.write(theText.toLowerCase());

</script></body>

This code writes the string in all lowercase letters on the page, like this sample text:

i feel calm, really.

Note: The toLowerCase() method does not change the original string.

http://www.w3schools.com/jsref/jsref_tolowercase.asp



30


The toUpperCase() method

This method returns in uppercase letters the value of the string that called it. Here’s an example:

<body><script>

var theText = "I am yelling!";var yelling = theText.toUpperCase();document.write( yelling );

</script></body>

This code writes the string in all uppercase letters on the page, like this sample text:

I AM YELLING!

Note: The toUpperCase() method does not change the original string.

http://www.w3schools.com/jsref/jsref_touppercase.asp



Documents

String Object. Conundrum: I would like people to have more time on the revisions… … but I don't have a lot of time myself for more grading A1 Revision