modern javascript develop and design instructor’s notes chapter 13 - frameworks modern javascript...
TRANSCRIPT
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. } }});