CS101 Introduction to Computing Lecture 41 Images

1
CS101 Introduction to ComputingLecture 41Images
Animation (Web Development Lecture 14)
2
During the last lecture we discussed String
Manipulation

• We became familiar with methods used for
  manipulating strings
• We became able to solve simple problems involving
  strings

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

• FORMAT
• string.methodName( )
• EXAMPLE
• name Bhola
• document.write( name.toUpperCase( ) )
• document.write( name.bold( ) )

BHOLABhola
5
Two Types of String Methods

1. HTML Shortcuts
2. All Others

6
String Methods HTML Shortcuts
bold( ) italics( ) strike( )
big( ) small( ) fontsize( n )
link( URL )
sub( ) sup( )
fixed( ) fontcolor( color )
7
String Methods All Others
toLowerCase( ) toUpperCase( )
charAt( n ) substring( n, m )
indexOf( substring, n ) lastIndexOf( substring, n
)

• split( delimiter )

8
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

9
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

10
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 )
6.283185307179586
NaN
11
The toString MethodExplicit 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
12
Conversion from StringsparseInt( ) and
parseFloat( ) methods
13
Todays Goal(Images Animation)

• To become able to add and manipulate images and
  simple animations to a Web page

14
Images in HTML

• It is quite straight forward to include gif and
  jpg images in an html Web page using the ltIMGgt
  tag
• Format ltIMG srcURL, alttext
• heightpixels widthpixels
• align"bottommiddletop"gt
• Plea Dont use images just for the sake of it!

15
(No Transcript)
16

• ltHTMLgtltHEADgt
• ltTITLEgtImage Demolt/TITLEgt
• lt/HEADgtltBODYgt
• ltH1gtImage Demolt/H1gt
• Here is an image ltIMG src"die5.gif"gt
• ltIMG src"die5.gif" height"63" width"126"gt ltPgt
• Here is another ltIMG align"middle" src
  "http//www.vu.edu.pk/images/logo/logotop.jpg"gt
• lt/BODYgtlt/HTMLgt

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

18
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

19
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

20
Let us revisit an example that we first saw in
lecture 35
21

22
(No Transcript)
23
die1.gif
die2.gif
die3.gif
die4.gif
die5.gif
die6.gif
24

• ltHTMLgt
• ltHEADgt
• ltTITLEgtRoll the Dielt/TITLEgt
• ltSCRIPTgt
• JavaScript Code
• lt/SCRIPTgt
• lt/HEADgt
• ltBODY gt
• HTML Code
• lt/BODYgt
• lt/HTMLgt

25

• ltIMG name"die" src"die6.gif"gt
• ltFORMgt
• ltINPUT type"button" value"Roll the Die"
• onClick"rollDie( )"gt
• lt/FORMgt

26

• dieImg new Array( 7 )
• for( k 1 k lt 7 k k 1 ) //Preload images
• dieImg k new Image( )
• dieImg k .src "die" k ".gif"
• function rollDie( )
• dieN Math.ceil( 6 Math.random( ) )
• document.die.src dieImg dieN .src

27
Another Example

• Develop a Web page that displays six thumbnail
  images and a main image
• The main image should change to a larger version
  of the thumbnail as soon as the mouse moves over
  on a thumbnail image

28
(No Transcript)
29

• ltHTMLgt
• ltHEADgt
• ltTITLEgtImage Selectorlt/TITLEgt
• ltSCRIPTgt
• JavaScript Code
• lt/SCRIPTgt
• lt/HEADgt
• ltBODY gt
• HTML Code
• lt/BODYgt
• lt/HTMLgt

30

• dieImg new Array( 7 )
• for( k 1 k lt 7 k k 1 ) // Preload
  images
• dieImg k new Image( )
• dieImg k .src "die" k ".gif"

31

• ltIMG name"big" src"die6.gif" width"252"
  height"252"gtltPgt
• ltIMG src"die1.gif" width"63" height"63"
• onMouseOver
• "document.big.srcdieImg 1 .src"gt
• ltIMG src"die6.gif" width"63" height"63"
• onMouseOver
• "document.big.srcdieImg 6 .src"gt

32
Where Else Can We Use This?

• Automobile Web site
• ???

33
Animation Example 1

• Take 16 images and cycle through them to create
  an animation effect

34
2
4
1
3
6
8
5
7
10
12
9
11
14
16
13
15
35
(No Transcript)
36

• ltHTMLgt
• ltHEADgt
• ltTITLEgtAnimation 1lt/TITLEgt
• ltSCRIPTgt
• JavaScript Code
• lt/SCRIPTgt
• lt/HEADgt
• ltBODY gt
• HTML Code
• lt/BODYgt
• lt/HTMLgt

37
setTimeout( ) executes circulate( ) once after a
delay of gap milliseconds

• ltCENTERgt
• ltIMG name"circle" src"circle1.gif"
  onLoad"setTimeout( 'circulate( )', gap )"gt
• lt/CENTERgt

38

• gap 100
• imageN 1
• circImg new Array( 17 )
• for( k 1 k lt 17 k k 1 ) // Preload
  images
• circImg k new Image( )
• circImg k .src "circle" k ".gif"

39

• function circulate( )
• document.circle.src
• circImg imageN .src
• imageN imageN 1
• if( imageN gt 16 )
• imageN 1

40
(No Transcript)
41
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
  ltIMGgt tag to display a moving image
• However, JavaScript provides better control over
  the sequencing and the gap between the individual
  images

42
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

43
(No Transcript)
44

• ltHTMLgt
• ltHEADgt
• ltTITLEgtAnimation 2lt/TITLEgt
• ltSCRIPTgt
• JavaScript Code
• lt/SCRIPTgt
• lt/HEADgt
• ltBODY gt
• HTML Code
• lt/BODYgt
• lt/HTMLgt

45

• ltCENTERgt
• ltIMG name"circle" src"circle1.gif"
  onLoad"setTimeout( 'circulate( )', gap )"gt
• lt/CENTERgt
• ltFORMgt
• ltINPUT type"button" value"Slow Down"
• onClick"slowDown( )"gt
• ltINPUT type"button" value"Speed Up"
• onClick"speedUp( )"gt
• lt/FORMgt

46
No change

• gap 100
• imageN 1
• circImg new Array( 17 )
• for( k 1 k lt 17 k k 1 ) // Preload
  images
• circImg k new Image( )
• circImg k .src "circle" k ".gif"

47
No change

• function circulate( )
• document.circle.src
• circImg imageN .src
• imageN imageN 1
• if( imageN gt 16 )
• imageN 1

48
Two new functions

• function slowDown( )
• gap gap 20
• if( gap gt 4000 )
• gap 4000
• function speedUp( )
• gap gap - 20
• if( gap lt 0 )
• gap 0

49
(No Transcript)
50
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

51
Structured Vector Graphics

• New format may become more popular than Flash
• Plug-in required
• Text-file storage search engine friendly

52
During Todays Lecture

• We became able to add and manipulate images and
  simple animations to a Web page

53
Our 15th Final Web Dev Lecture(Programming
Methodology)

• To understand effective programming practices
  that result in the development of correct
  programs with minimum effort
• To become familiar with simple debugging
  techniques