1
00:00:00,000 --> 00:00:00,230


2
00:00:00,230 --> 00:00:03,300
VIDEO: Quickly thereafter to see
where we spent a lot of the semester.

3
00:00:03,300 --> 00:00:05,760
We have since pivoted
to Python, of course.

4
00:00:05,760 --> 00:00:08,940
Who's syntax is quite different
but whose ideas are really

5
00:00:08,940 --> 00:00:10,516
fundamentally the same.

6
00:00:10,516 --> 00:00:13,640
DOUG LLOYD: This is like watching the
CS50 explained right before our eyes.

7
00:00:13,640 --> 00:00:13,950
DAVID MALAN: Indeed.

8
00:00:13,950 --> 00:00:15,033
And why we did everything.

9
00:00:15,033 --> 00:00:17,370
Well let's now explain the explanation.

10
00:00:17,370 --> 00:00:20,310
I'll admit I've always had misgivings
with the extent to which we

11
00:00:20,310 --> 00:00:21,150
cover JavaScript.

12
00:00:21,150 --> 00:00:23,233
Because I don't think we
do that language justice.

13
00:00:23,233 --> 00:00:26,100
I mean similarly, do we not
dive super deeply into Python.

14
00:00:26,100 --> 00:00:28,980
But in my mind, we would be
remiss in introducing students

15
00:00:28,980 --> 00:00:31,039
to the world of web programming.

16
00:00:31,039 --> 00:00:33,330
And having given them something
so server side focused.

17
00:00:33,330 --> 00:00:35,663
And giving them the ability
to store data in a database.

18
00:00:35,663 --> 00:00:38,430
If we don't also give
them the ability to make

19
00:00:38,430 --> 00:00:43,950
better user facing interface design
decisions with the client side language

20
00:00:43,950 --> 00:00:44,450
like Java.

21
00:00:44,450 --> 00:00:45,240
DOUG LLOYD: No, that's a fair point.

22
00:00:45,240 --> 00:00:47,448
If you're building a website
and your user experience

23
00:00:47,448 --> 00:00:49,380
is less than satisfactory,
then your website's

24
00:00:49,380 --> 00:00:50,610
probably not going to last too long.

25
00:00:50,610 --> 00:00:50,840
DAVID MALAN: I know.

26
00:00:50,840 --> 00:00:53,280
We spend so much of the semester
building and building and building

27
00:00:53,280 --> 00:00:54,960
to get students to the
point of familiarity

28
00:00:54,960 --> 00:00:56,126
with everything around them.

29
00:00:56,126 --> 00:00:59,070
And then to stop short of giving
them a bit of introduction

30
00:00:59,070 --> 00:01:02,340
to the language in which any client
side library is going to be written in,

31
00:01:02,340 --> 00:01:05,764
or any client side framework.

32
00:01:05,764 --> 00:01:06,930
We would be remiss, I think.

33
00:01:06,930 --> 00:01:08,820
And so that's why we do
introduce JavaScript.

34
00:01:08,820 --> 00:01:12,840
But much like our Introduction to
HTML, CSS, also Python, and SQL.

35
00:01:12,840 --> 00:01:14,940
We try to focus on the fundamentals.

36
00:01:14,940 --> 00:01:17,730
So there's a nice
mapping from C to Python.

37
00:01:17,730 --> 00:01:19,590
A nice mapping from C to JavaScript.

38
00:01:19,590 --> 00:01:21,960
So we very quickly go
through that to reassure.

39
00:01:21,960 --> 00:01:26,182
There's nothing really conceptually
new, at least so far as the basics go.

40
00:01:26,182 --> 00:01:28,890
DOUG LLOYD: The syntax is with
tiny little tweaks here and there.

41
00:01:28,890 --> 00:01:29,723
DAVID MALAN: Indeed.

42
00:01:29,723 --> 00:01:34,170
But there are some juicy opportunities
to discuss event driven programming.

43
00:01:34,170 --> 00:01:37,400
So actually listening for clicks,
mouse drags, and mouse movements.

44
00:01:37,400 --> 00:01:38,190
DOUG LLOYD: Which is
actually pretty great.

45
00:01:38,190 --> 00:01:40,290
Because it's a tieback
all the way to week

46
00:01:40,290 --> 00:01:42,234
zero where we do that
actually in Scratch.

47
00:01:42,234 --> 00:01:45,150
DAVID MALAN: With events in Scratch,
the first week we introduce that.

48
00:01:45,150 --> 00:01:48,600
And then more sophisticated topics
still like anonymous functions.

49
00:01:48,600 --> 00:01:53,220
Which you can see in Python 2 that we
don't introduce them in that context.

50
00:01:53,220 --> 00:01:56,056
Functions that can just be called
without knowing their name.

51
00:01:56,056 --> 00:01:58,930
And closures in JavaScript 2, which
might otherwise trip students up.

52
00:01:58,930 --> 00:02:01,680
Though we don't dwell on
that particular topic.

53
00:02:01,680 --> 00:02:02,610
DOUG LLOYD: Callbacks.

54
00:02:02,610 --> 00:02:04,740
DAVID MALAN: Callback functions,
which is a great paradigm.

55
00:02:04,740 --> 00:02:07,230
Super prevalent throughout a
lot of JavaScript programming.

56
00:02:07,230 --> 00:02:09,229
So we try to at least
give them that vocabulary.

57
00:02:09,229 --> 00:02:14,550
In addition to an exposure to my
[INAUDIBLE] website from 1997 or 1998.

58
00:02:14,550 --> 00:02:16,620
DOUG LLOYD: One of your
first major projects.

59
00:02:16,620 --> 00:02:18,870
DAVID MALAN: There is a
little bit of JavaScript then.

60
00:02:18,870 --> 00:02:21,270
That's how we did the mouse
over on the images up top.

61
00:02:21,270 --> 00:02:22,560
You can do so much more now.

62
00:02:22,560 --> 00:02:25,110
Ajax, of course,
explaining asynchronicity

63
00:02:25,110 --> 00:02:28,440
and slightly fancier topic still that
they might see in higher level classes.

64
00:02:28,440 --> 00:02:30,648
And talking about those
interactions with the server.

65
00:02:30,648 --> 00:02:33,630
So we really don't spend that much
time talking about the language

66
00:02:33,630 --> 00:02:36,720
as we do use it as a point
of departure for some

67
00:02:36,720 --> 00:02:38,670
of these more sophisticated topics.

68
00:02:38,670 --> 00:02:39,420
DOUG LLOYD: Right.

69
00:02:39,420 --> 00:02:42,750
And the only thing that we dive into
beyond the fundamentals of the language

70
00:02:42,750 --> 00:02:46,470
itself, is the very
popular jQuery library.

71
00:02:46,470 --> 00:02:48,660
Because you're so
likely to see examples,

72
00:02:48,660 --> 00:02:51,960
not only in straight
Javascript but also in jQuery.

73
00:02:51,960 --> 00:02:56,190
And it's so prevalent
that we deliberately

74
00:02:56,190 --> 00:02:59,190
take the time to introduce
students to what it looks like.

75
00:02:59,190 --> 00:03:01,920
Because it can look a little
strange if you're not familiar.

76
00:03:01,920 --> 00:03:02,730
DAVID MALAN: It is in there too.

77
00:03:02,730 --> 00:03:04,180
I wish we had a little more time.

78
00:03:04,180 --> 00:03:06,180
But it quickly becomes,
I think, pretty mundane.

79
00:03:06,180 --> 00:03:08,430
And so I'd rather we focus
on the ideas and less

80
00:03:08,430 --> 00:03:11,230
on the syntax and the particulars
of even something like that.

81
00:03:11,230 --> 00:03:14,680
And that too is one of the few examples
of popular libraries we're introducing.

82
00:03:14,680 --> 00:03:16,750
We introduced bootstrap
a couple of years ago.

83
00:03:16,750 --> 00:03:20,070
Just so that students have a little
more expressiveness and easier

84
00:03:20,070 --> 00:03:24,760
expressiveness with styling
their front ends and so forth.

85
00:03:24,760 --> 00:03:26,610
But even the examples
we give in JavaScript,

86
00:03:26,610 --> 00:03:30,660
we use it in our earliest
examples to do form validation.

87
00:03:30,660 --> 00:03:35,426
So a very omnipresent feature of most
websites, many websites these days.

88
00:03:35,426 --> 00:03:37,050
But we talk about how it's implemented.

89
00:03:37,050 --> 00:03:40,740
And how you can model the underlying
DOM, or document object model,

90
00:03:40,740 --> 00:03:42,662
as a tree just a couple of weeks prior.

91
00:03:42,662 --> 00:03:44,370
When we talked about
that data structure.

92
00:03:44,370 --> 00:03:46,995
And how you can register event
listeners to listen for changes.

93
00:03:46,995 --> 00:03:48,810
How you can mutate the
DOM by adding nodes.

94
00:03:48,810 --> 00:03:51,840
So there's a lot of juicy
ways of tying things together

95
00:03:51,840 --> 00:03:54,582
here even without getting caught
up in JavaScript specifically.

96
00:03:54,582 --> 00:03:55,290
DOUG LLOYD: Yeah.

97
00:03:55,290 --> 00:03:57,570
I mean even some of the examples
that I would show in section.

98
00:03:57,570 --> 00:03:59,580
They usually involve
clicking different buttons

99
00:03:59,580 --> 00:04:02,010
to change the color
of things on the page.

100
00:04:02,010 --> 00:04:06,420
So it allows you to again reintroduce
events, to talk about CSS again.

101
00:04:06,420 --> 00:04:10,170
And show how CSS can be manipulated
and represented in and controlled

102
00:04:10,170 --> 00:04:12,900
by the DOM in JavaScript.

103
00:04:12,900 --> 00:04:15,540
The thing that I love about
week 10 and JavaScript

104
00:04:15,540 --> 00:04:17,730
is, it really does,
when you think about it,

105
00:04:17,730 --> 00:04:21,870
allow us to circle back and hit
almost all of the major points

106
00:04:21,870 --> 00:04:25,080
that we've explored along the way.

107
00:04:25,080 --> 00:04:28,560
And just show that these
concepts are pervasive.

108
00:04:28,560 --> 00:04:31,050
And they do show up in every language.

109
00:04:31,050 --> 00:04:33,810
Even though you've spent half of
your term learning one of them

110
00:04:33,810 --> 00:04:35,200
in great detail.

111
00:04:35,200 --> 00:04:38,430
And the other half of the
term learning about half

112
00:04:38,430 --> 00:04:40,112
turns and ways to expand on those.

113
00:04:40,112 --> 00:04:41,820
DAVID MALAN: And after
all, students only

114
00:04:41,820 --> 00:04:45,450
have one more week in the class
besides their final projects.

115
00:04:45,450 --> 00:04:50,650
And so this approach of spending
less and less time on each language,

116
00:04:50,650 --> 00:04:52,840
I don't think is
necessarily a bad thing.

117
00:04:52,840 --> 00:04:54,570
If our goal is to
really empower students

118
00:04:54,570 --> 00:04:56,380
to teach themselves new things.

119
00:04:56,380 --> 00:05:00,967
So I think guiding them through
the right mental paradigm

120
00:05:00,967 --> 00:05:02,050
to have for this language.

121
00:05:02,050 --> 00:05:06,370
Client side programming, in this case,
is a helpful helping hand to have.

122
00:05:06,370 --> 00:05:08,980
But beyond that, I think,
learning the nuances

123
00:05:08,980 --> 00:05:11,500
of this language or
some subsequent language

124
00:05:11,500 --> 00:05:13,150
might as well be in the students court.

125
00:05:13,150 --> 00:05:16,450
DOUG LLOYD: And that we do touch on so
much in the second half of the class

126
00:05:16,450 --> 00:05:19,660
really does speak to the
philosophy that we both share.

127
00:05:19,660 --> 00:05:25,150
Which is that this class does not teach
you C. It teaches you how to program.

128
00:05:25,150 --> 00:05:30,400
It teaches you the skills you need to
go out and learn to do so much more.

129
00:05:30,400 --> 00:05:35,250
Build upon the things that you've
done in CS50 to create great things.

130
00:05:35,250 --> 00:05:36,293