CS101_Handouts1-45.pdf - Introduction to Computing CS101 VU...

Unformatted text preview: Introduction to Computing –CS101 VU Lecture 23 Flow Control & Loops (Web Development Lecture 8) During the last lecture we had a discussion on Data Types, Variables & Operators We found out about JavaScript data types About variables and literals We also discussed several operators supported by JavaScript JavaScript Data Types JavaScript recognizes & distinguishes among the following types of values: Numbers Booleans Strings Undefined Variables Variables give us the ability to manipulate data through reference instead of actual valueVariables are containers that hold values Declaring Variables Although JavaScript allows variable declaration, it does not require it - except in the case when we want to declare a variable being local (more on local variables later in the course!) JavaScript Variables are Dynamically Typed Any variable in JavaScript can hold any type of value, and the that type can change midway through the program FLOW CONTROL Select between alternate courses of action depending upon the evaluation of a condition condition True False statement block 1 statement block 2 JavaScript Flow Control Structures • • if … else switch 158 © Copyright Virtual University of Pakistan Introduction to Computing –CS101 VU if: Example 1 if ( day == “Sunday” ) bhola = “Cool” ; semicolon The condition Set the value of the variable ‘bhola to ‘Cool’ if the enclosed in ‘day’ is equal to ‘Sunday’ This was the case if we want to execute a single statement given that the condition is true What if we want to execute multiple statements in case the if: Example 2 if ( day == “Sunday” ) { bhola = “Cool” ; mood = “Great” ; clothing = “Casual” ; } Set the value of the variable ‘bhola to ‘Cool’, ‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if the These curly braces group the multiple statements into a single compound statement if: Example 2 if ( day == “Sunday” ) { bhola = “Cool” ; mood = “Great” ; Note: No clothing = “Casual” ; semicolon after } the closing curly brace Set the value of the variable ‘status’ to ‘Cool’, ‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if the ‘day’ is equal to ‘Sunday’ Compound Statements At times, we need to put multiple statements at places where JavaScript expects only oneFor those situations, JavaScript provides a way of grouping a number of statements into a 2. This is done simply by enclosing any number of statements within curly braces, { }NOTE: Although the statements within the block end in semicolons, the block itself doesn‟t if: Example 3 if ( (day == “Sunday”) || (day == “Saturday”) ) { bhola = “Cool” ; mood = “Great” ; clothing = “Casual” ; } 159 © Copyright Virtual University of Pakistan Introduction to Computing –CS101 VU if: Example 4 weekend = ( day == “Sunday” ) || ( day == “Saturday” ) ; if ( weekend ) { bhola = “Cool” ; mood = “Great” ; clothing = “Casual” ; What is the data type of the variable “weekend”? } We now know how to execute a statement or a block of statements given that the condition is true What if we want to include an alternate action as well, i.e. a statement or a block of statements to be executed in case the condition in not true if … else: Example 1 if ( GPA >= 1.0 ) bhola = “Pass” ; else bhola = “Fail” ; if … else: Example 2 if ( GPA >= 1.0 ) { bhola = “Pass” ; } Else bhola = “Fail” ; if … else: Example 3 if ( GPA >= 1.0 ) { bhola = “Pass” ; mood = “Great” ; } else if … else: Example 4 if ( GPA >= 1.0 ) { bhola = “Pass” ; mood = “Great” ; } else { bhola = “Fail” ; mood = “Terrible” ; } if … else: Example 5 if ( grade == “A” ) points = 4.0 ; This piece of code is correct, but not very efficient! if ( grade == “B” ) points = 3.0 ; if ( grade == “C” ) points = 2.0 ; What can we do to improve it? if ( grade == “D” ) points = 1.0 ; if ( grade == “F” ) points = 0 0 ; 160 © Copyright Virtual University of Pakistan Introduction to Computing –CS101 VU if … else: Example 5 if ( grade == “A” ) This piece of code is correct, but not very efficient! points = 4.0 ; if ( grade == “B” ) points = 3.0 ; What can we do to improve it? if ( grade == “C” ) points = 2.0 ; if ( grade == “D” ) points = if … else: Example 6 10; if ( grade == “A” ) points = 4.0 ; else { if ( grade == “B” ) points = 3.0 ; else { if ( grade == “C” ) points = 2.0 ; else { if ( grade == “D” ) points = 1.0 ; else points = 0.0 ; } } } switch ( grade ) { case “A” : points = 4.0 ; break ; case “B” : points = 3.0 ; break ; case “C” : points = 2.0 ; break ; case “D” : points = 1.0 ; break ; default : points = 0.0 ; A colon following the case label is required switch: Example 1 } The expression enclosed in parentheses is evaluated and matched with case labels This is a case label This „break‟ statement is the exit point The „default‟ statement acts like the „else‟ clause in the „if…else‟ structure 161 © Copyright Virtual University of Pakistan Introduction to Computing –CS101 VU Switch Example 2 switch: Example 2 switch ( inquiry ) { case “apple” : document.write( “Apples are Rs 50/kg” ) ; break ; case “mangos” : document.write( “Mangos are Rs 90/kg” ) ; break ; case “grapes” : document.write( “Grapes are Rs 60/kg” ) ; break ; default : document.write( inquiry + “? Please retry!” ) ; } if…else --?-- switch If the action to be taken of the value of a single variable (or a single expression), use „switch‟ When the action depends on the values of multiple variables (or expressions), use the „if...else‟ structure if … else: Example 7 if ( ( GPA >= 1.0 ) && ( attendance >= 40 ) ) bhola = “Pass” ; else { if ( ( GPA >= 2.0 ) && ( attendance >= 36 ) ) “Probation” ; bhola else bhola = “Fail” ;LOOPS } Loop through a set of statements as long as a condition is true True statement block condition False JavaScript’s Looping Structures while for … 162 © Copyright Virtual University of Pakistan Introduction to Computing –CS101 VU Decimal to Binary Conversion in JavaScript x = 75 ; // x is the decimal number y = “” ; // y is the binary equivalent while ( x > 0 ) { remainder = x % 2 ; quotient = Math.floor( x / 2 ) ; y = remainder + y ; x = quotient ; } document.write( “y = ” + y ) ; The condition enclosed in parentheses while: Example 2 while ( tankIsFull == false ) { tank = tank + bucket ; } document.write ( “Tank is full now” ) ; while: Example 3 x=1; while ( x < 6000 ) { document.write ( x ) ; x=x+1; } for: Example 1 Operation Initial count Condition for ( x = 1 ; x < 6000 ; x = x + 1 ) { document.write ( x ) ; } for: Description (1) The „for‟ loop starts by initializing the counter variable (which in this case is x) The initial value in this case is „1‟, but can be any other positive or negative number as well Next the „for‟ loop checks the condition. If the condition evaluates to a „true‟ value, the „for‟ loop goes through the loop once 163 © Copyright Virtual University of Pakistan Introduction to Computing –CS101 VU for: Description (2) After reaching the end of that iteration, the „for‟ loop goes to the top once again, performs the operation, checks the condition • • • If the condition evaluates to a „false‟ value, the „for‟ loop finishes looping Otherwise, the „for‟ loop goes through the loop once again Repeat from step 4 for: Example 2 for ( x = 99 ; x < 6000 ; x = x + 1 ) { document.write ( x ) ; } for: Example 3 for ( x = 6000 ; x > 0 ; x = x - 1 ) { How many iterations would this „for‟ loop run for? document.write ( x ) ; } 6000? for: Example 3 How many iterations would this „for‟ loop run for? for ( x = 6000 ; x > 0 ; x = x - 1 ) { document.write ( x ) ; } for: Example 4 for ( x = 6000 ; x < 0 ; x = x - 1 ) { document.write ( x ) ; } 6000? How many iterations would this „for‟ loop run for? for --?-- while When the exact number of iterations is known, use the „for‟ loop „for‟ loops become especially useful when used in conjunction with arrays We‟ll find out about arrays next time, and we‟ll probe their usefulness as part of „for‟ loop structures 164 © Copyright Virtual University of Pakistan None? Introduction to Computing –CS101 VU During Today‟s Lecture … We discussed the concept of flow control using the “if” and “switch” structures And also the concept behind the “while” and “for” looping structures We also solved simple problems using flow control and loop structures Next Arrays (the 9th) Web Dev Lecture: We will find out why we need arrays We will become able to use arrays for solving simple problems 165 © Copyright Virtual University of Pakistan Introduction to Computing –CS101 VU Lecture 24 Design Heuristics During the last lecture … We became familiar with the various phases of the process that developers follow to develop SW systems of reasonable complexity We looked at a couple of problems related to the Waterfall SW development model Today‟s Lecture Heuristics for System Architecting We will try to understand the role of heuristics in architectural (or high-level) design We will become familiar with a few popular design heuristics 24.1 Heuristic Rule of thumb learned through trial & error Common sense lesson drawn from experience Qualitative principle, guideline, general judgement Natural language description of experience 24.2 System A collection of elements which working together produces a result not achieved by the things alone 24.3 System Architecture The structure (in terms of components, connections, constraints) of a product or a process 24.4 Heuristics for system architecting Rules and lessons learnt by system architects after long experiences which when followed result in sound, stable, practical systems # 1 My favorite system architecting (and other relevant) heuristics --- in no particular order --#2 Given many parts of a system to be designed/built, do the hard part 1st 3 All the serious mistakes are made on the very first day # 4 Simplify, simplify, simplify! Probably the most useful heuristics for increasing reliability while decreasing cost & time-to-build 5 If you can‟t explain it in 5 minutes, either you don‟t understand it or it does not work # 6 A system will develop & evolve much more rapidly if there are stable intermediate forms than if there Build iteratively; add features gradually 7 Success is defined by the user, not the builder 8 It‟s more important to know what the customer needs instead of what he says he wants 9 If you think that your design is perfect, it is only because you have not shown to anyone else --- Get your designs reviewed --10 A good solution to a problem somehow looks nice & elegant 11 In partitioning, choose the chunks so that they are as independent as possible Chunks should have low external complexity & high internal complexity Organize personal tasks to minimize the time individuals face interfacing 166 © Copyright Virtual University of Pakistan Introduction to Computing –CS101 VU 5 1 3 6 2 4 5 1 3 6 2 4 167 © Copyright Virtual University of Pakistan Introduction to Computing –CS101 VU 5 1 3 6 2 4 4 8 1 2 5 7 3 6 168 © Copyright Virtual University of Pakistan 9 Introduction to Computing –CS101 VU 12 Partition/repartition the problem until a model consisting of 7±2 chunks emerges 13 When choices must be made with unavoidably inadequate info: Choose the best available & then watch to see: whether further solutions appear faster than future problems . If so, the choice was at least adequate . If not, go back & choose again The Triage # 14 1. Let the dying die 2. Ignore who‟ll recover on their own 3. Treat only those who‟ll die without your help #15 Don‟t just remove the defect; correct the process that caused it The number of defects remaining in a system after # 16 a given level of tests is proportional to the number found during the test 17 Programmers deliver the same number of LOC/day regardless of the language they are writing in . Use the Highest level Language In Today‟s Lecture We became familiar with the the role of heuristics in design We also discussed a few well-known design heuristics for architectural design In Today‟s Lecture We became familiar with the the role of heuristics in design We also discussed a few well-known design heuristics for architectural design Next Lecture: Web Design for Usability To become able to appreciate the role of usability in Web design To become able to identify some of the factors affecting the usability of a Web page 169 © Copyright Virtual University of Pakistan Introduction to Computing –CS101 VU Lecture 25 Web Design for Usability During the last lecture …: We looked at the role of heuristics in architectural (or high-level) design We also became familiar with a few popular design heuristics Heuristic: Rule of thumb learned through trial & error Common sense lesson drawn from experience Caution! Caution! Heuristics don‟t always lead to the best results At times they even lead to the wrong ones, but mostly to results that are good-enough 25.1 Today‟s 25.1 Web Design for Usability USABILITY Goal: To become able to appreciate the role of usability in Web design To become able to identify some of the factors affecting the usability of a Web page What‟s a Good Site? The one that achieves the result that it was designed for. Generally, that result can only be achieved by giving the user what s/he wants, as quickly as possible, without her/him expending much effort. One definition of usability: Let the user have what s/he wants quickly, without much effort. “Quickly” is important! 25.2 SPEED: Users don't read; they scan Users don't make optimal choices; they look for the first good-enough solution Users don't figure out how things work; they muddle through Design is Important! 62% of shoppers gave up looking for the item they wanted to buy online (Zona Research) 40% visitors don‟t return to a site if their first visit was a -ive experience (Forrester Research) 83% of users have left sites in frustration due to poor navigation, slowness (NetSmart Research) Simple designs have greater impact: they can be understood immediately! (Mullet/Sano) Designs should be consistent & predictable (unified) 170 © Copyright Virtual University of Pakistan Introduction to Computing –CS101 VU 25.3 Elements of Website Design: Navigation scheme Layout of information Overall look and feel 25.4 Website Navigation: The interface/controls that a Website provides to the user for accessing various parts of the Website It probably is the most important aspect of the design of a Website 25.5 A Few Navigation Design Heuristics: Put the main navigation on the left of the page It should be „invisible‟ until it is wanted It should require an economy of action & time It should remain consistent Use text for navigation labels. If you must use icons, put a description underneath each icon 25.6 Navigation Design Heuristics (contd.): Labels should be clear, understandable Labels should be legible Do not play with standard browser buttons & features Provide search capability 171 © Copyright Virtual University of Pakistan Introduction to Computing –CS101 VU A good Solution to Problem Is nice and elegent 172 © Copyright Virtual University of Pakistan Introduction to Computing –CS101 VU 25.7 Good designs assist the user in recovering from errors 25.8 Assisting the User Recover from Errors: Location, post code mismatch Credit card number errors Phone numbers Spelling errors 25.9 A few constructive recommendations Let‟s look at a few Web sites and see how we can improve their usability Enter Dragon‟s Lair 173 © Copyright Virtual University of Pakistan Introduction to Computing –CS101 VU All rights reserved, 2002. LOADING … RESTAR SKIP T Click here to go to the main page directly 174 © Copyright Virtual University of Pakistan Introduction to Computing –CS101 VU 25.10 Making Display Elements Legible: Designing (arranging) Display Elements Elements must be large enough to be processed visually Elements must contrast sufficiently with their backgrounds Making Display Elements Legible: Related elements should be visually grouped through the use of space, color, or graphical boundaries The relative levels of importance among elements in a display should be revealed graphically 25.11 Ensuring Text is Readable: Use sans serif (e.g. Arial, Helvetica, Verdana) typefaces for display on screen Display type intended for continuous reading at 10 to 14 points Avoid the overuse of bold and italics Avoid setting type in all caps Arrange type intended for extended reading flush left, ragged right Avoid lines of type shorter than 40 characters and longer than 60 characters 175 © Copyright Virtual University of Pakistan Introduction to Computing –CS101 VU Mark the boundaries between paragraphs with blank lines rather than indentation Use headings and subheadings to visually reveal the relationships among text elements they label – paragraphs after paragraphs of text do not work that well on the Web 25.12 Using Pictures & Illustrations: Avoid using pictures that are strictly decorative 25.13 Using Motion Use motion to attract the viewer‟s attention Avoid the use of motion for “cosmetic” purposes Success is defined by the user, not the builder In Today‟s Lecture: We looked at the role of usability in Web site design We identified some of the factors affecting the usability of a Web page Next Lecture: Computer Networks We will become able to appreciate the role of networks in computing We will familiarize ourselves with various networking topologies and protocols 176 © Copyright Virtual University of Pakistan Introduction to Computing –CS101 VU Lecture 26 Arrays (Web Development Lecture 9) During the last lecture we had a discussion on Flow Control & Loops We discussed the concept of flow control using the “if” and “switch” structures And also the concept behind the “while” and “for” looping structures We also solved simple problems using flow control and loop structures if…else --?-- switch If the action to be taken of the value of a single variable (or a single expression), use „switch‟ When the action depends on the values of multiple variables (or expressions), use the „if...else‟ structure Compound Statements: for: Example 1 Condition Initial count Operation for ( x = 1 ; x < 6000 ; x = x + 1 ) { document.write ( x ) ; } for --?-- while When the exact number of iterations is known, use the „for‟ loop When the number of iterations depend upon a condition being met, use the „while‟ loop „for‟ loops become especially useful when used in conjunction with arrays We‟ll find out about arrays today, and we‟ll probe their usefulness as part of „for‟ loop structures Today‟s Topic: Arrays We will find out why we need arrays We will become able to use arrays for solving simple problems Array: An indexed list of elements We said that a variable is a container that holds a value. Similarly, an Array can be considered a container as well, but this one can hold multiple values Array: An indexed list of elements Example: There are many ways of assigning identifiers to the following fruit strawberry fruit1 fruit[ 0 ] orange fruit2 fruit[ 1 ] apple fruit3 watermelo n fruit[ 2 ] fruit4 fruit[ 3 ] 177 © Copyright Virtual University of Pakistan Introduction to Computing –CS101 VU Array An indexed list of elements fruit[ 0 ], fruit[ 1 ], fruit[ 2 ], and fruit[ 3 ] are the elements of an array „fruit‟ is the identifier for that array The length of the „fruit‟ array is 4, i.e. „fruit‟ has four elements Array Identifier Fruit [ 0 ] Index Square bracket var student1, student2, student3, student4 ; student1 = “Waseem” ; student2 = “Waqar” ; student3 = “Saqlain” ; student4 = “Daanish” ; document.write( student1 ) ; document.write( student2 ) ; document.write( student3 ) ; document.write( student4 ) ; student = new Array( 4 ) ; //array declaration student[ 0 ] = “Waseem” ; student[ 1 ] = “Waqar” ; student[ 2 ] = “Saqlain” ; student[ 3 ] = “Daanish” ; for ( x = 0 ; x < 4 ; x = x + 1 ) { document.write( student[ x ] ) ; Can you see the advantage of using arrays along with the „for‟ loop? } 26.1 Arrays in JavaScript array In JavaScript, arrays are implemented in the form of the „Array‟ object The key property of t...
View Full Document