Операторы присваивания. | ||
Оператор | Действие | Пример |
= | Присваивает значение переменной | MyVar-5 |
+= | Увеличивает значение переменной на указанную величину | MyVar+=2 |
-= | Уменьшает значение переменной на указанную величину | MyVar-=2 |
*= | Умножает значение переменной на указанную величину | MyVar*=3 |
/= | Делит значение переменной на указанную величину | .MyVar/=2 |
%= | Делит значение переменной на указанную величину и возвращает остаток | MyVar%=4 |
Отметим, что оператор += может использоваться не только с численными, но и со строчными операндами. При этом происходит объединение двух строк в одну;
MyStrVar = "Java"
MyStrVar += "Script" //Значение MyStrVar равно "JavaScript”
Математические операторы
Оператор | Описание | Пример |
-MyVar1 | Значение переменной MyVar1 рассматривается как отрицательное число | MyVar2=- MyVar1 |
MyVar1+ MyVar2 | Выполняется сложение двух значений. Воз- можно использование для объединения строк. | MyVar2= MyVar1+2 |
MyVar1- MyVar2 | Выполняется вычитание MyVar2 из MyVar1 | MyVar=2- MyVar1 |
MyVar1* MyVar2 | Выполняется перемножение MyVar1 на MyVar1 | MyVar=3*4.5 |
MyVar1/ MyVar2 | Выполняется деление с плавающей точкой MyVar1 на MyVar2 | MyVar= MyVar1/6 |
MyVar1% MyVar2 | Выполняется деление по модулю MyVar1 на MyVar2 | MyVar=34%MyVar1 |
MyVar1++ | MyVar1 увеличивается на единицу | MyVar++ |
MyVar1-- | MyVar1 уменьшается на единицу | MyVar-- |
Операторы сравнения
Оператор | Операция |
Значение! = = Значение2 | Проверяет равенство Значения! и Значения2. |
Значение1!= Значение2 | Проверяет неравенство Значения 1 и Значения2. |
Значение1 > Значение2 | Проверяет, больше ли Значение 1, чем Значение2. |
Значение! >= Значение2 | Проверяет, больше или равно Значение! Значению2. |
Значение 1 < Значение2 | Проверяет, меньше ли Значение!, чем Значение2. |
Значение 1 <= Значение2 | Проверяет, меньше или равно Значение! Значению2. |
Значение! && Значение2 | Выполняет логическую операцию И над Значением] и Значением 2. |
Значение1 || Значение2 | Выполняет логическую операцию ИЛИ над Значением! и Значением 2. |
! Значение | Выполняет логическую операцию НЕ - инверсию значения. |
Результатом использования операторов сравнения всегда является булева величина (имеющая значение true/false).
Тернарный оператор (выражения с оператором "?")
В языке JavaScript поддерживается довольно удобный метод создания выражений с проверкой, позаимствованный из языка С:
(условие)? istrue: isfalse
где: условие — выражение, значение которого тестируется, istrue – действия, выполняемое при значении выражения, равном true, isfalse - действия, выполняемое при значении выражения, равном false.
Операторы управления
Весь набор операторов управления языка можно разбить на три группы:
♦ Операторы выбора, или условные
♦ Операторы цикла
Операторы выбора. К этой группе операторов относятся операторы, которые выполняют определенные блоки операторов в зависимости от истинности некоторого булевского выражения. Оператор условия if... else:
If (условие)
{
операторы
}
[else
{
Операторы2
}]
В операторе-переключателе switch вычисляется одно выражение и сравнивается со значением, заданным в блоках case:
switch (выражение)
{ case значение1:
Операторы1
[break];
case значение2: операторы2 [break];
…
default:
[операторы]
}
Если значение выражения в блоке switch не равняется ни одному из значений в блоках case, то вычисляется группа операторов блока default, если этот блок задан, иначе происходит выход из оператора switch. Необязательный оператор break, задаваемый в каждом из блоков case, выполняет безусловный выход из оператора switch. Если он не задан, то продолжается выполнение операторов в следующих блоках case до первого оператора break или до конца тела оператора switch.
Операторы цикла
В языке существует два оператора цикла: for и while. Оператор цикла for позволяет организовать выполнение блока операторов заданное число раз:
for([инициал_выражение];[условие];[имзменяющее_выражение])
{[операторы]}
Цикл while выполняется пока истинно выражение, задающее условие выполнения цикла:
while (условие) { [операторы] }
Иногда необходимо завершить цикл не по условию, задаваемому в заголовке цикла, а в результате вычисления некоторого условия в теле цикла. Для этой цели в JavaScript существуют операторы break и continue. Оператор breakпрекращает выполнениецикла и передает управление оператору, непосредственно следующему за оператором цикла. Оператор continue прекращает выполнение текущей итерации и начинает выполнение следующей.
3. Выполнение лабораторной работы.
3.1. Создайте на диске D свою папку. Скопируйте содержимое папки «ЛР №4» с диска С в свою папку. В этой же папке создайте текстовый документ и откройте его в редакторе «Блокнот».
Наберите в созданном документе следующий текст:
<html>
<head>
<script LANGUAGE=”JavaScript”>
<!—
if (document.images) {
var elflist=new Image();elflist.src=”images/elflist.gif”;
var elftrans=new Image();elftrans.src=”images/elftrans.gif”;
}
function flip(imgName,imgVar) {
if (document.images)
document return true; } function nothing(){ } //--> </script> <style> <!— H1,TD {font-family:sans-serif} --> </style> <title>Эльф-помощник</title> </head> <body> <h1>Эльф-помощник</h1> <hr> <table border="0"> <tr> <td> <a href="javascript:nothing();" onMouseOver="flip('elf','elftrans.src’); flip('elf2', 'elflist.src’); " onMouseOut= "flip ('elf’, ' elflist.src’); flip ('elf2','elftrans.src');"> <img name="elf" src="images/elflist.gif" alt="Эльф-помощник" border="0" WIDTH="96" HEIGHT="104"></a> <img name="elf2"src="images/elftrans.gif" alt="Эльф-помощник" border="0" WIDTH="96" HEIGHT-"104"> </td> </tr><tr> <td>Haжмитe на эльфа для получения помощи (первой)</td> </tr> </table> </bodv> </html> Сохраните документ с расширением *.html, закройте и запустите его. Проследите работу скрипта по изменению картинки в окне браузера. Данный пример наглядно демонстрирует динамическое изменение содержимого Web-страницы при выполнении пользователем определенных условий. Когда указатель мыши перемещается по особым образом запрограммированному изображению, изображение меняется. Когда указатель мыши выходит за пределы изображения, оно возвращается к исходному виду. Рассмотрим структуру приведенного фрагмента. Web-страница содержит две картинки одного размера, касающиеся друг друга. Левая - картинка с эльфом, правая - прозрачная. Когда пользователь передвигает указатель мыши над левой, программа заменяет ее прозрачным изображением, а правую прозрачную - изображением эльфа. Когда пользователь убирает указатель мыши с левой картинки, программа восстанавливает страницу в первоначальном виде. Как только пользователь пытается установить указатель мыши на изображении эльфа, эльф перепрыгивает в другую сторону. Для отображения картинок использованы стандартные теги <img name="elf" src=”/images/eltlist.gif" alt="Эльф-помощник" border="0" WIDTH="96" HEIGHT="104"> Свойство NAME дает каждой картинке имя, к которому можно обращаться в программе. Свойство SRC определяет картинку в каждом теге (адрес, откуда ее загрузить), которая будет отображаться первой. Для каждой картинки свойство ALT задает строку текста. Она выводится на экран, если у пользователя отключено отображение графики. Установка свойства BORDER в 0 делает границы изображения невидимыми, a WIDTH и HEIGHT определяют размеры картинки. Необходимо установить теги onMouseOver и onMouseOut, которые запускают программы, когда мышь оказывается на картинке и вне ее. Теги можно поместить: о внутри тега <IMG> для первой картинки; о внутри тега <А> из пары фиксирующих тегов <А>... </А>, которая окружает первую картинку. Первая опция работает только для Internet Explorer, а вторая и в Netscape Navigator. В данном случае выбран второй вариант. Свойство HREF тега <А> определяет дальнейшие действия при щелчке пользователем на содержимом этого тега (здесь содержимое - картинка). Все фиксирующие теги требуют атрибута HREF. В этом примере он не нужен, поэтому мы воспользовались JavaScript-функцией, которая ничего не делает: function nothing(){ } События onMouseOver и onMouseOut запускают на выполнение два оператора JavaScript: один для тега <IMG> именем elf и один для тега с именем elf2. Программа flip, выполняющая операторы, расположена в разделе <HEAD> и выглядит следующим образом: function flip(imgName,imgVar) { if (document.images) document return true; } Выполнение этой функции с параметрами flip(‘elf’, 'elftrans.src') равносильно выполнению оператора document [‘eif'].src=eval(‘elftrans.src'); Для тега <IMG> с именем elf этотоператор преобразует атрибут SRC так, чтобы он содержал значение elftrans.src. Чтобы инетпретатор языка JavaScript не пытался скопировать текстовую строку в тег картинки используется функция eval(). Ниже определяется, каким может быть значение elftrans.src. elflist = new Image(); elflist.src= "/images/elflist.gif"; Первый оператор создает новый объект сименем efllist, а второй присваивает его свойству src значение "images/elflist.gif". Эти операторы загружают в память картинку, не отображая ее на странице. Так как мы собираемся перегружать картинки, как только пользователь проведет над ними указателем мыши, нам потребуется очень быстрый доступ к картинкам. Если мы будем ждать, пока нужная картинка будет загружена с сервера, пользователь сгенерирует событие раньше, чем будет выполнена функция, выполненная событием. Ниже приводится решение. 1. В разделе <HEAD> все картинки загружаются в память с использованием опе- 2. В разделе <HEAD> определяется одна или несколько функций, которые скопи- 3. В раздел <BODY> добавляется тег < IMG> с атрибутом NAME. 4. Если желательно, чтобы эффект работал в Netscape Navigator, необходимо за 5. Атрибуты onMouseOver и onMouseOia вставляются внутрь тега <А>, добав 3.2 Включите границы таблицы изменением атрибута BORDER тега <table> на 1. Путем 3.3 Измените имя elf тега <IMG> на любое произвольное и убедитесь, что скрипт стал рабо- 3.4 Измените функцию nothing() скрипта следующим образом: function nothing{){ alert(‘Привет! '); } Запустите документ в браузере и кликните на первой картинке. Зафиксируйте результат. 3.5 В созданной вами папке создайте еще один html-документ с произвольным содержанием, Например: Создан документ My.html. Изменяем HREF = “JavaScript:nothing();” на HREF = “ My.html”. Запустите документ и кликните на первой картинке. Результат зафиксируйте в отчете. 3.6 Измените стиль тегов <hl> и <td> следующим образом: <style> <!-- H1,TD { color: Red; font-family: Sans-serif; font-weight: bold; font-size: 28px; } --> </style> Зафиксируйте в отчете изменения в отображении документа в окне браузера. Содержание отчёта: 1. Титульный лист. 2. Цель работы. 3. Текст программы. 4. Результат программы. 5. Результаты вносимых изменений (пункты 3.2 - 3.6). 6. Вывод. Контрольные вопросы: 1. Для чего предназначен язык HTML? 2. Что необходимо, чтобы прочитать HTML - документ? 3. На какие категории условно разделены HTML - тэги? 4. В чём различие записи стартового тэга и завершающего тэга? 5. Какой тэг должен быть в документе самым первым? О чём он сообщает? 6. Чем обозначается тело документа? 7. Для чего нужен тэг преформатирования? 8. Чем задаётся форматирование положения рисунка? 9. Как описывается ссылка на другой документ? 10. В чём отличие относительной ссылки от именованной ссылки? 11. Какими символами обозначаются комментарии в языке JavaScript? 12. Вид записи функции в JavaScript. Обязательно ли указание скобок при выводе функ- 13. Каково различие между глобальными и локальными переменными вJavaScript? 14. Что такое литерал? Как задаются целочисленные значения? 15. Что такое строковый литерал? Вид записи. 16. Для чего используются булевы литералы? 17. Какими способами можно встроить сценарий JavaScript в HTML - страницу? 18. Какие способы вывода информации предоставляет язык JavaScript? 19. Какие методы используются для ввода информации? 20. Расскажите про операторы присваивания. 21. Расскажите про математические операторы. 22. Расскажите про операторы сравнения. 23. Расскажите про тернарный оператор. 24. Расскажите про операторы управления. 25. Расскажите про операторы цикла.
раторов var < object> = new Image и < object>.src= для каждой картинки.
руют картинки из памяти на страницу. Эти функции существенно уменьшают
код в шаге 5.
ключить тег <IMG> внутрь фиксирующих тегов <А>...</А>.
ленного на шаге 4, или (если не учитывать особенности Netscape Navigator)
внутрь тега <IMG>, определенного на шаге 3. С помощью этого кода будут за
пускаться на выполнение функции, определенные на шаге 2.
модификации исходного кода разместите картинки в разных ячейках таблицы, а затем в
разных строках. Откройте модифицированный документ в окне браузера и проверьте ра-
ботоспособность скрипта после введенных изменений. Результаты скопируйте в виде
изображений в буфер обмена клавишей PrintScreen на клавиатуре и приложите к отчету.
тать неверно.
укажите в нем обязательные теги. Сохраните документ под произвольным именем. Из-
мените атрибут HREF тега <А> на введенное вами имя.
ций?