Основы 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
Перевод - Дмитрий Науменко
Читайте также:
almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.
Вы можете почитать все статьи от almix'а.
- 0 Yii: Bootstrap tabs, делаем активной вкладку на которую выполняется переход по ссылке (20.03.2014)
- 0 CodeIgniter: Всплывающая форма обратной связи на Ajax в Bootstrap Modal и проверкой Captcha (18.02.2014)
- 0 Opencart: Модуль Filter Product OpenCart_v1.5.x: Как скрывать недоступные опции в фильтре (23.10.2013)
- 0 WordPress: Добавить ссылку "Сохранить фото" для галереи на NextGen с эффектом Lightbox (12.04.2013)
- Выдвигающаяся из значка форма поиска на сайте (27.11.2017)
- Как убрать placeholder при клике по input (04.11.2017)
- Свой дизайн кнопок социальных сетей для сайта. Кнопки "Поделиться" (19.06.2017)
- Загрузка файлов (картинок) по ajax через форму для Opencart (04.09.2016)
- Замена текста при наведении на него мышью. События onmouseover и onmouseout (25.03.2016)
- Прилипание блока к верху сайта при его прокручивании (17.02.2016)
- Разделитель тысяч в эффекте наматываемого счётчика jquery countTo (05.04.2015)
- Сделать слайдер на Owl Carousel c текстом справа (03.02.2015)
- Скролл-эффекты CSS3 и JQuery при прокрутке страницы (13.01.2015)
- Модальное окно Bootstrap 3 с формой, отправляющей email по Ajax (JQuery/PHP/HTML5/JqBootstrapValidation) (20.08.2015)
- Несколько функций в body onload (08.03.2013)
- Как в iframe показывать только определённую область страницы (04.03.2013)
- jQuery Tooltips от Jörn Zaefferer. Всплывающие подсказки с помощью jQuery (08.12.2012)
- Team Sense: Многопользовательский календарь, заменяем радиокнопки на чекбоксы в выборе преподавателей. Массивы в Javascript. (06.12.2012)
- Team Sense: В календарь-расписание уроков добавлено разделение по преподавателям, которым присвоены свои цвета. (04.12.2012)
- CodeIgniter не передаёт $this->uri->segment(3) в функцию контроллера (передача переменной PHP->JavaScript->PHP) (28.11.2012)
- Случаи возникновения ошибки в IE: "Предполагается наличие идентификатора, строки или числа" (Expected identifier, string...) (23.11.2012)
- Воюем с форматом даты в JavaScript. Приведение формата даты в поле input в календаре системы TeamSense к более красивому виду. (18.11.2012)
- Хороший тон: Если у пользователя отключен Javascript в браузере или устаревшая версия браузера (09.08.2012)
- Русификация FullCalendar (13.01.2012)
- Yii: Красивенький и чистенький JavaScript плавно прокручивает страницу до якоря и делает лёгкий откат (22.04.2012)
RSS комментариев к этой статье.
