Scribd
Upload
34 views

CS1113 Web Programming: String Manipulations & Animated Images

This document discusses string manipulation and animated images in JavaScript. It provides examples of common string methods like toUpperCase(), indexOf(), and split() to manipulate strings. It also discusses how to add and style images in HTML using the <IMG> tag by specifying attributes like src, height, width, and align. The document concludes by mentioning how JavaScript can be used to add simple animations to web pages.

Uploaded by

Rajiiii232312
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
34 views

CS1113 Web Programming: String Manipulations & Animated Images

This document discusses string manipulation and animated images in JavaScript. It provides examples of common string methods like toUpperCase(), indexOf(), and split() to manipulate strings. It also discusses how to add and style images in HTML using the <IMG> tag by specifying attributes like src, height, width, and align. The document concludes by mentioning how JavaScript can be used to add simple animations to web pages.

Uploaded by

Rajiiii232312
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 67

CS1113 Web Programming

Lecture 17
String Manipulations & Animated
Images
(JavaScript - VII)
1
Today’s Goal
(String Manipulation and (Images
& Animation)
• To become familiar with methods used for
manipulating strings

• To become able to solve simple problems


involving strings

• To become able to add and manipulate images


and simple animations to a Web page
2
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 3


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

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

The length of the string ‘name’ is 5

5
Let us now revisit an example that we
first discussed in the 11th lecture

Let us see how we put the ‘length’


property of a string to good use

6
7
<HTML>
<HEAD>
<TITLE>Send an eMail</TITLE>
<SCRIPT type=“text/javascript”>
function checkForm( ) { … }
</SCRIPT>
</HEAD>
<BODY bgcolor=“#FFFFCC”>
<TABLE><FORM …>…</FORM></TABLE>
</BODY>
</HTML> 8
<TABLE>
…
<FORM …>
<INPUT
type=“submit”
name=“sendEmail”
value=“Send eMail”
onMouseOver=“checkForm( )”
>
…
</FORM>
</TABLE> 9
This is a
string

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

10
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

• ???

11
String Methods
FORMAT
string.methodName( )

EXAMPLE:
name = “Bhola” ;
document.write( name.toUpperCase( ) ) ;
document.write( name.bold( ) ) ;

BHOLABhola
12
Two Types of String Methods

1. HTML Shortcuts

2. All Others

13
String Methods: HTML Shortcuts

big( ) bold( ) link( URL )


small( ) italics( )
fontsize( n ) strike( )

sub( ) fixed( )
sup( ) fontcolor( color )

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

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

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

BholaBholaBholaBhola
17
fixed( ), fontcolor( color )
person = "Bhola" ;
document.write( person ) ;
document.write( person.fixed( ) ) ;
document.write( person.fontcolor( “green” ) ) ;
document.write( person.fontcolor( “orange” ) ) ;

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

Bhola ContinentalBhola Continental


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

20
big( ) <BIG> … </BIG>
small( ) <SMALL> … </SMALL>
sub( ) <SUB> … </SUB>
sup( ) <SUP> … </SUP>
bold( ) <B> … </B>
italics( ) <I> … </I>
strike( ) <S> … </S>

21
fontsize( n ) <FONT size=n> …
</FONT>
fontcolor( color ) <FONT color=color> …
</FONT>
fixed( ) <PRE> … </PRE>
link( URL ) <A href=URL> …</A>

22
String Methods: All Others

toLowerCase( ) charAt( n )
toUpperCase( ) substring( n, m )

indexOf( substring, n )
lastIndexOf( substring, n )

split( delimiter )

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

BholabholaBHOLA
24
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
25
substring( n, m )
Returns a string containing characters copied
from positions n to m - 1

s = "Bhola" ;
document.write( s.substring( 1, 4 ) ) ;
document.write( s.substring( 0, s.length ) ) ;

holBhola
26
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
27
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
28
split( delimiter )
Returns an array of strings, created by splitting
string into substrings, at delimiter boundaries

s = "Hello: I must be coming!" ; Hello: H


a = new Array( 5 ) ; I llo: I must b
b = new Array( 5 ) ; must coming!
a = s.split( " " ) ; be undefined
b = s.split( "e" ) ; coing! undefined
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>" ) ; 29
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 30
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 31
The ‘+’ Operator: Examples
document.write( 2 + Math.PI ) ;
5.141592653589793
document.write( "2" + "3" ) ;
23
document.write( "2" + Math.PI ) ;

23.141592653589793
document.write( "Yes" + false ) ;

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


6.283185307179586
document.write( "Yes" ^ 43 ) ;
NaN
33
The ‘toString’ Method
Explicit conversion to a string

EXAMPLE:
Convert 100.553478 into a currency format

a = 100.553478 ; 100.55
b = a.toString( ) ;
decimalPos = b.indexOf( ".", 0 ) ;
c = b.substring( 0, decimalPos + 3 ) ;
document.write( c ) ;
34
Conversion from Strings
parseInt( ) and parseFloat( ) methods

35
Images & Animation

36
Images in HTML
• It is quite straight forward to include gif and jpg
images in an html Web page using the <IMG>
tag

• Format: <IMG src=URL, alt=text


height=pixels width=pixels
align="bottom|middle|top">

37
38
<HTML><HEAD>
<TITLE>Image Demo</TITLE>
</HEAD><BODY>
<H1>Image Demo</H1>

Here is an image <IMG src=“pasa5.gif">


<IMG src=“pasa5.gif" height="63" width="126">
<P>
Here is another <IMG align="middle" src=
"http://www.uol.edu.pk/images/logo/logotop.jpg"
>
</BODY></HTML> 39
Images in JavaScript
• Images in JavaScript can be manipulated in
many ways using the built-in object Image

• Properties: name, border, complete, height,


width, hspace, vspace, lowsrc, src

• Methods: None

• Event handlers: onAbort, onError, onLoad, etc.


40
Image Preloading
• The primary use for an Image object is to
download an image into the cache before it is
actually needed for display

• This technique can be used to create smooth


animations or to display one of several images
based on the requirement

41
The Image Pre-Loading Process
1. An instance of the Image object is created
using the new keyword

2. The src property of this instance is set equal to


the filename of the image to be pre-loaded

3. That step starts the down-loading of the image


into the cache without actually displaying it

4. When a pre-loaded image is required to be


displayed, the src property of the displayed
image is set to the src property of the pre-
fetched image 42
43
pasa1.gif pasa2.gif pasa3.gif

pasa4.gif pasa5.gif pasa6.gif

44
<HTML>
<HEAD>
<TITLE>Roll the Die</TITLE>
<SCRIPT>
JavaScript Code
</SCRIPT>
</HEAD>

<BODY >
HTML Code
</BODY>
</HTML>
45
<IMG name="pasa" src=“pasa6.gif">

<FORM>
<INPUT type="button" value="Roll the Die"
onClick="rollDie( )">
</FORM>

46
pasaImg = new Array( 7 ) ;

for( k = 1; k < 7; k = k + 1 ) { //Preload images


pasaImg[ k ] = new Image( ) ;
pasaImg[ k ].src = “pasa" + k + ".gif " ;
}

function rollDie( ) {
pasaN = Math.ceil( 6 * Math.random( ) ) ;
document.pasa.src = pasaImg[ pasaN ].src
;
} 47
Where Else Can We Use This?

• Automobile Web site

• ???

48
Animation Example 1
• Take 16 images and cycle through them to
create an animation effect

49
1 2 3 4

5 6 7 8

9 10 11 12

13 14 15 16

50
51
<HTML>
<HEAD>
<TITLE>Animation 1</TITLE>
<SCRIPT>
JavaScript Code
</SCRIPT>
</HEAD>

<BODY >
HTML Code
</BODY>
</HTML>
52
setTimeout( ) executes
circulate( ) once after a
delay of gap milliseconds
<CENTER>

<IMG name="circle" src="circle1.gif"


onLoad="setTimeout( 'circulate( )', gap )">

</CENTER>

53
gap = 100 ;
imageN = 1 ;

circImg = new Array( 17 ) ;

for( k = 1; k < 17; k = k + 1 ) { // Preload images

circImg[ k ] = new Image( ) ;

circImg[ k ].src = "circle" + k + ".gif" ;


}
54
function circulate( ) {

document.circle.src =
circImg[ imageN ].src ;

imageN = imageN + 1 ;

if( imageN > 16 )


imageN = 1 ;
}

55
56
Animated Gifs
• We could have saved the 16 gif images of the
previous example in a single file in the form of
an animated gif, and then used it in a regular
<IMG> tag to display a moving image

• However, JavaScript provides better control


over the sequencing and the gap between the
individual images

57
Animation Example 2
• Take 16 images and cycle through them to
create an animation effect

• Provide buttons to slow down or speed up


the animation

58
59
<HTML>
<HEAD>
<TITLE>Animation 2</TITLE>
<SCRIPT>
JavaScript Code
</SCRIPT>
</HEAD>

<BODY >
HTML Code
</BODY>
</HTML>
60
<CENTER>
<IMG name="circle" src="circle1.gif"
onLoad="setTimeout( 'circulate( )', gap )">
</CENTER>

<FORM>
<INPUT type="button" value="Slow Down"
onClick="slowDown( )">
<INPUT type="button" value="Speed Up"
onClick="speedUp( )">
</FORM>
61
No
gap = 100 ;
change
imageN = 1 ;

circImg = new Array( 17 ) ;

for( k = 1; k < 17; k = k + 1 ) { // Preload images

circImg[ k ] = new Image( ) ;

circImg[ k ].src = "circle" + k + ".gif" ;


}
62
function circulate( ) { No
change
document.circle.src =
circImg[ imageN ].src ;

imageN = imageN + 1 ;

if( imageN > 16 )


imageN = 1 ;
}

63
function slowDown( ) { Two new
functions
gap = gap + 20 ;
if( gap > 4000 )
gap = 4000 ;
}
function speedUp( ) {
gap = gap - 20 ;
if( gap < 0 )
gap = 0 ;
} 64
65
Flash Animation
• Designed for 2-D animations, but can be used
for storing static vector-images as well

• A special program (called a plug-in) is required


to view Flash files in a Web browser

• Can be used to design complete, animated


Web sites with hardly any HTML in it

• Binary-file storage
66
Structured Vector Graphics
• New format; may become more popular than
Flash

• Plug-in required

• Text-file storage; search engine friendly

67

You might also like