Admin. A2 due next Wed! Exercise 8 posted: should aim to finish part 1 of E8 by next Mon. so you can get help from TA s on Tues./Thurs.

Size: px

Start display at page:

Download "Admin. A2 due next Wed! Exercise 8 posted: should aim to finish part 1 of E8 by next Mon. so you can get help from TA s on Tues./Thurs."

Anna Lawrence
6 years ago
Views:

1 Admin A2 due next Wed! Exercise 8 posted: should aim to finish part 1 of E8 by next Mon. so you can get help from TA s on Tues./Thurs. Please review on your own (next slides): Correction notes on Colour On transparency in Unit 5 Graphics Markup for Table Python: new concepts!

2 On colour code

3 Red Green Blue Examples: Decimal Brightest green? Dark green? Brightest blue? Dark red? Purple? Dark purple? Gray? Darker gray? A B C D E F Hexadecimal 0 F F % of 16 2/10*16 = 3.2 Closet is 3 3 rd value is % of 16 3/10*16 = 4.8 Closest is 5 5-th value is 4

4 Graphics: transparency

Don t store at all 2. 1-bit for each pixel (on or off) 3.

5 Transparency Transparency? - Ability for light to pass through a medium Opacity? - Amount of light absorbed by a medium High opacity Low transparency Three ways to handle transparency info: 1. Don t store at all 2. 1-bit for each pixel (on or off) 3. As an additional channel (8-bit for each pixel) Known as alpha channel Gives various levels of opacity GIF JPEG PNG Transparency 1-bit None 8-bit 5

6 Markup for tables

7 Creating tables Heading1 Heading 2 Heading 3 Item1 Data1 Data2 Item2 Data3 Data4 Item3 Data5 Data6 Elements for table: <table> <th> <td> <tr> table header table data table row May contain one or more of <td> <th> 7

8 Creating a simple table Reporting experimental results Substance examined Lemon juice Baking soda Orange juice Measured ph level header row 3 data rows each with 2 columns 8

9 Creating a simple table Example markup: Substance examined Lemon juice Baking soda Orange juice Measured ph level header row 3 data table rows each with 2 columns <table> </table> <tr>  <th>substance examined</th> <th>measured ph</th> </tr> <tr> <! - data row --> <th>lemon juice</th> <td>2.4</td> </tr> <tr> <! - data row --> <th>baking soda</th> <td>8.4</td> </tr> <tr> <! - data row --> <th>orange juice</th> <td>3.5</td> </tr> 9

10 Creating a more complex table ph level header spans over 3 columns Substance header spans over 2 rows <th colspan="3">ph level</th> <th rowspan="2">substance</th> 10

11 Example markup/styling of a table <table > </table> <tr>  <th rowspan="2">substance</th> <th colspan="3">ph level</th> </tr> <tr>  <th>sample 1</th> <th>sample 2</th> <th>sample 3</th> </tr> <tr>  <td>lemon juice</td> <td>2.2</td> <td>2.4</td> <td>2.2</td> </tr> <tr>  <td>baking soda</td> <td>8.4</td> <td>8.1</td> <td>8.2</td> </tr> <tr>  <td>orange juice</td> <td>3.5</td> <td>2.9</td> <td>3.1</td> </tr> /* CSS below */ table { border: solid green 2pt ; font-size: 14pt; font-family: sans-serif; text-align: center; } tr { background-color: #9d9; color: green; padding: 1em; } th { width: 120px; background-color: green; color: white; } 11

12 Making tables more accessible <table > </table> <tr> <th rowspan="2" class="left">substance</th><th colspan="2">ph level</th></tr> <tr><th>measurement 1</th><th>Measurement 2</th></tr> <tr>  <td>lemon juice</td> <td>2.4</td> <td>2.2</td> </tr> <tr>  <td>baking soda</td> <td>8.4</td> <td>8.1</td> </tr> <tr>  <td>orange juice</td> <td>3.5</td> <td>2.9</td> </tr> <caption>this is caption of table.</caption> 12

13 <table summary= Measured ph levels in samples collected for Experiment A. > <tr> <th rowspan="2" class="left">substance</th><th colspan="2">ph level</th></tr> <tr><th>measurement 1</th><th>Measurement 2</th></tr> <tr>  <td>lemon juice</td> <td>2.4</td> <td>2.2</td> </table> Making tables more accessible </tr> <tr>  <td>baking soda</td> <td>8.4</td> <td>8.1</td> Add summary description </tr> <tr>  <td>orange juice</td> <td>3.5</td> <td>2.9</td> </tr> <caption>this is caption of table.</caption> 13

14 Making tables more accessible <table summary= Measured Ph levels in samples collected for Experiment A. > <tr> <th rowspan="2" class="left">substance</th><th colspan="2">ph level</th></tr> <tr><th>measurement 1</th><th>Measurement 2</th></tr> <tr>  <td abbr= lemon >Lemon juice</td> <td>2.4</td> <td>2.2</td> </table> Add summary description </tr> <tr>  <td abbr= soda >Baking soda</td> <td>8.4</td> <td>8.1</td> Add short version of header contents </tr> <tr>  <td abbr= orange >Orange juice</td> <td>3.5</td> <td>2.9</td> </tr> <caption>this is caption of table.</caption> Tip: Making sense of a large table via listening can be very difficult. Try to simplify it first. 14

15 CMPT 165 Unit 7 Intro to Programming - Part 3 Nov 12 th, 2015

16 Key concepts & terms seen so far Fundamentals Developer Interface GUI Shell Program Statements Client/server Fetching a resource Dynamic HTML Programming essentials Variables Data Types Numeric Strings Booleans Assignment (shorthand) Operations/Operator Arithmetic Concatenation Overloaded symbols Functions Data Input/Output (I/O) Process Refining print statements Governing program flow Testing Conditions If-else, elif 16

17 Review: Defining your own functions Use the keyword def (define) & syntax: >>> def name_of_function(input1,input2): return input1+input2 Example 1: calculate the square of an input number >>> def sqr(x): return x*x >>> sqr(5) 25 Programmer s practice: square of number Know the syntax! Colon Indentation Example 2: temperature conversion: Celsius (C o ) to Fahrenheit degree (F o ) >>> def Celsius_to_Fahrenheit(x): y=x*9/5+32 return y >>> new_var=celsius_to_fahrenheit(5) >>> new_var 41 17

18 FYI: function as a black box >>> y=10 >>> def Celsius_to_Fahrenheit(x): y=x*9/5+32; return y >>> x=5; new_var=celsius_to_fahrenheit(x) 10 5 y x y = x*9/5+32; return y 41 y new_var 18

19 Variable scope The part of a program where a variable is used is known as scope of variables e.g. scope of y is limited to Celsius_to_Fahrenheit function Outside of this function, y is undefined until you instantiate (assign value to) it We say y=41 is local to the function 19

20 Defining and using functions Two ways. 1) In Python shell: >>> y=10 >>> def Celsius_to_Fahrenheit(x): y=x*9/5+32; return y >>> x=5; new_var=celsius_to_fahrenheit(x) 2) In IDLE Editor and run as script (e.g. temp_convert.py) def Celsius_to_Fahrenheit(x): y=x*9/5+32; return y y=10; x=5; new_var=celsius_to_fahrenheit(x) Again: Know the syntax! Colon Indentation 20

In-class Exercise: Reviewed Given this example: >>> def Celsius_to_Fahrenheit(x): return x*9/5+32 >>> new_var=celsius_to_fahrenheit(1) >>> new_var 25 isolate the variable Output Input y = x*9/5

21 In-class Exercise: Reviewed Given this example: >>> def Celsius_to_Fahrenheit(x): return x*9/5+32 >>> new_var=celsius_to_fahrenheit(1) >>> new_var 25 isolate the variable Output Input y = x*9/ (y 32) = x*9/5 (y -32)*5/9 = x Input Output Your task: write code Fahrenheit Celsius >>> def Fahrenheit_to_Celsius(y): return (y-32)*5/9 Q: Which is input variable to your new function? 21

22 Defining and using functions Recall: statements are executed in order saved in script (entered in Shell) Functions must be defined before you can call it def Celsius_to_Fahrenheit(x): y=x*9/5+32; return y y=10; x=5; new_var=celsius_to_fahrenheit(x) 22

23 Defining and using functions Would this work? y=10; def Celsius_to_Fahrenheit(x): y=x*9/5+32; return y x=5; new_var=celsius_to_fahrenheit(x) def Celsius_to_Fahrenheit(x): y=x*9/5+32; return y y=10; x=5; new_var=celsius_to_fahrenheit(x) 23

24 Defining and using functions Would this work? y=10; def Celsius_to_Fahrenheit(x): y=x*9/5+32; return y x=5; new_var=celsius_to_fahrenheit(x) And would this work? x=5; new_var=celsius_to_fahrenheit(x) def Celsius_to_Fahrenheit(x): y=x*9/5+32; return y y=10; 24

25 Return or not? If you need to process data further, use return >>> def Celsius_to_Fahrenheit(x): return x*9/5+32 >>> new_var=celsius_to_fahrenheit(1) >>> new_var 33.8 >>> print("the converted temperature is: "+new_var) The converted temperature is 33.8 Allows you to keep the data in memory

26 In-class Exercise: Refined >>> def Celsius_to_Fahrenheit(x): print(x*9/5+32) >>> Celsius_to_Fahrenheit(1) 33.8 Hard to understand output Better output: >>> Celsius_to_Fahrenheit(1) 1 Celsius = 33.8 Fahrenheit How could you code that? Ans: concatenating integers & strings >>> def Celsius_to_Fahrenheit(x): print(x, 'Celsius =', x*9/5+32, 'Fahrenheit' ) Numeric data String Numeric data String 26

27 Summary of key concepts & terms Fundamentals Developer Interface GUI Shell Program Statements Client/server Fetching a resource Dynamic HTML Programming essentials Variables Data Types Numeric Strings Assignment (shorthand) Operations/Operator Arithmetic Concatenation Overloaded symbols Functions Data Input/Output (I/O) Process Refining print statements Governing program flow Testing Conditions If-else, elif 27

28 Commenting in Python Problem: Programs become large/complex Solutions: Debugging: process of diagnosing problems in your code Add comments to explain your code A good programming practice Q: How to add comments in HTML?  Q: how about in CSS? /* ignored */ # single line comment var1=10; var2=var1+3; """this is a multiline comment so any thing in between is ignored """ var2*=var1; 28 Strings that are not assigned to a variable become comments

29 Program flow Idea: If something_happens, Do task1; Else, Do task2; Concrete example (in web programming, governs/facilitates userinteraction), e.g.: If (your_visitor_chooses_to_buy_coffee), print ( the_cost_of_coffee_to_screen ) Otherwise print ( "Thank you for visiting ) We ll see how we can get user input next class 29

30 Testing conditions Build complex programs by executing particular statements depending on test conditions Example test conditions: Numerical and string comparisons: Examples: equal (==), less than (<), greater than (>) >>> y=10; x=5 >>> x > y False >>> x > 1 True >>> x == 5 True >>> x == 15 False 30 >>> x >= 5 True >>> y=20; x=12 >>> x > y*2 False >>> x=1; x <= 1 True >>> str='c'; str == 'c' True

31 If-else Execute particular statements depending on condition Syntax: if (condition_1): else: Example: # do something # do something else def compare_numbers(x,y): if (x > y): print( x,'greater than', y); else: print( x,'less than', y); 31

32 - More than 2 conditions to test? If, else-if, else - Syntax: if (condition_1): # do something elif (conditon_2): # do something else else: # do default tasks - Example: def compare_numbers(x,y): if (x > y): print( x,'greater than',y); elif (x==y): print( x, 'equal to',y) else: print( x,'less 32 than',y)

33 If, else-if, else Execute particular statements depending on condition Syntax: if (condition_1): # do something elif (conditon_2): # do something else elif (conditon_3): else: # do yet something else # do default tasks 33

34 Q) Given example conversion: Practice #1 >>> def Celsius_to_Fahrenheit(x): print( x*9/5+32 ) >>> Celsius_to_Fahrenheit(1) 33.8 Write a function that takes 2 inputs: Temp_conversion(x,str) And print output accordingly, like this: >>> Temp_conversion(1, 'c') 1 Celsius = 33.8 Fahrenheit >>> Temp_conversion(25, 'f') 33.8 Fahrenheit = 1 Celsius 34

35 Solution to Practice#1 def Temp_conversion(x,str): if (str=='c'): print( x,'celsius =',x*9/5+32,'fahrenheit') else: print( x,'fahrenheit =',(x-32)*5/9, 'Celsius') def Temp_conversion(x,str): if (str=='c'): print( x,'celsius =',x*9/5+32,'fahrenheit') elif (str=='c'): print( x,'celsius =',x*9/5+32,'fahrenheit') else: print( x,'fahrenheit =',(x-32)*5/9, 'Celsius') 35

36 Practice #2 Q1) Write a function my_max that returns the maximum of 3 input numbers. >>> my_max(1,12,5) 12 >>> my_max(11,5,4) 11 def my_max(num1, num2, num3): Q2) Write a function my_min that returns the minimum of 3 input numbers.? 36

37 One simple solution to Practice #2 def my_max(num1, num2, num3): if num1 > num2: if num1 > num3: return num1 else: return num3 else: if num2 > num3: return num2 else: return num3;

38 About the Extra Activity

39 39

FYI, error codes explained: https://en.wikipedia.

40 FYI, error codes explained: 40

41 How to resolve this? MIME type Specify MIME type in the output of your Python scripts 41

42 MIME type How to resolve this? Specify MIME type in the output of your Python scripts Do so by adding this print statement: MIME type print("content-type: text/html") print( ) Prints blank line. This line is required! print( 'I am a Python program helping... ') print( '...to finish an exercise for "CMPT 165".') print( 5012* ) 42

43 Dynamic markup from Python scripts Example from Fig. 7.2 of Study Guide str= "Content-type: text/html print( str ) print( ) Print( "<html><head>" ) Print( "<title>python did this</title>" ) Print( "</head><body>" ) Print( "<p>here I am</p>" ) Print( "</body></html>" ) 43

44 Summary of key concepts & terms Fundamentals Developer Interface GUI Shell Program Statements Client/server Fetching a resource Dynamic HTML MIME Programming essentials Variables Data Types Numeric Strings Booleans Assignment (shorthand) Operations/Operator Arithmetic Concatenation Overloaded symbols Functions Data Input/Output (I/O) Process Refining print statements Governing program flow Testing Conditions If-else, elif 44

45 Fetching a resource: reviewed Client-side Server-side 45

46 User, User-agent, Server: revisited Enter URL address bar: 1) Enters URL User (visitor) User agent (browser) 14) Hovers over anchors Client-side interaction : :hover, :active title attribute tooltip 2) Requests for demo.html 7) Requests for style.css 4) Sends demo.html 9) Sends style.css 5) Parses/renders markup in demo.html on screen 6) Sees <link> for style.css 10) Renders markup in demo.html on screen 15) Renders tooltips, etc. 46 Server e.g. cmpt165.csil.sfu.ca 3) Looks up demo.html 8) Looks up style.css

47 User, User-agent, Server: revisited Enter URL address bar: 1) Enters URL User (visitor) User agent (browser) i) Requests for first.py iii) Sends output 5) Parses/renders markup in generated output on screen Server e.g. cmpt165.csil.sfu.ca ii) Runs first.py (+ generates output) 47

48 User, User-agent, Server: revisited Enter URL address bar: 1) Enters URL User (visitor) User agent (browser) 14) Moves mouse Client-side Server-side 4) Sends demo.html 9) Sends style.css iii) Sends output 5) Parses/renders markup in demo.html on screen 6) Sees <link> for style.css 10) Renders markup in demo.html on screen 15) Renders tooltips, etc. 2) Requests for demo.html 3) Looks up demo.html 7) Requests for style.css 8) Looks up style.css i) Requests for first.py Server e.g. cmpt165.csil.sfu.ca 48 ii) Runs first.py (+ generates output)

49 User, User-agent, Server: revisited Enter URL address bar: 1) Enters URL User (visitor) User agent (browser) 14) Moves mouse Client-side Server-side 4) Sends demo.html 9) Sends style.css iii) Sends output 5) Parses/renders markup in demo.html on screen 6) Sees <link> for style.css 10) Renders markup in demo.html on screen 15) Renders tooltips, etc. 2) Requests for demo.html 3) Looks up demo.html 7) Requests for style.css 8) Looks up style.css i) Requests for first.py Server e.g. cmpt165.csil.sfu.ca 49 ii) Runs first.py (+ generates output)

50 Static vs. dynamic resource *.html *.htm *.pdf *.txt *.svg *.jpg *.mp3 * : Asterisk sign ( little star, star symbol) In O/S, symbolizes wildcard = anything *.html means anything ending with.html These are known as static resource: one that already exists on webserver *.py, *.php, *.js Web server recognizes these as programs (i.e. web scripts ) use corresponding software to process these scripts and output the content generated by these scripts Resource generated upon request known as dynamic resource, one created on-the-fly 50

51 Key concepts & terms seen so far Fundamentals Developer Interface GUI Shell Program Statements Client/server Fetching a resource Dynamic HTML Programming essentials Variables Data Types Numeric Strings Booleans Assignment (shorthand) Operations/Operator Arithmetic Concatenation Overloaded symbols 51 Functions Data Input/Output (I/O) Process Refining print statements Governing program flow Testing Conditions If-else, elif Misc. Commenting: # ignored " " " ignored " " "

CMPT 165 Unit 7 Intro to Programming - Part 5. Nov 20 th, 2015

CMPT 165 Unit 7 Intro to Programming - Part 5 Nov 20 th, 2015 Admin A2: Google form for contest submission Eager to know about A3??? Additional office hours to study for midterm#2 today? My office location