Output

Loading...

Del curso dictado por University of Michigan

Interactivity with JavaScript

2456 calificaciones

University of Michigan

Interactivity with JavaScript

2456 calificaciones

Curso 3 de 5 en SpecializationWeb Design for Everybody (Basics of Web Development and Coding)

If you want to take your website to the next level, the ability to incorporate interactivity is a must. But adding some of these types of capabilities requires a stronger programming language than HTML5 or CSS3, and JavaScript can provide just what you need. With just a basic understanding of the language, you can create a page that will react to common events such as page loads, mouse clicks & movements, and even keyboard input. This course will introduce you to the basics of the JavaScript language. We will cover concepts such as variables, looping, functions, and even a little bit about debugging tools. You will understand how the Document Object Model (DOM) is used by JavaScript to identify and modify specific parts of your page. After the course, learners will be able to react to DOM Events and dynamically alter the contents and style of their page. The class will culminate in a final project - the creation of an interactive HTML5 form that accepts and verifies input. This is the third course in the Web Design For Everybody specialization. A basic understanding of HTML and CSS is expected when you enroll in this class. Additional courses focus on enhancing the styling with responsive design and completing a capstone project.

De la lección

Week One: Introduction to JavaScript

If you haven't use a traditional programming language before, this first week is key. Before we begin with the how, we will talk about the why, mainly why we want to use JavaScript. The main reason is that it is very easy for JavaScript to work with the DOM. And easy is always a great way to start. Speaking of starting out, it is also always more fun when our code actually does something we can see, so we will jump quickly into different ways we can generate output. It won't be flashy yet, but it will be a great way to get your feet wet with traditional programming. After that we go back to the basics of how a computer uses data. We begin with variables, expressions, and operators.

DOM Review with Object Oriented Programming6:32

Operators and Expressions8:26

Conoce a los instructores

Colleen van Lent, Ph.D.
Lecturer
School of Information
Charles Severance
Associate Professor
School of Information

Hi everybody.

Today, let's start coding a little bit to see some of things we can do with

JavaScript.

Maybe, using HTML 5 or CSS 3,

you've added what we call a little bit of interactivity to your page.

There's the details tag if you're using HTML.

There's the hover property or pseudo class if you're using CSS 3 and you were able

to make little things change in your page by reacting to what the user was doing.

But typically that's not really what we call interactivity when

we're talking about true web design because these new elements and

the pseudo classes can only go so far.

They tend to be temporary changes.

So, what can JavaScript do that HTML and CSS can't do?

Well, the one that I'm gonna talk about today is that they can read and

write HTML elements.

Now that's not the only thing they can do.

We're gonna be talking about different things like reacting to events and

validating data and different things like that.

But today, we're really gonna focus on output.

Whenever you learn a new programming language,

one of the first things you want to do is find out how can I make things happen.

How can I have things print out to the screen or generate some sort of output.

Well, JavaScript doesn't have a built-in print function.

So instead, you have four or

five different ways where you can generate different things.

So, data is typically displayed via alerts, prompts, document.write,

innertHTML or reading information directly to the console.

So let's talk about each one of these.

You've all seen alert JavaScript alert boxes.

Because many times, especially back maybe 10, 15 years ago, when you went to a page,

people loved to have these little boxes pop up and say hey, welcome.

Doing things like that.

So in JavaScript it's pretty easy.

You can just use alert and then inside you put my message here.

So a few things just to point out right from the beginning.

Alert is a keyword.

So in your editor it should change some sort of special color.

Inside the parentheses, and

you need the parentheses, both beginning parentheses and end parentheses,

is that you're gonna have some sort of string and it should be inside quotes.

It can be inside single quotes or double quotes.

And then, the last thing is, to end in a semicolon.

So if you were to put this code right here inside your HTML, you can go ahead and

generate some output.

So let me show you an example.

So what I've done over here is I've created

the HTML that I would need to generate an alert box.

So I've got my body tag, now this is new I have what we call is a script tag.

The script tag tells the browser, oh wait, don't just print this out,

I'm actually going to give you some JavaScript that I want you to run.

And in this case, I have my code alert("Hello World").

So if I were to run this, and I'm gonna go ahead and refresh it.

You can see I get my little pop up box.

Now, if you're running this along with me at home, and

you're not using Chrome, the box is going to look different.

For some of you it's gonna have the little Safari symbol, or the Edge, or Firefox.

That's okay, the important thing is that somewhere in here it says hello world.

Now you might be click on the prevent this page from creating additional

dialogues button.

Don't do it.

Because in this class we're going to be playing with alert a lot

because it's a nice way for you to know if your code's working or not.

So again, this is just a quick and simple way for

you to generate output using the alert.

The next way we can generate output is using prompt.

So prompt is very similar to alert, but it's slightly different in that it wants

you to do more than just click OK or Cancel.

It wants you to generate some sort of input to put in there.

So as you can see, the alert and the prompt look very similar.

They've both got the key word, the parentheses, the semicolon and

the string, but the way they act is very different.

In this case when you run it, it's actually waiting for

you to type something in.

So I can put in Colleen van Lent and hit OK.

Now, don't get too excited.

We didn't do anything with the stuff I put in.

But, again, I'm just giving you some of the different options.

So you have alert and you have prompt and

both of them generate some sort of box where you can display information, but

nothing is actually showing up on the page.

So, let's switch to the general ways in which you can generate output

to the screen.

One way, if you want something to be what we call permanent,

to not just disappear once you hit okay, is to use what we call document.write.

So again, I'm hoping that you're picking up on these ideas that we're using terms

like document, and element, and different things like that.

The way that document.write works is it goes through and

it says, we want you to write something directly to the page.

We want it to become part of the dom,

we want it to become part of the page permanently.

So in this case I can't just use write.

That won't work.

Alert worked by itself, prompt worked by itself, but

here you need to have document.write().

Same thing, hopefully you're seeing the pattern.

So let's see when we add this.

Here you can see that inside the script tag, again, I have the document.write().

But instead of things popping up or asking us for input, it goes ahead and

just writes it directly into the screen.

Now I'm gonna change something right here.

Because I put h1 inside the quotes.

If I get rid of that you can see this still works, but

instead of being an h1 heading, its just regular old text.

So document.rate is a way for you to generate output.

But we need to realize that it is probably not the best way to do it.

Because sometimes if you're misusing it you can overwrite other things that exist.

So document.write is something you just want to use when you're beginning and

you don't know some of the more complex methods.

So one of the more complex methods you can use is called innerHTML.

And with innerHTML, you combine this with other functions that return elements.

So, you can't just say innerHTML or element.innerHTML.

You have to say, all right, what part of the page do I wanna change?

Oh, I wanna change that particular paragraph, all right.

But how do I grab that particular paragraph?

Or remember we have these different APIs that can go and get things for us.

So in this case, I have element which is hopefully we'll find something using

the API that in your HTML equals time to learn JavaScript.

So I wanted you to recognize something right away.

When we use document dot write alert and

prompt we had parenthesis around the side, here.

We don't have that anymore.

Instead we use an equal and we just have it ending with a semicolon.

So no parenthesis when you're using inner.HTML.

How do you figure that out when you're coding?

You don't.

You just keep coding and practicing and after a while,

it becomes second nature to you, all right?

So when I talk about this kind of generic element,

I didn't make it a color that's something that you need to grab using the API.

So let me give you an example of something we can do using innerHTML.

So let's go ahead and look at this, what I've done is I made an h1 heading and

I've given it the id of test.

I also have a paragraph element a little bit further down that just says,

hey what happens if I'd messed with this code?

All right, so I want you to look as closely as you can.

You might be on a small screen.

You might not be able to see it.

Is that in my h1 heading, I actually have the words tester, but

if you look at the web page, it says Hello World.

Well how did I do that?

It's pretty simple, actually.

Cuz you can go in, and I can say document.getElementById.

Test.

It's going to grab, it's going to look through the page and go where,

where can I find something that says ID equals test.

Oh there it is.

All right, now I wanna change whatever used to be in there and

replace it with the words, Hello World.

This is kind of what happens when this is a weird example,

but all early examples are weird examples, right?

Because you just want to get your feet wet.

But I did want you to look at what happens if I do this.

Back from your days of learning CSS, you might remember that in general,

you can kind of expect to see multiple classes.

But you're making this contract or

rule that says, you really should see each ID only once.

So JavaScript is expecting you to keep that rule.

When you do something get element by ID,

JavaScript thinks there's only one out there.

So, I'm gonna stop as soon as I find that one.

As you can see down here, it changed the first one it found.

It didn't change the second one it found, okay?

All right.

So, again, let's go play with the last output method I have for you today.

So document.write and enter HTML.

Write directly into the browser screen.

What we have in this last option is something that doesn't write

to the browser screen, but it does write to the browser console.

So console dot log takes a message and

says you know what, I want to store this information some place.

But I want it to be something that not necessarily pops up and everyone can see.

So the console's a place to see what's going on in your program during execution.

If you haven't used the console before,

you might not realize that it's even there.

But I'm hoping you have when you were doing your CSS.

But let's take a look at this example.

So in my HTML up here, you can see that I have console.log Hello World.

Nothing too exciting going on here.

But if you look at the actual browser, hm, it's not there.

It doesn't show up like it did with document.ray.

So where did it go?

Well, it's actually in the Console of your browser.

So I'm gonna go down here.

I did inspect element, and I checked the Console.

Oh, you can see Hello World showed up here.

What happens if I change the code to Hello World Too, and then I.

You're kind of sending yourself these little secret messages that can help you

debug your code.

You can log things, you can leave little notes for

yourself, you can do debugging tests.

You can even log the things that other people have been writing in.

And so this is a really handy tool if you wanna do development but

not let everyone see exactly what you are doing.

We're gonna come back to this example in just a second, but first I wanna talk to

you about why you should be utilizing the console by now, if you haven't.

The console does more than just take these print statements.

It also provides debugging information for JavaScript, HTML, and CSS.

By going in and looking at it,

you're gonna be able to help yourself become a much better programmer.

So let's take a look at just doing some debugging with the JavaScript.

I'm gonna go in here and I'm gonna accidentally forget

to put in my first quotes, all right.

But if we didn't know that there's anything going on or

that anything is supposed to show up.

You might not realize that there's a typo but inside the console, it'll show you

pretty much along the way add, hey, anything in red means we found an error.

So red lines usually means either you have a JavaScript error or

you linked to a file that didn't exist.

So when I put it back in, you can go right there.

I really wanna stress this to you right now.

I need you to stop and

make sure that you know how to access the console on your machine.

One of the things that really helps other people help you

is when you can pinpoint where exactly your code is going wrong.

You might not know what's going wrong,

but your saying somewhere in this line of code I'm getting an error.

This kind of ability to help yourself debug is going to be

critical to going on and advancing in this course.

So if I'm gonna ask you debug, I should probably tell you how you can debug.

If you're using Safari, you're going to need to go to Preferences > Advanced.

Once you go there,

you should be able to check the Show development menu in menu box.

And that will show you some of the different JavaScript errors and

tools that you have available.

In Google Chrome, you go to Developer, and then JavaScript Console.

If you've been coding with me in the past, you know that my shortcut

is always to right click, inspect element, and boom, there it is for you.

If you're using Firefox, you wanna go to Tools and then Console.

Firefox is, believed by many to be the best browser to use when you're doing

debugging for Javascript.

If you're using Edge or

Internet Explorer, typically hitting F12 will bring up the different JavaScript and

development tools that you can use to improve your page.

All right, so let's review.

So right now we're doing really simple things, and I understand that.

It's not that exciting to just print things out to the screen or

have little pop up boxes coming up.

But we need to do these small steps to help you gain the confidence to go on and

write more complex bits of code.

So as you learn more, the power that you're going to have to manipulate the dom

is really gonna get quite impressive.

But for now, just make the small mistakes, learn how to debug the small mistakes, and

then that way you'll be able to build your confidence slowly.

Good luck.

Explora nuestro catálogo

Inscríbete de manera gratuita y obtén recomendaciones personalizadas, actualizaciones y ofertas.

Coursera brinda acceso universal a la mejor educación del mundo, al asociarse con las mejores universidades y organizaciones, para ofrecer cursos en línea.

© 2018 Coursera Inc. Todos los derechos reservados.

Descargar en la App Store

Consíguelo en Google Play