module 1 complete

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

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

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

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?

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

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

Data Structures network structures why use them?

Data Structures in hierarchical structures, data is organized at branch points and/or leaves of a tree

Data Structures example: phylogenetic trees

Data Structures hierarchical structures why use them?

Data Structures hierarchical structures can be represented visually in many distinct ways

Data Structures tabular structures why use them?

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

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

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

Networked or Hierarchical?

Learning Goalsyou should be able to convert between small instances of graphical and text based representations of hierarchical structure

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)))

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

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

Matching Parentheses this is our first example of an algorithm in this class!

Exercise: Graphical

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

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

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

Clicker Question: Which result?

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, )

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, )

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

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

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 experiment

TAGS

USE third level heading unordered list list item line break anchor (link)



Exercise: Jumblies in HTMLoriginal version

Exercise: Jumblies in HTML

condensed version



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


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)



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



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;


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;



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



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


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

module 1 complete

Documents