WEBVTT

1
00:00:00.000 --> 00:00:04.615
[MUSIC]

2
00:00:04.615 --> 00:00:08.470
Hello and welcome to this course on
callback functions in JavaScript.

3
00:00:08.470 --> 00:00:11.490
My name is Andrew, a JavaScript
developer life longer learner and

4
00:00:11.490 --> 00:00:13.680
teacher here at Tree House.

5
00:00:13.680 --> 00:00:15.480
Along your JavaScript journey,

6
00:00:15.480 --> 00:00:18.017
you'll have probably come
across some callbacks already.

7
00:00:19.220 --> 00:00:22.990
Callback functions are a foundational
concept in JavaScript.

8
00:00:22.990 --> 00:00:25.950
In this course,
you'll learn about callback functions and

9
00:00:25.950 --> 00:00:28.430
you'll get to practice writing your own.

10
00:00:28.430 --> 00:00:31.830
Callbacks are a challenging
topic to understand and master.

11
00:00:31.830 --> 00:00:35.270
Repetition, time, patience, and
practice will get you there.

12
00:00:35.270 --> 00:00:39.260
Check the teacher's notes for
some successful learning strategies.

13
00:00:39.260 --> 00:00:40.200
In this course,

14
00:00:40.200 --> 00:00:45.280
we'll be building a couple of projects
along the way all with callback functions.

15
00:00:45.280 --> 00:00:48.970
The first project will be
a simple surprise application.

16
00:00:48.970 --> 00:00:51.910
After random interval of time
a callback is triggered and

17
00:00:51.910 --> 00:00:54.436
the surprise message will
appear on the screen.

18
00:00:54.436 --> 00:00:57.080
Then we'll make a clock.

19
00:00:57.080 --> 00:01:01.480
Thanks to a callback function, the display
of the clock will update every second.

20
00:01:02.950 --> 00:01:07.750
Finally, we'll use the Document Object
Model and callbacks to alter the style

21
00:01:07.750 --> 00:01:12.560
of an input and text area when
a user interacts with the form.

22
00:01:12.560 --> 00:01:14.870
If you're new to
the Document Object Model,

23
00:01:14.870 --> 00:01:19.350
or DOM, be sure to take
the prerequisites for this course.

24
00:01:19.350 --> 00:01:23.800
Callbacks are just functions, but
instead of being called by you explicitly,

25
00:01:23.800 --> 00:01:27.350
they are called by the computer
at a given time in the future.

26
00:01:27.350 --> 00:01:30.950
Think of a fire alarm at a school or
a workplace.

27
00:01:30.950 --> 00:01:35.454
Pupils and staff are given instructions on
what to do when the fire alarm goes off.

28
00:01:35.454 --> 00:01:40.620
Mr. Pierce's class is designated
to go out of the side entrance and

29
00:01:40.620 --> 00:01:42.760
meet at the basketball hoop.

30
00:01:42.760 --> 00:01:44.720
These instructions need to be followed,

31
00:01:44.720 --> 00:01:48.060
no matter the cause of
the fire alarm going off.

32
00:01:48.060 --> 00:01:51.280
If the fire alarm is triggered by
stuff in the school's office for

33
00:01:51.280 --> 00:01:56.195
a drill, if someone uses the alarm pull
station, or, if there's a real fire,

34
00:01:56.195 --> 00:02:00.580
Mr. Pierce's class will follow
the instructions previously given.

35
00:02:00.580 --> 00:02:05.340
They'll exit the side entrance and
meet at the basketball hoop.

36
00:02:05.340 --> 00:02:09.260
It would be inefficient of me to tell the
class the instructions whenever the alarm

37
00:02:09.260 --> 00:02:10.400
sounds.

38
00:02:10.400 --> 00:02:12.025
It's stopping me from doing anything.

39
00:02:12.025 --> 00:02:16.590
It's better for
me to tell them the plan before hand and

40
00:02:16.590 --> 00:02:20.730
have the students and staff carry out
this instructions when necessary.

41
00:02:20.730 --> 00:02:25.230
No matter the method of activation,
the fire alarm was triggered some

42
00:02:25.230 --> 00:02:29.270
time in the future and the instructions
were followed by the pupils and staff.

43
00:02:29.270 --> 00:02:31.400
This is analogous to callbacks.

44
00:02:31.400 --> 00:02:37.100
Just like a function, students and staff
have a set of instructions to execute.

45
00:02:37.100 --> 00:02:40.150
Instead of following the instructions
when you tell them to

46
00:02:40.150 --> 00:02:42.870
they follow the instructions
when they were supposed to.

47
00:02:43.920 --> 00:02:47.270
Remember, a function is a set
of instructions that can be run

48
00:02:47.270 --> 00:02:48.800
over and over again.

49
00:02:48.800 --> 00:02:51.810
When you call or
invoke a function you're asking for

50
00:02:51.810 --> 00:02:54.980
those lines of code to
be executed immediately.

51
00:02:54.980 --> 00:02:58.430
This is also known as
synchronous programming.

52
00:02:58.430 --> 00:03:01.990
When you use the function as a callback,
it gets executed or

53
00:03:01.990 --> 00:03:05.120
invoked when it's supposed
to in the future.

54
00:03:05.120 --> 00:03:07.380
This is known as asynchronous programming.

55
00:03:08.390 --> 00:03:12.780
Using asynchronous programming allows
a computer to perform other tasks

56
00:03:12.780 --> 00:03:15.370
while waiting for an event to occur.

57
00:03:15.370 --> 00:03:19.180
Let's take a look at some scenarios
where callbacks are used.

58
00:03:19.180 --> 00:03:22.760
Callbacks are used for
one off and repeat timers.

59
00:03:22.760 --> 00:03:23.690
For example,

60
00:03:23.690 --> 00:03:28.075
in our clock application, we'll want
the clock to update every second.

61
00:03:28.075 --> 00:03:29.096
[SOUND].

62
00:03:29.096 --> 00:03:32.120
Callbacks are used in user interaction.

63
00:03:32.120 --> 00:03:35.370
When a user clicks a button,
types into an input field, or

64
00:03:35.370 --> 00:03:40.940
submits a form, developers have an
opportunity to have a callback triggered.

65
00:03:40.940 --> 00:03:43.320
You should already be familiar with this.

66
00:03:43.320 --> 00:03:47.480
If not, why not check out
the prerequisites for this course.

67
00:03:47.480 --> 00:03:49.140
Another place where you'll be waiting for

68
00:03:49.140 --> 00:03:52.460
something to occur is
loading data from a server.

69
00:03:52.460 --> 00:03:57.410
AJAX is a popular technique used to
load dynamic information into a web page

70
00:03:57.410 --> 00:03:59.600
without reloading the page.

71
00:03:59.600 --> 00:04:05.380
When you make a request to web server,
the JSON data is returned into a callback.

72
00:04:05.380 --> 00:04:09.570
I've linked to the treehouse content
on AJAX in the teacher's notes.

73
00:04:09.570 --> 00:04:14.864
Another example of using a callback in
JavaScript is reading a file in Node.js.

74
00:04:14.864 --> 00:04:17.756
When the file has been
completely read the contents of

75
00:04:17.756 --> 00:04:19.780
the file are passed into a callback.

76
00:04:19.780 --> 00:04:22.670
This isn't a comprehensive
list of all the callbacks

77
00:04:22.670 --> 00:04:25.830
you'll come across when
writing JavaScript programs.

78
00:04:25.830 --> 00:04:30.670
In fact, callbacks are so common,
you'll be spotting them everywhere.

79
00:04:30.670 --> 00:04:34.530
The prevalence of callback functions and
asynchronous programming and

80
00:04:34.530 --> 00:04:37.530
the speed they can bring
means JavaScript is known for

81
00:04:37.530 --> 00:04:41.630
its performance when building user
interfaces and web applications.

82
00:04:42.920 --> 00:04:46.341
Callbacks are everywhere in JavaScript,
but what do they look like?