Demos and News00:00

  • David starts lecture with the fancy new Myo armband, which wraps around your forearm, senses your muscle movements, and then sends those movements to a computer which recognizes them and does things as a result.

  • A volunteer, Maria, comes on stage to try the armband, but it has trouble recognizing her movements. The armband we have is actually the developer kit, and on the bleeding edge of advanced technology, so bugs like this are to be expected! (But check out this demo video or the Myo’s API!)

    • And late Happy Birthday to Maria, whose birthday was yesterday!

  • Steve Ballmer '77, who joined Microsoft when it had only 30 employees and retired recently (with the company employing over 100,000 people!), will join us next Wednesday, 11/12, as a guest lecturer.

  • A recent article entitled Five Tickets To Compete for UC Presidency, Vice Presidency reminded David of his experience running and losing, which then motivated him to work on his public speaking and teaching skills.

  • Back in the late 90s when David was here campaigning, he actually made a website that looked like this:

    David's campaign for UC website.
    • Check out that monk with the curtain that you had to click to see the actual website …​ we give you a 0/5 for design, David of the late 90s.

Recap10:03

  • HTML is a markup language that lets us structure a webpage (using headers, footers, headings, etc.).

  • CSS lets us design or stylize elements, with boldfacing or colors or positioning. For example, a default table in HTML is pretty ugly and hard to read, so we can use CSS to make it prettier.

  • PHP lets us generate dynamic content, and since it’s a programming language, we can use it to communicate with a database or other servers, and do basically anything we can tell a computer to do.

  • SQL is yet another language, used to talk to databases, with INSERTs, DELETEs, UPDATEs, and other functionality yet to be explored.

JavaScript Validation13:18

  • On Monday we introduced the last language we’ll be formally learning about, JavaScript. Unlike PHP, which is interpreted on the server, JavaScript runs on the client-side, or in the browser. These days most websites include a bunch of .js files, that your browser then runs in a sandbox — i.e., it generally restricts JavaScript from, say, deleting your files or sending emails.

    • As an aside, JavaScript can also be run on a server, but we won’t talk about it in that context.

  • Recall the following HTML page and its corresponding tree structure that we talked about a few weeks ago:

    DOM tree with HTML.
    • We think of the Document Object Model (DOM) like this because our JavaScript interacts with the webpage in your browser based on the relationships shown by this tree. For example, websites that have a chat feature might implement individual messages as li elements, or divs, and as you get new messages, they are being added by some JavaScript function as another node to this tree.

  • Let’s look at an example, form-0.html:

    form-0.html in Chrome.
    • It looks super simple, with no CSS, and the code is fairly straightforward as well:

      <!DOCTYPE html>
      
      <html>
          <head>
              <title>form-0</title>
          </head>
          <body>
              <form action="register.php" method="get">
                  Email: <input name="email" type="text"/>
                  <br/>
                  Password: <input name="password" type="password"/>
                  <br/>
                  Password (again): <input name="confirmation" type="password"/>
                  <br/>
                  I agree to the terms and conditions: <input name="agreement" type="checkbox"/>
                  <br/><br/>
                  <input type="submit" value="Register"/>
              </form>
          </body>
      </html>
    • We have a form tag that will go to some file called register.php, and then we have a text field, two password fields, and a checkbox field.

  • Now if we fill out the form like this:

    form-0.html filled out incompletely.
  • We get: