IP489S13A HTML5 Crash Course – Session Four Notes

HTML5 logo
Today we continued our focus on JavaScript and got into a very quick introduction to jQueryUI.

We used jsbin instead of building full web pages in WebMatrix. This led to much more rapid exploration of ideas and programming concepts but at the cost of building portfolio pages.  You will want to move the ideas in your jsbin pages into full web pages on the UBC server using WebMatrix or FTP.

Here are some highlights:

  • We looked at your work using If Else
  • Here is another way to do conditional branching using Switch/Case
    • Keep Vancouver Friendly with Switch/Case and validation
    • Using CSS to style a form – specifically the <label> element.
      label {
      float:left;
      width:150px;
      text-align:right;
      margin-right:10px
      }
      label:after {
      content:  “:” ;
      }
  • We built a small application to do temperature conversions. This involved
    • defining the problem to be solved,
    • creating the algorithm,
    • designing the user interface,
    • translating the algorithm into code (a function),
    • creating the web page, and
    • testing
    • adding functionality (second button to convert in the other direction)
  • Temperature Conversions
    Here is a new version that uses addEventListener instead of onclick=”some JavaScript here”
    Temperature Conversions version 2.
  • While we were working on the form we used the new HTML form tags <fieldset> and <legend>
  • Here is the jQueryUI example for Tabs
  • jsbin settings and hints

Friday we will formalize our discussion on JavaScript Core Intrinsic Objects and tie up some loose ends. Then we will swing back to HTML5 looking at Forms and those elements that come to life with JavaScript.

Looking forward to it!

If you have questions or comments about today’s seesion, please post a comment here. I’d be interested to know what you felt were the most interesting or rewarding parts of the day. Or you can mention areas for improvement.

Thanks!

Advertisements

2 thoughts on “IP489S13A HTML5 Crash Course – Session Four Notes

  1. Jane says:

    Hi Jim

    thanks for the notes.

    This is a very interesting animation about exercise and our health. It is “irrelevant” to our class, but I think everyone may benefit from it:

    Jane

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s