Основы JavaScript - часть 2

Всплывающие окна (pop-up)

Различают три вида всплывающих окон. Попробуйте их в действии, нажимая на кнопки ниже:


              
 

Окно типа "Alert"

Синтаксис для такого окна очень прост:

alert("Ваш текст");

Пользователю нужно будет нажать ОК для продолжения.

Типичный случай использования - когда необходимо донести до пользователя какую-либо информацию. Это могут быть любые сообщения, в том числе и достаточно распространенные, вроде "Для корректного отображения всех элементов сайта необходим Flash-плагин и т.п.

Окно типа "Confirm"

Синтаксис для данного типа окон:

confirm("Ваш текст");

Для продолжения пользователю нужно нажать ОК или Отмена.

Типичный случай использования - попросить пользователя что-то подтвердить или принять.

Например, "Подтвердите, что вам как минимум 57 лет", или что-нибудь техническое, вроде "У вас установлен плагин Shockwave Flash?"

- Если пользователь кликает на ОК, сценарий возвращает значение true (истина).
- Если пользователь кликает на Отмена, то возвращается значение false (ложь).

if (confirm("Вы согласны?")) {alert("Вы согласились")}
else{alert ("Вы не согласились")};

Окно типа "Prompt"

Синтаксис данного типа окна следующий:

prompt("Ваш текст","Значение по умолчанию");

Пользователю для продолжения нужно кликнуть на ОК или Отмена после ввода текста.

Типичный пример использования - случаи, когда пользователю нужно ввести какое-либо значение в поле для того, чтобы загрузилась определенная страница.

Например, это может быть имя пользователя, которое сохранится в Cookie, либо ввод пароля или иного кода.

- Если пользователь нажимает ОК, сценарий возвращает то, что было введено пользователем.
- Если пользователь нажимает Отмена, то возвращается null.

Так как обычно есть необходимость в дальнейшем использовании текста, набранного пользователем, мы можем занести этот текст в переменную, как показано в примере ниже:

username=prompt("Пожалуйста, введите Ваше имя","Ваше имя");

Переменные

Переменные можно сравнить с небольшими коробочками с именами.

Если вам нужно хранить 5 пар обуви у вас, скорее всего, есть для этого пять коробок. На каждой коробке вы бы написали, что за пара в ней лежит.

- Коробки будут вашими переменными - местом хранения вещей.

- Названия коробок будут вашими именами переменных - те самые, которые вы используете ссылаясь на каждую из коробок.

- Сами же пары обуви будут содержимым переменной - тем, что хранится в коробке.

Переменная - это просто "кусочек" компьютерной памяти, где хранится определенная информация. К переменным нужно обращаться, используя уникальные имена, которые мы сами им и задаем.

Рассмотрим пример:

<html>
<head>
My Javascript Page
</head>
<body>

</body>
</html>

Данный пример выполнит вывод в документ слов Петр Петрович.

Заметьте, что если вы хотите сохранить текст в переменной, необходимо заключить его в "". Это делается для того, чтобы javascript мог отличить текст от переменной.

Рассмотрим пример ниже, чтобы понять важность этого правила:

<html>
<head>
My Javascript Page
</head>
<body>

</body>
</html>

Попытайтесь предсказать результат выполнения данного кода прежде чем читать дальше.

- В первой строке скрипта текст Мое имя сохраняется в переменную Henrik.

- Во второй строке переменная Henrik сохраняется в переменную myname.

- Наконец, в третьей строке переменная myname выводится в документ.

Результатом работы сценария будет вывод на экран слов Мое имя.

Присвоение значений переменным

Наиболее типичный способ присвоения переменной какого-либо значения - использование знака равенства.

Рассмотрим следующие примеры, чтобы увидеть различные способы задания значений переменным. Особое внимание обратите на использование скобок, позволяющих управлять очередностью обработки информации в сложных формулах.

ПримерРезультирующее значение
a=2;a=2
a=2; a++;a=3    (2+1)
a=2; a--;a=1    (2-1)
a=2; b=3; c=a+b;c=5    (2+3)
a=2; d=a+6;d=8    (2+6)
First="Henrik";First=Henrik
Last="Petersen";Last=Petersen
Full=First+" "+Last;Full=Henrik Petersen
a=2*7;a=14  (2*7)
b=20/5;b=4    (20/5)
c=(20/5)*2;c=8    (4*2)
d=20/(5*2);d=2    (20/10)

Арифметические операторы

В таблице выше показаны так называемые "арифметические операторы" a++ и a--.

В принципе, вполне реально обходиться и без них, так как такого же эффекта можно добиться, используя другие операторы.

Однако вы часто будете видеть их в скриптах и, возможно, сами станете настолько ленивы, что будете ими пользоваться - ведь написать a++; быстрее, чем a=a+1;.

ОператорОбъяснениеПример
++increment (инкремент)a=5;
a++;
a теперь равно 6
--decrement (декремент)a=5;
a--;
a теперь равно 4
%возвращает остаток от деления двух чиселa=8 % 3;
a теперь равно 2, так как при делении 8 на 3 в остатке будет 2

Сравнение переменных

Есть несколько способов сравнения переменных. Простейший из них - это сравнение на равенство, которое осуществляется с использованием двойного знака равенства:

if (a==b) {alert("a равно b")};

if (lastname=="Petersen") {alert("Интересная фамилия!!!")};

Если вы забудете использовать двойной знак равенства и будете использовать одинарный при сравнении переменных на равенство, вы не сравните переменные. Все что произойдет - это присовоение переменной слева от знака равенства значения переменной справа от знака равенства.

Пример подобной ошибки:

if (lastname="Petersen") {alert("Интересная фамилия!!!")};

Это очень часто встречающаяся ошибка, которая полностью нарушает работу скрипта.

В таблице ниже представлены различные операторы сравнения.

ОператорОбъяснениеПример
==равно4==5 (false)
5==5 (true)
5==4 (false)
!=не равно4!=5 (true)
5!=5 (false)
5!=4 (true)
<меньше4<5 (true)
5<5 (false)
5<4 (false)
>больше4>5 (false)
5>5 (false)
5>4 (true)
<=меньше или равно4<=5 (true)
5<=5 (true)
5<=4 (false)
>=больше или равно4>=5 (false)
5>=5 (true)
5>=4 (true)

Другие статьи по рубрике «Другие»

Основы JavaScript - часть 1

Добавить комментарии



[CODE] [/CODE]


Комментариев нет!