modern web development using jquery
DESCRIPTION
Web application development is a rapidly evolving field that can be both daunting and painful to developers seeking to take the plunge. Creating highly interactive web applications with Javascript no longer has to be complex, confusing and filled with incompatible or outdated workarounds. This presentation is designed to introduce modern Javascript techniques utilizing both pure Javascript and the popular jQuery framework to enhance a web application. These core concepts will help enable web developers to improve productivity and reduce browser-specific headaches in order to focus on creating powerful and responsive web applications regardless of platform. To learn more about RJS Software, visit our website at http://www.rjssoftware.com/TRANSCRIPT
Presented by :
Ryan GriggsSenior Software Developer
RJS Software
Modern Web Development
Using jQuery
• Getting Started
• Manipulation
• Events
• AJAX
• Demo
• Q & A
Agenda
• Reduces code
• Reusable and lightweight
• Well-tested and cross-browser compatible
• Powerful selector engine
• Method chaining
Why Use jQuery?
• Page Setup<!DOCTYPE html><html><head>
<title>RJS Software</title><script src="scripts/jquery.min.js"></script>
</head><body></body></html>
Getting Started
• Hello World
Old
function pageReady(){
document.getElementsByTagName("body")[0].innerText = "Hello,
World!";
}
document.onload = pageReady;
New
$(document).ready(function () {
$("body").text("Hello, World!");
});
Getting Started
• Completed<!DOCTYPE html><html><head>
<title>RJS Software</title><script src="scripts/jquery.min.js"></script><script type="text/javascript">
$(document).ready(function () {
$("body").text("Hello, World!");
});</script>
</head><body></body></html>
Getting Started
• Document Object Model
• Representation of your document in code
• jQuery eases navigation and manipulation
Manipulation
• Content
$("#page-header").text();
$("#document-content").html();
$("input#document-title").val();
$("#page-header").text("New Page Header");
$("#document-content").html("<h1>New
Content</h1>");
$("input#document-title").val("Invoice");
Manipulation
• Attributes
$("#google-link").attr("href");
$("#google-link").attr("href",
"www.google.com"); $("#google-link").attr(
{ "href": "http://www.google.com",
"title": "Google.com"});
Manipulation
• Properties$("#myTextbox").prop("disabled");
$("#myTextbox").prop("disabled", true); $("#myCheckbox").prop("checked");
$("#myCheckbox").prop("checked", true);
Manipulation
• CSS
$("#myText").css("font-size", "2em");
$("#myText").css({
"font-size":"2em",
"color":"red"
});
Manipulation
• Classes
$("#myText").addClass("bold"); $
("#myText").removeClass("bold"); $("#myText").toggleClass("bold"); $("#myText").hasClass("bold");
Manipulation
• Custom
• Deprecated: bind(), unbind(), live(), delegate()
• Current: on()
• Shorthand
• Examples: blur(), click(), focus(), hover(), keydown(), load(), resize()
Events
• On$("body").on("keypress",function(event){ if(event.which == 13){ // ENTER key was pressed }});
$("body").on("click", "a", function () {alert("Clicked!");
});
Events
• Shorthand$("body").keypress(function () { if(event.which == 13){ // ENTER key was pressed }});
$("body a").click(function () {alert("Clicked!");
});
Events
• Old wayvar httpRequest; document.getElementById("ajaxButton").onclick = function() { makeRequest('test.html'); }; function makeRequest(url) { if (window.XMLHttpRequest) { // Mozilla, Safari, ... httpRequest = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE try { httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } if (!httpRequest) { alert("Cannot create an XMLHTTP instance"); return false; } httpRequest.onreadystatechange = alertContents; httpRequest.open('GET', url); httpRequest.send(); } function alertContents() { if (httpRequest.readyState === 4) { if (httpRequest.status === 200) { alert(httpRequest.responseText); } else { alert('There was a problem with the request.'); } } }
AJAX
• jQuery way$("#ajaxButton").click(function () {
$("#result").load("test.html");});
AJAX
• jQuery way (more complex)$("#ajaxButton").click( function () {
$.ajax({ type: "POST", url: "test.html", data: "folder=1234",
success: function(data){$("#result").html(data);
}});
});
AJAX
• Reduced existing Javascript code
• Allowed more complex behavior in shorter implementation time
• Removed need for browser-dependent code and “hacks”
RJS Usage
$("#forgot-button").on("click", function () { var emailAddress = $("#email").val(), $buttonTrigger = $(this);
if (emailAddress.length > 0 && $("#loginForm").validate().element("#email")) { $(this).button("disable");
$.ajax({ type: "POST", url: "/login.aspx", data: { email: emailAddress }, success: function (data) { $("#email").val(""); $buttonTrigger.button("enable");
var $status = $(document.createElement("div")) .addClass("ui-widget") .css({ display: "none", opacity: 0 }) .html($(document.createElement("div")) .addClass("ui-state-highlight ui-corner-all") .html($(document.createElement("p")) .html($(document.createElement("span")) .addClass("ui-icon ui-icon-info") .css({ 'float': "left", 'marginRight': ".3em" }) ).append(data) ) ).append($(document.createElement("br")));
$("#forgotpassword").slideUp("fast"); $status.insertAfter($("#browser-error")).slideDown("fast") .animate({ opacity: 1 }, { queue: false, duration: "fast" });
setTimeout(function () { $status.animate({ height: 0, opacity: 0 }, "fast", function () { $(this).remove(); }); }, 4000); } }); }});
RJS Usage
Demo
Questions and Answers
