-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathjs01a.html
133 lines (113 loc) · 3.99 KB
/
js01a.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
<!doctype html>
<html>
<head>
<title>Dave's First JavaScript webpage!</title>
<style>
p { font-family: serif;}
h1, h2, h3 { font-family: fantasy;}
#divbox { display: flex;
flex-direction: row; flex-wrap: wrap; }
#aboutme { background-color: lightblue;
border: 5px solid green; }
.container { padding: .4in;
border: 5px solid black;
background-color: lightgreen;
margin: 2pt;}
#neighborhood { width: 200px; height: 300px; border-radius: 25px;}
table { border: 5px black solid;}
td { background-color: lightgray; }
</style>
<!-- this is the code to add the jquery library to our page. Use it in the head section. -->
<!-- a .js file extension is used for a javascript file -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- inline javascript -->
<script>
var a = 1;
</script>
</head>
<!-- this is an HTML comment -->
<body>
<h1 class="header">This is my first javascript webpage!</h1>
<div id="divbox">
<div id="aboutme" class="container">
<h2 class="header">About me</h2>
<p><button id="about_me_button">Click here to learn more about me.</button></p>
<script>
// this is a javascript comment
// the $("#about_me_button") refers to any item in the HTML with
// an id of about_me_button
// the .click is a function that runs when you click on that button
// the $("p#aboutme_p") refers to the paragraph with the id aboutme_p
$("#about_me_button").click( function() {
$("p#aboutme_p").toggle();
});
</script>
<p hidden id="aboutme_p">
I'm an instructor of GIS at
<a href="http://www.msudenver.edu">
Metropolitan State University of Denver</a>. I love my job!<br>
<!-- a <br> is a line break -->
You can email me at <span id="email"><a href="mailto:[email protected]">here</a></span>.</p>
<p><button>Hover over the photo to learn more!</button></p>
<img id="img_hover" width=100 height=120 src="http://www.daveparr.com/blog/wp-content/uploads/2019/06/daveparr-1.jpg">
<figcaption id="about_dr_parr" hidden>This is Dr. Parr</figcaption>
<script>
$("#img_hover").hover( function() {
$("#about_dr_parr").show();
})
</script>
<p>My GitHub repository is at <a href="https://github.com/dparr1?tab=repositories">here.</a></p>
<p>Look at the source code of this file to learn more!</p>
</div>
<div id="classes1" class="container">
<h3 class="header">Classes I'm teaching</h3>
<ul>
<li>Intro to Geospatial Science</li>
<li>GIS</li>
<li>Web Mapping</li>
<li>Cartography</li>
<li>GIS Applications</li>
</ul>
</div>
<div id="classes2" class="container">
<h3 class="header">Classes I'm not teaching this semester</h3>
<ol>
<li>Spatial Modeling in Raster</li>
<li>Spatial Databases</li>
<li>GIS Programming</li>
</ol>
</div>
<div id="classes3" class="container">
<h3 class="header">Schedule of Classes Coming Up</h3>
<table border=1>
<tr><th>Class</th>
<th>Fall Semester</th>
<th>Spring Semester</th>
</tr>
<tr><td>Intro to Geospatial Sciences</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr><td>GIS</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr><td>Web Mapping</td>
<td colspan=2>Every 3rd semester</td>
</tr>
</table>
</div>
<div id="neighborhood-map" class="container">
<p>Here's a map of my neighborhood: <img id="neighborhood" src="map.jpg"></p>
</div>
<div class="container">
<h2>Click button code</h2>
<pre>
$("#about_me_button").click( function() {
$("p#aboutme_p").toggle();
});
</pre>
</div>
</div>
</body>
</html>