Java Reference
In-Depth Information
This extends the standard
<body/>
element with Prototype's extension methods—one of which
is the
writeAttribute()
method. As its name implies, it “writes” or sets an attribute on the
element:
writeAttribute("bgColor", "yellow")
This sets the body's
bgColor
attribute to yellow. The
writeAttribute()
method returns the DOM
object it was called on, the extended
document.body
object in this case. So you can call another
extension method, called
insert()
, to set its content:
insert("<h1>Hello, Prototype!</h1>")
Let's use this as the basis for a file to test your Prototype installation. Open your text editor and
type the following:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chapter 17: Example 2</title>
</head>
<body>
<button id="theButton">Click Me!</button>
<script src="prototype.1.7.2.js"></script>
<script>
var buttonObj = $("theButton");
function buttonClick() {
$(document.body).writeAttribute("bgColor", "yellow")
.insert("<h1>Hello, Prototype!</h1>");
}
Event.observe(buttonObj, "click", buttonClick);
</script>
</body>
</html>
examples/ch17_example2.html
). Y
ou should see something like Figure 17-2. If you don't, make
sure that the Prototype JavaScript file is in the same directory as the HTML file.
retrieving elements
Prototype's
$()
function is very different from jQuery's. If you remember from the previous
chapter, jQuery's
$()
function creates a
jQuery
object that wraps itself around one or multiple
DOM element objects. In contrast, Prototype's
$()
function returns the actual DOM object
(much like
document.getElementById()
), but it also extends the element object with many new
properties and methods:
var el = $("myDiv");
