HTML and CSS Reference
In-Depth Information
EXAMPLE
15.10 (
CONTINUED
)
21
<input type="button" value="Add a blog"
onclick="addBlog()
;"/>
</form>
</div>
</body>
</html>
EXPLANATION
1
This is the CSS style sheet for the page.
2
The function
BlogEntry()
defines a class consisting of the properties and methods
for each new blog object that is created.
3
This method will get and format the current date with JavaScript's
Date()
con-
structor. It will be assigned to the date property of the object.
4
These next two methods will set the properties for the name of the blogger and
the message the blogger typed into the form.
5
The
showBlog()
method is where we make good use of the DOM by creating ele-
ments and text nodes. Each blog message will be placed in a paragraph appended
to a
div
container. It will contain the blogger name and date on one line and the
blogger's message in bold text on the next lines. Every time a new blog is entered
it will be appended in a paragraph to the previous paragraph.
6
A new paragraph element is created and a reference to it is assigned to
para
.
7
A unique
id
attribute is set for each paragraph after it is created. Every time a new
paragraph is added the
document.getElementsByTagName(“p”)
method returns the
number of
p
elements in the document, causing the count to go up by one. This
count
value is concatenated to the string “para” producing a new
id
for each new
paragraph created on line 6.
8
A reference to an HTML
br
(break line) element is created and assigned to
aBR
.
On the next line, a reference to an HTML
b
(bold) element is created.
9
The
document.getElementById()
method returns a reference to a
div
object identi-
fied as
div1
on line 19. This is where the paragraphs will be added and the blog
messages displayed.
10
Now a
p
element (paragraph) is appended to the
div
object.
11
Three text nodes are created with values that will be inserted into the paragraph.
The properties of the blog object,
name
,
date
, and
message
, contain the text values
that will be assigned to the text nodes.
12
The text for the paragraph is now appended as a child node.
13
The next line of text is appended followed by the
br
element and the
b
element.
14
This
alert(),
when uncommented, will display the text (
innerHTML
) for each
paragraph after it has been created, for example:
Posted by Ellie Quigley on
3/21/2010<b><br>This is a hazy day and I'm in a hazy mood.</b>
15
The
BlogEntry
class ends here.
