[COS 333] Lecture Notes

What is a callback function?

A callback is a function passed as an argument to another function. Ex: Using a callback, you could call the calculator function (myCalculator) with a callback (myCallback), and let the calculator function run the callback after the calculation is finished: function myDisplayer(some) { document.getElementById("demo").innerHTML = some; } function myCalculator(num1, num2, myCallback) { let sum = num1 + num2; myCallback(sum); } myCalculator(5, 5, myDisplayer);

Hypertext Transfer Protocol (HTTP)

A client/server protocol - HTTP client requests a file - HTTP server provides a file

XML (Extensible Markup Language)

A language for expressing textual documents in hierarchical (tree-structured) form

Secure Communication • Achieving those goals: - Transport Layer Security (TLS) • Built upon ... • Secure Sockets Layer (SSL) How?

Preliminary step: Get a certificate for your app Option 1: Get a certificate that is signed by a certificate authority Option 2: Create a self-signed certificate Confidentiality: yes - Integrity: yes - Authentication: no

What is telnet?

Primitive way of using a socket to comm with another computer

Applications of XML:

Publishing - Same XML doc can be presented in multiple ways - XML + XSLT sheet = Rendered Document Data communication Benefits: - Extensible - Textual - Hierarchical - Standardized - Free

Result of: layout.addWidget(red_label, 0, 0) layout.addWidget(orange_label, 0, 1) layout.addWidget(yellow_label, 0, 2) layout.addWidget(green_label, 1, 0) layout.addWidget(blue_label, 1, 1) layout.addWidget(violet_label, 1, 2)

R O Y G B V

Relational DB pgmming: prepared stmts Malicious user provides this someauthor: junk' OR 'x'='x

Returns all the database entries Solution: with contextlib.closing(connection.cursor()) as cursor: stmt_str = "UPDATE orders SET quantity = quantity+1 " stmt_str += "WHERE isbn = ? AND custid = ?" cursor.execute(stmt_str, [isbn, custid])

layout.setRowStretch(0, 1) layout.setRowStretch(1, 2) layout.setRowStretch(2, 1) layout.setColStretch(0, 0) layout.setColStretch(1, 1) layout.setColStretch(2, 0)

Row 1 expands/contracts up & down at twice the rate of rows 0 and 2 Cols 0 and 2 don't expand/ contract side-to-side; col 1 does

The ESCAPE clause for the LIKE operator

SELECT * FROM books WHERE title LIKE 'The\%' ESCAPE '\';

Full Cartesian product of 2 tables (all possible combinations): vs More reasonable join of 2 tables:

SELECT * from books, authors; SELECT * from books, authors WHERE books.isbn=authors.isbn;

How to make web apps look good on smart phones? Original solution:

Smartphone viewport Current problem: Viewport inappropriate for responsive apps. Responsive app Doesn't want browser to render to (large) viewport and then scale Wants browser to render to smartphone browser window

Problem - Delegation to prototypes is distant from mainstream OOP - Difficult to learn & understand

Solution - "Class" syntax in ES6 Ex: class Fraction { constructor(num=0, den=1) { if (arguments.length > 2) throw new Error('Too many arguments'); if (den === 0) throw new Error('Denominator cannot be zero'); this._num = num; this._den = den; }

Problem Instead of calling functions: • f3 = fraction.add(f1, f2); We want to send messages: • f3 = f1.add(f2);

Solution - The value of an object property can be a function definition. Ex: f.add = function(other) { let newNum = (this._num * other._den) + (other._num * this._den); let newDen = this._den * other._den; return createFraction(newNum, newDen); }

Async Processing: Promises. What is a promise?

"A Promise is an object that represents the result of an asynchronous computation." - "The caller can register one or more callbacks on this Promise object, and they will be invoked when the asynchronous computation is done." Ex: function readFileP(fileName) { return new Promise(function(resolve, reject) { fs.readFile(fileName, function(err, data) { if (err) reject(err); else resolve(data); }); }); } readFileP(fileName) .then(sortLines) .then(writeLines) .catch(reportError);

jQuery statement syntax:

$(selector).action() $ - The jQuery function selector - Selects DOM node(s) - As in CSS; covered soon action() - Specifies an action to be performed on the selected DOM node(s) function getResults() { let author = $('#authorInput').val(); author = encodeURIComponent(author); let url = '/searchresults?author=' + author if (request != null) request.abort(); request = $.ajax( { type: 'GET', url: url, success: handleResponse } ); }

A good DBMS (Database management system) used by good DBAs (administrators) can:

- Reduce redundancy - Avoid inconsistencies - Facilitate data sharing - Enforce standards - Apply security restrictions - Maintain integrity - Balance conflicting requirements - Insure safety (backups)

All GUI libraries provide:

-Widgets - Containers - Layout managers - Event handling mechanism(s) - Dialogs - Inversion of control • Normally - Your code calls library code to request services - Your code is in control • Inversion of control - Library code calls your code to request services - Library code is in control - An event loop. In the GUI thread of our program, there is a loop of code that is constantly checking if the event queue contains any elements.

function sumall() { let sum = 0; for (let i = 0; i < arguments.length; i++) sum += arguments[i]; return sum; } n = sumall(); n = sumall(5); n = sumall(5, 6, 7);

0; 5; 18

Never fail! Examples: Number('') => Number('xyz') =>

0; NaN

Character Encodings. In Python: 'abc': b'\x61\x62\x63':

Object of class str • Internal encoding is - Latin-1 if possible, or if not... - UCS-2 if possible, or if not... - UCS-4 Object of class bytes • Array of bytes • No internal encoding

Equality operator (==) does type conversion Strict equality operator (===) suppresses type conversion Recommendation: Always use === instead of == Recommendation: Never mix types!!! 123 == '123' 123 == '+123' 123 === '123' 123 === '+123'

123 == '123' - True 123 == '+123' - True 123 === '123' - False 123 === '+123' - False

function square1(i) { return i * i; } n = square1(5); // What happens? n = square1(5, 6); // What happens? n = square1(); // What happens?

25; 25; NaN

Hypertext Markup Language (HTML) - A language for expressing documents HTML markup: Processing Instructions <!DOCTYPE html>

A DOCTYPE processing instruction First line of document Identifies document as HTML 5

Difference between associative arrays and objects in Javascript?

Objects are associative arrays and vice versa.

A table is in second normal form iff:

It is in first normal form, and - Every non-primary-key column is functionally dependent on all fields of the primary key

What does JSX (JavaScript XML) do?

Allows embedding of HTML-like code (actually, XML code) in JavaScript code

What is an array in Javascript?

An array is: - An object... - That delegates to Array.prototype... - That has a length property... - That is maintained automatically... - Such that its length value is always one greater than the largest integer index (or 0 if the array is empty)

Question: How to install event handlers on an element?

Answer 1: In HTML via the element's attributes Ex: <input type="text" value="Type something here" onmouseover="notify('mouseover')"> Answer 2: In JavaScript via addEventListener() Ex: myInput.addEventListener('mouseover', function() {notify('mouseover')});

Question: How to issue HTTP request?

Answer 1: Telnet Answer 2: Your own program Answer 3: Browser Enter URL - Click on HTML page link - Click on HTML form input element of type submit

Question: Why use arrow functions?

Answer 1: They're more succinct Answer 2: this is defined statically as opposed to in a non-arrow function where this is defined dynamically (based upon the call o.f() vs f()) With arrow functions the this keyword always represents the object that defined the arrow function. Ex: // Arrow Function: hello = () => { document.getElementById("demo").innerHTML += this;}

What are atomic transactions?

Atomic Transactions are associated with Database operations where a set of actions must ALL complete or else NONE of them complete. For example, if someone is booking a flight, you want to both get payment AND reserve the seat OR do neither. If either one were allowed to succeed without the other also succeeding, the database would be inconsistent. To do this we can use ROLLBACK where the DBMS discards the staged changes and ends the transaction Ex: # Simulate a HW/SW failure occurring randomly, # on average every 5th time through the loop. if random.randrange(5) == 0: print('Simulated failure with i = %d' % i) cursor.execute('ROLLBACK') print('Transaction %d rolled back.' % i) continue

A table is in third normal form iff:

It is in second normal form, and - Every non-primary-key column is non-transitively functionally dependent on the primary key

The World Wide Web

Link or form in a HTML doc could reference another HTML doc - And so... World Wide Web: A directed graph • Nodes: HTML docs • Edges: links and forms

Result of: layout.addWidget(north_label, 0, 0, 1, 3) layout.addWidget(west_label, 1, 0) layout.addWidget(center_label, 1, 1) layout.addWidget(east_label, 1, 2) layout.addWidget(south_label, 2, 0, 1, 3)

N W C E S the 1,3 means height 1 and width 3

What are the three types and operators in Javascript?

Boolean: 1 byte false, true String (varies) "hi", 'hi' Number 8 bytes 123, -123, 0.0, 1.23, 1.23e4 Note: All numbers are stored as IEEE 754 floating point

How to make web apps look good on smart phones? Current solution:

Bypass viewport concept. Set size of viewport to size of smartphone browser window Scale 1-to-1 <meta name="viewport" content="width=device-width, initial-scale=1">

Which languages have object references that have types? Which languages have objects that have types?

C and Java Python and Java

Case 4: stmt2 throws an exception. The exception does not match ExceptionClass1. The exception does not match ExceptionClass2. What happens? try: stmt1 stmt2 stmt3 except ExceptionClass1: stmt4 stmt5 stmt6 except ExceptionClass2: stmt7 stmt8 stmt9 stmt10 stmt11 stmt12

Only stmt1 and stmt 2 are executed.

React key concept: Component classes. Each custom Component object can:

Can have properties (props) Can have state Generates its HTML

Communicating chars vs Communicating pickled objects

Communicating Chars Language independence ✔ Communicating Pickled Objects Programmer convenience ✔ Handling of shared objects ✔

Kinds of JavaScript modules

Node.js modules Used by Node.js Not used by browsers ES6 modules Used in (recent) browsers Not used by Node.js (We'll see when studying React)

SQLAlchemy Bonus • SQLAlchemy does connection pooling:

Database connection pooling is a way to reduce the cost of opening and closing connections by maintaining a "pool" of open connections that can be passed from database operation to database operation as needed. This way, we are spared the expense of having to open and close a brand new connection for each operation the database is asked to perform.

XML vs. HTML (Element nesting)

Element nesting must be proper <strong>...<em>...</strong>...</em> - Well formed (or at least acceptable) in HTML - Malformed in XML <strong>...<em>...</em>...</strong> - Well formed in HTML - Well formed in XML

XML vs. HTML (empty elements) <hr> <hr/>

Empty elements must be expressed using self-closing tags for XML Empty element: has start tag and no end tag. <hr> Well formed in HTML - Malformed in XML • <hr/> Well formed in HTML - Well formed in XML

A language is statically typed if the type of a variable is known at compile time. A language is dynamically typed if the type is associated with run-time values, and not named variables/fields/etc. This means that you as a programmer can write a little quicker because you do not have to specify types every time.

Ex statically typed: C (weakly), Java (strongly) Ex dynamically typed: Python, Javascript

In Python we can do Operator Overloading.

Ex: def __eq__(self, other): return (self._num == other._num) and (self._den == other._den)

Since Javascript has a No Fail design, you should throw exceptions.

Ex: if (! Number.isInteger(radius)) throw new Error('Not an integer');

Domain name • Domain Name System (DNS) converts to IP address

Example: localhost - Same as 127.0.0.1

Which values indicate logical False in Python?

False, 0, None, '' , "" , [], (), and {}

Javascript is multithreaded: True or False.

False: JavaScript is not: - Multithreaded • There is only one JavaScript thread • Node.js/browser may execute code concurrently with JS engine - Preemptive • It's never the case that one "thread" is preempted by another "thread" • No deadlocks; minimal race conditions

Example of Prototype

Fraction.prototype.add = function(other) { let newNum = (this._num * other._den) + (other._num * this._den); let newDen = this._den * other._den; return new Fraction(newNum, newDen); }

Content: The document's raw data Semantic structure: The organization of the content Presentation: The rendering of the content

HTML - Tags define presentation - Semantic structure is absent XML - Tags define semantic structure - Presentation is absent Advantages of XML over HTML - Semantic structure is present • Document is easier to analyze mechanically • Document yields more useful information • Document has more potential uses - Presentation is absent • Same document can be presented in multiple ways

Design decision: When to use elements vs. attributes

Heuristic: - Elements should contain data - Attributes should describe data <price currency="dollars">24.99</price>

SQLite Client: Data Types

INTEGER int REAL float TEXT str BLOB bytes

What is a socket?

IP address + port (A software abstraction - 16-bit integer (0 - 65535))

Python also has inheritance.

Ie. Priority Queue inherits methods from Queue Instantiate: import queue class PriorityQueue (queue.Queue): ....

XML vs. HTML (tag definition)

In XML you define the tags In HTML Tag set is predefined In XTML Tag set is not predefined

Question: How is this bound within a function f()? Answer: Depends upon how f() is called: f(): obj.f(): new f(): f.call(obj):

In f(), this is undefined In f(), this is bound to obj In f(), this is bound to a new empty object In f(), this is bound to obj

Python Module - A .py file that is designed to be included into a client .py file Python Packages - Package: a named group of modules (and other packages) - A module is stored in a file - A package is stored in a directory How to declare a directory as a package?

Include a __init__.py in the directory.

Consider copystrings.py • Problem: Exception thrown => File never explicitly closed try: in_file = open(in_name, mode='r', encoding='utf-8') out_file = open(out_name, mode='w', encoding='utf-8') for line in in_file: out_file.write(line) out_file.close() in_file.close() except Exception as ex: print(ex, file=sys.stderr) sys.exit(1)

Solution 1: - try...finally statement try: in_file = open(in_name, mode='r', encoding='utf-8') try: out_file = open(out_name, mode='w', encoding='utf-8') try: for line in in_file: out_file.write(line) finally: out_file.close() finally: in_file.close() except Exception as ex: print(ex, file=sys.stderr) sys.exit(1) Solution 2: - with statement try: with open(in_name, mode='r', encoding='utf-8') as in_file: with open(out_name, mode='w', encoding='utf-8') as out_file: for line in in_file: out_file.write(line) except Exception as ex: print(ex, file=sys.stderr) sys.exit(1)

Problem: - Relational DBs create an impedence mismatch • Awkward to map the relational data model (tables, rows, fields) to the OOP data model

Solution 1: Cursors - As we've seen... Cursor = array + indication of current element DB driver maps each DB table to an array Each element represents a row • Cursor keeps track of current row DB driver maps each DB row to an array • Each element represents a field Solution 2: Object-relational mapper (ORM) - ORM maps each DB table to a class E.g., books table => class Book ORM maps each DB row to an object E.g., row of books table => object of class Book ORM maps each DB field to an object field • E.g. isbn field of some row of books table => isbn field of some object of class Book

Problem: - Node.js (and browser) wish to remain responsive

Solution: - Asynchronous processing Synchronous tasks happen in order — you must finish task one before moving on to the next. Asynchronous tasks can be executed in any order, or even simultaneously.

AJAX: Asynchronous JavaScript and XML Problem: - Inefficient to refresh entire page with each keystroke Problem: - Shouldn't refresh part of page synchronously; GUI would be "laggy"

Solution: - Refresh part of the page (output element(s)) with each keystroke Solution: - Should refresh part of page asynchronously, while GUI remains responsive XML - Response sent by server often is an XML doc

Problem: - You create a script that uses ES5 syntax, but also uses some new modules - modules that are available only on new (post-ES5) browsers - You want your script to be runnable on ES5 browsers

Solution: Polyfill - You polyfill those new modules - You compose your own versions of those new modules and include them in your code - Or better... - You include in your code an already vetted set of polyfills

Problem: - Space inefficiency for objects in Javascript. Each fraction object has its own set of function defs Many fraction objects => massive space inefficiency In Python we use self and in Java we use this to allow objects to share same method definitions.

Solution: Prototypes Any function has a prototype E.g.: Fraction has a prototype referenced by Fraction.protype - When an object is created by calling a constructor function with a new operator, the object has a property named __proto__ which references the prototype of the constructor function E.g. f1.__proto__ references the Fraction prototype

Problem: You create a script that uses some ES6 syntax You want your script to be runnable on all browsers Some old-but-still-widely-used browsers can interpret only ES5 syntax

Solution: Transpile - You transpile your script from ES6 to ES5 - You provide your script to browsers as ES5 - Example transpiler: Babel

Async Processing: await. Note: A function that calls await must be declared async. Node.js (and browser) provides many promise-returning functions

The await keyword makes the function pause the execution and wait for a resolved promise before it continues: async function readSortWrite(fileName) { try { let data = await fs.promises.readFile(fileName); let lines = sortLines(data); writeLines(lines); } catch (ex) { reportError(ex); } } readSortWrite(fileName);

AJAX via XMLHttpRequest example Question: - Why abort previous request?

function getResults() { let authorInput = document.getElementById('authorInput'); let author = authorInput.value; author = encodeURIComponent(author); let url = '/searchresults?author=' + author if (request !== null) request.abort(); request = new XMLHttpRequest(); request.onreadystatechange = processReadyStateChange; request.open('GET', url); request.send(); } Answer: - We're interested in the response for only the most recent request

What are transactions locking?

Transactions use locks to control concurrent access to data, achieving two important database goals: Consistency ensures that the data you are viewing or changing is not changed by other users until you are finished with the data. For SQLite, locking is only on the database level as opposed to others which are at the table level. As a result, if one person is doing a SELECT | UPDATE | ADD | DELETE another person can only do a SELECT.

Why do we use leading double underscores for class variables?

Use of leading double underscores causes name mangling: the interpreter changes the name of the variable in a way that makes it harder to create collisions when the class is extended later.

React key concept: virtual DOM

When the state of a Component changes: • Component (typically) updates a large subtree of the virtual DOM tree • React compares the updated virtual DOM tree with the previous version to determine diffs Using diffs, React reconciles the virtual DOM tree and browser DOM tree - Updates the smallest possible subtree

LIKE operator:

Wildcard characters are used with the LIKE operator. The LIKE operator is used in a WHERE clause to search for a specified pattern in a column. Ex: SELECT * FROM books WHERE title LIKE 'The%' % Represents zero or more characters bl% finds bl, black, blue, and blob _ Represents a single character h_t finds hot, hat, and hit

jQuery makes it easy to access DOM:

Without: let author = document.getElementById('authorInput').value; With: let author = $('#authorInput').val();

XML vs. HTML (processing instructions)

XML Allows processing instructions • <? ProcessingInstruction ?> Provides information to XML processor about how to handle the XML document

XML vs. HTML (attribute values)

XML Attribute values must be quoted <span id=myspan>Something</span> Well formed in HTML - Malformed in XML <span id="myspan">Something</span> Well formed in HTML - Well formed in XML

AJAX via fetch

function getResults() { let authorInput = document.getElementById('authorInput'); let author = authorInput.value; let encodedAuthor = encodeURIComponent(author); let url = '/searchresults?author=' + encodedAuthor; if (controller !== null) controller.abort(); controller = new AbortController(); fetch(url, {signal: controller.signal}) .then(usingResponseGetText) .then(usingTextUpdateResultsParagraph) .catch(function(err) {console.log(err);}); }

jQuery makes it easy to program AJAX

function handleResponse(response) { $('#resultsParagraph').html(response); } function getResults() { ... request = $.ajax( { type: 'GET', url: url, success: handleResponse } ); }

Raising/Throwing Exceptions in Python

if (i == 0) or (j == 0): raise ZeroDivisionError( 'lcm(i,j) is undefined if i or j is 0')

Writing to stderr in Python:

import sys print(str, file=sys.stderr)

int1 = 256 int2 = 256 int3 = int('256') if int1 is int2: print('int1 and int2 are identical') else: print('int1 and int2 are not identical') if int1 is int3: print('int1 and int3 are identical') else: print('int1 and int3 are not identical') if int1 == int2: print('int1 and int2 are equal') else: print('int1 and int2 are not equal') if int1 == int3: print('int1 and int3 are equal') else: print('int1 and int3 are not equal')

int1 and int2 are identical int1 and int3 are identical int1 and int2 are equal int1 and int3 are equal Why are int1 and int3 identical??? Answer: Int values in range -5 to 256 are already stored in the heap on instantiation so we will get True for identity comparisons

Ways to connect to database:

connection = connect(...) try: ... ... finally: connection.close() or with connect(...) as connection: ...

Question: - How to communicate objects between client and server? • Answer 2: - Communicate "pickled" objects

course1 = coursemod.Course('COS 217', book1) course2 = coursemod.Course('COS 333', book2) courses = [course1, course2] flo = sock.makefile(mode='wb') pickle.dump(courses, flo) flo.flush() pickle.dump(obj, flo) - Serializes obj to byte stream - Writes byte stream to flo obj = pickle.load(flo) - Reads byte stream from flo - Deserializes byte stream to form obj

Ways to cursor through database:

cursor = connection.cursor(...) try: ... ... finally: cursor.close() or from contextlib import closing ... with closing(connection.cursor()) as cursor: ... ...

PyQt5 event handling mechanism: - Signals & slots

def red_button_slot(): palette = window.palette() palette.setColor(window.backgroundRole(), PyQt5.QtCore.Qt.red) window.setPalette(palette) window.repaint() red_button.clicked.connect(red_button_slot) When a QPushButton object receives a clicked signal, it can call a slot with 0 or 1 parameters If there is a parameter, its type is bool, and a descriptive name for it is checked

Question: - How to communicate objects between client and server? • Answer 1: - Communicate characters

flo = sock.makefile(mode='w', encoding='utf-8') for course in courses: flo.write(course.get_name() + '\n') book = course.get_book() flo.write(book.get_title() + '\n') flo.write(str(book.get_price()) + '\n') flo.flush()

Javascript: Hoisting (let vs var)

function f() { ... // Not OK to use n here. let n = 5; ... // OK to use n here. } function f() { ... // OK to use n here. ... // But its value is undefined. var n = 5; ... // OK to use n here. }

int1 = 257 int2 = 257 int3 = int('257') if int1 is int2: print('int1 and int2 are identical') else: print('int1 and int2 are not identical') if int1 is int3: print('int1 and int3 are identical') else: print('int1 and int3 are not identical') if int1 == int2: print('int1 and int2 are equal') else: print('int1 and int2 are not equal') if int1 == int3: print('int1 and int3 are equal') else: print('int1 and int3 are not equal')

int1 and int2 are identical int1 and int3 are not identical int1 and int2 are equal int1 and int3 are equal

Data Types and Operators in Python

int; float; str; bool

jQuery vs React

jQuery - HTML doc contains JavaScript code; - Modularity by technologies React - JavaScript code generates most of the HTML doc; Modularity by components

Def: A table is in first normal form iff

no cell of a table is a table - All modern relational DBMSs enforce first normal form

Writing to stderr in Javascript:

process.stderr.write(str); console.error(expr);

Writing to stdout in Javascript:

process.stdout.write(str); console.log(expr);

Uniform Resource Locator (URL)

protocol://host:port/file protocol • We'll use http now, https later host • IP address or domain name of HTTP server port • The port at which the HTTP server is listening (For HTTP, default port is 80 • For HTTPS, default port is 443) file • The path name of the file that the HTTP server should deliver

CSS syntax

selector { property:value; property:value; ... } Ex of selectors: .class, #id, element, [type=text]

Result of: str1 = 'hello world' str2 = 'hello world' str3 = 'hello world'.upper().lower() if str1 is str2: print('str1 and str2 are identical') else: print('str1 and str2 are not identical') if str1 is str3: print('str1 and str3 are identical') else: print('str1 and str3 are not identical') if str1 == str2: print('str1 and str2 are equal') else: print('str1 and str2 are not equal') if str1 == str3: print('str1 and str3 are equal') else: print('str1 and str3 are not equal')

str1 and str2 are identical str1 and str3 are not identical str1 and str2 are equal str1 and str3 are equal is means that they share the same memory address on the stack (compares object references) == means that they share the same value (compares the actual object)

HTTP content types:

text/plain, text/html, image/gif, image/jpeg, audio/mp4, application/xml, application/json,

Def: The primary key for a table is

the minimal set of columns that uniquely identifies any particular row of that table

Catching Exceptions in Python:

try: radius = read_radius() diam = 2 * radius circum = math.pi * float(diam) write_results(radius, diam, circum) except ValueError: print('Error: Not an integer', file=sys.stderr) sys.exit(1) except EOFError: print('Error: Missing integer', file=sys.stderr) sys.exit(1) Can also do: except Exception: print('Error: Bad or missing data', file=sys.stderr)

Code for reading from socket

with socket.socket() as sock: sock.connect((host, port)) flo = sock.makefile(mode='r', encoding='ascii') for line in flo: print(line, end='')