Documente Academic
Documente Profesional
Documente Cultură
http://agathongroup.com/talks/bootcamp08/
JavaScript
Ajax: DOM, Events, and XMLHttpRequest
Enhancing our demo site
jQuery
Your Time
JavaScript
The Basics
How to include
<script src="file.js"></script>
<script>
var foo = {};
</script>
http://javascript.crockford.com/script.html
6
http://javascript.crockford.com/script.html
7
Syntax
variable and function names are casesensitive, and can't contain spaces or dashes
block comments surround code with /*
*/
Basic Variables
1
2
3
4
5
6
7
8
9
10
11
12
13
14
10
11
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
12
""
(empty string)
false
0
(the number)
null
undefined
NaN
13
Everything else
e.g., "0", "false", "
", []
14
1
2
3
4
5
6
7
8
15
1
2
3
4
5
6
7
8
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
15
and value
conversion from, e.g., strings to numbers
16
1
2
3
4
// addition,
var a = 10 +
var b = 20 var c = 30 *
subtraction
5;
10;
4;
17
1
2
3
4
5
6
7
8
9
10
// addition,
var a = 10 +
var b = 20 var c = 30 *
subtraction
5;
10;
4;
17
1
2
3
4
5
6
7
8
9
10
// addition,
var a = 10 +
var b = 20 var c = 30 *
subtraction
5;
10;
4;
17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// addition,
var a = 10 +
var b = 20 var c = 30 *
subtraction
5;
10;
4;
17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// addition,
var a = 10 +
var b = 20 var c = 30 *
subtraction
5;
10;
4;
17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// addition,
var a = 10 +
var b = 20 var c = 30 *
subtraction
5;
10;
4;
17
Arrays
18
19
1
2
3
4
5
6
19
1
2
3
4
5
6
19
1
2
3
4
5
6
7
8
9
19
1
2
3
4
5
6
7
8
9
19
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
19
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
19
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
20
20
20
Functions
21
1
2
3
4
5
6
22
1
2
3
4
5
6
7
22
1
2
3
4
5
6
7
22
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
22
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
22
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
22
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
22
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
22
23
1
2
3
4
5
23
1
2
3
4
5
23
1
2
3
4
5
6
7
8
9
10
23
1
2
3
4
5
6
7
8
9
10
11
23
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
23
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
23
Objects
24
25
1
2
3
4
5
6
7
8
9
10
11
12
13
25
1
2
3
4
5
6
7
8
9
10
11
12
13
25
1
2
3
4
5
6
7
8
9
10
11
12
13
25
1
2
3
4
5
6
7
8
9
10
11
12
13
25
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
25
26
1
2
3
4
5
6
7
8
9
26
1
2
3
4
5
6
7
8
9
26
1
2
3
4
5
6
7
8
9
26
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
26
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
26
Scope
27
1
2
3
4
5
6
28
1
2
3
4
5
6
7
8
9
10
11
12
13
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
28
Closure
29
1
2
3
4
5
6
7
8
30
1
2
3
4
5
6
7
8
9
30
1
2
3
4
5
6
7
8
9
10
30
1
2
3
4
5
6
7
8
9
10
30
pp. 15-34
31
Sidetrack: Developing
JavaScript
32
33
No Firefox?
Re-consider
34
Ajax (finally)
35
What is Ajax?
36
Discuss
37
What is Ajax?
38
DOM Interaction /
Manipulation
39
1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<title>DOM test</title>
</head>
<body>
<h1 id="main">Main Header</h1>
<p><b>Welcome</b> to the test.</p>
<h2>Second-level header</h2>
<h2>Another second-level header</h2>
</body>
</html>
view
40
41
Useful, compatible
methods
document.getElementById('main')
document.getElementsByTagName('h2')
document.createElement('p')
document.createTextNode('hello')
http://quirksmode.org/dom/w3c_core.html
42
document.getElementById('main');
43
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
<title>DOM test</title>
</head>
<body>
<h1 id="main">Main Header</h1>
<p><b>Welcome</b> to the test.</p>
<h2>Second-level header</h2>
<h2>Another second-level header</h2>
<script>
var header =
document.getElementById('main');
// Firebug logging
console.log(header);
</script>
</body>
view
44
document.getElementsByTagName('h2');
45
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
<title>DOM test</title>
</head>
<body>
<h1 id="main">Main Header</h1>
<p><b>Welcome</b> to the test.</p>
<h2>Second-level header</h2>
<h2>Another second-level header</h2>
<script>
var h2s =
document.getElementsByTagName('h2');
// Firebug logging
console.log(h2s);
</script>
</body>
view
46
document.createElement('p');
47
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
<title>DOM test</title>
</head>
<body>
<h1 id="main">Main Header</h1>
<p><b>Welcome</b> to the test.</p>
<h2>Second-level header</h2>
<h2>Another second-level header</h2>
<script>
var para = document.createElement('p');
// Firebug logging
console.log(para);
</script>
</body>
view
48
49
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
<title>DOM test</title>
</head>
<body>
<h1 id="main">Main Header</h1>
<p><b>Welcome</b> to the test.</p>
<h2>Second-level header</h2>
<h2>Another second-level header</h2>
<script>
var text = document.createTextNode(
'A new paragraph'
);
console.log(text);
</script>
</body>
</html>
view
50
para.appendChild(text);
51
11
12
13
14
15
16
17
18
<script>
var para = document.createElement('p');
var text = document.createTextNode(
'A new paragraph'
);
para.appendChild(text);
console.log(para);
</script>
view
52
53
54
12
13
14
15
16
17
18
19
view
55
12
13
14
15
16
17
18
19
20
21
22
23
view
55
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
view
55
More Manipulation
getAttribute('href')
setAttribute('class', 'newClass')
parentNode
previousSibling
nextSibling
nodeValue
56
1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
<style type="text/css">
.special { font-weight: bold; color: red; }
</style>
</head>
<body>
<h1 id="main">Main Header</h1>
<p class="special">This is special.</p>
<p>This is not.</p>
</body>
</html>
view
57
view
58
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
}, 3000);
view
58
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
view
59
pp. 34-43
60
Events
61
onclick
onsubmit
onload
setTimeout() / clearTimeout()
setInterval() / clearInterval()
http://quirksmode.org/dom/events/index.html
62
dom_09.html
1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
<title>Events</title>
<script src="dom_09.js"></script>
</head>
<body>
<h1>Testing events.</h1>
<ul>
<li><a href="dom_08.html">Previous</a></li>
<li><a href="dom_10.html">Next</a></li>
</ul>
</body>
</html>
63
dom_09.js
1 window.onload = function () {
view
64
dom_09.js
1 window.onload = function () {
2
var links =
3
document.getElementsByTagName('a');
view
64
dom_09.js
1 window.onload = function () {
2
var links =
3
document.getElementsByTagName('a');
4
for (i = 0; i < links.length; i++) {
5
links[i].onclick = clicker;
6
}
7 };
view
64
dom_09.js
1
2
3
4
5
6
7
8
9
10
11
12
window.onload = function () {
var links =
document.getElementsByTagName('a');
for (i = 0; i < links.length; i++) {
links[i].onclick = clicker;
}
};
var clicker = function () {
alert('You clicked ' + this.href);
return false;
};
view
64
dom_10.html
1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
<script src="dom_10.js"></script>
<title>Timeout/Interval testing</title>
<style>
p { color: blue; }
</style>
</head>
<body>
<h1>New paragraphs will appear below</h1>
<div id="test"></div>
</body>
</html>
65
dom_10.js
1 var div,
2
para = '<p>new paragraph!</p>';
view
66
dom_10.js
1 var div,
2
para = '<p>new paragraph!</p>';
3 window.onload = function () {
4
div = document.getElementById('test');
view
66
dom_10.js
1 var div,
2
para = '<p>new paragraph!</p>';
3 window.onload = function () {
4
div = document.getElementById('test');
5
6
// run a function every half-second
7
var i = setInterval(addpara, 500);
view
66
dom_10.js
1 var div,
2
para = '<p>new paragraph!</p>';
3 window.onload = function () {
4
div = document.getElementById('test');
5
6
// run a function every half-second
7
var i = setInterval(addpara, 500);
8
9
// clear it out after four seconds
10
setTimeout(function () {
11
console.log('all done');
12
clearInterval(i);
13
}, 4000);
14 };
view
66
dom_10.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var div,
para = '<p>new paragraph!</p>';
window.onload = function () {
div = document.getElementById('test');
// run a function every half-second
var i = setInterval(addpara, 500);
// clear it out after four seconds
setTimeout(function () {
console.log('all done');
clearInterval(i);
}, 4000);
};
var addpara = function () {
div.innerHTML += para;
};
view
66
XMLHttpRequest (xhr)
67
xhr
68
ajax_01.html
1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
<script src="js/xhr.js"></script>
<script src="ajax_01.js"></script>
<title>XHR testing</title>
</head>
<body>
<h1>Results will go below</h1>
<div id="results"></div>
</body>
</html>
69
ajax_01.js
1 window.onload = function () {
2
var xhr = getXHR();
view
70
ajax_01.js
1 window.onload = function () {
2
var xhr = getXHR();
3
if (xhr) {
4
// what to do when things happen
5
xhr.onreadystatechange = changer;
view
70
ajax_01.js
1 window.onload = function () {
2
var xhr = getXHR();
3
if (xhr) {
4
// what to do when things happen
5
xhr.onreadystatechange = changer;
6
7
// the URL we want to go to
8
xhr.open('GET', 'result2.html',
9
true);
view
70
ajax_01.js
1 window.onload = function () {
2
var xhr = getXHR();
3
if (xhr) {
4
// what to do when things happen
5
xhr.onreadystatechange = changer;
6
7
// the URL we want to go to
8
xhr.open('GET', 'result2.html',
9
true);
10
11
// perform the request
12
xhr.send(null);
13
}
14 }
view
70
ajax_01.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
window.onload = function () {
var xhr = getXHR();
if (xhr) {
// what to do when things happen
xhr.onreadystatechange = changer;
// the URL we want to go to
xhr.open('GET', 'result2.html',
true);
}
var changer = function () {
};
view
70
ajax_02.js
18 // do something, when something happens
19 var changer = function () {
view
71
ajax_02.js
18 // do something, when something happens
19 var changer = function () {
20
if (xhr.readyState == 4) {
view
71
ajax_02.js
18 // do something, when something happens
19 var changer = function () {
20
if (xhr.readyState == 4) {
21
if (xhr.status == 200) {
view
71
ajax_02.js
18 // do something, when something happens
19 var changer = function () {
20
if (xhr.readyState == 4) {
21
if (xhr.status == 200) {
22
div.innerHTML =
23
xhr.responseText;
view
71
ajax_02.js
18 // do something, when something happens
19 var changer = function () {
20
if (xhr.readyState == 4) {
21
if (xhr.status == 200) {
22
div.innerHTML =
23
xhr.responseText;
24
}
25
}
26 };
view
71
72
72
73
74
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
view
77
pp. 47-65
78
Tomorrow
79