Course Description

In this class you will learn more in depth features of the JavaScript language to create some helpful interactive scripts that will work with your existing web pages. We will learn about the three layers of web development, how unobtrusive web scripting works, how to create reusable objects, understand how to use properties and methods of the DOM, debugging scripts with Firebug, cool features of JavaScript libraries like jQuery and a brief overview of Ajax. This is a 6 week, self-paced, online course. If you need additional help understanding the material presented, you can communicate with the instructor and fellow classmates. The instructor will monitor and track your progress throughout the class. LVS Online offers many wonderful learning tools to help you get the most out of your online course, including an online portfolio service that manages all your course registrations, certificate of completion option, a class discussion board to interact with your instructor and fellow classmates, free hosting account, and a student upload area. LVS is a Corel Training Partner. LVS students may purchase Corel products at a significant savings. Follow this link for details. LVS students are eligible to receive software and hardware at a discount. Follow this link for details. Students are also eligible take advantage of special offers made available specifically for LVS by famous software developers such as Andromeda, AV Bros, Extensis, Harry Heim, namesuppressed, Nik Multimedia, and Ulead. Details are provided in the classinfo link found in the confirmation of registration. Show off your LVS Online spirit with an item from the LVS Store If you would like to receive more information regarding this course, click on the "Contact Us" link in the Information section and we'll try to answer any of your questions within the day.

Course Requirements

There is no specific tool to develop in JavaScript so you can use any free text or web editor like Notepad++ or HTML-Kit or Komodo Edit or commercial products like Adobe Dreamweaver or Microsoft Web Expression. Homework must be reviewed by the instructor in order to earn a certificate. Students have the option of using the hosting made available for LVS students. Details are provided in the classroom. If you prefer to use your own web space, you must know how to upload your files to a server. Free tutorials are available: Basic HTML Page WS_FTP SmartFTP Winzip Tutorial Here Windows Compression Students must have a working knowledge of their operating system, especially: How to create and name new folders How to locate files How to open and save files Here are a few free tutorials available at LVS which may be helpful to you: PC Users: Free Windows Class Directory Structure Tutorial Mac Users: Basic Computer File Systems Tutorial (Mac) Zip files may be necessary to complete the exercises provided each week. WinZip, PKZip, Windows Compression or similar program is required to unzip these files. Winzip Tutorial Here Windows Compression All lessons are available in PDF format. Adobe Acrobat Reader is required to view/print the lessons. Plan to devote 3 - 4 hours per week on the lesson and assignment.

Course Prerequisites

This is an intermediate level class. I will assume you have either taken the JavaScript Modification class, which teaches students how to modify and understand JavaScript, or you have a good understanding of JavaScript. You also should have a good understanding of web design with HTML and CSS. NOTE: This class is an "intermediate" level class - I will be going straight into concepts without reviewing basic syntax of the language.

Course Syllabus

Lesson 1 What is unobtrusive scripting? The Three Layers of a Web Page structure presentation behavior Lesson 2 The DOM Lesson 3 Creating a Custom JavaScript Object Lesson 4 Debugging with Firebug Lesson 5 JavaScript Libraries: jQuery Lesson 6 Ajax basics

Course Excerpt

LESSON 1 Unobtrusive Scripting In 2002, Stuart Langridge coined the term "unobtrusive scripting" which represented the first serious attempt to embed JavaScript in the new theory of CSS-based, standards-compliant web sites. An unobtrusive script should have all of the following traits: It should be usable It should be accessible (i.e. if JavaScript doesn't work, the page should remain readable and understandable) It should be easy to implement; typically a web developer only has to include the script itself and some JavaScript hooks in the document, and the script works. (We'll discuss JavaScript hooks a little later) It should be separate; it resides in its own .js file instead of being scattered though the HTML. The Three Layers A web page consists of three layers: HTML structure CSS Presentation JavaScript behavior The HTML structure layer is the most basic part of the page. The HTML tags form the structure of the page and give meaning to its content. For instance, if a certain text is marked up with an , it's a header and should be treated as such. Browsers are expected to distinguish this header from the surrounding normal text, for example, by displaying it in bold and in a larger font. Once you've created structurally correct HTML, you can be reasonably certain that most browsers will recognize it as a header. The purpose of the CSS presentation layer is to define how your HTML should be presented. CSS allows you to specify colors, fonts, and other typographical elements, as well as the general layout of the page. The JavaScript behavior layer adds interactivity to an HTML/CSS page. As soon as you want something to happen when the user mouse's over an HTML element, you need JavaScript to implement the effect. Every web page needs and HTML structure layer --- without HTML, there is no web page. However, the CSS and JavaScript layers are optional. Old, obscure, or unusual browsers may not fully support CSS and/or JavaScript, in which case one or both layers may go missing --- the presentation or behavior instructions are never executed. Separation of Concerns Another point raised by the division of client-side code into three layers is the separation of concerns. In general, it's best to manage each of the three layers separately. At the most basic level, this is done by making sure of the following: The HTML is structured, not too complex and makes sense without CSS and JavaScript The CSS presentation layer and the JavaScript layer reside in separate .css and .js files. Separating concerns makes it easy maintenance. When you separate CSS and JavaScript files, it's easy to link these files from all pages in your site. CSS Modification JavaScript allows you to modify CSS, for example, you can make a link red in CSS, and later overrule this style with JavaScript and make the link green. This can be quite useful since style changes allow you to pull the user's eyes to the HTML element you need to focus on --- an error message, for instance. Continued... Please note: Lessons provide step-by-step instructions with detailed screen captures.

Course Goals

After you have finished this course you will have a better understanding of how to write cleaner and easier to maintain JavaScript code. You will be more familiar with using the DOM to manipulate elements on your web page to create more intereractive and snazy looking web pages as well as understand better how to use JavaScript libraries.

Course Reviews

New Class September 2008