JavaScript for Designers
Give your sites interactivity and added functionality with JavaScript and jQuery
JavaScript is the driving force behind user-friendly interfaces interactivity on the Web. You can improve user interfaces, enhance usability, and just make Web pages more fun with JavaScript.
In this six-lesson course, you'll learn the basics of JavaScript programming with techniques aimed at visually oriented designers. To do it, the essentials of JavaScript are covered along with designer-friendly jQuery to make writing JavaScript easier and way more fun. You'll begin with the basics of setup and syntax to get your footing, then build up to exciting and complex dynamic features.
This engaging, hands-on, and highly interactive course puts you on the fast track to enhancing your Web designs. You'll learn the JavaScript and jQuery you need to add interactive elements such as dynamic image galleries, exciting rollover effects, more usable Web forms, and enhanced navigation to any Web page.
Tuition: $900 US
Course Instructor(s):
Requirements:
- Computer with Internet connection (56 Kbps modem or faster).
- An account with a Web hosting service (free services are available).
- HTML and CSS course or equivalent experience in hand coding HTML and CSS and publishing files to the Web.
- Adobe Photoshop or Fireworks, or equivalent digital imaging program.
Prerequisites:
Course Objectives:
- Identify the capabilities of JavaScript and jQuery and their role in Web design and the document object model.
- Add internal and external JavaScript code to a Web page and set up a page for use with jQuery.
- Correctly write and troubleshoot JavaScript statements, commands, variables, data, comments, conditional statements, and functions.
- Request and present user input using JavaScript.
- Select and modify page elements using basic jQuery, changing the appearance or visibility of content.
- Respond to user events using JavaScript and jQuery, creating interactivity.
- Write "if" conditional statements and test for multiple conditions ("else if"), making use of basic operators and booleans.
- Call functions, write arguments, and return values to create complex interactivity.
- Create special visual effects using events and jQuery functions.
- Use specialized jQuery selections and selection removal techniques to improve page navigation.
- Create large link areas using a combination of HTML, CSS, and JavaScript.
- Identify the core components of Ajax and the role of Ajax in an interactive Web page.
- Add Ajax-based content loading improvements to a page using a jQuery function.
- Implement and customize jQuery plugins to create a lightbox image gallery and a live Twitter stream.
Course Outline
LESSON 1 JavaScript Basics
This course begins with an overview of JavaScript: what it can do for your page designs, how it compares with other technologies, and how to add internal and external JavaScript to a Web page. You will be introduced to the building blocks of JavaScript code including basic statement syntax, commands, variables, and data. With hands-on walkthroughs, you'll learn to gather information from a user and display it on a Web page, and you'll learn a simple method for debugging your scripts. In the first exercise, you'll create a page that collects and displays visitor input.
LESSON 2 Interacting with a Web Page
Lesson Two discusses the core concepts for adding interactivity to a Web site: the document object model and events. You will learn these through use of jQuery—the most popular tool for adding complex JavaScript functionality with minimal programming. With hands-on examples, you'll learn to incorporate jQuery in a Web page and use it to create useful visual indicators. You'll also explore the types of user events that make a page interactive and how to hide and show page elements based on user events. Exercise Two has you creating an animated user signup form.
LESSON 3 Adding Logic to Your Programs
With an overview of interactivity in hand, you're ready to delve deeper into program logic, using conditional statements (classic "if" statements and more) to create meaningful page events. You will walk through the process of creating an interactive quiz with JavaScript and learn to create actions with multiple outcomes and change the page display with jQuery. The exercise will test your skill with conditional statements and jQuery to create an interactive "terms and conditions" form and error message.
LESSON 4 Functions and jQuery Effects
Ready to step up your pages with some "wow factor"? This lesson is all about adding complexity and effects to your JavaScript repertoire, starting with a hands-on look at how to write time-saving functions. You'll learn to use functions and some jQuery to create some slick fading, sliding, and hide/show effects. You'll improve the visuals and the usability of a form with these techniques in Exercise Four.
LESSON 5 Navigation and Image Galleries
Lesson Five introduces techniques that are a designers' dream: improving site navigation and creating fancy image galleries. These techniques will bring you deeper into the options afforded by jQuery including making specialized selections, removing selections, and using jQuery plugins like FancyBox, a lightbox image gallery tool. In Exercise Five, you'll create a fully customized lightbox gallery with animated zoom and other features for a top-notch portfolio.
LESSON 6 Introducing Ajax
When JavaScript, the Web browser, and the Web server get together, some real interactive magic (called Ajax) happens. Ajax adds another layer of functionality to your pages, and you'll learn how to incorporate some cool Ajax effects using jQuery. You'll load new content onto a page without the user having to reload and you'll build a page with a live, constantly refreshing Twitter stream. Your final project will combine user input, a jQuery plugin, and Twitter (no account required) to create a customized and super-interactive page.
Contact us | 800-258-4115 