Пример 1: Проверка данных, введённых
Пример 1: Проверка данных, введённых в форму. В следующем примере userName это необходимое текстовое поле. Если пользователь пытается покинуть это поле, обработчик onBlur вызывает функцию required для подтверждения того, что userName имеет верное значение.
<INPUT TYPE="text" VALUE="" NAME="userName"
onBlur="required(this.value)"> Пример 2: Изменение цвета фона документа. Обработчики onBlur и onFocus окна изменяют цвет фона окна, в зависимости от того, имеет окно фокус или нет.
<BODY BGCOLOR="lightgrey"
onBlur="document.bgColor='lightgrey'"
onFocus="document.bgColor='antiquewhite'"> Пример 3: Изменение цвета фона фрэйма. Этот пример создаёт 4 фрэйма. Документ-источник для каждого фрэйма, onblur2.htm, имеет тэг BODY с обработчиками onBlur и onFocus, показанными в Примере 1. Когда документ загружается, все фрэймы имеют светло-серый цвет. Когда пользователь щёлкает по фрэйму, обработчик onFocus изменяет цвет фона фрэйма на antique white. Фрэйм, теряющий фокус, становится светло-серым. Обратите внимание, что обработчики onBlur и onFocus находятся внутри тэга BODY, а не тэга FRAME.
<FRAMESET ROWS="50%,50%" COLS="40%,60%">
<FRAME SRC=onblur2.htm NAME="frame1">
<FRAME SRC=onblur2.htm NAME="frame2">
<FRAME SRC=onblur2.htm NAME="frame3">
<FRAME SRC=onblur2.htm NAME="frame4">
</FRAMESET> Следующий код даёт тот же эффект, что и предыдущий, но реализован иначе. Обработчики onFocus и onBlur ассоциируются с фрэймом, но не с документом. Обработчики onBlur и onFocus для фрэйма специфицируются путём установки свойств onblur и onfocus.
<SCRIPT>
function setUpHandlers() {
for (var i = 0; i < frames.length; i++) {
frames[i].onfocus=new Function("document.bgColor='antiquewhite'")
frames[i].onblur=new Function("document.bgColor='lightgrey'")
}
}
</SCRIPT> <FRAMESET ROWS="50%,50%" COLS="40%,60%" onLoad=setUpHandlers()>
<FRAME SRC=onblur2.htm NAME="frame1">
<FRAME SRC=onblur2.htm NAME="frame2">
<FRAME SRC=onblur2.htm NAME="frame3">
<FRAME SRC=onblur2.htm NAME="frame4">
</FRAMESET>Пример 4: Закрытие окна. Обработчик onBlur окна закрывает окно, когда оно теряет фокус.
<BODY onBlur="window.close()">
This is some text
</BODY>
Здесь userName этот текстовое поле. Если пользователь изменяет текст и покидает поле, обработчик onChange вызывает функцию checkValue для подтверждения верности значения userName.
<INPUT TYPE="text" VALUE="" NAME="userName"
onChange="checkValue(this.value)">
Пример 1: Вызов функции при щелчке пользователя по кнопке. Предположим, Вы создали функцию JavaScript compute. Можно выполнить функцию compute, когда пользователь щёлкает кнопку и вызывает функцию с помощью обработчика onClick:
<INPUT TYPE="button" VALUE="Calculate" onClick="compute(this.form)"> В этом примере ключевое слово this ссылается на текущий объект; в данном случае это кнопка Calculate. Конструкция this.form ссылается на форму, содержащую кнопку.
В следующем примере предположим, что Вы создали функцию JavaScript pickRandomURL, которая позволяет выбрать случайный URL. Можно использовать onClick для динамического специфицирования значения атрибута HREF тэга A, как показано здесь:
<A HREF=""
onClick="this.href=pickRandomURL()"
onMouseOver="window.status='Pick a random URL'; return true">
Go!</A> Обработчик onMouseOver специфицирует специальное сообщение для вывода в строке состояния браузера, когда пользователь помещает указатель мыши над якорем Go!. Как видно из этого примера, Вы обязаны возвратить true, чтобы установить свойство window.status в обработчике onMouseOver.
Пример 2: Отмена выделения переключателя/checkbox. В следующем примере создаётся переключатель с обработчиком onClick. Обработчик события выводит диалог confirm, который предупреждает пользователя, что выделение переключателя (установка "птички") уничтожит все файлы. Если пользователь выберет Cancel, onClick возвратит false, и переключатель останется невыделенным.
<INPUT TYPE="checkbox" NAME="check1" VALUE="check1"
onClick="return confirm('This purges all your files. Are you sure?')"> Remove files
Пример 1: Обработчик со значением Null. В этом тэге IMG код onError="null" подавляет сообщения об ошибках, если ошибка возникает при загрузке изображения.
<IMG NAME="imageBad1" SRC="corrupt.gif" ALIGN="left" BORDER="2"
onError="null">Пример 2: Обработчик с Null для окна. Обработчик onError для окна не может быть выражен через HTML. Следовательно, Вы обязаны ввести всё необходимое, в нижнем регистре, в тэге SCRIPT. Следующий код присваивает null обработчику onError для всего окна, а не только для объекта Image. Это подавляет все сообщения JavaScript об ошибках, включая сообщения для объекта Image.
<SCRIPT>
window.onerror=null
</SCRIPT>
<IMG NAME="imageBad1" SRC="corrupt.gif" ALIGN="left" BORDER="2"> Однако, если объект Image имеет свой специальный обработчик onError, этот обработчик будет выполняться при возникновении ошибки с изображением. Это происходит из-за того что window.onerror=null подавляет сообщения об ошибках JavaScript, а не обработчиков onError.
<SCRIPT>
window.onerror=null
function myErrorFunc() {
alert("The image had a nasty error.")
}
</SCRIPT>
<IMG NAME="imageBad1" SRC="corrupt.gif" ALIGN="left" BORDER="2"
onError="myErrorFunc()">В следующем примере window.onerror=null подавляет все сообщения об ошибках. Без onerror=null код вызовет ошибку переполнения стэка, так как здесь имеется бесконечная рекурсия.
<SCRIPT>
window.onerror = null;
function testErrorFunction() {
testErrorFunction();
}
</SCRIPT>
<BODY onload="testErrorFunction()">
test message
</BODY>Пример 3: Функция обработки ошибок. Здесь определена функция myOnError, которая перехватывает ошибки JavaScript. Эта функция использует три массива для хранения сообщения, URL и строки-нарушителя для каждой ошибки. Если пользователь щёлкает кнопку Display Error Report, функция displayErrors открывает окно и создаёт в нём сообщение об ошибке. Заметьте, что эта функция возвращает true для подавления стандартного диалога JavaScript об ошибке.
<SCRIPT>
window.onerror = myOnError msgArray = new Array()
urlArray = new Array()
lnoArray = new Array() function myOnError(msg, url, lno) {
msgArray[msgArray.length] = msg
urlArray[urlArray.length] = url
lnoArray[lnoArray.length] = lno
return true
} function displayErrors() {
win2=window.open('','window2','scrollbars=yes')
win2.document.writeln('<B>Error Report</B><P>') for (var i=0; i < msgArray.length; i++) {
win2.document.writeln('<B>Error in file:</B> ' + urlArray[i] + '<BR>')
win2.document.writeln('<B>Line number:</B> ' + lnoArray[i] + '<BR>')
win2.document.writeln('<B>Message:</B> ' + msgArray[i] + '<P>')
}
win2.document.close()
}
</SCRIPT><BODY onload="noSuchFunction()">
<FORM>
<BR><INPUT TYPE="button" VALUE="This button has a syntax error"
onClick="alert('unterminated string')"> <P><INPUT TYPE="button" VALUE="Display Error Report"
onClick="displayErrors()">
</FORM> Этот пример даст на выходе:
Error ReportError in file: file:///c%7C/temp/onerror.htm
Line number: 34
Message: unterminated string literal Error in file: file:///c%7C/temp/onerror.htm
Line number: 34
Message: missing ) after argument list Error in file: file:///c%7C/temp/onerror.htm
Line number: 30
Message: noSuchFunction is not defined Пример 4: Обработчик события вызывает функцию. В тэге IMG обработчик onError вызывает функцию badImage при возникновении ошибок во время загрузки изображения.
<SCRIPT>
function badImage(theImage) {
alert('Error: ' + theImage.name + ' did not load properly.')
}
</SCRIPT>
<FORM>
<IMG NAME="imageBad2" SRC="orca.gif" ALIGN="left" BORDER="2"
onError="badImage(this)">
</FORM>
Здесь обработчик onFocus используется в объекте valueField Textarea для вызова функции valueCheck.
<INPUT TYPE="textarea" VALUE="" NAME="valueField"
onFocus="valueCheck()"> См. также примеры для onBlur.
Пример 1: Вывод сообщения при загрузке страницы. Здесь обработчик onLoad выводит приветствие после загрузки страницы.
<BODY onLoad="window.alert("Welcome to the Brave New World home page!")>Пример 2: Вывод сообщения при загрузке изображения. Здесь создаются два объекта Image: один - конструктором Image, а второй - тэгом IMG. Каждый объект Image имеет обработчик onLoad, который вызывает функцию displayAlert, выводящую сообщение. Для изображения, созданного тэгом IMG, диалог alert отображает имя изображения. Для изображения, созданного конструктором Image, alert выводит сообщение без имени изображения. Это происходит из-за того, что обработчик onLoad для объекта, созданного конструктором Image, обязан быть именем функции и он не может специфицировать параметры для функции displayAlert.
<SCRIPT>
imageA = new Image(50,50)
imageA.onload=displayAlert
imageA.src="cyanball.gif"function displayAlert(theImage) {
if (theImage==null) {
alert('An image loaded')
}
else alert(theImage.name + ' has been loaded.')
}
</SCRIPT><IMG NAME="imageB" SRC="greenball.gif" ALIGN="top"
onLoad=displayAlert(this)><BR> Пример 3: Циклический вывод GIF-анимации. Здесь выводится изображение birdie.gif, которое является анимированным изображением GIF. Обработчик onLoad увеличивает переменную cycles, которая отслеживает количество циклов анимации. Чтобы увидеть значение cycles, пользователь щёлкает кнопку Count Loops.
<SCRIPT>
var cycles=0
</SCRIPT>
<IMG ALIGN="top" SRC="birdie.gif" BORDER=0
onLoad="++cycles">
<INPUT TYPE="button" VALUE="Count Loops"
onClick="alert('The animation has looped ' + cycles + ' times.')">Пример 4: Изменение отображаемой GIF-анимации. Это пример использует обработчик onLoad для ротации шести GIF-анимаций. Каждая анимация показывается как последовательность отдельных объектов Image. Когда документ загружается, выводится !anim0.htm. Когда эта анимация завершается, обработчик onLoad вызывает загрузку следующего файла, !anim1.htm, вместо первого файла. После завершения последней анимации, !anim5.htm, вновь отображается первый файл. Заметьте, что функция changeAnimation не вызывает сама себя после изменения свойства src объекта Image. Это происходит, потому что свойство src изменяется, обработчик onLoad изображения включается и вызывается функция changeAnimation.
<SCRIPT>
var whichImage=0
var maxImages=5 function changeAnimation(theImage) {
++whichImage
if (whichImage <= maxImages) {
var imageName="!anim" + whichImage + ".gif"
theImage.src=imageName
} else {
whichImage=-1
return
}
}
</SCRIPT><IMG NAME="changingAnimation" SRC="!anim0.gif" BORDER=0 ALIGN="top"
onLoad="changeAnimation(this)"> См. также примеры для Image.
