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