Your SlideShare is downloading. ×
Modern Web Development using jQuery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Modern Web Development using jQuery

759
views

Published on

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 …

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.

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
759
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Presented by : Ryan Griggs Senior Software Developer RJS Software Modern Web Development Using jQuery
  • 2. • Getting Started • Manipulation • Events • AJAX • Demo • Q & A Agenda
  • 3. • Reduces code • Reusable and lightweight • Well-tested and cross-browser compatible • Powerful selector engine • Method chaining Why Use jQuery?
  • 4. • Page Setup <!DOCTYPE html> <html> <head> <title>RJS Software</title> <script src="scripts/jquery.min.js"></script> </head> <body> </body> </html> Getting Started
  • 5. • 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
  • 6. • 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
  • 7. • Document Object Model • Representation of your document in code • jQuery eases navigation and manipulation Manipulation
  • 8. • 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
  • 9. • Attributes $("#google-link").attr("href"); $("#google-link").attr("href", "www.google.com"); $("#google-link").attr( { "href": "http://www.google.com", "title": "Google.com" }); Manipulation
  • 10. • Properties $("#myTextbox").prop("disabled"); $("#myTextbox").prop("disabled", true); $("#myCheckbox").prop("checked"); $("#myCheckbox").prop("checked", true); Manipulation
  • 11. • CSS $("#myText").css("font-size", "2em"); $("#myText").css({ "font-size":"2em", "color":"red" }); Manipulation
  • 12. • Classes $("#myText").addClass("bold"); $("#myText").removeClass("bold"); $("#myText").toggleClass("bold"); $("#myText").hasClass("bold"); Manipulation
  • 13. • Custom • Deprecated: bind(), unbind(), live(), delegate() • Current: on() • Shorthand • Examples: blur(), click(), focus(), hover(), keydown(), load(), resize() Events
  • 14. • On $("body").on("keypress",function(event){ if(event.which == 13){ // ENTER key was pressed } }); $("body").on("click", "a", function () { alert("Clicked!"); }); Events
  • 15. • Shorthand $("body").keypress(function () { if(event.which == 13){ // ENTER key was pressed } }); $("body a").click(function () { alert("Clicked!"); }); Events
  • 16. • Old way var 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
  • 17. • jQuery way $("#ajaxButton").click(function () { $("#result").load("test.html"); }); AJAX
  • 18. • jQuery way (more complex) $("#ajaxButton").click( function () { $.ajax({ type: "POST", url: "test.html", data: "folder=1234", success: function(data){ $("#result").html(data); } }); }); AJAX
  • 19. • Reduced existing Javascript code • Allowed more complex behavior in shorter implementation time • Removed need for browser-dependent code and “hacks” RJS Usage
  • 20. $("#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
  • 21. Demo
  • 22. Questions and Answers
  • 23. Learn More Contact: Ryan Griggs RJS Software Systems rgriggs@rjssoftware.com or sales@rjssoftware.com 888-RJS-SOFT or 952-736-5800