Для того чтобы сайт пользовался популярностью, он должен иметь оригинальный дизайн, какие-либо визуальные эффекты и при этом быстро загружаться. Это можно осуществить, используя язык JavaScript. С помощью этого языка программирования можно создавать визуальные эффекты на Web-странице, например, меняющийся цвет фона, движение, а также использовать сценарии для размещения элементов страницы Рассмотрим эти примеры подробнее.
Пример1. Эффект печатной машинки. Принцип работы сценария – последовательное извлечение из заданной строки определенного символа. Если количество извлекаемых символов совпадает с длинной строки, то поле очищается, и процесс извлечения символов начинается сначала. Рассмотрим код этой Web-странички:
<HTML>
<HEAD>
<TITLE> Эффект печатной машинки </TITLE>
<script language="JavaScript">
var line="Java - клёвая штука !"; // Задаем строковую переменную
var speed=150; // Устанавливаем скорость появления символов
var i=0; // начальное количество символов, извлекаемых из строки
function m_line() // Создаем функцию вывода символов
{
if(i++<line.length)
{
document.cit.forum.value=line.substring(0,i);
}else
{
document.cit.forum.value=" ";
i=0;
}setTimeout('m_line()',speed);}
</script>
<center>
<form name=cit>
<input type=text size=32 name=forum>
</form>
</center>
<script language="JavaScript">m_line();</script>
</HEAD>
<BODY TEXT="#000000" BGCOLOR="#FFFFFF" BACKGROUND=""
</BODY>
</HTML>
Задание.Наберите этот пример в текстовом редакторе и сохранить в файле с именем des1.html. Откройте этот файл в браузере. Попробуйте создать свою бегущую строку, указав в тэге <marquee> свои параметры.
Просмотрите созданный файл в Internet-браузере. На страничке должно появиться следующее:

Пример 2. Мигание экрана. Принцип действия сценария – чередование цвета фона через определенный промежуток времени. Рассмотрим код этогой странички:
<html>
<head>
<title>Мигание экрана</title>
<script language="JavaScript">

</script>
</head>
<body>
<div align="center">
<h3> При нажатии на кнопку экран будет мигать. </h3>
<form>
<input type="button" value="Мигание экрана" onClick="blinkit()"> // создание кнопки
</form>
</div>
</body>
</html>
Просмотрите созданный файл в Internet-браузере. В результате выполнения кода получится следующая страница:

Задание.Наберите этот пример в текстовом редакторе и сохранить в файле с именем des2.html. Откройте этот файл в браузере. Измените сценарий так, чтобы фон странички мигал тремя цветами.

Пример 3. Приближение и удаление текста. В основе сценария – изменение размера шрифта строки (чередующееся увеличение и уменьшение). Создайте HTML – документ des3.html, содержащий следующий код:

<html>
<script language="JavaScript">

</script>
<head>
<title> Приближение и удаление текста </title>
</head>
<body>
</body>
</html>
На получившейся Web-страничке мы можем увидеть следующее содержимое:

А следующий пример покажет как можно использовать сценарии для работы с изображениями. В этом примере сценарий позволяет задавать положение изображений относительно текста. рассмотрим код этого документа:

<html>
<head>
<title>Расположение изображения относительно строки</title>
<script language="JavaScript">

</script>
</head>
<body bgcolor="f8f8ff">
<center>
<h4 align="center"> Pacпoлoжeниe изображения относительно строки </h4>
Для трех используемых изображений выберите значение параметра выравнивания align и нажмите кнопку <b> Просмотр</b><br>
Вы увидите как располагаются изображения в тексте.
<table border=2 bgcolor=silver> <tr>
<td align=center><img src="fon1.gif" width=75></td>
<td align=center><img src="fon5.gif" width="69" height="71">
<td align=center><img src="fon6.gif" width="72" height="73"> </td></tr>
<tr>
<td><form name="form1">
<select name=sel1 size=1 onchange="setk(1)">
<option value="top" checked>TOP
<option value="texttop">TEXTTOP
<option value="middle">MIDDLE
<option value="left">LEFT
<option value="bottom">BOTTOM
<option value="right">RIGHT
</select>
</form></td>
<td><form name="form2">
<select name=sel2 size=l onchange="setk(2)">
<option value="top" checked>TOP
<option value="texttop">TEXTTOP
<option value="middle">MIDDLE
<option value="left">LEFT
<option value="bottom">BOTTOM
<option value="right">RIGHT
</select> </form></td>
<td><form name="form3">
<select name=sel3 size=l onchange="setk(3)">
<option value="top" checked>TOP
<option value="texttop">TEXTTOP
<option value="middle">MIDDLE
<option value="left">LEFT
<option value="bottom">BOTTOM
<option value="right">RIGHT
</select> </form></td> </tr></table>
<form>
<input type="button" value="Просмотр" onclick="set()">
<input type="reset" value="Обновить"> </form> </center>
<table border=2 bgcolor="#ffdcdc"> <tr><td>
Параметры выравнивания
<img src="fon1.gif" align=TOP name=pict1 width="67" height="58">задают
<img src="fon5.gif" align=TOP name=pict2 width="63" height="58">
расположение изображения относительно строки текста.
<img src="fon6.gif" align=TOP name=pict3 width="64" height="62">
В этом случае изображение является обычным элементом строки.
</td></tr>
</table>
</body>
</html>

В результате получиться следущее:

Pacпoлoжeниe изображения относительно строки

Для трех используемых изображений выберите значение параметра выравнивания align и нажмите кнопку Просмотр
Вы увидите как располагаются изображения в тексте.

Параметры выравнивания задают расположение изображения относительно строки текста. В этом случае изображение является обычным элементом строки.

Задание. Используя текстовый редактор создайте HTML-файл,содержащий вышеописанный код.Сохраните получившийся файл под именем des4.html, а затем откройте его в броузере.

JavaScript в математике Использование JavaScript при работе с формами

В начало страницы