Home | Fine Art | Web Development | Teaching | Musings | Contact

WDIM262 Web Scripting: Javascript

download syllabus

Resources
1. javascript homework week 1
Your assignment for week 1

2. javascript homework week 2

Various small tasks

3. javascript homework week 3

javascript homework week 3

4. javascript homework week 4

javascript homework week 4

5. javascript homework week 7

Events and other stuff

6. javascript homework week 8

Doing something creative with animation and the easing plugins

7. javascript - final assignment

You are challenged to create a website project that makes strong use of Javascript to
create the UI, improve usability, or improve the site experience in some way...

8. Image rollovers
Demonstrates how to perform a simple image rollover, as well as how to use one image to
control other images.

9. Flow Control Statements

Describes the structures for writing if-then statements, if-else, if-else-if, and switch case
statements

10. Pop-Up windows

Examples for controlling windows, opening, closing, moving to front and behind, resizing,
repositioning.

11. Handling forms with Javascript - Intro

How to handle a basic form text field with Javascript.

12. Handling Forms 2

Demonstrates how to capture all the HTML form fields using Javascript.

13. Formatting text as currency

How to formatting text as currency using Javascript
14. Links to Javascript Resources
Good places on the web to learn Javascript, get libraries, free code, DHTML effects,
browser sniffers, etc.

15. Javascript loan calculator

This is a handy little loan calculator written in javascript. It's taken from the Flanagan's
"Javascript:The Definitive Guide."

16. Basic DHTML commands

Hiding, showing and moving HTML elements

17. Scaling HTML elements

Scaling an object up and down (animating the width and height properties).

18. dynamically re-write contents

Dyanmically re-write the contents of any HTML element.

19. key controlled movement (IE only)

Use the arrow keys to control elements

20. Click and drag objects (IE only)

Demonstrates how to click and drag objects.

21. Ease Out animation - Javasc.

Demonstrates a typical ease out equation used often with Flash Actionscript, re-tooled
here for use with Javascript.

22. DHTML - some shortcuts

These are more examples of sliding and easing. There is a nice little parsing function to
save time with location changes. We used javascript to write the styles (so no more inline
CSS rules), and created shortcuts for the object reference.

23. Resources for AJAX

A combination of several technologies: HTML, CSS, Javascript, DOM and XML. Learn
more about how interactive web applications like Google Maps are created.

24. Capturing KeyCodes (Firefox & IE) -- keyCodes.html

Hit any key on the keyboard to see the keyCode. This works in both Internet Explorer and
Firefox.

25. Setting & Reading a Cookie

A demonstration of how to set and read a persistent cookie with Javascript. This can be
used for building login screens, shopping carts, etc.

26. Javascript Image slider

A little image slider that can easily be incorporated into any site. Slide a series of pictures
back and forth by clicking the forward and back arrows. Handles any number of images.

27. Yahoo! YUI Library (YUI)

The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in
JavaScript, for building richly interactive web applications using techniques such as DOM
scripting, DHTML and AJAX. The YUI Library also includes several core CSS resources.
All components in the YUI Library have been released as open source under a BSD license
and are free for all uses.

28. JQuery
jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML
documents, handle events, perform animations, and add Ajax interactions to your web
 pages. jQuery is designed to change the way that you write JavaScript.

Tom Wheeler is a local Oregon & Washington PHP Drupal programmer and designer with over 15 years
web programming experience. He specializes in custom Drupal Module development, Drupal theming with
CSS, and Drupal programming. Tom is a Portland Drupal Developer, and has taught college courses in
PHP, MySQL and Drupal development at The Art Institute of Portland. He is also well-versed in
Wordpress and other PHP and MySQL applications. If you need any object oriented PHP programming,
contact Tom today!

© 2009 All images and content, all rights reserved by Thomas Wheeler
Home | Fine Art | Web Development | Teaching | Musings | Contact

javascript homework week 1

Assignment 1
You may need to do a little bit of web research to help you out with this assignment, it
comes from an older book we used for the course, so our new book may not cover this
exact material in chapter 1.

1. Create a personal homepage for yourself named "home.htm". Write your name into the
heading tag at the top. Place an image of yourself, (or something that represents you) at
the top as well.

Add the following main headings (h2 tags):

My Assignments - leave space for later

About Me - leave space for later
Bio - complete this section with some bio information
My Hobbies - leave blank for later
My Work - leave blank
My Browser - leave blank
Contact Info - leave blank
Last Update

2. On the homepage you created, insert a script under the "My Browser" heading that
prints out the following information about your browser:

1. appCodeName
2. appName
3. appVersion
4. platform
5. userAgent

3. Insert a script within the "Last Update" area to write the date when the document was
last modified.
4. Under the image, add a script that writes the "src" property and dimensions of the
image. (Hint: Give the image a name with HTML if you haven't already, so you can easily
access its properties).
5. In the My Browser section, add a script that displays the current screen resolution.
6. In the My Browser section, add a script that displays the current window dimensions.

Tom Wheeler is a local Oregon & Washington PHP Drupal programmer and designer with over 15 years
web programming experience. He specializes in custom Drupal Module development, Drupal theming with
CSS, and Drupal programming. Tom is a Portland Drupal Developer, and has taught college courses in
PHP, MySQL and Drupal development at The Art Institute of Portland. He is also well-versed in
Wordpress and other PHP and MySQL applications. If you need any object oriented PHP programming,
 contact Tom today!

© 2009 All images and content, all rights reserved by Thomas Wheeler
 Home | Fine Art | Web Development | Teaching | Musings | Contact

javascript homework week 2

Read chpt3 in the book

Create a form that takes information about a person:

Their name, their favorite band, and their favorite book, and their age.
Write results of their inputs back to a div on the page.

Demonstrate that you can show different results (images?) based on their inputs. (Use
your creativity). Show that you can use 3-4 different conditional operators.

Demonstrate a nested if-then statement.

Demonstrate a switch-case statement.

Create a form that asks: "How many times should my loop run?" (takes numeric input).
Write a loop that outputs a statement for the number of times they specify.

Tom Wheeler is a local Oregon & Washington PHP Drupal programmer and designer with over 15 years
web programming experience. He specializes in custom Drupal Module development, Drupal theming with
CSS, and Drupal programming. Tom is a Portland Drupal Developer, and has taught college courses in
PHP, MySQL and Drupal development at The Art Institute of Portland. He is also well-versed in
Wordpress and other PHP and MySQL applications. If you need any object oriented PHP programming,
contact Tom today!

© 2009 All images and content, all rights reserved by Thomas Wheeler
 Home | Fine Art | Web Development | Teaching | Musings | Contact

javascript homework week 3

Read chapter 4 in the book.

1. Write a long sentence and store it into a new string object.

2. Output the number of characters in the string.
3. Demonstrate that you can locate the position of a substring inside the string.
4. Output characters in the string from position 4 to position 9
5. Create an HTML form with a text entry box. Print a long string (a paragraph) to the
screen. Ask the user to enter a word or a phrase. Can you take the user input and
report back a message like: "The search phrase you entered was found at position 9
in the string".
6. Can you report back the total number of occurances of the user's phrase? You might
look at the split() & loop code on page 80 - that's a good direction. Or you could try
modifying the code on page 82, with a regular expression. Don't spend more than
an hour or so on this.. feel free to turn it in as far as you get it.

A little window manipulation

1. Write a form to take user input for URL, width & height. Write a function that takes the
inputs and opens a new pop-window that loads in the URL, and is sized according to the
specified dimensions. You should be able to figure this one out combining some examples
from class.

Tom Wheeler is a local Oregon & Washington PHP Drupal programmer and designer with over 15 years
web programming experience. He specializes in custom Drupal Module development, Drupal theming with
CSS, and Drupal programming. Tom is a Portland Drupal Developer, and has taught college courses in
PHP, MySQL and Drupal development at The Art Institute of Portland. He is also well-versed in
Wordpress and other PHP and MySQL applications. If you need any object oriented PHP programming,
contact Tom today!

© 2009 All images and content, all rights reserved by Thomas Wheeler
 Home | Fine Art | Web Development | Teaching | Musings | Contact

javascript homework week 4

For this week in class we worked on an array-based image slideshow. We looked briefly
in class at the jquery library, and I challenged you to explore some jquery this week. Take
a look at the documentation for Jquery, and just have some fun playing around to see
what you are able to do.

Can you incorporate a fade effect into our image slideshow we built in class?

Tom Wheeler is a local Oregon & Washington PHP Drupal programmer and designer with over 15 years
web programming experience. He specializes in custom Drupal Module development, Drupal theming with
CSS, and Drupal programming. Tom is a Portland Drupal Developer, and has taught college courses in
PHP, MySQL and Drupal development at The Art Institute of Portland. He is also well-versed in
Wordpress and other PHP and MySQL applications. If you need any object oriented PHP programming,
contact Tom today!

© 2009 All images and content, all rights reserved by Thomas Wheeler
 Home | Fine Art | Web Development | Teaching | Musings | Contact

javascript homework week 7

1. Create a lightbox image gallery
2. Read Chapter 7 in the book - events
3. Demonstrate that you can capture keystrokes by having some event fire when
certain keys are hit.
4. Demonstrate you can capture "mousemove", "change", "contextMenu", and "scroll".
5. Explain the event object. What is it for? How is it different from an event handler?
6. Demonstrate cross-browser use of the event object. Try experimenting with DOM
level 2 event handling by making certain elements change their visibility, or writing
results to a div on events.

Tom Wheeler is a local Oregon & Washington PHP Drupal programmer and designer with over 15 years
web programming experience. He specializes in custom Drupal Module development, Drupal theming with
CSS, and Drupal programming. Tom is a Portland Drupal Developer, and has taught college courses in
PHP, MySQL and Drupal development at The Art Institute of Portland. He is also well-versed in
Wordpress and other PHP and MySQL applications. If you need any object oriented PHP programming,
contact Tom today!

© 2009 All images and content, all rights reserved by Thomas Wheeler
 Home | Fine Art | Web Development | Teaching | Musings | Contact

javascript homework week 8

So the assignment for this week was to do something creative, playful, interesting with the
easing plugins that are out there. Last week we experimented with doing some animation
in Javascript, and we experimented with the setTimeout() and setInterval() functions.

I showed a couple of resources for doing animations with easing, here they are:

Jquery easing plugin

Yahoo Easing animation utility

So dive into one of these, whichever you prefer, and see what you can come up with in a
couple hours. Don't spend more than 3 hours on this - you should also be working on
your final project (and maybe this plays into something you want to do on your final).

Tom Wheeler is a local Oregon & Washington PHP Drupal programmer and designer with over 15 years
web programming experience. He specializes in custom Drupal Module development, Drupal theming with
CSS, and Drupal programming. Tom is a Portland Drupal Developer, and has taught college courses in
PHP, MySQL and Drupal development at The Art Institute of Portland. He is also well-versed in
Wordpress and other PHP and MySQL applications. If you need any object oriented PHP programming,
contact Tom today!

© 2009 All images and content, all rights reserved by Thomas Wheeler
 Home | Fine Art | Web Development | Teaching | Musings | Contact

javascript - final assignment

Instead of a final "exam", I decided this term to challenge you to create a final project. So
here are the requirements:

Final web site project - Portfolio Quality

At least 5 pages, including homepage
Visual design will count
You select a suitable subject for the site. It can be a personal project, a corporate
design, a site about animals, nature, a geographic place, mars, whatever you like.
One page must include a form - and it must be validated with Javascript before it is
sent to the server (you can create a placeholder html page to represent the server
script).
5 javascript effects - 2 of these must be coded by you (not including the form
validation), and 3 of these can be implementations of javascript libraries you locate.
See my Javascript Resources page for different libraries and effects.

Some ideas we tossed around include effects to change font sizes (for usability), color
schemes, animations - content or menus sliding in, fades, drag & drop, etc..

Next week we will work in class

Tom Wheeler is a local Oregon & Washington PHP Drupal programmer and designer with over 15 years
web programming experience. He specializes in custom Drupal Module development, Drupal theming with
CSS, and Drupal programming. Tom is a Portland Drupal Developer, and has taught college courses in
PHP, MySQL and Drupal development at The Art Institute of Portland. He is also well-versed in
Wordpress and other PHP and MySQL applications. If you need any object oriented PHP programming,
contact Tom today!

© 2009 All images and content, all rights reserved by Thomas Wheeler