1
00:00:00,570 --> 00:00:01,720
No developer is perfect.

2
00:00:01,720 --> 00:00:05,770
Even the most seasoned developer
is bound to make coding mistakes.

3
00:00:05,770 --> 00:00:06,720
As you start programming,

4
00:00:06,720 --> 00:00:10,230
you'll find out really fast that
it's easy to make a mistake.

5
00:00:10,230 --> 00:00:13,630
Like most developers,
you'll probably make lots of mistakes.

6
00:00:13,630 --> 00:00:16,595
You'll find that most of the mistakes
you'll make in the beginning will be

7
00:00:16,595 --> 00:00:18,758
simple typing errors,
like leaving off a quote mark or

8
00:00:18,758 --> 00:00:20,585
mistyping a command like alert.

9
00:00:20,585 --> 00:00:23,700
These types of errors are common,
but they're often hard to spot and

10
00:00:23,700 --> 00:00:26,680
could prevent your entire
program from running.

11
00:00:26,680 --> 00:00:30,230
Finding and fixing problems
is a big part of programming.

12
00:00:30,230 --> 00:00:33,870
Fortunately, browsers provide tools
that help you find mistakes so

13
00:00:33,870 --> 00:00:35,320
you can fix your programs.

14
00:00:35,320 --> 00:00:39,168
The most important is the JavaScript
console which, besides printing useful

15
00:00:39,168 --> 00:00:43,140
messages, lists any errors
encountered by the JavaScript engine.

16
00:00:43,140 --> 00:00:47,410
So let's look at how you might identify
and fix a problem in a JavaScript program.

17
00:00:47,410 --> 00:00:50,705
This error fixing skill will help you
assist you as you pick up the syntax of

18
00:00:50,705 --> 00:00:52,339
the language.

19
00:00:52,339 --> 00:00:55,863
Let's force a few errors and
then walk through the fixes together.

20
00:00:55,863 --> 00:00:58,397
Use your workspace to follow along.

21
00:00:58,397 --> 00:01:05,949
In the script dot js file, start by
typing alert with the text Hello, world!

22
00:01:09,937 --> 00:01:12,738
Next, console dot log.

23
00:01:14,461 --> 00:01:17,835
Providing it the message
hello from the console.

24
00:01:23,476 --> 00:01:27,260
Right below, add an Alert

25
00:01:27,260 --> 00:01:32,256
displaying thanks for visiting.

26
00:01:34,342 --> 00:01:39,949
And finally,
use document dot rite to display

27
00:01:39,949 --> 00:01:45,005
an h1 with the text
welcome to my web page.

28
00:01:53,545 --> 00:01:59,270
I'll save my file, and preview the
workspace by clicking the Preview icon.

29
00:01:59,270 --> 00:02:01,170
And notice how nothing's happening.

30
00:02:01,170 --> 00:02:03,290
An alert dialog is supposed to appear.

31
00:02:03,290 --> 00:02:06,360
This usually means that an error
has occurred somewhere.

32
00:02:06,360 --> 00:02:09,090
Maybe the browser's JavaScript
console can tell me why.

33
00:02:09,090 --> 00:02:11,720
I'll open the console to see if
there are any error messages.

34
00:02:11,720 --> 00:02:16,070
Again, you can open the console with the
keyboard shortcut Ctrl+Shift+J on Windows

35
00:02:16,070 --> 00:02:18,930
or Cmd+Option+J on a Mac.

36
00:02:18,930 --> 00:02:19,710
And indeed,

37
00:02:19,710 --> 00:02:24,790
I see a bright red message in the console
that says I have an uncaught SyntaxError.

38
00:02:24,790 --> 00:02:28,210
Remember, a program syntax
is its vocabulary and

39
00:02:28,210 --> 00:02:32,530
grammar, or a set of rules that define
how we should structure the code.

40
00:02:32,530 --> 00:02:36,121
So a syntax error usually means that
you typed something incorrectly.

41
00:02:36,121 --> 00:02:40,630
The exact error is missing
parentheses after argument list.

42
00:02:40,630 --> 00:02:41,680
This is a bit cryptic and

43
00:02:41,680 --> 00:02:45,490
not all that helpful because many
things can cause this error.

44
00:02:45,490 --> 00:02:48,340
But there is one helpful piece of
information on the right side of

45
00:02:48,340 --> 00:02:52,050
the console which lets me know that
the error is in the script dot

46
00:02:52,050 --> 00:02:57,080
js file on line one where I've
written the alert command.

47
00:02:57,080 --> 00:02:58,730
Remembering how alert works,

48
00:02:58,730 --> 00:03:01,990
you need to send it information
inside quotation marks.

49
00:03:01,990 --> 00:03:05,930
Notice how there's only one quote
mark at the end of the message?

50
00:03:05,930 --> 00:03:09,240
As you'll see later in this course,
programming often involves pairs of

51
00:03:09,240 --> 00:03:13,240
punctuation marks, like an opening
quote mark and a closing quote mark, or

52
00:03:13,240 --> 00:03:16,320
an opening parentheses and
a closing parentheses.

53
00:03:16,320 --> 00:03:20,643
So adding another quotation mark at the
beginning of the message should fix this.

54
00:03:25,259 --> 00:03:27,343
But something else is wrong.

55
00:03:27,343 --> 00:03:30,095
Not only should the alert dialog appear,

56
00:03:30,095 --> 00:03:35,131
there should also be a message printed
to the console using console dot log.

57
00:03:36,884 --> 00:03:40,490
We're seeing the same
Uncaught SyntaxError as before.

58
00:03:40,490 --> 00:03:43,730
Again, this usually means that
you have a typo in your code.

59
00:03:43,730 --> 00:03:45,466
This time, on line two.

60
00:03:45,466 --> 00:03:50,200
Well, console dot log requires
an an opening parenthesis and

61
00:03:50,200 --> 00:03:52,450
a closing parenthesis.

62
00:03:52,450 --> 00:03:55,977
Notice how it's missing
the closing parenthesis?

63
00:03:55,977 --> 00:03:59,573
Adding the missing parenthesis
should fix the error.

64
00:04:02,060 --> 00:04:05,740
There's the alert box and
the console message.

65
00:04:05,740 --> 00:04:10,990
Now, there's another error message
letting us know that Alert is not defined

66
00:04:10,990 --> 00:04:12,200
on line three.

67
00:04:12,200 --> 00:04:15,260
Well, JavaScript is
a case-sensitive language

68
00:04:15,260 --> 00:04:17,740
which means that capitalization matters.

69
00:04:17,740 --> 00:04:20,760
You should always type
its built-in commands and

70
00:04:20,760 --> 00:04:24,890
the keywords you'll learn about later
exactly as required by JavaScript.

71
00:04:24,890 --> 00:04:29,275
Notice how on line three,
I typed alert with a capital A?

72
00:04:29,275 --> 00:04:34,594
Change it to lowercase and
the alert now works as expected.

73
00:04:36,479 --> 00:04:40,766
There's one more error,
this time an Uncaught TypeError,

74
00:04:40,766 --> 00:04:44,813
something about document dot
rite not being a function.

75
00:04:44,813 --> 00:04:47,535
You'll learn more about
functions in a later course.

76
00:04:47,535 --> 00:04:51,500
For now, just know that both alert and
document dot write are functions.

77
00:04:51,500 --> 00:04:55,819
So something is wrong with
the function on line four.

78
00:04:55,819 --> 00:04:58,170
This time, it's a spelling error.

79
00:04:58,170 --> 00:05:01,140
The w in write is missing.

80
00:05:01,140 --> 00:05:03,311
Let me fix that and see if it works.

81
00:05:07,309 --> 00:05:09,474
And it does.

82
00:05:09,474 --> 00:05:13,816
One thing to keep in mind about syntax
errors like this is that even if

83
00:05:13,816 --> 00:05:18,735
a program has many syntax errors,
the console only shows you the first one.

84
00:05:18,735 --> 00:05:21,665
Fix that, and then the console
will show you the next one.

85
00:05:21,665 --> 00:05:26,010
Fix that error, and you'll see the next
syntax error listed, and so on.

86
00:05:26,010 --> 00:05:29,650
Even though making errors is normal and
can often be a good thing,

87
00:05:29,650 --> 00:05:33,530
especially while learning,
it still can feel a little overwhelming.

88
00:05:33,530 --> 00:05:38,220
This was a simple example, but when you
have a bigger program that's 10, 20, or

89
00:05:38,220 --> 00:05:42,340
100 lines of programming code, then you'll
be glad that the console can point you to

90
00:05:42,340 --> 00:05:45,360
the exact line where errors occur.

91
00:05:45,360 --> 00:05:48,810
As you become more familiar with
the rules and syntax of the language,

92
00:05:48,810 --> 00:05:51,570
you'll get better at avoiding,
spotting, and resolving errors.