 |
Главная Случайная страница Контакты | Мы поможем в написании вашей работы! | |
Примеры скриптов
|
|
В листингах 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)
<html> <head> <title>Открытие/закрытие нового окна</title> </head> <body> <p><a name="demoOpen" onClick="mywindow = window.open('window.htm','mywin','height=120, width=300, left=100, top=30');">Открыть</a> <a name="demoClose" onClick="mywindow.window.close();">Закрыть</a> </body> </html>Листинг 4. Изменение оформления
Листинг 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>/* function fulltime() { var time=new Date(); document.clock.full.value=time.toLocaleString(); document.getElementById("jsclock").innerHTML=time.toLocaleString(); setTimeout('fulltime()',500) } */ // fulltime(); Листинг 6. Определение браузера (использован объект navigator)
Дата публикования: 2015-11-01; Прочитано: 291 | Нарушение авторского права страницы | Мы поможем в написании вашей работы!
