Intermediate JavaScript

DHTML, Ajax, & JSON

Reading Recap

The Semantic Grid System: Page Layout For Tomorrow The Semantic Grid System: Page Layout For Tomorrow

Main points:
No clearing divs, fluid layouts, CSS Less,

http://coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/

Reading Recap

5 Popular CSS Frameworks + Tutorials & Tools for Getting Started 5 Popular CSS Frameworks + Tutorials & Tools for Getting Started

Main points:

http://www.noupe.com/css/5-popular-css-frameworks-tutorials-tools-for-getting-started.html

Questions?

What is DHTML?

  • Augmenting the DOM with JavaScript.

Changing CSS values

  • jQuery's CSS class API
  • .hasClass(), .addClass(), .removeClass(), .toggleClass()
  • ...combined with CSS3 transitions

CSS3 Flyout Nav

  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five
  • Item Six
modal

jQuery UI

Premade DHTML & UI components like:
Drag & Drop, Accordions, Tabs, & Sliders

What is Ajax?

  • Retrieving data without refreshing the page.

How does Ajax work?

Step 1.) test.json 

{ "value" : "hey class" }

Step 2.) run script 

$.getJSON(
  'test.json',
  function(data){
    $('#test').html(data.value);
});

Step 3.) inject data into DOM

this text will get replaced

Questions

?

Assignment

Prepare for Presentation 2 next week.