Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
Язык сценариев JavaScript
Цель работы: ознакомиться с логикой разработки JavaScript-кода и основным принципам его использования на страницах World Wide Web.
Краткие теоретические сведения
При создании кода JavaScript требуется фактически только текстовый редактор и Web-браузер. Добавить сценарий JavaScript на страницу HTML можно одним из двух способов: поместить теги Script на Web-странице и расположить код JavaScript внутри этих тегов, или поместить весь код JavaScript в отдельный файл и связаться с ним с помощью тега Script.
Любой из этих методов вполне допустим, но они имеют разное назначение. Если имеется небольшой код, который будет использоваться только на одной странице, то размещение его между тегами Script будет хорошим решением. Если, однако, имеется большой фрагмент кода, который будет использоваться на нескольких страницах, то, наверно, лучше поместить этот код JavaScript в отдельный файл и соединиться с ним. Это делается для того, чтобы не нужно было загружать этот код всякий раз при посещении различных страниц. Код загружается один раз, и браузер сохраняет его для последующего использования. Это похоже на то, как используются каскадные таблицы стилей (CSS).
Ниже приведены примеры двух способов подключения кода JavaScript:
<script type="text/javascript"></script>
<script type="text/javascript" src="../files/145/scripts/JavaScriptFile.js"></script>
В первом примере, код JavaScript помещается между символами > и <, прямо перед "</script> ". Если вы совершенно не знаете, как работает Web-страница, то вот пример того, как устроена страница HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Здесь располагается заголовок страницы </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="Имя автора">
<SCRIPT TYPE="text/javascript">
</SCRIPT>
</HEAD>
<BODY>
Здесь располагается основная содержательная часть Web-страницы (тело).
</BODY>
</HTML>
Арифметические операции
+ Сложение
- Вычитание
* Умножение
/ Деление
% Остаток от деления целых чисел
++ Увеличение значения операнда на единицу
-- Уменьшение значения операнда на единицу
Операторы в выражении вычисляются слева направо в соответствии с приоритетами арифметических операций. При необходимости с помощью скобок можно изменить порядок выполнения операций. В языке JavaScript определены операторы, в которых производятся арифметические действия над левым и правым операндом и результат присваивается переменной, заданной левым операндом.
Сокращенные формы оператора присваивания
Оператор Эквивалентный оператор присваивания
X += Y X = -X+Y
X -= Y X = X-Y
X *= Y X = X*Y
X /= Y X = X/Y
X %= Y X = X%Y
Операции отношения применимы к операндам любого типа. Результат операции- логическое значение true, если сравнение верно, и false - в противном случае.
Операции сравнения:
< (меньше);
<= (меньше или равно);
== (равно);
!= (не равно);
>= (больше или равно);
> (больше).
Операция ! (логическое НЕ) применяется к операндам логического типа, если значение операнда а равно true, то значение выражения !а - false, если значение операнда а равно false, то значение выражения !а - true. Результат применения логических операций && (логическое И) и и (логическое ИЛИ) приведен ниже.
Логические операции
А В A&&B A||B
true true true true
true false false true
false true false true
false false false False
Значение выражения А&&В истинно, если истинны оба операнда, и ложно в противном случае. Значение выражения А | |в истинно, если значение хотя бы одного из операндов истинно, и ложно в противном случае.
Над строковыми значениями определена операция конкатенация (соединение) строк. Обозначается операция знаком плюс. Результатом выполнения этой операции является строка, состоящая из строковых значений операндов, например, в результате выполнения оператора присваивания
st = "текущее "+"состояние"
переменная st получит значение "текущее состояние". Рассмотрим еще один пример. Пусть выполнено
stl = "текущий " st2 = "момент"
В результате выполнения
stl += st2
переменная st1 получит значение "текущий момент".
Приоритет операций определяет порядок, в котором выполняются операции в выражении. Ниже перечислены рассмотренные операции в порядке убывания приоритетов.
Приоритет операций
Инкремент ++
Декремент --
Отрицание !
Унарный минус -
Умножение *
Деление, остаток от деления /, %
Сложение +
Вычитание -
Сравнение <, >, <=, >=
Равенство ==
Неравенство ! =
Логическое И &&
Логическое ИЛИ ||
Присваивание =, +=, -=, *=, /=, %=, ! =
Вертикальное графическое меню
Создадим документ, реализующий вертикальное графическое меню. При наведении курсора мыши над пунктом меню должна меняться цветовая палитра, соответствующая выделенному пункту меню.
Каждому пункту меню соответствует два изображения:
первое изображение, когда пункт меню не выбран;
второе - при выбранном пункте меню, цветовая палитра рисунка изменена.
Графические.изображения, соответствующие ситуации, когда пункты меню не выбраны, хранятся в файлах с именами pchl.gif, pch2.gif, pch3.gif, pch4.gif, pch5.gif. Соответствующие им графические изображения с измененной палитрой хранятся в файлах с именами wpchl.gif, wpch2.gif, wpch3.gif, wpch4.gif, wpch5.
При перемещении курсора над пунктом меню возникает событие onmouseover. В этом случае при решении задачи требуется изменить графическое изображение, соответствующее выбранному пункту меню, что осуществляется в результате выполнения конструкции
onmouseover="document.pml.src='wpchl.gif'"
Если курсор мыши выходит за пределы области связи, то возникает событие onmouseout, в результате обработки которого пункт меню должен принять первоначальный вид. Это достигается оператором присваивания
onmouseout="document .pml. src=.'pchl.gif "
HTML-код документа, реализующего графическое вертикальное меню, может иметь следующий вид.
<HTML>
<HEAD>
<title>Вертикальное графическое меню</title>
</HEAD>
<BODY background="fonl.jpg">
<h2><font color="#OOOOFF">Содержание</font></h2>
<A href="tchl.htm" target="Main"
onmouseover="document.pml.src='wpchl.gif'"
onmouseout="document.pml.src='pchl.gif'" >
<IMG src="../files/145/pchl.gif" name="pm1" alt="форматирование текста"
border="0" width="103" height="35"></A><br>
<A href="tch2.htm" target="Main"
onmouseover="document.pm2.src='wpch2.gif'"
onmouseout="document.pm2.src='pch2.gif'" >
<IMG src="../files/145/pch2.gif" name="pm2" аlt="создание списков"
order="0" width="103" height="35"></A><br>
<A href="tch3.htm" target="Main"
onmouseover="document.pm3.src='wpch3.gif'"
onmouseout="document.pm3.src='pch3.gif'" >
<IMG src="../files/145/pch3.gif" name="pm3" alt="построение таблиц"
border="0" width="103" height="35"></A><br>
<A href="tch4.htm" target="Main"
onmouseover="document.pm4.src='wpch4.gif'"
onmouseout= "document.pm4.src='pch4 .gif'" >
<IMG src="../files/145/pch4.gif" name="pm4" alt="использование графики"
border="0" width="103" height="35"></A><br>
<A href="tch5.htm"
onmouseover="document.pm5.src='wpch5.gif'"
onmouseout="document.pm5.src='pch5.gif'" >
<IMG src="../files/145/pch5.gif" name="pm5" alt="создание фреймовой структуры"
border="0" width="103" height="35"></A>
<br>
</BODY>
</HTML>
Ход работы
1 Ознакомиться с теоретическим материалом.
2 Запустить web-броузер: Internet Explorer (Netscape или Opera).
3 Выполнить индивидуальное задание согласно варианту.
4 Открыть созданный стартовый документ.
5 Выполнить индивидуальное задание.
6 Оформить отчет согласно требованиям.
1 Проверять объекты типа "элемент формы" на наличие в них обязательной информации (email, имя и др.), а также осуществлять проверку правильности заполнения формы во время ввода.
2 Создать документ, реализующий горизонтальное графическое меню. При наведении курсора мыши над пунктом меню должна меняться цветовая палитра, соответствующая выделенному пункту меню и отображаться подпункты.