CS101 Introduction to Computing Lecture 37 String Manipulation (Web Development Lecture 12)

CS101 Introduction to ComputingLecture 37String Manipulation(Web Development Lecture 12)

Today’s Topic:String Manipulation • To become familiar with methods used for manipulating strings • To become able to solve simple problems involving strings

String Manipulation Examples • Combine words into a sentence i.e. take these strings and concatenate them into one • Break string into smaller ones • Convert a string into upper case • See if a particular character exists in a string • Find the length of a string • Convert a string into a number

String Manipulation in JavaScript • In addition to the concatenation operator (+) JavaScript supports several advanced string operations as well • Notationally, these functions are accessed by referring to various methods of the String object • Moreover, this object also contains the ‘length’ property

Example name = “BHOLA” ; document.write( “The length of the string ‘name’ is ”, name.length) ; The length of the string ‘name’ is 5

Let us now revisit an example that we first discussed in the 18th lectureLet us see how we put the ‘length’ property of a string to good use

<HTML> <HEAD> <TITLE>Send an eMail</TITLE> <SCRIPT>function checkForm( ) { … }</SCRIPT> </HEAD> <BODY bgcolor=“#FFFFCC”> <TABLE><FORM …>…</FORM></TABLE> </BODY></HTML>

<TABLE> … <FORM …> <INPUT type=“submit” name=“sendEmail” value=“Send eMail” onMouseOver=“checkForm( )”> … </FORM> </TABLE>

This is a string function checkForm( ) { if( document.sendEmail.sender.value.length < 1 ) { window.alert( “Empty From field! Please correct” ) ; } }

Other Uses of the ‘length’ Property • To restrict the length of login name or password to specified bounds, i.e. no less than 4 and no more than 8 characters

String Methods FORMAT string.methodName( ) EXAMPLE: name = “Bhola” ; document.write( name.toUpperCase( ) ) ; document.write( name.bold( ) ) ; BHOLABhola

Two Types of String Methods • HTML Shortcuts • Others

String Methods: HTML Shortcuts big( ) small( ) fontsize( n ) bold( ) italics( ) strike( ) link( URL ) sub( ) sup( ) fixed( ) fontcolor( color )

big( ), small( ), fontsize( n ) name = "Bhola" ; document.write( name ) ; document.write( name.big( ) ) ; document.write( name.small( )) ; document.write( name.fontsize( 1 )) ; document.write( name.fontsize( 7 ) ) ; BholaBholaBholaBholaBhola

sub( ), sup( ) person = "Bhola" ; document.write( name ) ; document.write( name.sub( ) ) ; document.write( name ) ; document.write( name.sup( )) ; BholaBholaBholaBhola

BholaBholaBholaBhola bold( ), italics( ), strike( ) name = "Bhola" ; document.write( name ) ; document.write( name.bold( ) ) ; document.write( name.italics( )) ; document.write( name.strike( 1 )) ;

fixed( ), fontcolor( color ) name = "Bhola" ; document.write( name ) ; document.write( name.fixed( ) ) ; document.write( name.fontcolor( “blue” )) ; document.write( name.fontcolor( “orange” ) ) ; BholaBholaBholaBhola

link( URL ) hotel = "Bhola Continental" ; document.write( hotel ) ; document.write( hotel.link( “http://www.bholacontinental.com” ) ) ; Bhola ContinentalBholaContinental

String Methods: All Others charAt( n ) substring( n, m ) toLowerCase( ) toUpperCase( ) split( delimiter ) indexOf( substring, n ) lastIndexOf( substring, n )

toLowerCase( ), toUpperCase( ) person = "Bhola" ; document.write( person ) ; document.write( person.toLowerCase( ) ) ; document.write( person.toUpperCase( )) ; BholabholaBHOLA

charAt( n )Returns a string containing the character at position n (the position of the 1st character is 0) mister = "Bhola" ; document.write( mister ) ; document.write( mister.charAt( 0 ) ) ; document.write( mister.charAt( 8 )) ; document.write( mister.charAt( 2 )) ; BholaBo

substring( n, m )Returns a string containing characters copied from positions n to m - 1 s = "Bhola" ; document.write( s.substring( 1, 3 ) ) ; document.write( s.substring( 0, s.length )) ; hoBhola

indexOf( substring, n )Returns the position of the first occurrence of substring that appears on or after the nth position, if any, or -1 if none is found s = "Bhola" ; document.write( s.indexOf(“ola”, 1 ) ) ; document.write( s.indexOf( “z”, 3 )) ; 2-1

lastIndexOf( substring, n )Returns the position of the last occurrence of substring that appears on or before the nth position, if any, or -1 if none is found s = "Bhola" ; document.write( s.lastIndexOf(“ola”, 5 ) ) ; document.write( s.lastIndexOf( “b”, 0 )) ; 2-1

split( delimiter )Returns an array of strings, created by splitting string into substrings, at delimiter boundaries s = "Hello: I must be going!" ; a = new Array( 5 ) ; b = new Array( 5 ) ; a = s.split( " " ) ; b = s.split( "e" ); document.write( "<TABLE>" ) ; for( k = 0; k < 5; k = k + 1 ) document.write( "<TR><TD>", a[ k ], "</TD><TD>", b[ k ], "</TD></TR>" ) ; document.write( "</TABLE>" ) ; Hello: H I llo: I must b must going! be undefined going! undefined

Automatic Conversion to Strings • Whenever a non-string is used where JavaScript is expecting a string, it converts that non-string into a string • Examples: • The document.write( ) method expects a string (or several strings, separated by commas) as its argument • When a number or a Boolean is passed as an argument to this method, JavaScript automatically converts it into a string before writing it onto the document

The ‘+’ Operator • When ‘+’ is used with numeric operands, it adds them • When it is used with string operands, it concatenates them • When one operand is a string, and the other is not, the non-string will first be converted to a string and then the two strings will be concatenated

The ‘+’ Operator: Examples 5.141592653589793 document.write( 2 +Math.PI) ; document.write( "2" + "3") ; document.write( "2" + Math.PI ) ; document.write( "Yes" + false ) ; 23 23.141592653589793 Yesfalse

Strings In Mathematical Expressions When a string is used in a mathematical context, if appropriate, JavaScript first converts it into a number. Otherwise, a “NaN” is the result document.write("2"* Math.PI ) ; document.write( "Yes" ^ 43 ) ; 6.283185307179586 NaN

The ‘toString’ MethodExplicit conversion to a string EXAMPLE: Convert 100.553478 into a currency format a = 100.553478 ; b = a.toString( ) ; decimalPos = b.indexOf(".", 0 ) ; c = b.substring( 0, decimalPos + 3 ) ; document.write( c ) ; 100.55

During Today’s Lecture … • We become familiar with methods used for manipulating strings • We became able to solve simple problems involving strings

CS101 Introduction to Computing Lecture 37 String Manipulation (Web Development Lecture 12)