Announcements
Final in this room, Wds June 11, 8AM
Course evaluations - https://eval.ucdavis.edu
Review session Monday?
ECS 89
Pedometers!
Today:
More things we missed: JQuery
6/2
Final
Comprehensive; so review midterm material Javascript
Checking form data
Django Events
Relationshipto Apache, sqlite Canvas
Objects
Model, view, template; what code goes where?
Working with a database – tables, ForeignKey
When are functions called? General stuff
DOM; selection of items in CSS or Javascript
Regular expressions (a little)
JQuery Recall Ajax interaction
A library (or collection of libraries) to simplify and Need to define a callback function for button or
extend Javascript whatever (to do the interaction with the user); this
Kind of like the modules in Python, but taking over function initiates loading more data from the server
the language Need a second callback to wait for the load to
There are other Javascript libraries but JQuery is complete
by far the biggest They have to share the same XMLHttpRequest
Nice Web animation tricks object, since that is going to contain the response
Much simpler Ajax data fetching
Different syntax than pure Javascript …all of this adds up to some complexity.
Importing the JQuery library JQuery does this for you
Can get it from Google, Amazon, Yahoo, some other $(document).ready( function() {
commercial server, or load it onto your own server $("button").click(function () {
$('#myDiv').load("ajax_info.txt");
});
Google:
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/
1.4.4/jquery.js"></script>
$() selects a part of the DOM, same selectors as CSS
Own server: $(document) is the whole document
<script src=”jquery.js"></script> $(“button”) is all button objects
$(“#myDiv”) is the object with id=“myDiv”
JQuery does this for you Is this worth the different syntax?
$(document).ready( function() { There’s more different syntax, but then again there
$("button").click(function () { are a lot more cool tricks
$('#myDiv').load("ajax_info.txt");
});
});
Ready event is when document is completely loaded
and DOM created in browser
That last “load” method loads the contents of the
element from URL "ajax_info.txt” on server
Fades Slides
$("#removeBut").click(function () { $("#removeBut").click(function () {
$("canvas").fadeOut(2000); $("canvas").slideUp(2000);
}); });
$("#addBut").click(function () { $("#addBut").click(function () {
$("canvas").fadeIn(2000); $("canvas").slideDown(2000);
}); });
Like magic! Seriously, how is this done?
Ajax from other servers Additional library called GoMap
Attempt at security: ajax is only able to get files I had to download the library, which was
from the same server as the Web page it’s on. compressed Javascript
This is to prevent arbitrary Web pages from trying I added a map JQuery command and a <div> to
to access BofA, for instance, through Ajax, if you hold the map.
happen to be logged in to BofA. Wow
But this is so annoying! I want to add a Google
Map to my Arboretum page!
Work-around: JSONP. As far as I can tell, this is
like, well, OK, you can get files from other sites.
Where I learned all this – books!
JavaScript & jQuery: The Missing Manual
David McFarland
JavaScript: The Good Parts
Douglas Crockford
Python Web Development with Django
Forcier, Bissex, Chun
Learning Web Design
Jennifer Robbins
