Skip to content

Commit 347487f

Browse files
committed
Move <script> tags before the closing </body>
1 parent 86161e8 commit 347487f

File tree

11 files changed

+171
-173
lines changed

11 files changed

+171
-173
lines changed

html/introduction-to-html/the-html-head/css-and-js.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="utf-8">
55
<title>Meta examples</title>
6-
6+
77
<meta name="author" content="Chris Mills">
88
<meta name="description" content="This is an example page to demonstrate usage of metadata on web pages.">
99

@@ -19,6 +19,7 @@
1919
<h1>Meta examples</h1>
2020

2121
<p>Japanese example: ご飯が熱い。</p>
22+
23+
<script src="script.js"></script>
2224
</body>
23-
<script src="script.js"></script>
2425
</html>

javascript/apis/document-manipulation/dom-example-manipulated.html

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -14,31 +14,32 @@
1414
</style>
1515
</head>
1616
<body>
17-
<section>
18-
<img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.">
19-
<p>Here we will add a link to the <a href="https://www.mozilla.org/">Mozilla homepage</a></p>
20-
</section>
21-
</body>
22-
<script>
23-
var link = document.querySelector('a');
24-
link.textContent = 'Mozilla Developer Network';
25-
link.href = 'https://developer.mozilla.org';
17+
<section>
18+
<img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.">
19+
<p>Here we will add a link to the <a href="https://www.mozilla.org/">Mozilla homepage</a></p>
20+
</section>
21+
22+
<script>
23+
var link = document.querySelector('a');
24+
link.textContent = 'Mozilla Developer Network';
25+
link.href = 'https://developer.mozilla.org';
2626

27-
var sect = document.querySelector('section');
28-
var para = document.createElement('p');
29-
para.textContent = 'We hope you enjoyed the ride.';
30-
sect.appendChild(para);
27+
var sect = document.querySelector('section');
28+
var para = document.createElement('p');
29+
para.textContent = 'We hope you enjoyed the ride.';
30+
sect.appendChild(para);
3131

32-
var text = document.createTextNode(' — the premier source for web development knowledge.');
33-
var linkPara = document.querySelector('p');
34-
linkPara.appendChild(text);
32+
var text = document.createTextNode(' — the premier source for web development knowledge.');
33+
var linkPara = document.querySelector('p');
34+
linkPara.appendChild(text);
3535

36-
// You could clone link para by doing something like this and inserting the new para instead
37-
// var newPara = linkPara.cloneNode(true);
36+
// You could clone link para by doing something like this and inserting the new para instead
37+
// var newPara = linkPara.cloneNode(true);
3838

39-
sect.appendChild(linkPara);
40-
linkPara.parentNode.removeChild(linkPara);
39+
sect.appendChild(linkPara);
40+
linkPara.parentNode.removeChild(linkPara);
4141

42-
para.setAttribute('class', 'highlight');
43-
</script>
42+
para.setAttribute('class', 'highlight');
43+
</script>
44+
</body>
4445
</html>

javascript/apis/document-manipulation/shopping-list-finished.html

Lines changed: 26 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -29,34 +29,31 @@ <h1>My shopping list</h1>
2929

3030
</ul>
3131

32+
<script>
33+
var list = document.querySelector('ul');
34+
var input = document.querySelector('input');
35+
var button = document.querySelector('button');
36+
37+
button.onclick = function() {
38+
var myItem = input.value;
39+
input.value = '';
40+
41+
var listItem = document.createElement('li');
42+
var listText = document.createElement('span');
43+
var listBtn = document.createElement('button');
44+
45+
listItem.appendChild(listText);
46+
listText.textContent = myItem;
47+
listItem.appendChild(listBtn);
48+
listBtn.textContent = 'Delete';
49+
list.appendChild(listItem);
50+
51+
listBtn.onclick = function(e) {
52+
list.removeChild(listItem);
53+
}
54+
55+
input.focus();
56+
}
57+
</script>
3258
</body>
33-
<script>
34-
35-
var list = document.querySelector('ul');
36-
var input = document.querySelector('input');
37-
var button = document.querySelector('button');
38-
39-
button.onclick = function() {
40-
var myItem = input.value;
41-
input.value = '';
42-
43-
var listItem = document.createElement('li');
44-
var listText = document.createElement('span');
45-
var listBtn = document.createElement('button');
46-
47-
listItem.appendChild(listText);
48-
listText.textContent = myItem;
49-
listItem.appendChild(listBtn);
50-
listBtn.textContent = 'Delete';
51-
list.appendChild(listItem);
52-
53-
listBtn.onclick = function(e) {
54-
list.removeChild(listItem);
55-
}
56-
57-
input.focus();
58-
}
59-
60-
61-
</script>
6259
</html>

javascript/apis/document-manipulation/shopping-list.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@ <h1>My shopping list</h1>
2929

3030
</ul>
3131

32-
</body>
33-
<script>
32+
<script>
3433

35-
</script>
34+
</script>
35+
</body>
3636
</html>

javascript/apis/document-manipulation/window-resize-example-finished.html

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -23,20 +23,20 @@
2323

2424
</div>
2525

26-
</body>
27-
<script>
28-
var div = document.querySelector('div');
29-
var WIDTH = window.innerWidth;
30-
var HEIGHT = window.innerHeight;
31-
32-
div.style.width = WIDTH + 'px';
33-
div.style.height = HEIGHT + 'px';
26+
<script>
27+
var div = document.querySelector('div');
28+
var WIDTH = window.innerWidth;
29+
var HEIGHT = window.innerHeight;
3430

35-
window.onresize = function() {
36-
WIDTH = window.innerWidth;
37-
HEIGHT = window.innerHeight;
3831
div.style.width = WIDTH + 'px';
3932
div.style.height = HEIGHT + 'px';
40-
}
41-
</script>
33+
34+
window.onresize = function() {
35+
WIDTH = window.innerWidth;
36+
HEIGHT = window.innerHeight;
37+
div.style.width = WIDTH + 'px';
38+
div.style.height = HEIGHT + 'px';
39+
}
40+
</script>
41+
</body>
4242
</html>

javascript/apis/document-manipulation/window-resize-example.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@
2323

2424
</div>
2525

26-
</body>
27-
<script>
26+
<script>
2827

29-
</script>
28+
</script>
29+
</body>
3030
</html>
Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,36 @@
11
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
22
<html lang="en">
3-
<head>
4-
<title>JavaScript label example</title>
5-
<style>
6-
p {
7-
font-family: 'helvetica neue', helvetica, sans-serif;
8-
letter-spacing: 1px;
9-
text-transform: uppercase;
10-
text-align: center;
11-
border: 2px solid rgba(0,0,200,0.6);
12-
background: rgba(0,0,200,0.3);
13-
color: rgba(0,0,200,0.6);
14-
box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
15-
border-radius: 10px;
16-
padding: 3px 10px;
17-
display: inline-block;
18-
cursor: pointer;
19-
}
20-
</style>
21-
</head>
22-
<body>
23-
<p>Player 1: Chris</p>
24-
</body>
25-
<script>
26-
var para = document.querySelector('p');
3+
<head>
4+
<title>JavaScript label example</title>
5+
<style>
6+
p {
7+
font-family: 'helvetica neue', helvetica, sans-serif;
8+
letter-spacing: 1px;
9+
text-transform: uppercase;
10+
text-align: center;
11+
border: 2px solid rgba(0,0,200,0.6);
12+
background: rgba(0,0,200,0.3);
13+
color: rgba(0,0,200,0.6);
14+
box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
15+
border-radius: 10px;
16+
padding: 3px 10px;
17+
display: inline-block;
18+
cursor: pointer;
19+
}
20+
</style>
21+
</head>
22+
<body>
23+
<p>Player 1: Chris</p>
2724

28-
para.addEventListener('click', updateName);
25+
<script>
26+
var para = document.querySelector('p');
2927

30-
function updateName() {
31-
var name = prompt('Enter a new name');
32-
para.textContent = 'Player 1: ' + name;
33-
}
34-
</script>
28+
para.addEventListener('click', updateName);
3529

30+
function updateName() {
31+
var name = prompt('Enter a new name');
32+
para.textContent = 'Player 1: ' + name;
33+
}
34+
</script>
35+
</body>
3636
</html>

tools-testing/cross-browser-testing/javascript/bad-for-loop.html

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,15 @@
55
<title>Bad for loop</title>
66
</head>
77
<body>
8-
9-
</body>
10-
<script>
11-
for(var i = 1; i <= 10; i++) {
12-
var para = document.createElement('p');
13-
para.textContent = 'This is paragraph ' + i + '.';
14-
document.body.appendChild(para);
15-
para.onclick = function() {
16-
alert('Hello from paragraph ' + i + '!');
8+
<script>
9+
for(var i = 1; i <= 10; i++) {
10+
var para = document.createElement('p');
11+
para.textContent = 'This is paragraph ' + i + '.';
12+
document.body.appendChild(para);
13+
para.onclick = function() {
14+
alert('Hello from paragraph ' + i + '!');
15+
}
1716
}
18-
}
19-
</script>
17+
</script>
18+
</body>
2019
</html>

tools-testing/cross-browser-testing/javascript/fetch-polyfill-finished.html

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,18 +17,18 @@
1717
<h1>Fetch basic example</h1>
1818

1919
<img src="" class="my-image" alt="A flower">
20-
</body>
21-
<script src="es6-promise.js"></script>
22-
<script src="fetch.js"></script>
23-
<script>
24-
var myImage = document.querySelector('.my-image');
2520

26-
fetch('flowers.jpg').then(function(response) {
27-
response.blob().then(function(myBlob) {
28-
var objectURL = URL.createObjectURL(myBlob);
29-
myImage.src = objectURL;
30-
});
31-
});
21+
<script src="es6-promise.js"></script>
22+
<script src="fetch.js"></script>
23+
<script>
24+
var myImage = document.querySelector('.my-image');
3225

33-
</script>
26+
fetch('flowers.jpg').then(function(response) {
27+
response.blob().then(function(myBlob) {
28+
var objectURL = URL.createObjectURL(myBlob);
29+
myImage.src = objectURL;
30+
});
31+
});
32+
</script>
33+
</body>
3434
</html>

tools-testing/cross-browser-testing/javascript/fetch-polyfill-only-when-needed.html

Lines changed: 35 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -17,39 +17,40 @@
1717
<h1>Fetch basic example</h1>
1818

1919
<img src="" class="my-image" alt="A flower">
20-
</body>
21-
<script>
22-
if (browserSupportsAllFeatures()) {
23-
main();
24-
} else {
25-
loadScript('polyfills.js', main);
26-
}
27-
28-
function main(err) {
29-
var myImage = document.querySelector('.my-image');
30-
31-
fetch('flowers.jpg').then(function(response) {
32-
response.blob().then(function(myBlob) {
33-
var objectURL = URL.createObjectURL(myBlob);
34-
myImage.src = objectURL;
20+
21+
<script>
22+
if (browserSupportsAllFeatures()) {
23+
main();
24+
} else {
25+
loadScript('polyfills.js', main);
26+
}
27+
28+
function main(err) {
29+
var myImage = document.querySelector('.my-image');
30+
31+
fetch('flowers.jpg').then(function(response) {
32+
response.blob().then(function(myBlob) {
33+
var objectURL = URL.createObjectURL(myBlob);
34+
myImage.src = objectURL;
35+
});
3536
});
36-
});
37-
}
38-
39-
function browserSupportsAllFeatures() {
40-
return window.Promise && window.fetch;
41-
}
42-
43-
function loadScript(src, done) {
44-
var js = document.createElement('script');
45-
js.src = src;
46-
js.onload = function() {
47-
done();
48-
};
49-
js.onerror = function() {
50-
done(new Error('Failed to load script ' + src));
51-
};
52-
document.head.appendChild(js);
53-
}
54-
</script>
37+
}
38+
39+
function browserSupportsAllFeatures() {
40+
return window.Promise && window.fetch;
41+
}
42+
43+
function loadScript(src, done) {
44+
var js = document.createElement('script');
45+
js.src = src;
46+
js.onload = function() {
47+
done();
48+
};
49+
js.onerror = function() {
50+
done(new Error('Failed to load script ' + src));
51+
};
52+
document.head.appendChild(js);
53+
}
54+
</script>
55+
</body>
5556
</html>

0 commit comments

Comments
 (0)