JavaScript DHTML/HTML/Text HTML
Содержание
- 1 An example of a scrolling message
- 2 Animating Text Styles
- 3 compareEndPoints() Method
- 4 Encipher and Decipher
- 5 Exploring the Bounding TextRange Properties
- 6 Moving Text
- 7 Two Search and Replace Approaches (with Undo)
- 8 Using the document.selection Object
- 9 Using the TextRectangle Object Properties
An example of a scrolling message
/*
Javascript Essentials
by Jason J. Manger
Publisher: Mcgraw-Hill Osborne Media;
ISBN: 0078822343
*/
<!--
Program 10-6
-->
<html>
<head>
<script language="JavaScript">
<!--
var timerId;
var msg = "This is an example of a scrolling message";
var counter = 0;
// Is the timer already running?
if (timerId != null)
clearTimeout(timerId);
function pad() {
var padding = "";
// Prepend 50 spaces to the message:
for (var n=0; n <= (50 + msg.length); n++)
padding += " ";
return(padding);
}
function scroll() {
newMsg = pad() + msg + " ";
document.forms[0].elements[0].value =
newMsg.substring(counter, newMsg.length);
if (counter == newMsg.length) {
counter = 0;
}
counter ++;
timerId = setTimeout("scroll()", 1);
return true;
}
//-->
</script>
</head>
<body onLoad="scroll()">
<form>
<center>
<input type="text" size=70>
</center>
</form>
</body>
</html>
Animating Text Styles
<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">
<h1 align="center" id="styleme" style="background-color: rgb(255,255,255)">
I am changing!</h1>
</body>
</html>
compareEndPoints() Method
<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()">
<H1>TextRange.rupareEndPoints() Method</H1>
<HR>
<P>Select text in the paragraph in various places relative to
the fixed text range (shown in red).</P>
<TABLE ID="results" BORDER=1 >
<TR><TH>Property</TH><TH>Returned Value</TH><TH>Fixed Range vs. Selection</TR>
<TR>
<TD CLASS="propName">StartToEnd</TD>
<TD CLASS="count" ID="B1"> </TD>
<TD CLASS="count" ID="C1">Start of Fixed
<SPAN ID="compare1">vs.</SPAN> End of Selection</TD>
</TR>
<TR>
<TD CLASS="propName">StartToStart</TD>
<TD CLASS="count" ID="B2"> </TD>
<TD CLASS="count" ID="C2">Start of Fixed
<SPAN ID="compare2">vs.</SPAN> Start of Selection</TD>
</TR>
<TR>
<TD CLASS="propName">EndToStart</TD>
<TD CLASS="count" ID="B3"> </TD>
<TD CLASS="count" ID="C3">End of Fixed
<SPAN ID="compare3">vs.</SPAN> Start of Selection</TD>
</TR>
<TR>
<TD CLASS="propName">EndToEnd</TD>
<TD CLASS="count" ID="B4"> </TD>
<TD CLASS="count" ID="C4">End of Fixed
<SPAN ID="compare4">vs.</SPAN> End of Selection</TD>
</TR>
</TABLE>
<HR>
<P onMouseUp="setAndShowRangeData()">
Text, Text,Text,Text,Text,Text,Text,Text,Text,Text,<SPAN ID="fixedRangeElem">
Text,Text,Text,Text,Text,Text,Text,Text,</SPAN>,
Text,Text,Text,Text,Text,Text,Text,Text,Text,Text,Text,Text,Text,Text,Text,Text,</P>
</BODY>
</HTML>
Encipher and Decipher
/*
JavaScript Application Cookbook
By Jerry Bradenbaugh
Publisher: O"Reilly
Series: Cookbooks
ISBN: 1-56592-577-7
*/
<A href="http://www.wbex.ru/Code/JavaScriptDownload/EncipherDecipher.zip">EncipherDecipher.zip( 18 k)</a>
Exploring the Bounding TextRange Properties
<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()">
<H1>TextRange Object Dimension Properties</H1>
<HR>
<P>Select text in the paragraph below.</P>
<TABLE ID="results" BORDER=1 >
<TR><TH>Property</TH><TH>Pixel Value</TH></TR>
<TR>
<TD CLASS="propName">boundingHeight</TD>
<TD CLASS="count" ID="B1"> </TD>
</TR>
<TR>
<TD CLASS="propName">boundingWidth</TD>
<TD CLASS="count" ID="B2"> </TD>
</TR>
<TR>
<TD CLASS="propName">boundingTop</TD>
<TD CLASS="count" ID="B3"> </TD>
</TR>
<TR>
<TD CLASS="propName">boundingLeft</TD>
<TD CLASS="count" ID="B4"> </TD>
</TR>
<TR>
<TD CLASS="propName">offsetTop</TD>
<TD CLASS="count" ID="B5"> </TD>
</TR>
<TR>
<TD CLASS="propName">offsetLeft</TD>
<TD CLASS="count" ID="B6"> </TD>
</TR>
</TABLE>
<HR>
<P onMouseUp="setAndShowRangeData()">
text text text text text text text text text text text text text
text text text text text text text <br>text
text text text text text text text text text text text
text text text text text text text text text text </P>
</BODY>
</HTML>
Moving Text
/*
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)">
<div id="moveme" style="position:absolute;font-size:xx-large;">This text moves!</div>
</body>
</html>
Two Search and Replace Approaches (with Undo)
/*
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>
<H1>TextRange.findText() Method</H1>
<HR>
<FORM>
<P>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</P>
<P>Enter a string with which to replace found text:
<INPUT TYPE="text" NAME="replaceString" SIZE=20 VALUE="legislation"></P>
<P><INPUT TYPE="button" VALUE="Search and Replace (with prompt)"
onClick="sAndR(this.form)"></P>
<P><INPUT TYPE="button" VALUE="Search, Replace, and Count (no prompt)"
onClick="sAndRCount(this.form)">
<SPAN ID="counter">0</SPAN> items found and replaced.</P>
<P><INPUT TYPE="button" VALUE="Undo Search and Replace"
onClick="undoReplace()"></P>
</FORM>
<DIV ID="rights">
<A NAME="article1">
<H2>ARTICLE I</H2>
</A>
<P>
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.
</P>
[The rest of the text is snipped for printing here, but it is on the CD-ROM
version.]
</DIV>
</BODY>
</HTML>
Using the document.selection Object
<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>
<H1>IE selection Object</H1>
<HR>
<FORM NAME="choices">
<INPUT TYPE="radio" NAME="process" CHECKED>De-select after two seconds<BR>
<INPUT TYPE="radio" NAME="process">Delete selected text.
</FORM>
<P onMouseUp="processSelection()">
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>
Using the TextRectangle Object Properties
/*
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()">
<H1>TextRectangle Object</H1>
<HR>
<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, <SPAN CLASS="sample"
STYLE="color:red">consectetaur adipisicing elit</SPAN>, sed do eiusmod tempor
<SPAN CLASS="sample" STYLE="color:green">incididunt ut labore et dolore <SPAN
CLASS="sample" STYLE="color:blue">magna aliqua</SPAN>. Ut enim adminim veniam,
quis nostrud exercitation ullamco</SPAN> laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit involuptate velit esse cillum
dolore eu fugiat nulla pariatur.</P>
<DIV ID="hiliter" STYLE="position:absolute; background-color:salmon; z-index:-1;
visibility:hidden"></DIV>
</BODY>
</HTML>