write less. do more. who are we? Yehuda Katz Andy Delcambre How - - PowerPoint PPT Presentation

▶
write less do more who are we yehuda katz andy delcambre
SMART_READER_LITE
LIVE PREVIEW

write less. do more. who are we? Yehuda Katz Andy Delcambre How - - PowerPoint PPT Presentation

Sep 17, 2022 29 likes •921 views

write less. do more. who are we? Yehuda Katz Andy Delcambre How is this going to work? Introduction to jQuery Event Driven JavaScript Labs! Labs! git clone git://github.com/adelcambre/jquery-tutorial.git Introduction to jQuery h1 {

slide-1
SLIDE 1

write less. do more.

slide-2
SLIDE 2

who are we?

slide-3
SLIDE 3

Yehuda Katz Andy Delcambre

slide-4
SLIDE 4
slide-5
SLIDE 5

How is this going to work?

slide-6
SLIDE 6

Introduction to jQuery

slide-7
SLIDE 7

Event Driven JavaScript

slide-8
SLIDE 8

Labs!

slide-9
SLIDE 9

Labs!

git clone git://github.com/adelcambre/jquery-tutorial.git

slide-10
SLIDE 10

Introduction to jQuery

slide-11
SLIDE 11

UJS With jQuery

h1 { color: #999; }

$(“h1”).click(function() { $(this).fadeIn(); });

slide-12
SLIDE 12

get some elements. but how?

slide-13
SLIDE 13

CSS 3 plus

  • div
  • div#foo
  • div.class
  • div, p, a
  • div p
  • div > p
  • div + p
  • div ~ p
  • div:first
  • div:last
  • div:not(#foo)
  • div:even
  • div:odd
  • div:eq(1)
  • div:gt(1)
  • div:lt(1)
  • div:header
  • div:animated
  • div:contains(txt)
  • div:empty
  • div:has(p)
  • div:parent
  • div:hidden
  • div:visible
slide-14
SLIDE 14

CSS 3 plus

  • div[foo]
  • div[foo=bar]
  • div[foo!=bar]
  • div[foo^=bar]
  • div[foo$=bar]
  • div[foo*=bar]
  • :nth-child(2)
  • :nth-child(even)
  • :first-child
  • :last-child
  • :only-child
  • :input
  • :text
  • :password
  • :radio
  • :checkbox
  • :submit
  • :image
  • :reset
  • :button
  • :file
  • :hidden
  • :enabled
  • :disabled
  • :checked
  • :selected
slide-15
SLIDE 15

get some elements.

slide-16
SLIDE 16

$(“table tr:nth- child(even) > td:visible”)

slide-17
SLIDE 17

do stuff.

slide-18
SLIDE 18

$(“div”)

Returns jquery object

slide-19
SLIDE 19

$(“div”).fadeIn()

Returns jquery object

slide-20
SLIDE 20

$(“div”).fadeIn() .css(“color”, “green”)

Returns jquery object

slide-21
SLIDE 21

we call this chaining

slide-22
SLIDE 22

Crazy chains

$(“ul.open”) // [ ul, ul, ul ] .children(“li”) // [ li, li, li ] .addClass(“open”) // [ li, li, li] .end() // [ ul, ul, ul ] .find(“a”) // [ a, a, a ] .click(function(){ $(this).next().toggle(); return false; }) // [ a, a, a ] .end(); // [ ul, ul, ul ]

slide-23
SLIDE 23
  • Select every other row of the table
  • Select the Checked checkboxes
  • Select the first column of the table
  • Select the top level of the outline
  • Select any links to jquery.com
  • Select any images that contain flowers

Lab 1: Selectors

slide-24
SLIDE 24

5 parts of jquery

dom events effects ajax plugins

slide-25
SLIDE 25

dom traversal

$(“div”).parent(); $(“div”).siblings(); $(“div”).next(); $(“div”).nextAll(“p”); $(“div”).nextAll(“p:first”);

dom

slide-26
SLIDE 26

dom

$(“div”)

<body> <div> <p> <p> <p> <div> <pre> <p> <p> <p>

slide-27
SLIDE 27

dom

$(“div#foo”).siblings()

<body> <div id='foo'> <p> <p> <p> <div> <pre> <p> <p> <p>

slide-28
SLIDE 28

dom

$(“div”).next()

<body> <div> <p> <p> <p> <div> <pre> <p> <p> <p>

slide-29
SLIDE 29

dom

$(“div”).nextall(“p”)

<body> <div id='foo'> <p> <p> <pre> <p>

slide-30
SLIDE 30

dom

$(“div”).nextall(“p:first”)

<body> <div id='foo'> <p> <p> <pre> <p>

slide-31
SLIDE 31

find

$(“div pre”) $(“div”).find(“pre”)

dom

slide-32
SLIDE 32

dom

$(“div pre”)

<body> <div> <p> <pre> <pre> <div> <pre> <p> <pre> <p>

slide-33
SLIDE 33

dom

$(“div”).find(“pre”)

<body> <div> <p> <pre> <pre> <div> <pre> <p> <pre> <p>

slide-34
SLIDE 34

filter

$(“div:contains(some text)”) $(“div”).filter(“:contains(some text)”) $(“div”).filter(function() { return $(this).text().match(“some text”) })

dom

slide-35
SLIDE 35

andSelf()

$(“div”).siblings().andSelf() $(“div”).parent().andSelf()

dom

slide-36
SLIDE 36

dom

$(“div”).siblings().andself()

<body> <div id='foo'> <p> <p> <p> <div> <pre> <p> <p> <p>

slide-37
SLIDE 37

dom

$(“p”).parent().andself()

<body> <div id='foo'> <p> <p> <p> <div> <pre> <p> <p> <p>

slide-38
SLIDE 38

Lab 2: Traversal

  • Select any text areas and their labels
  • Any span’s parent
  • All of the form elements from a form that PUT’s
slide-39
SLIDE 39

attributes

$(“div”).attr(“id”) // returns id $(“div”).attr(“id”, “hello”) // sets id to hello $(“div”).attr(“id”, function() { return this.name }) $(“div”).attr({id: “foo”, name: “bar”}) $(“div”).removeAttr(“id”);

dom

slide-40
SLIDE 40

classes

$(“div”).addClass(“foo”) $(“div”).removeClass(“foo”) $(“div”).toggleClass(“foo”) $(“div”).hasClass(“foo”)

dom

slide-41
SLIDE 41
  • ther

$(“div”).html() $(“div”).html(“<p>Hello</p>”) $(“div”).text() $(“div”).text(“Hello”) $(“div”).val() $(“div”).val(“Hello”)

dom

slide-42
SLIDE 42

noticing a pattern?

slide-43
SLIDE 43

manipulation

$(“div”).append(“<p>Hello</p>”) $(“<p>Hello</p>”).appendTo(“div”) $(“div”).after(“<p>Hello</p>”) $(“<p>Hello</p>”).insertAfter(“div”)

dom

slide-44
SLIDE 44

way more...

http://docs.jquery.com http://api.jquery.com

dom

slide-45
SLIDE 45

Lab 3: Manipulation

  • Add CSS4 to the list after CSS3
  • Remove any images with Dogs
  • Turn the ruby row red
  • Add some default text to the input field

Note: Use the Lab 2 File again

slide-46
SLIDE 46

5 parts of jquery

dom events effects ajax plugins

slide-47
SLIDE 47

document ready

$(document).ready(function() { ... }) Alias: jQuery(function($) { ... })

slide-48
SLIDE 48

bind

$(“div”).bind(“click”, function() { ... }) Alias: $(“div”).click(function() { ... })

slide-49
SLIDE 49

“this”

refers to the element bound

slide-50
SLIDE 50

e

$(“div”).click(function(e) { ... })

slide-51
SLIDE 51

corrected event object

Property Correction

target The element that triggered the event (event delegation) relatedTarget The element that the mouse is moving in (or out) of pageX/Y The mouse cursor relative to the document which mouse: 1 (left) 2 (middle) 3 (right) keypress: The ASCII value of the text input metaKey Control on Windows and Apple on OSX

slide-52
SLIDE 52

trigger

$(“div”).trigger(“click”) Alias: $(“div”).click()

slide-53
SLIDE 53

triggerHandler

doesn’t trigger the browser’s default actions

slide-54
SLIDE 54

custom events

$(“div”).bind(“myEvent”, function() { ... }) $(“div”).trigger(“myEvent”)

slide-55
SLIDE 55

hover

$(“div”).hover(function() { ... }, function() { ... })

slide-56
SLIDE 56

toggle

$(“div”).toggle(function() { ... }, function() { ... })

slide-57
SLIDE 57

live

$(“div”).live(“click”, function() { ... })

1.3

slide-58
SLIDE 58

5 parts of jquery

dom events effects ajax plugins

slide-59
SLIDE 59

Fades

$(“div”).fadeIn() $(“div”).fadeOut(“slow”)

slide-60
SLIDE 60

slides

$(“div”).slideUp(200) $(“div”).slideDown(“slow”)

slide-61
SLIDE 61

animate

$(“div”).animate({height: “toggle”, opacity: “toggle”}) $(“div”).animate({fontSize: “24px”, opacity: 0.5}, {easing: “expo”})

slide-62
SLIDE 62

Lab 4: Events and Effects

  • Fade out all of the divs
  • Make each img grow when you mouseover them (and shrink

again after you leave)

  • Make clicking an li collapse the sub list

Note: Use the Lab 2 File again

slide-63
SLIDE 63

5 parts of jquery

dom events effects ajax plugins

slide-64
SLIDE 64

make easy things easy

$(“div”).load(“some_url”); $(“div”).load(“some_url”, {data: “foo”}, function(text) { ... });

slide-65
SLIDE 65

it’s easy to do it right

$.getJSON(“some_url”, function(json) { ... }) $.getJSON(“some_url”, {data: “foo”}, function(json) { ... })

slide-66
SLIDE 66

it’s consistent

$.get(“some_url”, function(text) { ... }) $.post(“some_url”, {data: “foo”}, function(text) { ... })

slide-67
SLIDE 67

and powerful

  • async
  • beforeSend
  • cache
  • complete
  • contentType
  • data
  • dataType
  • error
  • global
  • ifModified
  • jsonp
  • processData
  • success
  • timeout
  • type

$.ajax Options

slide-68
SLIDE 68

and powerful

/* No Ajax requests exist, and one starts */ $(“div.progress”).ajaxStart(function() { $(this).show() }); /* The last Ajax request stops */ $(“div.progress”).ajaxStop(function() { $(this).hide() }); /* Any Ajax request is sent */ $(“p”).ajaxSend(function() { ... }); /* Any Ajax request completes (success or failure) */ $(“div”).ajaxComplete(function() { ... }); /* Any Ajax request errors out */ $(“div”).ajaxError(function() { ... }); /* Any Ajax request succeeds */ $(“div”).ajaxSucccess(function() { ... });

global ajax settings

slide-69
SLIDE 69

5 parts of jquery

dom events effects ajax plugins

slide-70
SLIDE 70

there are hundreds

slide-71
SLIDE 71

which are important?

slide-72
SLIDE 72

jquery ui

  • Draggables
  • Droppables
  • Sortables
  • Selectables
  • Resizables
  • Accordion
  • Date Picker
  • Dialog
  • Slider
  • Tabs

Widgets Primitives http://ui.jquery.com

slide-73
SLIDE 73

jquery forms

ajaxify a form in one easy step: $(“form.remote”).ajaxForm()

http://www.malsup.com/jquery/form/

slide-74
SLIDE 74

form validation

specify validation rules in your markup

http://bassistance.de/jquery- plugins/jquery-plugin-validation/

slide-75
SLIDE 75

metadata plugin

specify metadata for elements in markup <div data=”{some: ‘data’}”> $(“div”).metadata().some // returns ‘data’

http://jqueryjs.googlecode.com/svn/ trunk/plugins/metadata/

BASE

slide-76
SLIDE 76

Event Driven JavaScript

slide-77
SLIDE 77

http://github.com/ wycats/blue-ridge

slide-78
SLIDE 78

jQuery on Rails

slide-79
SLIDE 79

jQuery and RJS

slide-80
SLIDE 80

Rails 3

slide-81
SLIDE 81

Ajax and Rails

$.getJSON(“/rails/action”)

slide-82
SLIDE 82

Ajax and Rails

respond_to do |format| format.json { render :json => obj } end

slide-83
SLIDE 83

link_to_remote

link_to_remote "Delete this post", :update => "posts", :url => { :action => "destroy", :id => post.id }

slide-84
SLIDE 84

link_to "Delete this post", url(:action => "destroy", :id => post.id), :rel => "#posts"

link_to_remote

slide-85
SLIDE 85

$(‘a.remote’).live(“click”, function() { $(this.rel).load(this.href) });

link_to_remote

slide-86
SLIDE 86

<% form_remote_tag :url => ..., :update => “res” do -%> <% form_tag :url => ..., :rel => “#res” do -%>

form_remote_tag

slide-87
SLIDE 87

$(‘form’).each(function() { $(this).ajaxForm({ target: this.rel }) })

form_remote_tag

slide-88
SLIDE 88
  • bserve_field

<%=

  • bserve_field :suggest,

:url => { :action => :find }, :frequency => 0.25, :update => :suggest, :with => 'q' %> var lastTime = new Date; $('#suggest') .live(“keyup”, function() { if(new Date - lastTime > 250) { var field = $('#suggest'); var url = field.attr('rel'); field.load(url, {q: field.val()}); } lastTime = new Date; });

slide-89
SLIDE 89

periodically_call_remote

periodically_call_remote( :url => { :action => 'avgs' }, :update => 'avg', :frequency => '20') setInterval(function() { $('#avg') .load('/some/avgs'); }, 20000);