Spread Knowledge

CS101 - Introduction to Computing - Lecture Handout 38

User Rating:  / 0
PoorBest 

Related Content: CS101 - VU Lectures, Handouts, PPT Slides, Assignments, Quizzes, Papers & Books of Introduction to Computing

String Manipulations

(Web Development Lecture 13)

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

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

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

Properties

Math.PI
Math.E
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E
Math.SQRT2
Math.SQRT1_2

Properties

Methods

Methods

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

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

Math.asin

Math.asin 1

random( )

Returns a randomly-selected, floating-point number between 0 and 1

EXAMPLE

document.write( Math.random( ) )

0.9601111965589273

random( ): Example

Design a Web page that displays the result of the rolling of a 6-sided die on user command

random

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

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 = “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 lecture
Let us see how we put the ‘length’ property of a string to good use

document.write

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

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

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

  1. HTML Shortcuts
  2. All Others

String Methods: HTML Shortcuts

String Methods

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

big( ), small( ), fontsize( n )

sub( ), sup( )

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

sub( ), sup( )

bold( ), italics( ), strike( )

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

bold( ), italics( ), strike( )

fixed( ), fontcolor( color )

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

fixed( ), fontcolor( color )

link( URL )

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

link( URL )

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

big( ) <BIG> … </BIG>
small( ) <SMALL> … </SMALL>
sub( ) <SUB> … </SUB>
sup( ) <SUP> … </SUP>
bold( ) <B> … </B>
italics( ) <I> … </I>
strike( ) <S> … </S>
fontsize( n ) <FONT size=n> …
</FONT>
fontcolor( color ) <FONT color=color> …
</FONT>
fixed( ) <PRE> … </PRE>
link( URL ) <A href=URL> …</A>

String Methods: All Others

String Methods  All Others

toLowerCase( ), toUpperCase( )

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

toLowerCase( ), toUpperCase( )

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

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

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

Returns the position

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

Returns an array of strings

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

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

The ‘+’ Operator

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

Strings In Mathematical Expressions

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

Conversion from Strings

function calc( ) {
document.myForm.total.value =
document.myForm.salary.value +
document.myForm.bonus.value ;
}
function calc( ) {
document.myForm.total.value =document.myForm.salary.value
parseFloat( document.myForm.salary.value ) +
parseFloat( document.myForm.bonus.value ) ;
}

During Today’s Lecture …

  • 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