- JavaScript Everywhere 6:20
- What to Expect 2:55
- JavaScript Everywhere Review 5 questions
- Display Messages with JavaScript 5:18
- Your First JavaScript Program 2:56
- Add JavaScript to HTML 6:58
- Debug JavaScript in the Console 5:52
- Adding Scripts and JavaScript Commands Review 6 questions
- JavaScript Practice Challenge 2:39
- JavaScript Challenge Solution 1:45
- Code Challenges and Getting Help
- Write JavaScript Statements 4 objectives
Preview
Video Player
00:00
00:00
Debug JavaScript in the Console
5:52Learn how to identify and fix a problem in a program using the JavaScript console. This error-fixing skill will help assist you as you pick up the syntax of the language.
No developer is perfect.
0:00
Even the most seasoned developer
is bound to make coding mistakes.
0:01
As you start programming,
0:05
you'll find out really fast that
it's easy to make a mistake.
0:06
Like most developers,
you'll probably make lots of mistakes.
0:10
You'll find that most of the mistakes
you'll make in the beginning will be
0:13
simple typing errors,
like leaving off a quote mark or
0:16
mistyping a command like alert.
0:18
These types of errors are common,
but they're often hard to spot and
0:20
could prevent your entire
program from running.
0:23
Finding and fixing problems
is a big part of programming.
0:26
Fortunately, browsers provide tools
that help you find mistakes so
0:30
you can fix your programs.
0:33
The most important is the JavaScript
console which, besides printing useful
0:35
messages, lists any errors
encountered by the JavaScript engine.
0:39
So let's look at how you might identify
and fix a problem in a JavaScript program.
0:43
This error fixing skill will help you
assist you as you pick up the syntax of
0:47
the language.
0:50
Let's force a few errors and
then walk through the fixes together.
0:52
Use your workspace to follow along.
0:55
In the script dot js file, start by
typing alert with the text Hello, world!
0:58
Next, console dot log.
1:09
Providing it the message
hello from the console.
1:14
Right below, add an Alert
1:23
displaying thanks for visiting.
1:27
And finally,
use document dot rite to display
1:34
an h1 with the text
welcome to my web page.
1:39
I'll save my file, and preview the
workspace by clicking the Preview icon.
1:53
And notice how nothing's happening.
1:59
An alert dialog is supposed to appear.
2:01
This usually means that an error
has occurred somewhere.
2:03
Maybe the browser's JavaScript
console can tell me why.
2:06
I'll open the console to see if
there are any error messages.
2:09
Again, you can open the console with the
keyboard shortcut Ctrl+Shift+J on Windows
2:11
or Cmd+Option+J on a Mac.
2:16
And indeed,
2:18
I see a bright red message in the console
that says I have an uncaught SyntaxError.
2:19
Remember, a program syntax
is its vocabulary and
2:24
grammar, or a set of rules that define
how we should structure the code.
2:28
So a syntax error usually means that
you typed something incorrectly.
2:32
The exact error is missing
parentheses after argument list.
2:36
This is a bit cryptic and
2:40
not all that helpful because many
things can cause this error.
2:41
But there is one helpful piece of
information on the right side of
2:45
the console which lets me know that
the error is in the script dot
2:48
js file on line one where I've
written the alert command.
2:52
Remembering how alert works,
2:57
you need to send it information
inside quotation marks.
2:58
Notice how there's only one quote
mark at the end of the message?
3:01
As you'll see later in this course,
programming often involves pairs of
3:05
punctuation marks, like an opening
quote mark and a closing quote mark, or
3:09
an opening parentheses and
a closing parentheses.
3:13
So adding another quotation mark at the
beginning of the message should fix this.
3:16
But something else is wrong.
3:25
Not only should the alert dialog appear,
3:27
there should also be a message printed
to the console using console dot log.
3:30
We're seeing the same
Uncaught SyntaxError as before.
3:36
Again, this usually means that
you have a typo in your code.
3:40
This time, on line two.
3:43
Well, console dot log requires
an an opening parenthesis and
3:45
a closing parenthesis.
3:50
Notice how it's missing
the closing parenthesis?
3:52
Adding the missing parenthesis
should fix the error.
3:55
There's the alert box and
the console message.
4:02
Now, there's another error message
letting us know that Alert is not defined
4:05
on line three.
4:10
Well, JavaScript is
a case-sensitive language
4:12
which means that capitalization matters.
4:15
You should always type
its built-in commands and
4:17
the keywords you'll learn about later
exactly as required by JavaScript.
4:20
Notice how on line three,
I typed alert with a capital A?
4:24
Change it to lowercase and
the alert now works as expected.
4:29
There's one more error,
this time an Uncaught TypeError,
4:36
something about document dot
rite not being a function.
4:40
You'll learn more about
functions in a later course.
4:44
For now, just know that both alert and
document dot write are functions.
4:47
So something is wrong with
the function on line four.
4:51
This time, it's a spelling error.
4:55
The w in write is missing.
4:58
Let me fix that and see if it works.
5:01
And it does.
5:07
One thing to keep in mind about syntax
errors like this is that even if
5:09
a program has many syntax errors,
the console only shows you the first one.
5:13
Fix that, and then the console
will show you the next one.
5:18
Fix that error, and you'll see the next
syntax error listed, and so on.
5:21
Even though making errors is normal and
can often be a good thing,
5:26
especially while learning,
it still can feel a little overwhelming.
5:29
This was a simple example, but when you
have a bigger program that's 10, 20, or
5:33
100 lines of programming code, then you'll
be glad that the console can point you to
5:38
the exact line where errors occur.
5:42
As you become more familiar with
the rules and syntax of the language,
5:45
you'll get better at avoiding,
spotting, and resolving errors.
5:48