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 full-size slide

  2. 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 full-size slide

  3. Why section?

    View full-size slide

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

    View full-size slide

  5. Arrays
    0 1 2 3
    65 41 23 10

    View full-size slide

  6. 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 full-size slide

  7. 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 full-size slide

  8. 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 full-size slide

  9. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  12. 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 full-size slide

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

    View full-size slide

  14. Why functions?
    • Organization
    • Simplification
    • Reusability

    View full-size slide

  15. 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 full-size slide

  16. 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 full-size slide

  17. 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 full-size slide

  18. 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 full-size slide

  19. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  22. 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 full-size slide

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

    View full-size slide

  24. 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 full-size slide

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

    View full-size slide

  26. 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 full-size slide

  27. 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 full-size slide

  28. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  31. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. 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 full-size slide

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

    View full-size slide

  40. 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 full-size slide

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

    View full-size slide

  42. 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 full-size slide

  43. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  46. Memory management
    stack
    heap

    View full-size slide

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

    View full-size slide

  48. 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 full-size slide

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

    View full-size slide

  50. Pointers
    *
    value of
    &
    address of

    View full-size slide

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

    View full-size slide

  52. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  55. Linked lists

    View full-size slide

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

    View full-size slide

  57. Linked list search
    9 4 5
    head

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  60. Hashtables
    0 apple
    1 banana

    10 kiwi

    12 mango
    apple
    banana
    kiwi
    mango
    Hash function

    View full-size slide

  61. Collisions!
    0 apple
    1 banana

    10 kiwi

    12 mango
    berry Hash function
    Now what?!

    View full-size slide

  62. 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 full-size slide

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

    View full-size slide

  64. 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 full-size slide

  65. 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 full-size slide

  66. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  69. 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 full-size slide

  70. 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 full-size slide

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

    View full-size slide

  72. Linked lists

    View full-size slide

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

    View full-size slide

  74. Linked list search
    9 4 5
    head

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  77. 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 full-size slide

  78. Hashtables
    0 apple
    1 banana

    10 kiwi

    12 mango
    apple
    banana
    kiwi
    mango
    Hash function

    View full-size slide

  79. Collisions!
    0 apple
    1 banana

    10 kiwi

    12 mango
    berry Hash function
    Now what?!

    View full-size slide

  80. 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 full-size slide

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

    View full-size slide

  82. 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 full-size slide

  83. 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 full-size slide

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

    View full-size slide

  85. 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 full-size slide

  86. HTML
    HyperText Markup
    Language

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  89. How does this work?
    Start Tag
    End Tag

    View full-size slide

  90. Bold
    Italics
    Header 1
    Header 2
    Bold
    Italics
    Header 1
    Header 2

    View full-size slide



  91. My Website



    View full-size slide



  92. My Website


    Main heading
    Hi! Welcome!


    View full-size slide

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

    View full-size slide



  94. My Website


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



    View full-size slide

  95. CSS
    Cascading Style
    Sheets

    View full-size slide



  96. My Website
    "styles.css" />


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



    View full-size slide

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

    View full-size slide

  98. h1 {
    color: red;
    }
    Selector
    Declaration

    View full-size slide

  99. h1 {
    color: red;
    } Property Value

    View full-size slide

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

    View full-size slide








  101. Feature 1


    Feature 2


    Feature 3




    View full-size slide

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

    View full-size slide

  103. Padding
    Margin
    Div

    View full-size slide

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

    View full-size slide

  105. TCP/IP
    SYN
    SYN-ACK
    ACK

    View full-size slide

  106. HTTP
    Request
    Response

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  109. yhack.org/cs50

    View full-size slide

  110. Agenda
    • PHP
    • SQL
    • MVC

    View full-size slide

  111. HTTP
    Request
    Response

    View full-size slide

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

    View full-size slide

  113. HTML
    hello.html from pset6



    hello



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




    View full-size slide

  114. PHP
    hello.php from pset6



    hello



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

    hello, world



    View full-size slide

  115. PHP
    PHP Hypertext
    Preprocessor

    View full-size slide

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

    View full-size slide

  117. 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 full-size slide

  118. 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 full-size slide

  119. PHP in your HTML
    hello.php from pset6



    hello



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

    hello, world



    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  123. SQL
    Structured Query
    Language

    View full-size slide

  124. 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 full-size slide

  125. 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 full-size slide

  126. 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 full-size slide

  127. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  130. 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 full-size slide

  131. 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 full-size slide

  132. 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 full-size slide

  133. How do we use JS?

    View full-size slide

  134. How do we use JS?

    View full-size slide

  135. How do we use JS?

    View full-size slide

  136. The DOM


    The Document Object Model






    What a time to be alive


    View full-size slide

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

    View full-size slide

  138. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  142. 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 full-size slide

  143. frankjwu.com
    @frankjwu
    Frank Wu

    View full-size slide