1 CS101 Introduction to Computing Lecture 38 String 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 object We produced solutions for simple problems using several methods of the Math object

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 regular text is written to a document

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 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 Methods random( ) sin( r ) cos( r ) tan( r ) asin( x ) acos( x ) atan( x ) atan2( x, y ) max( x, y ) round( x ) floor( x ) ceil( x ) exp( x ) log( x ) abs( x ) sqrt( x ) pow( x, y )

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 ) )

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 ) )

9 Returns the square root of x sqrt( x ) 0.5  Returns x raised to the power y pow( x, y ) 2, 32 

10 Returns Math.E raised to the power x exp( x ) 1  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 that is greater than or equal to x floor( x )round( x ) 1.1          -13

12 Returns the absolute value of x abs( x ) 1.1    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 -12, -5  -5

14 random( ) Returns a randomly-selected, floating-point number between 0 and 1 EXAMPLE document.write( Math.random( ) )

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 solve simple problems involving strings

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 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 Example name = “BHOLA” ; document.write( “The length of the string ‘name’ is ”, name.length ) ; The length of the string ‘name’ is 5

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

21

22 Send an function checkForm( ) { … } …

23 … <INPUT type=“submit” name=“send ” value=“Send ” onMouseOver=“checkForm( )” > …

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

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 String Methods FORMAT string.methodName( ) EXAMPLE: name = “Bhola” ; document.write( name.toUpperCase( ) ) ; document.write( name.bold( ) ) ; BHOLABhola

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( ) fontcolor( color ) link( URL )

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 ) ) ; Bhola Bhola Bhola Bhola Bhola

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

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

32 fixed( ), fontcolor( color ) person = "Bhola" ; document.write( person ) ; document.write( person.fixed( ) ) ; document.write( person.fontcolor( “blue” ) ) ; document.write( person.fontcolor( “orange” ) ) ; Bhola Bhola BholaBhola

33 link( URL ) hotel = "Bhola Continental" ; document.write( hotel ) ; document.write( hotel.link( “ ) ) ; Bhola ContinentalBhola Continental

34 What was common among all those methods that we just discussed?

35 big( ) … small( ) … sub( ) … sup( ) … bold( ) … italics( ) … strike( ) …

36 fontsize( n ) … fontcolor( color ) … fixed( ) … link( URL ) …

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

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

39 charAt( n ) Returns a string containing the character at position n (the position of the 1 st 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 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 indexOf( substring, n ) Returns the position of the first occurrence of substring that appears on or after the n th 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 lastIndexOf( substring, n ) Returns the position of the last occurrence of substring that appears on or before the n th 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 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( " " ) ; for( k = 0; k < 5; k = k + 1 ) document.write( " ", a[ k ], " ", b[ k ], " " ) ; document.write( " " ) ; Hello:H Illo: I must b mustgoing! beundefined going!undefined

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 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 The ‘+’ Operator: Examples document.write( 2 + Math.PI ) ; document.write( "2" + "3" ) ; document.write( "2" + Math.PI ) ; document.write( "Yes" + false ) ; Yesfalse

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

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

49 Conversion from Strings parseInt( ) and parseFloat( ) methods

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.myForm.bonus.value ) ; } Why not use parseInt( ) here?

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

54 Next (the 14 th ) Web Dev Lecture: Images & Animation To become able to add and manipulate images and animations to a Web page