WDIM262 Assignments

8/14/2019 WDIM262 Assignments

1/11

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

WDIM262 Web Scripting: Javascript

download syllabus

Resources

1.javascript homework week 1Your assignment for week 1

2.javascript homework week 2

Various small tasks

3.javascript homework week 3javascript homework week 3

4.javascript homework week 4javascript homework week 4

5.javascript homework week 7Events and other stuff

6.javascript homework week 8Doing something creative with animation and the easing plugins

7.javascript - final assignmentYou are challenged to create a website project that makes strong use of Javascript tocreate the UI, improve usability, or improve the site experience in some way...

8. Image rolloversDemonstrates how to perform a simple image rollover, as well as how to use one image tocontrol other images.

9. Flow Control StatementsDescribes the structures for writing if-then statements, if-else, if-else-if, and switch casestatements

10. Pop-Up windowsExamples for controlling windows, opening, closing, moving to front and behind, resizing,repositioning.

11. Handling forms with Javascript - IntroHow to handle a basic form text field with Javascript.

12. Handling Forms 2Demonstrates how to capture all the HTML form fields using Javascript.

13. Formatting text as currencyHow to formatting text as currency using Javascript

8/14/2019 WDIM262 Assignments

2/11

14. Links to Javascript ResourcesGood places on the web to learn Javascript, get libraries, free code, DHTML effects,

browser sniffers, etc.

15. Javascript loan calculatorThis 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 elementsScaling an object up and down (animating the width and height properties).

18. dynamically re-write contentsDyanmically 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- tooledhere for use with Javascript.

22. DHTML - some shortcutsThese are more examples of sliding and easing. There is a nice little parsing function tosave time with location changes. We used javascript to write the styles (so no more inlineCSS rules), and created shortcuts for the object reference.

23. Resources for AJAXA 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.htmlHit any key on the keyboard to see the keyCode. This works in both Internet Explorer andFirefox.

25. Setting & Reading a CookieA demonstration of how to set and read a persistent cookie with Javascript. This can beused for building login screens, shopping carts, etc.

26. Javascript Image sliderA little image slider that can easily be incorporated into any site. Slide a series of picturesback 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 inJavaScript, for building richly interactive web applications using techniques such as DOMscripting, 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 licenseand are free for all uses.

28. JQueryjQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTMLdocuments, handle events, perform animations, and add Ajax interactions to your web

8/14/2019 WDIM262 Assignments

3/11

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 yearsweb programming experience. He specializes in custom Drupal Module development, Drupal theming withCSS, and Drupal programming. Tom is a Portland Drupal Developer, and has taught college courses inPHP, MySQL and Drupal development at The Art Institute of Portland. He is also well-versed inWordpress and other PHP and MySQL applications. If you need any object oriented PHP programming,contact Tomtoday!

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

8/14/2019 WDIM262 Assignments

4/11

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, itcomes from an older book we used for the course, so our new book may not cover thisexact material in chapter 1.

1. Create a personal homepage for yourself named "home.htm". Write your name into theheading 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 laterAbout Me - leave space for laterBio - complete this section with some bio informationMy Hobbies - leave blank for laterMy Work - leave blankMy Browser - leave blankContact Info - leave blankLast Update

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

1. appCodeName2. appName3. appVersion4. platform5. userAgent

3. Insert a script within the "Last Update" area to write the date when the document waslast 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 easilyaccess 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 yearsweb programming experience. He specializes in custom Drupal Module development, Drupal theming withCSS, and Drupal programming. Tom is a Portland Drupal Developer, and has taught college courses inPHP, MySQL and Drupal development at The Art Institute of Portland. He is also well-versed inWordpress and other PHP and MySQL applications. If you need any object oriented PHP programming,

8/14/2019 WDIM262 Assignments

5/11

contact Tom today!

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

8/14/2019 WDIM262 Assignments

6/11

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. (Useyour 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 yearsweb programming experience. He specializes in custom Drupal Module development, Drupal theming withCSS, and Drupal programming. Tom is a Portland Drupal Developer, and has taught college courses inPHP, 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 Tomtoday!

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

8/14/2019 WDIM262 Assignments

7/11

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 95. 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 9in the string".

6. Can you report back the total number of occurances of the user's phrase? You mightlook at the split() & loop code on page 80 - that's a good direction. Or you could trymodifying the code on page 82, with a regular expression. Don't spend more thanan hour or so on this.. feel free to turn it in as far as you get it.

A little windo w m anipulation

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

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

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

8/14/2019 WDIM262 Assignments

8/11

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 brieflyin class at the jquery library, and I challenged you to explore some jquery this week. Takea 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 yearsweb programming experience. He specializes in custom Drupal Module development, Drupal theming withCSS, and Drupal programming. Tom is a Portland Drupal Developer, and has taught college courses inPHP, MySQL and Drupal development at The Art Institute of Portland. He is also well-versed inWordpress and other PHP and MySQL applications. If you need any object oriented PHP programming,contact Tomtoday!

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

8/14/2019 WDIM262 Assignments

9/11

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

javascript homework week 7

1. Create a lightbox image gallery2. Read Chapter 7 in the book - events3. 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 yearsweb programming experience. He specializes in custom Drupal Module development, Drupal theming withCSS, and Drupal programming. Tom is a Portland Drupal Developer, and has taught college courses inPHP, MySQL and Drupal development at The Art Institute of Portland. He is also well-versed inWordpress and other PHP and MySQL applications. If you need any object oriented PHP programming,contact Tomtoday!

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

8/14/2019 WDIM262 Assignments

10/11

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 theeasing plugins that are out there. Last week we experimented with doing some animationin 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 pluginYahoo Easing animation utility

So dive into one of these, whichever you prefer, and see what you can come up with in acouple 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 yearsweb programming experience. He specializes in custom Drupal Module development, Drupal theming withCSS, and Drupal programming. Tom is a Portland Drupal Developer, and has taught college courses inPHP, MySQL and Drupal development at The Art Institute of Portland. He is also well-versed inWordpress and other PHP and MySQL applications. If you need any object oriented PHP programming,contact Tomtoday!

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

8/14/2019 WDIM262 Assignments

11/11

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. Sohere are the requirements:

Fina l w eb s i te pro jec t - Port fo l io Qual i t y

At least 5 pages, including homepageVisual design will countYou select a suitable subject for the site. It can be a personal project, a corporatedesign, 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 issent to the server (you can create a placeholder html page to represent the serverscript).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), colorschemes, 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 yearsweb programming experience. He specializes in custom Drupal Module development, Drupal theming withCSS, and Drupal programming. Tom is a Portland Drupal Developer, and has taught college courses inPHP, MySQL and Drupal development at The Art Institute of Portland. He is also well-versed inWordpress and other PHP and MySQL applications. If you need any object oriented PHP programming,contact Tomtoday!

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