IntroductionWelcome| 00:00 | (music playing)
| | 00:03 | Hey there! This is Ray Villalobos and
welcome to JavaScript and AJAX!
| | 00:08 | In this course I'm going to show you how
to use AJAX with JavaScript and jQuery.
| | 00:12 | I'll start by showing you what AJAX
is and how you can use the APIs in
| | 00:16 | JavaScript to build web applications
that update your pages without having to
| | 00:21 | reload them from a server.
| | 00:22 | I'll show you how to read and refresh
pages with AJAX using pure JavaScript.
| | 00:26 | Then we'll examine how to update and
modify the DOM, the Document Object Model
| | 00:31 | structure that browsers use
to access elements on a page.
| | 00:35 | We'll also explore reading and
parsing data in the XML and JSON format.
| | 00:39 | Plus I'll show you how to work with the
AJAX method in jQuery to read and write
| | 00:43 | information between the server and the client.
| | 00:46 | Finally, I'll show you how to build a
real AJAX project that lets you search
| | 00:50 | through a JSON data file with
JavaScript, jQuery, and CSS transitions.
| | 00:55 | So let's get started with JavaScript and AJAX.
| | Collapse this transcript |
| What you should know before watching this course| 00:00 | JavaScript and AJAX is not a
beginner course, and I'm starting with the
| | 00:03 | assumption that there's a few things you
already know before taking this course.
| | 00:07 | So you should be familiar with building
online projects and know how HTML works.
| | 00:12 | A really good course to check
out is James Williamson's HTML5:
| | 00:15 | Structure, Syntax, and Semantics.
| | 00:17 | You should also be familiar
with basic JavaScript concepts.
| | 00:20 | If you need help with that, check
out Simon Allardice's JavaScript
| | 00:23 | Essential Training.
| | 00:25 | Now, one of the important things to
understand about AJAX is that it is a
| | 00:28 | conversation that happens between your
server and your browser. Because of that,
| | 00:32 | it means that these examples are not
just going to work from your hard drive;
| | 00:35 | you're going to need to have a
server that your browser can talk to.
| | 00:39 | So for that you've got a couple of options.
| | 00:41 | The simplest, and what we'll do on
this course, is to work on a live server through FTP.
| | 00:45 | If you need help understanding FTP and
working with a hosted server, check out
| | 00:49 | my course on Managing a Hosted Web Site.
| | 00:52 | The other option is to run a
local server on your machine.
| | 00:55 | You can do that with software like
MAMP on the Mac or WAMP on the PC.
| | 00:59 | If you need help with that,
check out Installing Apache, MySQL, and PHP,
| | 01:04 | with David Gassner.
| | 01:05 | Now, you should be familiar and
comfortable working with text editors like
| | 01:08 | BBEdit, Sublime Text, or others.
| | 01:11 | In this course I'm going to use an
editor called Espresso, but you should use
| | 01:15 | your favorite text editor.
| | 01:16 | If you're on a Mac, you may want to check
out TextWrangler from the Mac App Store.
| | 01:21 | It has a cousin called BBEdit that is not
free, but is a very capable developer tool.
| | 01:26 | I like another editor that works
on Macs, PCs, and Linux workstations
| | 01:31 | called Sublime Text2.
| | 01:32 | Although it's not free, it's quite
capable and fun to use. And it really doesn't
| | 01:36 | matter which editor you use, as long as
it's something you're comfortable with.
| | 01:40 | Finally, you're also going to
need some sort of FTP application.
| | 01:44 | I'll be using Transmit from Panic on
this course, but if you're on a Mac or a
| | 01:49 | PC, you may want to check out Cyberduck,
which is a free FTP program for Mac and Windows.
| | 01:54 | So JavaScript and AJAX is not
necessarily for beginners, but with just a little
| | 01:58 | bit of background experience,
you should have no problem with this course.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you're a Premium member of the
lynda.com online training library or if you're
| | 00:04 | watching this tutorial on a DVD-ROM,
you have access to the exercise files used
| | 00:08 | throughout this title.
| | 00:09 | In the Exercise Files folder you'll
find folders for each video in the series.
| | 00:14 | Inside each of those folders you'll find
a version called workingfolder that has
| | 00:18 | the website when I began the video,
and you'll find a finished folder with a
| | 00:23 | copy of the website when I finished.
| | 00:25 | So I'll usually begin by opening up
the copies of the projects from my server
| | 00:30 | and open some of the files
in my favorite text editor.
| | 00:33 | If you're a Monthly member or an
Annual member of lynda.com, you don't have
| | 00:37 | access to the exercise files, but you can
follow along from scratch with your own assets.
| | 00:42 | So let's get busy with JavaScript and AJAX.
| | Collapse this transcript |
|
|
1. Getting StartedWhat is AJAX?| 00:00 | So you may be wondering what AJAX is
and why you want to learn more about it,
| | 00:04 | so let's take a look at how you can use AJAX
with JavaScript to build dynamic web applications.
| | 00:10 | Before we look at AJAX, let's talk about how
a browser gets information to display a page.
| | 00:14 | When a browser requests a page from a
website, the browser in your machine
| | 00:18 | is acting as a client.
| | 00:19 | The website is being delivered
through a machine that is serving up the
| | 00:23 | information, so we call that a server.
| | 00:25 | When you ask for a page, the client
makes a request to the server and the
| | 00:29 | server returns a page.
| | 00:30 | Sometimes when you're looking at a page,
you may want to ask for some additional
| | 00:33 | information from the server.
| | 00:35 | Say for example that your page has
thumbnails for a photo album and perhaps the
| | 00:38 | album has more thumbnails than
you can see in the current view.
| | 00:42 | Without AJAX if you want to see
more thumbnails, you'd have to make a
| | 00:45 | request back to the server and it
would send you a whole new page with
| | 00:49 | additional thumbnails.
| | 00:50 | That means the server ends up sending a
lot of information that you don't really
| | 00:53 | need all over again.
| | 00:55 | With AJAX, the server doesn't have to
send you the whole page; it just sends
| | 00:59 | the pieces you need--
in this case new thumbnails.
| | 01:02 | So how does that work?
| | 01:03 | AJAX is not a single technology, but a
group of technologies working together
| | 01:07 | to make that happen.
| | 01:09 | Technically, AJAX stands for
Asynchronous JavaScript and XML.
| | 01:12 | That's quite a mouthful, so let's
break that down piece by piece.
| | 01:16 | Asynchronous means that the client can
request new pieces of information from
| | 01:19 | the server at any time.
| | 01:21 | It doesn't have to wait for a page to reload.
| | 01:23 | A new request can be triggered by an
event like clicking on a button, hovering
| | 01:26 | over an image, or whatever.
| | 01:28 | The J in AJAX stands for JavaScript.
| | 01:30 | JavaScript is where all this magic takes place.
| | 01:33 | It handles the events that trigger a
new request, makes the requests for new
| | 01:36 | data to the server, and takes care of
updating only the part of the document
| | 01:40 | that needs to change.
| | 01:41 | JavaScript talks to the server through
a set of programming methods called an
| | 01:45 | API and uses what's called
an XHR or XML HTTP request.
| | 01:50 | This is where the X in AJAX comes from.
| | 01:52 | The XHR API lets the browser
send and request data from a server.
| | 01:58 | This can be a bit confusing because a
lot of people think of XML as a language
| | 02:02 | used to describe data that's a lot like HTML.
| | 02:05 | Sometimes people assume that the X in
AJAX means that the data from an AJAX
| | 02:09 | request has to be in XML, but the data
that gets transferred to and from the
| | 02:13 | server can be in any format, and it's
usually either a text file, HTML, or a
| | 02:19 | JavaScript object, like JSON.
| | 02:21 | So AJAX is really just a fancy term for
a technology that lets you build pages
| | 02:25 | that update without requiring a page reload.
| | 02:28 | JavaScript does most of the heavy
lifting with AJAX, and it uses the XHR API to
| | 02:32 | handle the communication
between the client and the server.
| | Collapse this transcript |
| Using a synchronous XHR request| 00:00 | The first step in working with AJAX is
to learn about the API browsers provide
| | 00:05 | for sending and retrieving information.
| | 00:07 | The way you access the API is by
using a XML HTTP request or XHR object.
| | 00:14 | So let's take a look.
| | 00:15 | I'm going to start off with a super-basic page,
and it's actually not going to be much of a page;
| | 00:19 | the only thing this page will do right
now is to load a separate script file
| | 00:22 | that's going to do all of the work.
| | 00:24 | So I'm going to go ahead and
add the script tag right here.
| | 00:26 | It's going to reference a file called script.js.
| | 00:29 | And I don't need this type =text/
javascript, so I'll take it out.
| | 00:33 | And I'm going to save this, and I'll
go ahead and create the separate file.
| | 00:36 | I have Transmit open right here, so
I'll right-click and select New File and I'll call it script.js.
| | 00:43 | I'm also going to need another file
called data.txt, so I'll create it by
| | 00:48 | right-clicking again, selecting
New File, and calling this data.txt.
| | 00:51 | Now, I'm going to open up data.txt.
| | 00:54 | This file is just going to
have the words "Hello World" here.
| | 00:58 | I'll save it, close this out, and
I'm going to open up my script.js file.
| | 01:04 | I don't really need to do
anything with the index.html anymore.
| | 01:07 | I'll go ahead and open this up.
And just to make a little bit easier to work
| | 01:11 | with, I'll drag it right next to this
index tab and so it will doc it at the
| | 01:16 | same place as this window.
| | 01:18 | So let's start by creating
the simplest of XHR requests.
| | 01:22 | We'll need to create a new variable
for the object that we're creating.
| | 01:30 | Next, we need to create the
request to our XHR object.
| | 01:34 | The open function of this object is
going to require three parameters.
| | 01:37 | First, the method, which is
going to be either GET or POST.
| | 01:43 | Then the location of the data file.
| | 01:45 | Since it's in the same folder as this
document, it will just be the name of the file.
| | 01:50 | I should note here that AJAX requests
have what's called a same domain policy,
| | 01:54 | so you cannot request data objects
from domains other than the one
| | 01:57 | you're currently on.
| | 01:59 | Now, the last parameter we pass is a
Boolean that specifies whether we want the
| | 02:04 | request to be asynchronous or not.
| | 02:06 | To keep things simple, we're making
that false, and that makes a request a
| | 02:10 | synchronous request.
| | 02:11 | This makes our browser wait until the
request is done before it does anything else,
| | 02:16 | and this is generally a bad idea, but this
is going to make our code simpler for now.
| | 02:21 | So we've created this request,
but it hasn't gone to the server yet.
| | 02:24 | The send command is going to take care of that.
| | 02:28 | Now, I'm also going to output
the results of the request to the
| | 02:31 | JavaScript console.
| | 02:32 | So I'm going to go ahead and save this and
take a look at what we get from the server.
| | 02:38 | So I'll load this page up on the server,
and right now the page doesn't do anything.
| | 02:43 | What I want to do is right-click.
| | 02:45 | I'm in Chrome right now, so I want to
select Inspect Element, and this will take
| | 02:50 | me to the Developer Tools.
| | 02:51 | And then I want to hit on
this tab that says Console.
| | 02:54 | So when you click on that tab
you'll see that it returned an
| | 02:56 | XMLHttpRequest object.
| | 02:59 | And we can open that up and take a look at
what's returned from our request to the server.
| | 03:04 | So one of the important things that we
see here is the status of the request.
| | 03:08 | That property gives us a number,
which in this case says 200.
| | 03:13 | That means the AJAX call was successful.
| | 03:15 | If any other number was here, like 404
or 500, that would mean the call to the
| | 03:19 | server was unsuccessful.
| | 03:21 | So we can modify our code
to check for that property.
| | 03:23 | So I'll save that and then I'll switch
over to Chrome, refresh the page, and
| | 03:31 | you'll see we get the same request.
| | 03:33 | Now, you can see that text from the
file that was loaded in the response and
| | 03:38 | responseText properties.
| | 03:40 | The responseText property is what you
want to use because it always has just
| | 03:44 | the text of our response.
| | 03:46 | So let's go ahead and output that to
our document with the writeln command.
| | 03:54 | So let's save that, and we'll switch
back into Chrome, and now we can see the
| | 03:59 | text Hello World appear in our browser.
| | 04:01 | So I mentioned before that these
requests we're making are synchronous and that
| | 04:05 | means the server is waiting until the
requests are done before it continues.
| | 04:09 | Right now you really can't see that as a
problem, because we're only making a single request.
| | 04:13 | So I'm going to change the code and make 100
requests to the server to see what would happen.
| | 04:24 | So I'm going to save this, and I'll
switch over to my browser, and I'll reload
| | 04:29 | the page, and you'll see all the requests being
made because I have the console open right now.
| | 04:37 | You can see that there's nothing
appearing in my browser until it finishes
| | 04:41 | with all the requests.
| | 04:42 | If you take a look at the Network tab
in the Developer Tools in Chrome, you can
| | 04:45 | actually see that the browser is
executing the requests in sequence and that the
| | 04:50 | page is not even updating until the
whole thing is done, and that's not
| | 04:53 | necessarily a good thing.
| | 04:55 | So use the XMLhttpRequest object to make
calls and request data from your server.
| | 05:00 | You start by opening a
connection and then sending the data.
| | 05:03 | You can check the status of your
requests, as well as access the text returned
| | 05:07 | by your request and do something
with that, like writing it to your page.
| | Collapse this transcript |
| Making requests asynchronous| 00:00 | So AJAX requests are supposed to be
asynchronous by nature, which means that
| | 00:05 | they should run in the background
independently of other events; otherwise
| | 00:08 | they would be called synchronous
requests and the language would probably be
| | 00:11 | called SJAX, right?
| | 00:13 | Really, it's the whole reason AJAX is awesome,
| | 00:15 | so let's take a look at
making asynchronous requests.
| | 00:18 | So I have a project here open with three files:
| | 00:20 | a data file with the words Hello World,
an HTML file whose sole purpose is to
| | 00:25 | call a JavaScript document, as well as
this JavaScript document, with a single
| | 00:30 | synchronous request.
| | 00:31 | I wanted to take a minute to look at
this and highlight some of the events that
| | 00:35 | the request triggered.
| | 00:36 | So I'm going to switch over to my
browser, and I'm going to load up this page,
| | 00:41 | and then I'm going to right-
click and select Inspect Element.
| | 00:45 | Then I'm going to switch over to the
console and take a look at this object
| | 00:49 | that's returned from my server.
| | 00:50 | So I'll open up that up, and you'll see that
there's a lot of different events right here.
| | 00:54 | They all start with on.
you see onabort, onerror, onload.
| | 00:57 | There's an event that we're
interested in called onreadystatechange.
| | 01:01 | The browser's AJAX API
maintains a property called readyState
| | 01:06 | that has a number indicating how
far along the request has progressed.
| | 01:10 | If the Value is 0, for example,
then the request hasn't been sent yet.
| | 01:14 | Once the value of that property
reaches 4, then the operation of sending and
| | 01:18 | receiving the requests has been completed.
| | 01:20 | So what we want to do is modify our code so
that it checks the status of this property.
| | 01:25 | If readyState has the value of 4,
then our asynchronous request has been
| | 01:29 | received and we can do
something with the data we get back.
| | 01:32 | First, before we send our request,
we want to change our open method and take out
| | 01:36 | the false parameter at the end.
| | 01:38 | We could send a Boolean value of true,
but this is the default and so we don't
| | 01:42 | really need to pass it.
| | 01:44 | Now we can insert an event handler.
| | 01:45 | Event handlers will run a
function when something happens.
| | 01:49 | We want to know when the
onreadystatechange event changes.
| | 01:53 | So before we send the
request, we'll check that event,
| | 02:02 | and this will be a function
literal, so I'll take out the name.
| | 02:05 | And then I'm going to grab all this right
here and paste it inside this event handler.
| | 02:11 | I also want to modify our if
statement so that it not only checks for the
| | 02:18 | request status, but also
for the readyState value.
| | 02:21 | So I'll copy this and I'll paste it
twice, and then I'll change this one to
| | 02:27 | say request.readyState.
| | 02:30 | So this should check to see if the value
of request.readyState is equal to 4, and
| | 02:37 | also if the request.status is 200.
| | 02:42 | So let me go ahead and save that,
and I'll switch over to my browser, and
| | 02:47 | I'll reload the page.
| | 02:49 | And you see that we get the same HTML
and we get the same result, but the way we
| | 02:54 | got the result is a little bit different.
| | 02:56 | So, although it doesn't look any
different, this is an honest-to-goodness proper
| | 03:00 | AJAX request. It sends a request
to our server and then waits for that
| | 03:04 | request to come back at some point;
that's called asynchronously.
| | 03:07 | If you want to learn more about
the XHR requests, take a look at this
| | 03:10 | document from Mozilla.
| | 03:12 | It's a good resource to see all of
the different options available in
| | 03:16 | XHR requests.
| | Collapse this transcript |
| Scripting for backwards compatibility| 00:00 | Although usage of early versions of
Internet Explorer have dropped dramatically
| | 00:04 | in the last few years, it's still
important to know how to run AJAX requests
| | 00:07 | that are compatible with those systems.
| | 00:09 | And actually, the whole concept behind
XHR requests was created by Microsoft and
| | 00:14 | implemented first in a browser in IE5.
| | 00:17 | To accomplish this, Microsoft
used a technology called ActiveX.
| | 00:21 | Because ActiveX was not available to
other browsers like Safari, Firefox, and
| | 00:25 | Chrome, they created a different
implementation of the API using the
| | 00:29 | XMLHttpRequest object.
| | 00:32 | Since ActiveX was seen as a
proprietary implementation, the XMLHttpRequest
| | 00:37 | object became the standard.
| | 00:39 | So like with a lot of other web
technologies, we've ended up with a fragmented
| | 00:43 | implementation when trying
to support older browsers.
| | 00:46 | Luckily, all we have to do to support
these browsers is to check if the browser
| | 00:50 | API has an XHR object.
| | 00:52 | So first, I'm going to change this line
right here to just create the variable.
| | 00:58 | Now I'm going to use an if statement.
| | 01:04 | So if the browser's API has the
XMLHttpRequest object, then I'm going to set the
| | 01:09 | request variable to this new object;
| | 01:14 | otherwise, we'll check for the ActiveX object.
| | 01:20 | The rest of our code is not going to
change and our AJAX code should execute
| | 01:24 | in the same manner.
| | 01:24 | So let's go ahead and save this and
I'll switch over to my browser and I'll
| | 01:29 | just refresh the page.
| | 01:29 | You see that the page looks exactly the
same, but my code is now more compatible
| | 01:34 | with older browsers.
| | 01:35 | So even though you might not run
into a situation in which you have to
| | 01:37 | support really old browsers, it's good
to know that doing it takes just a few lines of code.
| | Collapse this transcript |
|
|
2. Modifying the DOMUpdating the DOM with getElementById| 00:00 | AJAX uses JavaScript to make
changes to the current document through
| | 00:03 | something called the DOM.
| | 00:05 | This is the Document Object Model,
and its job is to keep track of the structure
| | 00:09 | of our HTML document.
| | 00:10 | When you work with AJAX it's usually
because you want to change something in
| | 00:13 | your page after it has loaded.
| | 00:15 | The easiest way to make a change in
the DOM is through a JavaScript method
| | 00:19 | called getElementByID.
| | 00:21 | So the text editor that I use has
a really nice DOM preview feature,
| | 00:25 | so I'll turn that on right here, and you
can see the DOM for our current HTML document.
| | 00:30 | You can see that there is an HTML tag
and inside the HTML tag we have a head
| | 00:33 | section that has a couple of other elements, as
well as a body section with just a script tag.
| | 00:38 | If we add another element here--let me
add a headline--you will see that that
| | 00:45 | element gets added into the document structure.
| | 00:49 | If I add a paragraph, that also gets
added, and if I create an element like an
| | 00:56 | emphasis tag inside my paragraph, that gets
added as a children of this paragraph object.
| | 01:02 | Now, if you do add a div with an ID
then that ID becomes a way that you can
| | 01:11 | target that particular element.
| | 01:13 | So let me go ahead and save this and
I'll switch over to my script.js file and
| | 01:17 | I'll get rid of this console.log method
that outputs our content to the console.
| | 01:22 | Now, since we have an ID, we can
easily target it in our JavaScript file.
| | 01:25 | First we're going to need to create
a variable and then find that element
| | 01:28 | using getElementById.
| | 01:29 | So I am going to replace this
document.writeln command and I'll create a
| | 01:34 | variable called modify.
| | 01:35 | I'm going set that variable called
modify to be equal to an element in the DOM
| | 01:41 | with an ID of update.
| | 01:45 | Now that I have targeted that div in
that variable, I can use that variable and
| | 01:49 | modify the innerHTML, which is the HTML
inside the element, to be whatever I want.
| | 01:55 | In my case, I want to use the request
and then look for the responseText. Let's
| | 02:01 | go ahead and save this, and I'll
switch over to my browser, and I'll load up the
| | 02:05 | page and you could see the document has
loaded Hello World into just the ID for update.
| | 02:12 | So let me go ahead and
right-click and Inspect Element.
| | 02:16 | We could see the div with the ID of
update is right here, and I have inserted the
| | 02:20 | text Hello World from my
external document into that div.
| | 02:24 | So getElementById combined with
innerHTML gives you a very quick way to update
| | 02:29 | any element in your DOM as long as it has an ID.
| | 02:33 | This is sort of like a laser that
lets you target an individual element
| | 02:36 | very quickly.
| | Collapse this transcript |
| Modifying elements with getElementsByTagName| 00:00 | When working with AJAX sometimes you
want to access an individual element and
| | 00:04 | sometimes you want to access groups of elements.
| | 00:06 | We looked at how to do individual
elements with getElementById in the last
| | 00:10 | video, and in this movie we are going
to take a look at accessing groups of
| | 00:14 | elements with getElementByTagName.
| | 00:17 | So you could, for example, ask for the
third list element in an unordered list.
| | 00:21 | We are going to need to update our
HTML code to do something like that.
| | 00:25 | So, I'll get rid of this div right
here and then I'll add an unordered list
| | 00:29 | with some elements.
| | 00:30 | Now I am going to save this and switch
over to my script code and modify this
| | 00:39 | getElementById and make that
getelements. Remember, there is an S in there.
| | 00:45 | ByTagName, the tag that we want
to access is the list item tag.
| | 00:52 | So by doing this, we are going to place an
array of elements into the modify variable.
| | 00:56 | Now that we've got the array, we can
access an individual element of that array
| | 01:00 | by just putting in the
index of the element here.
| | 01:03 | So, if we do modify(2) it will access
the third element of the array, because
| | 01:08 | these are 0 index, so the zero element
is actually the first element, element
| | 01:13 | number 1 is the second element,
and element 2 is the third element.
| | 01:17 | So, if I save this and I switch over
to my browser and I refresh the page,
| | 01:22 | you will see that the third element
in my list has been updated with the
| | 01:25 | content of our data file.
| | 01:27 | So we grabbed all the list items and
we targeted just the third element.
| | 01:32 | Interestingly enough, if you have more
than one list on the page, it'll actually
| | 01:36 | let you cycle through all the
elements as if it were a single array.
| | 01:40 | Let me show you how that works.
Switch back over to my editor.
| | 01:44 | So, in the index.HTML document I am
going to get the original list and then make
| | 01:48 | another copy right here.
| | 01:50 | So, let me save that and I'll
go over to my script element.
| | 01:53 | I know that there are six
items in the unordered list.
| | 01:56 | So if I ask for the eighth element, let's
take a look at what happens in our browser.
| | 02:01 | So I'll refresh, and now we have two lists
and in the ninth position--that's 6, 7, 8, 9--
| | 02:06 | it's placed the text of our data file.
| | 02:09 | There are some more objects down here.
| | 02:11 | So there is the other bullets.
| | 02:13 | But it updated the ninth element.
| | 02:15 | Now there is actually a couple of other
ways that you can get to the same place,
| | 02:19 | so let's go ahead and examine that.
| | 02:19 | So right here, when I am using
modify=document.getElementsByTagName, I am
| | 02:24 | looking for specifically
all the list item elements.
| | 02:27 | I can actually do multiple
copies of this, so I am going to do a
| | 02:30 | document.getElementsByTagName. And first,
| | 02:35 | I am going to look for the on order
list elements on the page--right now
| | 02:39 | there's two of them--and I am going
to look for the first unordered list
| | 02:43 | element and inside that element I'll
get the ElementsByTagName('li'). That will
| | 02:49 | target our second list, not the first
one. And now I will switch the index here
| | 02:55 | to be index number 2.
| | 02:56 | So this is actually doing the same
thing in a slightly different way.
| | 03:00 | First we are getting to the second list
by using the index (1) here, and then we
| | 03:05 | are getting to the elements inside
that list that are of type list item and
| | 03:11 | getting to the third element inside that object.
| | 03:14 | So, if I save this--and I am going to
go back into my page and just refresh--
| | 03:20 | you'll see that nothing is really
changing, but the way that we are getting to
| | 03:23 | those elements is different.
| | 03:25 | So what if we wanted to cycle
through all the elements in a list?
| | 03:28 | Say that you wanted to update all
the elements in our list items with the
| | 03:32 | content from the external
document. In that case you can use a loop.
| | 03:36 | So, let's go back into our code.
| | 03:38 | So we went to, after the modify variable
gets instantiated, when I create a for
| | 03:43 | loop, and that loop is going to go from
0 to the modify variable's length--and
| | 03:50 | remember that this modify
variable is now an array,
| | 03:53 | so any methods or properties that I
would use on an array would be valid here.
| | 03:58 | And what I wanted to hear is modify,
using each index, the innerHTML of each one
| | 04:04 | of those objects with the
response text from the request.
| | 04:10 | And I also want to make sure that I
modify my variable here, because it's only
| | 04:14 | targeting the second list element, so
I want to modify that to just look for
| | 04:18 | getElementsByTagName, and I'll
delete this line right here.
| | 04:21 | So, what this is going to do is look for
all the elements in your page that have
| | 04:26 | a TagName of list item.
| | 04:28 | It's going to place all that stuff into
the modify variable, and then it's going
| | 04:31 | to cycle through each modify variable,
changing the HTML of each one of them to
| | 04:35 | the responseText from our request.
| | 04:38 | So let's save that, switch over to our
browser, and we'll refresh, and now you'll
| | 04:42 | see that it's actually updating
every one of these bullet items.
| | 04:45 | So, getElementsByTagName is really
handy for cycling through a series of DOM
| | 04:49 | elements. Understanding how to handle
the array it returns is one of the keys
| | 04:53 | to modifying your DOM with AJAX.
| | Collapse this transcript |
| Parsing XML using AJAX| 00:00 | AJAX was originally designed to read
data stored in a format called XML, or
| | 00:05 | Extensible Markup Language.
| | 00:06 | It's very much like HTML, but
you get to make your own tags.
| | 00:10 | So let's take a look at an example of what
it takes like to read data in this format.
| | 00:13 | We have a new file in
our folder called data.xml.
| | 00:17 | It's a file with some data in the XML format.
| | 00:20 | If you know a little HTML
this should be super easy to read.
| | 00:23 | You can open an XML file with some
browsers to see the structure a little bit better.
| | 00:28 | So we have a speakers object, and
inside the speaker objects we have a
| | 00:33 | series of speaker objects.
| | 00:35 | Each one of the speaker objects has
different parts to it, so for example we
| | 00:39 | have the <name> tag, the <shortname>
tag--which is the same as the <name> tag
| | 00:43 | but without spaces or special
characters--as well as the <reknown> tag and a <bio>
| | 00:48 | that has some information about the speaker.
| | 00:51 | Reading this into JavaScript is super
simple. As a matter of fact, the XHR object
| | 00:56 | comes with a special
attribute called responseXML.
| | 00:59 | It's sort of like the responseText
property, except that it converts the data
| | 01:03 | into an object that you can
manipulate through JavaScript.
| | 01:05 | So, before we do anything else, let's go
back into our HTML file and change this
| | 01:09 | so we're back to a div with an id of update.
| | 01:12 | So, I am going to go ahead and save
this, and we are going to switch to the
| | 01:18 | script.js file. And now we need to
change the request so that it doesn't request
| | 01:23 | the data.txt document, but
instead uses our XML document.
| | 01:27 | I am also going to remove the lines of code
that are looping through all of my elements.
| | 01:32 | So now that we are linking to the XML
document instead of the text document let's just
| | 01:36 | take a look at the
responseXML property of our request.
| | 01:44 | So let me save that and switch over
to my browser, and let me hit the Back
| | 01:48 | button to go back into my
file, and then I'll refresh this.
| | 01:51 | So, let's go into our console and
take a look at what we get back.
| | 01:54 | So, you see that what we get back is
essentially a document with some data inside it
| | 02:00 | that's pretty much like
what we saw in the XML file.
| | 02:03 | The XML object is really easy to go through.
| | 02:06 | We can use the
getElementsByTagName with an HTML or an XML document.
| | 02:11 | So if we wanted to get to, say, the
name of the second user, you can do something like this.
| | 02:19 | So let me go ahead and save that, and
then I'll switch over to my browser and
| | 02:24 | we will hit Refresh.
| | 02:25 | So what we get back is the
entire <name> tag of that XML node.
| | 02:29 | So every element inside an XML
structure is considered a node. Elements inside
| | 02:35 | other elements, including the text
inside an element, is also considered a node.
| | 02:39 | So, to get to the text of
this node we could use this.
| | 02:45 | So let me save that and switch
back to my browser and hit Refresh.
| | 02:49 | You can see that we are getting the name.
It still has quotes which is not exactly
| | 02:52 | correct, but at least we are
not getting the tag anymore.
| | 02:55 | So there is actually a shortcut for
the first element in any array, and
| | 02:58 | it's called firstChild.
| | 02:59 | So if we do this, it's the same as
writing child nodes zero. Refresh,
| | 03:04 | we get the same results. Back over here,
| | 03:06 | so if you look at what we get, it's the
value in quotes, and it's not exactly the
| | 03:10 | text of the node. To get that we would
have to use the nodeValue property like this.
| | 03:15 | So I am going to save that, switch
over to my browser, refresh, and now we get
| | 03:20 | just the text without the quotes.
| | 03:22 | So, let's see what it will take
to make a list of our speakers.
| | 03:25 | We'll have to cycle through
the XML file using a for loop.
| | 03:28 | When the request is ready we'll
create a variable that looks for the
| | 03:32 | elements with a tag of name.
| | 03:33 | Then we are going to create an
output variable with an unordered list.
| | 03:45 | Inside this, we are going to create a
loop. And here we'll go ahead and add the
| | 03:51 | value of each result as list items.
| | 03:57 | Now we will send the results of all
this to our div with a value of update.
| | 04:04 | So let me save this and preview this in my
browser, and you can see the list of all our names.
| | 04:12 | So although you can read data in any
format besides XML, the AJAX API was
| | 04:16 | designed with an easy-to-use responseXML
property that makes it a trivial matter
| | 04:21 | to read and parse XML files.
| | Collapse this transcript |
| Reading JSON files| 00:00 | Although AJAX was designed to work
with files in the XML format, it will read
| | 00:04 | the contents of any text file.
| | 00:06 | So the data can really be in any format;
the trick is to know how to parse or
| | 00:10 | translate the data into objects that
JavaScript can manipulate. An obvious
| | 00:14 | choice is to use the file in the JSON format.
| | 00:16 | JASON stands for JavaScript Object
Notation, and is a way to structure data so
| | 00:20 | that it can be easily
converted to a JavaScript object.
| | 00:23 | If you want to learn more about JSON,
make sure you check out my course on
| | 00:26 | Building Facebook
Applications with HTML and JavaScript.
| | 00:29 | There is a section called Adding JSON
Data Feeds, and it has a good introduction
| | 00:33 | to the JSON language.
| | 00:35 | So, let's go back and take a look
at what a JSON document looks like.
| | 00:38 | If you watch the movie on parsing XML
using AJAX, this is the same data, but in
| | 00:43 | a slightly different format.
| | 00:44 | The good news is that parsing data is
super simple--sort of; some browsers
| | 00:48 | support a parse command,
| | 00:49 | so let's go into the JavaScript file and
replace the code for processing or XML file.
| | 00:54 | So, I'm going to modify this open
command to open the JSON document.
| | 00:59 | Now I'm going to take out the rest of
this code right here, and I'll create a
| | 01:04 | variable called items and set it to
the JSON object and use the parse command
| | 01:10 | with the responseText of the request. Then I'll
output this to the console so we can look at it.
| | 01:19 | So let me save this and I'll switch
back to a browser, refresh our page, And if
| | 01:25 | you have the console openm remember that
you could just right-click on this page
| | 01:29 | and select Inspect Element if you are
using Google Chrome like me. And I can see
| | 01:33 | the series of objects that this returns.
| | 01:35 | If I open that up, I can see each
individual object and inside each object, I can
| | 01:40 | see different name and value pairs.
| | 01:42 | So this is a little different
from what we would see with XML.
| | 01:45 | It's essentially an array of objects
and each object has a label and the
| | 01:49 | data from our file.
| | 01:50 | So here's the bad news: JSON parse is
not available in some older browsers.
| | 01:55 | So, if you go to this website,
you could see that it's available in most
| | 01:58 | modern browsers, but a lot of the older
versions of IE do not support the parse command.
| | 02:03 | So your options are to use EVAL--but that
has some security issues--write your own
| | 02:07 | parser, or use an existing library.
| | 02:10 | jQuery for example,
takes care of this very well.
| | 02:13 | Let's go back to our code.
| | 02:14 | So we'll modify our code so
that it outputs a list of speakers.
| | 02:18 | We'll start by creating the output
variable, just like we did with XML, and then in here
| | 02:26 | we'll loop through the valleys of the objects.
| | 02:28 | To do that I am going to
use the for in statement.
| | 02:35 | Finally, we'll target the update element
with the results of our output variable.
| | 02:43 | So let's save this and switch back to
our browser, refresh the page, and you can
| | 02:49 | see that the list appears.
| | 02:50 | So working with JSON files is
pretty easy with the parse command.
| | 02:53 | However, it might not be available in
all browser versions. So for ultimate
| | 02:57 | compatibility, I recommend that
you use a library like jQuery.
| | Collapse this transcript |
| Using event-driven AJAX| 00:00 | You can use AJAX to update items on a
page as a result of some type of event.
| | 00:04 | Events in JavaScript can happen as a
result of a user action, like a click or a
| | 00:09 | mouse over an element, and some are
triggered by other events, like when
| | 00:14 | something has finished
loading or when a key is released.
| | 00:17 | You can use JavaScript to capture
the event when it happens and trigger a
| | 00:21 | series of commands.
| | 00:22 | So first, we're going to
clean up our HTML a little bit.
| | 00:24 | We'll take out this AJAX page h1.
| | 00:26 | It's not really doing very much.
| | 00:29 | So let me go ahead and save that.
And then I'm going to take my script and wrap
| | 00:33 | it inside a function.
| | 00:34 | So right now this script is executing
whenever it gets to it in the index.html
| | 00:40 | file, which is at the very end.
| | 00:41 | So this page loads and then the script
runs right here, so all this is executing
| | 00:46 | right then. So what we'll do is
prevent that from happening, by putting
| | 00:49 | everything inside a function.
| | 00:54 | So we'll grab all those code
and we'll paste it right there.
| | 00:56 | Let me go ahead and indent that a little bit.
| | 01:02 | And now if I save this and I take a
look at my page, you'll notice that nothing
| | 01:07 | is happening because that
function is not being called.
| | 01:10 | So one of the ways that we can call a
function is by creating a trigger. So I'm
| | 01:14 | going to add a button here
and I'll call this button Load,
| | 01:17 | and I'm going to do an onclick
event here, and it looks just like an
| | 01:20 | attribute. And then I'll put LoadAJAX, which
will call the function we created in JavaScript.
| | 01:25 | So let me save that and I'll switch
over to the browser, refresh the page.
| | 01:30 | We see the Load button, and when we click
on it, it should load the text from our file.
| | 01:34 | Of course there's more events that you can use.
| | 01:37 | For example, you can see if somebody
has placed the mouse over the button.
| | 01:40 | So we can do that with a
different kind of event here;
| | 01:43 | sometimes these are called event handlers.
| | 01:45 | So we can do an onmouseover, and
I'll save that, refresh our page.
| | 01:51 | Now when I go over this
button, it loads the text.
| | 01:54 | So mouse over that button and there's the text.
| | 01:57 | So something interesting about events
is that not all elements on a page can
| | 02:01 | trigger the same types of events.
| | 02:03 | So for example, there's an element
called onload, so you might be tempted to
| | 02:07 | say something like this: whenever this button
finishes loading, then execute the function.
| | 02:12 | So let me save that and see what
happens. When I refresh the page, this is not
| | 02:16 | loading, and it really
doesn't matter what we do here.
| | 02:18 | That's because the onload event
doesn't make sense for buttons;
| | 02:22 | it really only makes sense
for a page or a body tag.
| | 02:26 | So it's an attribute that
can only go in the body tag.
| | 02:29 | So let me save that and come over here.
| | 02:32 | I'll refresh the page, and now you can see
that it's kind of doing what it did before.
| | 02:37 | As soon as the page loads, or as soon
as the body of the page has finished
| | 02:40 | loading--and it's going to
load the text from our file.
| | 02:44 | That's just one thing to keep in mind, not
all elements can trigger any type of event.
| | 02:47 | There's actually a ton of events.
| | 02:48 | This is a really good place to find
out about all the different events:
| | 02:52 | when they happen and what triggers them.
| | 02:54 | So events can be triggered either as
attributes, like we have done right here,
| | 02:58 | and they can also be
triggered directly through JavaScript.
| | 03:00 | So I'm going to take out the onload
handler here and I'm going to save this.
| | 03:05 | If I want to trigger this with
JavaScript, I'm going to add an ID to my button
| | 03:08 | so I can easily get to it.
| | 03:11 | So I'm going to save this and I'll
switch over to the JavaScript file, and what
| | 03:14 | I'm going to do is create a
variable that gets to that button using
| | 03:21 | document.getElementById, and the id that I
want is the loadbutton that we created in HTML.
| | 03:27 | So that puts the button
in the mybutton variable,
| | 03:30 | and then what I can do is check for a click.
| | 03:33 | So I can say mybutton.onclick= and then
I can execute the function called loadAJAX.
| | 03:41 | So I'll save that. And notice
the different notation here.
| | 03:43 | I don't need the parentheses in here.
| | 03:45 | So I'll save that, come over here,
refresh, Load button, and now when I click
| | 03:49 | on the button, it loads my text.
| | 03:52 | So there's a different way to write
this, and it doesn't really matter which way
| | 03:55 | you do it, but you'll see
it in both ways on the web.
| | 03:59 | So one of the things that you can do
to shorten this a little bit is actually
| | 04:02 | create the function as a function literal.
| | 04:04 | So I can get rid of all this right here
and just say =function and then it will
| | 04:11 | just execute the function as
soon as that mouse is clicked.
| | 04:14 | That's okay if this is the only button
that's going to load the list of names for us.
| | 04:18 | If you wanted to use a function that was more
generic, you might want to keep it the other way.
| | 04:22 | So let me save this and over here
refresh, and we click and there's our text.
| | 04:27 | So events are pretty easy to work with.
| | 04:29 | They can be triggered either through
an attribute in the HTML or through an
| | 04:33 | event handler in JavaScript.
| | Collapse this transcript |
|
|
3. jQuery AJAXUnderstanding and installing jQuery| 00:00 | jQuery is a framework that fixes
compatibility issues that happen with
| | 00:03 | JavaScript in older browsers.
| | 00:05 | The library also gives you a lot of
additional tools for working with the DOM.
| | 00:09 | One of my favorite features of the
framework is how easy it makes it to work with AJAX.
| | 00:14 | So let's go ahead and take a look at some of
the options you have for installing jQuery.
| | 00:18 | So there's two ways you can
include jQuery into your projects.
| | 00:21 | You can download a copy or use it from a CDN.
| | 00:24 | A CDN is a content delivery network.
| | 00:27 | You can see links to those if you click
on the Download tab right here and then
| | 00:31 | look over here to the left.
| | 00:32 | Those are links to the most
popular CDN libraries that have jQuery.
| | 00:36 | You can also try cdnjs.com;
| | 00:39 | that has copies of a lot of
libraries, including jQuery.
| | 00:43 | So the advantage of using a CDN is
that if a browser has loaded your library
| | 00:48 | from a CDN when you visited some other
website, it may already be cached in your
| | 00:53 | browser when it comes to your site,
so your page will load a lot faster.
| | 00:56 | The disadvantage is that CDNs will only work
while you have a live connection to the Internet.
| | 01:01 | If you're working with a local copy or
maybe flying around on an airplane or
| | 01:05 | coding where your connection is spotty,
then the CDN is not going to load at all
| | 01:09 | and none of your JavaScript will work.
| | 01:11 | So you load them both into your
code in pretty much the same way.
| | 01:13 | So let's go ahead and go to the
front of the jQuery website and click on this Download link.
| | 01:19 | Now, before you do that, see
that there's two options here.
| | 01:22 | You have the option of
downloading a Production version or a
| | 01:25 | Development version.
| | 01:26 | Now, the Development version has a
copy of all the code with comments that's
| | 01:30 | super easy to read, but
it's obviously a lot bigger.
| | 01:33 | Whereas the Production is minified
and Gzipped, which means that it's
| | 01:36 | compressed, it has no comments, a lot
of the variable names have been changed
| | 01:40 | so that they're smaller, and it's
really pretty impossible to read.
| | 01:43 | You should use the Development version
if you're going to be editing something
| | 01:46 | about the jQuery JavaScript code;
otherwise, just use the Production version, and
| | 01:50 | that's what I'm going to do.
| | 01:52 | So I'll click on Download jQuery.
| | 01:53 | Sometimes you see this kind of code
right here, which is essentially the
| | 01:56 | JavaScript code for jQuery.
| | 01:57 | I told you the Production version
was hard to read, and I wasn't kidding.
| | 02:01 | Now, to save this I'm
going to go to the File menu--
| | 02:03 | I'm using Safari right now--and I'm
going to select Save As. And here I'm just
| | 02:08 | going to rename this jquery.js and
I'll just save it on the Desktop.
| | 02:14 | I want to make sure that from this
Format menu, I choose Page Source.
| | 02:19 | Make sure it's not in Web Archive.
| | 02:20 | So I'll select that, hit Save, and now
that saves it into our desktop, so I'm
| | 02:25 | going to switch there.
| | 02:28 | And what I need to do now
is copy this into my server,
| | 02:33 | so I'll copy that just by dragging it.
| | 02:35 | I'm using Transmit as my
FTP program, so there it is.
| | 02:38 | It's already on my server.
| | 02:39 | And now what I want to do is select the
files that I need and open them up in my editor.
| | 02:44 | So I've got all these
files opened up in my editor.
| | 02:50 | There's the jquery.js library.
| | 02:52 | I really don't need to see it,
so I'm just going to close it up.
| | 02:55 | What I need to do to insert it is go to
my index.html file and then load it up
| | 02:59 | just like I would any other script.
| | 03:01 | I want to make sure that I load it up
before my script.js, because that's where
| | 03:04 | I'm going to be putting my regular
JavaScript and I want to make sure that the
| | 03:07 | library is there before my other scripts load.
| | 03:11 | So I'll do a script tag, and as the
source I'll just type in jquery.js.
| | 03:17 | I don't need this part.
| | 03:19 | Now, the only difference between this
and loading it from a CDN is that if you
| | 03:23 | were to load this from a content
delivery network, you'd want to get the URL of
| | 03:27 | the library and just copy that from
here and paste it into your script tag.
| | 03:33 | But I'm not going to do that
because I'm just using a local copy.
| | 03:36 | So save it and now jQuery will load into
my application, and it's ready for me to use.
| | 03:42 | Loading up jQuery is normally done
using one of the CDNs when you're in
| | 03:45 | production, but keep in mind that if
you're going to be offline and developing,
| | 03:49 | then downloading a copy is a super-smart idea.
| | 03:51 | One more thing: you should always
load jQuery before your regular JS file.
| | 03:55 | That way all the power of the
framework is going to be available when you
| | 03:58 | write your scripts.
| | Collapse this transcript |
| Working with jQuery and AJAX| 00:00 | jQuery is a great library and one of
its mottos is that you can write less
| | 00:04 | and do more, and one of the places where you
can really see that is when working with AJAX.
| | 00:08 | So let's take a look at how
we can use AJAX with jQuery.
| | 00:11 | jQuery provides several methods for
working with AJAX calls, and you can see all
| | 00:16 | them in this page right here.
| | 00:19 | So for the most part, you end up
working with one or two of these.
| | 00:22 | So let's go ahead and load
some content onto our page.
| | 00:25 | Our HTML file is a simpler version of
what we had in the last chapter, just
| | 00:30 | a div with an id of update, and we're
loading the jQuery as well as our script file.
| | 00:35 | The script document right now is empty,
and our data file just has the words Hello World.
| | 00:39 | So I'm going to switch over to my script and
I'm going to type in some jQuery right here.
| | 00:44 | So I'm going to target the update id element
and then load into it our data.txt document.
| | 00:53 | So let me save that and switch over to
my browser, refresh my document, and you
| | 00:58 | can see the text Hello World.
| | 01:00 | So there's actually a lot going on in
that very simple line of jQuery code.
| | 01:04 | jQuery is taking care of a lot of
problems with backwards compatibility in older
| | 01:08 | browsers, and it also
creates and sends the XHR request.
| | 01:12 | Not only that, jQuery gives you
new ways of selecting elements.
| | 01:16 | Here we're selecting something in the DOM--
in this case a div with an id of update.
| | 01:20 | If you watched the chapter on
modifying the DOM, you know that JavaScript has
| | 01:24 | two main methods for getting to elements:
| | 01:26 | getElementById and getElementsByTagName.
| | 01:29 | You may have been wondering why I
didn't talk about getElementsByClassName, and
| | 01:33 | that's because although there's some
support for this method in a lot of modern
| | 01:37 | browsers, the support is not yet
universal, and even if it were, working with
| | 01:41 | complex selectors is much
easier to do with jQuery.
| | 01:44 | Let's modify our code so that we
can use a class name instead of an ID.
| | 01:49 | So I'm just going to change this ID
right here to class, and all I have to do in
| | 01:54 | jQuery is just modify this pound sign
right here to select the class of update.
| | 01:58 | I'm going to save that, switch over to my
browser, refresh, and the text still comes up.
| | 02:04 | So, classes are supposed to refer to
elements that occur multiple times in the DOM.
| | 02:08 | Let's go ahead and go to the HTML file
and just copy this update element a few times.
| | 02:14 | So I'm going to save this and I'll go
back to my browser and I'll hit refresh,
| | 02:20 | and now you can see that
it's loading multiple times.
| | 02:23 | So the load event is just going to take
all our content with the same class and
| | 02:27 | replace it with the text from our file.
| | 02:29 | So jQuery is not only going to
improve what you can do with JavaScript, but
| | 02:32 | it goes beyond that and gives you totally
new selectors with which to access the data.
| | 02:37 | So check this out.
| | 02:38 | I'm going to go into my JavaScript file.
So what I'm going to do is change this
| | 02:41 | so that I only select the
first of all the update classes.
| | 02:45 | So I'm going to save that and switch
over to my browser and I'm going to refresh.
| | 02:49 | And you can't really see what's going on here.
So I'm going to over to the Elements.
| | 02:52 | I have the Developer tools open.
| | 02:55 | If you don't have that open, just
right-click and select Inspect Element.
| | 02:58 | I'm using Google Chrome as my browser.
| | 03:00 | But take a look at the code right here.
| | 03:02 | It's still showing the other classes,
but it's only changing the first one.
| | 03:06 | And that's pretty cool.
| | 03:07 | So let's go back and try another one.
| | 03:11 | We can actually tell jQuery to
just load up the even classes.
| | 03:15 | And I'll save that, come over here,
refresh, and if you take a look at our code,
| | 03:19 | we've got three up here, but it only
did every other class right here--and
| | 03:24 | that's really, really powerful,
| | 03:25 | easy way to do something
like zebra striping on tables.
| | 03:28 | Using jQuery is going to take care of a lot
of the grunt work necessary to work with AJAX.
| | 03:33 | It also gives you some powerful
new ways to select DOM elements.
| | 03:36 | I think it's good to understand the XHR
object and how JavaScript handles things.
| | 03:41 | When it comes down to taking care of
business, it's hard to argue with the
| | 03:44 | convenience that JQuery provides.
| | 03:46 | If you want to know more by jQuery,
make sure you take a look at Joe Marini's
| | 03:49 | excellent course, jQuery Essential Training.
| | Collapse this transcript |
| Reading data with jQuery| 00:00 | In the last movie we used jQuery's
load method to load some text from
| | 00:04 | an external source.
| | 00:05 | If you're looking to load structured
data, jQuery has a method called getJSON.
| | 00:09 | As the name implies, it's designed
to load data in the JSON format.
| | 00:13 | So once again, I'm beginning with a
simplified version of our HTML file.
| | 00:17 | It's pretty much just a div with an ID
of update, and then they call to jQuery,
| | 00:21 | as well as our script file.
| | 00:23 | Our script file right now is empty, and
we're going to need a file called data.json.
| | 00:27 | It has the data that we
need to load into our document.
| | 00:31 | So in our script file we'll start
off by calling the getJSON method.
| | 00:38 | We'll pass it along the file name that we
want to load and then we'll create a function.
| | 00:43 | This would be a function
literal so it will have no name.
| | 00:47 | And we want to pass along the data
that we get from the getJSON command
| | 00:51 | into this function.
| | 00:52 | So let's go ahead and output the data to
our console so we can take a look at it.
| | 00:59 | So let me save this, and I'll
switch back to our browser.
| | 01:02 | I'll hit the Refresh key.
| | 01:04 | And I want to make sure I
switch over to the Console tag.
| | 01:08 | And that should give you a
list or an array of objects.
| | 01:12 | And if we open that up, we can see that
each one of those objects has name and
| | 01:16 | value pairs with different parameters here.
| | 01:18 | And this is essentially how a
JSON object looks to your browser.
| | 01:22 | So I want to output a list of some of
the names of our speakers, so let's go
| | 01:24 | ahead and prepare an unordered list right here.
| | 01:28 | I'll take out this console.log command
and I'll create a variable called output.
| | 01:32 | This is going to have an ordered list
here. And then at the end of this list, I
| | 01:39 | need to close the ul tag.
| | 01:40 | So instead of using the for-in
JavaScript loop, I'm going to use jQuery's
| | 01:48 | built-in Each statement.
| | 01:49 | I'm going to pass along the
data and then a function literal.
| | 01:56 | And that function literal is
going to have a couple of variables:
| | 01:59 | one of them called key and the
other one called value.
| | 02:04 | So this is similar to using a for-
in statement, but a little better
| | 02:07 | because jQuery always tries to do a great job
of dealing with browser and platform issues.
| | 02:12 | When you have a choice, it's always
better to use the built-in functions.
| | 02:15 | So in here I'm going to modify my
output variable, and I'll output a list
| | 02:23 | item, and I'm going to use the value
variable and pass along the name
| | 02:32 | and close out my list item.
| | 02:33 | So where am I getting this name from?
| | 02:36 | That's actually from the list of objects and
the name of value pairs that I get right here.
| | 02:41 | So the name is right here
for each one of these objects.
| | 02:44 | So I can call any one of those by just
calling this value and then adding .name to it.
| | 02:49 | So to update the HTML, we need
to use the jQuery HTML method.
| | 02:57 | So I want to target our update div and
then change the HTML to have the output
| | 03:03 | that we created above.
| | 03:05 | So let me save that and I'll switch
over to my browser and refresh, and you can
| | 03:09 | see all of the names coming up from the file.
| | 03:12 | So jQuery also provides
additional methods to manage your data.
| | 03:15 | Let's say, for example, that instead
of just replacing all the HTML inside a
| | 03:19 | tag, we wanted to append some
HTML to the end of our list.
| | 03:23 | So let's modify our HTML so that we
already have something in this div id update.
| | 03:29 | So I'll just create an h1 tag right here
and I'll call it Speakers. I'll close it up.
| | 03:34 | So if we were to run this right now,
you would see the Speakers in the text and
| | 03:39 | it would disappear and
get replaced with this list.
| | 03:41 | But instead of just replacing the HTML,
we can actually do stuff like append the
| | 03:46 | HTML, just with an append method right here.
| | 03:49 | So I'm going to save that and
I'll switch over to my browser.
| | 03:52 | And now instead of deleting what
was already there, I just placed
| | 03:55 | something after it.
| | 03:56 | Of course if there is append, you would think
there is a prepend, and of course there is.
| | 04:04 | So now that puts the text before the
content of what was already in there.
| | 04:08 | So with jQuery reading in a JSON file is
pretty simple. A lot of times the added
| | 04:12 | functionality of methods like append,
prepend, and others makes it a better way
| | 04:17 | to work with JavaScript.
| | Collapse this transcript |
|
|
4. AJAX in ActionPreparing a live search AJAX app| 00:00 | So it's time get busy
with a real project in AJAX.
| | 00:03 | I'm going to show you how to build a
live search application, and this is what
| | 00:06 | the application looks like when it's done.
| | 00:09 | This application lets you type in some
text in this input field and shows you
| | 00:13 | only the records in the JSON
document that match the search.
| | 00:16 | It's dynamic, in that it
updates as you're typing them.
| | 00:21 | We're going to use some of what we have
learned about AJAX so far and use some
| | 00:24 | of jQuery's power to handle the heavy lifting.
| | 00:26 | So let me go over the
documents I'm going to start with.
| | 00:29 | First off, I've cleared up the
JavaScript file so that it has nothing in it.
| | 00:32 | I want to begin with a clean slate.
| | 00:34 | I'm going to get rid of some of the
files I no longer need that are still in my
| | 00:38 | server like this
data.xml and this data.txt file.
| | 00:42 | So I'm hitting Command+Delete, I'm
in Transmit, and then hit this Delete
| | 00:46 | button, gets rid of them. Eventually I'll need to add a
style sheet to my HTML file, so I'll go ahead and
| | 00:50 | right-click in Transmit and select
New File and type in mystyle.css.
| | 00:56 | You may have also noticed that I
uploaded a folder full of images, and these are
| | 01:00 | just photos of the different speakers.
| | 01:04 | So the HTML that I'm
starting with is pretty simple.
| | 01:07 | I've changed the title to Live Search,
and I just have div with an ID of update
| | 01:11 | and a link to the jQuery
and the script.js documents.
| | 01:15 | So the first thing I'm going to need
is to add a section for my search area.
| | 01:19 | So I'll create a div, the id will be
searcharea, and in here I'll type in an input field.
| | 01:28 | I'll make it of type search. In some
browsers you may see the edges have rounded corners.
| | 01:32 | Now, it doesn't really matters what I type
for name because this is not going to be
| | 01:37 | part of a normal form, but I do have to
add an ID value here because that's what
| | 01:41 | we're going to target JavaScript.
| | 01:43 | I don't need a value, so I'll take that out.
I am going to add a placeholder.
| | 01:47 | That's an HTML 5 feature that let's you put in
something that the reader can see before they type anything.
| | 01:52 | So if I switch over here and I clear my
search, you can see that it says name or
| | 01:55 | info right there, so that's what
I'm going to type here: name or info.
| | 01:59 | So this going to need a label. A label
is just the text that goes with the input
| | 02:03 | field, and it has an advantage of making
the label clickable to the input field.
| | 02:09 | So this needs to match the id, so I'll
do an id of search here, and my label is
| | 02:13 | just going to say livesearch.
| | 02:15 | That means that when I am here, if I
click on the word livesearch, because that's
| | 02:21 | the label, it will activate my field.
| | 02:23 | That is something really
useful for mobile devices.
| | 02:25 | And I'll add a little paragraph here to
just describe what the user is supposed
| | 02:31 | to do. So, let me save that.
| | 02:37 | Finally, I need to add a link to my style sheet.
| | 02:41 | And the style is called mystyle.css.
| | 02:47 | I don't need a type here. Let me save that.
| | 02:50 | One thing I like to do is to just put
a simple rule in the style sheet to make
| | 02:55 | sure that it's linking
properly to the HTML file.
| | 02:58 | So I'll add a body selector here,
background, and just give it a background color.
| | 03:06 | So let me save this and
I'll switch back to my browser.
| | 03:09 | I need to go to a slightly different
URL here. And everything looks like
| | 03:14 | it's working great.
| | 03:15 | So we've done a little bit of work here,
and this is pretty much it for our HTML file
| | 03:19 | and our folder structure.
| | 03:20 | It's a really simple page, so now we can
move on to start scripting the document.
| | Collapse this transcript |
| Sending JSON data to the page| 00:00 | In the last movie we set up the HTML
document for our Live Search application.
| | 00:04 | In this movie we'll go ahead and
start creating our JavaScript file.
| | 00:07 | We're going to use JavaScript and jQuery.
| | 00:10 | So, let's take a look at the
HTML from the previous movie.
| | 00:13 | It's just pretty simple:
| | 00:14 | a single form element with an ID of search
plus an additional div that has an ID of Update.
| | 00:19 | Both of those are going to be pretty
important in our script, so let's dig in.
| | 00:22 | I will switch over to my script file,
and I'll start off by doing some things
| | 00:27 | we've done in previous movies.
| | 00:28 | First, I'll just read the JSON data
and output it into our update div.
| | 00:32 | So I will start off by using getJSON.
| | 00:35 | I will get the data file, and the data
will be fed into a function literal.
| | 00:46 | This will read the JSON file and
then, as a callback, will run an anonymous
| | 00:50 | function and pass along the data that we have.
| | 00:53 | One trick that I've learned from
debugging JavaScript for years is to try to
| | 00:56 | test things out as soon as I write them.
| | 00:58 | So let's just go ahead and
send this data to the console.
| | 01:01 | I am going to save this and I will
switch over to my browser. I will refresh,
| | 01:08 | and then I'll do a right-click--
| | 01:10 | I am in Google Chrome right
now--and select Inspect Element.
| | 01:13 | Then go over to the console.
| | 01:15 | Make sure that we have this
object right here showing, which we do.
| | 01:18 | That means that my jQuery is working properly.
| | 01:20 | It's getting the element from the
file, and it's retrieving it and putting
| | 01:24 | it into this console. So that's great.
| | 01:26 | Now let's go ahead and
output that data into our div.
| | 01:29 | Let me take out the console.log here.
And I will create a variable called output,
| | 01:33 | and I will start by feeding
it just an unordered list tag.
| | 01:36 | I will add a class so that
I can target it with CSS.
| | 01:44 | I will close that out.
| | 01:52 | Now we can use the each
statement to output the list items.
| | 01:55 | This is a function literal, and we'll
get the key and value variables set up.
| | 02:07 | Now we need to start outputting just
the names like before, but this time I'm
| | 02:10 | going to put the beginning and
closing li tags on their own line.
| | 02:13 | That just makes it easier to add other elements.
| | 02:15 | So I am going to add an h2 tag here and
output the name from the value variable
| | 02:27 | that gets created from this
each statement right here.
| | 02:33 | Now all I need to do is
output the HTML into my update div.
| | 02:42 | So let me save that and I will
switch back over to my browser and hit
| | 02:46 | the Refresh button.
| | 02:47 | You can see one of the names come up here.
Let me make that a little bigger.
| | 02:51 | All the names are now
coming up from the JSON document.
| | 02:54 | Now we can add the rest of the
elements we want from the JSON file.
| | 02:58 | Let's go ahead and add the image tag.
| | 03:04 | In the image tag I am going to
use the field called shortname.
| | 03:07 | It just has a simplified
version of the persons' names.
| | 03:10 | So if they have three names, or this
Jonathan G. Ferrar II, I just call them
| | 03:15 | Jonathan Ferrar and then put an
underscore in between them, and those relate to
| | 03:19 | the file names of the images
that I have for each speaker.
| | 03:23 | In my script file, I can just use that,
making sure that I target the images
| | 03:27 | folder, then the slash, that
shortname, and then _tn, for thumbnail, .jpg.
| | 03:34 | For the alt, I will just
make it the name of the speaker.
| | 03:37 | For the biography, I am going to copy
this one and just stick it in a paragraph
| | 03:42 | tag, and just call the val.bio.
| | 03:48 | So let's take a look at this in the browser.
| | 03:51 | We'll refresh, and we could see the name of
the author, the photo, and the bio come up.
| | 03:57 | Perfect! So, so far, our page is simply displaying
the information from our JSON document.
| | 04:02 | It's not very different from
what we've done in past videos.
| | 04:05 | In the next movie, I'll show you how we
can capture events from the search field
| | 04:08 | and create a search engine for our JSON file.
| | Collapse this transcript |
| Searching JSON data| 00:00 | Previously, we managed to set up our
application and load some content from a JSON document.
| | 00:05 | In this video I am going to show you
how to handle events from the input
| | 00:08 | field, as well as how to use those
events to drive some search functionality
| | 00:11 | into our application.
| | 00:13 | So we can check for an event
happening when users interact with a specific
| | 00:16 | element on the page.
| | 00:17 | This technique is called binding the event
to the element, and jQuery makes that easy.
| | 00:22 | If you're using straight
JavaScript, this is a good list of all the
| | 00:25 | events available in HTML.
| | 00:27 | If you're using jQuery, then you need
to check this page for a list of the
| | 00:31 | jQuery version of the same events.
| | 00:33 | So we have events like change(),
dblclick(), error(), et cetera, et cetera.
| | 00:37 | The one that we're
interested in is the keyup() event,
| | 00:40 | an event that happens when somebody
releases the key on their keyboard.
| | 00:43 | So let me come over here.
| | 00:45 | I am going to target the
input field with the ID of search.
| | 00:49 | Then I am going to bind a keyup element--
| | 00:51 | this is the jQuery version--and
I'll execute a function literal.
| | 00:55 | That function literal will have
everything that we did previously.
| | 00:59 | So all the stuff will go right there.
| | 01:01 | Let me indent that a little
bit, and I am going to save this.
| | 01:04 | I will switch over to my page, and I am going
to reload the page. Nothing will be showing.
| | 01:08 | As soon as I click right here and
start typing something in, then my JSON document will load.
| | 01:14 | This is not really searching anything,
but it prevents the display of the JSON
| | 01:19 | data until I type something in the search box.
| | 01:22 | So now it's time to narrow down our results.
| | 01:25 | To do that we're going to need to be
able to get the text the user is typing,
| | 01:29 | so we're going to create a variable for that.
| | 01:35 | Here, once again we target the div with
an ID of search, and we're getting the
| | 01:39 | value that is in that field.
| | 01:41 | So let me go ahead and
output that to the console.
| | 01:43 | Let me refresh the page and as I type
something in here, I should be able to
| | 01:53 | click onto my console.
| | 01:54 | So you can see the text that appears
when I type something in the input field
| | 01:59 | down here in the console.
That's working pretty well.
| | 02:01 | In order to do as search, we're going to
use a JavaScript function called search.
| | 02:06 | Search takes a string and looks for another
piece of text inside that original string.
| | 02:10 | If it finds it, it returns its position.
| | 02:13 | The string method can search for either
some text inside another string or use
| | 02:17 | a regular expression.
| | 02:18 | If you search for some text, it will do a
case-sensitive search, which is not what we want.
| | 02:23 | So when somebody types a lowercase b,
it wouldn't find Barot, because that user
| | 02:27 | has a name that starts with a
capital B. And that's not good.
| | 02:30 | Regular expressions are sort of
like search on steroids that let you do
| | 02:34 | case-insensitive and more powerful searches.
| | 02:36 | I am going to need just a
very simple regular expression,
| | 02:39 | so let me do that right here.
| | 02:41 | I'll get rid of this console.log,
and I'll call this my expression or myExp, and
| | 02:47 | that's going to be a new regular expression.
| | 02:51 | That's going to take in our
search field, and it's going to use the
| | 02:55 | case-insensitive search if I
type i in quotes right here.
| | 02:58 | Now that we've got these two variables,
we can use the search method like this.
| | 03:01 | I am going to wrap this around the
list of output items right here, and I will
| | 03:06 | type in if the value of name from
our data file and then execute a search
| | 03:12 | passing it a regular expression.
The one that we created is called myExp.
| | 03:17 | If that is not equal to -1, it means
that it did find that text in the data.
| | 03:25 | So if it does, then I can output all the stuff.
| | 03:33 | So let me go ahead and save this,
and I'll go back into my application and I
| | 03:37 | will reload. I will start typing
something in here, and you'll see that it is
| | 03:44 | producing the search result.
| | 03:46 | So let me close this out so
you could see it a little better.
| | 03:51 | There's all my search results right now.
| | 03:53 | It's pretty much everyone.
| | 03:54 | So if I type in a name, like I will type
Ferrar here, it finds that second field.
| | 03:59 | I will just do that a
little more. It is dynamic,
| | 04:01 | so it's narrowing things down
as I type in more and more text.
| | 04:04 | That's pretty good,
| | 04:05 | but right now it's only
finding things in the name field.
| | 04:09 | So I also want to check for the Bio field.
| | 04:12 | I can just take this, and I'll add another
set of parentheses here and an or symbol.
| | 04:23 | Paste that other copy of it and
change this to check the bio field.
| | 04:32 | So this says look for the regular
expressions in the name or in the bio field.
| | 04:37 | I will save that, come over here,
we'll refresh, and we'll try something like
| | 04:43 | media, because I know some of these
people have the keyword media, or maybe
| | 04:48 | something like art, and
now that's working perfectly.
| | 04:50 | So our Live Search functionality is
working great, but it doesn't look very hot,
| | 04:54 | so in the next movie I am going
to add a little bit of styling.
| | Collapse this transcript |
| Styling an application| 00:00 | So far, we've managed to build a nice
live search feature that uses AJAX to
| | 00:04 | search through a JSON data file, but
the UI could look a little bit better.
| | 00:08 | So in this video I'm going to show you
how to style this application with CSS.
| | 00:12 | Now, I've got the set up in
Espresso and this little comment right here
| | 00:15 | essentially ties my live preview with
this window. So as I make a change right
| | 00:19 | here, it will update automatically.
| | 00:21 | If you don't have Espresso, you don't
really need to type that in, but it's just
| | 00:25 | the way that I have things set up, so
that as I type the CSS, you're going to be
| | 00:28 | able to see the changes on the right-hand side.
So let's get started with some basic CSS.
| | 00:33 | So first, I'm going to start working
on the searcharea, and I'm going to go
| | 00:38 | ahead and center that by setting
the margin equal to 0 and auto.
| | 00:44 | I'll text-align this to the center
so that the text inside will also be
| | 00:49 | centered, and I'll set up a background
color here, and I'll set up a padding of
| | 00:57 | 10 pixels. Plus I'll set up
the width to be 30% of the page.
| | 01:01 | That way this is going to be
responsive and kind of grow with this page.
| | 01:05 | I'm going to add a bit of a border-radius
here, and that will just make my edges round,
| | 01:10 | so I'll use -webkit-border-
radius and I'll do 10 pixels.
| | 01:14 | That will take care of Safari and Chrome.
And then I'll do -moz-border-radius
| | 01:17 | 10 pixels for Firefox, and then I'll
just use the regular rule, which is just
| | 01:25 | border-radius of 10 pixels.
| | 01:29 | I want to make the border just be on
the top, left, and right of this box, so
| | 01:33 | I'll modify this -webkit-border-
radius to have some different values.
| | 01:38 | So let's style the label.
| | 01:44 | We're giving it some font attributes here.
| | 01:46 | I'll go ahead and make the text-
transform be uppercase, so that it displays
| | 01:50 | that text as uppercase always, and
I'll add a little bit of padding at the
| | 01:54 | bottom of 5 pixels,
| | 01:56 | just a little bit of breathing room. And I'll
set the color to a little bit of a red tint.
| | 02:06 | So now let me do the same
thing with the paragraph.
| | 02:08 | I'll grab this and I'll just copy it
here, and instead of label, I'm going to
| | 02:12 | target the paragraph.
| | 02:14 | The margin is going to be nothing.
| | 02:15 | Gets rid of all the
spacing on the top and bottom.
| | 02:17 | And then I'll do a line-height of 1 em
and a padding at the bottom of 5 pixels.
| | 02:26 | Again, just putting in a little
more breathing room this time.
| | 02:29 | This looks probably a little
bit better when it's wider.
| | 02:34 | So now, let's modify the input field.
| | 02:37 | Once again, searcharea. And I'm going
to set the width to be 80% of the size of
| | 02:45 | the window, again, making it responsive.
And I'll text-align this to the center.
| | 02:51 | So now this little box is actually going
to grow as I change the size of the window.
| | 02:58 | Excellent! So now we need to change the style for
the content, which is under the update id.
| | 03:04 | So we'll start with some
basic code to change that.
| | 03:07 | I'll do a font-family, and I'm going to
use Georgia and as a backup, Times new Roman.
| | 03:19 | And I'll set the width of that to be 70%
of the browser window, and I'm going to
| | 03:24 | center it horizontally,
so margin will be 0 and auto.
| | 03:28 | And I want to put a border on the
top, and I'll make that border dotted.
| | 03:35 | And my border color is going to be CCC.
| | 03:38 | That's just a little gray line
at the top of the update div.
| | 03:42 | So let's go ahead and change the unordered list.
| | 03:45 | Right now my lists have bullets in
them, so I'll do update unordered list.
| | 03:51 | I'll get rid of the bullets with
list-style none, and I'm going to change the
| | 03:56 | margin and the padding to 0.
| | 03:58 | That gets rid of a little bit of
space that happens with unordered lists.
| | 04:02 | So now I'll do update ul li, and I'll
set the width of this to be 100% of the
| | 04:10 | container. And I'll do a little bit
of padding so that it has a little bit of
| | 04:16 | breathing room to each side.
| | 04:19 | I'll set up a background color here.
| | 04:21 | You can actually see the padding
better with the background color.
| | 04:23 | So there's without padding,
and there's with padding.
| | 04:26 | I'll do a little bit of
padding at the bottom, 10 pixels.
| | 04:31 | You can't really see it, but that just
gives you a little more breathing room
| | 04:35 | between some of the list items.
| | 04:38 | And I'm going to set the height,
because they're a little big, to be 110 pixels.
| | 04:42 | And now that looks kind of weird,
| | 04:44 | so I need to make sure that I do the
overflow element here and I set it to be hidden.
| | 04:50 | That hides everything
that's bigger than 110 pixels.
| | 04:53 | And we'll do also a little border at
the bottom, so that we kind of visually
| | 05:04 | tell the user that there is going to be
more information underneath this little
| | 05:09 | border that we placed.
| | 05:10 | All right, so when users hover over
the list item elements and when I have a
| | 05:16 | style that kind of expands what I've
done, so my background is going to change,
| | 05:20 | the background color.
| | 05:25 | I'll set the height to 250 pixels.
| | 05:27 | That's going to show more of the content behind.
| | 05:31 | So if somebody hovers over one of
these elements, it kind of expands this to
| | 05:35 | be bigger right now.
| | 05:36 | It's still sort of funky, but it will work
really well when we have the rest of the code in.
| | 05:41 | Let's do the update h2 tags.
| | 05:46 | And I'll do margin.
| | 05:47 | I'll just clear out the margin and
padding and then set up a font-size, a little
| | 05:54 | bit of padding at the top and
bottom, and we'll change the font here.
| | 06:01 | Now, we'll change the color, kind of
a little bit of a red, sort of maybe a
| | 06:14 | coral color, and we'll add a border and
a little bit of the margin to give the
| | 06:28 | border a little bit of room right here.
| | 06:30 | So now I'm going to do the image.
| | 06:35 | I'll float the image to the left.
| | 06:36 | That way the text will show
to the right of the image.
| | 06:40 | And I'm going to set up the width of
the image to just be 80 pixels so that
| | 06:44 | it's not so gargantuan.
| | 06:45 | I'll add a little bit of margin to
the right, 10 pixels, just to give it a
| | 06:50 | little bit of breathing room from the
photo, and I'm going to make the photos
| | 06:54 | have a round edge, so I'm going to
type in -webkit-border-radius, 10 pixels,
| | 07:04 | and I'll do the same thing for Mozilla
browsers, and for just the regular version CSS.
| | 07:12 | So let me save that, and that's
looking pretty cool, and it's mostly
| | 07:16 | accomplishing what we need here.
| | 07:20 | You can see that this looks really
good, especially when it expands.
| | 07:23 | So our application is looking pretty
good, and this would probably be good
| | 07:26 | enough for most projects.
| | 07:27 | However, in the next movie, I'm going to
show you how to use some CSS3 animations
| | 07:31 | to improve this app.
| | Collapse this transcript |
| Adding CSS3 animations| 00:00 | Our application is looking pretty good
and it works well, but I think we could
| | 00:04 | spice it up with some CSS3 animations.
Som this won't necessarily work in some
| | 00:08 | older browsers, but I think it adds
a little bit of pizzazz to our
| | 00:11 | application and makes it
degrade nicely in older browsers.
| | 00:15 | So at the very bottom of our CSS, we're
going to add some animation keyframes.
| | 00:19 | We'll need to add them with
different browser prefixes.
| | 00:22 | The prefixes are pretty similar,
so we'll just do one prefix and copy and paste
| | 00:26 | and then modify it for the other prefixes.
| | 00:28 | So I'll start with webkit,
because I'm in a WebKit browser.
| | 00:31 | The way this works is you defined a
set of keyframes and then you give them a
| | 00:35 | name, inside this keyframes keyword.
| | 00:39 | So what we want to do here is start our
animation at the beginning position, or
| | 00:43 | the 0% position, with the
opacity of the object being at 30%.
| | 00:48 | And then at the end of our animation,
which is 100% of the keyframe, our opacity
| | 00:53 | will be set up to 1.0, which is full opacity.
| | 00:57 | So what this will do is it will just
fade in the elements that I am targeting
| | 01:01 | with this animation.
| | 01:02 | So I have the webkit prefix going.
| | 01:04 | Now, all I need to do is copy that and
paste some other copies and modify the
| | 01:09 | prefix for other browsers.
| | 01:16 | So now that we have these keyframes,
we can call this animation sequence
| | 01:20 | within our list item.
| | 01:21 | So I'm going to scroll up a little bit
and find the place where I do the list
| | 01:26 | items and add some code right
here that call in our animation.
| | 01:29 | So, for that, I'll do webkit-
animation and then I'll call in my animation
| | 01:34 | (my anim) and make it run for one second,
and I'll need to do that with other prefixes.
| | 01:43 | So let me go ahead and save that, and
I'll refresh this page, and you can see
| | 01:49 | that these elements right here are fading in
as I'm typing in some of these search fields.
| | 01:59 | So, another thing that I want to do
is make this expanding animation be
| | 02:03 | little more fluid, so for that, I'm
going to use something called transitions.
| | 02:07 | And transitions work sort of like animations,
except that they happen when an element changes.
| | 02:13 | So I have got a hover event here,
and I want to set a transition that
| | 02:17 | happens when the element,
| | 02:19 | it's in its normal state, and when
somebody hovers over the element.
| | 02:23 | Now, I need to just put the
transition here in the original version of the
| | 02:27 | element, so I'll do webkit and
not animation, but transition.
| | 02:30 | I only want to animate the height
element of the transition, so I'll need to tell
| | 02:36 | it how long I want that to last--
that'll be 0.3 seconds--and then an easing-in and
| | 02:41 | easing-out function.
| | 02:42 | I'll just to use ease-out,
| | 02:44 | so that makes it slow at the end of
that transition. And let me delete this and
| | 02:51 | just paste this a few times and add the
other browser prefixes here. So I'll save that.
| | 03:00 | Let me refresh this,
and I'll type in this name here.
| | 03:04 | You can see that when I type in a
search that results in multiple fields,
| | 03:10 | you can see that when I roll over some of
these elements my transitions, are a lot smoother.
| | 03:14 | If you want to learn more about
transitions and transforms, make sure you check
| | 03:18 | out this course from
Joseph Lowery in the library.
| | Collapse this transcript |
|
|
ConclusionNext steps| 00:00 | So thanks for watching JavaScript and AJAX.
| | 00:03 | We've have got a lot of really good
content in the online training library
| | 00:06 | related to JavaScript, so here are
some courses you should check out.
| | 00:09 | Definitely start with Simon
Allardice and JavaScript Essential Training.
| | 00:12 | Even for experienced developers,
you may find some really good tips and tricks,
| | 00:17 | and some good introductions to some of
the concepts that you need to know to do
| | 00:21 | some more advanced courses.
| | 00:22 | Now I tend to cover a lot of
JavaScript-related courses, so here's a list of
| | 00:26 | some of the other things I have on
the library, like, for example, Building
| | 00:30 | Facebook Applications with HTML and
JavaScript, which has a good introduction
| | 00:34 | to JSON data feeds.
| | 00:36 | You should all check out my course
on jQuery Mobile Web Applications.
| | 00:40 | It also has some additional
information about hooking up to different kinds of
| | 00:44 | APIs through JavaScript.
| | 00:46 | You may also want to check out my blog,
where I write about a lot of JavaScript-
| | 00:49 | related topics, including templating
with JavaScript, Bootstrap, and other
| | 00:54 | libraries that I think are pretty cool.
| | 00:56 | Another article that I suggest you read is
this one from Douglas Crockford on JavaScript:
| | 01:01 | The World's Most
Misunderstood Programming Language.
| | 01:04 | So, thank you again for watching, and I
hope you have a great time programming the web.
| | Collapse this transcript |
|
|
