Original subtitles

1 1

Hello there, and welcome to the next section. 2

2

In this section, we'll use jQuery 3

3

to add some dynamic effects to our web page 4

4

over the next lectures. 5

5

So, what is jQuery? 6

6

jQuery is by far the most popular JavaScript library 7

7

in the world. 8

8

It is completely free and open source software, 9

9

and jQuery makes it incredibly easy to select 10

10

and manipulate HTML elements, create animations, 11

11

or even develop Ajax applications. 12

12

For example, jQuery can be used for 13

13

finding an element in a HTML document 14

14

with a certain property, like all H1 elements, 15

15

and then changing one or more of its CSS attributes 16

16

or making it respond to an event like a mouse click. 17

17

jQuery's architecture allows developers 18

18

to create plug-ins to extend jQuery's function. 19

19

There are literally thousands of jQuery plug-ins 20

20

available on the Internet for free 21

21

that we can download and include in our websites. 22

22

The links in the coursebook will help you 23

23

get started with this. 24

24

So let me start off by showing you some jQuery plug-ins 25

25

so that you can see the endless possibilities 26

26

we have with jQuery. 27

27

So the first plug-in I'm going to show you 28

28

is this Magnific Popup, and this is a responsive lightbox 29

29

and dialogue script where we can create galleries, 30

30

as you can see here, 31

31

and these are actually responsive. 32

32

Or, you can, well this is the same. 33

33

You can, for instance, open a YouTube video, 34

34

or open a Google Map, 35

35

you know, all kinds of stuff 36

36

which require a pop-up. 37

37

So even a model dialogue is possible with this. 38

38

Okay, next up, I have this one called Tooltipster, 39

39

and this allows us to create these tools tips, 40

40

which are additional information which we can see 41

41

when we hover over a certain element. 42

42

And you have probably seen those somewhere, 43

43

like all different kinds of tool tips. 44

44

And, this is kind of easy to use, 45

45

so we have the instructions down here, 46

46

and well, you can use this in your project if you want to. 47

47

And next, is a plug-in called Maplace.Js 48

48

and this helps us to embed Google Maps into our website 49

49

and to even create markers and control menu 50

50

for locations on a map. 51

51

And down here we have some examples, 52

52

simple maps, and then with markers, 53

53

and with even more advanced stuff. 54

54

So this is pretty powerful and allows us 55

55

to do all kinds of stuff with maps, 56

56

and also very easy to use. 57

57

Next we have this one. 58

58

This is, maybe not so useful but I find it kind of cool, 59

59

and it's called Typer.js, 60

60

which is a jQuery plug-in that types 61

61

and it looks just like this here. 62

62

So it deletes the text and writes on your text, 63

63

and you can use this to show multiple content 64

64

in a single line, 65

65

and I think it creates a cool effect. 66

66

And, the last one I want to show you, 67

67

is this One Page Scroll. 68

68

And what this does is, it creates multiple sections 69

69

where we can see always one section 70

70

after the other like this. 71

71

So each section fills the whole viewport hide. 72

72

And you can create some beautiful stuff with this 73

73

like presentation-style websites. 74

74

Alright, and now before we finish this lecture, 75

75

let's just include jQuery in our project 76

76

and create a new JavaScript file, 77

77

which is where we will create all our jQuery code. 78

78

Alright, so to include jQuery, 79

79

we use the Google Hosted Libraries distribution network. 80

80

And so, down here, we scroll down here, alright, 81

81

so down here, we just grab this script, 82

82

and paste it to our website, just as we did before 83

83

with those three scripts. 84

84

So basically, jQuery is also a huge JavaScript file, 85

85

which creates jQuery which we can then use 86

86

to create some powerful stuff 87

87

such as I explained to you before. 88

88

And actually, we should put it not here, 89

89

but before we close the body element. 90

90

So this is the correct, maybe not the correct, 91

91

but it's the perfect place to put the JavaScript files, 92

92

so that they are only called 93

93

after the rest of the web page is loaded. 94

94

And now, the last thing before we finish 95

95

is to create a new JavaScript file, 96

96

and I'm gonna save it and I'm gonna call it Scripts.js . 97

97

And since it's our file it goes into the Resources folder 98

98

and then JavaScript, which is empty but not anymore. 99

99

So let's now use a very basic example 100

100

just to see if jQuery actually works. 101

101

Okay, so every document where we write our jQuery code 102

102

has to start like this. 103

103

So we write document and ready, 104

104

and this ensures that this code can only run 105

105

after the document has been loaded. 106

106

And in here, we have to write this code word function, 107

107

and then open some colored braces, 108

108

and then give it some space. 109

109

And inside of this, we will put all our code. 110

110

Now just to test this, 111

111

let's pretend we want to change the background color 112

112

of the H1 element. 113

113

So in jQuery to select any element, you do it like this. 114

114

So this is the selector and now we can do this 115

115

just like in CSS, so here I'm gonna write H1, 116

116

and now we use a click method. 117

117

So a method is like a function, 118

118

so anyone who clicks that H1 element, 119

119

this is the function that will happen. 120

120

So then we want this, so we select this element, 121

121

and this keyword here now means our H1 element 122

122

because that's what we selected in the first place. 123

123

So let's use the CSS method, 124

124

and in here we can change CSS properties. 125

125

So we can write background color, for example, 126

126

and then as the second value, 127

127

and brackets actually help us here 128

128

by saying we want a string here, 129

129

so, we now say the color. 130

130

And we want it to be red, 131

131

and this is the RGB code for red, if you remember. 132

132

So a string is like a couple of characters grouped together, 133

133

such as this background color or this. 134

134

Okay, now before we can test this code, 135

135

we need of course to incorporate this JavaScript file 136

136

in the index HTML file. 137

137

So down here, where we called 138

138

the other JavaScript files, right? 139

139

So now we add a new script here, and in this case, 140

140

it is on our computer and it is the one we just created. 141

141

So it's in the Resources folder and descript JS. 142

142

And I close it and now this should work. 143

143

And now, we can click this and the background turns red, 144

144

such as we said in our jQuery code. 145

145

So let's quickly review this, 146

146

so we select the H1 element 147

147

and then we use the click method, 148

148

so when we click on the H1 element and select this, 149

149

so the H1 element we selected in the first place, 150

150

and then it changes the CSS style of that element. 151

151

And, in this case, we add a background color 152

152

and make it red, and that's exactly what happened. 153

153

Alright, so we don't need this anymore actually, 154

154

this was just to show you that everything works. 155

155

And now, in the next couple of lectures, 156

156

we're gonna add some real-world jQuery code 157

157

to make our website even better. 158

158

So, see you in the next lecture!