Главная » Полезные статьи » Язык JavaScript » Основы 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)

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

Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

Похожие статьи