CS101- Introduction to Computing- Lecture 44

1
CS101 Introduction to Computing
Lecture 44Programming Methodology
(Web Development Lecture 15)

2
During the last lecture we discussed
Graphics & Animation
• We became able to add and manipulate
images and simple animations to a Web page

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

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

5
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

6
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

7
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

8
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

9
programmingprogramming
methodologymethodology??
The process used by
an individual or a team
for developing
programs

10
programmingprogramming
methodologymethodology??
goodgoodA methodology that
enables the lowest-cost
and on-schedule
development of programs
that are correct, easy to
maintain & enhance

11
correctcorrect
programprogram??
A program
with correct
syntax &
semantics

12
readablereadable
programprogram??
A program that is
easy to read &
understand, and
therefore, easy to
maintain & enhance

13
swapFlag = true ;
while ( swapFlag == true ) {
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?
What is its most complex aspect?
Bubble
Sort

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

15
Readable programs are:Readable programs are:
-- moremore readablereadable
- efficient- efficient enoughenough

17
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

18
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

19
Comments let
the code speak
for itself!

20
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

21
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

22
Guidelines for Developing Short Programs
1. Read, understand
the problem
required data?
No: Get it
Else assume it.
State it explicitly
3. Do the design

24
Developing Short Programs
1. Read, understand
the problem
required data?
No: Get it
Else assume it.
State it explicitly
3. Do the design
4. Write test cases

26
Developing Short Programs
1. Read, understand
the problem
required data?
No: Get it
Else assume it.
State it explicitly
3. Do the design
4. Write test cases
5. Write the code on a
piece of paper
6. Hand-check it
7. Type it in
8. Run & check it on
test cases
9. Errors? fix & redo 9
Done!

27
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

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

29
Is it possible to
write defect-
free programs?

30
Is it even advisable
to attempt writing
programs that are
free of defects?

31
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

32
Types of Errors
• Syntax errors
• Semantic errors
• Run-time errors

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
• Examples:
– a = b + * c ;
– receiver = reciever + 2
Syntax
error?

34
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
consequences. Remedy: Convert, before use

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

37
Tools:
Internet
Options…:
Advanced:

38
name = "Bhola ;
Syntax Error

39
checkPulse( ) ;
Run-time Error

40
x = 1.3 ;
x.upperCase( ) ;
Run-time Error

41
income = document.myForm.salary.value +
document.myForm.bonus.value ;
Semantic Error

43
if ( today = “holiday” )
mood = “good” ;

44
if ( today == “holiday” ) ;
mood = “good” ;

45
if ( today == “holiday” || weather == “OK”
mood = “excellent” ;

46
function doThis ( tiger ) {
box[ 0 ] = tiger ;
x = box[ 0 ] ;
return x ;

48
box = new Array( 10 ) ;
box( 0 ) = 43 ;

49
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

50
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

51
Final Lecture:
Review & Wrap-Up
• To review a selection from the interesting ideas
that we explored over the last 44 lectures

CS101- Introduction to Computing- Lecture 44

More Related Content

Viewers also liked (20)

Similar to CS101- Introduction to Computing- Lecture 44 (20)

More from Bilal Ahmed (20)

Recently uploaded (20)

CS101- Introduction to Computing- Lecture 44