CISC 2350 -- Information & Web Programming

Examples

These examples are used in the lecture slides. Use your browser's View Page Source feature to see the XHTML that produces what you see.

• Introduction to HTML
  1. Tags for head and body
  2. Organizational tags
  3. Tags for text style
  4. Lists
  5. Miscellaneous tags
  6. Tables
  7. Tables
  8. Forms
  9. Anchors
  10. Anchor that opens in new page
• CSS Style Sheets
  1. Embedded style sheet
  2. Using style classes
  3. Using pseudo-classes
  4. Using pseudo-elements
  5. Inline styles
  6. Using external style sheet
     • (Here is the external style sheet)
  7. Borders, margins, padding
  8. Controlling display of elements
• Introduction to JavaScript
  1. Today's date, first version
  2. Today's date, with syntax error
  3. Today's date, second version
  4. Today's date, third version
  5. Today's date, fourth version
  6. Addition of two numbers
  7. Centigrade to Fahrenheit conversion
  8. Addition of user-provided numbers, with bug
  9. Addition of user-provided numbers, corrected
  10. Addition of user-provided numbers, more concise version
  11. Legal age calculation
  12. Legal age calculation, more concise version
  13. Legal age calculation, even more concise version
  14. Solution to Project 3, as worked out in class
• More JavaScript Examples
  1. Random foreground & background colors
  2. Random image, switch version. View JavaScript code.
  3. Random image, array version. View JavaScript code.
  4. Random image, 2nd array version. View JavaScript code.
  5. Check form before submitting.
  6. Check form before submitting (2-D array version).
  7. Pick a color, any color.
  8. Cycle thru ads every 5 seconds.
  9. Alternative method, with browser compatibility issue
  10. Same, with changing links.
• Working With Windows. Note: you will need to allow pop-ups from this site for some of these to work.
  1. Pop-up windows.
  2. Pop-up windows, second example. View JavaScript code.
• More advanced JavaScript.
  1. Setting and reading a cookie.
• Homework-related examples worked in class April 6 & 13. These are unretouched (except the corrected version of the last one) and lack details like the proper DOCUMENT tag or nice formatting. The windowing example still has the bug(s) it had when we ran out of time. You are invited to use Firebug to debug it before looking at the corrected version.
  1. Temperature chart. (Project 6. Could use better formatting into a table.) This example also illustrates rounding a number to one decimal place (part of Project 8).
  2. Day of week today. (Part of Project 7.)
  3. Random aphorisms. (Part of Project 7.)
  4. Open a child window with a Close button. (Part of Project 7.) NOT WORKING.
  5. Open a child window with a Close button. (Part of Project 7.) Corrected version. It still has a lot of unused stuff left over from the example page we used as starting point, and does not verify that the open succeeded before writing to the child.
  6. Clickable image that changes on mouse-over I have changed the images to ones having the same background color but different foreground color. To create these images in GIMP, the trick is to select the text tool (the A in the toolbox) and click on the text layer in the image to select it. Then in the toolbox you can use the text color chooser to pick a different color.
• Ajax.
  1. Pull-down menu to select an advisor name and get contact information. This does not use Dojo or Prototype package. JavaScript code. XML description of advisors.
  2. Text box for typing words as suggested completions appear below. This does not use Dojo or Prototype package. JavaScript code. Word list (large). PHP source of CGI that reads the word list and selects the words that match the text typed so far. (PHP not covered in class yet.)
  3. Text box for typing words as suggested completions appear below. JavaScript code. This uses Dojo package to simplify the HTTP request. (Word list and PHP CGI are same as above. HTML is too.)