SI110 Spring AY13 Alpha:___________ Name:________________________________
advertisement
SI110 Spring AY13
choose one:
(or more)
Alpha:___________
□ Received
no help
Name:________________________________ Page 1 of 2
□ Received help from:
□ Collaborated with:________________________________________
Homework:
/SI110/The Cyber Battlefield/Client-Side Scripting: Event Driven & Forms
1. Go to http://rona.cs.usna.edu/~si110/lec/l12/highlights1.html and use it to help you
answer the following questions. With that to help, you should get all of these right!
a. For element ann: box the
element in the rendered
output, box the start tag,
circle the end tag, and
underline the innerHTML in
the HTML source code.
5 / 0 / 0 / 0
b. For element don: box the
element in the rendered
output, box the start tag,
circle the end tag, and
underline the innerHTML in
the HTML source code.
5 / 0 / 0 / 0
c. For element ed: box the
element in the rendered
output, box the start tag,
circle the end tag, and
underline the innerHTML in
the HTML source code.
5 / 0 / 0 / 0
1. Box the span-element in the rendered output below. In the HTML sourece code, box its
start tag, circle its end tag, and underline its innerHTML.
10 / 8 / 6 / 0
2. Consider the following (by now familiar!) HTML source code and rendered output:
5/ 3/2/0
a. annotate output to show the effect of document.getElemenetById('don').style.color= "white"
b. document.getElementById('pat').innerHTML = _________________________________________ 5 / 3 / 2 / 0
c. document.getElementById('pat').href = ______________________________________________ 5 / 3 / 2 / 0
d. what attributes (name only) are defined for element don? ___________________________ 5 / 3 / 2 / 0
SI110 Spring AY13
Alpha:___________
Name:________________________________ Page 2 of 2
3. Follow the directions on this page: http://rona.cs.usna.edu/~si110/lec/l12/hw/hw1.html
a. Describe what happened:
5/ 3/3/0
b. Examine the page source (“View page source”, if using Chrome). You probably won't
understand everything in this file, but use what you do know to figure out the
following:
i. To what kind of user action does the page respond?
5/ 3/3/0
ii. What single line in the file actually tells the browser what code to
execute in response to the user action you identified in (i)?
5/ 4/2/0
4. In the box below, give the HTML source code that would render as Don’t double-click me!, 10 / 8 / 6 / 0
where double-clicking on the word me causes an infinite number of alert boxes to pop up. I.e.
something like while(true) { alert("I told you not to do it!"); }.
5. Consider this HTML file:
<html>
<head></head>
<body>
Fill this in!
<form name="bio">
<p>
Last Name
<input type="text" name="last" value="Doe">
</p>
<p>
Age in Years
<input type="text" name="age" value="17">
</p>
</form>
</body>
</html>
a. Draw what the page looks like
when it is first loaded:
10 / 8 / 6 / 0
10 / 8 / 6 / 0
b. Draw what the page looks like after the following
code is executed:
document.forms.bio.last.value = "Payton";
var x = document.forms.bio.age.value;
document.forms.bio.age.value = x*2;
3. Check out the page: http://rona.cs.usna.edu/~si110/lec/l12/hw/hw01.html. Describe how you,
as a user, can cheat on this guess-a-number game so that you “guess” correctly on the first 10 / 8 / 6 / 0
try every time. Hint: View-Source and Chrome’s Developer Tools
Javascript console are your friends?
Page 2 of 2
