Today’s Goal
(String Manipulation)
• To become familiar with methods
used
for manipulating strings
• To become able to solve simple
problems involving strings
String Manipulation Examples
• Combine these words into a
sentence
i.e. take these strings and concatenate them into one
• Break this string into smaller ones
• Convert this string into upper case
• See if a particular character exists in a string
• Find the length of a string
• Convert this string into a number
38.1 String Manipulation in JavaScript
•
In addition to the concatenation operator (+) JavaScript supports
several advanced string
operations as well
•
Notationaly, these functions are accessed by referring to various
methods of the String object
•
Moreover, this object also contains the ‘length’ property
Example
name = “kim” ;
document.write ( “The length of the
string ‘name’ is ”, name.length ) ;
Let us now revisit an example that we first
discussed in the 18th lecture
Let 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”>
0.9601111965589273
The length of the string ‘name’ is 5
<TABLE><FORM …>…</FORM></TABLE>
</BODY>
</HTML>
<TABLE>
…
<FORM …>
<INPUT
type=“submit”
name=“sendEmail”
value=“Send eMail”
onMouseOver=“checkForm( )”
>
…
</FORM>
</TABLE>
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 = “kim” ;
document.write( name.toUpperCase( ) ) ;
document.write( name.bold( ) ) ;
Two Types of String Methods
1.HTML Shortcuts
2.All Others
String Methods: HTML Shortcuts
big( ), small( ), fontsize( n
)
person = "kim" ;
document.write( person ) ;
document.write( person.big( ) ) ;
document.write( person.small( ) ) ;
This is a
string
kim
kim
bold( )
italics( )
strike( )
sub( )
sup( )
big( )
small( )
fontsize( n )
fixed( )
fontcolor( color )
link( URL )
kimkimkimkimkim
document.write( person.fontsize( 1
) ) ;
document.write( person.fontsize( 7 ) ) ;
sub( ), sup( )
person = "kim" ;
document.write( name ) ;
document.write( name.sub( ) ) ;
document.write( name ) ; document.write( name.sup( ) ) ;
bold( ), italics( ), strike( )
name = "kim" ;
document.write( name ) ;
document.write( name.bold( ) ) ;
document.write( name.italics( ) ) ;
document.write( name.strike( 1 ) ) ;
fixed( ), fontcolor(
color
)
person = "kim" ;
document.write( person ) ;
document.write( person.fixed( ) ) ;
document.write( person.fontcolor( “blue” ) ) ;
document.write( person.fontcolor( “orange” ) ) ;
link(
URL
)
hotel = "kim Continental" ;
document.write( hotel ) ;
document.write( hotel.link(
“http://www.kimcontinental.com” ) ) ;
What was comm3on among all those methods that we just discussed?
String Methods: All Others
strike( ) <S> … </S>
italics( ) <I> … </I>
bold( ) <B> … </B>
sup( ) <SUP> … </SUP>
sub( ) <SUB> … </SUB>
small( ) <SMALL> … </SMALL>
big( ) <BIG> … </BIG>
fixed( ) <PRE> … </PRE>
link( URL ) <A href=URL> </A>
<FONT color=color>
…
fontcolor( color )
<FONT size=n> …
</FO
NT>
fontsize( n )
split( delimiter )
toLowerCase( )
toUpperCase( ) charAt( n )
substring( n, m )
indexOf( substring, n )
lastIndexOf( substring, n )
toLowerCase( ), toUpperCase( )
person = "kim" ;
document.write( person ) ;
document.write( person.toLowerCase( ) ) ;
document.write( person.toUpperCase( ) ) ;
charAt(
n
)
Returns a string containing the character at position
n
(the position of the 1st character
is 0)
mister = "kim" ;
document.write( mister ) ;
document.write( mister.charAt( 0 ) ) ;
document.write( mister.charAt( 8 ) ) ;
document.write( mister.charAt( 2 ) ) ;
substring(
n, m
)
Returns a string containing characters copied from positions
n
to
m - 1
s = "kim" ;
document.write( s.substring( 1, 3 ) ) ;
document.write( s.substring( 0, s.length ) ) ;
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 = "kim" ;
document.write( s.indexOf( “ola”, 1 ) ) ;
document.write( s.indexOf( “z”, 3 ) ) ;
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 = "kim" ;
document.write( s.lastIndexOf( “ola”, 5 ) ) ;
document.write( s.lastIndexOf( “b”, 0 ) ) ;
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>" ) ;
Automatic Conversion to Strings
• Whenever a non-string is used
where JavaScript is expecting a string, it converts that non-string
into a string
kimkimkim
Bo
hokim
2-1
2-1
Hello: H
I llo: I must b
must going!
be undefined
going! undefined
9
9
90
• Example:
– 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
document.write( 2 + Math.PI ) ;
document.write( "2" + "3" ) ;
document.write( "2" + Math.PI ) ;
document.write( "Yes" + false ) ;
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 ) ;
The ‘toString’ Method
Explicit 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 ) ;
Conversion from Strings
parseInt( ) and parseFloat( ) methods
function calc( ) {
document.myForm.total.value =
document.myForm.salary.value +
document.myForm.bonus.value ;
}
function calc( ) {
5.141592653589793
23
23.141592653589793
Yesfalse
6.283185307179586
NaN
100.55
document.myForm.total.value =
parseFloat( document.myForm.salary.value ) +
parseFloat( document.myForm.bonus.value ) ;
}
During Today’s Lesson …
• We become familiar with
methods used for manipulating strings
• We became able to solve simple problems involving strings
Next (the 14th) Web Dev Lecture:
Images & Animation
• To become able to add and
manipulate images and animations to a Web page
Why not use
parseInt( ) here? |