JavaScript DHTML/HTML/Text HTML

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

An example of a scrolling message

   <source lang="html4strict">

/* Javascript Essentials by Jason J. Manger Publisher: Mcgraw-Hill Osborne Media; ISBN: 0078822343

  • /

<html> <head> <script language="JavaScript">

</script> </head> <body onLoad="scroll()"> <form>

<input type="text" size=70>

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


      </source>


Animating Text Styles

   <source lang="html4strict">

<html> <head> <title>Styling Text</title> <script language="JavaScript"> var color = true var heading = null function styleText(milliseconds) { 

window.setInterval("changeColors()", milliseconds)

} function changeColors() { 

var heading;
if(document.getElementById != null)
  heading = document.getElementById("styleme")
else if(navigator.appName == "Microsoft Internet Explorer")
  heading = document.all.item("styleme")

if(color && heading != null) {
  heading.style.backgroundColor = "rgb(255,0,0)"
  heading.style.color = "rgb(0,200255)"
}else if(heading != null) {
  heading.style.backgroundColor = "rgb(255,255,255)"
  heading.style.color = "rgb(0,200,0)"
}
color = ! color;

} </script> </head> <body onload="styleText(1000)" bgcolor="white">

I am changing!

</body> </html> 

      </source>


compareEndPoints() Method

   <source lang="html4strict">

<HTML> <HEAD> <TITLE>TextRange.rupareEndPoints() Method</TITLE> <SCRIPT LANGUAGE="JavaScript"> var fixedRange function setAndShowRangeData() { 

   var selectedRange = document.selection.createRange()
   var result1 = fixedRange.rupareEndPoints("StartToEnd", selectedRange)
   var result2 = fixedRange.rupareEndPoints("StartToStart", selectedRange)
   var result3 = fixedRange.rupareEndPoints("EndToStart", selectedRange)
   var result4 = fixedRange.rupareEndPoints("EndToEnd", selectedRange)
   
   B1.innerText = result1
   compare1.innerText = getDescription(result1)
   B2.innerText = result2
   compare2.innerText = getDescription(result2)
   B3.innerText = result3
   compare3.innerText = getDescription(result3)
   B4.innerText = result4
   compare4.innerText = getDescription(result4)

} function getDescription(comparisonValue) { 

   switch (comparisonValue) {
       case -1 :
           return "comes before"
           break
       case 0 :
           return "is the same as"
           break
       case 1 :
           return "comes after"
           break
       default :
           return "vs."    
   }

} function init() { 

   fixedRange = document.body.createTextRange()
   fixedRange.moveToElementText(fixedRangeElem)

} </SCRIPT> </HEAD> <BODY onLoad="init()">

TextRange.rupareEndPoints() Method

Select text in the paragraph in various places relative to the fixed text range (shown in red).

PropertyReturned ValueFixed Range vs. Selection
StartToEnd   Start of Fixed vs. End of Selection
StartToStart   Start of Fixed vs. Start of Selection
EndToStart   End of Fixed vs. Start of Selection
EndToEnd   End of Fixed vs. End of Selection

Text, Text,Text,Text,Text,Text,Text,Text,Text,Text, Text,Text,Text,Text,Text,Text,Text,Text,, Text,Text,Text,Text,Text,Text,Text,Text,Text,Text,Text,Text,Text,Text,Text,Text,

</BODY> </HTML> 

      </source>


Encipher and Decipher

   <source lang="html4strict">

/* JavaScript Application Cookbook By Jerry Bradenbaugh Publisher: O"Reilly Series: Cookbooks ISBN: 1-56592-577-7

  • / 


      </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/EncipherDecipher.zip">EncipherDecipher.zip( 18 k)</a>


Exploring the Bounding TextRange Properties

   <source lang="html4strict">

<HTML> <HEAD> <TITLE>TextRange Object Dimension Properties</TITLE> <STYLE TYPE="text/css"> TD {text-align:center} .propName {font-family: Courier, monospace} </STYLE> <SCRIPT LANGUAGE="JavaScript"> function setAndShowRangeData() { 

   var range = document.selection.createRange()
   B1.innerText = range.boundingHeight
   B2.innerText = range.boundingWidth
   B3.innerText = range.boundingTop
   B4.innerText = range.boundingLeft
   B5.innerText = range.offsetTop
   B6.innerText = range.offsetLeft

} </SCRIPT> </HEAD> <BODY onResize="setAndShowRangeData()">

TextRange Object Dimension Properties

Select text in the paragraph below.

PropertyPixel Value
boundingHeight  
boundingWidth  
boundingTop  
boundingLeft  
offsetTop  
offsetLeft  

text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text

</BODY> </HTML> 


      </source>


Moving Text

   <source lang="html4strict">

/* Mastering JavaScript, Premium Edition by James Jaworski ISBN:078212819X Publisher Sybex CopyRight 2001

  • /

<html> <head> <title>Moving Text</title> <script language="JavaScript"> var heading = null function moveText(milliseconds) { 

window.setInterval("changePosition()", milliseconds)

} function changePosition() { 

var x = Math.random()*400
var y = Math.random()*400
if(document.getElementById)
 heading = document.getElementById("moveme")
else if(navigator.appName == "Microsoft Internet Explorer")
 heading = document.all.item("moveme")
else if(document.layers)
 heading = document.layers["moveme"]
if(heading != null) {
 if(heading.style == null) { // Navigator 4
  heading.left = x
  heading.top = y
 }else if(heading.style.left != null) { // DOM-capable
  heading.style.left = x
  heading.style.top = y
 }else{ // IE 4
  heading.style.posLeft = x
  heading.style.posTop = y
 }
}

} </script> </head> <body onload="moveText(2000)">

This text moves!

</body> </html> 

      </source>


Two Search and Replace Approaches (with Undo)

   <source lang="html4strict">

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

  • /

<HTML> <HEAD> <TITLE>TextRange.findText() Method</TITLE> <SCRIPT LANGUAGE="JavaScript"> // global range var for use with Undo var rng // return findText() third parameter arguments function getArgs(form) { 

   var isCaseSensitive = (form.caseSensitive.checked) ? 4 : 0
   var isWholeWord = (form.wholeWord.checked) ? 2 : 0
   return isCaseSensitive ^ isWholeWord

} // prompted search and replace function sAndR(form) { 

   var srchString = form.searchString.value
   var replString = form.replaceString.value
   if (srchString) {
       var args = getArgs(form)
       rng = document.body.createTextRange()
       rng.moveToElementText(rights)
       clearUndoBuffer()
       while (rng.findText(srchString, 10000, args)) {
           rng.select()
           rng.scrollIntoView()
           if (confirm("Replace?")) {
               rng.text = replString
               pushUndoNew(rng, srchString, replString)
           }
           rng.collapse(false)        
       }    
   }

} // unprompted search and replace with counter function sAndRCount(form) { 

   var srchString = form.searchString.value
   var replString = form.replaceString.value
   var i
   if (srchString) {
       var args = getArgs(form)
       rng = document.body.createTextRange()
       rng.moveToElementText(rights)
       for (i = 0; rng.findText(srchString, 10000, args); i++) {
           rng.text = replString
           pushUndoNew(rng, srchString, replString)
           rng.collapse(false)        
       }
       if (i > 1) {
           clearUndoBuffer()
       }
   }

document.all.counter.innerText = i } // BEGIN UNDO BUFFER CODE // buffer global variables var newRanges = new Array() var origSearchString // store original search string and bookmarks of each replaced range function pushUndoNew(rng, srchString, replString) { 

   origSearchString = srchString
   rng.moveStart("character", -replString.length)
   newRanges[newRanges.length] = rng.getBookmark()

} // empty array and search string global function clearUndoBuffer() { 

   document.all.counter.innerText = "0"
   origSearchString = ""
   newRanges.length = 0

} // perform the undo function undoReplace() { 

   if (newRanges.length && origSearchString) {
       for (var i = 0; i < newRanges.length; i++) {
           rng.moveToBookmark(newRanges[i])
           rng.text = origSearchString
       }
       document.all.counter.innerText = i
       clearUndoBuffer()
   }

} </SCRIPT> </HEAD> <BODY>

TextRange.findText() Method

<FORM>

Enter a string to search for in the following text: <INPUT TYPE="text" NAME="searchString" SIZE=20 VALUE="Law">   <INPUT TYPE="checkbox" NAME="caseSensitive">Case-sensitive   <INPUT TYPE="checkbox" NAME="wholeWord">Whole words only

Enter a string with which to replace found text: <INPUT TYPE="text" NAME="replaceString" SIZE=20 VALUE="legislation">

<INPUT TYPE="button" VALUE="Search and Replace (with prompt)" onClick="sAndR(this.form)">

<INPUT TYPE="button" VALUE="Search, Replace, and Count (no prompt)" onClick="sAndRCount(this.form)"> 0 items found and replaced.

<INPUT TYPE="button" VALUE="Undo Search and Replace" onClick="undoReplace()">

</FORM>

<A NAME="article1">

ARTICLE I

</A>

Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the government for a redress of grievances.

[The rest of the text is snipped for printing here, but it is on the CD-ROM 

version.]

</BODY> </HTML> 


      </source>


Using the document.selection Object

   <source lang="html4strict">

<HTML> <HEAD> <TITLE>selection Object</TITLE> <SCRIPT LANGUAGE="JavaScript"> function processSelection() { 

   if (document.choices.process[0].checked) {
       status = "Selection is type: " + document.selection.type
       setTimeout("emptySelection()", 1000)
   } else if (document.choices.process[1].checked) {
       var rng = document.selection.createRange()
       document.selection.clear()
   }

} function emptySelection() { 

   document.selection.empty()
   status = "Selection is type: " + document.selection.type

} </SCRIPT> </HEAD> <BODY>

IE selection Object

<FORM NAME="choices"> <INPUT TYPE="radio" NAME="process" CHECKED>De-select after two seconds
<INPUT TYPE="radio" NAME="process">Delete selected text. </FORM>

Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, </BODY> </HTML> </source>

Using the TextRectangle Object Properties

   <source lang="html4strict">

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

  • /

<HTML> <HEAD> <TITLE>TextRectangle Object</TITLE> <SCRIPT LANGUAGE="JavaScript"> // preserve reference to last clicked elem so resize can re-use it var lastElem // TextRectangle left tends to be out of registration by a couple of pixels var rectLeftCorrection = 2 // process mouse click function handleClick() { 

   var elem = event.srcElement
   if (elem.className && elem.className == "sample") {
       // set hiliter element only on a subset of elements
       lastElem = elem
       setHiliter()
   } else {
       // otherwise, hide the hiliter
       hideHiliter()
   }

} function setHiliter() { 

   if (lastElem) {
       var textRect = lastElem.getBoundingClientRect()
       hiliter.style.pixelTop = textRect.top + document.body.scrollTop
       hiliter.style.pixelLeft = textRect.left + document.body.scrollLeft - rectLeftCorrection
       hiliter.style.pixelHeight = textRect.bottom - textRect.top
       hiliter.style.pixelWidth = textRect.right - textRect.left
       hiliter.style.visibility = "visible"
   }

} function hideHiliter() { 

   hiliter.style.visibility = "hidden"
   lastElem = null

} </SCRIPT> </HEAD> <BODY onClick="handleClick()" onResize="setHiliter()">

TextRectangle Object

<P>Click on any of the four colored elements in the paragraph below and watch 

the highlight rectangle adjust itself to the element"s TextRectangle object.

<P CLASS="sample">Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor 

incididunt ut labore et dolore magna aliqua. Ut enim adminim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit involuptate velit esse cillum
dolore eu fugiat nulla pariatur.

</BODY> </HTML> 

      </source>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/HTML/Text_HTML&oldid=2623»