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

1
CS101 Introduction to ComputingLecture
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 ltIMGgt
  tag
• Format ltIMG srcURL, alttext
• heightpixels widthpixels
• align"bottommiddletop"gt
• Plea Dont 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
  ltIMGgt tag to display a moving image
• However, JavaScript provides better control over
  the sequencing and the gap between the individual
  images
• Example

8
Todays 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
programmingmethodology?
The process used by an individual or a team for
developing programs
10
programmingmethodology?
good
A methodology that enables the lowest-cost and
on-schedule development of programs that are
correct, easy to maintain enhance
11
correctprogram?
A program with correct syntax semantics
12
readableprogram?
A program that is easy to read understand, and
therefore, easy to maintain enhance
13
Bubble Sort
swapFlag true while ( swapFlag true )
swapFlag false for ( k 0 k lt
ht.length - 1 k ) if ( ht k lt 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?
14
for ( j 0 j lt 100000 j ) for ( k
0 k lt ht.length - 1 k ) if ( ht k lt
ht k 1 ) temp ht k 1
ht k 1 ht k ht k temp

15
Readable programs are - more readable
- efficient enough
16
guidelines
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

• Read, understand the problem
• 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

• Read, understand the problem
• Do you have all the required data?
• No Get it
• Else assume it. State it explicitly
• Do the design

23
(No Transcript)
24
Developing Short Programs

• Read, understand the problem
• Do you have all the required data?
• No Get it
• Else assume it. State it explicitly
• Do the design
• Write test cases

25
(No Transcript)
26
Developing Short Programs

• Read, understand the problem
• Do you have all the required data?
• No Get it
• Else assume it. State it explicitly
• Do the design
• Write test cases

• Write the code on a piece of paper
• Hand-check it
• Type it in
• Run check it on test cases
• 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

• 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
• 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

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

36
Debugging
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
42
coMmon mistakes
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

47

• box new array( 10 )

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 Todays 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 LectureReview Wrap-Up

• To review a selection from the interesting ideas
  that we explored over the last 44 lectures