CS101- Introduction to Computing- Lecture 41
-
Upload
bilal-ahmed -
Category
Education
-
view
77 -
download
4
description
Transcript of CS101- Introduction to Computing- Lecture 41
![Page 1: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/1.jpg)
1
CS101 Introduction to Computing
Lecture 41Images & Animation
(Web Development Lecture 14)
![Page 2: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/2.jpg)
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
![Page 3: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/3.jpg)
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
![Page 4: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/4.jpg)
4
String Methods
FORMAT
string.methodName( )
EXAMPLE:
name = “Bhola” ;
document.write( name.toUpperCase( ) ) ;
document.write( name.bold( ) ) ;
BHOLABhola
![Page 5: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/5.jpg)
5
Two Types of String Methods
1. HTML Shortcuts
2. All Others
![Page 6: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/6.jpg)
6
String Methods: HTML Shortcuts
bold( )
italics( )
strike( )
sub( )
sup( )
big( )
small( )
fontsize( n )
fixed( )
fontcolor( color )
link( URL )
![Page 7: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/7.jpg)
7
String Methods: All Others
split( delimiter )
toLowerCase( )
toUpperCase( )
charAt( n )
substring( n, m )
indexOf( substring, n )
lastIndexOf( substring, n )
![Page 8: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/8.jpg)
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
![Page 9: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/9.jpg)
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
![Page 10: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/10.jpg)
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 ) ;
NaN
6.283185307179586
![Page 11: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/11.jpg)
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
![Page 12: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/12.jpg)
12
Conversion from StringsparseInt( ) and parseFloat( ) methods
![Page 13: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/13.jpg)
13
Today’s Goal(Images & Animation)
• To become able to add and manipulate images and simple animations to a Web page
![Page 14: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/14.jpg)
14
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">
• Plea: Don’t use images just for the sake of it!
![Page 15: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/15.jpg)
15
![Page 16: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/16.jpg)
16
<HTML><HEAD><TITLE>Image Demo</TITLE>
</HEAD><BODY>
<H1>Image Demo</H1>
Here is an image <IMG src="die5.gif"><IMG src="die5.gif" height="63" width="126"> <P>
Here is another <IMG align="middle" src= "http://www.vu.edu.pk/images/logo/logotop.jpg">
</BODY></HTML>
![Page 17: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/17.jpg)
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.
![Page 18: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/18.jpg)
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
![Page 19: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/19.jpg)
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
![Page 20: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/20.jpg)
20
Let us revisit an example that we first saw in lecture 35
![Page 21: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/21.jpg)
21
* * * *
![Page 22: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/22.jpg)
22
![Page 23: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/23.jpg)
23
die1.gif die2.gif die3.gif
die4.gif die5.gif die6.gif
![Page 24: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/24.jpg)
24
<HTML><HEAD>
<TITLE>Roll the Die</TITLE><SCRIPT>
JavaScript Code</SCRIPT>
</HEAD>
<BODY >HTML Code
</BODY></HTML>
![Page 25: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/25.jpg)
25
<IMG name="die" src="die6.gif">
<FORM>
<INPUT type="button" value="Roll the Die"
onClick="rollDie( )">
</FORM>
![Page 26: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/26.jpg)
26
dieImg = new Array( 7 ) ;
for( k = 1; k < 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 ;
}
![Page 27: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/27.jpg)
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
![Page 28: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/28.jpg)
28
![Page 29: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/29.jpg)
29
<HTML><HEAD>
<TITLE>Image Selector</TITLE><SCRIPT>
JavaScript Code</SCRIPT>
</HEAD>
<BODY >HTML Code
</BODY></HTML>
![Page 30: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/30.jpg)
30
dieImg = new Array( 7 ) ;
for( k = 1; k < 7; k = k + 1 ) { // Preload images
dieImg[ k ] = new Image( ) ;
dieImg[ k ].src = "die" + k + ".gif" ;
}
![Page 31: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/31.jpg)
31
<IMG name="big" src="die6.gif" width="252" height="252"><P>
<IMG src="die1.gif" width="63" height="63"
onMouseOver=
"document.big.src=dieImg[ 1 ].src">
…
…
<IMG src="die6.gif" width="63" height="63"
onMouseOver=
"document.big.src=dieImg[ 6 ].src">
![Page 32: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/32.jpg)
32
Where Else Can We Use This?
• Automobile Web site
• ???
![Page 33: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/33.jpg)
33
Animation Example 1
• Take 16 images and cycle through them to create an animation effect
![Page 34: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/34.jpg)
34
1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16
![Page 35: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/35.jpg)
35
![Page 36: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/36.jpg)
36
<HTML><HEAD>
<TITLE>Animation 1</TITLE><SCRIPT>
JavaScript Code</SCRIPT>
</HEAD>
<BODY >HTML Code
</BODY></HTML>
![Page 37: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/37.jpg)
37
<CENTER>
<IMG name="circle" src="circle1.gif" onLoad="setTimeout( 'circulate( )', gap )">
</CENTER>
setTimeout( ) executes circulate( ) once after a delay of gap milliseconds
![Page 38: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/38.jpg)
38
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" ;}
![Page 39: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/39.jpg)
39
function circulate( ) {
document.circle.src =circImg[ imageN ].src ;
imageN = imageN + 1 ;
if( imageN > 16 )imageN = 1 ;
}
![Page 40: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/40.jpg)
40
![Page 41: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/41.jpg)
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 <IMG> tag to display a moving image
• However, JavaScript provides better control over the sequencing and the gap between the individual images
![Page 42: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/42.jpg)
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
![Page 43: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/43.jpg)
43
![Page 44: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/44.jpg)
44
<HTML><HEAD>
<TITLE>Animation 2</TITLE><SCRIPT>
JavaScript Code</SCRIPT>
</HEAD>
<BODY >HTML Code
</BODY></HTML>
![Page 45: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/45.jpg)
45
<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>
![Page 46: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/46.jpg)
46
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" ;}
No change
![Page 47: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/47.jpg)
47
function circulate( ) {
document.circle.src =circImg[ imageN ].src ;
imageN = imageN + 1 ;
if( imageN > 16 )imageN = 1 ;
}
No change
![Page 48: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/48.jpg)
48
function slowDown( ) {
gap = gap + 20 ;
if( gap > 4000 )gap = 4000 ;
}function speedUp( ) {
gap = gap - 20 ;
if( gap < 0 )gap = 0 ;
}
Two new functions
![Page 49: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/49.jpg)
49
![Page 50: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/50.jpg)
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
![Page 51: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/51.jpg)
51
Structured Vector Graphics
• New format; may become more popular than Flash
• Plug-in required
• Text-file storage; search engine friendly
![Page 52: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/52.jpg)
52
During Today’s Lecture …
• We became able to add and manipulate images and simple animations to a Web page
![Page 53: CS101- Introduction to Computing- Lecture 41](https://reader033.fdocuments.us/reader033/viewer/2022060202/559c62b01a28abc27f8b4606/html5/thumbnails/53.jpg)
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