-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
99 lines (71 loc) · 2.95 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<title>Beginner JavaScript Examples</title>
</head>
<body>
<script src="allPages.js"></script>
<h4>It is recommended that you have knowledge of HTML and CSS before attempting JavaScript</h4>
<br>
<p>This tutorial will walk you through getting started with Javascript including</p>
<br>
<div id="lessonCoverageContainer">
<div id="lessonCoverageItems">
<p>Getting input from the user</p>
<p>Using variables</p>
<p>Using Javascript in an HMTL page</p>
<p>Using Javascript logic to make decisions</p>
<p>Dynamically creating HTML using Javascript</p>
<p>Using Javascript functions</p>
<p>Dynamically modifying HTML using Javascript</p>
</div>
</div>
<br>
<p>Chrome, Firefox, Edge, and Opera are supported, as well as Internet Explorer 8+ (Although IE is NOT Recommended)</p>
<p>This tutorial is available offline in any browser that <a target="_blank" href="https://caniuse.com/#feat=serviceworkers">supports Service Workers</a>. If you would like to add support for older browsers, feel free to write the AppCache code.</p>
<br>
<button style="display:block;margin:auto;padding:20px;background-color:lightgreen;font-size:20px;width:250px;"onclick="window.location='lesson1.html'">Get Started</button>
<br>
<p>Want to Help Out? Open Source - <a href="https://github.com/ecc521/beginner-javascript-tutorial" target="_blank">GitHub Repository</a></p>
<p>Want to try your own thing? Try my <a href="editor.html" target="_blank">Online HTML Editor</a></p>
<div id="tableOfContentsContainer">
<div id="tableOfContentsItems">
<h2>Table of Contents</h2>
</div>
</div>
<style>
h1, p, h4, h2 {
text-align:center;
}
html, body {
margin:0;
padding:0;
}
p {
margin:8px;
}
#tableOfContentsContainer, #lessonCoverageContainer {
width:100%
}
#tableOfContentsItems, #lessonCoverageItems {
margin:0 auto;
display: table;
}
#tableOfContentsItems > p, #lessonCoverageItems > p {
text-align: left;
}
</style>
<script>
var tableOfContents = document.getElementById("tableOfContentsItems")
for (var i=1;i<self.order.length;i++) {
var link = document.createElement("a")
link.target = "_blank"
link.href = window.location.href + self.order[i][0]
link.innerHTML = self.order[i][1]
var container = document.createElement("p")
container.appendChild(link)
tableOfContents.appendChild(container)
}
</script>
</body>
</html>