Modern JavaScriptDevelop And Design

Instructor’s NotesChapter 13 - Frameworks

Modern JavaScript Design And DevelopCopyright © 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

<script src="js/jquery-1.7.1.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

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('<p>This is the paragraph.</p>');

Event Handling

selection.eventType(function);

$('img').mouseover(function() { // Do this!});

$('#someSelect').change(function() { alert(this.val());});

Ajax

var options = { url: 'http://www.example.com/somepage.php', type: 'get', data: /* actual data */, dataType: 'text', success: function(response) { // Use response. }};$.ajax(options);

Using Plug-ins

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

$('#dateInput').datepicker();

Incorporating YUI

<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>

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 email = Y.one('#email');email.get('value'); // Value entered into the email input.

Y.one('#submit').set('disabled', 'disabled');

Y.one('someP').setContent('New text.');

Y.one('#emailP').addClass('error');

DOM Manipulation

• create()• prepend()• insert()• remove()

var p = Y.Node.create('<p>');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. } }});