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!
On colour code
Examples:
• Brightest green?
• Dark green?
• Brightest blue?
• Dark red?
• Purple?
• Dark purple?
• Gray?
• Darker gray?
3
0 9 0
0 4 0
0 0 9
4 0 0
4 0 4
1 0 1
4 4 4
2 2 2
0 F 0
0 7 0
0 0 F
7 0 0
7 0 7
2 0 2
7 7 7
4 4 4
Decimal Hexadecimal
0 1 2 3 4 5 6 7 8 9 A B C D E F
Red Green Blue
0 1 2 3 4 5 6 7 8 9
• 1 20% of 16 • 2/10*16 = 3.2 • Closet is 3 • 3rd value is 2
• 2 30% of 16 • 3/10*16 = 4.8 • Closest is 5 • 5-th value is 4
Graphics: transparency
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
5
GIF JPEG PNG
Transparency 1-bit None 8-bit
Markup for tables
Creating tables
Elements for table: <table>
<th> table header
<td> table data
<tr> table row
– May contain one or more of <td> <th>
7
Heading1 Heading 2 Heading 3
Item1 Data1 Data2
Item2 Data3 Data4
Item3 Data5 Data6
Reporting experimental results…
Substance examined Measured pH level
Lemon juice
Baking soda
Orange juice
2.4
8.4
3.5
Creating a simple table
8
1 header row 3 data rows each with 2 columns
Creating a simple table
9
Substance examined
Measured pH level
Lemon juice
2.4
Baking soda
8.4
Orange juice
3.5
<table>
<tr> <!-- header row -->
<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>
</table>
Example markup:
1 header row 3 data table rows each with 2 columns
Creating a more complex table
10
“pH level” header spans over 3 columns
“Substance” header
spans over 2 rows
<th colspan="3">pH level</th>
<th rowspan="2">Substance</th>
Example markup/styling of a table
11
<table >
<tr> <!-- Headers -->
<th rowspan="2">Substance</th>
<th colspan="3">pH level</th>
</tr>
<tr> <!-- Subheadings -->
<th>Sample 1</th>
<th>Sample 2</th>
<th>Sample 3</th>
</tr>
<tr> <!-- First data row -->
<td>Lemon juice</td>
<td>2.2</td>
<td>2.4</td>
<td>2.2</td>
</tr>
<tr> <!-- Second data row -->
<td>Baking soda</td>
<td>8.4</td>
<td>8.1</td>
<td>8.2</td>
</tr>
<tr> <!-- Third data row -->
<td>Orange juice</td>
<td>3.5</td>
<td>2.9</td>
<td>3.1</td>
</tr>
</table>
/* 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;
}
Making tables more accessible
12
<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> <!-- First row -->
<td>Lemon juice</td>
<td>2.4</td>
<td>2.2</td>
</tr>
<tr> <!-- Second row -->
<td>Baking soda</td>
<td>8.4</td>
<td>8.1</td>
</tr>
<tr> <!-- Third row -->
<td>Orange juice</td>
<td>3.5</td>
<td>2.9</td>
</tr>
<caption>This is caption of table.</caption>
</table>
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> <!-- First row -->
<td>Lemon juice</td>
<td>2.4</td>
<td>2.2</td>
</tr>
<tr> <!-- Second row -->
<td>Baking soda</td>
<td>8.4</td>
<td>8.1</td>
</tr>
<tr> <!-- Third row -->
<td>Orange juice</td>
<td>3.5</td>
<td>2.9</td>
</tr>
<caption>This is caption of table.</caption>
</table>
Add summary description
Making tables more accessible
Making tables more accessible
14
<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> <!-- First row -->
<td abbr=“lemon”>Lemon juice</td>
<td>2.4</td>
<td>2.2</td>
</tr>
<tr> <!-- Second row -->
<td abbr=“soda”>Baking soda</td>
<td>8.4</td>
<td>8.1</td>
</tr>
<tr> <!-- Third row -->
<td abbr=“orange”>Orange juice</td>
<td>3.5</td>
<td>2.9</td>
</tr>
<caption>This is caption of table.</caption>
</table>
Add short version of header contents
Add summary description
Tip: Making sense of a large table via listening can be very difficult. Try to simplify it first.
CMPT 165 Unit 7 – Intro to Programming - Part 3
Nov 12th, 2015
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
16
Testing Conditions If-else, elif
Review: Defining your own functions Use the keyword def (define) & syntax:
Example 1: calculate the square of an input number
Example 2: temperature conversion: Celsius (Co) to Fahrenheit degree (Fo)
17
>>> def sqr(x):
return x*x
>>> sqr(5)
25
>>> def name_of_function(input1,input2):
return input1+input2
>>> def Celsius_to_Fahrenheit(x):
y=x*9/5+32
return y
>>> new_var=Celsius_to_Fahrenheit(5)
>>> new_var
41
Programmer’s practice: square of number
Know the syntax! • Colon • Indentation
FYI: “function as a black box”
18
>>> y=10
>>> def Celsius_to_Fahrenheit(x):
y=x*9/5+32;
return y
>>> x=5; new_var=Celsius_to_Fahrenheit(x)
x
y = x*9/5+32;
return y
new_var
5
Demo
y
10
y
41
“Variable scope”
19
Demo
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”
Defining and using functions
Two ways.
1) In Python shell:
2) In IDLE Editor and run as script (e.g. temp_convert.py)
20
>>> 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)
Again: Know the syntax! • Colon • Indentation
In-class Exercise: Reviewed Given this example:
Your task: write code Fahrenheit Celsius
21
>>> def Fahrenheit_to_Celsius(y):
return (y-32)*5/9
>>> def Celsius_to_Fahrenheit(x):
return x*9/5+32
>>> new_var=Celsius_to_Fahrenheit(1)
>>> new_var
25
y = x*9/5 + 32
(y – 32) = x*9/5
(y -32)*5/9 = x
Q: Which is input variable to your new function?
“isolate the variable” Output Input
Input Output
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
22
def Celsius_to_Fahrenheit(x):
y=x*9/5+32;
return y
y=10;
x=5; new_var=Celsius_to_Fahrenheit(x)
Defining and using functions
23
def Celsius_to_Fahrenheit(x):
y=x*9/5+32;
return y
y=10;
x=5; new_var=Celsius_to_Fahrenheit(x)
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)
Defining and using functions
Would this work?
And would this work?
24
x=5; new_var=Celsius_to_Fahrenheit(x)
def Celsius_to_Fahrenheit(x):
y=x*9/5+32;
return y
y=10;
y=10;
def Celsius_to_Fahrenheit(x):
y=x*9/5+32;
return y
x=5; new_var=Celsius_to_Fahrenheit(x)
Return or not?
• If you need to process data further, use return
• Allows you to keep the data in memory
>>> 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
In-class Exercise: Refined
26
>>> def Celsius_to_Fahrenheit(x):
print(x*9/5+32)
>>> Celsius_to_Fahrenheit(1)
33.8
>>> def Celsius_to_Fahrenheit(x):
print(x , 'Celsius =' , x*9/5+32 , 'Fahrenheit' )
• Hard to understand output • Better output:
• How could you code that? • Ans: concatenating integers & strings
>>> Celsius_to_Fahrenheit(1)
1 Celsius = 33.8 Fahrenheit
String String Numeric data Numeric data
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
27
Testing Conditions If-else, elif
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
28
# single line comment
var1=10;
var2=var1+3;
"""this is a multiline comment so any thing in between is
ignored """
var2*=var1;
Q: How to add comments in HTML?
<!-- ignored -->
Q: how about in CSS? /* ignored */
Strings that are not assigned to a variable become comments
Idea:
Concrete example (in web programming, governs/facilitates user-interaction), e.g.:
If (your_visitor_chooses_to_buy_coffee), print ( the_cost_of_coffee_to_screen ) Otherwise print ( "Thank you for visiting” )
If something_happens, Do task1; Else, Do task2;
Program flow
29
We’ll see how we can get user input
next class
Testing conditions
• Build complex programs by executing particular statements depending on test conditions
• Example test conditions:
– Numerical and string comparisons: equal (==), less than (<), greater than (>)
• Examples:
30
>>> y=10; x=5
>>> x > y
False
>>> x > 1
True
>>> x == 5
True
>>> x == 15
False
>>> x >= 5
True
>>> y=20; x=12
>>> x > y*2
False
>>> x=1; x <= 1
True
>>> str='c'; str == 'c'
True
If-else
• Execute particular statements depending on condition
• Syntax:
if (condition_1):
# do something
else:
# do something else
• Example:
31
def compare_numbers(x,y):
if (x > y):
print( x,'greater than', y);
else:
print( x,'less than', y);
If, else-if, else - More than 2 conditions to test?
- Syntax:
- Example:
32
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 than',y)
if (condition_1):
# do something
elif (conditon_2):
# do something else
else:
# do default tasks
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):
# do yet something else
else:
# do default tasks
33
Practice #1 Q) Given example conversion:
Write a function that takes 2 inputs:
Temp_conversion(x,str)
And print output accordingly, like this:
34
>>> def Celsius_to_Fahrenheit(x):
print( x*9/5+32 )
>>> Celsius_to_Fahrenheit(1)
33.8
>>> Temp_conversion(1, 'c')
1 Celsius = 33.8 Fahrenheit
>>> Temp_conversion(25, 'f')
33.8 Fahrenheit = 1 Celsius
Solution to Practice#1
35
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')
Practice #2
Q1) Write a function my_max that returns the maximum of 3 input numbers.
Q2) Write a function my_min that returns the minimum of 3 input numbers.
36
def my_max(num1, num2, num3):
?
>>> my_max(1,12,5)
12
>>> my_max(11,5,4)
11
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;
About the Extra Activity
39
FYI, error codes explained: https://en.wikipedia.org/wiki/List_of_HTTP_status_codes#5xx_Server_Error
40
MIME type • How to resolve this?
• Specify MIME type in the output of your Python scripts
41
MIME type • How to resolve this?
• Specify MIME type in the output of your Python scripts
• Do so by adding this print statement:
42
print("Content-type: text/html")
print( )
print( 'I am a Python program helping... ')
print( '...to finish an exercise for "CMPT 165".')
print( 5012*2988912 )
Prints blank line. This line is required!
MIME type
Dynamic markup from Python scripts
Example from Fig. 7.2 of Study Guide
43
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>" )
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
44
Testing Conditions If-else, elif
Fetching a resource: reviewed
45
Client-side Server-side
User, User-agent, Server: revisited
46 15) Renders tooltips, etc.
Enter URL address bar: http://cmpt165.csil.sfu.ca/~lisat/demo.html
1) Enters URL
2) Requests for demo.html
3) Looks up demo.html
4) Sends demo.html
5) Parses/renders markup in demo.html on screen 6) Sees <link> for style.css 10) Renders markup in demo.html on screen
Server e.g. cmpt165.csil.sfu.ca
User agent (browser)
User (visitor)
14) Hovers over anchors
7) Requests for style.css
8) Looks up style.css
9) Sends style.css
Client-side interaction : :hover, :active
title attribute tooltip
User, User-agent, Server: revisited
47
Enter URL address bar: http://cmpt165.csil.sfu.ca/~lisat/demo.html http://cmpt165.csil.sfu.ca/~lisat/first.py
1) Enters URL
i) Requests for first.py
5) Parses/renders markup in generated output on screen
Server e.g. cmpt165.csil.sfu.ca
User agent (browser)
User (visitor)
iii) Sends output ii) Runs first.py (+ generates output)
User, User-agent, Server: revisited
48 15) Renders tooltips, etc.
Enter URL address bar: http://cmpt165.csil.sfu.ca/~lisat/demo.html http://cmpt165.csil.sfu.ca/~lisat/first.py
1) Enters URL
2) Requests for demo.html 3) Looks up demo.html
i) Requests for first.py
4) Sends demo.html
5) Parses/renders markup in demo.html on screen 6) Sees <link> for style.css 10) Renders markup in demo.html on screen
Server e.g. cmpt165.csil.sfu.ca
User agent (browser)
User (visitor)
iii) Sends output ii) Runs first.py (+ generates output)
14) Moves mouse
7) Requests for style.css 8) Looks up style.css
9) Sends style.css
Client-side Server-side
User, User-agent, Server: revisited
49 15) Renders tooltips, etc.
Enter URL address bar: http://cmpt165.csil.sfu.ca/~lisat/demo.html http://cmpt165.csil.sfu.ca/~lisat/first.py
1) Enters URL
2) Requests for demo.html 3) Looks up demo.html
i) Requests for first.py
4) Sends demo.html
5) Parses/renders markup in demo.html on screen 6) Sees <link> for style.css 10) Renders markup in demo.html on screen
Server e.g. cmpt165.csil.sfu.ca
User agent (browser)
User (visitor)
iii) Sends output ii) Runs first.py (+ generates output)
14) Moves mouse
7) Requests for style.css 8) Looks up style.css
9) Sends style.css
Client-side Server-side
Static vs. dynamic resource
50
*.html
*.htm
*.txt
*.svg
*.jpg
*.mp3
…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”
* : Asterisk sign
(“little star”, “star” symbol)
In O/S, symbolizes wildcard = “anything” *.html means “anything ending with .html”
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
51
Testing Conditions If-else, elif
Misc. Commenting: # ignored " " " ignored " " "
