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

Modern Web Development using jQuery

on

  • 818 views

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.

Statistics

Views

Total Views
818
Views on SlideShare
818
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Modern Web Development using jQuery Modern Web Development using jQuery Presentation Transcript

  • Presented by : Ryan Griggs Senior 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 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
  • • 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
  • Learn More Contact: Ryan Griggs RJS Software Systems rgriggs@rjssoftware.com or sales@rjssoftware.com 888-RJS-SOFT or 952-736-5800