Modern Web Development using jQuery

  • 710 views
Uploaded 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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
710
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
3
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