1
00:00:00,000 --> 00:00:04,563
[MUSIC].

2
00:00:04,563 --> 00:00:09,231
Let us now spend some time trying
to understand how Bootstrap and

3
00:00:09,231 --> 00:00:14,770
jQuery work together to support
the Bootstrap's JavaScript components.

4
00:00:16,310 --> 00:00:21,110
As we have understood from
the previous module, Bootstrap has

5
00:00:21,110 --> 00:00:26,410
a number of interesting
JavaScript-based components.

6
00:00:26,410 --> 00:00:30,871
And we also learned that
Bootstrap's JavaScript-based components

7
00:00:30,871 --> 00:00:34,440
are all enabled using
jQuery as the support.

8
00:00:34,440 --> 00:00:38,160
So many of these plugins
are written in jQuery.

9
00:00:38,160 --> 00:00:41,780
Their plugins themselves can
be individually included or

10
00:00:41,780 --> 00:00:45,950
you can include all the plugins
together as a single unit.

11
00:00:45,950 --> 00:00:50,350
In the exercises, we have been including
all the Bootstrap's JavaScript

12
00:00:50,350 --> 00:00:53,815
plugins into our webpage.

13
00:00:55,040 --> 00:00:58,350
We also saw this graphic
in the previous module

14
00:00:58,350 --> 00:01:03,160
to help us understand the relationship
between JavaScript, jQuery, and

15
00:01:03,160 --> 00:01:07,740
how the Bootstrap's JS-based
plugins are implemented.

16
00:01:07,740 --> 00:01:14,820
So we saw that Bootstrap's JS components
ox in the jQuery-based components and

17
00:01:14,820 --> 00:01:18,538
make it easy for
us to make use of them in our webpage.

18
00:01:18,538 --> 00:01:25,200
We also learned that the Bootstrap's
JavaScript-based components can be used

19
00:01:25,200 --> 00:01:31,010
in your webpage without writing
a single line of JavaScript code.

20
00:01:31,010 --> 00:01:38,860
So this is where the data-*
attributes come to our rescue.

21
00:01:38,860 --> 00:01:44,133
So you can use the various attributes
that we saw in the previous

22
00:01:44,133 --> 00:01:50,910
module to enable many of our
Bootstrap's JavaScript-based components.

23
00:01:50,910 --> 00:01:55,705
In case you want more flexibility
with your JavaScript components,

24
00:01:55,705 --> 00:02:00,405
then the full flexibility of
that JavaScript-based API

25
00:02:00,405 --> 00:02:05,565
is available for
all the Bootstrap JavaScript components.

26
00:02:05,565 --> 00:02:10,875
You can write code using the jQuery
syntax and then use that

27
00:02:10,875 --> 00:02:16,025
together to control your
Bootstrap's JS components.

28
00:02:16,025 --> 00:02:20,350
We're going to explore that in
a little more detail in this module.

29
00:02:20,350 --> 00:02:26,080
Before we proceed further, let me give you
a quick tour of jQuery and its syntax so

30
00:02:26,080 --> 00:02:32,030
that we understand some of the code
that we'll write in this module.

31
00:02:32,030 --> 00:02:33,830
jQuery is a very powerful,

32
00:02:33,830 --> 00:02:39,810
lightweight JavaScript-based library that
provides a number of different components.

33
00:02:39,810 --> 00:02:45,100
It is a feature rich library
that enables writing code for

34
00:02:45,100 --> 00:02:47,880
doing HTML or DOM manipulation.

35
00:02:47,880 --> 00:02:50,170
It allows you to do CSS manipulation.

36
00:02:50,170 --> 00:02:50,910
So, for example,

37
00:02:50,910 --> 00:02:56,840
you can apply CSS classes to various
HTML elements through the jQuery code.

38
00:02:56,840 --> 00:03:00,860
It allows you to handle HTML events,

39
00:03:00,860 --> 00:03:05,920
and when those events occur you can
implement methods that are being executed

40
00:03:05,920 --> 00:03:08,565
in response to the occurrence
of these events.

41
00:03:08,565 --> 00:03:11,160
jQuery also supports various effects and

42
00:03:11,160 --> 00:03:15,410
animations that can be applied
to your HTML elements.

43
00:03:15,410 --> 00:03:22,650
Also jQuery enables you to interact
with a back end server using AJAX.

44
00:03:22,650 --> 00:03:27,390
Although we won't to explore that
in too much detail in this course.

45
00:03:27,390 --> 00:03:31,937
We also learned that
Bootstrap's JavaScript components

46
00:03:31,937 --> 00:03:34,310
are built upon jQuery.

47
00:03:34,310 --> 00:03:39,480
This components make use of many of
the jQuery methods that are available to

48
00:03:39,480 --> 00:03:45,340
implement the various features that this
Bootstrap JavaScript components support.

49
00:03:45,340 --> 00:03:48,120
Let's briefly understand jQuery Syntax.

50
00:03:48,120 --> 00:03:53,150
Now if you have seen some of
the code that we included

51
00:03:53,150 --> 00:03:57,700
in the previous module, specifically for

52
00:03:57,700 --> 00:04:03,210
the tool tip, you remember that there was
something that started with a dollar sign.

53
00:04:03,210 --> 00:04:09,780
So, the jQuery Syntax is all
implemented using the dollar sign.

54
00:04:09,780 --> 00:04:19,113
The dollar sign at the start of
a sentence implies that this defines and

55
00:04:19,113 --> 00:04:26,070
accesses jQuery's library
plugins that are available.

56
00:04:26,070 --> 00:04:31,070
Now whenever we use the dollar sign,
you also supply a selector.

57
00:04:31,070 --> 00:04:34,920
The selector is used to query and
find those

58
00:04:34,920 --> 00:04:40,270
HTML elements within your DOM to which
you want to apply this manipulation.

59
00:04:40,270 --> 00:04:42,795
There are various ways
of doing selections.

60
00:04:42,795 --> 00:04:46,030
We'll look at them in
the subsequent slide.

61
00:04:47,550 --> 00:04:54,670
Then the third aspect of a jQuery
statement is the action that you specify.

62
00:04:54,670 --> 00:04:59,390
Now that you select an HTML element, what
kind of an action you want to be performed

63
00:04:59,390 --> 00:05:02,700
on that element, so
that is the third part that you will see.

64
00:05:02,700 --> 00:05:09,032
So as an example you can
specify a jQuery statement

65
00:05:09,032 --> 00:05:15,540
like $("p") within codes, and then .hide.

66
00:05:15,540 --> 00:05:20,268
So in this case what it implies is that,
select all those HTML elements

67
00:05:20,268 --> 00:05:24,690
which are the paragraph elements,

68
00:05:24,690 --> 00:05:30,440
starting with the p tag, and
then those elements hide those elements.

69
00:05:30,440 --> 00:05:33,210
So the action to be
performed is the height,

70
00:05:33,210 --> 00:05:38,150
so this will result in all the p
elements being hidden from your

71
00:05:39,400 --> 00:05:43,050
DOM, and consequently from
the webpage that is rendered.

72
00:05:44,510 --> 00:05:49,165
Similarly, you will see later on us using

73
00:05:49,165 --> 00:05:53,288
a statement like saying dollar, and

74
00:05:53,288 --> 00:05:58,608
then within quotation marks, #mycarousel,

75
00:05:58,608 --> 00:06:06,189
implying that you are specifying
the ID of a specific HTML element,

76
00:06:06,189 --> 00:06:10,970
and then specifying carousel and pause.

77
00:06:10,970 --> 00:06:14,340
We'll look at more details
of what this actually does

78
00:06:14,340 --> 00:06:16,930
in one of the subsequent slides there.

79
00:06:16,930 --> 00:06:22,870
But note the structure of
the jQuery statement syntax there.

80
00:06:22,870 --> 00:06:27,040
You specify the selector, and then you
specify the corresponding action to be

81
00:06:27,040 --> 00:06:32,360
performed on the element that
is selected by these selectors.

82
00:06:32,360 --> 00:06:36,335
Let's take a look at
Bootstrap jQuery example.

83
00:06:36,335 --> 00:06:41,490
We'll go back to the previous
example that we have seen earlier,

84
00:06:41,490 --> 00:06:43,410
where we introduce the tooltip.

85
00:06:43,410 --> 00:06:47,480
So, when we introduce the tooltip,
we specified script and

86
00:06:47,480 --> 00:06:50,940
then inside the script,
we said $(document).

87
00:06:50,940 --> 00:06:53,800
In this case the document
means the entire document.

88
00:06:53,800 --> 00:06:56,510
So the selected here is for
the entire document.

89
00:06:56,510 --> 00:07:01,010
So for the entire document,
and then we'll specify ready.

90
00:07:01,010 --> 00:07:02,790
Ready is the action to be taken.

91
00:07:02,790 --> 00:07:07,760
So when the document is ready,
then execute this function that is

92
00:07:07,760 --> 00:07:11,500
specified as a parameter for
this ready action there.

93
00:07:11,500 --> 00:07:17,710
So the function that we saw being used for
the tooltip specified it as $, and

94
00:07:17,710 --> 00:07:23,470
then within brackets, it said,
data-toggle=" tooltip".

95
00:07:23,470 --> 00:07:28,240
Now here we are specifying
that select those elements for

96
00:07:28,240 --> 00:07:33,260
which there is an attribute
with data-toggle="tooltip".

97
00:07:33,260 --> 00:07:38,290
And then for those elements that match
this criteria,perform this action

98
00:07:38,290 --> 00:07:43,270
called enable tooltips for those elements.

99
00:07:43,270 --> 00:07:47,580
And we close the function there.

100
00:07:47,580 --> 00:07:52,890
So this specifies that this
particular script will

101
00:07:52,890 --> 00:07:57,640
be activated for those elements for which
you have applied the data-toggle tooltip.

102
00:07:57,640 --> 00:08:02,840
So basically for those HTML elements
on which you have defined tooltips,

103
00:08:02,840 --> 00:08:05,770
you want the tooltip to be enabled there.

104
00:08:05,770 --> 00:08:12,800
So this is how we interpret this
syntax of this jQuery example here.

105
00:08:12,800 --> 00:08:18,340
Let's look at the various
ways of specifying selectors.

106
00:08:18,340 --> 00:08:23,490
So as we realize from
the jQuery statement syntax,

107
00:08:23,490 --> 00:08:28,240
we always follow dollar and then,
within brackets, we specify a selector.

108
00:08:28,240 --> 00:08:32,990
How do we specify selectors, what are the
various ways you can specify selectors?

109
00:08:32,990 --> 00:08:35,450
Here are some possibilities.

110
00:08:35,450 --> 00:08:38,900
You can specify a selector
by specifying any specific

111
00:08:38,900 --> 00:08:41,960
HTML element by specifying the tag.

112
00:08:41,960 --> 00:08:46,050
So you can say p, button, h4,

113
00:08:46,050 --> 00:08:50,315
h3, or any of the HTML tags directly.

114
00:08:50,315 --> 00:08:54,725
And so in that case the HTML tag
name is specified within quotes and

115
00:08:54,725 --> 00:08:56,475
that'll form your selector.

116
00:08:56,475 --> 00:09:00,225
When you apply a selector like this,
you're saying all the elements that match

117
00:09:00,225 --> 00:09:05,673
this criteria will be selected.

118
00:09:06,950 --> 00:09:11,920
Then you can also specify
a specific HTML DOM

119
00:09:11,920 --> 00:09:16,640
element by specifying the ID of
that element by using the #id.

120
00:09:16,640 --> 00:09:20,990
So, for example, we use #myCarousel.

121
00:09:20,990 --> 00:09:26,480
So in this case you're saying
select that particular

122
00:09:26,480 --> 00:09:31,119
HTML element for
which the ID is myCarousel.

123
00:09:31,119 --> 00:09:36,500
So that's the other way of selecting,
by specifying an ID for an element.

124
00:09:37,550 --> 00:09:40,620
The third possibility is to select

125
00:09:40,620 --> 00:09:44,440
elements by the classes
which have applied to that.

126
00:09:44,440 --> 00:09:50,180
So, for example, you can see
within brackets if you say .btn,

127
00:09:50,180 --> 00:09:53,477
meaning all the HTML DOM elements for

128
00:09:53,477 --> 00:09:58,702
which you have applied the button
class will be selected.

129
00:09:58,702 --> 00:10:03,670
Or you can even further qualify by
specifying a group of classes by

130
00:10:03,670 --> 00:10:08,550
saying .btn.btn-default,
meaning that those elements for

131
00:10:08,550 --> 00:10:14,080
which button class and the button
default class have both been applied.

132
00:10:15,290 --> 00:10:16,620
So that's another way,

133
00:10:16,620 --> 00:10:19,607
by using the classes that
are applied to the HTML element.

134
00:10:20,630 --> 00:10:25,070
The other possibility is to specify
an attribute that has been applied

135
00:10:25,070 --> 00:10:27,120
to HTML element.

136
00:10:27,120 --> 00:10:33,150
So for example, you can say attributes
are specified within square brackets here.

137
00:10:33,150 --> 00:10:38,640
So you can see within square brackets
href, and include it in the quotation so

138
00:10:38,640 --> 00:10:44,370
which means that all those HTML elements
for which href attribute has been applied.

139
00:10:44,370 --> 00:10:47,920
Similarly, you can say
data-toggle="tooltip",

140
00:10:47,920 --> 00:10:50,630
which essentially saves
all those elements for

141
00:10:50,630 --> 00:10:53,745
which the data-toggle tooltip
attribute has been applied.

142
00:10:53,745 --> 00:10:59,270
Also, selecting the current element for

143
00:10:59,270 --> 00:11:04,900
which you want to do
something by saying $(this).

144
00:11:04,900 --> 00:11:08,360
So meaning, for the current element
that has already been selected, for

145
00:11:08,360 --> 00:11:10,360
this, do something.

146
00:11:11,520 --> 00:11:14,900
And a lot more other possibilities.

147
00:11:14,900 --> 00:11:19,760
So these are some examples, so
you will see me using some of these

148
00:11:19,760 --> 00:11:23,610
in the examples and
the exercise that follows.

149
00:11:24,650 --> 00:11:29,950
Not only that,
you can also specify jQuery events,

150
00:11:29,950 --> 00:11:34,840
events based on which you respond.

151
00:11:34,840 --> 00:11:37,720
So, for example, the user interactions

152
00:11:37,720 --> 00:11:42,590
with various elements on your
webpage will cause DOM events.

153
00:11:42,590 --> 00:11:47,220
So, for example, with a mouse, the user
may click at a particular location.

154
00:11:47,220 --> 00:11:52,790
Or double-click, or when the mouse
enters and leaves a specific location.

155
00:11:52,790 --> 00:11:56,880
For keyboard you can respond to
key presses, keydown and keyup.

156
00:11:57,980 --> 00:12:01,680
Events for forms,
when the form is submitted,

157
00:12:01,680 --> 00:12:05,870
when there is a change in
a particular input element

158
00:12:07,040 --> 00:12:13,230
value, and when a particular
element is focused upon, and so on.

159
00:12:13,230 --> 00:12:16,140
We can even talk about
the entire document.

160
00:12:16,140 --> 00:12:20,080
So, upon the loading of the document,
upon resizing the document,

161
00:12:20,080 --> 00:12:24,920
upon scrolling or unloading the document,
you can respond to those events.

162
00:12:24,920 --> 00:12:31,253
So, in that case, the jQuery Event Methods
that are supported include ready,

163
00:12:31,253 --> 00:12:35,140
click, dblclick, mousedown, on, and so on.

164
00:12:35,140 --> 00:12:38,430
So these are all the event methods that

165
00:12:38,430 --> 00:12:42,770
will be executed upon occurrence
of any of these events there.

166
00:12:43,850 --> 00:12:48,480
Let's take an example of
the Bootstrap's Carousel to see how

167
00:12:48,480 --> 00:12:53,640
JavaScript code can be written
to control the carousel actions.

168
00:12:54,980 --> 00:13:01,490
So, for a carousel, you saw already
from the previous module, index size.

169
00:13:01,490 --> 00:13:03,584
We used all these attributes.

170
00:13:03,584 --> 00:13:08,250
So we used the attribute
data-slide="prev|next", or

171
00:13:08,250 --> 00:13:13,780
we said data-slide-to and
then specified the specific slide number,

172
00:13:13,780 --> 00:13:16,910
where it says data-ride+"carousel".

173
00:13:16,910 --> 00:13:21,570
And then we've specified data interval,
the interval for

174
00:13:21,570 --> 00:13:25,800
the sliding action to take place.

175
00:13:25,800 --> 00:13:29,590
So for
the carousel you can do things like, for

176
00:13:29,590 --> 00:13:33,076
example, you can specify
JavaScript based controls.

177
00:13:33,076 --> 00:13:38,674
You can see $, and within brackets
specify to select those elements,

178
00:13:38,674 --> 00:13:44,565
the carousels, that are included in
your page by specifying .carousel.

179
00:13:44,565 --> 00:13:50,577
Meaning all those elements for
which the carousel class has been applied,

180
00:13:50,577 --> 00:13:56,700
and then following that you use
the .carousel to specify something.

181
00:13:56,700 --> 00:14:00,580
So as an example you will see
me using something like this

182
00:14:00,580 --> 00:14:02,090
in the exercise that follows.

183
00:14:02,090 --> 00:14:05,400
We'll say .carousel and carousel, and and

184
00:14:05,400 --> 00:14:09,409
inside there you would
specify interval:2000,

185
00:14:09,409 --> 00:14:15,140
meaning set the interval for
the sliding to be 2000 milliseconds.

186
00:14:15,140 --> 00:14:17,620
Or two seconds, in this case.

187
00:14:17,620 --> 00:14:22,850
So that way you control or
modify a particular property

188
00:14:22,850 --> 00:14:27,890
of the carousel JavaScript element there.

189
00:14:27,890 --> 00:14:32,160
The carousel also supports
many other controls.

190
00:14:32,160 --> 00:14:35,020
So, for example,
you can say carousel('cycle'),

191
00:14:35,020 --> 00:14:38,730
meaning start cycling
the items from left to right.

192
00:14:38,730 --> 00:14:44,410
You can say carousel('pause'), to pause
the sliding action of the carousel.

193
00:14:44,410 --> 00:14:48,171
Then you can say carousel(number), so

194
00:14:48,171 --> 00:14:53,441
it cycles the carousel to that
particular carousel item.

195
00:14:53,441 --> 00:14:56,370
And then you can say carousel('prev'),

196
00:14:56,370 --> 00:15:01,710
carousel('next') to go to the previous
item and the next item in my carousel.

197
00:15:01,710 --> 00:15:07,420
So, these can be invoked directly
from our JavaScript code.

198
00:15:07,420 --> 00:15:10,390
Similarly, when the JavaScript carousel

199
00:15:12,280 --> 00:15:17,550
item is in your webpage,
it causes various events.

200
00:15:17,550 --> 00:15:20,870
And based on the occurrence of
these events, you can respond.

201
00:15:20,870 --> 00:15:23,980
So, for example,
you can say slide.bs.carousel.

202
00:15:23,980 --> 00:15:28,220
This particular event will be fired when
the slide instance method is invoked.

203
00:15:29,550 --> 00:15:32,990
Similarly, slid.bs.carousel means

204
00:15:32,990 --> 00:15:38,460
this event is fired when it has completed
the slide transition to the next item.

205
00:15:38,460 --> 00:15:41,880
So within your code you
can specify something

206
00:15:43,370 --> 00:15:48,780
like
$("#myCarousel").on('slide.bs.carousel'.

207
00:15:48,780 --> 00:15:54,110
So meaning that when that slide action
starts, then invoke this function,

208
00:15:54,110 --> 00:15:57,870
and then do something
inside that function there.

209
00:15:57,870 --> 00:16:00,958
So this kind of code can
be returned also for

210
00:16:00,958 --> 00:16:06,400
responding to the events that
are caused by your carousel's behavior.

211
00:16:07,490 --> 00:16:12,300
Having considered some of these examples,
we'll go on to an exercise where we

212
00:16:12,300 --> 00:16:17,460
will actually write some JavaScript
based code to control our carousel.

213
00:16:17,460 --> 00:16:23,190
We will write code to include a couple
of buttons within our carousel,

214
00:16:23,190 --> 00:16:28,280
which will be used to control
the sliding action of the carousel.

215
00:16:28,280 --> 00:16:33,560
So, which means that we can pause and
resume the sliding action of our carousel.

216
00:16:33,560 --> 00:16:37,699
And we'll activate these
buttons from JavaScript.

217
00:16:37,699 --> 00:16:43,799
[MUSIC]