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.
JSON and jQuery
Loading...
Из курса от партнера University of Michigan
JavaScript, jQuery, and JSON
110 оценок
Из урока
JSON - JavaScript Object Notation
In this section we look at JavaScript Object Notation (JSON). JSON 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).
Познакомьтесь с преподавателями
Charles SeveranceAssociate Professor
School of Information
So now I'm going to go through a couple of very simple examples of JSON,
jQuery, and PHP.
And it's another one of those things where I don't want you to blink and
miss anything.
Because It turns out to be super simple, but
underneath it there's amazing things happening.
So first, let's remember that in JavaScript, we use objects.
They're not exactly associative arrays, they're key value pairs.
And they can be accessed with either the associative array syntax or object syntax.
So like X sub bob is the same
as x ["bob"].
This is the OO syntax, and this is the seemingly array syntax.
And this is what's really going on, and
this is kind of a shortcut to that same thing, so either one.
And just as you're reading code, some programmers use one to exclusion, and
the others use the other to exclusion.
I tend to use the dot format, when I can, but
sometimes you have to use the double quote format.
So just remember that those two syntaxes in JavaScript mean exactly the same thing.
They're not a different thing, they're the same thing.
So here is a little bit of example code.
Here is a constant object.
And it's not that different than those objects we've been creating.
It's just that the attribute variable golf, tennis, and
ping are being set in this constant.
So there is an object being created with three instance variables, golf,
tennis ping, and then there are some strings in here.
So this is really an object.
And it's being assigned into the variable balls.
So that's object, it's a real live object.
If you do a console.dir of it, you actually in the console have
a nicely expandable thing where you can sort of look at everything.
And this is the two syntaxes,
this is kind of the oo syntax where you can assign a new soccer thing, right?
balls.soccer, that's kind of object named balls with a attribute, object attribute.
object.attribute that's the common way in most object running languages to do this.
But then we have what is kind of like, I'll put in quotes,
the associative array look.
The associative array look is balls subquote lacross quote.
These are equivalent syntaxes,
don't get stuck on the fact that somehow there's something different going on.
And I just emphasize that because it took me a while to figure this out myself.
To go, whoa.
The syntax is so different looking and to me in PHP they mean very different things.
And in Python, other languages, they mean different things.
Whereas in JavaScript, they don't.
And that just threw me for a loop for a while.
Maybe they won't throw you for a loop at all, maybe you're an expert in this.
So let's take a look at some JSON syntax.
It's really just JavaScript syntax.
So this is, we're making an object.
Begin end, key value, key value with colon.
You can have different types of things.
They don't have to be.
It can be numbers.
It can be boolean.
And you can even have a list, right.
So this says the attribute offices maps to a two element list of two strings.
And then you can have skills mapping to an object within an object, right.
So we've got this object and then enter skills, we have another object.
And that has C, C++, and Python.
So these are key value pairs, key value pairs inside that.
And so you can just construct these like you can in any programming language.
In PHP, you can have arrays within arrays within arrays and
they can be a linear array and a key value array.
But this is an object, this is an array,
and then this thing here is an object.
I keep emphasizing that because I just want you to
not confuse the fact that objects and arrays are not exactly the same thing.
And so if we take a look at some JavaScript that just runs this
stuff, right?
Here we go, here's an HTML, we go into script, we can just type this stuff.
This is just JavaScript code, that's an executable,
so this is an executable assignment statement in JavaScript.
This happens to be JSON syntax and the JavaScript constant syntax, so
that's like saying, who = 42; while 42 gets stuck in who.
It just so happens that it constructs an object with the OV key value and
then assigns that into who.
So is this just kind of doubly emphasizing that this is just a,
its a wire, we haven't made it a wire protocol yet.
It is still just the JavaScript constant syntax.
Now we're going to make it a wire protocol.
This is an important slide.
It would almost be easier if this was 40 lines of code on this slide.
Because then you would expect that it's difficult and challenging and
amazing things are happening.
This is amazing.
It's just four lines of code.
Okay, so and
I'll go through this in a demonstration as well in addition to just these slides.
So we're going to have a file called json.php.
And so sleep(2) just makes it so this thing slows down a little bit so
you can see what's happening as you're watching it in your developer console.
If we're going to send json back to the browser,
we want to tell it the content type.
And if we go all the way back, way, way, way back, content type can be text,
it can be HTML, it can be a JPEG, it can be a PNG.
So this is a response header that tells the browser
what it is that this next blob of stuff is.
And we can tell it, this is json.
Let me tell that utf-8 in case we have Asian characters or whatever.
That's a header and just like anything inside PHP, we're in PHP now,
anything in PHP, before you produce any output, you gotta set all your headers.
So that's why that's first.
So now I have some PHP code.
Now really, this will do something, maybe read some stuff from the database,
but we don't worry about that right now.
For now, we're just going to make an array.
This is a php array, first maps to first things, second maps to second thing.
This is when we're inside of php, and
then we're going to serialize, and then we got the wire protocol.
We're going to send the wire protocol, and then we're going to receive that, and
then we're going to parse it in JavaScript.
That's exactly what we're doing in this picture right now.
The act of serializing a PHP array
uses a function that's built into PHP called json_encode.
You pass in an array.
It can either be a linear array or a key value array, and
it automatically makes the right JSON.
In this case it's a key value array, so it makes a JSON object with key, key value,
value, right.
And then this, This
is what gets echoed, I mean literally the output is this when you look at it.
That is serialized version of a php array.
Getting sent out and
if you just hit this page you will just see this in your browser.
That's what you'll see.
It'll actually be all scrunched up but then you can pretty print it.
So that's called pretty printing when you see all the pretty little spaces.
because json doesn't care about spaces either or new lines.
So if you see ugly json that's like curly braced or [SOUND] curly braced,
just Google pretty print and paste that in.
And it'll [SOUND] put it in indented so it's actually readable.
They tend to not pretty print this stuff when they're sending it back.
because mostly it's being parsed by code not by human beings, and so
we tend to copy and paste it and then pretty print it.
Okay, this PHP code runs says I'm want to send some JSON creates
an internal structure, this could be lots of code, serializes it and sends it back.
That's the requestor response cycle on the PHP side, that's what that does.
Now we're going to talk about the JavaScript side.
What we're going to do on JavaScript side to pull this stuff in, and
I'm not even going to put this in an on click method.
I'm just going to do it and show you how it works.
So we've got some page, blah blah blah index.php.
It's got some stuff okay, and we're going to go document).ready again
this is idiomatic it says run this code once the document is finished loading.
Think of that as after the /body tag and after the /html tag.
So after this is all done, I want to call $getJSON,
before we did $post and that sent post data in and got HTML back.
This is going to ask for a get, do a get request and expect JSON to comeback.
Okay, so then we're going to specify the server URL,
Which is this code right here running on the server.
And this knows, that what's coming back is json and so is going to deserialize it,
It's going to deserialize it, and then pass the deserialized data into our code.
Remember, this is the code that runs when it happens.
It's going to pass the deserialized code in.
This is a JavaScript object.
It's not the string.
So you gotta separate the wire protocol, which is just a string of characters,
from the post deserialized thing, which is a live JavaScript object.
So data in this case, is a live JavaScript object and so
I can print out data.first, which is this thing right here.
Holy crap, that's just so amazing.
So let me see if I can walk through this.
So we're in the browser, I come in, we do $getJSON.
So we send a get request into json.php.
That could do anything, talk to the database.
I'm keeping this simple, right.
It creates a thing, it serializes and then out comes a string, curly brace and
all that stuff.
This is the wire protocol.
And time is passing here, right?
So time is passing.
So this is asynchronous code that's waiting for this to come back.
But before it comes back, it gets deserialized.
And so the code that runs this is being passed into data is already deserialized.
So the notion of retrieving it, waiting for
it to come back, serialization, deserialization.
This is the serialization, this is the deserialization.
It's actually just built into getJSON.
It deserializes it before it gets back to us.
So that's 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14 lines of code.
And like I said,
this would be thousands of lines of code 10 years ago, 15 years ago.
It's really simple.
Understand every single line of code here.
Because as soon as we understand this, we're going to go and
make far more complex bits of code, and so you gotta understand this.
So don't just sit there and go, yeah I'll figure this out later.
No, because later I'm going to send you this much code and
it's going to do this four times.
And then we're going to talk database etc., etc., etc.
So now let's talk a little bit about how we can turn this into a simple chat tool.
Ознакомьтесь с нашим каталогом
Присоединяйтесь бесплатно и получайте персонализированные рекомендации, обновления и предложения.
Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.
© Coursera Inc., 2018 Все права защищены.
