cs101- introduction to computing- lecture 44
DESCRIPTION
Virtual University Course CS101- Introduction to Computing Lecture No 44 Programming Methodology web development Lecture 15TRANSCRIPT
![Page 1: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/1.jpg)
1
CS101 Introduction to Computing
Lecture 44Programming Methodology
(Web Development Lecture 15)
![Page 2: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/2.jpg)
2
During the last lecture we discussed Graphics & Animation
• We became able to add and manipulate images and simple animations to a Web page
![Page 3: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/3.jpg)
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!
![Page 4: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/4.jpg)
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.
![Page 5: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/5.jpg)
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
![Page 6: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/6.jpg)
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
![Page 7: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/7.jpg)
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
![Page 8: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/8.jpg)
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
![Page 9: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/9.jpg)
9
programmingprogrammingmethodologymethodology??
The process used by an individual or a team for developing programs
![Page 10: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/10.jpg)
10
programmingprogrammingmethodologymethodology??
goodgoodA methodology that enables the lowest-cost and on-schedule development of programs that are correct, easy to maintain & enhance
![Page 11: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/11.jpg)
11
correctcorrectprogramprogram??
A program with correct syntax & semantics
![Page 12: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/12.jpg)
12
readablereadableprogramprogram??
A program that is easy to read & understand, and therefore, easy to maintain & enhance
![Page 13: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/13.jpg)
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
![Page 14: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/14.jpg)
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 ;
}}
}
![Page 15: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/15.jpg)
15
Readable programs are:Readable programs are:
- - moremore readable readable
- efficient - efficient enoughenough
![Page 16: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/16.jpg)
16
guidelines
![Page 17: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/17.jpg)
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
![Page 18: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/18.jpg)
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
![Page 19: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/19.jpg)
19
Comments let the code speak
for itself!
![Page 20: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/20.jpg)
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
![Page 21: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/21.jpg)
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
![Page 22: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/22.jpg)
22
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
![Page 23: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/23.jpg)
23
![Page 24: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/24.jpg)
24
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
![Page 25: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/25.jpg)
25
![Page 26: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/26.jpg)
26
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
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!
![Page 27: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/27.jpg)
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
![Page 28: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/28.jpg)
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?
![Page 29: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/29.jpg)
29
Is it possible to write defect-
free programs?
![Page 30: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/30.jpg)
30
Is it even advisable to attempt writing programs that are
free of defects?
![Page 31: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/31.jpg)
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
![Page 32: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/32.jpg)
32
Types of Errors
• Syntax errors
• Semantic errors
• Run-time errors
![Page 33: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/33.jpg)
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
Syntaxerror?
![Page 34: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/34.jpg)
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
![Page 35: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/35.jpg)
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!
![Page 36: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/36.jpg)
36
Debugging
![Page 37: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/37.jpg)
37
Tools:
InternetOptions…:
Advanced:
![Page 38: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/38.jpg)
38
name = "Bhola ;
Syntax Error
![Page 39: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/39.jpg)
39
checkPulse( ) ;
Run-time Error
![Page 40: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/40.jpg)
40
x = 1.3 ;x.upperCase( ) ;
Run-time Error
![Page 41: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/41.jpg)
41
income = document.myForm.salary.value +document.myForm.bonus.value ;
Semantic Error
![Page 42: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/42.jpg)
42
coMmon
misstakess
![Page 43: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/43.jpg)
43
if ( today = “holiday” )
mood = “good” ;
![Page 44: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/44.jpg)
44
if ( today == “holiday” ) ;
mood = “good” ;
![Page 45: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/45.jpg)
45
if ( today == “holiday” || weather == “OK”
mood = “excellent” ;
![Page 46: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/46.jpg)
46
function doThis ( tiger ) {box[ 0 ] = tiger ;
x = box[ 0 ] ;
return x ;
![Page 47: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/47.jpg)
47
box = new array( 10 ) ;
![Page 48: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/48.jpg)
48
box = new Array( 10 ) ;
box( 0 ) = 43 ;
![Page 49: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/49.jpg)
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
![Page 50: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/50.jpg)
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
![Page 51: CS101- Introduction to Computing- Lecture 44](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b756a1a28ab794f8b46f2/html5/thumbnails/51.jpg)
51
Final Lecture:Review & Wrap-Up
• To review a selection from the interesting ideas that we explored over the last 44 lectures