module 1 complete
TRANSCRIPT
Connecting with Computer ScienceModule I: Data OrganizationData Types and Data Structures
Learning Goals [for today]you should be able to recognize examples of data types and illustrate how properties associated with familiar data types can influence the behaviour of computer applications which act on these data types recognize examples of data structures and classify data structures as networked, hierarchical, and/or tabular when applicable
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
1
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
2
Clicker question What type of data structure would you use to represent the files and folders on your desktop? A) Networked B) Hierarchical C) Tabular (1D) D) Tabular (2D) E) None of the above
Clicker question What type of data structure is depicted here? (Links represent the relationship likes.)
A) directed network C) tabular (1D)3 Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
B) undirected network D) none of the above4
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
Exercise: Data Types write down two (universal) properties of each of the following data types; then compare with your neighbours properties; then share with the class rectangles files (on a computer) mammals text (in a document)
Exercise: Data Types illustrate how properties associated with data types can influence computer applications experiment on my laptop: what types of data can you see in a .pdf file? How does the type of data influence the behaviour of the Select tool in Acrobat? what properties of a file change when you change the extension of the file, e.g. .html to .txt? Does this influence what you see when you open (double-click on) the file?5 Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
6
Exercise: Data Types the preference settings of an application might be considered properties of the application; these influence the behaviour of the application too. can we change the preferences of TextEdit so that it is possible to edit the contents of an html file, once you open it on Annes laptop?
Exercise: Data Types the preference settings of an application might be considered properties of the application; these influence the behaviour of the application too. can you change the preferences of text viewer so that it displays the contents of an html file in a format resembling a web page, once you open it on Holgers laptop?
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
7
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
8
Exercise: Data Types data types have properties, and these also influence the behaviour of an application can we change properties on html files so Steves computer opens it for editing rather than viewing in a web browser?
Data Structuresnetworked | hierarchical | tabular
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
9
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
10
Data Structuresnetworked | hierarchical | tabular
Data Structuresnetworked | hierarchical | tabular
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
11
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
12
Data Structures network structures show relationships between pairs of data items
Data Structures example: draw an arrow (i.e. directed link or edge) from one page at Statistics Canada to another if there is a web link from the first to the second:www.statcan.gc.ca/start-debut-eng.html www.statcan.gc.ca/edu/index-eng.htm
www.statcan.gc.ca/edu/edu02_0000-eng.htm www.statcan.gc.ca/edu/edu02_0000-eng.htm Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
13
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
14
Data Structures network structures why use them?
Data Structures in hierarchical structures, data is organized at branch points and/or leaves of a tree
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
15
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
16
Data Structures example: phylogenetic trees
Data Structures hierarchical structures why use them?
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
17
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
18
Data Structures hierarchical structures can be represented visually in many distinct ways
Data Structures tabular structures why use them?
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
19
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
20
Data Structures data may be organized in more than one way at the same time this is often the case on web pages, which provide different menus for accessing information in what ways might the contents of a textbook be organized? (networked? hierarchical? tabular?)
Learning Goals [review]you should be able to recognize examples of data types and illustrate how properties associated with familiar data types can influence the behaviour of computer applications which act on these data types recognize examples of data structures and classify data structures as networked, hierarchical, and/or tabular when applicable
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
21
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
22
Recall: Clicker question What type of data structure is depicted here? (Links represent the relationship likes.)
Directed vs Undirected Networks Recall the description of networked data structures (page 4 module 1): describes general relationships between pairs of data items links may be directed or undirected, depending on the type of the relationship symmetrical relationship -> undirected asymmetrical relationship -> directed23 Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
A) directed network C) linear (table)Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
B) undirected network D) none of the above
24
Directed vs Undirected NetworksSymmetrical relationships -> undirected networks: people, animals: A is a relative of B people: A is a friend of B (e.g., on Facebook) countries: A trades with B
Data Structures data may be organized in more than one way at the same time this is often the case on web pages, which provide different menus for accessing information in what ways might the contents of a textbook be organized? (networked? hierarchical? tabular?)
Examples for asymmetrical:- people: A is an ancestor of B - people: A likes B (people) - folders/files: A contains B - courses: A is a prerequisite for B
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
25
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
26
Networked or Hierarchical?
Learning Goalsyou should be able to convert between small instances of graphical and text based representations of hierarchical structure
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
27
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
28
Clicker question Which hierarchical representation correctly represents the nesting of parentheses in this expression: (A+(B+(C+D))) (A) (B)
Matching Parentheses parentheses provide a text-based way to describe hierarchical structure what are pros and cons of text-based and graphical representations?
(A+(B+(C+D)))
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
29
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
30
Convert: Text
Graphical
Convert: Text
Graphical
Step 1 (match the parentheses): working from left to right, when you reach a ), match it with the last unmatched ( to its left use an arc to connect the pair of matched ( )s so you remember which ones are matched repeat until you get to the end
result at end of Step 1
( A + ( B + ( C + D ) ) )Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
( A + ( B + ( C + D ) ) )Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
31
32
Matching ParenthesesStep 2 (build the tree): put a node in the tree for each arc, and add links from each to the arcs and letters directly nested within it
Matching Parentheses result at end of Step 2
( A + ( B + ( C + D ) ) )Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
( A + ( B + ( C + D ) ) )Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
33
34
Matching Parentheses this is our first example of an algorithm in this class!
Exercise: Graphical
Text
can you convert this phylogenetic tree from graphical to text based representation? write down a description of your method and see if it is clear to others ( A + ( B + ( C + D ) ) )Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
35
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
36
Perspective means to visualize and analyze huge data structures is valuable in many fields example: visualization of phylogenetic treessee Crunching the Data for the Tree of Life by Carl Zimmer:http://www.nytimes.com/2009/02/10/science/10tree.html
Learning Goals [review]you should be able to recognize examples of data types and illustrate how properties associated with familiar data types can influence the behaviour of computer applications which act on these data types recognize examples of data structures and classify data structures as networked, hierarchical, and/or tabular when applicable
Tamara Munzners TreeJuxtaposer enables comparison of very large trees:http://people.cs.ubc.ca/~tmm/papers/tj/Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
37
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
38
Connecting with Computer ScienceModule I: Data OrganizationHTML
Learning Goals [for today + lab]you should be able to use HTML to design networked, hierarchical and tabular structures in webpage content, and use analysis and debugging skills to correct and avoid html errors
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
Clicker Question: Which result?
Clicker Question: Which result?
A
A
B
B
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
Important concepts Source code vs displayed result indentation /
line-breaks in HTML source do not get rendered literally Comments
and commenting out Preformatting vs semantic markup vs ,
Important concepts The same appearance / behaviour can be achieved in different ways; the same data can be represented in different ways (key CS concept!) Recall: graphical vs textual representation of hierarchical structure (formulae, phylogenetic trees, )
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
Important concepts Nesting of constructs (key CS concept!): lists inside of lists, lists inside table, tables inside tables, Think about this: What is the connection between nesting of constructs and hierarchical data structures?
HTML tags vs attributes Tags (often in opening / closing pairs) are used to specify structure, formatting, meaning of data (e.g., text) Attributes (sometimes, but not always optional) specify additional properties (font size, destination of a hyperlink, space between table rows, )
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
Some HTML tips and tricks Use Ctrl-U to view sources of web pages Use indentation, line breaks and comments to make your HTML sources more readable Prefer semantic markup vs preformatted text
Some HTML tips and tricks Type opening and closing tags in pairs, then fill in the middle (watch out for missing / in closing tags!) Write tags first, then add attributes Test all hyperlinks immediately
semantic means related to meaning Text between and is emphasized, but we dont know how (usually, italics) Text between and is specifically in italicsConnecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
Some general advice Look and play with examples found on the web Experiment fearlessly (web browsers dont break easily) Save your work frequently!
Learning Goals [revisited]you should be able to use HTML to design networked, hierarchical and tabular structures in webpage content, and use analysis and debugging skills to correct and avoid html errors
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
Summary of HTML tags used today
Exercise: Jumblies in HTML common question: how much space
does
insert between two lines of text? before a
-
tag? as the second of two
tags? best way to find out is to experimentTAGS
-
USE third level heading unordered list list item line break anchor (link)
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
Exercise: Jumblies in HTMLoriginal version
Exercise: Jumblies in HTML
condensed version
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
Exercise: Jumblies in HTML
Adding a hyperlink add anchor tags around the words The Jumblies to obtain the following:
-
-
1
The Jumblies which generates the result above? A: 1 but not 2 B: 2 but not 1 C: both 1 and 2Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
2 Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
Connecting with Computer ScienceModule I: Data OrganizationNames and Variables
Learning Goalsyou should be able to explain how names convey properties and/or structure of data, with particular attention to names in computing environments such as domain names, file names, URLs or e-mail addresses explain how variables are used to ease data management and to describe actions on data, and be able to use variables for these purposes in familiar contextsConnecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
Exercise Heres a URL: http://www.publicaffairs.ubc.ca/2009/09/01/ubcthis-is-your-first-year-class/ Which part of the URL is a domain name?
Domain names http://www.publicaffairs.ubc.ca/2009/09/01/ubcthis-is-your-first-year-class/ The following are also (higher-level) domain names:publicaffairs.ubc.ca ubc.ca (2nd-level domain) ca (top-level domain, TLD)
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
ExerciseDraw the hierarchical relationship between domain names that can be inferred from the following domains: www.ubc.ca www.cs.ubc.ca ugrad.cs.ubc.ca remote.cs.ubc.ca interchange.ubc.ca
Solution.
ca
ubc.ca
cs.ubc.ca
interchange.ubc.ca
www.cs.ubc.ca
ugrad.cs.ubc.ca
remote.cs.ubc.ca
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
Exercise Draw a hierarchical diagram showing relationships between folders and files that can be inferred from the following URLs. (Hint: the root of the diagram is the folder called "ALUMNI".) hkin.educ.ubc.ca/ALUMNI/Home.html hkin.educ.ubc.ca/ALUMNI/documents/OurPast.html hkin.educ.ubc.ca/ALUMNI/documents/sixty.htm hkin.educ.ubc.ca/ALUMNI/PDFs/2008 Grads.pdfConnecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
Exercise What is the value of the variable balance_in_CAD", after the following sequence of variable assignments?CAD_per_EUR = 1.3597; balance_in_EUR = 100; balance_in_CAD = balance_in_EUR * CAD_per_EUR;
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
Exercise How can you modify the following sequence of variable assignments to convert 100 CAD (Canadian dollars) into EUR (Euros)?CAD_per_EUR = 1.3597; balance_in_EUR = 100; balance_in_CAD = balance_in_EUR * CAD_per_EUR;
Exercise How can you modify the following sequence of variable assignments to convert 100 CAD (Canadian dollars) into EUR (Euros)? Answer:CAD_per_EUR = 1.3597; balance_in_CAD = 100; balance_in_EUR = balance_in_CAD / CAD_per_EUR;
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
Exercise Note: The following sequence of assignments has exactly the same function as the one shown previosly, but is much less human-readable, and therefore inferior:x = 1.3597; y = 100; z = y / x;
Exercise Key CS concept: Computer scientists often have the freedom to choose names for objects (e.g., variables). Choosing clear names makes it easier for them and others to understand the meaning and purpose of the objects. (And makes software less expensive, easier to maintain, more secure, )Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
(In fact, you could use alice for x, bob for y, etc., and still get the same function.)Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
Clicker question What is the value of balance at the end of the following sequence of assignments?balance = 123; balance = balance + 100; balance = balance balance;
Building a Conceptual ModelLets sketch a model for this, in which each variable is a box, and each assignment copies the value on the right into the box we name on the left:balance = 123; balance = balance + 100; balance = balance balance;
(A) 123 (B) 223
(C) 0 (D) 23
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
Clicker question What is the value of balance at the end of the following sequence of assignments?balance = 123; balance_new = balance + 100; difference = balance_new balance;
Clicker question What is the value of your_balance at the end of the following sequence of assignments?my_balance = your_balance my_balance = your_balance 123; = 456; your_balance; = my_balance;
(A) 123 (B) 223
(C) 0 (D) 100
(A) 123 (B) 456Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
(C) 0 (D) undefined
Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
Clicker question What is the value of your_balance at the end of the following sequence of assignments?my_balance = 123; your_balance = 456; temp = my_balance; my_balance = your_balance; your_balance = temp;
Exercise1 2 70 3 65 4 55
Marks:
50
What is Marks[3]? An action that might be performed on this table is to add a new amount to someone's grade: Marks[3] = Marks[3] + 10 What would Marks[3] be after this action?Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
(A) 123 (B) 456Connecting with Computer Sciencewww.ugrad.cs.ubc.ca/~cs101
(C) 0 (D) undefined
Tips and Tricks In Computing Science, the symbol = can be used in two meanings: 1) to express equality (as in math), e.g., 3=5 (false) or 3=5-2 (true) 2) to assign values to variables, e.g., X=5 (after doing this, variable X has value 5, and the equality X=5 is true)
Tips and Tricks In HTML a statement like X=5 always refers to a variable (actually, attribute) assignment. Likewise, in JavaScript (covered in Module 3), a statement like X=5 always denotes variable assignment, while equality is written differently (X==5). In other contexts, = is used to denote equality, and := or
-