Today’s goals:

• Learn how to drag and drop elements on a webpage with JavaScript
• Explore JavaScript frameworks
• Check out Smashing Magazine’s desktop wallpaper for May! 

 Today’s featured site:

• http://endless.horse/ – JavaScript is used here (jQuery library) to make this horse keep growing no matter how much you scroll.

 Dragging and Dropping Elements with JavaScript

• First, let’s go to any website and try to click and drag things like text and images. What happens?
• Let’s read through this tutorial  to understand the code
  New & important JavaScript:
  draggable attribute– needs to be true so element can be dragged
  dataTransfer.setData() method– specifies data & its format
  dataTransfer.getData() method– retrieves drag data for specified type
  event.preventDefault() method– stops default action of an element
• We’re going to follow our own tutorial. Please download this code  and copy it into a new Notepad++ file to begin. Save it as dragdrop.html.
  1. How can we move the second cupcake into the second box? Why is the first cupcake moving?
  2. Can you drag the second cupcake into the first box and the first cupcake into the second box?
  3. Can we move the cupcakes anywhere we want on the page? What happens? Why?
  4. Let’s make the text move by filling in the blanks.
  5. Finally, build your perfect sandwich.

 JavaScript Frameworks

Each table of 2 will be assigned one of the following questions:

1. What are JavaScript frameworks?
2. Please find some examples of JavaScript frameworks.
3. Why do people use them?
4. What are some of the most popular JavaScript frameworks?
5. What you can build with them?
6. What is the difference between a JavaScript framework and a JavaScript library?
7. How do you pick a framework?