JavaScript for Designers | Sessions College

JavaScript for Designers

Give your sites interactivity and added functionality with JavaScript and jQuery

Learn how to program using JavaScript and jQuery with techniques geared to visually oriented designers. In this course, you'll learn the fundamentals of JavaScript programming, focusing on how you can add interactivity and responsiveness to your Web designs without too much technical jargon or coding mumbo jumbo. Working with a JavaScript guru, you'll learn coding and programming concepts through fun, step-by-step exercises and apply what you've learned to creative, professionally oriented projects.

Class projects include a range of interactive projects: a trivia quiz, a user adaptive form, a single-page site, a Web application, a responsive site, and portfolio or personal site enhanced by plugins. To equip you for today's mobile Web, the focus will be utilizing the frameworks jQuery and Bootstrap. By the end of the class, you'll proudly call yourself a designer/developer!



Course Instructor(s):

Course content developed by David McFarland.
back to top

Requirements:

To take this course you'll need:

  • 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 equivalent digital imaging program.
back to top

Prerequisites:

The following courses can help you meet the above requirements:

back to top

Course Objectives:

Students learn how to:

  • Set up a basic JavaScript skeleton within an HTML document.
  • Write fundamental JavaScript expressions and statements.
  • Define and use variables, operators, and functions and use variable types correctly.
  • Construct and understand conditional statements.
  • Interpret and utilize the Document Object Model (DOM) of HTML pages.
  • Use CSS selectors to reference elements of the DOM.
  • Set up a basic jQuery skeleton within an HTML document.
  • Use jQuery and CSS selectors to alter the appearance and behavior of an HTML document.
  • Use jQuery to get information about the current state of DOM elements.
  • Use jQuery's insertion methods for manipulating the DOM.
  • Load external content into a single HTML page with jQuery.
  • Utilize asynchronous code and hand off control from one function to another.
  • Work with arrays, manipulating them and sorting the order of elements.
  • Utilize for-loops to control program flow.
  • Implement interactive effects and event methods.
  • Work with the object data type.
  • Explain the difference between a framework and a library.
  • Set up and use the Bootstrap framework in HTML documents.
  • Set up and use the Bootstrap framework in HTML documents.
  • Edit and customize Bootstrap's grid, contextual colors, and other responsive styles.
  • Create full-featured interfaces using Bootstrapped HTML elements.
  • Explain how Bootstrap and jQuery interact.
  • Debug programs using professional developer tools
  • Apply a lightbox model plugin, a slideshow model plugin, and a parallax scrolling plugin to an HTML page.
back to top

Course Outline

LESSON 1 A Morning Jolt of JavaScript

It's time to wake up, smell the coffee, and get to grips with JavaScript. Lesson One is a fun-filled crash course in the Web's #1 interactive programming language. Working with your instructor, you'll set up a JavaScript skeleton in an HTML document and use it to write basic programs. You'll unleash your inner programmer by writing basic JavaScript expressions and statements and learning how to define variables, operators, and functions for your programs. You'll discover how to store different kinds of values in your variables and use conditional statements for flow control in your programming. By the end of the first exercise, you'll have built an interactive quiz that keeps score and gives feedback. Now that's interactive!

LESSON 2 Dominating the DOM with jQuery

With JavaScript basics under your belt, world DOMination can't be far off. And in Lesson Two, you'll begin your exploration of jQuery, the most popular, ubiquitous JavaScript toolkit on the Web. Just what makes jQuery so great? As you'll find out, using CSS selectors, JavaScript (and jQuery) enable you to access and control elements throughout a Web site, creating interactivity where you decide to use it. Working with your instructor, you'll set up a jQuery skeleton in an HTML document and learn how to hide, show, and change the appearance of Web content in response to user input. You'll learn how to get, store, and return information in response to multiple user actions. By the end of the second exercise, you'll have created a stylish form that validates user input and provides appropriate feedback, just like the Web forms you know and love.

LESSON 3 Fully Loaded with jQuery

Using jQuery, interactivity can take many forms: User input can allow us to insert and remove content, move content around, generate new content, or even load content from external files. In Lesson Three, we explore how jQuery's insertion methods can help us manipulate content (text, images, or media) throughout a Web site. We explore how to get and set content and program safely within important browser security protections. We look at how to write code that runs asynchronously to accomplish a series of tasks, and how to use callback functions to detect program completion. We look at effect methods that can make interactivity clearer or more exciting, and how to use event methods to program different stages in user interaction. By the end of the third lesson, you'll have used jQuery to create a single page site that loads external content--the feat that made Facebook famous.

LESSON 4 Collect Your Thoughts with Arrays

Many useful Web interfaces are driven by a database. In Lesson Four, you'll explore how to efficiently and elegantly select data, run programs with it, and design it for your Web pages. You'll learn how to work with the array object type and use for-loops to iterate code and execute your programs. You'll learn how to avoid the trap of the "infinite loop" and break out of for-loops. You'll learn how to make the data more usable for Web visitors with array methods. In the assignment, you'll build a Web application: a professional-looking, sortable contact management page.

LESSON 5 Responding to Responsive Needs

Mobile devices have changed the game. It's no longer enough to make a site or an app that looks good on a desktop computer screen. We need to make sure our user interfaces thrive in the mobile market. In Lesson Five, you'll explore how to apply everything you've learned about jQuery to the increasingly popular responsive framework Bootstrap. Working with your instructor, you'll breeze through your very own Bootstrap bootcamp. You'll learn how to set up a Bootstrap framework in an HTML document and control important Web page elements: text content, images, tables, panels, and accordions, buttons, dropdowns, and even navigation elements like navigation bars, tabs, and pills. Armed with this knowledge, you'll design a jQuery or JavaScript enabled responsive client site in the assignment.

LESSON 6 Plugging in to jQuery

Learning JavaScript and jQuery opens your horizons to a whole world of plugins that you can use to extend the functionality of your Web sites. As a Web developer, you need to understand how to research, download, and integrate these add-ons for your projects. Lesson Six walks you through the process of powering up your pages with jQuery plugins. You'll learn how to implement the popular lightgallery and Cycle 2 plugins in your projects and even add parallax scrolling effects using a custom plugin created by the course developer! A special focus in the lesson is how to use debugging tools such as Firebug to systematically identify and eliminate errors in your code. In the final project, you will apply all you have learned in the course to a personal or portfolio project.

back to top
 
javascript lightbox

Request Information

  1. First Name
  2. Last Name
  3. Email Address
  4. Phone Number

Asterisk(*) indicates that information must be entered.

An admissions advisor will contact you to discuss program options. We will never share your information and you may choose to opt out at any time. Privacy Policy.

Sorry, all of our Student Service representatives are offline.
How can we help?

  1. First Name
  2. Last Name
  3. Email Address

Asterisk(*) indicates that information must be entered.