User Rating: 



/ 0
Related Content: CS101 - VU Lectures, Handouts, PPT Slides, Assignments, Quizzes, Papers & Books of Introduction to Computing
Programming Methodology
(Web Development Lecture 15)
During the last lecture we discussed Graphics & Animation
- We became able to add and manipulate images and simple animations to a Web
page
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!
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.
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
The Image Pre-Loading Process
- An instance of the Image object is created using the new keyword
- The src property of this instance is set equal to the filename of the image to be preloaded
- That step starts the down-loading of the image into the cache without actually
displaying it
- 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
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
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
programming
methodology?

Good prrogrrammiing
methodollogy?

correct
program?

readable
program?

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 ;
} } }
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 ;
}
}
}
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
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
Guidelines for Developing Short Programs

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
Guidelines for Developing Short Programs

Developing Short Programs


Developing Short Programs

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
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?
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
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
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
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!
Debugging



income = document.myForm.salary.value +
document.myForm.bonus.value ;
Common Mistakes
if ( today = “holiday” )
mood = “good” ;

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
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
Final Lecture:
Review & Wrap-Up
- To review a selection from the interesting ideas that we explored over the last 44
lectures