-
Notifications
You must be signed in to change notification settings - Fork 0
/
javascript-frameworks.html
326 lines (286 loc) · 13.8 KB
/
javascript-frameworks.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- Force IE to use its standard document rendering mode - I found this line at https://stackoverflow.com/questions/10975107/forcing-internet-explorer-9-to-use-standards-document-mode -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width">
<title>JavaScript Frameworks | Jschool</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="images/js-icon.png" type="image/x-icon">
</head>
<body>
<header>
<!-- Page header containing logo/site title, with a navigation bar
nested inside of it-->
<a href="index.html"><h1 id="header-logo">Jschool</h1></a>
<!-- navigation bar in the semantically nice nav element -->
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html#tutorial-section">Tutorials</a></li>
<li><a href="quizzes.html">Quizzes</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</header>
<div id="tutorial-container" class="fade-in">
<section class="lead">
<h1>JavaScript Frameworks</h1>
<p>JavaScript frameworks are extremely useful at making it simple to write effective JavaScript that works
properly in all browsers - without browser cross-compatibility becoming an issue.</p>
</section>
<section>
<h2>jQuery</h2>
<p>In this tutorial, we'll cover an introduction to <a href="https://jquery.com/">jQuery</a> - the world's most
popular front-end jQuery framework - and explain how to use it to select and modify HTML elements.</p>
<p>A full jQuery documentation is <a href="https://api.jquery.com/">available here</a>, however this tutorial
provides a concise guide to getting started with the framework...</p>
<p class="top-tip">jQuery is licensed under the <a href="https://jquery.org/license/">open source jQuery
license</a>, which means that it's permissible to use it in your own projects without the need to explicitly
credit it to users - which is convenient in professional websites.</p>
</section>
<section>
<h2>Linking jQuery</h2>
<p>To include jQuery, simply link it (either from a local source, or <a href="https://code.jquery.com/">from
another website - such as the official CDN</a>) using the <script> tag before your script tag that
contains the code that uses jQuery. Below is an example of this in action...</p>
<!-- Code snipping to follow... no indentation inside of code tags because the pre tag forces them to be un-formatted, so indentation does not work! -->
<pre>
<code>
<html>
<head>
<title>DOM Test</title>
</head>
<body>
<!-- Link jQuery from the official CDN -->
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<!-- Now for the script that requires jQuery... -->
<script>
/* $(document).ready() is the jQuery equivalent of window.onload */
$(document).ready(function() {
console.log("jQuery Document Ready!");
});
</script>
</body>
</html>
</code>
</pre>
</section>
<section>
<h2>Selecting Items with jQuery</h2>
<p>jQuery has a convenient global selector function that allows simple element selection like so... $() - inside
of the function, simply add the CSS Selector string you'd use to select the item(s) - just like in using
QuerySelectors, but without the need to worry about how many elements may match - jQuery returns one element
if only one matches (for example in an ID match), or an array of elements if multiple match (unlike
QuerySelectors, which rely upon you to manually differentiate by the use of
querySelector/querySelectorAll).</p>
<p>So, for example, to select all <li> elements on the page, you'd use the $('li') jQuery selector, to
select an element with the ID of container you'd use $('#container'), and to find all instances of the
'fancy' class, you'd use $('.fancy'). An example of these selectors is shown below...</p>
<!-- Code snipping to follow... no indentation inside of code tags because the pre tag forces them to be un-formatted, so indentation does not work! -->
<pre>
<code>
<html>
<head>
<title>DOM Test</title>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<div id="container">
</div>
<p class="fancy">Paragraph 1</p>
<p class="fancy">Paragraph 2</p>
<p class="fancy">Paragraph 3</p>
<!-- Link jQuery from the official CDN -->
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<!-- Now for the script that requires jQuery... -->
<script>
/* $(document).ready() is the jQuery equivalent of window.onload */
$(document).ready(function() {
// let's select all list items
var listItems = $("li");
console.log(listItems);
// let's select the container div...
var container = $("div#container");
console.log(container);
// let's select the fancy class instances...
var fancyElements = $(".fancy");
console.log(fancyElements);
});
</script>
</body>
</html>
</code>
</pre>
</section>
<section>
<h2>Modifying items with jQuery</h2>
<p>jQuery makes is simple to set the text within elements using the .text() function. Firstly, select the item
as described previously, the use myElement.text("the new text goes here") to change the text within
'myElement'.</p>
<p>An example of changing the text of a heading is shown below...</p>
<!-- Code snipping to follow... no indentation inside of code tags because the pre tag forces them to be un-formatted, so indentation does not work! -->
<pre>
<code>
<html>
<head>
<title>DOM Test</title>
</head>
<body>
<h1>A big heading</h1>
<!-- Link jQuery from the official CDN -->
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<!-- Now for the script that requires jQuery... -->
<script>
/* $(document).ready() is the jQuery equivalent of window.onload */
$(document).ready(function() {
// select and change text...
$("h1").text("The new title...");
});
</script>
</body>
</html>
</code>
</pre>
</section>
<section>
<h2>Styling items with jQuery</h2>
<p>jQuery allows a single CSS property of an HTML element to be changed with the .style() function, for example,
to change the background colour of an element with the ID of myElement, you'd perform
$('#myElement').style('background-color', '#ff00ff');.</p>
<p>You can also set multiple CSS properties using the .css() function, for example, to change the text colour
and background colour of an element with ID of myElement, you'd perform $('#myElement').css({"color":
"white", "background-color": "red"});.</p>
<p>An example of changing the text of a heading is shown below...</p>
<!-- Code snipping to follow... no indentation inside of code tags because the pre tag forces them to be un-formatted, so indentation does not work! -->
<pre>
<code>
<html>
<head>
<title>DOM Test</title>
</head>
<body>
<h1>A big heading</h1>
<h2>A little heading</h2>
<!-- Link jQuery from the official CDN -->
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<!-- Now for the script that requires jQuery... -->
<script>
/* $(document).ready() is the jQuery equivalent of window.onload */
$(document).ready(function() {
// select and change large heading text colour...
$("h1").style("color", "#ff00ff");
// select and change small heading text and background colour...
$("h2").css("color": "#ff00ff", "background-color": "#00ff00");
});
</script>
</body>
</html>
</code>
</pre>
</section>
<section>
<h2>Event Listeners with jQuery</h2>
<p>jQuery provides a simple cross browser compatible way to add event listener functions to HTML elements within
the DOM. A full list of <a href="https://api.jquery.com/category/events/" target="_blank">listenable events
is available here</a>, but for this tutorial, we'll just concentrate on the click event.</p>
<p>To set a click listener, simply call .click() on the HTML element you're adding the listener to, passing in a
function to be executed when the listener is called (or an anonymous function).</p>
<p>An example of simple jQuery click listener is shown below...</p>
<!-- Code snipping to follow... no indentation inside of code tags because the pre tag forces them to be un-formatted, so indentation does not work! -->
<pre>
<code>
<html>
<head>
<title>DOM Test</title>
</head>
<body>
<p>Click me!!</p>
<!-- Link jQuery from the official CDN -->
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<!-- Now for the script that requires jQuery... -->
<script>
/* $(document).ready() is the jQuery equivalent of window.onload */
$(document).ready(function() {
// select the p tag and add a .click listener...
$("p").click(function() {
/* the code in this anonymous function is executed
when the click listener is fired (on click) */
console.log("Clicked!");
});
});
</script>
</body>
</html>
</code>
</pre>
</section>
<section>
<h2>Animating with jQuery</h2>
<p>jQuery provides built in animation functions which make animation convenient. A full list of these animation
effects is <a href="https://api.jquery.com/category/effects/">available here</a> - however in this tutorial,
we'll provide a simple example of a simple fade effect.</p>
<p>A very simple example of these functions are the .fadeIn() and .fadeOut() functions, which allow an element
to be faded in and faded out in animations respectively - and can be provided with a time delay, in
milliseconds, for the animation duration.</p>
<p>An example of simple fade animation is shown below...</p>
<!-- Code snipping to follow... no indentation inside of code tags because the pre tag forces them to be un-formatted, so indentation does not work! -->
<pre>
<code>
<html>
<head>
<title>DOM Test</title>
</head>
<body>
<h1>A big heading</h1>
<h2>A little heading</h2>
<!-- Link jQuery from the official CDN -->
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<!-- Now for the script that requires jQuery... -->
<script>
/* $(document).ready() is the jQuery equivalent of window.onload */
$(document).ready(function() {
// select the p tag and add a .click listener...
$("p").click(function() {
// let's fade out the 'p' when clicked, in 500ms...
$("p").fadeOut(500);
});
});
</script>
</body>
</html>
</code>
</pre>
</section>
<section>
<h2>What's next?</h2>
<p>jQuery has many many other features which haven't been touched upon in this tutorial. If you enjoyed this
tutorial and are interested in finding out what else it can do, why not
<a href="https://api.jquery.com/" target="_blank">head over to the jQuery documentation here</a> and find out for yourself?</p>
</section>
</div>
<!-- Consistent footer containing links and other information -->
<footer>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html#tutorial-section">Tutorials</a></li>
<li><a href="quizzes.html">Quizzes</a></li>
<li><a href="about.html">About</a></li>
<li><a href="credits.html">Credits</a></li>
</ul>
<p>© Dylan McKee 2015 - for Newcastle University.</p>
</footer>
<!-- linking JavaScript at the end for page load speed benefits.
Using RequireJS has meant that I only need to link one file into the actual
HTML, allowing my HTML to be semantically beautiful.
I can also load JavaScript in Async, which is ideal to speed up loading,
again thanks to RequireJS.
-->
<script data-main="js/main" type="text/javascript" src="js/lib/require.js" async></script>
</body>
</html>