-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
128 lines (107 loc) · 4.41 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
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
<html>
<head>
<title>JavaScript & jQuery Example</title>
<!--
We put the styles here just to keep the assignment all in one file.
Normally they go in separate files.
-->
<style type="text/css">
#output_area {
padding:10px 40px;
margin:40px;
width:50%;
}
.idle{
background-color:lightgray;
}
.selected {
background-color: gold;
}
input[type="button"] {
border: 1px solid grey;
width: 100px;
height: 50px;
padding:10px;
margin: 10px 10px 10px 100px;
background-color:ivory;
box-shadow: 3px 3px 5px lightgray;
}
input[type="button"]:hover {
position: relative;
top: -2px;
left: -2px;
box-shadow: 7px 7px 5px lightgray;
}
</style>
<!-- Bring jQuery in from the Google content delivery network -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!--
We put the JavaScript here just to keep the assignment all in one file.
Normally it goes in separate files.
-->
<script>
// The following function waits for the document's "ready" event
// and then attaches event listeners
$(document).ready(function(){
// attach an event listener to the Run Script button
// use an attribute selector to pick the right button
$('input[value="Run Script"]').click( function(){
console.log('Caught a "Run Script" click event.');
$("#output_area").addClass( 'selected');
loop_and_display();
});
// attach an event listener to the Clear button here
$('input[value="Clear" ]').click( function(){
console.log('Caught a button click event.');
$("#output_area").removeClass( 'selected' );
$("#output_area").html( "<p>Click the Run Script button.</p>");
});
}); // end of $(document).ready
/*
This function prepares a string variable with HTML and then uses jQuery
to load the variable contents into the DOM.
*/
function loop_and_display() {
var output_html;
var count = 0;
output_html="<p>The script is starting...</p>";
while (count<10) {
output_html= output_html + "Times this loop has run: "+ count +"<br />";
count++;
}
output_html += "<p>The script is done.</p>";
$("#output_area").html(output_html);
}
</script>
</head>
<body>
<h1>jQuery modification of the DOM example.</h1>
<p>Read the code and answer the following questions by editing the definition list and puttng your answers in the <dd> elements.</p>
<h2>Quiz</h2>
<dl>
<dt>What is an 'event listener'?</dt>
<dd>A method that kicks in when a particular event occurs.</dd>
<dt>How do you attach an event listener that responds to a 'click' event to an element using jQuery?</dt>
<dd>.click()</dd>
<dt>What is the ID of the place where the output of the loop function should go?</dt>
<dd>output_area</dd>
<dt>What is the class that changes the style of the output area?</dt>
<dd>selected</dd>
<dt>What does the selector input[value="Run Script"] do? Enter the URLs of the places you researched with your explanation.</dt>
<dd>It indicates which event the event listener is listening for. http://api.jquery.com/category/events/mouse-events/</dd>
<dt>What is the URL of the documentation for the jQuery <kbd>.addClass</kbd> method?</dt>
<dd>http://api.jquery.com/addClass/</dd>
<dt>What is the URL of the documentation for GitHub Pages? What does creating the <kbd>gh-pages</kbd> branch do on github.com</dt>
<dd>Creating a gh-pages branch makes it an actual live website viewable on devices other than the one containing the local branch. The documentation is here: https://help.github.com/articles/creating-project-pages-manually/</dd>
<dt>What is the URL of the documentation for the <kbd>$(document).ready()</kbd> jQuery method?</dt>
<dd>http://api.jquery.com/ready/</dd>
</dl>
<hr>
<input type="button" value="Run Script" />
<input type="button" value="Clear" />
<h2>Output area:</h2>
<div id="output_area" class="idle">
<p>This is the area where the output goes. This content appears before the script is run.</p>
</div>
</body>
</html>