Draft outline of upcoming course on JavaScript, Integration with Alpha Five and JQuery
Please email [email protected] if you have questions or are interested in attending. This will help us plan better and will put you in a preferential position if the course sells out as the previous courses have done.
Prerequisites
Some knowledge of a programming language � variables, functions, objects, member variables, and so on.
Some experience using Alpha Five (mastery not needed)
Some knowledge of HTML, and how HTML pages are dished out from web servers
Some understanding of CSS
Getting Up to Speed with JavaScript
JavaScript Examples
Language Essentials
Don�t call JavaScript �Java�
Is JavaScript the same as ECMAScript?
ECMAScript 5? Hardly there. See http://kangax.github.com/es5-compat-table/ (Except IE9 seems to have most of it.) Also see http://ejohn.org/blog/ecmascript-5-s...json-and-more/
Differences between browsers? All support ECMAScript 3. Biggest difference is in DOM handling, which we�ll get to later in this course.
Very briefly: Where to add JavaScript code to an Alpha application
In the a5w page
In the components in different places
Function basics
Simple functions
More after we talk about objects
Arrays
Objects
How to create an object
Arrays vs Objects; objects as maps
Don�t mix up arrays and properties. You�re just adding properties to an array, making the original array (probably) unnecessary
Functions as objects
Passing a function to an object
Passing an anonymous function to an object (with note that we�ll discuss this in greater detail later, including closures)
How to create a new object
The prototype and why it�s necessary
Scope and the �this� object mess
What about inheritance?
For loops: �for X in Y� with objects
Types as Objects, e.g. Function (uppercase F) object, Array object, etc.
The DOM
What it is
It�s not part of JavaScript itself but instead the browser
Selectors
Native function calls
element.querySelector and element.querySelectorAll
http://www.w3.org/TR/2009/CR-selectors-api-20091222/
Events
Why you won�t want to write your own DOM code directly (browser incompatibility). Use known, tested libraries instead.
Objects and Functions
Closures
Calling an anonymous function with closures for private variables
Methods of inheritance
Calling a function upon creation
Calling an anonymous function upon creation
Context and �this� operator
function.call(object); // set the context
Official specifications
http://www.ecma-international.org/pu...s/Ecma-262.htm
Firebug
Using the console
Outputting to the console
Debugging
Some additional tidbits
Adding on to built-in type objects
�but don�t do this with root Object class
Immutable Types
Alpha Five�s JavaScript Model
Action JavaScript: Some Quick Examples
Grid component
Rule: When possible, use the Grid properties
JavaScript function declarations property
Adding code to the Row Events
Adding code to the System Events
Managing global variables
Grid JavaScript API (refresh, setValue, etc.)
More advanced Action JavaScript
Custom Grid Fields
Alpha Five�s AJAX Model
Creating Ajax Callbacks in the Grid (as in http://wiki.alphasoftware.com/User+D...s+in+Grids+V10 )
Testing it out in the Alpha Five debugger
Exploring the �e� object in the debugger
Using the AJAX API in your own JavaScript code (ajaxCallback, etc.)
How the Web Example adds buttons to the grid toolbar
jQuery and jQueryUI
Getting and Installing
Where to get it
Adding it to an Alpha project and making sure it gets published
How to include it when it's on your server
How to include a hosted version (e.g. Google hosted)
A First jQuery Alpha App
Selecting
Calling a function on the selection
Again: Passing functions as handlers
Adding an event handler to the selection
The jQuery Model
Document.ready
Breakdown
Ready is an event
Passing a function to the event
The jQuery way: jQuery function returns a set of objects but you can still operate on the members with a single method
The Unobtrusive JavaScript Way
Everything you ever wanted to know about Selectors
Class (.name)
Tag (name)
ID (#name)
Attributes
Traversing
Trying out all these selectors in jQuery
Adding onto the set
Filtering the set
Working with attributes: .addClass(), .attr(), .hasClass(), .html(), .removeAttr(), .removeClass(), .toggleClass(), .val()
More on adding events to elements (see list at http://api.jquery.com/category/events/ and include in course workbook)
DOM manipulation (http://api.jquery.com/category/manipulation/) Also include all this in the course workbook
jQuery Effects
jQuery Utilities
jQueryUI and Alpha Components
Quick demo of jQueryUI buttons
Themes and Themeroller
Widgets overview
Buttons
Transforming links
Transforming existing A5 buttons
Dialog
Putting A5 components in a jQuery dialog
Tabs
�and comparing to Alpha�s tabs
Downloading and installing different themes together
Theme switcher widget
Mixing jQueryUI themes with Alpha themes
Drag and Drop
Resizable, Selectable, Sortable
jQuery AJAX and Alpha Five AJAX
Writing a server-side AJAX responder
Third-party jQueryUI plugins are everywhere
- Date - Nov 9, 10, 11 2010
- Location - Boston Area
- Lead Instructor - Jeff Cogswell (Author of 12 books on software development, past eWeek Reviews editor, currently Alpha Five expert)
Please email [email protected] if you have questions or are interested in attending. This will help us plan better and will put you in a preferential position if the course sells out as the previous courses have done.
Prerequisites
Some knowledge of a programming language � variables, functions, objects, member variables, and so on.
Some experience using Alpha Five (mastery not needed)
Some knowledge of HTML, and how HTML pages are dished out from web servers
Some understanding of CSS
Getting Up to Speed with JavaScript
JavaScript Examples
Language Essentials
Don�t call JavaScript �Java�
Is JavaScript the same as ECMAScript?
ECMAScript 5? Hardly there. See http://kangax.github.com/es5-compat-table/ (Except IE9 seems to have most of it.) Also see http://ejohn.org/blog/ecmascript-5-s...json-and-more/
Differences between browsers? All support ECMAScript 3. Biggest difference is in DOM handling, which we�ll get to later in this course.
Very briefly: Where to add JavaScript code to an Alpha application
In the a5w page
In the components in different places
Function basics
Simple functions
More after we talk about objects
Arrays
Objects
How to create an object
Arrays vs Objects; objects as maps
Don�t mix up arrays and properties. You�re just adding properties to an array, making the original array (probably) unnecessary
Functions as objects
Passing a function to an object
Passing an anonymous function to an object (with note that we�ll discuss this in greater detail later, including closures)
How to create a new object
The prototype and why it�s necessary
Scope and the �this� object mess
What about inheritance?
For loops: �for X in Y� with objects
Types as Objects, e.g. Function (uppercase F) object, Array object, etc.
The DOM
What it is
It�s not part of JavaScript itself but instead the browser
Selectors
Native function calls
element.querySelector and element.querySelectorAll
http://www.w3.org/TR/2009/CR-selectors-api-20091222/
Events
Why you won�t want to write your own DOM code directly (browser incompatibility). Use known, tested libraries instead.
Objects and Functions
Closures
Calling an anonymous function with closures for private variables
Methods of inheritance
Calling a function upon creation
Calling an anonymous function upon creation
Context and �this� operator
function.call(object); // set the context
Official specifications
http://www.ecma-international.org/pu...s/Ecma-262.htm
Firebug
Using the console
Outputting to the console
Debugging
Some additional tidbits
Adding on to built-in type objects
�but don�t do this with root Object class
Immutable Types
Alpha Five�s JavaScript Model
Action JavaScript: Some Quick Examples
Grid component
Rule: When possible, use the Grid properties
JavaScript function declarations property
Adding code to the Row Events
Adding code to the System Events
Managing global variables
Grid JavaScript API (refresh, setValue, etc.)
More advanced Action JavaScript
Custom Grid Fields
Alpha Five�s AJAX Model
Creating Ajax Callbacks in the Grid (as in http://wiki.alphasoftware.com/User+D...s+in+Grids+V10 )
Testing it out in the Alpha Five debugger
Exploring the �e� object in the debugger
Using the AJAX API in your own JavaScript code (ajaxCallback, etc.)
How the Web Example adds buttons to the grid toolbar
jQuery and jQueryUI
Getting and Installing
Where to get it
Adding it to an Alpha project and making sure it gets published
How to include it when it's on your server
How to include a hosted version (e.g. Google hosted)
A First jQuery Alpha App
Selecting
Calling a function on the selection
Again: Passing functions as handlers
Adding an event handler to the selection
The jQuery Model
Document.ready
Breakdown
Ready is an event
Passing a function to the event
The jQuery way: jQuery function returns a set of objects but you can still operate on the members with a single method
The Unobtrusive JavaScript Way
Everything you ever wanted to know about Selectors
Class (.name)
Tag (name)
ID (#name)
Attributes
Traversing
Trying out all these selectors in jQuery
Adding onto the set
Filtering the set
Working with attributes: .addClass(), .attr(), .hasClass(), .html(), .removeAttr(), .removeClass(), .toggleClass(), .val()
More on adding events to elements (see list at http://api.jquery.com/category/events/ and include in course workbook)
DOM manipulation (http://api.jquery.com/category/manipulation/) Also include all this in the course workbook
jQuery Effects
jQuery Utilities
jQueryUI and Alpha Components
Quick demo of jQueryUI buttons
Themes and Themeroller
Widgets overview
Buttons
Transforming links
Transforming existing A5 buttons
Dialog
Putting A5 components in a jQuery dialog
Tabs
�and comparing to Alpha�s tabs
Downloading and installing different themes together
Theme switcher widget
Mixing jQueryUI themes with Alpha themes
Drag and Drop
Resizable, Selectable, Sortable
jQuery AJAX and Alpha Five AJAX
Writing a server-side AJAX responder
Third-party jQueryUI plugins are everywhere
Comment