Today’s Goals:

• Learn how to drag and drop elements on a webpage with JavaScript
• Explore JavaScript frameworks

 Today’s featured website:

• http://mrdoob.com/projects/chromeexperiments/google-gravity/– Look what JavaScript can do to a fake Google page!

 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
• We’re going to follow our own tutorial. Please drag drop 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. Let’s make the text move by filling in the blanks.
  4. 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?