One of the most powerful things you can do with JavaScript
is to write text to the document. This means that the document does not have to
be static but can change depending on various factors such as user input. To
write content to the document, use the write() method of the document object.
This method writes the text passed as an argument to the document. If the
method is executed within the body, the text appears at that location – in
other words, where the script is located. Next example displays the current
date in the document:
<body>
<p>Welcome! Today's date is
<script type='text/javascript'>
var today = new Date();
document.write('<b>'+today.toDateString()+'<b>');
</script>
</p>
</body>
The result in the document is text like this:
From this example, it should be clear that document.write()
is used to write HTML to the document. Here’s what happens with the previous
example:
1.
The first part of the content, <p>Welcome! Today’s date is , is part of the document’s
static HTML.
2.
The script writes out <b>[[[]]]]</b>
3.
The closing </p> tag is part of the static HTML.
The exact same result can be obtained with the following, in
which the <b> and </b> tags are part the static HTML and the document.write() method writes out only
the date itself:
<body> <p>Welcome! Today's date is <b> <script type='text/javascript'> var today = new Date(); document.write(today.toDateString()); </script> </b></p> </body>
Another way to use the document.write() method is to replace
the entire content of the document with new HTML. And we do mean entire content
– from the opening <html> tag to the closing </html> rag. The document.write() method replaces the
entire document when it is executed in a function in the <head> section
of the document. You can use this in two ways:
·
Execute the function when the document loads.
This means that the first thing the user sees will be the dynamically generated
document. We’ll show you how to call a JavaScript function when the page loads
later in this chapter in the section.
·
Display a static HTML document initially; then
execute the function in response to some user action. The user will first see
one document, which is then replaced by the dynamically generated document.
Let’s look at example of the second
method. This is a simple example – it initially displays a Web page with a text
box for the user to enter their name and a button. When the user clicks the
button, a function is called that replaces the page with a dynamically
generated page that greets the user by name. The HTML for the page is shown in
Example below:
<html> <head> <title>Document.write demonstration</title> <script type=“text/javascript”> function writePage(form) var page; page = '<html><head><title>A dynamic page</title></head>'; page += '<body><h1>This is a dynamically created page.</h1>'; page+= '<p>Welcome ' + form.name.value + '!'; page += '</body></html>' document.write(page); } </script> </head> <body> <form onSubmit='return false'> <p>Enter your name: <input type='text' name='name' id='name'></p> <input type='button' value='Make a new page' onclick='writePage(this.form);' /> </form> </body> </html>
When the user enters their name in
the text box and clicks the button, the document.write() method creates an
entirely new page, as shown in next figure:
This example showcases another
useful technique. We needed to form on the page because we wanted to display a
button, but we did not need to submit the form anywhere. To do this, we
included a <form> tag that has no action attribute and that specifies
that the onsubmit action returns false, which cancels the submit action. The
result is a submission less form, useful in many situations like this one.
0 comments:
Post a Comment