Introduction to JavaScript & jQuery Workshop

Want to get up to speed on JavaScript, one of the most popular languages on the web? This workshop will introduce you to some of the basics of programming and then move into JavaScript fundamentals and how they apply to jQuery. Once the foundation is laid, we'll begin building a client-side contacts manager app that will expose best practices and why they exist. Time willing, we'll look at bringing even better structure to the contacts app by converting it to Backbone.js. This workshop will arm you with the knowledge to help debug your existing JavaScript code and how to write modular and performant JavaScript in the future.

Vocabulary

Assignment

A reference

Variables

Store assignment

Functions

Execute code on demand

Arguments

Allow function reuse

Objects

Have properties/attributes

Invocation

Call or run a defined function

Methods

Function properties of an object

Operators

assign, do math, increment/decrement

PascalCase

capitalize the first character of each new phrase
Used for constructors and first class objects

camelCase

capitalize the first character of each new phrase except the first phrase

Callback

function to execute later

Syntax Legend

Parentheses ()

invoke functions and surround arguments

Semicolon ;

end a statement or expression

Indentation

indicates hierarchy and nested statements

Newlines

Separate statements

Double Newlines

Separate unrelated blocks of code

Period .

Delimits object heirarchy

Exercises

Baseline

Write a function that splits up a full name and returns a random number between 1-10 between the first and last name.

exercise: http://jsfiddle.net/todoubled/qaynT/
solution: http://jsfiddle.net/todoubled/VGLw8/

#1

Write a function that takes an email string argument in standard contact format (Todd Larsen [email protected]) and returns a user object with the following attributes:

first name
last name
email address
random ID
creation timestamp
Gmail user: true || false
exercise: http://jsfiddle.net
solution: http://jsfiddle.net/todoubled/ybjRn/

#2

Build a vertical accordian list that expands one panel at a time and add an 'expanded' class to the active panel when it's open.

exercise: http://jsfiddle.net/todoubled/3Jr2f/
solution: http://jsfiddle.net/todoubled/RuBSp

#3

Optimize the previous accordian exercise.

#4

Build a contacts app.

https://github.com/benjreinhart/ContactsJS

todoubled / ux-mad-workshop Goto Github PK

ux-mad-workshop's Introduction