JavaScript DHTML/Development/Document

Материал из Web эксперт
Перейти к: навигация, поиск

Checking document referrer

   <source lang="html4strict">

<HTML> <HEAD> <TITLE>document.referrer Property 2</TITLE> </HEAD>

<BODY>

<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>

</BODY>

</HTML> 

      </source>


Convert space to URL encode

   <source lang="html4strict">

<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> </body> </html> 

      </source>


Display info in a new page

   <source lang="html4strict">

<HTML> <HEAD> <SCRIPT language="JavaScript">

</SCRIPT> </HEAD> <BODY> <FORM name="myform"> Name: <INPUT type="text" name="yourname" size="25">

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> </source>

document last Modified Property in Another Format

   <source lang="html4strict">

<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("Last updated:" + theMonth + "/" + theDate + "/" + theYear + "") </SCRIPT>

</BODY> </HTML> 


      </source>


Get a specified element using getElementById()

   <source lang="html4strict">

<html> <head> <script type="text/javascript"> function getElement(){ 

   var x=document.getElementById("myHeader")
   alert("I am a " + x.tagName + " element")

} </script> </head> <body>

Click to see what element I am!

</body> </html> 


      </source>


Get element by name: getElementsByName()

   <source lang="html4strict">

<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">

   <input name="myInput" type="text" size="20">

   <input name="myInput" type="text" size="20">

   

   <input name="mybutton" type="button" onclick="getElements()" 
           value="Show how many elements named "myInput"">

</form> </body> </html> 


      </source>


Hide Email Address

   <source lang="html4strict">

<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> 


      </source>


HTML Page with Immediate Script Statements

   <source lang="html4strict">

<HTML> <HEAD> <TITLE>My First Script</TITLE> </HEAD> <BODY>

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT> </BODY> </HTML> 


      </source>


Make button (control) visible or invisible

   <source lang="html4strict">

/* JavaScript Bible, Fourth Edition by Danny Goodman John Wiley & Sons CopyRight 2001

  • /

<HTML> <HEAD> <TITLE>Data Binding</TITLE> <STYLE TYPE="text/css">

  1. 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>U.S. Bill of Rights

<FORM> <INPUT TYPE="button" VALUE="Toggle Complete/Individual" onClick="toggleComplete()"> <INPUT TYPE="button" VALUE="Prev" onClick="prevField()"> <INPUT TYPE="button" VALUE="Next" onClick="nextField()"> </FORM>

<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> 

      </source>


Methods and Properties of the Document Object

   <source lang="html4strict">
 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. 

      </source>


Open a new document and add some text

   <source lang="html4strict">

<html> <head> <script type="text/javascript"> function docOpen(){ 

   document.open()
document.write("

Hello World!

")

} </script> </head> <body> 

   <form>
   
       <input type="button" onclick="docOpen()" value="Open a new document">
   
   </form>

</body> </html> 


      </source>


Opening a New URL

   <source lang="html4strict">

<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> 

      </source>


Output
with Javascript

   <source lang="html4strict">

<?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 = "
";
     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> 

</source>


Output HTML in JavaScript

   <source lang="html4strict">

<HTML> <BODY> <SCRIPT language="JavaScript">

</SCRIPT> </BODY> </HTML> 

      </source>


Recursively reverse all nodes beneath Node n, and reverse Text nodes

   <source lang="html4strict">

/* 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
       }
   }

} 

      </source>


Referrer of a document (URL of the document)

   <source lang="html4strict">

<html> <body> The referrer of this document is: <script type="text/javascript"> 

   document.write(document.referrer)

</script> </body> </html> 


      </source>


Reverse the order of the children of Node (document)

   <source lang="html4strict">

/* 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>

paragraph #1<p>paragraph #2<p>paragraph #3 <p> <button onclick="reverse(document.body);" >Click Me to Reverse</button> </body> </html> </source>

Title of a document

   <source lang="html4strict">

<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> 


      </source>


Using document.write() on Another Window

   <source lang="html4strict">

<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">

This document is brand new.

" 
   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> 


      </source>


Using document.write() on the Current Window

   <source lang="html4strict">

<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function reWrite() { 

   var newContent = "<HTML><HEAD><TITLE>A New Doc</TITLE></HEAD>"
newContent += "<BODY>

This document is brand new.

" 
   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>


</source>

Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Development/Document&oldid=1785»