Information Technology Applications 341
Client-Side Scripting and Design

Course Introduction

Overview

JavaScript, a computer language developed by Netscape Communications in collaboration with Sun Microsystems, allows you to create powerful applications such as form validation, event-based activities such as that change as you move your mouse over them (mouseover images and flyout menus), and dynamic HTML, better known as DHTML. In this course you will learn fundamental skills in enhancing Web pages using JavaScript.

This course is intended for those with little or no previous programming experience; it is designed to provide basic skills in general programming techniques, using the JavaScript language as a basis. In addition to giving you the skills to use JavaScript on your own Web pages, the course builds on the HTML skills you learned in Markup Languages for the World Wide Web; you will also acquire a programming foundation that is essential for working with Active Server Pages during the last two courses of this series.

Course Prerequisites

This course is part of the four-course Web Technology Essentials program. To enroll you must either successfully complete Markup Languages for the World Wide Web, the first course in this sequence; or demonstrate proficiency with

• file and directory structures,
• naming files,
• creating files with text editors, and
• viewing files using a Web browser.

You should also be able to use a Web browser to download files from the Web and save them to specific directories.

In this course you will likely extend your existing knowledge of HTML tags and attributes, but there will be little time to review basic HTML concepts. You are expected to be able to

• format text with HTML tags,
• work with images, and
• create lists, tables, and basic forms.

Putting This Course in Context

Before continuing further, we need to discuss this course as it relates to the next two courses in the Web Technology Essentials program.

The broad concept of "Web technology" covers a lot of ground. In a technological market which is rapidly re-inventing itself practically every minute, you may look at a wall of books in the Web-programming section in a bookstore and wonder "Where do I even start?". Many times newcomers ask "Which programming language is the best?" or "Which language shall I learn?" Unfortunately, there is no easy answer to this question.

First of all, by having already learned HTML you have clearly begun at the most logical starting point. No matter how it gets there, any content that ultimately ends up in a client browser (Internet Explorer, Netscape, Opera, Mozilla, or a host of others) is displayed using HTML. However, it is important to realize that HTML is not a programming language per se, rather it is a markup language. It is used to take content and mark it up to look a specific way. What HTML lacks, and which formal programming languages provide, is logic. Programming languages are tools we may use to instruct machines to operate with a certain level of logical "thought." We can construct statements of the form "if this is true, do that", or "repeat this process until. . . " You may have realized already that HTML is fairly limited in this regard; elements can either be placed on a page or not, but little is available in the way of logic or decision-making resources. HTML pages by themselves are static. The pages you have created so far look the same every time you view them. In order to add interactivity, or harness the advanced power of database-driven content (which describes most useful pages on the Web today), we need to introduce logic via some programming language or another.

These programming languages may run either on the client (the computer viewing the page), or the server (the computer providing the page). There are literally dozens and dozens of programming languages currently being used to create dynamic interactive Web pages. The selection depends upon what hardware technologies are being used, what software platforms are in place, and management decisions as to the computing environment that must be supported and maintained. (We will discuss the client-server model more in Lesson One.)

With so many different languages out there in the world of Web Technology, it is unreasonable to expect that any one person could possibly learn them all inside and out. As you become more deeply involved with developing for the Web, circumstances, personal preferences, job requirements, and the current technological landscape will all determine which languages you find yourself using, and to what extent. However, as different as all these languages are, they have many common elements. In fact, for a majority of the Web development languages currently on the market, it is safe to say that they are more alike than different.

If you intend to become a programmer who does nothing but program for a living, working on the development team of some Web publishing organization, then you will indeed become an expert in one or more languages. Because the real power behind complex Web applications ultimately resides on the server side, chances are this language of choice will be a server-side technology such as Active Server Pages, Java Server Pages, Perl, ColdFusion, or PHP (to name only a few!)

With JavaScript (and this course in general), we are leaving the server-side technologies for future examination, and instead concentrating on programming that takes place within the client. The most widely-used language for this is JavaScript, as it is included with every major browser on the market today. This gives us the advantage of allowing you to easily build on your current knowledge of HTML by extending it with client-side scripting and logic. While working in familiar territory (that is, the IE browser and text and image files), we can explore many of the building blocks that make up just about every other programming language. By concentrating on the concepts behind the language, and attempting to mentally separate the concepts from the specific syntax, you will begin to build an understanding of how programming languages work in general. When you move beyond this course and begin programming directly on the Web server itself, you will have a good foundation to begin learning whatever other languages may come your way.

There is another element to the concept of client-side design that informs site usability and aesthetics. While these elements are certainly of utmost importance to a successful Web site, this is a curriculum for technology essentials, as the title implies. We will be concentrating on the nuts-and-bolts aspects of making page elements work, preparing you for more complex endeavors which are around the corner. Aesthetic considerations are better partnered with the study of markup languages, as this is where aesthetic design takes place. While aesthetic issues will be somewhat explored, don't expect this course to deal with questions such as "which colors are best for navigation?" or "should the navigation be placed at the top or the bottom of the page?" There are many excellent books on these subjects, and you are encouraged to explore them. For a great introduction to Web interface aesthetic Dos and Don'ts, check out the Webby Awards Web site (http://www.webbyawards.com) and the infamous site "Web Pages That Suck" (http://webpagesthatsuck.com).

Course Goals and Objectives

After successfully completing this course, you will be able to:

• identify and explain the differences between client-side and server-side processing, as well as the concept of dynamic HTML;
• describe the issues surrounding JavaScript as it relates to different browser platforms and cross-browser incompatibilities;
• embed pre-written Javascripts from other sources into existing Web pages;
• use basic programming concepts such as variables, arrays, basic input and output, computations, and the concatenation of string data;
• program simple Javascripts from scratch, using basic programming concepts as well as logical constructions such as if-then-else statements, for-loops, while-loops, functions, and performing data comparisons with Boolean conditionals;
• use object-oriented language components to manipulate the browser window and document object from within Javascripts;
• create dynamically-generated DHTML on Web pages;
• create event-driven JavaScript functions on Web pages, including rollover images, buttons-as-hyperlinks, dynamic manipulation of form fields, and custom form validation handlers;
• locate and implement more complicated pre-written ("canned") JavaScript applications.

About the Online Environment

Your online course offers several advantages to the traditional classroom, including the comprehensive Online Student Handbook, the ability to communicate electronically with students and with your instructor, and links to a rich array of online resources.

Online Student Handbook

This handbook answers questions about your online learning course, such as how to purchase your text, schedule an exam, obtain a transcript, and get technical help if you need it. The handbook also provides additional resources, such as how to order books or journals from the library and how to study for an online course.

Communication with Your Instructor and Student Peers

• Online Discussion Forums, designed by the University of Washington award winning Catalyst team, allow you to communicate with other currently enrolled students and with your instructor. We encourage you to use the discussion forum to exchange ideas, resources, and comments about your course work with other students in this course. This unstructured forum is monitored by your instructor.
• You can use e-mail to ask me a question or preferably post your question on the discussion forum. I will reply to all discussion forum questions on the forum, and to e-mail questions via e-mail.

Online Resources

As an online student, you have access to a wealth of Web resources compiled to provide fast, easy access to information that supports your online learning experience. In addition to course-specific links found within these course materials, our Online Resources link you to sites with help for writing and research, study skills, language learning, and library reference materials. All links have been assessed for credibility and reliability, and they are regularly monitored to ensure their usability .

Required Resources

The Textbook

The required text is:

• Negrino and Smith. JavaScript for the World Wide Web, 5th Edition. Peachpit Press, 2004. ISBN 0-321-19439-X

This book provides an excellent introduction to basic JavaScript techniques as well as introductory programming constructions. Designed to help initiate the new or beginning programmer, the text is replete with many excellent code examples which will be very illustrative for you as a distance learning student.

Also instrumental to the course is the online companion site for the text, which is at http://javascriptworld.com. This site contains all of the book's examples in full living color, available for you to witness, download, modify, and use as a basis for further exploration and learning.

Other Web Sites

In addition to the course text, the lessons in these online course materials will occasionally direct you to other Web sites where you can view examples of JavaScript implementations, download code, or read material above and beyond this course's core competencies, if you are interested in pursuing JavaScript further.

Browser Requirements

This course is intended to teach basic JavaScript, and purposefully avoids more complex constructions that are browser-specific. The course examples will technically work with Netscape, versions 4 and above, and Internet Explorer, versions 4 and above; but it will be difficult for your instructor to help you with more complicated code if it is to be run in a browser other than Internet Explorer, version 5 or above, or Internet Explorer for the Macintosh.

Other Software Requirements

You will need some sort of text editor to write your code. Notepad (included with all versions of Windows) works just fine. If you want to use a more robust development tool, such as Macromedia Homesite or Microsoft Visual Studio, you are welcome to do so. Remember, though, that your instructor can't help you with issues related to specific code editors.

You will need an e-mail account in order to submit your work. See your student handbook for information about obtaining a University of Washington account if you don't already have an e-mail account.

Course Structure

This course includes ten lessons. Each takes approximately one week; but because each learner grasps material at a different rate, the assignments may take you more or less time to complete. There is no final project and no final exam; all you need to do is complete all weekly assignments successfully. 

Each lesson builds on the previous ones, so you must fully grasp each before continuing to the next one. The time to ask the instructor for help is as soon as you realize you're lost!

The lessons cover the following topics:

• Lesson One: The Context of Scripting
  What scripting is; the client and server relationship; JavaScript and accessibility; introduction to Object Oriented Programming
• Lesson Two: Getting Familiar With JavaScript Syntax
  Creating simple JavaScripts; debugging; basic input and output; browser detection; displaying dynamic content on a Web page
• Lesson Three: Programming: Expressions, Operations, and Logic
  Expressions and conditions; mathematical operations and comparisons; programming logic; logical constructions
• Lesson Four: Functions, Events, and Objects
  Defining and using functions; defining and implementing event handlers; passing values to and from functions; using the Math, Date, and String objects
• Lesson Five: Fun With Rollover Images
  Setting up rollover images in HTML code; selecting images for rollovers; preloading images; triggering rollovers with the onMouseover event
• Lesson Six: Controlling Frames and Windows
  Creating HTML framesets; the pros and cons of using frames; new technologies that may replace frames; creating and controlling pop-up windows
• Lesson Seven: Validating Form Submissions
  Client-side form validation; setting up HTML forms for client-side validation; dot-notation for form elements; focusing form fields; using scripts to validate form entries prior to submission.
• Lesson Eight: Cascading Style Sheets
  The relationship between HTML, CSS, and scripting; the three types of stylesheets; styling HTML documents with CSS
• Lesson Nine: Implementing Third-Party JavaScripts
  Using the JavaScript cookbook sites; modifying existing scripts to customize them for your site; modularizing scripts; using external script files; code ethics for borrowed scripts
• Lesson Ten: Breaking Down Complex Scripts
  Identifying distinct elements of the JavaScript language; programming grammar and syntax; examining code punctuation to determine function; the "big picture" view of coding and scripting

I encourage you to expand upon the course exercises. Experiment with your own additions, change things around, and above all have fun with it! I do recommend, however, that you complete and debug the exercises as assigned, before you jazz them up with your own inventions.

Also, please realize that the instructor can help you with extracurricular programming experiments only as much as is practical, given the complexity of your endeavor and necessary time constraints.

Submitting Assignments

Assignments should be placed on the Web on a server of your choosing. (Any server will do!). Most students use the Web publishing account that comes with their UW student computing access, but you may certainly use the server  provided by your ISP, if you are more comfortable with that. You may organize and upload the assignments any way you wish, but the bottom line is that you must supply the instructor with a URL that leads to your completed assignment.

Please try to debug your own programs before consulting with the instructor; this is part of the learning process. The instructor will usually only give general hints as to where your program is breaking; you'll learn more in the long run by tracking down the problems yourself.

Grading

The instructor will return comments on all assignments by e-mail, either with a passing grade or with a request for revisions. 

In order to give you an idea of how successful you are on any portion of the course, you will receive scores based on matching your work to one of the levels shown in the following table.

Score	Interpretive Statement
4.0 (SC)	Excellent and exceptional work. Work at this level is unusually thorough, well reasoned, sophisticated, and well written. You approach the work with insight, creativity, and professional quality.
3.5 (SC)	Strong work. Work at this level shows signs of creativity, is thorough and well reasoned, and demonstrates clear recognition and good understanding of the issues.
3.0 (SC)	Competent work. Work at this level is adequate even though some weaknesses are evident. Shows understanding of the issues and problems. Shows neither unusual strengths nor exceptional weaknesses.
2.0 (USC)	Substandard performance. Understanding of major issues is incomplete. Revision is needed.
1.0 (USC)	Lowest assessment. Indicates that while learning may have occurred, the minimum requirements for the course were not met. Work is not adequately developed and/or has flaws or omissions, and needs major revision.

Because this is a noncredit course, the final grade for the course is designated as either Successful Completion (SC) or Unsuccessful Completion (USC); successful completion means a score of 3 or better on all assignments within the timeframe allowed. Assessments of 1, or 2 indicate your assignments are not complete, so you must resubmit qualifying revisions in order to successfully complete the course.

---

©2007, University of Washington. All rights reserved.
No part of this publication may be reproduced in any form or by any means without permission in writing from the publisher.