Создание простых сценариев
Пример: Сценарий определения текущего времени. Для получения текущей даты и времени в соответствии с временным поясом места жительства пользователя используется объект Date.
<!-- пример pr3 -->
<html> <hеаd>
<title>Отображение даты</title>
</hеаd>
<body>
<h1>Текущее время и дата</h1>
<p>
<script type="text/javascript">
var now = new Date(); // дата и время
var localtime=now.toString();
var hours=now.getHours();
var mins=now.getMinutes();
var secs=now.getSeconds();
document.write("<b>Текущее время: </b>" + localtime + "<br>");
document.write("<font size='+5'>");
document.write (hours + ":" + mins + ":" + secs);
document.write("</font>");
</script>
</body> </html>
Результат:
pr3-Текущее время и дата
Текущее время: Tue Oct 09 2012 15:24:56 GMT+0400
15:24:56
Пример: Бегущая строка в окне статуса состояния window.status снизу
<!-- пример pr4 -->
<html>
<hеаd><title>Пример бегущей строки</title>
<script type="text/javascript">
var msg = "Это пример бегущей строки.";
var spacer = "... ...";
var pos = 0;
function ScrollMessage()
{window.status = msg.substring(pos, msg.length) + spacer + msg.substring(0,pos);
pos++;
if (pos > msg.length) pos = 0;
window.setTimeout("ScrollMessage()",200);
//установка времени прерывания
}
ScrollMessage();//вызов функции
</script>
</head>
<body>
<h1>Пример бегущей строки</h1>
Взгляните на строку состояния в нижней части окна браузера - окне состояния.
</body></html>
Пример: Смена изображения
<!—пример pr5: Использование события для смены изображения и перехода по гиперссылке на bsu.by-->
<html> <body>
<h1>Событие onmouse </h1>
<a href="http://bsu.by">
<img src="s1.jpg" name="ris" width="100px" hight="100px"
onmouseover="ris.src='s2.jpg'; "onmouseout="ris.src='s3.jpg';">
</a>
</body>
</html>
Комментарии.
Синтаксис JavaScript использует комментарии, подобные на комментарии С++:
//это однострочный комментарий
/*Этот сценарий содержит различные команды и операторы, а также многострочные комментарии */
Отладка скриптов. Ввод и вывод данных
Распространенный способ отладки заключается в многократном вызове метода alert() объекта window, который выводит стандартное диалоговое окно с текстом и кнопкой OK или методов, выводящих диалоговые окна confirm() и prompt():
1. alert («сообщение»). Метод позволяет выводить диалоговое окно с заданным сообщением и кнопкой ОК. Окно, создаваемое посредством alert(), является модальным и останавливает все последующие действия пользователя и программ, если его не убрать, щелкнув на кнопке ОК.
2. confirm («сообщение»). Окно, создаваемое посредством confirm(), также является модальным. Если пользователь щелкнет на кнопке «ОК», то метод вернет логическое значение true, а если он щелкнет на кнопке «Отмена» (Cancel), то возвращается значение false.
3. prompt(«сообщение», «значение_поля_ввода_данных»);
Метод prompt выводит на экран диалоговое окно с сообщением, и с текстовым полем, в которое пользователь может ввести данные. Кроме этого, в окне предусмотрены две кнопки: ОК и Отмена (Cancel). Если пользователь щелкнет на кнопке ОК, то метод вернет содержимое поля ввода данных, а если он щелкнет на кнопке Отмена, то возвращается логическое значение false. Объект window, из которого происходит вызов методов, может не указываться при вызове.
<!-- пример pr6: Вывод текста в окно -->
<html> <head>
<title> вывод окна</title>
<script type="text/javascript">
alert("Вас приветствует JavaScript и метод alert()!");
confirm("Метод confirm, выберите вариант !");
prompt("Метод prompt(),Введите Ваше имя");
</script>
</head>
<body >
<p>
<h1 style="color:blue">Вывод окон: alert(), confirm() и prompt() </h1>
<hr><p><p>Cтраница документа </center>
</body> </html>
Существует специальные способы отладки и отладчики, позволяющие производить отладку скриптов. Одним из лучших редакторов для разработки кода JavaScript является редактор “Adobe DreamWeaver CS5” с возможными расширениями (JQuery API) и отладчиком FireBug. Программисты Java могут использовать для работы с JavaScript среду разработки Eclipse и плагины к Eclipse JSEclipse и Aptana Studio.
Среди известных JavaScript библиотек можно отметить jQuery, Adobe life, Dojo Toolkit, Extjs, Mootools, Prototype, Qooxdoo.