Modern JavaScript Develop And Design Instructor’s Notes Chapter 13 - Frameworks Modern JavaScript Design And Develop Copyright © 2012 by Larry Ullman

Objectives Explain what a framework is Decide when it’s appropriate to use a framework Identify what qualities to look for in choosing a framework Integrate jQuery or YUI into an HTML page

More Objectives Select and manipulate elements in jQuery or YUI Perform DOM manipulation using jQuery or YUI Handle events in jQuery or YUI Perform Ajax requests in jQuery or YUI Use different plug-ins with jQuery or YUI

Framework Pros and Cons Pros Faster development Better code testing Improved cross-browser reliability Cons Time to learn Code bloat Debugging can be harder Advanced, custom situations can be really hard to implement

Choosing a Framework Browser support License Good documentation/community Extensibility/viability “Feel right”

Incorporating jQuery

Using jQuery $(function() { // Do whatever. }); $(document).ready(function() { // Do whatever. }

Selecting Elements Use $() function #something selects the element with an id value of something.something selects every element with a class value of something something selects every element of something type $('#something')

Manipulating Elements $('#submitButtonId').attr('disabled', 'disabled'); $('#blockquoteID').addClass('emphasis'); $('p').removeClass('emphasis'); var comments = $('#comments'); // Get a reference. var count = comments.val().length; if (count > 100) { // Update the value: comments.val(comments.val().slice(0,100)); }

DOM Manipulation after() append() before() prepend() remove() $('#actualFormId').before(' This is the paragraph. ');

Event Handling selection.eventType(function); $('img').mouseover(function() { // Do this! }); $('#someSelect').change(function() { alert(this.val()); });

Ajax var options = { url: ' type: 'get', data: /* actual data */, dataType: 'text', success: function(response) { // Use response. } }; $.ajax(options);

Using Plug-ins $('#dateInput').datepicker();

Incorporating YUI

Using YUI YUI().use('module1', 'module2', function(Y) { // Do stuff here. }); YUI().use('module1', 'module2', function(Y) { Y.on('domready', function() { // Do DOM stuff here. });

Selecting Elements YUI().use('node', function(Y) { // Do stuff here. }); var header = Y.one('#header'); // Element with an id of 'header'. var links = Y.all('a'); // All link elements. var errors = Y.all('.error');; // All elements with a class of error.

Manipulating Elements var = Y.one('# '); .get('value'); // Value entered into the input. Y.one('#submit').set('disabled', 'disabled'); Y.one('someP').setContent('New text.'); Y.one('# P').addClass('error');

DOM Manipulation create() prepend() insert() remove() var p = Y.Node.create(' '); Y.one('#someDiv').prepend(p);

Event Handling Y.one('#theForm').on('submit', handleForm); Y.all('a').on('click', handleClick); Y.all('a').on('click', function(e) { // e.target.href is always usable! });

Ajax Y.io('somepage.php', { method: 'get', data: /* actual data */, on: { success: function(id, response) { // Use response.responseText or response.responseHTML. } });