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.
JavaScript Overview
Loading...
Do curso por University of Michigan
JavaScript, jQuery, and JSON
95 classificações
University of Michigan
95 classificações
Curso 4 de 4 em Specialization Web Applications for Everybody
Na lição
Introduction to JavaScript
We take a quick look at the JavaScript language. We assume that you already know PHP - so it is a pretty quick introduction focusing on what is different about JavaScript.
Conheça os instrutores
Charles SeveranceAssociate Professor
School of Information
So now we're starting to look at the JavaScript programming language.
There's a lot of people that might say that
the first programming language that you should learn, and
maybe even the only programming language you should learn, is JavaScript.
And I totally disagree with that.
JavaScript is a wonderful language.
And it runs in the browser.
And with things like Node.js it's increasingly running in the server.
And it's a great language.
But it's sort of a powerful language.
It's not a easy to learn language.
I mean, you really need to understand what's going on.
It's a beautifully built language.
And I'll try to show you some of the really awesome things that are true
about JavaScript that I think you can only appreciate
after you learn a couple other languages like Python and PHP, SQL.
And hopefully this is your fourth or
fifth programming language that you've actually learned.
The other thing that we're doing now is we're actually moving in a whole
new world, right?
We've been programming,
we learned SQL, which is the language talking to databases.
We learned PHP, which is the language of this server code that we
happened to have chosen.
We've talked about the request response cycle, we've talked about HTML, and CSS.
And how we format things and make them look pretty in browsers.
I kept saying the Document Object Model, but
now we're actually going to write code that runs in the browser.
So that's the distinct difference.
Now, if you're running something like Node.js,
that means that you are actually running server based JavaScript, but for
now we're going to talk about JavaScript as a browser based tool.
Now, JavaScript was invented for the browser.
And for its first 15 years, it pretty much ran in the browser.
It was never intended to be only in the browser.
But it really has been a browser only programming language for a long time.
And its use in servers is creeping up now.
And so the concept of HTML and CSS and a Document Object Model has been part and
parcel of what JavaScript has been about from its inception.
From the first moment that we ever had JavaScript, it's been about
the Document Object Model and how to manipulate the Document Object Model.
And add interactivity without request response cycles.
And so up till now, all the interactivity we've been adding has been by displaying
a whole new page of HTML.
And sometimes we make it look like the page hasn't changed,
because everything lines up and some little thing changes, but
really it's a full request response cycle.
Now in JavaScript, we're going to learn to play with this Document Object Model and
change what we see in the browser quite dynamically, okay?
So the first thing we're going to learn is we're going to learn about JavaScript as
a programming language.
And then we're going to learn how to use it in the browser.
So JavaScript has a very different history than PHP or Python.
And I like to share with you the histories of all these programming languages to give
you a sense of where they came from.
Because I think it really helps you understand what they're all about.
So JavaScript is about 20 years old now.
It was introduced by Netscape in 1995, and Brendan Eich is the developer of it.
And if you watch my video about Brendan Eich, you will see that it's very,
very different than the video that I encourage you to watch with
Rasmus Lerdorf, the creator of PHP.
PHP is designed to be a practical and continually evolving toolkit.
So PHP itself is supposed to be a toolkit.
Rasmus didn't have any formal education in how to build languages, but
Brendan has got, I think, a PhD in physics or something like that.
And he's like a math genius and he's a language genius and
he has been a student of programming languages.
And so the idea of JavaScript was that it was supposed to be built as a toy and
that's why it's kind of named JavaScript.
There's this other language called Java, which you may or may not know.
It's a lot harder than JavaScript and JavaScript was suppose to be the easy,
baby version of it.
But in many ways, Brendan was such a brilliant
computer scientist that he sneaked so many wonderful things.
And when we talk about object-oriented JavaScript,
you'll see that it's very different than all the other object-oriented
things that we've talked about.
Because it has a different sort of foundational notion inside of it,
called first class functions.
And so it's a very theoretically beautiful language compared to some of these other
ones that were kind of compromises, and very practical, but compromises.
And there's a standardization body called ECMA that standardizes JavaScript, and
so you kind of see it named as ECMAScript.
And if you see it named ECMAScript, don't feel bad about that, it's all the same.
And so the idea is that JavaScript is a programming language that runs
in the browser.
And so if you compare and contrast this with PHP, which we get done talking about.
We'd say <?php and then all this code would run in the server
and produce some output that would go to the browser, okay?
But that's not what's going to happen in JavaScript.
In JavaScript you are having your HTML tags.
The JavaScript is actual text that comes from the server and
then as the DOM is being parsed it reads this and runs this code.
So in between the script and
end script tag, we are running the language JavaScript.
Now, it's not just about writing output, this happens to be writing output.
There is this thing called document, this is a variable that's pre-set for
us in JavaScript in the browser.
And it is an object that allows us to touch the Document Object Model.
So I keep saying DOM, well DOM and document are the same thing.
So what this is is saying, write to the DOM, a paragraph.
And so that takes this text and it puts it here.
So 'One Paragraph' came from HTML.
'Hello World' came from JavaScript.
And then 'Second Paragraph' came from back from HTML.
And so it's not like the output of this, it's not like PHP,
where the output is automatically put in the document.
You have to explicitly say, that's what I want to do.
Because it turns out we do little things like manipulate existing things
more commonly in JavaScript.
We don't tend to write the entire Document Object Model in JavaScript.
But we do sometimes, and when we get to doing rendering in the browser,
we'll start seeing massive changes in the Document Object Model coming from that.
There's a noscript tag.
You might have an application that would say,
you know what, I'm going to function differently if I don't have JavaScript.
These days we don't worry to much about that.
You might just say noscript, none of my application is going to work,
because everything is so heavily dependent on JavaScript these days.
So in any programming language,
the first thing that you gotta do is figure out how to print hello world.
And we do this so that we can sort of monitor our code, see what's going on.
There is a function in JavaScript called alert(), which whatever you pass it a string
as parameter and it pauses execution until you press OK.
So in this little piece of code, and it depends.
Different browsers will render this differently, but
in this code this browser is actually parsing the Document Object Model.
And sometimes you might see this 'One Paragraph' show up.
And then it runs this code and it stops.
And the thing is, when this stops, it actually has not done this next line.
And so that next line is not in here.
So it has to pause that JavaScript until you press OK.
And you'll notice that your browser will keep spinning and
spinning and spinning and spinning.
And you, sometimes in some browsers you can't even switch tabs or anything else.
Because this alert has kind of not just stopped JavaScript, but
it's stopped the entire browser from making any progress on anything.
So as a debugging mechanism, it's really a powerful thing.
And if you ever, like watch me coding, when I'm totally lost and
totally confused, I'm like, is my code even working?
I'll put alert statements in, because they are like, [SOUND], stop everything.
And you can sort of look around and figure what's going on.
They get annoying when you get like ten of them.
[SOUND] And that's what we'll talk about, console.log, in a second.
But alert is a great way to do basic debugging.
There are three basic ways that you can include JavaScript.
One is inline in the document, just like I just showed you.
You can have it as part of an HTML tag, an event like onclick or onchange,
onclick equals, and then in between here that's actually JavaScript code.
Or you can put mostly libraries come in from a large file of JavaScript.
And as our applications become more and more interactive on the clients sides,
the amount of JavaScript that each page is including is going up and up and up.
So this is an example of an onclick.
We've done this with the location href, and I've used used this to like put
a button and then change the browser to move to another thing.
But basically, this is an anchor tag Click Me, right?
And it says whenever this anchor tag is clicked,
which means if you click there, then run this JavaScript code.
And this is JavaScript code, it's an alert Hi, and return false.
Now see, it just runs it, two line of JavaScript.
JavaScript doesn't care about line ends or anything like that, or spacing.
And so you just indicate it together with semicolons to indicate
the end of each statement.
And so the return false, this is like a function call, basically.
And if you return false, what that does is suppresses the default behavior.
And the default behavior would be that you would click here and
it would follow this anchor tag.
But if this onclick runs it takes priority, it does the alert and
then it says, don't actually follow that link, okay?
And so you could return true, and it would follow the link.
You could run some JavaScript and
then after your JavaScript ran it would follow the link if that were true.
But when you click on this, it doesn't actually follow the link.
And it depends on this return value being false or true.
And so there's onchange and onclick, these are eventing.
And this is like in the earliest versions of JavaScript, there was an eventing
model that was put into various tags where you could run JavaScript.
because it's very much tied to the Document Object Model.
Including from a file, it's just like where you put the JavaScript
in the middle, except you just have a script and an end script.
And then you say source equals and then there is some code in that.
This code is not HTML, this code in this file is known to be JavaScript.
There's no <?php that has to happen at the beginning of it,
it just is JavaScript.
So up next we'll talk a little bit about how you detect errors when you're writing
JavaScript code.
Explore nosso catálogo
Registre-se gratuitamente e obtenha recomendações, atualizações e ofertas personalizadas.
O Coursera proporciona acesso universal à melhor educação do mundo fazendo parcerias com as melhores universidades e organizações para oferecer cursos on-line.
© 2018 Coursera Inc. Todos os direitos reservados.
