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

Size: px

Start display at page:

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

Beverly Noel Marsh
5 years ago
Views:

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

2 Admin A2: Google form for contest submission Eager to know about A3??? Additional office hours to study for midterm#2 today? My office location moved across the corridor: ASB 9812 Exercise 8: finished part 1??? Correction notes on Colour On transparency in Unit 5 Graphics Markup for Table Python: recap + new materials

) print( "<html><head>" ) print( "<title>python did this</title>" )

3 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>" ) 3 Demo

4 Dynamic markup: Example str= "Content-type: text/html" print( str ) print( ) # declare a multi-line string a_markup_str =""" <html> <head> <title>my first web script</title> </head> <body> <h1>the first web script of ABC</h1> <p>this is a dynamically generated web page.</p> </body> </html> """ print( a_markup_str ) 4

5 Dynamic markup from Python scripts str= "Content-type: text/html" print( str ) print( ) markup=""" <html> <head> <title>python did this</title> </head> <body> <p>let us do some math.</p>""" print( markup ) a=100; b=20; their_sum=a+b print("<p>", a, " + ", b, " = ", their_sum, "</p>") markup2="</body></html>" print( markup2 ) 5

6 Dynamic markup from Python scripts str= "Content-type: text/html" print( str ) print( ) markup=""" <html> <head> <title>python did this</title> </head> <body> <p>let us do some math.</p>""" a=100; b=20; their_sum=a+b print("<p>", a, " + ", b, " = ", their_sum=a+b, "</p>") print("<p>", a, "+", b, "=", their_sum, "</p>") markup2="</body></html>" print( markup2 ) 6

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

8 Objects (A very cool concept in programming ) Put data and its related function(s) as one collection 1. Data 2. Function(s) Data objects already available in Python: e.g. list, set, dictionaries 8

9 Some objects and built-in functions >>> str= "ABC" >>> print( str.lower() ) 'abc' >>> numbers= [1,2,23,13]; >>> print( len( numbers ) ) 4 >>> list= ["Erin", "Alma"] >>> print( sorted(list) ) ['Alma', 'Erin' ] >>> print( len( numbers ) ) 2

10 FYI

11 The list data object A collection: store a bunch of data types together under one variable name Examples: >>> prime_nums=[2, 3, 5, 7, 11]; >>> family=['mom', 'dad', 'me', 'sister'] You get/call (referred to as index ) the 1st item as follows: >>> print( family[0] ) mom Q: How to index the me in family? How about 11 in prime_nums? >>> family[2] >>> prime_nums[4] Know the syntax! Must separate each item with comma! Know the syntax! Starts at 0 So, index of n-th item is (n-1) FYI, why index starts at 0? See link:

12 The list data object Call a groups of items, e.g. second to fourth item in prime_nums >>> prime_nums=[2, 3, 5, 7, 11]; >>> prime_nums[1:4] [3, 5, 7] The 2 nd item up to the 4 th item! Index of 2 nd item: Syntax: a_list[ a : b ] Math notation: [a,b) Concatenate (to join) lists: >>> prime_nums=[2, 3, 5, 7, 13]; >>> prime_nums=[2, 3, 5, 7, 13] + [11, 17]; >>> print( prime_nums ) [2, 3, 5, 7, 13, 11, 17] 12 (2)-1=1 Index of 4 th item: (4)-1=3 But you need to specify as: prime_num[1:4] (prime_num[4] will be excluded)

13 Exercise #1 >>> a_shop = ['pen', 3.5, 'pencil', 2.5] # what is this? >>> item_ordered=0; >>> quantity_ordered=1; >>> a_shop[item_ordered ] pen >>> print( ) # do exercise! >>> print( ) # do exercise! Thanks for ordering 1 pen. Your bill comes to $3.5. >>> print("thanks for ordering", quantity_ordered, a_shop[item_ordered],".") >>> print("your bill comes to $", quantity_ordered*a_shop[ 1+item_ordered ],".") >>> # or: >>> print("your bill comes to $", quantity_ordered*a_shop[ 2 ],".") 13

14 Exercise #1: improved >>> products=['pen(s)','pencil(s)','eraser(s)'] >>> costs = [3.5, 2.5, 2] >>> item_ordered=1; >>> quantity_ordered=2; >>> products[item_ordered] pencil >>> item_ordered= ; # do exercise! >>> print( ) # do exercise! >>> print( ) # Add 7% tax Thanks for ordering 2 eraser(s). With tax, your bill comes to $4.28. >>> item_ordered=2; print(" Thanks for ordering", quantity_ordered, products[item_ordered],". ") >>> print(" With tax, your bill comes to $", quantity_ordered*costs[ item_ordered ]*1.07,". ") 14

15 Exercise #1: improved >>> products=['pen(s)','pencil(s)','eraser(s)'] >>> costs = [3.5, 2.5, 2] >>> item_ordered=1; >>> quantity_ordered=2; >>> products[item_ordered] pencil >>> item_ordered= ; # do exercise! >>> print( ) # do exercise! >>> print( ) # Add 7% tax Thanks for ordering 2 eraser(s). With tax, your bill comes to $4.28. >>> item_ordered=2; print("<p>thanks for ordering", quantity_ordered, products[item_ordered],". </p>") >>> print("<p>with tax, your bill comes to $", quantity_ordered*costs[ item_ordered ]*1.07,".</p>") 15

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

17 Objects (A very cool concept in programming ) Lot s of reasons for object-oriented programming Today, we ll see one: code-reuse 17

18 Code-reuse Program_A.py y=10; def Celsius_to_Fahrenheit(x): y=x*9/5+32; return y x=5; m=celsius_to_fahrenheit(x) Program_B.py def Celsius_to_Fahrenheit(x): y=x*9/5+32; return y Not efficient. Not reusable code. Y=10; x=15*y; new_var=celsius_to_fahrenheit(x) 18

19 Code-reuse via modularization Program_A.py y=10; def Celsius_to_Fahrenheit(x): y=x*9/5+32; return y x=5; m=celsius_to_fahrenheit(x) My_functions.py def C2F(x): y=x*9/5+32; return y def F2C(x): y=(x-32)*5/9; return y Shortened as C2F and F2C Random_program_A.py import My_functions y=10; x=5; m=my_functions.c2f(x); Random_program_B.py import My_functions x=5; 19 m=my_functions.f2c(x);

20 Code-modularization Modular programming: separate functionality of a program into independent parts (i.e. modules) Functionality User programs My_functions.py def C2F(x): y=x*9/5+32; return y def F2C(x): y=(x-32)*5/9; return y Tell_weather.py import My_functions y=10\\4;#some random stuff x=y+5; p=my_functions.c2f(x); Tell_weather_USA_visitors.py import My_functions a=15; m=my_functions.f2c(a); 20

21 Steps to modularization: Code-modularization 1. Define function(s) in one file 2. Use built-in import function to load these functions into memory: syntax: import name_of_script # shorthand, as in S.G. name_of_script.function_a(); name_of_script.function_b(x,y,z); My_functions.py def C2F(x): y=x*9/5+32; return y def F2C(x): y=(x-32)*5/9; return y Random_program_A.py import My_functions y=10; x=5; m=my_functions.c2f(x); 21

22 E8 discussed

23 E8 part 2 my_first_functions.py # Write functions below def get_opening_markup(title_str, css_str): # write code to check, e.g. if-else conditions # concatenate strings accordingly, here s a start: markup=""" <html> <head> <title>""" markup += title_str markup += "</title>" # check css_str if ( ): markup += "<link href=" + css_str + "/>" markup += """ </head> <body> <h1>""" markup += title_str + "</h1>" # write more here return markup

24 my_first_functions.py E8 part 2 # Write functions below def get_opening_markup(title_str, css_str): # write code to check, e.g. if-else conditions # concatenate strings accordingly, here s a start: # write more here return markup def get_closing_markup(): # do something similar to above; no need for arguments return markup2 # Call functions with initialized variables title="my 1st dyn. webpage"; css_file= styles.css" omarkup = get_opening_markup( title, css_file ); cmarkup = get_closing_markup(); # Complete the script below print( omarkup ); print( "<p>hello world!</p>" ); print( cmarkup );

25 Questions?

26 On colour code

27 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

28 CMPT 165 Markup reviewed + HTML5

29 HTML5 Why bother? HTML is constantly evolving HTLM5 is latest version New (more semantically meaningful) markup tags: <nav> <aside> Old (vs. new) tags: New tags are introduced Some XHTML tags become deprecated* in HTML5 should not use any more, but browsers should support them Some XHTML tags become obsolete* in HTML5 should avoid as these are tags which browsers are not required to support More convenience *Details here 29

30 Question: which 3 parts are required on every markup page? 1. Document type declaration (DTD) 2. Header 3. Body <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" > <head> <title>page Title</title> </head> <body> <h1>page Heading</h1> </body> </html>

31 DTD in HTML5 <!DOCTYPE html> <html> <head> <title>html5: A demo</title> </head> <body> </body> </html> 31

32 DTD in HTML5 <!DOCTYPE html> <html> <head> <title>html5: A demo</title> </head> <body> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" > <head> <title>page Title</title> </head> <body> <h1>page Heading</h1> </body> </html> 32

33 HTML5 Why bother? HTML is constantly evolving HTLM5 is latest version New (more semantically meaningful) markup tags: <nav> <aside> Old (vs. new) tags: New tags are introduced Some XHTML tags become deprecated* in HTML5 i.e. should not use any more, but browsers should keep supporting them Some XHTML tags become obsolete* in HTML5 i.e. should avoid as these are tags which browsers are not required to support More convenience *Details here 33

34 More semantic markup tags <nav> <a href="/html/">html</a> <a href="/css/">css</a> <a href="/js/">javascript</a> <a href="/jquery/">jquery</a> </nav> /*Default style of most browsers */ nav { display: block; } <aside> <blockquote> <p>all the world's a stage.</p> </blockquote> <p>william Shakespeare</p> </aside> 34

35 HTML4 to HTML5 Migration Typical HTML4 <div id="header"> <div id="menu"> <div id="content"> <div id="post"> <div id="footer"> Typical HTML5 <header> <nav> <section> <article> <footer> 35

36 Figures and captions made easy <figure> + <figcaption> Efficient way to mark up a figure in a document. Easier way to cite images. <figure> <img src="img_3101.jpg" alt="one early morning." width="304" /> <figcaption>one early morning. By <a href="#me">lt</a>.</figcaption> </figure> One early morning. By LT. 36

37 <time> <time datetime=" "> July 13, 2015 </time> Encode dates and times in a machine-readable way User agents* can offer these options to users: add reminders to birthday, scheduled events to user's calendar Search engines can produce smarter search results *the browsers that your users use 37

38 Some tags worthy to know about Semantic: nav aside figure figcaption time Frames: iframe, object 38

39 <iframe> To display a web page within a web page. Examples: <iframe src=" width="560" height="315" allowfullscreen></iframe> <iframe width="100%" height="750px" scrolling="no" src=" lmfnrxe/pubhtml?gid=0&single=true&widget=true&headers=false" alt="calendar with links to assignments and exercises"> </iframe> 39

CMPT 165 Notes on HTML5

CMPT 165 Notes on HTML5 Nov. 26 th, 2015 HTML5 Why bother? HTML is constantly evolving HTLM5 is latest version New (more semantically meaningful) markup tags: Old (vs. new) tags: New tags