CSC 105

Examples of Specific Techniques

 

The examples at the bottom of this list may incorporate techniques not yet covered in class. There may be bugs in these examples; please notify me if you find one.

Contents

  1. Basic HTML
  2. Style Sheets
  3. More HTML: Tables and Area Maps
  4. JavaScript
  5. JavaScript Objects
  6. JavaScript Loops and Arrays
  7. Dynamic HTML
  8. Document Object Model
  9. PHP
  10. Frames
  11. Forms
  12. Multimedia: Plugins and Embedded Objects
  13. Maintaining State

    Basic HTML

  1. A skeletal HTML document
  2. A more fleshed-out HTML document
  3. Some additions to the example above

    4. Style Sheets

  4. A web page with style and without
  5. The course home page with no style or alternate style
  6. Style for links
  7. Formatting using various methods: divs, tables, frames
  8. Examples of image alignment: old style and using css
  9. An outline using style sheets
  10. Use of style sheets to add a background image
  11. Style-sheet positioning
  12. Z-index control via CSS
  13. Clip rectangle control via CSS

    14. More HTML: Tables and Area Maps

  14. A simple table
  15. A table with cells spanning multiple rows and columns
  16. A hidden table gives two-column text
  17. Use of an area map
  18. A split image arranged in a table
  19. Style sheets for tables

    20. JavaScript

  20. Basic JavaScript examples: #1, #2, #3.
  21. Some simple JavaScript commands
  22. Display the current time using Date()
  23. Use of the if...else construct
  24. Use of the while loop construct
  25. Use of the switch construct
  26. More on variable content: if/else, multiple if/else, switch
  27. Calling an external JavaScript
  28. Logical operators in Javascript
  29. Review of some Javascript statement types
  30. Using functions to organize scripts and avoid unnecessary duplication
  31. Example using functions of increasing flexibility: no arguments, one argument, two arguments.
  32. Example of use of functions
  33. Example of events
  34. Timing events
  35. Example of variable scope
  36. Use of dialog boxes
  37. Using an external JavaScript file to include a header

    38. JavaScript Objects

  38. Examples of some objects
  39. Date object and arrays
  40. Functions and the Image object
  41. Using the Math object

    42. JavaScript Loops and Arrays

  42. A table of sines, using a simple loop
  43. A checkerboard, using a pair of nested loops
  44. An introduction to arrays
  45. Pieces on the checkerboard can be kept track of using a 2D array

    46. Dynamic HTML

  46. Very basic rollovers
  47. A simple rollover via a function
  48. Multiple rollovers via one function
  49. Swapping multiple images on a rollover
  50. Using rollovers to influence behavior
  51. A rollover with preloading of images
  52. Rollover navigation bar
  53. Navigation bar with dynamic motion effects
  54. Drop-down menus: one, two
  55. Other dynamic mouseover effects
  56. Two ways to make page elements appear and disappear
  57. How to annoy the user...
  58. An interactive story, using layers with dynamic visibility changes,
  59. A dynamic color picker
  60. A dynamic index (built from scratch)
  61. Dynamic HTML to produce flying text and image
  62. Flying text that changes, built upon the previous example
  63. Sparkling letters
  64. A complete JavaScript application: tic-tac-toe
  65. Another JavaScript application: Conway's angel

    66. Document Object Model

  66. Automatic last update notice.
  67. Dynamically changing style properties via the DOM: before dynamism; after dynamism.
  68. Using the document object to change colors
  69. Window size (and other useful properties)
  70. Putting window size to use.
  71. Some other uses of the window object
  72. A script that displays object properties
  73. General cross-browser DOM
  74. General cross-browser DOM in an external script file
  75. Sampler of changes via cross-browser DOM
  76. A slide show, using the interval timer
  77. A double slide show using the interval timer
  78. Some uses of the navigator object
  79. Using the window.open method to create a popup window
  80. Dynamic HTML to produce moving text
  81. Dynamic HTML to change the text of a link. Using buttons (easiest); Partial cross-browser version (no Netscape 4.x); Fully cross-browser version

    82. PHP

  82. Using including files via PHP.

    83. Frames

  83. A basic set of frames
  84. The same set of frames, with some JavaScript improvements
  85. Frames/noframes example, with a navbar that appears only in noframes mode.
  86. Seamless frames/noframes transitions.
  87. An example of an internal frame, with JavaScript improvements
  88. A Web "magazine", showing some uses of internal frames
  89. A remote control, using frames

    90. Forms

  90. A form, showing all the basic input types
  91. Another form, whose results are interpreted using JavaScript, including an external script for form processing.
  92. JavaScript with menus and radio buttons
  93. A much more complex use of Javascript for form checking, from Jim O'Donnell
  94. An example of form checking and processing
  95. A quiz

    96. Multimedia: Plugins and Embedded Objects

  96. Check the plugins and mimetypes (Netscape only)
  97. Examples of object embedding
  98. A flash animation, showing the use of Javascript as an interface
  99. Interactive sound, via a hidden frame
  100. Using interactive sound

    101. Maintaining State

  101. Cookies are delicious!
  102. The same cookie example, using external JavaScript file cookie.js
  103. More use of cookies: a page that stores preferences in a cookie, and another page that reads those preferences.
  104. Example of the use of hidden frames