2015-06-24
627
В листингах 1-6 приведены примеры простых скриптов, иллюстрирующими базовые возможности javascript при работе с объектами веб-документа. При выполнении заданий используйте предлагаемые примеры в качестве образцов.
WARNING: Имейте ввиду, что различные браузеры могут по разному выполнять код javascript (или даже не выполнять его совсем).
Листинг 1. Ограничение количества символов
<html><head><title>Ограничение количества вводимых символов</title><script type="text/javascript">var maxLen = 25;function checkMaxinput(form) { if (form.message.value.length > maxLen) form.message.value = form.message.value.substring(0, maxLen); else form.remLen.value = maxLen — form.message.value.length; }</script></head><body><form name=myform action="somehandler.cgi"><h1>Ограничение количества вводимых символов<h1><textarea name=message cols=28 rows=4 onKeyDown="checkMaxinput(this.form)" onKeyUp="checkMaxinput(this.form)"></textarea><p>Осталось <input readonly type=text name=remLen size=3 value="25"> символов</p></form></body></html>Листинг 2. Проверка ввода
<html><head><title>Проверка ввода</title><SCRIPT type="text/javascript">function checkIt(){ var t0=document.getElementById('first').value; var t1=document.getElementById('second').value; if (t0 == "" || t0 == "Имя") { alert("Вы не указали свое имя!"); return false; } if (t1 == "") { alert("Вы не ввели необходимую информацию!"); return false; }return true;</SCRIPT></head><body><form method='get' action='somescript.php'><input id="first" type="text" size=60px value='Имя'><br><textarea id="second" rows=4 cols=60></textarea><br><input type='submit' onClick="if (!checkIt()){return false;}" value="ОК"></form></body></html>Листинг 3. Управление окнами (используется объект window)
|
|
|
Листинг 4. Изменение оформления
<html><HEAD><TITLE>Изменение цвета объекта по щелчку мыши</TITLE></head><BODY><p onClick="fgColor='#3CB094';bgColor='#FFFF00';">CLICK 4 REDRAW</p></BODY></HTML>Листинг 5. Текущее время (использован встроенный объект Date)
<html><HEAD><TITLE>Часы, отображающие текущее время</TITLE><script type="text/javascript">function fulltime() { var time=new Date(); document.clock.full.value=time.toLocaleString(); // 1-ый вариант document.getElementById("jsclock").innerHTML=time.toLocaleString(); // 2-ой вариант setTimeout('fulltime()',500) }</script></head><body><form name=clock><input type=text size=20 name=full><!-- 1-ый вариант --><span id="jsclock"></span><!-- 2-ой вариант --></form><script type="text/javascript"> fulltime(); </script></BODY></HTML>Листинг 6. Определение браузера (использован объект navigator)
<HTML><HEAD><TITLE>Сведения о браузере</TITLE></HEAD><BODY><h1>Для навигации в Web вы используете:</h1><ul><SCRIPT type="text/javascript"> document.write("<li>Имя программы:<b>"+navigator.appName+"</b>"); document.write("<li>Версия:<b>"+navigator.appVersion+"</b>"); document.write("<li>Пользовательский агент:<b>"+navigator.userAgent+"</b>"); document.write("<li>Платформа: <b>"+navigator.platform+"</b>");</SCRIPT></ul></BODY></HTML>ЗАДАНИЕ 3. Анимация объектов: анимация трансформации, анимация цвета. Создание анимационных фильмов приложение Macromedia Flash
