JavaScript DHTML/Development/Document
Содержание
- 1 Checking document referrer
- 2 Convert space to URL encode
- 3 Display info in a new page
- 4 document last Modified Property in Another Format
- 5 Get a specified element using getElementById()
- 6 Get element by name: getElementsByName()
- 7 Hide Email Address
- 8 HTML Page with Immediate Script Statements
- 9 Make button (control) visible or invisible
- 10 Methods and Properties of the Document Object
- 11 Open a new document and add some text
- 12 Opening a New URL
- 13 Output with Javascript
- 14 Output HTML in JavaScript
- 15 Recursively reverse all nodes beneath Node n, and reverse Text nodes
- 16 Referrer of a document (URL of the document)
- 17 Reverse the order of the children of Node (document)
- 18 Title of a document
- 19 Using document.write() on Another Window
- 20 Using document.write() on the Current Window
Checking document referrer
<HTML>
<HEAD>
<TITLE>document.referrer Property 2</TITLE>
</HEAD>
<BODY><H1>
<SCRIPT LANGUAGE="JavaScript">
if(document.referrer.length > 0 && document.referrer.indexOf("http://www.wbex.ru") != -1){
document.write("How is the site?")
} else {
document.write("Hello, and thank you for stopping by.")
}
</SCRIPT>
</H1></BODY>
</HTML>
Convert space to URL encode
<html>
<head><title>Convert space to URL encode</title>
<script>
function ConvertText(){
var textvalue = document.formtest.textest.value;
if (textvalue.indexOf(" ")){
var LinkText = textvalue.split(" ");
}
if (document.layers) {
document.layers.converted.document.write(textvalue);
document.layers.converted.document.close();
}else if (document.all) {
converted.innerHTML = LinkText[0] + "%20" + LinkText[1];
}
}
</script>
</head>
<body>
Enter two words with a space between them:
<form name="formtest">
<input name="textest">
<input type="button" value="Convert" onclick="ConvertText()">
</form>
<span id=converted style="position:absolute;"></span>
</body>
</html>
Display info in a new page
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
function newpage()
{
var thename= document.myform.yourname.value;
var thefood= document.myform.yourfood.value;
document.open();
document.write("Your name is "+thename);
document.write("<BR>");
document.write("Your favorite food is "+thefood);
document.close();
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM name="myform">
Name: <INPUT type="text" name="yourname" size="25">
<P>
Favorite Food: <INPUT type="text" name="yourfood" size="25">
<P>
<INPUT TYPE="button" value="Click Here for a New Page" onClick="newpage()">
</FORM>
</BODY>
</HTML>
document last Modified Property in Another Format
<HTML>
<HEAD>
<TITLE>Time Stamper</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
update = new Date(document.lastModified)
theMonth = update.getMonth() + 1
theDate = update.getDate()
theYear = update.getFullYear()
document.writeln("<I>Last updated:" + theMonth + "/" + theDate + "/" + theYear + "</I>")
</SCRIPT>
<HR>
</BODY>
</HTML>
Get a specified element using getElementById()
<html>
<head>
<script type="text/javascript">
function getElement(){
var x=document.getElementById("myHeader")
alert("I am a " + x.tagName + " element")
}
</script>
</head>
<body>
<h1 id="myHeader" onclick="getElement()">Click to see what element I am!</h1>
</body>
</html>
Get element by name: getElementsByName()
<html>
<head>
<script type="text/javascript">
function getElements(){
var x=document.getElementsByName("myInput")
alert(x.length + " elements!")
}
</script>
</head>
<body>
<form >
<input name="myInput" type="text" size="20"><br>
<input name="myInput" type="text" size="20"><br>
<input name="myInput" type="text" size="20"><br>
<br>
<input name="mybutton" type="button" onclick="getElements()"
value="Show how many elements named "myInput"">
</form>
</body>
</html>
Hide Email Address
<html>
<head>
<title>Hide Email Address</title>
<script language="JavaScript">
var before = "username";
var after = "domain";
var extension = "com";
document.write ("<a href="mailto:" + before + "@" + after + "." + extension +"">" +
before + "@" + after + "." + extension + "</a>");
</script>
</head>
<body>
</body>
</html>
HTML Page with Immediate Script Statements
<HTML>
<HEAD>
<TITLE>My First Script</TITLE>
</HEAD>
<BODY>
<hr>
<SCRIPT LANGUAGE="JavaScript">
<!-- hide from old browsers
document.write("This browser is version " + navigator.appVersion)
document.write(" of <B>" + navigator.appName + "</B>.")
// end script hiding -->
</SCRIPT>
</BODY>
</HTML>
Make button (control) visible or invisible
/*
JavaScript Bible, Fourth Edition
by Danny Goodman
John Wiley & Sons CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE>Data Binding</TITLE>
<STYLE TYPE="text/css">
#display {width:500px; border:10px ridge blue; padding:20px}
.hiddenControl {display:none}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
function nextField() {
var elem = document.all.display
var fieldName = elem.dataFld
var currFieldNum = parseInt(fieldName.substring(7, fieldName.length),10)
currFieldNum = (currFieldNum == 10) ? 1 : ++currFieldNum
elem.dataFld = "Article" + currFieldNum
}
function prevField() {
var elem = document.all.display
var fieldName = elem.dataFld
var currFieldNum = parseInt(fieldName.substring(7, fieldName.length),10)
currFieldNum = (currFieldNum == 1) ? 10 : --currFieldNum
elem.dataFld = "Article" + currFieldNum
}
function toggleComplete() {
if (document.all.buttonWrapper.className == "") {
document.all.display.dataSrc = "#rights_raw"
document.all.display.dataFld = "column1"
document.all.display.dataFormatAs = "text"
document.all.buttonWrapper.className = "hiddenControl"
} else {
document.all.display.dataSrc = "#rights_html"
document.all.display.dataFld = "Article1"
document.all.display.dataFormatAs = "HTML"
document.all.buttonWrapper.className = ""
}
}
</SCRIPT>
</HEAD>
<BODY>
<P><B>U.S. Bill of Rights</B></P>
<FORM>
<INPUT TYPE="button" VALUE="Toggle Complete/Individual" onClick="toggleComplete()">
<SPAN ID="buttonWrapper" CLASS="">
<INPUT TYPE="button" VALUE="Prev" onClick="prevField()">
<INPUT TYPE="button" VALUE="Next" onClick="nextField()">
</SPAN>
</FORM>
<DIV ID="display" DATASRC="#rights_html" DATAFLD="Article1" DATAFORMATAS="HTML"></DIV>
<OBJECT ID="rights_html" CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME="DataURL" VALUE="Bill of Rights.txt">
<PARAM NAME="UseHeader" VALUE="True">
<PARAM NAME="FieldDelim" VALUE="	">
</OBJECT>
<OBJECT ID="rights_raw" CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME="DataURL" VALUE="Bill of Rights (no format).txt">
<PARAM NAME="FieldDelim" VALUE="\">
<PARAM NAME="RowDelim" VALUE="\">
</OBJECT>
</BODY>
</HTML>
Methods and Properties of the Document Object
Methods
captureEvents() Captures events to be handled by the document.
close() Closes output stream to the document.
contextual() Allows you to selectively apply a style to an HTML element that appears in a specific context.
getSelection() Returns the selected text.
handleEvent() Invokes the handler for the specified event.
open() Opens output stream to document.
releaseEvents() Releases events captured by the document.
routeEvent() Routes captured events to other objects.
write() Appends text to the document.
writeln() Appends text and a newline character to the document.
Property
alinkColor Color of an activated link.
all Array of all HTML tags in the document.
anchors Array of Anchor objects.
applets Array of Applet objects.
bgcolor Background color of the document.
classes Style sheet classes array.
cookie Cookie associated with the document.
domain Domain of the document.
embeds Array of embedded objects.
fgcolor Color of text in the document.
forms Array of Form objects.
formName Specifies Form instance accessed by using the value of the name attribute in the form tag.
height Specifies height in pixels of the document.
ids Style sheet IDs array.
images Array of Image objects.
lastModified Date when the document was last modified.
layers Array of Layer objects.
linkColor Color of links.
links Array of Link objects.
plugins Array of embedded objects.
referrer URL of the document to which the current document was linked.
tags Style sheet tag array.
title Title of the document.
URL URL of the current document.
vlinkColor Color of visited links.
width Specifies width in pixels of the document.
Open a new document and add some text
<html>
<head>
<script type="text/javascript">
function docOpen(){
document.open()
document.write("<h3>Hello World!</h3>")
}
</script>
</head>
<body>
<form>
<input type="button" onclick="docOpen()" value="Open a new document">
</form>
</body>
</html>
Opening a New URL
<HTML>
<HEAD>
<SCRIPT LANGUAGE = "JavaScript">
function moveon() {
var urlAddress = "";
urlAddress = document.forms[0].Edit1.value;
window.location = urlAddress;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT type="text" name="Edit1">
<INPUT type="button" value="move" onClick="moveon()">
</FORM>
</BODY>
</HTML>
Output
with Javascript
<?xml version"1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>JavaScript while statement</title>
<script type="text/javascript">
var iCount = 0;
var sNewLine = "<br />";
document.write("While loop is starting");
document.write(sNewLine);
while(iCount < 10){
document.write("iCount = " + iCount);
document.write(sNewLine);
iCount++;
}
document.write("While loop completed");
</script>
</head>
<body>
</body>
</html>
Output HTML in JavaScript
<HTML>
<BODY>
<SCRIPT language="JavaScript">
<!--
document.write("<H1>"+document.title+"</H1>");
document.write("The background color is "+document.bgColor+"<BR>");
document.write("The text color is "+document.fgColor+"<BR>");
document.write("The link color is "+document.linkColor+"<BR>");
document.write("The visited link color is "+document.vlinkColor+"<BR>");
document.write("The active link color is "+document.alinkColor);
document.write("<P>");
document.write("Last Modified: "+document.lastModified);
document.write("<P>");
document.write("URL: "+document.URL);
//-->
</SCRIPT>
</BODY>
</HTML>
Recursively reverse all nodes beneath Node n, and reverse Text nodes
/*
Examples From
JavaScript: The Definitive Guide, Fourth Edition
Legal matters: these files were created by David Flanagan, and are
Copyright (c) 2001 by David Flanagan. You may use, study, modify, and
distribute them for any purpose. Please note that these examples are
provided "as-is" and come with no warranty of any kind.
David Flanagan
*/
// Recursively reverse all nodes beneath Node n, and reverse Text nodes
function reverse(n) {
if (n.nodeType == 3 /*Node.TEXT_NODE*/) { // Reverse Text nodes
var text = n.data; // Get content of node
var reversed = "";
for(var i = text.length-1; i >= 0; i--) // Reverse it
reversed += text.charAt(i);
n.data = reversed; // Store reversed text
}
else { // For non-Text nodes recursively reverse the order of the children
var kids = n.childNodes;
var numkids = kids.length;
for(var i = numkids-1; i >= 0; i--) { // Loop through kids
reverse(kids[i]); // Recurse to reverse kid
n.appendChild(n.removeChild(kids[i])); // Move kid to new position
}
}
}
Referrer of a document (URL of the document)
<html>
<body>
The referrer of this document is:
<script type="text/javascript">
document.write(document.referrer)
</script>
</body>
</html>
Reverse the order of the children of Node (document)
/*
Examples From
JavaScript: The Definitive Guide, Fourth Edition
Legal matters: these files were created by David Flanagan, and are
Copyright (c) 2001 by David Flanagan. You may use, study, modify, and
distribute them for any purpose. Please note that these examples are
provided "as-is" and come with no warranty of any kind.
David Flanagan
*/
<html>
<head><title>Reverse</title></head>
<script>
function reverse(n) { // Reverse the order of the children of Node n
var kids = n.childNodes; // Get the list of children
var numkids = kids.length; // Figure out how many there are
for(var i = numkids-1; i >= 0; i--) { // Loop through them backwards
var c = n.removeChild(kids[i]); // Remove a child
n.appendChild(c); // Put it back at its new position
}
}
</script>
</head>
<body>
<p>paragraph #1<p>paragraph #2<p>paragraph #3 <!-- A sample document -->
<p> <!-- A button to call reverse()-->
<button onclick="reverse(document.body);"
>Click Me to Reverse</button>
</body>
</html>
Title of a document
<html>
<head>
<title>MY TITLE</title>
</head>
<body>
The title of the document is:
<script type="text/javascript">
document.write(document.title)
</script>
</body>
</html>
Using document.write() on Another Window
<HTML>
<HEAD>
<TITLE>Writing to Subwindow</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var newWindow
function makeNewWindow() {
newWindow = window.open("","","status,height=200,width=300")
}
function subWrite() {
if (newWindow.closed) {
makeNewWindow()
}
newWindow.focus()
var newContent = "<HTML><HEAD><TITLE>A New Doc</TITLE></HEAD>"
newContent += "<BODY BGCOLOR="coral"><H1>This document is brand new.</H1>"
newContent += "</BODY></HTML>"
newWindow.document.write(newContent)
newWindow.document.close() // close layout stream
}
</SCRIPT>
</HEAD>
<BODY onLoad="makeNewWindow()">
<FORM>
<INPUT TYPE="button" VALUE="Write to Subwindow" onClick="subWrite()">
</FORM>
</BODY>
</HTML>
Using document.write() on the Current Window
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function reWrite() {
var newContent = "<HTML><HEAD><TITLE>A New Doc</TITLE></HEAD>"
newContent += "<BODY><H1>This document is brand new.</H1>"
newContent += "Click the Back button to see original document."
newContent += "</BODY></HTML>";
document.write(newContent);
document.close();
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="Replace Content" onClick="reWrite()">
</FORM>
</BODY>
</HTML>