1 / 45

CSE 115

CSE 115. Introduction to Computer Science I. UBInfinite Requirements. This week: Lab Exam 2 Module 2 – Dictionaries, Module 2 – Objects, Module 2 – Reading Files, Module 2 - PreLab (if you do not finish in time, remember there is a Lab Exam 2 make-up later) Next week: Lab activity

ejacobs
Download Presentation

CSE 115

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSE 115 Introduction to Computer Science I

  2. UBInfinite Requirements • This week: Lab Exam 2 • Module 2 – Dictionaries, Module 2 – Objects, Module 2 – Reading Files, Module 2 - PreLab (if you do not finish in time, remember there is a Lab Exam 2 make-up later) Next week: Lab activity • Module 2 – Reading Files(& study for the midterm; work on the project)

  3. Midterm Exam Thursday, Oct24, 2019 9:00 PM - 10:00 PM • Sample midterm exam posted end of this weekGive feel for how questions wordedActual exam questions will differ

  4. Conflict E-mail documentation to: alphonce@buffalo.edu Subject: CSE115 FINAL EXAM CONFLICT no later than 5:00 PM FridayOctober18 REQUIRED SUBJECT LINE: CSE115 MIDTERM CONFLICT

  5. Conflict Makeup date/time (only for those with DOCUMENTED CONFLICT orLEGITIMATE DOCUMENTED ABSENCE): Friday October25 during regular lecture time, in regular lecture room Everyone else: no class

  6. Accessibility Resources • Schedule exam to overlap with one of the four lecture times on • Friday October 25 • 10:00 – 10:50 • 12:00 – 12:50 • 2:00 – 2:50 • 3:00 – 3:50

  7. Announcements • Second lab exam session this week in lab • 1st half only for students taking lab exam #2Attendance only for students with 3 stars on Module #2 PreLab • Lab exam #1 make-up during 2nd half of labMust have 3 stars on Module #1 PreLab(Python) to take thisLab exam #1 grade will be greater of lab exam & make-up

  8. Project 1 – part 2 • Posted on website. • Make sure you affirm your acceptance of the academic integrity policy. If not your grade will be zero. • Addition to description this morning: • N.B. When opening a file for reading you will need to add an extra keyword parameter to the open(...) function call in order for AutoLab to properly handle all the characters in the CSV files: encoding="utf-8".  The function call should be: • open(filename, newline='', encoding="utf-8")

  9. Today's Plan Review Exercise HTML Front End JavaScript Demo in repl.it

  10. REVIEW REVIEW REVIEW REVIEW REVIEW REVIEW REVIEW Opening Files • >>> open('workfile', 'w') • The first argument is […] the filename. • [S]econd argument is another string • 'r'[…] read, • 'w' […] writing(an existing file will be erased), and • 'a'[…] appending; [(…] data […] added to the end.[…)] • 'r' will be assumed if it’s omitted

  11. REVIEW REVIEW REVIEW REVIEW REVIEW REVIEW REVIEW with…as Statement Subgoal • file1) write the with…as header a) write with keyword b) write open(filename) function call c) write as keyword d) write name of the variable representing file • file2) write the ':' delimiter • file3) write the with…as body to process file contents

  12. REVIEW REVIEW REVIEW REVIEW REVIEW REVIEW REVIEW Text File Reading Key • Open file using withopen(…)asvar: • Can read in line-by-line:for line in var :

  13. REVIEW REVIEW REVIEW REVIEW REVIEW REVIEW REVIEW CSV File Reading Key #1 • Open file using withopen(…)asfileObject: • Then get CSV readercsvObj = csv.reader(fileObject) • Now can read row-by-row withfor rowAsList in csvObj :

  14. REVIEW REVIEW REVIEW REVIEW REVIEW REVIEW REVIEW Text File Writing Key • Open file using with open(…,"w") as var:orwith open(…,"a") as var: • Can then write a str with:var.write(…)

  15. REVIEW REVIEW REVIEW REVIEW REVIEW REVIEW REVIEW CSV File Writing Key • Open file using with open(…,"w") as fileObject:orwith open(…,"a") as fileObject: • Then get CSV writercsvObj = csv.writer(fileObject) • Now can write a List as a row withcsvObj.writerow(listVar)

  16. Today's Plan Review Exercise HTML Front End JavaScript Demo in repl.it

  17. retirw_vsc • Want a function named retirw_vsc. • Function's input is name of csv file • Function adds "R" to start of input file name and uses that as name of CSV file to write to • Write to output file the same records as input file,but with the fields in reverse order • Work with neighbors and be prepared to:identify test cases to use & their expected resultswrite function in Python

  18. retirw_vsc • This problem IS big and scary • 2 files used which makes more confusing

  19. First Decomposition Step • // retirw_vsc • Read in data from CSV file • Add "R" to file name • Write out data to CSV file IOU Reverse order of fields

  20. Expanding Steps • // retirw_vsc • Read in data from CSV file • Create (initially empty) list named data Open file for reading Create csv reader • Work line-by-line using CSV reader • Create (initially empty) list named reversed_list • Work entry-by-entry through line • Add entry to start of reversed_list • Add reversed_list to data • Add "R" to file name • Write out data to CSV file

  21. Decompose Last Step • // retirw_vsc • Read in data from CSV file • Create (initially empty) list named data Open file for reading Create csv reader • Work line-by-line using CSV reader • Create (initially empty) list named reversed_list • Work entry-by-entry through line • Add entry to start of reversed_list • Add reversed_list to data • Add "R" to file name • Write out data to CSV file • writeCSV(filename, data)

  22. retirw_vsc • Possible solution: import csv defretirw_vsc(filename): data = [] with open(filename) as f: reader = csv.reader(f) for line in reader: record = [] for field in line: record.insert(0, field) data.append(record) with open("R"+filename, 'w') as f: writer = csv.writer(f) for record in data: writer.writerow(record)

  23. TopHat

  24. Today's Plan Review Exercise HTML Front End JavaScript • Demo in repl.it

  25. HTML • Hyper TextText that can contain links to other resources • Markup LanguageSpecial markers provide information that is not displayed

  26. HTML • HTML isdesign & formatting languageBrowser told how to displaypage using HTML's markers • HTML is notprogramming languageCannot express sequence, selection, or repetition

  27. HTML <html> <head></head> <body> <h1>First Web Page</h1> <p>My content</p> <div id="myDiv"></div> </body> </html> Save textinfile ending.htmlOpen file in a web browser

  28. HTML <html> <head></head> <body> <h1>First Web Page</h1> <p>My content</p> <div id="myDiv"></div> </body> </html> Save text in file ending .htmlOpen file in a web browser And this is what you see:

  29. HTML - Elements HTML uses angle brackets to define elements Each element hasopen tag <h1> & close tag </h1> Everything between tags is element's content Formatting specified by tags. This uses header 1(h1) & paragraph (p) tags Tags also specify regions.This has empty division (div) for us to use later <html> <head></head> <body> <h1>First Web Page</h1> <p>My content</p> <div id="myDiv"></div> </body> </html>

  30. HTML - Structure Structure of nearly every HTML follows same pattern Starts and ends with html tag to show it is web page Immediately inside page is head tag. head region is where browser directed to load important files Remainder of file is bodyregion. bodyregion is where everything else will go HTML like an animal: has 1 head & 1 body <html> <head></head> <body> <h1>First Web Page</h1> <p>My content</p> <div id="myDiv"></div> </body> </html>

  31. HTML - Properties Elements can specify propertiesin their open tag Properties are key-value pairs Division tag (div) defines property named id and maps it to value "myDiv" Properties optional, but enable adding metadata to tags <html> <head></head> <body> <h1>First Web Page</h1> <p>My content</p> <divid="myDiv"></div> </body> </html>

  32. HTML • CSE115 is not a web design courseWe now have (just about) all the HTML neededfor CSE115 • To learn more about HTML: https://www.w3schools.com/html/default.asp • To have UB host a website of your own:http://www.buffalo.edu/ubit/service-guides/web-hosting/creating-a-personal-website.html

  33. Today's Plan Review Exercise HTML Front End JavaScript • Demo in repl.it

  34. HTML + JavaScript JavaScript best use is making web pages active & powerful HTML's script elements to hold JavaScript code Can place JavaScript code as content of script script tags often use src property whose value is URI of JavaScript file Browser will load & then run myCode.js when page loaded <html> <head></head> <body> <h1>First Web Page</h1> <p>My content</p> <divid="myDiv"></div> <script src="myCode.js"> </script> </body> </html>

  35. Front End JavaScript • Can use JavaScript to find elements on pagedocument.getElementByIdreturns an element, for example • In JavaScript, page's elements are ObjectsinnerHTMLis important key& it's value is element's content myCode.js let myDiv = document.getElementById("myDiv"); myDiv.innerHTML = "Content added from JavaScript";

  36. Front-End JavaScript Key • Specify id for element in HTML<tag id="idName"…> • Get element In JavaScriptelemObj = document.getElementById("idName") • Get & set contents using innerHTML keyelemObj.innerHTML

  37. Front End JavaScript <html> <head></head> <body> <h1>First Web Page</h1> <p>My content</p> <divid="myDiv"></div> <script src="myCode.js"> </script> </body> </html> let myDiv = document.getElementById( "myDiv"); myDiv.innerHTML = "Content from JavaScript";

  38. Front End JavaScript • JavaScript does much more using DOM (Document Object Model) • You should read a tutorial on this: https://www.w3schools.com/js/js_htmldom.asp • Functions & element properties described:https://www.w3schools.com/js/js_htmldom_document.asp

  39. Today's Plan Review Exercise HTML Front End JavaScript • Demo in repl.it

  40. Front End JavaScript Using Web Programming repl script elements can either contain link to file ORcontain JavaScript code Some properties, like onclick, allow you to specify JavaScript functions to run when an event occurs input elements specify type property & interact with user. Can get element in JavaScript & value as key to use or modify its (String) data. <html> <head></head> <body> <h1>Second Web Page</h1> <input type="text" id="textb"/> <button onclick="clicky();">Click me!</button> <script> let unclicked = true; function clicky() { let boxy = document.getElementById("textb"); if (unclicked) { unclicked = false; boxy.value = 1; } else { boxy.value = Number(boxy.value) + 1; } } </script></body></html>

  41. ReCap

  42. HTML • CSE115 is not a web design courseWe now have all the HTML neededfor CSE115 • To learn more about HTML: https://www.w3schools.com/html/default.asp • To have UB host a website of your own:http://www.buffalo.edu/ubit/service-guides/web-hosting/creating-a-personal-website.html

  43. Front End JavaScript • JavaScript does much more using DOM (Document Object Model) • You should read a tutorial on this: https://www.w3schools.com/js/js_htmldom.asp • Functions & element properties described:https://www.w3schools.com/js/js_htmldom_document.asp

  44. Input JavaScript Key • Specify id for element in HTML<input type="type" id="idName"…> • Get input widget In JavaScriptinpObj = document.getElementById("idName") • Get & set contents using value keyinpObj.value

  45. Element JavaScript Key • Specify id for element in HTML<tag id="idName"…> • Get element In JavaScriptelemObj = document.getElementById("idName") • Get & set contents using innerHTML keyelemObj.innerHTML

More Related