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

  • Published on

  • View

  • Download

Embed Size (px)


  • Modern JavaScriptDevelop And DesignInstructors NotesChapter 13 - FrameworksModern JavaScript Design And DevelopCopyright 2012 by Larry Ullman

  • ObjectivesExplain what a framework isDecide when its appropriate to use a frameworkIdentify what qualities to look for in choosing a frameworkIntegrate jQuery or YUI into an HTML page

  • More ObjectivesSelect and manipulate elements in jQuery or YUIPerform DOM manipulation using jQuery or YUIHandle events in jQuery or YUIPerform Ajax requests in jQuery or YUIUse different plug-ins with jQuery or YUI

  • Framework Pros and ConsProsFaster developmentBetter code testingImproved cross-browser reliabilityConsTime to learnCode bloatDebugging can be harderAdvanced, custom situations can be really hard to implement

  • Choosing a FrameworkBrowser supportLicenseGood documentation/communityExtensibility/viabilityFeel right

  • Incorporating jQuery

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

  • Selecting ElementsUse $() function#something selects the element with an id value of something.something selects every element with a class value of somethingsomething 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 Manipulationafter()append()before()prepend()remove()$('#actualFormId').before('This is the paragraph.');

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

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

  • Using Plug-ins


  • Incorporating YUI

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

  • Selecting ElementsYUI().use('node', function(Y) { // Do stuff here.});var header ='#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 Elementsvar email ='#email');email.get('value'); // Value entered into the email'#submit').set('disabled', 'disabled');'someP').setContent('New text.');'#emailP').addClass('error');

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

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

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

    *Above all, remember that even though youre using a framework, youre still programming in JavaScript.***First thing you need to do is incorporate the jQuery library. Can use a local version, or a hosted one.*These two are equivalent, although the second is more common (but more cryptic). This is equivalent to conventional JavaScript waiting for the window to be loaded.*These rules can be combined in many ways. There are also custom selectors in jQuery.*Use attr() method to change an attributes value.Use addClass() and removeClass() to change classes.Use val() to get or set the value.Use html() to get or set the HTML.Use text() to get or set the text.*Use these methods on element selections to manipulate the DOM. Dont need as many DOM references as in traditional JavaScript.Can add elements using literal HTML, without creating elements.*Can use the this keyword within the event handler to reference the target of the event.*Tons of good plug-ins available for jQuery. First include the jQuery library, then the plug-in library.Normally you then invoke the newly-added method.*YUI is great for data-intense RIAs. *The use() method indicates the modules you want. Last argument is a function to be called when the modules are loaded.Check for a domready event to know its safe to do whatever.*Selecting elements requires the Node module.Use one() or all() methods to select elements.*Use get() and set() to manipulate attributes.Use setContent() to change an elements HTML.Use addClass() and removeClass() to change classes.*Use create() to make new elements. Then use other methods to insert the new element.*Invoke the on() method on a selection. First argument is the event type, second is the event handling function.The handling function will receive a reliable, usable event object.*Ajax requires the IO module. Then call the io() method.First argument is resource to be requested; second is the configuration object.The data can be name=value pairs (as a string) or an object.*


View more >