Javascript Demos

Programming Basics

• Variables
• if / else
• switch / case
• loops
• functions
• arrays
• Date Object
• Math Object
• Random Array value

Window Object

• Window Location
• Window Location Redirection

Javascript DOM Traversing

• Simple getElementById
• getElementsByTagName
• getElementsByName (form example)
• querySelector
• querySelectorAll

Javascript Events

• Simple Inline Event
• Inline Events
• Simple DOM Event
• DOM Events
• Simple addEventListener
• addEventListener
• setInterval
• setInterval Clock

XML, JSON, AJAX, RSS and APIs

• Objects
• jQuery - Loading XML
• jQuery - Basic Loading JSON
• Load RSS (PHP)
• Load RSS (Google API)
• httpRequest -true with event handler
• httpRequest - false
• httpRequest - readyStateChange event
• httpRequest - onload event
• httpRequest - responseText - loading a simple text file
• httpRequest JSON.parse
• httpRequest JSON
• Parse JSON
• Javascript - XML X-Domain Fail
• Javascript - JSON-P TasteKid
• Javascript - Parsing JSON X-Domain Fail
• Loading XML X-domain BBC
• Loading JSON X-Domain BBC
• JSONP X-Domain Demo
• JSONP Twitter - out to pasture
• jQuery load() method #1
• jQuery load() method #2
• jQuery load() method #3
• jQuery load() Method with Data send to Server
• jQuery getJSON() Method to load JSON Locally
• jQuery Twitter - out to pasture
• Facebook Graph API Example with Javascript - out to pasture
• jQuery Facebook - out to pasture
• Twitter 1.1 API via PHP
• Search Twitter 1.1 API via PHP
• jQuery Facebook Coca Cola
• jQuery getJSON() BBC JSON
• jQuery AJAX
• jQUery AJAX JSONP X-Domain Demo
• jQUery AJAX JSONP X-Domain Demo TasteKid
• serialize()
• jquery $.get()
• jquery $.post()
• jquery $.getJSON() flickr example
• jquery $.getJSON() via cURL (PHP) flickr example

Canvas

• Basic
• Basic Vanilla
• Path
• Rectangle
• Baton
• Gradient
• Pattern
• Interaction
• Pie chart basic
• Pie chart
• Rotate
• Rotate Animation
• Animation Angle

Greensock GSAP

• CSS Properties
• Photo Spins
• Timeline

TweenJS

• Basic
• Event Driven
• Tick
• Drag
• Movement Along Angle

jQuery

Basics

• addClass, removeClass
• html(), text()
• Using this

Selectors

• Using the length property
• Using Advanced CSS Selectors
• Selecting with children() and find()
• Selecting with next() and prev()
• Traversing with next(), prev() and children()
• Selecting with parent() and parents()
• Using the odd and even
• Using eq()
• Using :nth-child
• Using :contains
• Using :checked

Adding Stuff

• Adding new nodes #1
• Adding new nodes #2
• Adding new nodes with insertBefore() and insertAfter()
• Adding new nodes with appendTo() and prependTo()

Events Effects

• toggleClass
• Inline CSS with css() and removal with attr()
• Adding attributes with attr()
• Using show() and hide()
• Using show() and hide() with times
• Callbacks
• Using remove()
• Caching
• Chaining #1
• Delay #1
• Chaining with end()
• Using fadeIn() and fadeOut()
• Using fadeToggle()
• Using slideUp() and slideDown()
• Using slideToggle()
• Using animate()
• Chaining #2
• The toggle method

Events

• Event Bubbling
• Event Delegate
• preventDefault
• The toggle event (depreated 1.9) - out to pasture

Google Maps

• Basic Map
• Markers
• Draggable Markers
• Infowindow
• Multi Markers
• Directions #1
• Directions #2
• Street View
• Geocode Search
• Reverse Geocode Drag
• Place Library
• Search Box for Places
• Markers as an Array
• Old Twitter API - out to pasture
• Twitter API 1.1 (PHP)
• Geolocation
• Geolocation with Media Queries

Charting

• Google Charts Static
• Google Pie Chart
• Google Charts Dynamic

Angular

• Two Way Data Binding
• Simple Controller
• Simple Controller JSON Data
• Using ng-repeat