Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CS50 at Yale: Fall 2015 Sections

Frank Wu
September 21, 2015

CS50 at Yale: Fall 2015 Sections

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

Frank Wu

September 21, 2015
Tweet

More Decks by Frank Wu

Other Decks in Programming

Transcript

  1. Frank Wu Fall 2015
    CS50
    Yale

    View Slide

  2. Section 2

    View Slide

  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”

    View Slide

  4. Why section?

    View Slide

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

    View Slide

  6. Arrays
    0 1 2 3
    65 41 23 10

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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';

    View Slide

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

    View Slide

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

    View Slide

  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’

    View Slide

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

    View Slide

  15. Why functions?
    • Organization
    • Simplification
    • Reusability

    View Slide

  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;
    }

    View Slide

  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) {
    // ...
    }

    View Slide

  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

    View Slide

  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]?

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  23. ASCII chars

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  27. Section 3

    View Slide

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

    View Slide

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

    View Slide

  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) {
    // ...
    }

    View Slide

  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?

    View Slide

  32. Postmortems

    View Slide

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

    View Slide

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

    View Slide

  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]

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  43. Section 4

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  51. Memory management
    stack
    heap

    View Slide

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

    View Slide

  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;
    }

    View Slide

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

    View Slide

  55. Pointers
    *
    value of
    &
    address of

    View Slide

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

    View Slide

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

    View Slide

  58. Section 5

    View Slide

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

    View Slide

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

    View Slide

  61. Linked lists

    View Slide

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

    View Slide

  63. Linked list search
    9 4 5
    head

    View Slide

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

    View Slide

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

    View Slide

  66. Hashtables
    0 apple
    1 banana

    10 kiwi

    12 mango
    apple
    banana
    kiwi
    mango
    Hash function

    View Slide

  67. Collisions!
    0 apple
    1 banana

    10 kiwi

    12 mango
    berry Hash function
    Now what?!

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  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;

    View Slide

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

    View Slide

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

    View Slide

  74. Section 6

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  79. Linked lists

    View Slide

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

    View Slide

  81. Linked list search
    9 4 5
    head

    View Slide

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

    View Slide

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

    View Slide

  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)

    View Slide

  85. Hashtables
    0 apple
    1 banana

    10 kiwi

    12 mango
    apple
    banana
    kiwi
    mango
    Hash function

    View Slide

  86. Collisions!
    0 apple
    1 banana

    10 kiwi

    12 mango
    berry Hash function
    Now what?!

    View Slide

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

    View Slide

  88. Section 7

    View Slide

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

    View Slide

  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/

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  94. HTML
    HyperText Markup
    Language

    View Slide

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

    View Slide

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

    View Slide

  97. How does this work?
    Start Tag
    End Tag

    View Slide

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

    View Slide




  99. View Slide



  100. My Website



    View Slide



  101. My Website


    Main heading
    Hi! Welcome!


    View Slide

  102. View Slide

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

    View Slide



  104. My Website


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



    View Slide

  105. View Slide

  106. CSS
    Cascading Style
    Sheets

    View Slide



  107. My Website
    "styles.css" />


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



    View Slide

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

    View Slide

  109. View Slide

  110. h1 {
    color: red;
    }
    Selector
    Declaration

    View Slide

  111. h1 {
    color: red;
    } Property Value

    View Slide

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

    View Slide

  113. View Slide

  114. .class
    #id
    vs

    View Slide








  115. Feature 1


    Feature 2


    Feature 3




    View Slide

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

    View Slide

  117. Padding
    Margin
    Div

    View Slide

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

    View Slide

  119. TCP/IP
    SYN
    SYN-ACK
    ACK

    View Slide

  120. TCP/IP

    View Slide

  121. HTTP
    Request
    Response

    View Slide

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

    View Slide

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

    View Slide

  124. Section 8

    View Slide

  125. yhack.org/cs50

    View Slide

  126. Agenda
    • PHP
    • SQL
    • MVC

    View Slide

  127. HTTP
    Request
    Response

    View Slide

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

    View Slide

  129. HTML
    hello.html from pset6



    hello



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




    View Slide

  130. PHP
    hello.php from pset6



    hello



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

    hello, world



    View Slide

  131. PHP
    PHP Hypertext
    Preprocessor

    View Slide

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

    View Slide

  133. 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");
    }
    ?>

    View Slide

  134. 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

    View Slide

  135. PHP in your HTML
    hello.php from pset6



    hello



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

    hello, world



    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  139. SQL
    Structured Query
    Language

    View Slide

  140. SQL

    View Slide

  141. SQL

    View Slide

  142. 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')

    View Slide

  143. 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'

    View Slide

  144. 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`

    View Slide

  145. 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"

    View Slide

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

    View Slide

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

    View Slide

  148. Section 9

    View Slide

  149. 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};

    View Slide

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

    View Slide

  151. 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

    View Slide

  152. How do we use JS?

    View Slide

  153. How do we use JS?

    View Slide

  154. How do we use JS?

    View Slide

  155. The DOM


    The Document Object Model






    What a time to be alive


    View Slide

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

    View Slide

  157. 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/>

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  161. 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.

    View Slide

  162. frankjwu.com
    @frankjwu
    Frank Wu

    View Slide