CS101 Introduction to Computing
Lecture 44
Programming Methodology
(Web Development Lecture 15)
1
During the last lecture we discussed
Graphics & Animation
• We became able to add and manipulate
images and simple animations to a Web page
2
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!
3
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.
4
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
5
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- 6
fetched image
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
• Example
7
Today’s Goals
(Programming Methodology)
• To understand effective programming practices
that result in the development of correct
programs with minimum effort
• To become familiar with testing & debugging
8
programming
methodology?
The process used by an
individual or a team for
developing programs
9
good
programming
methodology?
A methodology that enables
the lowest-cost and onschedule development of
programs that are correct,
easy to maintain & enhance
10
correct
program?
A program
with correct
syntax &
semantics
11
readable
program?
A program that is easy
to read & understand,
and therefore, easy to
maintain & enhance
12
swapFlag = true ;
Bubble
while ( swapFlag == true ) {
Sort
swapFlag = false ;
for ( k = 0 ; k < ht.length - 1 ; k++ ) {
if ( ht[ k ] < ht[ k + 1 ] ) {
temp = ht[ k + 1 ] ;
ht[ k + 1 ] = ht[ k ] ;
ht[ k ] = temp ;
swapFlag = true ;
}
}
How can we make it more readable?
13
}
What is its most complex aspect?
for ( j = 0 ; j < 100000 ; j++ ) {
for ( k = 0 ; k < ht.length - 1 ; k++ ) {
if ( ht[ k ] < ht[ k + 1 ] ) {
temp = ht[ k + 1 ] ;
ht[ k + 1 ] = ht[ k ] ;
ht[ k ] = temp ;
}
}
}
14
Readable programs are:
- more readable
- efficient enough
15
guidelines
16
Design Guidelines
• Break your code down into short and simple
functions (e.g. take the 3 swap statements out
from the last example and put them into a
function of their own)
• Do not use global variables
17
Coding Guidelines
• Always use semicolons to end statements
• Indent blocks of code (2 to 5 spaces)
• Identifiers:
– Use the camelBack scheme
– Make them descriptive but concise
– Variables: nouns
– Functions: verbs
• Comment liberally
18
Comments let
the code speak
for itself!
19
Guidelines for Developing Short Programs
1. Read, understand
the problem
2. Do you have all the
required data?
No: Get it
Else assume it.
State it explicitly
20
Example: Problem Statement
• Develop a Web page that displays an order
taking form
• It takes the number of items required for each
product, multiplies with the prices, sums them
up, adds the GST, and displays the total value
of the order
21
Guidelines for Developing Short Programs
1. Read, understand
the problem
2. Do you have all the
required data?
No: Get it
Else assume it.
State it explicitly
3. Do the design
22
23
Developing Short Programs
1. Read, understand
the problem
2. Do you have all the
required data?
No: Get it
Else assume it.
State it explicitly
3. Do the design
4. Write test cases
24
25
Developing Short Programs
1. Read, understand
the problem
5. Write the code on a
piece of paper
2. Do you have all the
required data?
6. Hand-check it
No: Get it
Else assume it.
State it explicitly
3. Do the design
4. Write test cases
7. Type it in
8. Run & check it on
test cases
9. Errors? fix & redo 9
Done!
26
Design & Code Reviews
• Probably the most efficient way of improving the
a program
• Being humans, at time we see what is
supposed to be there instead of what is actually
there
• Another pair of eyeballs may not have the same
problem, especially if they were not involved in
building the design or code
27
Two Popular Review Methods
1. Give the problem statement, design, and code
(that includes all assumptions) to a peer, and
ask him/her to see if things have been done
properly
2. Walk a peer or a group of peers through the
problem, the design, and the code yourself
Which of the two is better?
28
Is it possible to
write defectfree programs?
29
Is it even advisable
to attempt writing
programs that are
free of defects?
30
Testing & Debugging
• Testing: The tasks performed to determine the
existence of defects
• Debugging: The tasks performed to detect the
exact location of defects
• Defects are also called bugs or errors
• Let us now look at one of their classifications
31
Types of Errors
• Syntax errors
• Semantic errors
• Run-time errors
32
Syntax Errors
• They are caused by the code that somehow
violates the rules of the language
• Easy to detect and fix errors
• The browser stops code interpretation on
detecting one of these
Syntax
error?
• Examples:
– a=b+*c;
– receiver = reciever + 2
Semantic Errors
• Occur when a statement executes and has an
effect not intended by the programmer
• Hard to detect during normal testing
• Often times occur only in unusual & infrequent
circumstances
• The ‘+’ operator often results in unintended
34
consequences. Remedy: Convert, before use
Run-Time Errors
• Occur when the program is running and tries to
do something that is against the rules
• Example: Accessing a non-existent variable,
property, method, object, etc (e.g. a method
name is misspelled)
• Sources of these can be determined by a
careful reading of the code, but unfortunately,
not always!
35
Debugging
36
Tools:
Internet
Options…:
Advanced:
37
name = "Bhola ;
Syntax Error
38
checkPulse( ) ;
Run-time Error
39
x = 1.3 ;
x.upperCase( ) ;
Run-time Error
40
income = document.myForm.salary.value +
document.myForm.bonus.value ;
Semantic Error
41
o
o
c Mm n
mistakes
42
if ( today = “holiday” )
mood = “good” ;
43
if ( today == “holiday” ) ;
mood = “good” ;
44
if ( today == “holiday” || weather == “OK”
mood = “excellent” ;
45
function doThis ( tiger ) {
box[ 0 ] = tiger ;
x = box[ 0 ] ;
return x ;
46
box = new array( 10 ) ;
47
box = new Array( 10 ) ;
box( 0 ) = 43 ;
48
Helpful Editors
• Using smart editors (e.g. DreamWeaver, nedit)
can help in avoiding many types of syntax
errors
• They can, for example:
– Automatically color different parts of statements in
different colors, e.g. comments in Gray, strings in
Green, HTML tags in Blue
– Auto indent
– Visually indicate the presence of mismatched
parentheses, curly braces or square brackets
49
During Today’s Lecture …
• We looked at a few effective programming
practices that result in the development of
correct programs with minimum effort
• We also became familiar with testing &
debugging
50
Final Lecture:
Review & Wrap-Up
• To review a selection from the interesting ideas
that we explored over the last 44 lectures
51