Reg.ru: домены и хостинг
Крупнейший регистратор и хостинг-провайдер в России.
Более 2 миллионов доменных имен на обслуживании.
Продвижение, почта для домена, решения для бизнеса.
Более 700 тыс. клиентов по всему миру уже сделали свой выбор.
Бесплатный Курс "Практика HTML5 и CSS3"
Освойте бесплатно пошаговый видеокурс
по основам адаптивной верстки
на HTML5 и CSS3 с полного нуля.
Фреймворк Bootstrap: быстрая адаптивная вёрстка
Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.
Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.
Верстайте на заказ и получайте деньги.
Бесплатный курс "Сайт на WordPress"
Хотите освоить CMS WordPress?
Получите уроки по дизайну и верстке сайта на WordPress.
Научитесь работать с темами и нарезать макет.
Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!
*Наведите курсор мыши для приостановки прокрутки.
Основы 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> <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
Перевод - Дмитрий Науменко
P.S. Присмотритесь к премиум-урокам по различным аспектам сайтостроения, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить JavaScript и PHP:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
Смотрите также:
