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.
Variables
Loading...
From the course by University of Michigan
Interactivity with JavaScript
2327 оценки
University of Michigan
2327 оценки
Course 3 of 5 in the Specialization Web Design for Everybody (Basics of Web Development and Coding)
From the lesson
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.
Meet the Instructors
Colleen van Lent, Ph.D.Lecturer
School of Information
Charles SeveranceAssociate Professor
School of Information
Hi, everybody.
Today we're going to learn about JavaScript variables.
An important part of programming is learning how you can save data.
Because by saving data, you can reuse it and give you program that's impression
that's kind of intelligent and knows the user very well.
In JavaScript, data is stored in what we call variables, and
it's very easy to use variables in your programming.
The only important part is that you need to tell the computer very specifically,
hey, I need you to save something for me.
And this is how we do it.
We start by using the keyword var, V-A-R.
When we're using the editor, hopefully this will show up in some special color
that indicates, ooh, this is a special word to the computer.
Next, you need to give your variable a name.
Now, I chose the name name here, but you can imagine it being age,
first name, last name, dob for date of birth.
The important thing is that it should be special to you, but
not special to the computer.
How does this work?
When you declare a variable, you're basically telling the computer,
let's stop talking in human talk and let's talk computer talk.
So here, once you said var name, it reserved a space in memory.
It said oh, okay.
I know that I'm talking about position 11011, blah, blah, blah, blah, blah.
But Colleen doesn't want to talk about those numbers,
she wants to use the actual variable name.
So whenever she talks about name,
I know she actually wants me to use the value Christopher.
There might be some variables that you've declared,
such as age, that you haven't put anything in there yet.
The important thing to know is that computers aren't smart.
Computers are just trying to give you a way to avoid remembering big
long numbers and instead using English words.
So, when you come up with your variable name,
there's a few rules that you need to follow.
Every variable name can have letters,
digits, underscores, and dollar signs in it.
Now to be honest, I don't put dollar signs in my JavaScript variable names because it
can be very confusing, particular for
those people who know multiple programming language.
So I tend to stick to really just letters, and sometimes digits and underscores.
When you do come up with a variable name, even though numbers are allowed,
your variable can't start with a number.
That number has to be somewhere else in the middle or the end.
Also, variables are case-sensitive.
What that means is that lower case name is not the same thing as name
with a capital N or name with a capital M or name on all capitals.
To the computer these are all different variables.
So just be careful when you're programming and be consistent.
Also, this last one isn't a rule so
much as a suggestion that I want to convey to you.
Make your variable names meaningful or
mnemonic as the computer science term we use.
That means, if the variable is storing someone's name, call it name.
If it's storing age, call it age.
You could get away with calling it 'yyy' or 'bbb', just don't do it.
Okay?
Taking a little bit of time to give meaningful
names will save you a lot of heart ache later.
So to be honest, if you're going to go to the trouble of declaring a variable and
telling the computer to save a spot in memory for
it, it's pretty silly if you don't then use your variable.
And what I mean by use it, is you should assign some sort of value to it.
When we assign things in computer science,
we use what we call the equal, or assignment operator.
So it looks like an equal sign, but we call it assignment,
because what we're doing is we're not saying hey are these two things the same,
we're saying take the value and store it into the variable.
So here I have var name, and instead of just leaving it at that, I go ahead and
say, hey, I want you to store the name Colleen in there, all right.
So this is where when we start talking about assignment statements,
I refer to LHS and RHS.
I mean left-hand side and right-hand side of statements.
The left hand side should always be the variable, alright so this is going
to be in our case name or some sort of element, something that we want to change.
The right hand side is going to be that new value that
will be stored in the variable.
Sometimes, the right hand side can be pretty long and complex.
So right here would be an example where I'm just having, I declare my variable,
and then later I want to update it.
So I say, name equals Colleen.
This works really well.
What I need people to avoid is doing something along this line,
where they switch the left-hand side and the right-hand side.
Mathematically, if you're a math major, this makes perfect sense and
it's the same thing, but it's not okay in programming.
Always put the variable on the left-hand side.
All right, so let's go ahead and
I'm going to show you a few examples of how you might use a variable.
So, if you remember when we talked about output, one way that we were able to
produce output also was a way to generate input, and that was the prompt.
So when you use the prompt, it's waiting for you to type something in and
when you type it in, it's going to store that in the name.
Now can we use that whenever we want to?
We can say document dot write name and we'll promote to the screen.
Next, we can use another variable and
say hey, I want you to use this JavaScript function called date.
And date is going to return what the current date and
time is, right now when you're looking at the page.
Then you can write that information out.
You can even use more from the API saying, you know what?
I want to know where this window is.
What's the location of this window?
And you can write that out as well.
So, let's look at a quick example of how we can use that.
So, let's start with the simple code we used before when we were learning
about prompts.
Only now, I want to combine it with a variable, so I am going to go in here and
do var, and I'm actually just going to call it nm.
The reason I'm doing that instead of name is because I really want to make
people realize that the name you give your variable.
Doesn't really matter, it can be anything you want.
Just because I call it name, doesn't mean you have to.
And as soon as I did this, the prompt statement showed up, and I put in Colleen.
Great, it worked, but we didn't do anything with it.
So, let's go ahead and add a little bit more code.
Now I am going to comment out this line.
You can see why, because otherwise it'll keep asking us to prompt things.
We'll comment that out when we're done.
All right.
So I have this variable called name, now I can go ahead and
do something like document.write nm.
I can also do Console.log(nm).
If you wanted to you could even put in alert(nm).
So let's go ahead and put this back in.
Might want to edit all my typing out.
What is your name?
Well, it is Colleen.
All right, so the alert popped up, but why didn't the document.write work?
So this is a good question, and
this is actually an example where I can go in, that's what was going on.
It was actually waiting for me to hit okay.
When it was all done, it went in and it printed out my name.
So this is a really simple, quick example.
Let's do one that has a little bit more going on with it.
Let's hit cancel right here.
Stupid alerts keep popping up.
That's why we want to get rid of them as soon as possible, and
switch the document outright.
All right, so in this case we're going to talk a little bit more about how you can
add different things together, and
how you can assign your variables using more than just prompts.
So in this case, I went in, I declared a variable.
We're going to go ahead and ask for the name.
I write out the name.
I write out the name twice actually.
Once with my name and then another time with an H1 heading.
And then I just wanted to show you that you could also grab other information from
the document, itself, such as the URL and the title.
So, first thing I'm going to show you is, it says null and null.
And that's kind of weird, and it might happen to you and it might not.
So the first thing I wanted to print out was my name,
but I didn't type anything in the prompt.
So when the JavaScript doesn't know what to do, when it doesn't know what value
should have been in there, it's going to assign it a value of null.
So let's run this one more time.
I'm going to put in the name Christopher just in case
someone else named Christopher is watching this and they can feel special.
But now you can see it printed out Christopher.
Christopher it printed out, printed out the URL,
and it also printed out the title of my page.
Variables are a key component of really doing
any type of programming language at all.
We're going to be using them throughout this entire course, so
I need you to practice them and feel comfortable using them.
Go into the code that I have on CodePen or online and
change it, and see if what you do does what you expect it to do.
You might create some errors and that's okay.
That's a great practice using things that just consult that log.
The most important thing is I want you to understand how variables work,
so that you can use them throughout the rest of the course.
Good luck.
Ознакомьтесь с нашим каталогом
Присоединяйтесь бесплатно и получайте персонализированные рекомендации, обновления и предложения.
Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.
© Coursera Inc., 2018 Все права защищены.
