JavaScript for Designers

Beginning JavaScript for Designers
Beginning JavaScript for Designers

Overview

Beginning JavaScript for Designers is an introduction to JavaScript that gets the designer understanding interactivity, and creating interactions with designed elements in the browser very quickly. Where a traditional, abstract approach can sometimes alienate visual learners and those accustomed to working with a canvas, the approach in this session is to build a small foundation with visual examples and analogies, and tie the learning to visual events that happen in the browser (a canvas!), such as changing the style of a div’s background color via the click of a button. Participants will learn some of the basics of “vanilla” JavaScript, and we will examine that syntax in relation to jQuery, the most popular JavaScript framework used by web designers. The session is designed to demystify the scripting language, so that a web designer can feel more confident in learning it, and not be intimidated or overwhelmed by the large code blocks and intimidating syntax. Work in progress slides can be seen here:

http://slides.com/afo/deck-4

Target Audience

Participants can have minimal skill level in JavaScript. The session does a lot of hand holding and focuses on comprehension of extremely basic programming fundamentals. We are really working from the ground up starting with the basics of variables, objects, the DOM, events, and functions

The model I have created is based on my own experience as a designer attempting to learn JavaScript. While HTML and CSS are somewhat easy to master, JavaScript takes a whole different way of thinking, and I had to come up with strategies and techniques that suited my right-brained approach to things. And I wanted a visual reward very early on! I know that many designers experience the same challenge, so I enjoy helping others make this leap.

Objectives

Overcome your fear of programming. Designers may shy away from web development assuming coding is not their thing. The tools provided will show them that they too can learn the basis of interactivity on the web with JavaScript.

  • Learn programming fundamentals with JavaScript as the tool.
  • Learn how interactivity is created in the browser with JavaScript.
  • Create a button that changes the background color of a box on a web page!