In this course, we'll look at the JavaScript language, and how it supports the Object-Oriented pattern, with a focus on the unique aspect of how JavaScript approaches OO. We'll explore a brief introduction to the jQuery library, which is widely used to do in-browser manipulation of the Document Object Model (DOM) and event handling. You'll also learn more about JavaScript Object Notation (JSON), which is commonly used as a syntax to exchange data between code running on the server (i.e. in PHP) and code running in the browser (JavaScript/jQuery). It is assumed that learners have already taken the Building Web Applications and Building Database Applications in PHP courses in this specialization.
Code Walkthrough: jQuery Basics
Loading...
來自 University of Michigan 的課程
JavaScript, jQuery, and JSON
95 個評分
從本節課中
Using JQuery
This is a brief introduction to the JQuery library which is widely used to do in-browser manipulation of the Document Object Model(DOM) and event handling.
與講師見面
Charles SeveranceAssociate Professor
School of Information
Hello, and welcome to our lecture on jQuery, APIs and JSON.
We're going to roll a whole bunch of stuff into this lecture.
I'm not going to talk long time but a long time about each thing, so
some of the things you may have to look at twice because it's kind of compressed and
you don't want to miss anything because they build from kind of tiny to big
really fast.
So we talked about JavaScript, talked about the Document Object Model and
how they're very incompatible in terms of their shapes.
And so there is a bunch of libraries that came out and we had this thing like getId,
getElementById that I kind of characterized as old school JavaScript or
the old way we did portable stuff.
But jQuery is the thing that really has solved
the mess that is the browser incompatibility.
Now it turns out that there was lots and
lots of libraries that were being developed at the same time that were
trying to become like the low level utilities for JavaScript.
And jQuery was the one that kind of won in the space.
The reason that many people think that it won is because it had
the best documentation and it still has outstanding documentation.
There's a lot JavaScript libraries that were there and
the people wrote them could use them.
But jQuery was this thing that like anybody could use,
it was well enough document.
And that pattern, the point we're not going to put a lot of jQuery slides in is
that they also show you just little snippets of code that you can cut and
paste and then adapt and make work.
So in general you need a way to animate the opening of a window with jQuery.
You go to Google and you type animate the opening of a window with jQuery and
you'll find often on thejQuery site, a little five line snippet of code,
that'll give you the starting point, and then you'll adapt.
So I'm not going to talk too much about that.
So this is sort of some very simple jQuery.
So what we do here is we are going to in our head document.
Sometimes folks prefer to put this down, near the end of the body, but
I'll just sort of use the style and put it in the head, and
you go download a version of the jQuery library.
And we're going to pull this library in and what it does is it jacks itself into
document object model and then makes it so that this variable dollar sign.
Dollar sign ends up being a function name.
jQuery takes over.
They just picked it.
Now, you can actually tell jQuery to pick a different one, but
dollar sign is the one that jQuery kind of pick.
And so dollar sign is a function call, and document is a parameter to that function.
And it returns an object, a JavaScript object,
that has many methods, .ready is on of those methods.
So the jQuery syntax takes a little getting used to because this is like
a function call and then this is a method within that function that happens to be
a function call that goes all the way to here.
And so, we tend to connect these things together and
we're also seeing the use in here of first class functions.
So the parameter, the first parameter to the jQuery ready method,
is this function, it's actually code.
Now, at a high level what we're saying here.
Is we are saying, when the document is ready, when it's fully loaded and
all the images have loaded, at that moment, please run some of our code.
And we wrote this code and we have a function that's got two lines in it.
One's an alert and one says in the console log it says, Hello JQuery.
And this is really common because often, what you want to do is,
after the page is loaded.
You want to sort of jack in various places and
add interactive elements to pieces of the page using jQuery, and
then having jQuery respond to the interactive things in that page.
And we'll build stuff that looks like that.
So let's go ahead and run this.
By the way, you can download the code here for
this set of examples on the php-intro.com/code jQuery zip.
I got that all downloaded and jquery-01,
whoops, sorry, got to clear that so
I can click jquery-01.
And hello.php, that was the code I just showed you.
Let me turn on developer console while I'm doing this.
So I got the developer console.
I'm going to watch the console.
I'm going to say hello.php.
So what happens is this page will load, it will run the JavaScript
it loads the jQuery library, let's start with the network look view of this.
I'll hit this page hello.php and you'll see that my php request response
happened and then in that it said wow, go load some more JavaScript.
And then in that JavaScript, it executed JavaScript and
said when the document has finished loading call my function.
And in that function you get call an alert, that's my alert.
So this function happens at the end of page loading, turns up this is important
because it takes a while for the browser to get the page all put together.
And if you're going to write JavaScript,
you're going to start looking at pieces of pages, it's useful, so
the first thing you kind of learn in jQuery Is how to trigger things that
happen after the page is loaded and that's what this ready method does.
And if I look at the console, you see that there's a console message as well.
And if I hit refresh, I'll clear this and I hit refresh, you will see,
out comes the alert.
And the alert happens first, but we know that the page is finished loading.
And then the console message comes up.
So that's how it was in the code.
It did an alert console.
But this is basically saying wait until all the document is loaded.
So it goes all out and it loads all of the sub series pieces, etc., etc.
So document ready is very, very, very intelligent.
So again, we use this to jack in and we'll see some things here.
So another thing we can do for example is jack in to the,
I keep saying jack in as I register an event is what really is going on.
And dollar sign here is a function, it has a parameter window
which returns an object so the function $ pass in window,
get back jQuery object, has a method of .resize.
And what we're saying here is we would like to register and resize event and
we would like this code, right here, this code right here,
from here to here, to be called whenever this screen is resized.
Whenever the window is resized,
the window is the part of browser that's on the screen, okay?
And, [COUGH] so while the pages loading we're saying, connect us up so that
as resizes happen, our code is called, and there's lots and lots of things like that.
So let's take a look at that one I'm sorry, gotta turn that back.
So the resize runs and in this point we have just registered
a beta code that we want to run on the resize event.
Okay, now, the way resize happens, gotta move this little guy.
I should have resized that all along.
Okay, so the resize event is as I move this window and make it smaller and
larger, and you can see my code is being called.
Over and over and over let me just clear this, and
now when I resize this, my code is being called because I told jQuery,
please call me every time a screen resizes.
Sometimes it does it while you're dragging on a resize and
sometimes it does it when you let go of the resize but
eventually my code will be informed that the page has been resized.
And so I did that with this window .resize function that says,
hey jQuery call me, register this bit of code to be called when
the resize happens, when the window's resize call me.
Now I wouldn't normally just print this stuff out I might do something like resize
something or show or hide something, who knows what I want to do in this code.
It just shows another pattern of jacking in to a different event then the .ready
which is the ready event which is called when the page is fully loaded, okay.
Here is another bit of jQuery and this is a pattern called the query do.
I'm going to have this code toggle.php and
I've got a paragraph, the paragraph goes from here to here,
and I've got this spinner inside the paragraph and
I've got it set up to be hidden when the page first shows up.
But I've got an id tag on the paragraph and an id tag on the spinner.
And so, then what I do is I make an a tag, so that when I hit the toggle,
it runs this JavaScript, and this JavaScript is jQuery.
It's a $, an I pass and string.
String which is #spinner and that means id tag name spinner.
Go find the id tag name spinner.
Returns an object and then I call the toggle method in that id.
So that flips the display none often on.
So I can click this toggle button we'll see let me do this in a second as many
times as I like and then that will hide and show the spinner.
Later we'll show and hide the spinner for a more useful purpose.
Here's another one.
Here is dollar go find, I've another little tag called red which says,
go find the paragraph tag which is this whole tag right here and
call the method CSS and change the background color to red of the paragraph.
And when I click on green, it says, go find the paragraph, change, use,
call the CSS method, change the background color to green.
So these are queries that look up a piece.
So this is like a query.
$para says, grab the tag.
With an id of para.
So that's what that does.
It's a look up and then, you call a method on the tag, basically,
you get back up jQuery object which represents the tag, okay?
So let's play with this code.
Let's play with this code.
[COUGH] So, if I say Toggle.
Well, if you do a view source, let me just do a view source here.
If you just do view source, you see my paragraph from here to here.
You see my spinner, which has an ID of spinner.
And it's currently not shown, because display is none.
So when I hit toggle, it's going to say, go find that.
Was that a spin?
No, it's just a image tag, but it's okay.
The image tag is hidden, as if it's not there.
When I say toggle, go find that image tag with id of spinner and
toggle it's visibility on off.
So I just toggle it on and I can toggle it off.
Toggle it on.
I'm not changing the HTML at this point I'm changing the CSS associated with
the tag and specifically this display value the CSS.
And if you recall I got this and I want to click red,
then I'm going to go grab the paragraph which is all of this actually.
And then I'm going to set it's background color to red or
green toggling back and forth.
Red, green, red, green, red, green.
So none of this is a request response cycle.
And none of this is really changing the document object model.
We will do other things that will actually add tags and remove tags.
But for now, I'm just changing the CSS on tags using jQuery commands.
And again, I'm just giving you the simplest of stuff, where,
literally many, many things you can call here.
Toggle and css are just two of many things that you can do.
You can animate, you can do this, you can set transparency.
Who knows what you can do?
The code documentation.
This is the notion of grabbing a bit of the HTML DOM and doing something to it.
Query do syntax in jQuery and
the rest of it just go look at the jQuery documentation, there's tons of it.
[MUSIC]
