Set 6: Web Development Toolkits Why Use a Toolkit? Choices jQuery - - PDF document

▶
set 6 web development toolkits
SMART_READER_LITE
LIVE PREVIEW

Set 6: Web Development Toolkits Why Use a Toolkit? Choices jQuery - - PDF document

Nov 01, 2022 474 likes •577 views

IT452 Advanced Web and Internet Systems Set 6: Web Development Toolkits Why Use a Toolkit? Choices jQuery www.jQuery.com Yahoo! UI Library (YUI) developer.yahoo.com/yui Google Web Toolkit Dojo Prototype more 1

slide-1
SLIDE 1

1

Set 6: Web Development Toolkits

IT452 Advanced Web and Internet Systems

Why Use a Toolkit?

  • Choices

– jQuery www.jQuery.com – Yahoo! UI Library (YUI) developer.yahoo.com/yui – Google Web Toolkit – Dojo – Prototype – … more

slide-2
SLIDE 2

2

jQuery Selectors “Get all paragraphs that are children of ID ‘target’”

  • Vanilla Javascript:
  • jQuery Selector:

jQuery Selector Patterns

  • Selector Patterns

– $(‘p’)

  • all <p> elements

– $(‘#target’)

  • all elements with id “target”

– $(‘div p’)

  • all <p> elements in a <div>

– $(‘p.emph’)

  • all <p> elements of class “emph”

– $(‘*’)

  • all elements in the DOM!

– $(‘img[border=1]’)

  • all images with borders of 1

– …..

slide-3
SLIDE 3

3

The jQuery Object

  • Selectors return jQuery Objects
  • They can act like arrays

– $(‘div’)[1] – $(‘div’).get(1) – $(‘div’).length – var arr = $(‘div’).get()

The jQuery Object

  • Selectors return jQuery Objects
  • They can perform CSS and animation tricks

– $(“a”).css("color", "red"); – $(“a”).css("border", "1px solid blue"); – $(“p”).text(“new text”); – $(‘#target’).hide() – $(“p”).animate(

{ opacity:0.2, marginLeft:”40px” }, 5000 ); \\ 5 seconds http://api.jQuery.com/category/css/ http://api.jQuery.com/category/effects/

slide-4
SLIDE 4

4

The jQuery Object

  • Selectors return jQuery Objects
  • They can change the DOM:

– $(“body”).append(“<h1>New heading!</h1>”);

  • You can make jQuery objs from HTML elements

x = document.getElementById(“mydiv1”); Which now works?

  • 1. x.css(“color”, “red”);
  • 2. $(x).css(“color”, “red”);
  • 3. $(“x”).css(“color”, “red”);
  • Is this normally a good idea?

The jQuery Object

  • Selectors return jQuery Objects
  • They have many convenience functions

– $(‘#target’).parent() – .first() – .last() – .is(function) – .add(Object/selector) – .next(Selector) – .filter(Selector)

http://api.jQuery.com/category/traversing/

slide-5
SLIDE 5

5

Event Handling $('#target').click(function() { alert('Handler for .click() called.'); }); Exercise – one-liners with jQuery only!

Add a paragraph that says “Hello” to the div with id of “div7” Change the color of all “td” cells to blue Add a div that says “I’m a div” to the body of the document Change the words of every paragraph to say “New words”

slide-6
SLIDE 6

6

Ajax with jQuery

  • The most basic call:

$.get("data.txt", function(data) { alert("received reply! " + data); } );

  • Full Options:

var ajaxSettings = { type: “POST", url: "data.txt", data: "name=mcdowell&location=USNA", success: function(data) {

$('#target').append("<p>"+data+"</p>").css("color","blue"); },

error: function(xhr, status, error) { alert("error: " + error); } }; $.ajax(ajaxSettings);

Ajax with jQuery

function handleResponse(resp) { // Get all all the apples from XML var list=resp.getElementsByTagName("apple"); for (var ii=0; ii<list.length; ii++) { var str = list[ii].firstChild.nodeValue; $("div").append("<li>"+str+"</li>"); } $("li").css("color","red"); } function sendRequest() { // Setup your Ajax settings. var ajaxSettings = { type: "POST", url: "data.xml", data: "name=mcdowell&location=USNA", success: handleResponse, error: function(xhr, status, error) { alert("error: " + error ); } }; // Make the call. $.ajax(ajaxSettings); }

slide-7
SLIDE 7

7

Autocomplete with jQuery

  • Use a plugin for jQuery

<head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="jquery.autocomplete.css"> <script type="text/javascript" src="jquery.autocomplete.js"></script> <script type="text/javascript"> function myonload() { $("#query").autocomplete({ url: 'search.pl', minChars: 1, useCache: false, filterResults: false, }); } </script> </head> <body onload=“myonload()"> <form> <p>Local data: <input type="text" id="query" /> </form></body>

jQuery Autocomplete (Fake Perl)

#!/usr/bin/perl use strict; use CGI qw( :standard ); use CGI::Carp qw(warningsToBrowser fatalsToBrowser); print "Content-Type: text/plain; charset=UTF-8\n\n";

  • pen(IN,"search.txt") || die "Cannot open search.txt ($!)\n";

while( my $line = <IN> ) { print "$line"; } close IN;

What do you need to change?

slide-8
SLIDE 8

8

What else can we do?

  • Photo Slideshows
  • Tab Views
  • Calendars, Date Pickers
  • Buttons galore
  • File Uploading
  • Drag and Drop
  • … many more

How do I start?

slide-9
SLIDE 9

9

Some Sites with jQuery Plugins

  • http://jquerylist.com/
  • http://jquerystyle.com/
  • http://jquery.malsup.com/
  • http://bassistance.de/jquery-plugins/
  • (cool photo slider) http://slidesjs.com/