1
00:00:00,236 --> 00:00:03,530
Now, you're going to take your first
step into programming by creating

2
00:00:03,530 --> 00:00:05,430
a simple JavaScript program.

3
00:00:05,430 --> 00:00:09,500
A program is a set of instructions
that perform specific tasks

4
00:00:09,500 --> 00:00:11,150
when executed by the computer.

5
00:00:11,150 --> 00:00:13,580
In other words,
you're telling the computer what to do.

6
00:00:13,580 --> 00:00:16,860
To get started and code along with me,
open your workspace and

7
00:00:16,860 --> 00:00:22,670
preview the index.html file in the browser
by clicking the Preview Workspace icon.

8
00:00:22,670 --> 00:00:26,670
As you learned earlier, one of the
benefits of programming with JavaScript,

9
00:00:26,670 --> 00:00:29,870
and what makes JavaScript unique
to other programming languages,

10
00:00:29,870 --> 00:00:31,570
is that it runs in the browser.

11
00:00:31,570 --> 00:00:34,474
There's no need to set up any
kind of development environment,

12
00:00:34,474 --> 00:00:37,290
which means you can start coding
with JavaScript right away.

13
00:00:37,290 --> 00:00:40,700
As you learned earlier, there's
a development tool built right into

14
00:00:40,700 --> 00:00:44,944
the browser called the JavaScript console,
which you can use to run JavaScript code.

15
00:00:44,944 --> 00:00:48,272
Most browsers have a JavaScript console,
but to follow along with me,

16
00:00:48,272 --> 00:00:52,320
I suggest that you use Chrome,
since that's what I'll use in this course.

17
00:00:52,320 --> 00:00:57,400
You can open the console using the
keyboard shortcut Cmd+Option+J on a Mac,

18
00:00:57,400 --> 00:00:59,720
or Ctrl+Shift+J on Windows.

19
00:00:59,720 --> 00:01:01,781
Or another quick way is to right or

20
00:01:01,781 --> 00:01:06,850
Ctrl+click anywhere in your browser
window, and to choose Inspect.

21
00:01:06,850 --> 00:01:09,810
This will open up Chrome DevTools,
which is a useful set of web

22
00:01:09,810 --> 00:01:12,810
developer tools to help you
build websites and applications.

23
00:01:12,810 --> 00:01:15,040
You may have already used
the Elements tab, for

24
00:01:15,040 --> 00:01:18,450
example, to inspect your HTML and CSS.

25
00:01:18,450 --> 00:01:21,690
Click Console to get to
the JavaScript console.

26
00:01:21,690 --> 00:01:25,990
The Console is often used to inspect
the inner workings of your websites and

27
00:01:25,990 --> 00:01:27,080
applications.

28
00:01:27,080 --> 00:01:29,780
You can see messages
logged from JavaScript or

29
00:01:29,780 --> 00:01:31,900
any errors that might be occurring.

30
00:01:31,900 --> 00:01:34,110
And as you experienced earlier,

31
00:01:34,110 --> 00:01:38,640
you can run JavaScript in the console to
interact with the page you're inspecting.

32
00:01:38,640 --> 00:01:42,690
In the console, you can also run
JavaScript that's not related to the page.

33
00:01:42,690 --> 00:01:47,090
Sometimes, you just want to test some code
or try out a certain JavaScript feature.

34
00:01:47,090 --> 00:01:50,600
The Console is a perfect place for
these kinds of experiments.

35
00:01:50,600 --> 00:01:52,489
For example, in the Console,

36
00:01:52,489 --> 00:01:57,078
you can use JavaScript to perform
basic math operations, like 10 + 5.

37
00:01:57,078 --> 00:01:59,989
Press Enter and
the Console outputs the result of

38
00:01:59,989 --> 00:02:03,334
the math operation below your code,
in this case 15.

39
00:02:03,334 --> 00:02:08,142
If you type something in between
quotation marks like, Hello, world!,

40
00:02:08,142 --> 00:02:09,909
it will echo it back to you.

41
00:02:09,909 --> 00:02:14,031
By default, the Console clears
whenever you refresh the page.

42
00:02:14,031 --> 00:02:18,249
You can also click the Clear console icon,
or right or

43
00:02:18,249 --> 00:02:23,334
Ctrl+click anywhere in the console and
select Clear console.

44
00:02:23,334 --> 00:02:25,556
Now, let's use a command called alert,

45
00:02:25,556 --> 00:02:28,234
which I showed you at
the beginning of the course.

46
00:02:28,234 --> 00:02:35,317
Type the word alert in a lowercase
into the Console, followed by ();.

47
00:02:35,317 --> 00:02:36,820
Let's see what it does.

48
00:02:36,820 --> 00:02:40,431
Press Enter, or Return,
to run this command in the console,

49
00:02:40,431 --> 00:02:42,732
and a dialog box pops up in the browser.

50
00:02:42,732 --> 00:02:45,898
It seems like something is
missing in the dialog box.

51
00:02:45,898 --> 00:02:48,018
So let's try adding a message.

52
00:02:48,018 --> 00:02:52,691
And here's a shortcut, to bring back the
previous command you ran in the console,

53
00:02:52,691 --> 00:02:55,620
press the up arrow key
on your keyboard once.

54
00:02:55,620 --> 00:02:58,308
This lets you edit the command and
run it again.

55
00:02:58,308 --> 00:03:02,690
This time add a set of quotes
inside the parentheses, and

56
00:03:02,690 --> 00:03:05,440
in between the quotes, type, Hello world!.

57
00:03:07,190 --> 00:03:09,830
Press Enter, again, and
now there's a message.

58
00:03:11,210 --> 00:03:15,200
Alert is a command that's
built into the browser.

59
00:03:15,200 --> 00:03:18,920
It opens a dialog box and
displays a message.

60
00:03:18,920 --> 00:03:23,690
What we've typed here is
called a JavaScript statement.

61
00:03:23,690 --> 00:03:27,160
A statement is like a sentence,
and just as sentences end

62
00:03:27,160 --> 00:03:31,440
in a period,
JavaScript statements end in a ;.

63
00:03:31,440 --> 00:03:34,310
You write programs by
typing multiple statements,

64
00:03:34,310 --> 00:03:37,380
just like you write a paragraph
by writing multiple sentences.

65
00:03:39,110 --> 00:03:40,325
Let's add another statement,

66
00:03:40,325 --> 00:03:46,750
console.log is another widely used command
that outputs a message to the console.

67
00:03:46,750 --> 00:03:51,026
Like alert, you can take the message
between the parentheses,

68
00:03:51,026 --> 00:03:54,126
within a set of quotes,
write Hello world!.

69
00:03:56,293 --> 00:04:01,907
console.log is going to log or print
the message Hello world to the Console.

70
00:04:01,907 --> 00:04:04,470
Pressing Enter displays the message.

71
00:04:04,470 --> 00:04:07,289
This might not seem
immediately interesting, but

72
00:04:07,289 --> 00:04:10,892
as we get farther along in the course and
you do more programming,

73
00:04:10,892 --> 00:04:14,055
you'll start to see just how
handy console.log can be.

74
00:04:15,673 --> 00:04:19,672
Here's another command, document.write().

75
00:04:19,672 --> 00:04:24,094
The word document represents
the current web page, and

76
00:04:24,094 --> 00:04:29,189
write is a command that writes
a message to the current web page.

77
00:04:29,189 --> 00:04:32,854
You'll learn more about why there's
a dot between document and write and

78
00:04:32,854 --> 00:04:36,470
between console and log, for
example, later in this course.

79
00:04:36,470 --> 00:04:41,480
Now, let's provide a message to
document.write between quotation marks.

80
00:04:41,480 --> 00:04:44,415
This time I'll type,
Welcome to my web page.

81
00:04:47,264 --> 00:04:52,570
Press Enter, and notice how it writes
the message directly into the web page.

82
00:04:52,570 --> 00:04:55,380
Everything on the page is
replaced by the message.

83
00:04:55,380 --> 00:04:56,810
This is not permanent, though.

84
00:04:56,810 --> 00:04:58,949
Refreshing the page
brings everything back.

85
00:04:58,949 --> 00:05:03,534
document.write is not as widely used
as some of the other techniques

86
00:05:03,534 --> 00:05:06,785
you'll learn to insert
content into a web page.

87
00:05:06,785 --> 00:05:10,825
But you still might see it used in
real-world projects, and it's a quick and

88
00:05:10,825 --> 00:05:14,492
simple way to let you produce some
output while learning JavaScript,

89
00:05:14,492 --> 00:05:16,625
just like alert and even console.log.