ITEC 325 2011fall ibarland

home—lects—exams—hws
breeze (snow day)

lect01a
intro

• When you visit a web page, what happens?

          Client                             Server
  
          Browser            ->request->
                              (URL)
                                             WebServer (Apache)
                                               - look up file; check permissions; re-interpret
                                                 (map URL to a local filename -- case sensitive?)
                                               - process any php (as configured)
                                                 which may invoke other programs, db connections, etc
                              <-response<-
                              (html, jpg,
                               html+javascript,
                               ...)
         Browser
          ...makes a gui window,
             lays out text/color/pictures
             Displays response
          Also:
          ...makes add'l URL requests... [Ad blocker!]
          ...runs javascript...
          ...invokes plug-ins or passes to OS...
  
          
          
          
        == (Day 2:) ==
        We reviewed server/client interaction and responsibilities.
        
        So, what information gets sent, on a request?
          {sample: start typing, and google.com}
        Hey, how are these suggested-completions popping up?
        - ACTUAL: server-side computation (via Ajax):
               on each keystroke, a transaction is happening, and google.com computes the completion
               (for *every* google visitor in the world, yikes, is that a lot of bandwidth?)
        - What are some other *hypothetical* was this could be handled?
          - client-side: the server includes the top 10,000 most popular searches,
              and the client javascript uses that to determine the auto-completion.
              (This wouldn't explain the .)
            That would be an expensive load-time on every page!  How might we use this approach but
              try to avoid having 'google.com' be a huge download every time?
            How about: only include that dictionary on the *first* visit to google.com,
              and have the client javascript write it to a file;
              then on subsequent visits this
            This requires something additional though: How does google know if this is the *first*
              time I'm visiting, or if I've visited previously and therefore I already have 
              the set of common-searches cached?
            *That's* what a cookie does:
              The very first time I visit google.com (searching for 'smelly socks'),
              google servesup the page and sends it
              back to the client, *and* it includes some extra stuff (in the http header):
               'dear client -- if you don't mind, could you write down the number 17463 (the "cookie"),
                and every time you visit me in the future, if you could attach that number
                that would be very helpful, thank you.'
              So my browser stores the cookie, and tomorrow I visit google and search for 
              'chrysanthemum'.  My browser sends that request *and* also sends the number 17463
               (the cookie that it's associated with all future visits to google.com).
               Now, yesterday google.com had taken care to log "I gave cookie#17463 to the person 
               who had done a search for 'smelly socks'; they are now searching for 'chrysanthemum',
               so I'll add that to the log for that user.  And I'll serve up some ads on foot powder."
              
  
          
         - we see: URL, + 'get' data embbeded in URL
         - also: post data (not hidden, but clear to eavesdroppers)
         - referring page, as mentioned yesterday
         - cookie
  
         
         Think of HTML as a tree.
         Each node has three parts:
           tag
           attributes (name/value pairs)
           children
  
         Btw, what's the diff between the meaning of em and i tags?
         Cf. emphasis, citation; a voice-interface to a web page.
         
         There are three tags with special meaning in HTML:
         id - specify a *unique* name of a node
         name - specify the *family* (array) that this node belongs to, conceptually.
         class -  used by css.  Don't be too specific here.  e.g. "navbar", not "paragraph23"
  
          
  

• HTML review:

        notable attributes: id, name; class
        the DOM: html represents *tree*, not text!
        

• Running php from the command line
• Show-source of:
  1. hello-world1.php (a basic php page)
  2. hello-world1.html (same content but saved with suffix “html”)
  3. hello-world0.html (a plain page with no php at all)
  4. hello-world0.php (same plain page but saved with suffix “php”)
  (Permissions.)
• Go over course-info sheet.
(Reached here, lect01a.)
• Show source, and discuss evolution of the javascript program. For each one: how much work is it to add another category (animal)?
  1. hiding-parts-v0.html (A first version, copied from one person to another. C-)
  2. hiding-parts-v1.html (A small tweak, greatly reduces length of code. B)
  3. hiding-parts-v2.html (Generalize -- much nicer. A)
  4. hiding-parts-v3a.html (Generalized (but, arguments more abstract). A+)
  5. hiding-parts-v3b.html (As before, but placing the paragraph in a different place suddenly breaks the code?! It's because the processing happens ASAP, before the named id has been parsed by the browser. An error message like 'no such id' would have been very nice!¹ Had my first attempt suffered from this bug, I would have given up assuming my whole approach didn't work.
     See also: attribute defer for tag script.
  6. hiding-parts-v3c.html, Pulling the javascript into its own file (can now be re-used between many pages). (It also demo's how you really can easily call the function twice in the same page w/o repeating code, which we could have done ever since we made createNavBar its own function.)
• Applying the above: How can/should we generalize a Bingo card javscript?

home—lects—exams—hws
breeze (snow day)

©2011, Ian Barland, Radford University Last modified 2011.Sep.04 (Sun)

Please mail any suggestions (incl. typos, broken links) to ibarlandradford.edu