Основные операторы языка JavaScript

 

Операторы присваивания.
Оператор	Действие	Пример
=	Присваивает значение переменной	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> все картинки загружаются в память с использованием опе­-
раторов var < object> = new Image и < object>.src= для каждой картинки.

2. В разделе <HEAD> определяется одна или несколько функций, которые скопи­-
руют картинки из памяти на страницу. Эти функции существенно уменьшают
код в шаге 5.

3. В раздел <BODY> добавляется тег < IMG> с атрибутом NAME.

4. Если желательно, чтобы эффект работал в Netscape Navigator, необходимо за­
ключить тег <IMG> внутрь фиксирующих тегов <А>...</А>.

5. Атрибуты onMouseOver и onMouseOia вставляются внутрь тега <А>, добав­
ленного на шаге 4, или (если не учитывать особенности Netscape Navigator)
внутрь тега <IMG>, определенного на шаге 3. С помощью этого кода будут за­
пускаться на выполнение функции, определенные на шаге 2.

 

3.2 Включите границы таблицы изменением атрибута BORDER тега <table> на 1. Путем
модификации исходного кода разместите картинки в разных ячейках таблицы, а затем в
разных строках. Откройте модифицированный документ в окне браузера и проверьте ра-­
ботоспособность скрипта после введенных изменений. Результаты скопируйте в виде
изображений в буфер обмена клавишей PrintScreen на клавиатуре и приложите к отчету.

3.3 Измените имя elf тега <IMG> на любое произвольное и убедитесь, что скрипт стал рабо­-
тать неверно.

3.4 Измените функцию nothing() скрипта следующим образом:

function nothing{){

alert(‘Привет! ');

}

Запустите документ в браузере и кликните на первой картинке. Зафиксируйте результат.

3.5 В созданной вами папке создайте еще один html-документ с произвольным содержанием,
укажите в нем обязательные теги. Сохраните документ под произвольным именем. Из­-
мените атрибут HREF тега <А> на введенное вами имя.

 

 

Например:

Создан документ 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. Расскажите про операторы цикла.