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

Основы JavaScript - часть 2 Во второй части по основам Javascript мы рассмотрим применение различного вида всплывающих окон.Кроме того, разберем понятие переменной, рассмотрим, как работают переменные, как присваивать им значения, как сравнивать между собой и некоторые другие моменты.

Всплывающие окна (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>
<title>My Javascript Page</title>
</head>
<body>

<script>
myname="Петр Петрович";
document.write(myname);
</script>

</body>
</html>

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

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

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

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

<script>
Henrik="Мое имя";
myname=Henrik;
document.write(myname);
</script>

</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)

По материалам www.echoecho.com
Перевод - Дмитрий Науменко

Читайте также:

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

Источник: codeharmony.ru

almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.

Вы можете почитать все статьи от almix'а.



Другие статьи по этой теме:

Комментарии (0)     Подпишитесь на RSS комментариев к этой статье.