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.
Common Errors
Loading...
En provenance du cours de University of Michigan
Interactivity with JavaScript
2325 notes
University of Michigan
2325 notes
Cours 3 sur 5 dans Specialization Web Design for Everybody (Basics of Web Development and Coding)
À partir de la leçon
Week Three: Arrays and Looping
This week we will delve into more complex programming concepts: arrays and looping. Arrays allow you to represent groups of related information. Looping provides efficiency and flexibility to your programs. Using both we will expand upon the photo gallery example.
Rencontrer les enseignants
Colleen van Lent, Ph.D.Lecturer
School of Information
Charles SeveranceAssociate Professor
School of Information
Hi everybody, welcome back.
One of the things I like to say is that if you're not messing up,
you're not really programming.
It's really important that you learn that trial and
error is a crucial part to developing your skills.
If you've programmed HTML or
CSS in the past, you know that sometimes you just can't get things to work.
You wanna make something green, and it's just not changing.
You wanna change the font size, and it's just not happening.
And while it's frustrating,
the nice part is that you can visually see your mistakes.
You know something isn't working.
However, when you are using JavaScript
most of the time the browsers are just going to hide your errors.
So, you don't even know that your code isn't working unless
you actually go in there and you look and you try to find the errors on your own.
There are two classic type of errors in programming.
They are called syntactic errors and logic errors.
With syntactic errors,
what you've done is you've broken some sort of rule of JavaScript.
So, perhaps you typed something wrong.
This might look right at first.
GetElementsById(), but
it's important to remember that it's actually getElementById().
A simple typo that breaks the rules and
says, hey, we don't have a function called that.
You might also just forget to close a curly bracket
when you're making a block of statements.
Another one that happens all the time is that you use an undefined variable.
An undefined variable just means you're trying to use a variable but
you never actually told the computer what it was.
This happens a lot when you're copying and pasting and using other people's code.
Since you're not exactly sure what they were doing,
it's very easy to introduce errors.
The good thing is that these errors will often appear in the browser console
if you're on a laptop or desktop.
That's why I'm always encouraging people to open up Inspect Element, take a look.
Click on that console button, and see if there's any errors.
And it'll help you out immensely.
But, unfortunately, that console isn't available on mobile devices.
I've really been looking for it.
I'm hoping that if students find these kind of tools,
they'll share them in the discussion board.
Let me know.
Let me update the course information.
Because you're really at a disadvantage if you don't have that ability to look and
seek out your errors.
Now logical errors are a little bit different.
Your code is valid, you followed all the rules, but
maybe there's something wrong with the thought process that went into it.
You didn't think of every possible scenario of what the input might be.
One example would be that Array Average.
Where we didn't really think to check to see if the length of the array was zero
and so we had to put it in.
Some logic errors really are just typos.
They're just typos that run.
So, let's look at some of the most common errors so
I can try to help you kind of debug your code before you even do it.
So, a few things I don't want you to forget.
First, you need to realize that the number 5 is actually equal
to the letter 5 as far as JavaScript is concerned.
If you're really concerned about making sure something's both the same value and
the same type, you need to use that ===, the triple equal.
Another common error is right here, when people do their if statements.
When you have a single equal statement, to the computer you're saying hey,
take the value Colleen and assign it into the variable name.
That's not what we wanna do, right?
What we really wanna check for is equality, and
we need to use those double equals.
Another thing people do with comparisons, and again, this is an example of a logic
error, not necessarily a syntactic error, is in their boolean comparisons.
So what I'm going to check right here is if the variable
age is greater than 65 and it's less than 18.
If you think about that for a second,
you realize it probably wasn't what you wanted to check, because there's no way
that a number can be greater than 65 and less than 18 at the same time.
This will never be true.
Similarly, on this next line of code,
I have something that's syntactically correct.
And actually, it's logically correct.
But it's just kind of silly.
Why would you ever check if something is greater than 65 or greater than 18?
There's really no need to check both conditions, because if you know you're
greater than 65, you're pretty much guaranteed that you're also over 18.
This is why,
when you're writing your code, you wanna just stop every once in a while and
make sure you're double checking each line as to what it's actually doing.
Another very common source of frustration and
sometimes outright anger with people is the + operator.
You need to remember that the + works differently depending upon
the type of variables.
So 5 + 5, oh.
Well that evaluates to 10.
But 5 + 5, two strings.
That's going to concatenate.
It's not going to add it.
It's gonna concatenate it and give you 55.
So what happens if you have a number with a string and you have that + operator?
Well, in that case, even if it only sees a single string,
even if there were 18 things, +, +, +, as soon as it sees a single string,
it says, oh, this is a concatenation operator not an addition.
This isn't always bad.
Sometimes you want to concatenate strings and variables together.
Sometimes you might wanna have a variable right here, such as source,
that says, oh, do you know what?
I wanna grab a new source file.
How can I do that?
Because I need to use the exact words, url, and the parentheses.
And over here, I need it to end in another parentheses.
Now, who knows what img.src is?
I have a pretty good idea that img.src is an element out there,
where can grab the source.
But this is a great and very useful to you example of how you can combine strings,
plus the variables, plus strings to create a new string.
Next, let's talk about nesting.
When you start nesting,
it's very important that your else statements match the appropriate if.
You also want to make sure that you never include semicolons inside the if itself.
Let me show you an example.
Right here, I have if (age < 18); alert("Too young!");.
This isn't going to do what you expect.
If you remember, computers ignore indentation.
So, while it looks really good and
it looks like you're saying, if this is true, do that.
It's not going to work.
This semi-colon right here, eh, it's really bad.
It counts as a statement.
So what you're really saying right here is, if age is less than 18, nothing.
And then it will immediately go down to the next line.
It's always going to say too young.
In a very similar manner, I have a for
loop over here, where I included a semi-colon.
We're going to have that same exact error.
What's going to happen in this case is that it will loop
five times just like you want it to.
And each time it's going to do nothing.
When that loop is all done, the last thing it's going to do
is go to the next line of code and write out the number 5.
I've put this code online, and I'd really love for you to take a look at it and
kind of play with it, and
help you recognize how these semi-colons can affect the flow of control.
Whenever possible, I really encourage you to use that console.
There have been so many times when I have wasted a lot of effort
trying to fix my code when the console was telling me the error the whole time.
I just didn't think to use it.
Again, think about your code before you write it.
It's so tempting to just start typing things down and
hoping frantically that something will work.
The good news is, it probably will.
The bad news is, you won't understand what you did.
And that's the whole point, right?
Helping you understand better these different aspects of JavaScript.
Code and then test it, and then code and then test it.
And please, save as often as you can.
Because again, it's really easy to start coding and think,
oh I can fix this and make little changes and little changes and then suddenly
realize you don't remember where you were even ten minutes ago in your code.
Finally, ask for help.
That's the point of Coursera, right?
To have these discussion boards.
It's so often the case that someone else can see your errors
more quickly than you can.
It's not because they're any smarter, it's just they have fresh eyes.
So similarly, make sure you go out there and help someone else with their code.
Not only are you doing a great thing, but it's a great way for
you to learn even more.
Thanks.
Explorer notre catalogue
Rejoignez-nous gratuitement et obtenez des recommendations, des mises à jour et des offres personnalisées.
Coursera propose un accès universel à la meilleure formation au monde,
en partenariat avec des universités et des organisations du plus haut niveau, pour proposer des cours en ligne.
© 2018 Coursera Inc. Tous droits réservés.
