Your SlideShare is downloading. ×
0
1
CS101 Introduction to Computing
Lecture 38String Manipulations
(Web Development Lecture 13)
2
During the last lecture we discussed
Mathematical Methods
• We looked at the properties and methods of
JavaScript’s Math...
3
Problems & Solutions
• JavaScript doesn’t support drawing of graphics
• However, crude graphics can be put together
with...
4
Mathematical Functions in JavaScript
• In addition to the simple arithmetic operations
(e.g. +, *, etc.) JavaScript supp...
5
Properties
Math.PI
Math.E
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E
Math.SQRT2
Math.SQRT1_2
Note the
CAPITAL
lettering
o...
6
Methods
random( )
sin( r )
cos( r )
tan( r )
asin( x )
acos( x )
atan( x )
atan2( x, y ) max( x, y )
max( x, y )
round( ...
7
sin( r ), cos( r ), tan( r )
Standard trigonometric functions
Returns the sine, cosine or tangent of ‘r’,
where ‘r’ is s...
8
asin( x ), acos( x ), atan( x )
Standard inverse-trigonometric functions
Returns the arcsine, arccosine or arctangent of...
9
Returns the
square root of
x
sqrt( x )
0.5 → 0.7071
Returns x
raised to the
power y
pow( x, y )
2, 32 →
4294967296
10
Returns
Math.E raised
to the power x
exp( x )
1 → 2.718281
Returns the
the natural
logarithm of x
log( x )
Math.E → 1
11
ceil( x )
Returns
integer
nearest to x
Returns
largest integer
that is less
than or equal
to x
Returns
smallest
integer...
12
Returns the
absolute value
of x
abs( x )
1.1 → 1.1
-12.5 → 12.5
0 → 0
13
Returns the
smaller of x
and y
min( x, y )
2, 4 → 2
-12, -5 → -12
Returns the
larger of x and
y
max( x, y )
2, 4 → 4
-1...
14
random( )
Returns a randomly-selected, floating-point
number between 0 and 1
EXAMPLE
document.write( Math.random( ) )
0...
15
random( ): Example
Design a Web page that displays the
result of the rolling of a 6-sided die on
user command
16
Today’s Goal
(String Manipulation)
• To become familiar with methods used for
manipulating strings
• To become able to ...
17
String Manipulation Examples
• Combine these words into a sentence i.e. take
these strings and concatenate them into on...
18
String Manipulation in JavaScript
• In addition to the concatenation operator (+)
JavaScript supports several advanced ...
19
Example
name = “BHOLA” ;
document.write( “The length of the
string ‘name’ is ”, name.length ) ;
The length of the strin...
20
Let us now revisit an example that we
first discussed in the 18th
lecture
Let us see how we put the ‘length’
property o...
21
22
<HTML>
<HEAD>
<TITLE>Send an eMail</TITLE>
<SCRIPT>
function checkForm( ) { … }
</SCRIPT>
</HEAD>
<BODY bgcolor=“#FFFFC...
23
<TABLE>
…
<FORM …>
<INPUT
type=“submit”
name=“sendEmail”
value=“Send eMail”
onMouseOver=“checkForm( )”
>
…
</FORM>
</TA...
24
function checkForm( ) {
if( document.sendEmail.sender.value.length < 1 ) {
window.alert(
“Empty From field! Please corr...
25
Other Uses of the ‘length’ Property
• To restrict the length of login name or password
to specified bounds, i.e. no les...
26
String Methods
FORMAT
string.methodName( )
EXAMPLE:
name = “Bhola” ;
document.write( name.toUpperCase( ) ) ;
document.w...
27
Two Types of String Methods
1. HTML Shortcuts
2. All Others
28
String Methods: HTML Shortcuts
bold( )
italics( )
strike( )
sub( )
sup( )
big( )
small( )
fontsize( n )
fixed( )
fontco...
29
big( ), small( ), fontsize( n )
person = "Bhola" ;
document.write( person ) ;
document.write( person.big( ) ) ;
documen...
30
sub( ), sup( )
person = "Bhola" ;
document.write( name ) ;
document.write( name.sub( ) ) ;
document.write( name ) ;
doc...
31
bold( ), italics( ), strike( )
name = "Bhola" ;
document.write( name ) ;
document.write( name.bold( ) ) ;
document.writ...
32
fixed( ), fontcolor( color )
person = "Bhola" ;
document.write( person ) ;
document.write( person.fixed( ) ) ;
document...
33
link( URL )
hotel = "Bhola Continental" ;
document.write( hotel ) ;
document.write( hotel.link(
“http://www.bholacontin...
34
What was common among all those
methods that we just discussed?
35
big( ) <BIG> … </BIG>
small( ) <SMALL> … </SMALL>
sub( ) <SUB> … </SUB>
sup( ) <SUP> … </SUP>
bold( ) <B> … </B>
italic...
36
fontsize( n ) <FONT size=n> …
</FONT>
fontcolor( color ) <FONT color=color> …
</FONT>
fixed( ) <PRE> … </PRE>
link( URL...
37
String Methods: All Others
split( delimiter )
toLowerCase( )
toUpperCase( )
charAt( n )
substring( n, m )
indexOf( subs...
38
toLowerCase( ), toUpperCase( )
person = "Bhola" ;
document.write( person ) ;
document.write( person.toLowerCase( ) ) ;
...
39
charAt( n )
Returns a string containing the character at
position n (the position of the 1st
character is 0)
mister = "...
40
substring( n, m )
Returns a string containing characters copied
from positions n to m - 1
s = "Bhola" ;
document.write(...
41
indexOf( substring, n )
Returns the position of the first occurrence of
substring that appears on or after the nth
posi...
42
lastIndexOf( substring, n )
Returns the position of the last occurrence of
substring that appears on or before the nth
...
43
split( delimiter )
Returns an array of strings, created by splitting
string into substrings, at delimiter boundaries
s ...
44
Automatic Conversion to Strings
• Whenever a non-string is used where
JavaScript is expecting a string, it converts tha...
45
The ‘+’ Operator
• When ‘+’ is used with numeric operands, it
adds them
• When it is used with string operands, it
conc...
46
The ‘+’ Operator: Examples
document.write( 2 + Math.PI ) ;
document.write( "2" + "3" ) ;
document.write( "2" + Math.PI ...
47
Strings In Mathematical Expressions
When a string is used in a mathematical context,
if appropriate, JavaScript first c...
48
The ‘toString’ Method
Explicit conversion to a string
EXAMPLE:
Convert 100.553478 into a currency format
a = 100.553478...
49
Conversion from Strings
parseInt( ) and parseFloat( ) methods
50
9000
900
9000900
51
function calc( ) {
document.myForm.total.value =
document.myForm.salary.value +
document.myForm.bonus.value ;
}
52
function calc( ) {
document.myForm.total.value =
parseFloat( document.myForm.salary.value ) +
parseFloat( document.myFo...
53
During Today’s Lecture …
• We become familiar with methods used for
manipulating strings
• We became able to solve simp...
54
Next (the 14th
) Web Dev Lecture:
Images & Animation
• To become able to add and manipulate
images and animations to a ...
Upcoming SlideShare
Loading in...5
×

CS101- Introduction to Computing- Lecture 38

453

Published on

Virtual University
Course CS101- Introduction to Computing
Lecture No 38
String Manipulations
Web development lecture 13

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
453
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "CS101- Introduction to Computing- Lecture 38"

  1. 1. 1 CS101 Introduction to Computing Lecture 38String Manipulations (Web Development Lecture 13)
  2. 2. 2 During the last lecture we discussed Mathematical Methods • We looked at the properties and methods of JavaScript’s Math object • We produced solutions for simple problems using several methods of the Math object
  3. 3. 3 Problems & Solutions • JavaScript doesn’t support drawing of graphics • However, crude graphics can be put together with the help of various text characters or tables • One cannot write a character at a random location on the screen using JavaScript • Instead, the graph has to be drawn from top to bottom, one row at a time – just like when
  4. 4. 4 Mathematical Functions in JavaScript • In addition to the simple arithmetic operations (e.g. +, *, etc.) JavaScript supports several advanced mathematical operations as well • Notationaly, these functions are accessed by referring to various methods of the Math object • Moreover, this object also contains several useful mathematical constants as its properties • This object has no use, but of a placeholder
  5. 5. 5 Properties Math.PI Math.E Math.LN2 Math.LN10 Math.LOG2E Math.LOG10E Math.SQRT2 Math.SQRT1_2 Note the CAPITAL lettering of all properties
  6. 6. 6 Methods random( ) sin( r ) cos( r ) tan( r ) asin( x ) acos( x ) atan( x ) atan2( x, y ) max( x, y ) max( x, y ) round( x ) floor( x ) ceil( x ) exp( x ) log( x ) abs( x ) sqrt( x ) pow( x, y )
  7. 7. 7 sin( r ), cos( r ), tan( r ) Standard trigonometric functions Returns the sine, cosine or tangent of ‘r’, where ‘r’ is specified in radians EXAMPLE document.write( Math.cos( Math.PI / 4 ) ) 0.7071067811865476
  8. 8. 8 asin( x ), acos( x ), atan( x ) Standard inverse-trigonometric functions Returns the arcsine, arccosine or arctangent of ‘r’ in radians EXAMPLE document.write( Math.asin( 1 ) ) 1.5707963267948965
  9. 9. 9 Returns the square root of x sqrt( x ) 0.5 → 0.7071 Returns x raised to the power y pow( x, y ) 2, 32 → 4294967296
  10. 10. 10 Returns Math.E raised to the power x exp( x ) 1 → 2.718281 Returns the the natural logarithm of x log( x ) Math.E → 1
  11. 11. 11 ceil( x ) Returns integer nearest to x Returns largest integer that is less than or equal to x Returns smallest integer that is greater than or equal to x floor( x )round( x ) 1.1 → 1 12.5 → 13 -13.9 → -14 1.1 → 1 12.5 → 12 -13.9 → -14 1.1 → 2 12.5 → 13 -13.9 → -13
  12. 12. 12 Returns the absolute value of x abs( x ) 1.1 → 1.1 -12.5 → 12.5 0 → 0
  13. 13. 13 Returns the smaller of x and y min( x, y ) 2, 4 → 2 -12, -5 → -12 Returns the larger of x and y max( x, y ) 2, 4 → 4 -12, -5 → -5
  14. 14. 14 random( ) Returns a randomly-selected, floating-point number between 0 and 1 EXAMPLE document.write( Math.random( ) ) 0.9601111965589273
  15. 15. 15 random( ): Example Design a Web page that displays the result of the rolling of a 6-sided die on user command
  16. 16. 16 Today’s Goal (String Manipulation) • To become familiar with methods used for manipulating strings • To become able to solve simple problems involving strings
  17. 17. 17 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
  18. 18. 18 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
  19. 19. 19 Example name = “BHOLA” ; document.write( “The length of the string ‘name’ is ”, name.length ) ; The length of the string ‘name’ is 5
  20. 20. 20 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
  21. 21. 21
  22. 22. 22 <HTML> <HEAD> <TITLE>Send an eMail</TITLE> <SCRIPT> function checkForm( ) { … } </SCRIPT> </HEAD> <BODY bgcolor=“#FFFFCC”> <TABLE><FORM …>…</FORM></TABLE> </BODY> </HTML>
  23. 23. 23 <TABLE> … <FORM …> <INPUT type=“submit” name=“sendEmail” value=“Send eMail” onMouseOver=“checkForm( )” > … </FORM> </TABLE>
  24. 24. 24 function checkForm( ) { if( document.sendEmail.sender.value.length < 1 ) { window.alert( “Empty From field! Please correct” ) ; } } This is a string
  25. 25. 25 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 • ???
  26. 26. 26 String Methods FORMAT string.methodName( ) EXAMPLE: name = “Bhola” ; document.write( name.toUpperCase( ) ) ; document.write( name.bold( ) ) ; BHOLABhola
  27. 27. 27 Two Types of String Methods 1. HTML Shortcuts 2. All Others
  28. 28. 28 String Methods: HTML Shortcuts bold( ) italics( ) strike( ) sub( ) sup( ) big( ) small( ) fontsize( n ) fixed( ) fontcolor( color ) link( URL )
  29. 29. 29 big( ), small( ), fontsize( n ) person = "Bhola" ; document.write( person ) ; document.write( person.big( ) ) ; document.write( person.small( ) ) ; document.write( person.fontsize( 1 ) ) ; document.write( person.fontsize( 7 ) ) ; BholaBholaBholaBholaBhola
  30. 30. 30 sub( ), sup( ) person = "Bhola" ; document.write( name ) ; document.write( name.sub( ) ) ; document.write( name ) ; document.write( name.sup( ) ) ; Bhola Bhola Bhola Bhola
  31. 31. 31 bold( ), italics( ), strike( ) name = "Bhola" ; document.write( name ) ; document.write( name.bold( ) ) ; document.write( name.italics( ) ) ; document.write( name.strike( 1 ) ) ; BholaBholaBholaBhola
  32. 32. 32 fixed( ), fontcolor( color ) person = "Bhola" ; document.write( person ) ; document.write( person.fixed( ) ) ; document.write( person.fontcolor( “blue” ) ) ; document.write( person.fontcolor( “orange” ) ) ; BholaBholaBholaBhola
  33. 33. 33 link( URL ) hotel = "Bhola Continental" ; document.write( hotel ) ; document.write( hotel.link( “http://www.bholacontinental.com” ) ) ; Bhola ContinentalBhola Continental
  34. 34. 34 What was common among all those methods that we just discussed?
  35. 35. 35 big( ) <BIG> … </BIG> small( ) <SMALL> … </SMALL> sub( ) <SUB> … </SUB> sup( ) <SUP> … </SUP> bold( ) <B> … </B> italics( ) <I> … </I> strike( ) <S> … </S>
  36. 36. 36 fontsize( n ) <FONT size=n> … </FONT> fontcolor( color ) <FONT color=color> … </FONT> fixed( ) <PRE> … </PRE> link( URL ) <A href=URL> …</A>
  37. 37. 37 String Methods: All Others split( delimiter ) toLowerCase( ) toUpperCase( ) charAt( n ) substring( n, m ) indexOf( substring, n ) lastIndexOf( substring, n )
  38. 38. 38 toLowerCase( ), toUpperCase( ) person = "Bhola" ; document.write( person ) ; document.write( person.toLowerCase( ) ) ; document.write( person.toUpperCase( ) ) ; BholabholaBHOLA
  39. 39. 39 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 ) ) ; Bo
  40. 40. 40 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
  41. 41. 41 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
  42. 42. 42 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
  43. 43. 43 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
  44. 44. 44 Automatic Conversion to Strings • Whenever a non-string is used where JavaScript is expecting a string, it converts that non-string into a string • 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
  45. 45. 45 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
  46. 46. 46 The ‘+’ Operator: Examples document.write( 2 + Math.PI ) ; document.write( "2" + "3" ) ; document.write( "2" + Math.PI ) ; document.write( "Yes" + false ) ; 5.141592653589793 23 23.141592653589793 Yesfalse
  47. 47. 47 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 ) ; NaN 6.283185307179586
  48. 48. 48 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 ) ; 100.55
  49. 49. 49 Conversion from Strings parseInt( ) and parseFloat( ) methods
  50. 50. 50 9000 900 9000900
  51. 51. 51 function calc( ) { document.myForm.total.value = document.myForm.salary.value + document.myForm.bonus.value ; }
  52. 52. 52 function calc( ) { document.myForm.total.value = parseFloat( document.myForm.salary.value ) + parseFloat( document.myForm.bonus.value ) ; } Why not use parseInt( ) here?
  53. 53. 53 During Today’s Lecture … • We become familiar with methods used for manipulating strings • We became able to solve simple problems involving strings
  54. 54. 54 Next (the 14th ) Web Dev Lecture: Images & Animation • To become able to add and manipulate images and animations to a Web page
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×