This repo contains some material that I wrote for a quick one-day crash course that I gave on JavaScript for the NEMAC staff in preparation for a Drupal training week in May, 2013.
#JavaScript Introduction
- invented in 1995 by Brendan Eich at Netscape, Inc
- has nothing to do with Java -- Java and JavaScript are two completely different langauges
- invented as a way to allow programs to run in web browsers
- meets ECMASscript (European Computer Manufacturers Association) standard (as does ActionScript)
##client-side vs server-side
- php is server-side
- JavaScript is client-side
- (server-side JavaScript is also possible now, but nevermind that for now)
##example1.html
- Hello World!
##example2.html / example2.js
- Same as example1, but with JavaScript in a separate file
##example3.html
- A more complicated HTML structure.
##example4.html
- Arranging for JS code to run immediately on page load
- HTML page elements are not available until page has finished loading!
- body "onload" attribute.
##example5.html
- Same as example4, but with CSS styling.
- DOM (Document Object Model) concepts
- elements / attributes - nested structure
- "selectors" for targeting objects in DOM
##example6.html
- divs and spans: useful containers for organizing the structure of a page. Like tables, but more flexible.
- 'class' vs 'id' attributes
- Google Chrome dev tools: view HTML structure, see console log
##example7.html
- introducing jQuery - a JavaScript library
- the jQuery function, aka just $. Note: this feels strange at first, but gets more natural after a while: in JQuery, $ is a function name!
- jQuery selectors: 'document', '#wilma', '#betty'
- anonymous functions
- asynchronicity, 'callback' functions
##example8.html
- registering event handlers
##JavaScript Language Fundamentals
- syntax similar to php and many other C-inspired languages
- variables declared with
var
statement; optional, but highly recommended, because otherwise bad things can happen! - JavaScript is full of bad parts. But if you stick to the good parts, it's a great langauge. JavaScript: the Good Parts is a great book by Douglas Crockford.
- scoping, function nesting
##JavaScript objects
- similar to PHP associative arrays (actually, more like PHP objects, which we did not cover!)
##example9.html
- JavaScript object syntax
##example10.html
- see
stations.js
- more complex object example
##example11.html
- AJAX (Asynchronous JavaScript and XML) with jQuery
- web services
##example12.html
- JSON - JavaScript Object Notation
- JSON with AJAX
##example13.html
- weather station list from example10 above, via AJAX
##displayweather.html, displayweather.js, displayweather.css
- walkthrough of full example