1
00:00:00,000 --> 00:00:04,281
Hi, I'm Barry. Welcome to this course

2
00:00:04,281 --> 00:00:07,276
about JavaScript variables and types. This

3
00:00:07,276 --> 00:00:08,814
course will teach you some advanced

4
00:00:08,814 --> 00:00:10,589
concepts and techniques in JavaScript that

5
00:00:10,589 --> 00:00:13,833
can help you to create readable and

6
00:00:13,833 --> 00:00:16,347
maintainable code. In this first module,

7
00:00:16,347 --> 00:00:18,601
you'll learn about variable use, string

8
00:00:18,601 --> 00:00:21,459
literals, and array and object

9
00:00:21,459 --> 00:00:24,037
deconstruction, which assigns values to

10
00:00:24,037 --> 00:00:26,754
new variables. And before we dive into the

11
00:00:26,754 --> 00:00:29,040
code, we'll discuss how this course works

12
00:00:29,040 --> 00:00:31,408
and what you need to follow along, and

13
00:00:31,408 --> 00:00:34,535
after that, you can enjoy lots of demos to

14
00:00:34,535 --> 00:00:37,060
learn some advanced JavaScript techniques.

15
00:00:37,060 --> 00:00:41,530
Ready? Let's dive in. Before we dive in, I

16
00:00:41,530 --> 00:00:43,750
want to quickly show you how this course

17
00:00:43,750 --> 00:00:46,236
works and how you can follow along with

18
00:00:46,236 --> 00:00:48,481
the demos. I've set up the demos as simply

19
00:00:48,481 --> 00:00:50,814
as I can so that you don't have to do a

20
00:00:50,814 --> 00:00:53,080
lot of complicated setup to follow along.

21
00:00:53,080 --> 00:00:55,711
All the demos are done in Visual Studio

22
00:00:55,711 --> 00:00:58,639
Code, which is a simple yet powerful code

23
00:00:58,639 --> 00:01:00,718
editor, which is available for most

24
00:01:00,718 --> 00:01:04,902
platforms. You can download it for free at

25
00:01:04,902 --> 00:01:07,154
code.visualstudio .com. I also assume that

26
00:01:07,154 --> 00:01:09,740
you already know what JavaScript is and

27
00:01:09,740 --> 00:01:12,680
how it works. You should also know the

28
00:01:12,680 --> 00:01:14,612
basics of web development, so what the

29
00:01:14,612 --> 00:01:16,040
structure of a basic website looks like

30
00:01:16,040 --> 00:01:18,398
and how it is used to paint a website on

31
00:01:18,398 --> 00:01:21,832
the screen of the user. The demos are all

32
00:01:21,832 --> 00:01:24,634
done using a simple website. You need the

33
00:01:24,634 --> 00:01:26,447
code for the website to follow along. In

34
00:01:26,447 --> 00:01:29,663
the next slide, I'll show you where to get

35
00:01:29,663 --> 00:01:32,277
it. And finally, the course contains lots

36
00:01:32,277 --> 00:01:35,166
of demos. Most techniques are explained in

37
00:01:35,166 --> 00:01:38,047
simple demos, and some are explained

38
00:01:38,047 --> 00:01:40,727
through slides. The demos are built around

39
00:01:40,727 --> 00:01:43,387
a simple web application, which you can

40
00:01:43,387 --> 00:01:46,342
download from GitHub at this address. All

41
00:01:46,342 --> 00:01:48,758
right, let's take a look at the demo

42
00:01:48,758 --> 00:01:51,606
application. Here it is in Visual Studio

43
00:01:51,606 --> 00:01:54,430
Code. Here you can see the files of the

44
00:01:54,430 --> 00:01:57,040
web application. It is a simple app that

45
00:01:57,040 --> 00:02:00,043
has an HTML file, some CSS, and most

46
00:02:00,043 --> 00:02:03,321
importantly for us, a JavaScript file. You

47
00:02:03,321 --> 00:02:05,428
can get this code straight from Visual

48
00:02:05,428 --> 00:02:07,670
Studio Code by doing View, Command

49
00:02:07,670 --> 00:02:09,794
Palette, and then use the Git Clone

50
00:02:09,794 --> 00:02:12,644
command and enter the URL of the GitHub

51
00:02:12,644 --> 00:02:15,010
repository for the demo code.

52
00:02:15,010 --> 00:02:17,343
Alternatively, you can also go to the

53
00:02:17,343 --> 00:02:20,025
GitHub page of that address and download

54
00:02:20,025 --> 00:02:22,820
or clone the code manually. Let's take a

55
00:02:22,820 --> 00:02:26,137
look. The application is used to apply for

56
00:02:26,137 --> 00:02:29,050
a loan. The JavaScript code base is messy,

57
00:02:29,050 --> 00:02:31,466
and we are going to use some advanced

58
00:02:31,466 --> 00:02:33,761
JavaScript techniques to make it more

59
00:02:33,761 --> 00:02:36,137
readable and maintainable. This is the

60
00:02:36,137 --> 00:02:38,721
index.html file, which is the only HTML

61
00:02:38,721 --> 00:02:41,400
file. It contains a table with fields that

62
00:02:41,400 --> 00:02:44,090
users need to fill in to apply for a loan.

63
00:02:44,090 --> 00:02:47,290
These are things like their name and date

64
00:02:47,290 --> 00:02:51,508
of birth. Also, we have a CSS file. This

65
00:02:51,508 --> 00:02:54,572
contains the basic styles for the web

66
00:02:54,572 --> 00:02:57,740
application. Nothing fancy here. And this

67
00:02:57,740 --> 00:03:00,700
site.js file is what this course is all

68
00:03:00,700 --> 00:03:03,697
about. This is the JavaScript that makes

69
00:03:03,697 --> 00:03:06,222
the application work. It is pretty

70
00:03:06,222 --> 00:03:08,646
straightforward and, like I said, pretty

71
00:03:08,646 --> 00:03:11,080
messy. It defines a loan application class

72
00:03:11,080 --> 00:03:13,413
that we use to store applications for

73
00:03:13,413 --> 00:03:16,549
loans in. We store those applications in

74
00:03:16,549 --> 00:03:18,878
this array here, and when the application

75
00:03:18,878 --> 00:03:21,523
loads, we load some existing loan

76
00:03:21,523 --> 00:03:23,674
applications into the array so that we

77
00:03:23,674 --> 00:03:25,815
have something to play with. A loan

78
00:03:25,815 --> 00:03:27,702
application consists of an applicant's

79
00:03:27,702 --> 00:03:30,733
name, date of birth, annual income, and

80
00:03:30,733 --> 00:03:34,318
some risk factors like if she has kids or

81
00:03:34,318 --> 00:03:36,434
other loans. Applicants also need to fill

82
00:03:36,434 --> 00:03:39,360
in the purpose for the loan and the amount

83
00:03:39,360 --> 00:03:42,535
they want to borrow. When the application

84
00:03:42,535 --> 00:03:44,737
loads, it populates an HTML select

85
00:03:44,737 --> 00:03:47,632
element, which is a drop-down list with

86
00:03:47,632 --> 00:03:51,027
the preloaded loan applications. I do that

87
00:03:51,027 --> 00:03:53,586
here by iterating over the array with the

88
00:03:53,586 --> 00:03:55,550
applications and creating new items for

89
00:03:55,550 --> 00:03:58,304
the drop-down list. And when a user clicks

90
00:03:58,304 --> 00:04:00,864
on an item in the drop-down list, the loan

91
00:04:00,864 --> 00:04:03,540
application gets loaded. This simply gets

92
00:04:03,540 --> 00:04:06,472
the loan application and loads its values

93
00:04:06,472 --> 00:04:09,329
into the input boxes on the screen. There

94
00:04:09,329 --> 00:04:11,721
is a lot more code in this JavaScript

95
00:04:11,721 --> 00:04:13,883
file. There are functions that validate

96
00:04:13,883 --> 00:04:16,881
the user's input and functions that add a

97
00:04:16,881 --> 00:04:18,913
new loan application. It's not important

98
00:04:18,913 --> 00:04:21,256
to know exactly how the app works. I'll

99
00:04:21,256 --> 00:04:23,382
cover the pieces that we need to clean up

100
00:04:23,382 --> 00:04:26,593
in the demos. So let's see this thing in

101
00:04:26,593 --> 00:04:29,010
action. You can run the web app by simply

102
00:04:29,010 --> 00:04:31,510
opening the file system like this and

103
00:04:31,510 --> 00:04:35,010
opening the index.html file in a browser.

104
00:04:35,010 --> 00:04:36,422
I use Google Chrome, but you can use your

105
00:04:36,422 --> 00:04:38,884
favorite browser if you want. Please avoid

106
00:04:38,884 --> 00:04:41,193
using Internet Explorer, as that doesn't

107
00:04:41,193 --> 00:04:43,843
play well with web standards and some of

108
00:04:43,843 --> 00:04:46,315
the things that we are going to cover. As

109
00:04:46,315 --> 00:04:48,755
you can see, I can load an existing

110
00:04:48,755 --> 00:04:51,055
application, and it creates a summary for

111
00:04:51,055 --> 00:04:54,055
me at the bottom, like this. All right,

112
00:04:54,055 --> 00:04:57,428
that's it. Enough introduction. Let's dive

113
00:04:57,428 --> 00:04:59,786
in. We'll start with a demo about

114
00:04:59,786 --> 00:05:02,727
JavaScript template literals and tagged

115
00:05:02,727 --> 00:05:04,793
template literals. These can help you to

116
00:05:04,793 --> 00:05:07,573
make strings more useful and readable in

117
00:05:07,573 --> 00:05:10,010
code. We'll also cover the difference

118
00:05:10,010 --> 00:05:13,199
between the let and const keywords, and

119
00:05:13,199 --> 00:05:14,901
we'll take a look at how to easily put

120
00:05:14,901 --> 00:05:17,526
values from arrays and objects into

121
00:05:17,526 --> 00:05:22,000
distinct variables using the destructuring syntax.

