JavaScript for

Designers

Goals for our hour?

  • Discuss challenges of learning JavaScript as a visual person
  • Three Step Process to overcoming those challenges
  1. Decide to create visual elements to interact with
  2. Understand concepts working together
  3. Examine statements and syntax more closely

A little about me

  • 1990's Web Designer
  • 2000's Designer for Kid's tv
  • 2010's Multimedia Professor

Art & Code

  • Can we use right and left brain thinking?
  • HTML & CSS (sure no prob)
  • JavaScript (it kinda hurts)
  • But, it's possible

The Challenges

JavaScript

Why you hurt me so bad?

  • Artistic gestalt - big picture first
  • Work guided by emotion, logic not so much
  • Sculptors, not bricklayers
  • Statements lay one.brick.at.a.time;

Statements and syntax

Stop us in our tracks

  • They're intimidating
  • Seem like a foreign language
  • One we can't speak, can't learn
  • Not to mention, everything's really f'in small!
  • So why start small?
  • Where should we start to learn JavaScript?

We're artists!

  • We can start wherever we want
  • Start with what grabs us the most
  • A web page is just another canvas
  • So why not start there?

Well, there are some reasons not to start there....

  • Steps that build up to that are important
  • Lots of base concepts don't even need the web page
  • Jumping into the pool to learn to swim

But what are the Benefits?

  • An opportunity to grasp the big picture quickly
  • Visual results are more meaningful to us
  • May just keep you learning
  • So what's the approach?

Three Step Process to starting out in the web page

  1. Decide to create something visual to interact with

  2. Understand concepts working together

  3. then...Examine statements more closely

     

1. Create something visual

Always start with what you want to make. Can be anything...some ideas

  • Set the color of a page when it loads
  • Change an image when clicked
  • Change a class when a button is submitted

2. Understand concepts working together

  • In our examples we'll pull out objects and the DOM, variables, events and functions
  • How are they working together to create a visible functionality?
  • Note: follow slides  DOWN  here

Big picture elements

  • Objects
  • Properties
  • Methods
  • The DOM

Objects

  • Objects are JavaScript's superhero containers
  • They have both methods and properties.
  • For example, they may have a color (property) and the ability to walk or run (method).
  • We'll use the document object today and its method getElementById

Object syntax

var jshero = {
   color: green,
   run :  function(){code to make
   character run;
   }
};
        

Document Object Model

  • The DOM is just a map or blueprint of the webpage.
  • In order to change or update via user interaction, JavaScript has to understand what the starting elements are and their location.
  • Then it can update via the instructions based on what occurred.
  • The DOM has then changed.

DOM Structure

Before we move on

  • What are these in action?

Say we have this on a page

We can change it with JS, but what is happening?

Start with the window

Let's start with window object

Move onto document object

getElementById method

style object

backgroundColor property

Now for some smaller-scale topics

Variables

  • Variables store information or data for you.
  • Pretty cool when you want to store info for later use.
  • Or if you want to create something of a short "nickname" for a path to information.
  • We'll create variables today that name and store info about the elements on our page. A box and a button.

Variable syntax

var theBox;  //just declared
var theBox = “string”;  //string
var theBox = 5;  //number
var theBox = true;  //boolean
var myButton = document.getElementById("button");

Events

  • Events are at the heart of interactivity on the web.
  • User interaction, which can be many types of events,  is listened for.
  • When it is heard, we can program a response.
  • This response can very often be a function.
  • We'll listen for a click event today. When its heard the color will update in our box.

Event syntax

Initialized button

var myButton = document.getElementById("button");

 

Adding an event to the button initialized above

myButton.addEventListener('click' , changeColor,
    false);

Functions

  • Functions are basically lists of things you'd like to happen.
  • A grocery list might have a statement to buy apples. Then a statement to buy oranges.
  • The function can provide different options.
  • We'll run a function today that will change the background color of a box from black to red.

Function syntax

function colorChange(){
  theBox.style.backgroundColor= "red";
    }

We'll see these in action soon....

3. Look at smaller details

Once you

     a. know what you want to happen, and

     b. know the parts you need

How do you do particular things?

  • Look more closely at statements, functions, etc.
  • Once you get very good you start to think about code efficiency and DRY concept.

Let's check out some JavaScript

  • work in jsfiddle.net code playground
  • follow 3 step process
  • create a few simple visual events

1. Create something visual. What do we want to make happen in the browser?

  • Adding on to earlier example
  • User now has control
  • Click the button to change box color
  • That's it

2. What are the concepts working together

Objects. DOM. Variables. Events. Functions.
These concepts often come together in the three steps below.

1. Declare what's there

2. Say the way

3. Run the fun

 

Declare what's there

  • Using id's of html elements to create variables
  • Using the DOM structure to get to those elements
  • Using the document Object's method getElementById to identify

Say the way...

  • Attaching an event listener to the button
  • A click will be listened for
  • When clicked, function will run

Event Listener resources

More info on Event Listeners

http://www.w3schools.com/js/js_htmldom_eventlistener.asp 

 

List of DOM Events - Much more than just mouse events

http://www.w3schools.com/jsref/dom_obj_event.asp

 

Run the fun!

  • We'll run a function that has clear statements that change the color black to red
  • changeColor function assigns a new style to the box with one statement.

Other selectors to access

  • Id only gets one at a time
  • Class gets many
    • More efficient code 
    • change overall class
    • not just one being applied
  • Others
    • querySelectorAll - conditional
    • Tag - whatever tag you'd like

Style property resources

More info on changing css styles with JavaScript

http://www.w3schools.com/js/js_htmldom_css.asp

 

Style object reference

http://www.w3schools.com/jsref/dom_obj_style.asp

3. Look at smaller details

Toggle Variation

  • Just change statements in the function
  • Add classes for different colors
  • Access classList property
  • See example below
  • http://jsfiddle.net/alexserina/av69asrx/
  • note: classList.toggle is not supported
    in all browsers without a shim.

Variation

Simple background color change on load

Thank You!

JavaScript for Designers 1-hr.

By afo

JavaScript for Designers 1-hr.

Version 1

  • 688
Loading comments...

More from afo