Frank Wu
September 21, 2015
7.2k

# CS50 at Yale: Fall 2015 Sections

A compilation of my section slides from CS50's first semester at Yale

## Frank Wu

September 21, 2015

## Transcript

1. Frank Wu Fall 2015
CS50
Yale

2. Section 2

3. Why section?
“Sections are a time to dive in and
get some hands-on experience with
topics measured in class or in study
materials”

4. Why section?

5. Agenda
• Grading and logistics
• Arrays
• ASCII
• Functions
• Command-line arguments
• Problem set 2

6. Arrays
0 1 2 3
65 41 23 10

7. Creating an array
name[];
// Example:
string problems[99];
int scores[4];
scores[0] = 65;
scores[1] = 41;
scores[2] = 23;
scores[3] = 10;
// OR
int scores[] = {65, 41, 23, 10};
string problems[99] = { NULL };
0 1 2 3
65 41 23 10

8. Accessing elements in an array
for (int i = 0; i < 4; i++) {
printf("%d\n", scores[i]);
}
0 1 2 3
65 41 23 10

9. Your turn
Create the array below and calculate the sum
of all of its members. Once you’ve calculated
the sum, print it out.
0 1 2 3
65 41 23 10

10. Multi-dimensional arrays
0,0 0,1 0,2
o
1,0 1,1 1,2
x o
2,0 2,1 2,2
x
char board[3][3];
board[0][1] = 'o';
board[1][0] = 'x';
board[1][1] = 'o';
board[2][1] = 'x';

11. Strings
Strings are simply arrays of characters.
string word = "Hi!";
0 1 2 3
H i ! \0

12. Your turn
Create a string and print it out, letter by letter.

13. Strings as ASCII chars
string word = "Hi!";
for (int i = 0; i < 4; i++) {
printf("%d\n", word[i]);
}
0 1 2 3
72 105 33 0
‘H’ ‘i’ ‘!’ ‘\0’

14. Functions
Input Output
int main(void) {
return 0;
}

15. Why functions?
• Organization
• Simplification
• Reusability

16. Defining a function
#include
int square(int number); // function prototype
int main(void) {
int x = 2;
printf("x is %d\n", x);
x = square(x);
printf("x is %d\n", x);
return 0;
}
int square(int number) {
int output = number * number;
return output;
}

17. Your turn
Write a function that takes 2 parameters, number and exponent,
and returns number raised to the power of exponent.
#include
int power(int number, int exponent); // function prototype
int main(void) {
int x = 2;
int third = power(x, 3);
printf("%d raised to the power of %d is %d\n", x, 3, third);
int fifth = power(x, 5);
printf("%d raised to the power of %d is %d\n", x, 5, fifth);
return 0;
}
int power(int number, int exponent) {
// ...
}

18. Command-line arguments
int main(void) {
return 0;
}
int main(int argc, char *argv[]) {
return 0;
}
argc is an integer representing the number of arguments passed
to the command line
argv[] is an array of strings that contains the arguments passed to
the command line

19. Command-line arguments
fjw22@ide50:~/workspace \$ ./copy infile outfile
1. What is argc?
2. What is argv[0]?
3. What is argv[1]?
4. What is argv[2]?
5. What is argv[3]?
6. What is argv[4]?

20. Your turn
Create a program that takes in a command-
line argument and prints out the first letter.
fjw22@ide50:~/workspace \$ ./first test
t

21. A look at your computer’s memory
stack
heap

22. Problem set 2
• ASCII
• Command-line arguments
• Modulo

23. ASCII chars

24. ASCII math
printf("%d\n", 'a' - 'A');
printf("%c\n", 'B' + ('a' - 'A'));
printf("%c\n", 'B' + 32);
printf("%c\n", 'b' - 32);
printf("%c\n", 'B' + 1);
printf("%c\n", 'B' - 1);

25. atoi()
• Converts a string into an integer
• Remember: command-line arguments in
argv[] are strings
#include
int atoi(const char *str)

26. Modulo
• Modulo provides the remainder when dividing two
numbers
• In Caesar, what happens if we are given a really
large number as our key?
• In Vigenère, what happens if we reach the end of our
target word?
26 % 10 // 6
13 % 12 // 1
8 % 8 // 0
2 % 15 // 1

27. Section 3

28. Agenda
• Problem set 1
• Debugging with gdb
• Asymptotic notation
• Binary search
• Sorting algorithms
• Problem set 3

29. Grading
• Scope: to what extent does your code implement
the features required by our specification?
• Correctness: to what extent is your code consistent
with our specifications and free of bugs?
• Design: to what extent is your code written well
(i.e., clearly, efficiently, elegantly, and/or logically)?
• Style: to what extent is your code readable (i.e.,
commented and indented with variables aptly
named)?

30. Comment your code!
/**
* caesar.c
* Frank Wu
* September 23, 2015
*
* Encrypts user-supplied plaintext using a Caesar cipher.
*/
/**
* Returns number^exponent (and ignores all negative exponents)
*/
int power(int number, int exponent) {
// ...
}

31. An example
// ???
if (isupper(message[i])) {
message[i] = ((message[i] - 'A' + key) % NUM_LETTERS) + 'A';
} else if (islower(message[i])) {
message[i] = ((message[i] - 'a' + key) % NUM_LETTERS) + 'a';
}
In a few months, will you still remember what this block of
code does?

32. Postmortems

33. Debugging with gdb
fjw22@ide50:~/workspace \$ gdb ./caesar
Reading symbols from ./caesar...done.
(gdb)
gdb ./filename

34. Useful commands
break (b) main
run
next (n)
step (s)
list
print (p)
info locals
continue (c)
disable
quit (q)

35. Debugging with gdb
fjw22@ide50:~/workspace \$ check50 2015.fall.pset2.caesar caesar.c
:) caesar.c exists
:) caesar.c compiles
:) encrypts "a" as "b" using 1 as key
:) encrypts "barfoo" as "yxocll" using 23 as key
:( encrypts "BARFOO" as "EDUIRR" using 3 as key
\ expected output, but not "EAUIRR\n"
:) encrypts "BaRFoo" as "FeVJss" using 4 as key
:) encrypts "barfoo" as "onesbb" using 65 as key
:) encrypts "world, say hello!" as "iadxp, emk tqxxa!" using 12 as key
:) handles lack of argv[1]

36. Asymptotic notation
O(n)
upper bound
Ω(n)
lower bound

37. Binary search
• O(log n)
• Ω(1)
• Only works if our list is already sorted!

38. Bubble sort
• O(n) space complexity
• O(n^2) time complexity
• Ω(n^2) time complexity

39. Selection sort
• O(n) space complexity
• O(n^2) time complexity
• Ω(n^2) time complexity

40. Insertion sort
• O(n) space complexity
• O(n^2) time complexity
• Ω(n) time complexity

41. Merge sort
• O(n) space complexity
• O(n log n) time complexity
• Ω(n log n) time complexity

42. Problem set 3
• We’ll be using distribution code!
• In find.c, your goal is to fill in the sort() and
search() functions
• In the game of fifteen, your goal is to write a
few core functions to finish the game
• Hacker edition: create a solver for the game
of fifteen

43. Section 4

44. Agenda
• Redirection commands
• File I/O
• Memory management
• Pointers

45. Redirection
./hello > output.txt
./hello >> output.txt
./hello 2> errors.txt
./hello 2>> errors.txt
./hello < input.txt
./hello1 | ./hello2
./hello < input.txt > output.txt

46. File I/O
Process
stdin (0)
stdout (1)
stderr (2)

47. Files in C
// Open file "input.txt" in read only mode
FILE *in = fopen("input.txt", "r");
// Make sure fopen() doesn't return NULL!
if (in == NULL) {
return 1;
} else {
// Close the file at the end to avoid memory leaks
fclose(in);
}

48. Files in C
// Get character from input file
int c = fgetc(in);
while (c != EOF) {
// Write character to output file
fputc(c, out);
c = fgetc(in);
}

49. Your turn
Create a program that takes an input string
from stdin using GetString() and then prints
it into an output file.

50. File functions
fopen()
fread()
fwrite()
fgets()
fputs()
fgetc()
fputc()
fclose()
Use “man fopen” to learn more about it.

51. Memory management
stack
heap

52. malloc()
// Allocate memory
int *ptr = malloc(sizeof(int));
// Free memory when we’re done
free(ptr);

53. Pointers
#include
#include
int main(void) {
int *x = malloc(sizeof(int));
int *y = malloc(sizeof(int));
*x = 42;
*y = 13;
printf("%d %d\n", *x, *y);
y = x;
printf("%d %d\n", *x, *y);
return 0;
}

54. Pointers
int x = 50;
50
0x123
0x123
int *p = &x;
0x456

55. Pointers
*
value of
&
address of

56. Pointers
void swap(int *a, int *b) {
int tmp = *a;
*a = *b;
*b = tmp;
}

57. Pointer exercise
int x = 2, y = 8, z = 12;
int *ptr_x = &x;
int *ptr_y = &y;
int *ptr_z = &z;
z = x * y;
x *= y;
y = *ptr_x;
*ptr_x = x * y;
ptr_x = ptr_y;
x = (*ptr_y) * (*ptr_z);

58. Section 5

59. Agenda
• Linked lists
• Hashtables
• Quiz 0 review

60. Linked lists
9 4 5
head
head->next head->next->next

61. Linked lists

62. Linked lists
typedef struct node {
int n;
struct node *next;
} node;
9
n
next

63. Linked list search
9 4 5
head

64. Linked list insertion
9 4 5
head
new_node->next = head;
head = new_node;

65. Linked list deletion
9 4 5
head
prev_node->next = to_delete->next;

66. Hashtables
0 apple
1 banana

10 kiwi

12 mango
apple
banana
kiwi
mango
Hash function

67. Collisions!
0 apple
1 banana

10 kiwi

12 mango
berry Hash function
Now what?!

68. Quiz 0
http://cdn.cs50.net/2015/fall/quizzes/0/yale.html
• CPSC 100 01 (lectures on Mondays and Wednesdays)
• last name A - N: go at 1:00pm on Wed 10/14 to the
Yale Law School Auditorium
• last name O – Z: go at 1:00pm on Wed 10/14 to
Davies Auditorium in the Becton Center
• CPSC 100 02 (lectures on Tuesdays and Thursdays) go
at 2:30pm on Thu 10/15 to SSS 114

69. Practice Question 1
• What’s 0x50 in binary?
• What’s 0x40 in decimal?

70. Practice Question 2
• True or false:
• gdb is a debugger
• make is a compiler
• the float datatype can store infinitely
precise decimal numbers
• all .c files must have a main function

71. Practice Question 3
• What happens when I call the following commands:
• printf(“%p”
, wp);
• printf(“%d”
, *wp);
int w = 2, x = 3, y = 4, z = 5;
int *wp = &w;
int *xp = &x;
int *yp = &y;
int *zp = &z;

72. Practice Question 4
This code was meant to simulate counting from
1 to 10, pausing one second between numbers,
it instead appears to do nothing for ten
seconds, after which it finally prints everything
all at once before quitting. Why?
for (int i = 1; i <= 10; i++)
{
printf("%d, ah ah ah... ", i);
sleep(1);
}

73. Practice Question 5
#include
#include
int main(void) {
//...
}

74. Section 6

75. Agenda
• Stacks and queues, briefly
• Linked lists, in detail
• Hashtables, in detail

76. Stack
Suppose that a stack for integers is defined per the below, wherein
numbers is an array for the stack’s integers, CAPACITY (a constant)
is the stack’s capacity (i.e., maximal size), and size is the stack’s
current size.
typedef struct {
int numbers[CAPACITY];
int size;
} stack;
Complete the implementation of push in such a way that it pushes n onto
a stack, s, if s isn’t already full. Assume that s has been declared globally.
Consider s full only if its size equals CAPACITY. No need to return a value,
even if s is full. Your implementation should operate in constant time.
void push(int n) {
}

77. Queue
Suppose that a queue for integers is defined per the below, wherein
numbers is an array for the queue’s integers, CAPACITY (a constant) is
the queue’s capacity (i.e., maximal size), and size is the queue’s current
size, and front is the index of the integer at the front of the queue.
typedef struct {
int front;
int numbers[CAPACITY];
int size;
} queue;
Complete the implementation of enqueue in such a way that it inserts n into
a queue, q, if q isn’t already full. Assume that q has been declared globally.
Consider q full only if its size equals CAPACITY. No need to return a value,
even if q is full. Your implementation should operate in constant time.
void enqueue(int n)
{
}

78. Linked lists
9 4 5
head
head->next head->next->next

79. Linked lists

80. Linked lists
# Malan’s list-0.h
typedef struct node {
int n;
struct node *next;
} node;
9
n
next

81. Linked list search
9 4 5
head

82. Linked list insertion
9 4 5
head
new_node->next = head;
head = new_node;

83. Linked list deletion
9 4 5
head
prev_node->next = to_delete->next;

84. Linked lists
http://cdn.cs50.net/2015/fall/lectures/5/w/src5w/list-0.c
http://cdn.cs50.net/2015/fall/lectures/5/w/src5w/list-0.h
# Malan’s list-0.c
void delete(void)
void insert(void)
void search(void)
void traverse(void)

85. Hashtables
0 apple
1 banana

10 kiwi

12 mango
apple
banana
kiwi
mango
Hash function

86. Collisions!
0 apple
1 banana

10 kiwi

12 mango
berry Hash function
Now what?!

87. dictionary.c
# dictionary.c TODOs
# 0. node/hashtable data structure
# 1. hash function
# 2. check(const char *word) => search()
# 3. load(const char *dictionary) => insert()
# 4. size(void)
# 5. unload(void) => delete()

88. Section 7

89. Agenda
• chmod
• HTML & CSS
• TCP/IP
• HTTP

90. chmod
chmod changes the access permissions of file system objects
fjw22@ide50:~/workspace \$ ls -l
total 4
drwx------ 2 ubuntu ubuntu 4096 Oct 26 05:14 directory/
fjw22@ide50:~/workspace \$ chmod 711 directory
fjw22@ide50:~/workspace \$ ls -l
total 4
drwx--x--x 2 ubuntu ubuntu 4096 Oct 26 05:14 directory/

91. ls -l
fjw22@ide50:~/workspace \$ ls -l
total 4
drwx--x--x 2 ubuntu ubuntu 4096 Oct 26 05:14 directory/
permissions
owner name
owner group
file size (bytes)
number of links
last modified time
name

92. File permissions
drwx------
d rwx --- ---
Directory? User Group World
Read Write Execute

93. File permissions
rwx --- ---
r-- r-- r--
rwx r-x r-x
700
444
???
chmod 711 directory — For any directory
chmod 644 file.txt — For any non-PHP file you create
chmod 600 file.php — For PHP files

94. HTML
HyperText Markup
Language

95. How does this work?
Imagine that you see all of this on a
website.

96. How does this work?
Imagine that you see all of
this on a website.

97. How does this work?
Start Tag
End Tag

98. Bold
Italics
Header 1
Header 2
Bold
Italics
Header 1
Header 2

99. My Website

100. My Website

Main heading
Hi! Welcome!

101. You
should check out Google.
Most HTML tags can have attributes

102. My Website

Main heading
Hi! Welcome! google.com”>You should check
out Google.

103. CSS
Cascading Style
Sheets

104. My Website
"styles.css" />

Main heading
Hi! Welcome! google.com”>You should check
out Google.

105. h1 {
color: red;
}
styles.css

106. h1 {
color: red;
}
Selector
Declaration

107. h1 {
color: red;
} Property Value

108. h1 {
color: red;
text-align: center;
}

109. .class
#id
vs

110. Feature 1

Feature 2

Feature 3

111. .column {
color: white;
background-color: blue;
}
#column1 {
color: yellow;
}

112. Padding
Margin
Div

113. http://frankjwu.com/posts/intro-to-web-
development-mit-blueprint-2014/

114. TCP/IP
SYN
SYN-ACK
ACK

115. TCP/IP

116. HTTP
Request
Response

117. HTTP Requests
• GET
• POST
• PUT
• PATCH
• DELETE
These request methods are the verbs!
GET / HTTP/1.1
Host: www.google.com

118. HTTP Responses
HTTP/1.1 200 OK
Content-Type: text/html

119. Section 8

120. yhack.org/cs50

121. Agenda
• PHP
• SQL
• MVC

122. HTTP
Request
Response

123. HTTP Requests
• GET
• POST
• PUT
• PATCH
• DELETE
These request methods are the verbs!
GET / HTTP/1.1
Host: www.google.com

124. HTML
hello.html from pset6

hello

placeholder="Name" type="text"/>

125. PHP
hello.php from pset6

hello

hello, = htmlspecialchars(\$_GET["name"]) ?>

hello, world

126. PHP
PHP Hypertext
Preprocessor

127. PHP
\$foo = 'Bob';
\$bar = “Sally";
\$foo = 1;
echo \$foo;
echo \$bar;
echo "\n";
?>
fjw22@ide50:~/workspace \$ php first.php
1Sally

128. PHP
function load(\$dictionary) {
global \$table;
foreach(file(\$dictionary) as \$word) {
\$table[\$word] = true;
}
return \$table;
}
if (!\$argv[1]) {
echo("php load.php DICTIONARY\n");
} else {
\$table = load(\$argv[1]);
echo("Dictionary loaded with " . count(\$table) . " words!\n");
}
?>

129. Your turn
Create a program that takes in command-line
arguments and prints out the first letter of
each one on a new line. Hint: use foreach!
fjw22@ide50:~/workspace \$ php first.php test arg
f
t
a

130. PHP in your HTML
hello.php from pset6

hello

hello, = htmlspecialchars(\$_GET["name"]) ?>

hello, world

131. PHP & HTML
Passes data via URL:
https://www.youtube.com/watch?v=Yzdb4gEaF6E&t=52
GET

132. PHP & HTML
{
"email": "———@————.com",
"password": "——————"
}
Passes data via HTTP message body:
POST
\$email = \$_POST["password"];
?>

133. PHP Superglobals
• \$GLOBALS
• \$_SERVER
• \$_GET
• \$_POST
• \$_FILES
• \$_COOKIE
• \$_SESSION
• \$_REQUEST
• \$_ENV

134. SQL
Structured Query
Language

135. SQL

136. SQL

137. SQL
INSERT INTO table VALUES values # insert into table the
row of values
INSERT INTO table (col1, col2) VALUES (val1, val2) #
insert into table under columns col1 & col2, val1 & val2
INSERT INTO
Insert specific values into a database table
Example:
INSERT INTO `users` (username, hash) VALUES('andi', '\$2y
\$10\$c.e4DK7pVyLT.stmHxgAleWq4yViMmkwKz3x8XCo4b/u3r8g5OTnS')

138. SQL
UPDATE table SET col1 = val1, col2 = val2, ... # update
table, changing values in particular columns
UPDATE table SET col1 = val1 WHERE identifier = "name" #
update table, changing col1 to val1 where "identifier"
equals "name"
UPDATE
Update data in a database table
Example:
UPDATE `users` (username, hash) SET name = 'andy' WHERE
name = 'andi'

139. SQL
SELECT col FROM table WHERE col = "identifier" # select
the "identifier" column from table to compare/view
SELECT * FROM table # select all columns from a table
SELECT
Select data values from a database table
Example:
SELECT * FROM `users`

140. SQL
DELETE FROM table WHERE col = "identifier" # delete a row
from table
DELETE
Delete data from a database table
Example:
DELETE FROM `users` WHERE name = "andy"

141. Your turn
Open up pset7.sql and walk through
what is happening, line by line.

142. MVC
Model
The object
View
The presentation
Controller
The arbitrator

143. Section 9

144. Javascript
// a simple variable
var problems = 99;
// an array
var mic_checks = [1, 2, 3];
// a string
var str = "Testing, testing";
// an object
var obj = {receptions: 9, yards:
105, average: 11.7};

145. Javascript
function print_words(words) {
for (var i = 0; i < words.length; i++) {
console.log(words[i]);
}
return true;
}
http://jsbin.com/?js,console

146. Your turn
Write a function that takes in an array of
words and returns a new array with the first
letter of every word capitalized.
var cap = capitalize(["joe", "mike",
"steve", "kevin"])
cap should now be ["Joe", "Mike",
"Steve", "Kevin"]
http://jsbin.com/?js,console

147. How do we use JS?

148. How do we use JS?

149. How do we use JS?

150. The DOM

The Document Object Model

What a time to be alive

151. The DOM
HTML
head
title div
body
div
img p

152. Javascript + HTML
<br/>var title = document.getElementById("title");<br/>title.innerHTML = "Changed the title";<br/>var pic = document.getElementById("pic");<br/>pic.src = "newpic.jpg";<br/>document.getElementById("quote").innerHTML =<br/>"For whom the hotline blings";<br/>

153. Javascript + HTML
http://cdn.cs50.net/2015/fall/lectures/9/m/src9m/form-1.html

154. jQuery
http://cdn.cs50.net/2015/fall/lectures/9/m/src9m/form-2.html

155. AJAX
\$.getJSON(url, function(data) {
// Process fetched data
});

156. Your turn
As Professor Malan demonstrated during class, we
can AJAX-ify fetching a stock price for pset7.
Without referencing the code he showed in class,
write a function quote() that will call the
appropriate endpoint and then adds the fetched
price to the DOM in a span with id ‘price’.
You can assume that any required HTML has already
been setup.

157. frankjwu.com
@frankjwu
Frank Wu