Operators and Expressions

Loading...

Do curso por University of Michigan

Interactivity with JavaScript

2676 classificações

University of Michigan

Interactivity with JavaScript

2676 classificações

Curso 3 de 5 em Specialization Web Design para todos

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.

Na lição

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

Conheça os instrutores

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

Hi and welcome back.

Today we're going to be talking about expressions and

mainly operators, the different ways that you can manipulate your code.

So, we've been using statements to execute our JavaScript code.

Every time you saw a line that ended with a semicolon, we were writing a statement.

Statements often have what we call expressions, or

things that can be evaluated.

So expressions produce values.

They might produce a number, or a string, but

many times they produce what we call Boolean values.

So I want to show you all the different types of operators that we can use in

JavaScript to produce these types of expression values.

So if you think back,

I tend to talked about that left hand side equals right hand side.

With the left hand side is a variable and

the right hand side is that new value we want to be stored.

What are our tools for generating different values on that right hand side?

We've seen direct assignments or calls to different functions but

there's more to it that we can do than just that.

So, here's a very simple assignment expression.

I just had x=5 or in another example I said y=12.

So what's going on here is not an equal or a thing if two things are the same.

In this expression I'm saying, go find the value that is story in y.

After I grab that, go and store it in x as well.

We also have arithmetic operators.

So, most of these are very straight forward.

You've probably seen plus, minus, this is multiply, and then we also have divide.

And these are the straightforward math that you learned,

hopefully in somewhere around third or fourth grade at the latest.

So 2 + 5 is 7.

5- 2 is 3.

2 * 5 is 10.

5/2 is 2.5.

But this last one, the modulus operator is something you may not have seen before.

It goes back to the idea of old long division.

If you do 5/2 and you're looking only at the whole numbers, you have 2.

So what's that leftover number that's kind of left over at the end.

So 5%2 is 1.

See if I can do another one here.

What would happen if I did something along the lines of 13/5?

Well, 13/5 would give us something along of 2.blah, blah, blah.

If I do 13%5, you figure out how many times does 5 go into 13?

That's 2, and what's left over?

So 13%5 is going to be 3.

Go ahead and play with that if you'd like, and type a few numbers in and

see what kind of response you get.

Some additional operators we have are the plus plus and minus minus.

This is the increment and the decrement.

So it's the same thing as saying, take whatever I had before and add 1 to it.

Or take whatever I had before and subtract 1 from it.

A third operator that's very similar is the plus equals.

You can also have minus equals.

It's the same thing as writing out long something along the lines of x = x + 2.

It's the same thing as saying x + = 2.

So it's just short hand you don't need to use it.

But I wanted to show you just in case you see it in somebody elses code.

So we talked about how plus will add two numbers together.

That's only true if the operators on both sides are numbers.

In some cases we have the string operators, and

in that case, the plus is actually a concatenation.

So it'll take the Hi and the There and put it together into one variable.

If you wanna put those spaces in, you have to remember to actually add them.

In the same case, if I have a string and a number, and I use the plus,

it's going to be concatenation.

So you wanna be careful when you're playing with this,

because anything that's read in from a prompt is a string.

So you're going to need to make sure that your output is what you're expecting.

The plus equals has the same effect as the plus equals from before.

It just means take whatever I used to have and concatenate this new part on to it.

Those first few operators, we use usually to assign values to a variable.

Sometimes we use what we call Boolean operators to compare values instead.

So in this case, let's assume that I'm assigned x = 12.

Well, some of the different Boolean operators I can use are equal equal,

which means don't set x equal to 5, instead, I want you to check,

is the value stored in x equal to 5?

This is kind of a test case.

Well, in this case, no, it doesn't, so it returns false.

But if I have x==12, oh okay, yep,

those two things are equivalent, so I'm going to return true.

There's also another short hand, which is the exclamation point equals.

This is a negation or the opposite,

it says, hey, make sure the value stored in x doesn't equal 5.

So, you kind of have a little bit of reverse logic in there.

We also have more of the traditional greater than, greater than or equal to,

less than, or less than or equal to, where they just compare the left hand side and

the right hand side and they return true or false.

With JavaScript we have a special case, though.

And that's because in JavaScript we don't really care about types too much.

So what happens if you wanna see if a number is equal to something else, but

you don't want it to say yes if it's a string?

So here I've got the equality statement that we used before, which is equal equal.

If I were to say x == "12" the string, JavaScript would say yep,

yep they're the same.

Even though to us it's probably not the case that 12 the number and

12 the string are the same thing.

So if you're looking for what we call equality with type you would use the equal

equal equal, the triple equal operator.

And that checks and says, hey are these two values the same?

And are they the same type?

So this is just one more thing to kind of put in your arsenal

as you start programming.

Now I'm putting in this little note here, because I need you to stop and

kind of think about these operators and what we've been talking about.

It is complete human nature to watch this video and nod along.

Got it?

Yep. Got it, got it.

And just think you've really grasped everything I've been talking about.

It's really hard to understand how these things work

unless you type in some examples, play with the numbers,

and try to fool yourself and give yourself tricky situations.

If you can do that,

then you'll feel comfortable moving on with these operators.

So, let's go ahead and do one last little group or two groups before we finish up.

In this case, I have what we call the and and, so

this is, sorry the ampersand ampersand.

This stands for and.

It means, hey are the things on the left hand side, and

the right hand side, are they both true?

The pipes, the straight up and down the lines, this is what we call or.

In this case, you might wanna say at least one side must be true in order for

me to say true.

And then we have the exclamation part not, just kind of like this negation.

If I had to come up with an example for using and and

or, one might be that in order to enroll in courses at University of Michigan

you have to be an enrolled student and your tuition has to be paid up.

It doesn't work if it's only one or the other.

For the or, you might use the example that in America,

you can't get into certain movies unless you're 18 or you're with your parents.

So that would be a case where you only need one thing to be true.

When it comes to programming, it's not enough for

you to just know the syntax of the language or the different rules, or

even for you to listen to me and kind of nod along.

It's really key that you go ahead and you practice these different things.

And before you start programming yourself,

make sure you think about the logic you want to go into your program.

Do you want to use greater than or greater than or equal?

Do you want to use the and or do you want to use the or?

If you think about these things before you start, and then you go in and

test them a lot, your code is gonna be a lot cleaner and

the whole experience will be one that you really enjoy much more.

So good luck.

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.

© 2019 Coursera Inc. Todos os direitos reservados.

Baixar na App Store

Baixar no Google Play