Пример использования confirm. Java Script


Содержание

Системные диалоговые окна JavaScript

В этом уроке мы разберемся, как выводить диалоговые окна, позволяющие выводить короткие сообщения. Если вы пишете программу на JavaScript, то можете воспользоваться тремя стандартными методами для ввода и вывода данных: alert(), prompt() и confirm(). Каждое из этих диалоговых окон является синхронным и модальным, то есть выполнение кода приостанавливается на время показа такого окна и возобновляется после его закрытия.

Метод alert()

Метод alert() позволяет выводить диалоговое окно с заданным сообщением и кнопкой OK . Синтаксис соответствующего выражения имеет следующий вид:

Диалоговые окна оповещений обычно применяют, если нужно уведомить пользователя о чем-то, что он не контролирует, например об ошибке. В простейшем случае текст предупреждения, заключенный в двойные или одинарные кавычки, вводится внутри круглых скобок. Диалоговое окно, выведенное на экран методом alert() , можно убрать, щелкнув на кнопке OK . До тех пор пока вы не сделаете этого, переход к ранее открытым окнам невозможен. Методу alert() передается только одна строка — отображаемая. Чтобы отобразить многострочное сообщение, разделяйте строки символом \n :

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

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

На заметку: JavaScript-программисты часто вставляют вызов метода alert() в программный код с целью диагностики возникающих проблем.

Метод confirm()

Метод confirm() позволяет вывести диалоговое окно с сообщением и двумя кнопками — OK и Cancel (Отмена), благодаря чему пользователь может подтвердить или отменить некоторое действие. В отличие от метода alert() этот метод возвращает логическую величину, значение которой зависит от того, на какой из двух кнопок щелкнул пользователь. Чтобы можно было определить, какую кнопку выбрал пользователь, метод confirm() возвращает true, если был щелчок на кнопке OK , и false, если он щелкнул на кнопке Cancel (Отмена) или закрыл диалоговое окно щелчком на системной кнопке закрытия окна — X .

Синтаксис применения метода confirm() имеет следующий вид:

result — это логическое значение (true или false), указывающее, было ли выбрано OK или Cancel (Отмена).

В следующем примере метод confirm() выводит сообщение и ожидает, пока пользователь подтвердит или отменит некоторую операцию, щелкнув на одной из кнопок. Типичный код вызова этого диалогового окна выглядит так:

В этом примере оператор if («если») получает условие (confirm(«Вы уверены?»)). Он вычисляет его, и если результат – true (пользователь щелкает на кнопке OK ), то выполняет команду и выводит сообщение: «Я очень рад, что Вы уверены!».
Блок else («иначе») выполняется если пользователь выбирает кнопку Cancel . При этом выводится оповещение: «Жаль, что Вы не уверены. «.
Этот шаблонный код часто используется, когда пользователь пытается что-либо удалить либо пкинуть веб-страницу.

Метод prompt()

Метод prompt() выводит на экран диалоговое окно, которое запрашивает у пользователя информацию. Вместе с кнопками OK и Cancel (Отмена) оно содержит текстовое поле для ввода данных. В отличие отметодов alert() и confirm() данный метод принимает два параметра: сообщение и значение, которое должно появиться в текстовом поле ввода данных по умолчанию.

Синтаксис применения метода prompt имеет следующий вид:

  • result — строка, содержащая текст, введенный пользователем, или значение null .
  • сообщение — строка текста для отображения пользователю (обычно это вопрос). Этот параметр является необязательным и может быть опущен, если в окне подсказки ничего не отображается.
  • значение по умолчанию — строка, которая отображается по умолчанию в поле ввода, обычно второй аргумент оставляют пустым и записывают так — «».

Если пользователь щелкает на кнопке OK , метод prompt() возвращает значение, введенное в текстовом поле, а если выбирается кнопка Cancel (Отмена) или окно закрывается иным образом, то возвращается null . Вот пример:

Методы объекта Window — Метод alert, prompt и confirm в javascript

Урок №2 Методы alert, prompt и confirm

Количество просмотров : 1610

Вы знаете из предыдущего урока, что объект Window глобальный. Он содержит в себе другие объекты.

Но он как объект также имеет и свои методы. Поэтому переходим к изучению методов этого объекта. С одним из них Вы уже знакомы — это метод open. Давайте рассмотрим и другие.

Метод alert — Модальное окно

С методом alert объекта Window Вы уже, возможно, встречались в сети Интернет, так как он вызывает модальное окно , и Вы наверняка подобные окна видели, посещая различные Веб-сайты.

Давайте на примере посмотрим, что это такое.

Модальное окно служит для того, чтобы привлечь к себе внимание. И пока мы его не закроем, нажав кнопку ОК , мы не сможем получить доступ к странице.

Напомним , что если мы работаем с текущим окном, то, как мы говорили ранее, объект Window можно не указывать , а сразу указать метод alert . При этом модальное окно все также появится.

Метод prompt объекта Window — Поле для ввода

С методом prompt мы будем часто работать, поэтому здесь рассмотрим и его. Он похож на alert , но отличается тем, что содержит поле для ввода , благодаря которому мы имеем возможность попросить у пользователя ввести какую-либо информацию.

Посмотрим, как работает метод prompt объекта Window .

Ту информацию, которую пользователь занесет в поле для ввода, prompt возвращает . И мы можем ее как-то использовать. Для этого информацию нужно занести в произвольную переменную. И, например, вывести её при помощи метода alert .

Давайте посмотрим, как это работает.

Метод alert выводит возвращаемую от метода prompt информацию во вновь создаваемое модальное окно , но ее же можно вывести и в текущее окно . Смотрите пример.

Или же информацию, возвращаемую от метода prompt можно вывести в новое — «Дочернее» окно, создаваемое методом open объекта Window. Смотрите пример.

Думаю, теперь Вам понятно как работает метод prompt . Осталось сказать лишь о том, что он может содержать в себе 2 параметра .

Первый параметр — это фраза (вопрос), который видит пользователь при появлении модального окна.

Второй параметр (в примерах выше мы его не вносили) — это текст или иная информация, которая будет размещена по умолчанию в поле для ввода .

И снова смотрим пример.

Метод confirm объекта Window — ОК и Отмена

Метод confirm объекта Window тоже похож на alert . Он тоже вызывает модальное окно. Но оно помимо кнопки ОК содержит кнопку Отмена .

Метод confirm в зависимости от нажатой кнопки ОК или Отмена возвращает Истину или Ложь соответственно.

Возвращаемое значение от метода confirm мы можем занести в произвольную переменную. Затем составить условие и в зависимости от значения переменной получить тот или иной результат. Смотрим пример.

Итак, в этом уроке мы рассмотрели работу трех методов объекта Window — это alert , prompt и confirm . На данном этапе изучения языка программирования JavaScript этого достаточно. Конечно, у объекта Window есть и другие методы, но мы их будем рассматривать позже.

Далее выполним Домашнее задание.

Домашнее задание — методы объекта Window

Приступаем к выполнению домашнего задания по пройденному уроку: «Методы объекта Window — Метод alert, prompt и confirm в javascript» .

Домашнее задание №1

Ваша задача написать код, который бы спрашивал у пользователя, сколько ему лет . Вы должны проанализировать полученный ответ, и если человеку больше 20 лет, то вам нужно вывести на экран фразу «Вы уже взрослый человек!» , а если меньше 20 или равно 20 , то вывести «Вы еще молоды, у Вас все впереди!» .

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

Для решения этой задачи на нужно будет вспомнить тему условий в javascript. Если точнее, то нас будет интересовать Конструкция IF-ELSE.

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

Решение домашнего задания №1

Домашнее задание №2

Вам надо спросить сначала, сколько человеку лет , затем — какой сейчас год .

После этого нужно создать цикл и вывести на экран список, сколько человеку было лет 1 год назад, 2 года назад и т.д.

Например, человек ввел, что ему 30 лет, и сейчас 2010 год. Вам в итоге надо вывести на экран: В 2009 году Вам было 29 лет, В 2008 году Вам было 28 лет и т.д.

Для создания цикла можете использовать while или for , которые мы с вами прошли в предыдущих уроках.

Это домашнее задание будет иметь несколько вариантов решений:

В первом работает цикл for

Во втором цикл while

В третьем и четвертом — несколько улучшено решение задачи

Для наглядности в каждом варианте я вводил один и тот же возраст — 10 лет . И один и тот же год рождения — 2010 .

Кроме этого во всех вариантах я изменил выводимый на экран текст (он немного отличается от исходного).

Для решения этой задачи мы снова будем работать с методом prompt, то есть с окном, содержащим поле для ввода информации.

Из прошлых занятий вспомним цикл while и цикл for.

Решение домашнего задания №2 — Цикл for

В 2010 году Вы прожили — 10-ый год жизни
В 2009 году Вы прожили — 9-ый год жизни
В 2008 году Вы прожили — 8-ый год жизни
В 2007 году Вы прожили — 7-ый год жизни
В 2006 году Вы прожили — 6-ый год жизни
В 2005 году Вы прожили — 5-ый год жизни
В 2004 году Вы прожили — 4-ый год жизни
В 2003 году Вы прожили — 3-ый год жизни
В 2002 году Вы прожили — 2-ый год жизни
В 2001 году Вы прожили — 1-ый год жизни

В этом решении мы сначала создали переменные age и year , а затем открыли цикл for , в котором указали в качестве счетчика переменную age — так требует синтаксис цикла for (в круглых скобках нужно обязательно указывать счетчик).

Код можно оптимизировать , создав переменные (а заодно и счетчики) age и year внутри цикла for . Смотрите пример ниже.

Решение домашнего задания №2 — Цикл for — Оптимизация кода

В 2010 году Вы прожили — 10-ый год жизни
В 2009 году Вы прожили — 9-ый год жизни
В 2008 году Вы прожили — 8-ый год жизни
В 2007 году Вы прожили — 7-ый год жизни
В 2006 году Вы прожили — 6-ый год жизни
В 2005 году Вы прожили — 5-ый год жизни
В 2004 году Вы прожили — 4-ый год жизни
В 2003 году Вы прожили — 3-ый год жизни
В 2002 году Вы прожили — 2-ый год жизни
В 2001 году Вы прожили — 1-ый год жизни

Решение домашнего задания №2 — Цикл while

В 2010 году Вы прожили — 10-ый год жизни
В 2009 году Вы прожили — 9-ый год жизни
В 2008 году Вы прожили — 8-ый год жизни
В 2007 году Вы прожили — 7-ый год жизни
В 2006 году Вы прожили — 6-ый год жизни
В 2005 году Вы прожили — 5-ый год жизни
В 2004 году Вы прожили — 4-ый год жизни
В 2003 году Вы прожили — 3-ый год жизни
В 2002 году Вы прожили — 2-ый год жизни
В 2001 году Вы прожили — 1-ый год жизни

Илон Маск рекомендует:  Что такое код isiconic

Решение домашнего задания №2 — Цикл while — Выводим год рождения

Здесь мы немного улучшим решение задачи, введя год рождения. В предыдущих решениях, когда переменная age становилась равной 0 , цикл останавливался, так как по условию age > 0 . Да и не имело смысла писать о нулевом годе жизни.

Вместо этого в решении лучше вывести фразу о годе рождения. Для этого нужно не только изменить условие для цикла while , но и составить условие if-else внутри него. Смотрим пример.

В 2010 году Вы прожили — 10-ый год жизни
В 2009 году Вы прожили — 9-ый год жизни
В 2008 году Вы прожили — 8-ый год жизни
В 2007 году Вы прожили — 7-ый год жизни
В 2006 году Вы прожили — 6-ый год жизни
В 2005 году Вы прожили — 5-ый год жизни
В 2004 году Вы прожили — 4-ый год жизни
В 2003 году Вы прожили — 3-ый год жизни
В 2002 году Вы прожили — 2-ый год жизни
В 2001 году Вы прожили — 1-ый год жизни
В 2000 году Вы родились.

Решение домашнего задания №2 — Цикл while — Выводим год рождения и сообщение о текущем годе жизни.

Здесь я решил ещё немного улучшить решение. Как Вы видели в примерах выше, в каждом варианте я вводил один и тот же возраст — 10 лет. И один и тот же год рождения — 2010 .

При этом первое сообщение, которое Вы видели во всех примерах: «В 2010 году Вы прожили — 10-ый год жизни» — говорит о прошедшем времени, что не совсем корректно , так как речь идет о текущем годе жизни.

Поэтому я внес кое-какие поправки в программный код JavaScript , чтобы подкорректировать этот момент. Смотрите пример ниже и попробуйте разобраться в этом.

Сейчас 2010 год и в этом году Вы проживаете 10 год жизни!
В 2009 году Вы прожили — 9-ый год жизни
В 2008 году Вы прожили — 8-ый год жизни
В 2007 году Вы прожили — 7-ый год жизни
В 2006 году Вы прожили — 6-ый год жизни
В 2005 году Вы прожили — 5-ый год жизни
В 2004 году Вы прожили — 4-ый год жизни
В 2003 году Вы прожили — 3-ый год жизни
В 2002 году Вы прожили — 2-ый год жизни
В 2001 году Вы прожили — 1-ый год жизни
В 2000 году Вы родились.

Главная Изучаем JavaScript Методы alert, prompt и confirm Введение в Функции

Ваши комментарии к уроку:

Комментарий добавил(а) : Игорь
Дата: 2020-04-18

почему-то вначале выполняются действия с операторами prompt, alert, confirm, а уже только потом печатается текст, находящийся после и перед

лабы по информатике, егэ

лабораторные работы и задачи по программированию и информатике, егэ по информатике

JavaScript урок 2. Функции для работы с типами данных, методы ввода и вывода данных

JavaScript функции для работы с типами данных

Иногда в программе требуется преобразовать тип переменной. Рассмотрим основные функции, связанные с преобразованием типов:

преобразует указанную в параметре строку в целое число. Если есть второй параметр — система счисления — преобразование происходит по указанному основанию системы счисления (8, 10 или 16):

parseInt(«3.14») // результат = 3 parseInt(«-7.875») // результат = -7 parseInt(«435») // результат = 435 parseInt(«Вася») /* результат = NaN, то есть не является числом */ parseInt(«15» ,8) // результат = 13

преобразует указанную строку в число с плавающей разделительной точкой (десятичной):

parseFloat(«3.14») // результат = 3.14 parseFloat(«-7.875») // результат = -7.875 parseFloat («435») // результат = 435 parseFloat («Вася») /* результат = NaN, то есть не является числом */ parseFloat («17.5») // результат = 17.5

x = Number(x) // к числу x = String(x) // к строке x = Boolean(x) // к булеву типу

2. Компактные преобразования:

x = +x // к числу x = x + » // к строке x = !!x // к булеву типу

Функция javascript isNaN(значение)

служит для определения того, является ли значение выражения числом:

isNaN(123) /* результат false (то есть это — число) */ isNaN(«50 рублей») /* результат true (то есть это — не число) */

var a=8; var b=»pi»; var S=a*b; // S=NaN

В качестве значения переменной может быть undefined — не определено. Такое случается, когда переменная создана, но значение ей не присвоено:

var b; document.write(b); // b=undefined

Для того чтобы узнать текущий тип данных конкретной переменной в javascript используется функция typeof :

typeof 33 // возвращает строку «number», typeof «A String» // возвращает строку «string», typeof true // возвращает строку «boolean», typeof null // возвращает строку «object»

Блог Vaden Pro

В JavaScript существует три базовых операции, которые позволяют получать данные от пользователя, для дальнейшей их обработки в скриптах. Это alert, prompt и confirm. Для чего они применяются, как их использовать и прочие нюансы и будут рассмотрены далее в этой статье.

alert

Применяется для вывода на экран браузера модального окна (это означает, что пользователь ничего не может нажать на странице, пока не закроет это окно. В рассматриваемом примере, до тех пор, пока не кликнет «ОК» в окне).

После вывода сообщения, содержащегося в alert, выполнение скрипта приостанавливается и возобновляется после закрытия модального окна.

Для примера запустите следующий скрипт из одной строки:

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

prompt

Второй по распространенности после операции alert является prompt. Данная команда предоставляет пользователю больше возможностей для взаимодействия с модальным окном, делая доступными для нажатия две кнопки (OK и CANCEL) и поле для ввода информации.

Для того, чтобы продолжить работу с сайтом, юзеру необходимо или закрыть данное окно, кликнув на CANCEL (нажатие EST на клавиатуре также сработает) или ввести информацию в поле для ввода и нажать ОК.

В случае отмены ввода текста в поле (нажатие CANCEL) в скрипт будет возвращено специальное значение null. Подробнее о котором можно почитать тут.

В случае заполнения поля и нажатия ОК, в скрипт вернется информация, которую ввел пользователь.

Синтаксис данной команды несколько сложнее, чем предыдущей, поскольку позволяет задать текст обращения к пользователю и содежимое поля для ввода информации, которое будет выводиться по умолчанию: result = prompt ( title , default ) ; , где

  • title – сообщение, которое будет выведено пользователю в модальном окне. Аргумент обязательный для заполнения.
  • default – то, что выведется в поле для ввода текста по умолчанию. Также обязателен для заполнения, поскольку если его не задать, то это может привести к ошибкам в некоторых браузерах. Если же вы хотите оставить поле ввода информации пустым, то просто задайте prompt следующим образом:

Маленький пример использования prompt:

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

confirm

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

Для того и заточена – для взаимодействия предоставляет пользователю кнопки OK и CANCEL, которые возвращают скрипту булевы значения true и false соответственно.

По синтаксису не отличается от alert.

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

Способов получить информацию от пользователей проще, чем искользование команд alert, prompt, confirm просто не существует.

Описание методов alert, confirm и prompt в JavaScript

В этой статье мы изучим три интересных метода, а именно методы alert(), confirm() и prompt(). Они все предназначены для взаимодействия с пользователем.

Все эти три метода принадлежат объекту window(Окно браузера). И они могут вызываться таким образом: window.название_метода(); Но, JavaScript нам позволяет этот объект window не указать, а писать просто название метода.

метод alert()

Начнём мы с метода alert(). Данный метод, выводит указанное сообщение в окошко браузера пользователя. Это окошко отобразится поверх всей страницы, и пока пользователь не нажмёт на кнопку OK, оно не закроется.

Для демонстрации выведем какое-то сообщение с помощью метода alert()

Внутри метода мы можем указать любую строку, только без html тегов. Они здесь не обрабатываются, а выводятся как есть.

Если строка, которую хотим указать очень длинная, и мы хотим сделать переход на новую строку, то здесь html тег
не сработает. Здесь нужно использовать символ ‘\n’.

Данный метод используется часто для поиска ошибки в коде.

Процесс обработки кода идёт сверху вниз, поэтому для ловли ошибки, просто пишем метод alert() в предполагаемую область, где находится ошибка. И если alert() сработал, значит до строчки, где он написан, ошибок нет.

Дальше, нужно его перенести на одну строку или больше ниже. Сохраняем изменения, опять обновляем страницу в браузере, и смотрим, если alert() сработал, значит, ошибок до строчки, где он находится, нет, в противном случае, если он не сработал, ошибка находится в строку выше той, где он сейчас находится. Таким вот образом можно найти ошибку в коде.

метод confirm()

Этот метод используется для подтверждения ответа, на какой-то вопрос. Есть только два варианта ответа, да(OK) или нет(Cancel/Отмена). Если пользователь отвечает да, то метод возвращает истину(true), иначе он возвращает лож(false).

Для примера, выведем окошко с помощью метода confirm(), где спросим пользователя ‘Вы точно хотите покинуть страницу ?’. Если пользователь ответит да, то через метод alert() выведем такое сообщение ‘Пользователь хочет покинуть страницу’, иначе выведем другое сообщение ‘Пользователь НЕ хочет покинуть страницу’.

Таким вот образом работает метод confirm(). Он может использоваться в разных случаях. Например, перед тем как удалить что-то с сайта принято спросить пользователя, уверен ли он в свои действия. Или же перед тем как отправить форму, тоже можно спросить пользователя ‘Вы все заполнили правильно ?’, если он ответит да, то форма отправиться, иначе она не отправится.

Метод prompt()

И последний метод, которого мы изучим, это метод prompt(). Данный метод используется реже, чем остальные два метода. Он позволяет получить некую информацию от пользователя, которую он введёт в текстовое поле.

Как результат метод prompt() возвращает либо введённую строку, если пользователь нажал кнопку OK, либо null, если пользователь нажал на кнопку отмена.

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

Например, попросим пользователя ответить на вопрос ‘Как Вас зовут?’. Введённое пользователем имя, отобразим на экран с помощью метода alert().

Сохраняем и открываем страницу в браузере.

Разумеется, в текстовое поле из метода prompt() можно ввести любую информацию. Эта информация будет возвращена как строка, даже в случае чисел или других спецсимволов.

Для примера попросим пользователя ввести две числа, чтобы потом умножить их. Будет некий калькулятор для умножения чисел.

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

Ну и на этом все. Теперь Вы знаете ещё три метода: alert(), confirm() и prompt(). Которых Вы смело можете использовать на практике.

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

Понравилась статья?

Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.

Поделиться с друзьями:

Подписаться на новые статьи:

Поддержите пожалуйста мой проект!

Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту sergiu1607@gmail.com. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.

Автор статьи: Мунтян Сергей


Копирование материалов с сайта sozdatisite.ru ЗАПРЕЩЕНО.

Дата добавления: 2020-09-07 09:17:56

АйТи бубен

Инструменты пользователя

Инструменты сайта

Содержание

Ввод/вывод данных JavaScript

В JavaScript реализовано 3 метода, позволяющие выводить пользователю диалоговые окна: alert, confirm, prompt.

Особенности методов alert, confirm, prompt: Конкретное место, где выводится модальное окно – обычно это центр браузера, и внешний вид окна выбирает браузер. Разработчик не может на это влиять. Нельзя вывести окно в своем, особо красивом, дизайне. Но это самый простой способ вывести сообщение или получить информацию от посетителя. Поэтому их используют в тех случаях, когда простота важна, а всякие «красивости» особой роли не играют.

Диалоговое окно метод alert

Метод alert используется для вывода простейшего диалогового окна, содержащего текст сообщения и единственную кнопку «Ok». Формат вызова данной функции:

Диалоговое окно метод confirm

Функция confirm позволяет вывести пользователю диалоговое окно, содержащее текст сообщения и кнопки «Ok» и «Cancel». Используется в тех случаях, когда пользователь должен сделать выбор. Формат вызова данной функции:

Функция confirm возвращает логическое значение в зависимости от нажатой пользователем кнопки: «Ok» соответствует значению true, «Cancel» — значению false. Как правило, результат работы функции присваивают переменной, для дальнейшего анализа, как это показано в примере выше.

Диалоговое окно метод prompt

Функция prompt позволяет вывести пользователю диалоговое окно запроса на ввод данных. Используется в тех случаях, когда пользователь должен ввести строку текста. Формат вызова данной функции:

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

Однако, преобразование строки в число можно осуществить не во всех случаях. Поэтому, чтобы избавить себя от потенциальной ошибки, необходимо сначала проверить — можно ли выполнить такое преобразование. Для этих целей используется функция isNaN(строка). Данная функция возвращает истину, если строка не может быть преобразована в число, и ложь в противном случае.

30 сайтов-примеров отличного использования JavaScript Материал редакции

Ресурс Creative Bloq опубликовал материал, в котором его авторы поделились с читателями лучшими, на их взгляд, примерами использования JavaScript для создания сайтов. ЦП выбрал 30 самых интересных ресурсов.

С помощью JavaScript, утверждают авторы статьи, можно создавать запоминающиеся платформы, на которые пользователь захочет вернуться. Язык позволяет разрабатывать игры, сайты, API и многое другое.

1. Портфолио Майка Куса

Портфолио веб-дизайнера Майка Куса выполнено в «чистой и сдержанной манере», пишут редакторы Creative Bloq. В нём большие изображения сочетаются с простыми элементами пользовательского интерфейса.

«Я думаю о своих работах, как о бренде. Нет никакой необходимости добавлять в мой сайт лишние элементы дизайна», — говорит Кус.

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

2. Hello Monday

Сайт креативного агентства Hello Monday претерпел значительные изменения, замечают авторы статьи. Разработчиками компании была проделана огромная работа. Им удалось сделать интерфейс дружелюбным для пользователя.

Старый сайт агентства Hello Monday

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

Обновлённый сайт Hello Monday

«Мы пытались отойти от шаблонного представления о том, как должен выглядеть сайт креативного агентства», — рассказывает Кэти Хертел, руководитель проекта по редизайну веб-страницы Hello Monday. Авторы материала находят сайт очень привлекательным и отзывчивым, чему способствует организация проектов на главной странице: она автоматически дополняется новыми работами агентства при прокрутке вниз.

3. Multeor

Multeor — это многопользовательская онлайн-игра, написанная на JavaScript с использованием элемента canvas HTML5. Она разработана Арьеном де Врайзом и Филидором Вайзе, а спроектирована Артуром ван Хугом. Основная задача пользователя в игре — контролировать падение метеоритов, получая очки за оставленные им разрушения.

Игра использует Node.js-сервер для управления связью между настольными и мобильными устройствами с помощью WebSockets.

Вайзе акцентирует внимание на том, что при разработке Multeor не использовались уже существующие игровые библиотеки:

Мы писали всё сами — это было очень увлекательно, к тому же, мы узнали много нового. То, что мы не зависели от конкретных сборок и префабов, дало нам определённую свободу действий: не нужно было заниматься рендерингом существующей графики, обработкой коллизий и отдельно описывать систему, отвечающую за взрывы.

4. Crime Timeline

Crime Timelime — агрегатор, собирающий данные о преступности в Великобритании с помощью публичных API. Он позволяет пользователям узнать, как обстоят дела в их регионе.

«Мы организовали сайт таким образом, чтобы он показывал карту региона и места совершения преступлений — за месяц, выбранный пользователем на панели снизу», — говорит разработчик проекта Алекс Миллер.

Ресурс использует API Google Maps, для создания панели с месяцами применялись jQuery и jQRangeSlider. Когда пользователь взаимодействует с картой — например, щелкает мышкой в определенное место на ней, сайт обновляет изображение с помощью JavaScript. «Пузырьки», показывающие количество преступлений, были созданы с помощью CSS и анимированы с помощью jQuery.

5. Here is Today

На сайте Here is Today язык JavaScript использовался для создания анимации. Создатель ресурса, дизайнер Люк Твимэн, так объясняет свою идею: «Я хотел создать что-то, что дало бы каждому человеку ощущение масштаба времени. Here is Today помогает понять, насколько обширна история вселенной».

Твимэн отмечает, что он с самого начала решил отказаться от стандартных величин измерения — пикселей, и описал собственные, основываясь на размерах экрана. Это было сделано для того, чтобы сайт выглядел одинаково на всех устройствах.

Это второй проект на JavaScript, созданный дизайнером, и в нём он применил элементы, которые не использовал в предыдущем. Однако Твимэн находит в языке множество сходств с другими высокоуровневыми языками программирования, к тому же, по его словам, JavaScript имеет довольно подробную документацию, а в интернете (в том числе на тематических формах) разобрано большое количество примеров.

6. Tweetmap

Tweetmap изображает на страны на карте пропорционально количеству отправленных из них твитов. Разработчик сервиса Роб Хоукс перечисляет несколько технологий, использованных при его создании: TopoJSON, D3.js, Node.js, PhantomJS, и специальные алгоритмы построения смежных картограмм в режиме реального времени.

Мы выбрали Node.js, потому что у нас уже был опыт его использования, и потому что это простая, быстрая и гибкая платформа. Для анимации карты (в формате TopoJSON) мы используем D3 — фантастическую библиотеку для визуализации данных. В частности, мы широко применяем модуль geo, который позволяет делать сложные географические расчеты и преобразования.

Чтобы избежать проблем с представлением карт в браузере клиента, система генерирует карты на сервере с помощью D3, запускает и рендерит их с помощью движка PhantomJS, и только потом передаёт пользователю — это позволяет не создавать «дыр» при показе карт.

7. The Trip

The Trip — интерактивный фильм, созданный с помощью JavaScript и HTML5 (без использования Flash). Отто Наскарелла, создатель проекта, считает, что задача разработки подобного сервиса оказалась очень сложной:

Большинство трудностей, с которыми мы столкнулись, были связаны с тем, что HTML5 на момент написания сайта не имел средств для кросс-браузерной разработки. Тогда мы решили, что будем рекомендовать клиентам использовать Chrome.

Код сайта на JavaScript использует jQuery практически для всех задач. Разработчики также применяли TextBlur и TextDrop — для размытия и анимации текста.

8. Si Digital

Эта страница, написанная на JavaScript — новое портфолио и блог дизайнерского и маркетингового агентства Si Digital. Ведущий разработчик проекта Алекс Крук так объясняет анимацию на главной странице: «Жидкость, движущаяся по трубам, ведёт пользователей по нашему портфолио — она активирует анимацию изображений на каждом из этапов исследования сайта клиентом».

Для достижения подобного эффекта Крук применил метод jQuery.animate(). К тому же, добавляет он, нужно было правильно выбрать скорость заполнения жидкостью труб — ведь все читают с разной скоростью.

Интерактивный график на странице с описанием выполненных проектов и команды агентства, реализован с помощью jQuery. Временная шкала, по словам Крука, генерируется динамически — на основе информации из базы данных, с использованием технологии Ajax.

9. Сайт Жана Хальфстейна

Жан Хальфстейн — веб-дизайнер. В его портфолио авторов статьи больше всего привлекла главная страница — и анимация на ней. «Я действительно неплохо провёл время, пока возился с различными эффектами. Я очень люблю использовать новые технологии, так что решил сделать основную страницу своего сайта своеобразной песочницей — там я развлекаюсь с Three.js и элементом canvas HTML5», — рассказывает Хальфстейн.

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

10. Портфолио Ника Джонса

По словам Джонса, когда он разрабатывал сайт, у него было больше опыта в работе с Flash, чем с JavaScript, но ему захотелось попробовать что-нибудь новое — чтобы понять, на что он способен. «Я сразу понял, что синтаксис JavaScript почти такой же, как синтаксис ActionScript — поэтому очень скоро полностью освоился», — описывает процесс написания кода Джонс.

Джонс вспоминает, что Flash не давал ему доступа к работе с движениями мыши — это был новый опыт, который ему очень понравился. Разработчик хотел добиться такой отзывчивости сайта, которой он не мог достичь, используя переходы между классами в CSS. Джонс доволен достигнутым результатом:

Если вы собираетесь перейти с ActionScript на JavaScript, не медлите ни секунды. Делая свой сайт, я хотел понять, способен ли JavaScript на то, на что способен Flash. И я очень впечатлён.

11. MapsTD

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

Создатель проекта Дункан Барклай объясняет, как это работает: «Мы использовали API Google Maps, MooTools и JavaScript. Самая сложная часть — поиск маршрута, которым будут следовать враги пользователя. Как только игрок выбрал начальную точку, сервис осуществляет поиск долготы и широты, и вычисляет возможные пути c помощью Google».

По ходу игры на экране появляется всё больше противников. Барклай рассказывает, что разработчикам пришлось «бороться» c таймингом браузеров — дело в том, что большинство из них со временем снижает частоту проверки обновлений на странице, и нужно было сделать так, чтобы этого не происходило.

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

12. Glimpse Catalogs

Ресурс Glimpse разработан совместно командой Windows IE и проектом TheFind, и соединяет в себе систему поиска TheFind и приложение тех же разработчиков для онлайн-шопинга на Facebook. В рамках Glimpse программисты выпустили собственный фреймворк, основанный на Turn.js.

Целью команды с самого начала было сделать из Glimpse веб-приложение, а не обычный сайт. Разработчики использовали парадигму «модель-представление-поведение», которая разделяет на три отдельных компонента модель данных, пользовательский интерфейс и взаимодействие с клиентом. Сервис применяет шаблоны рендеринга моделей на стороне клиента Thrift или JSON — в зависимости от вычислительной мощности клиента.

Библиотека Turn.js также использовалась при разработке каталогов. С помощью CSS и JavaScript моделям, представленным на сайте, придаётся объём — за счет наложения теней на изображение.

13. Red Bull Music Academy Radio

RBMA Radio использует инструмент Modernizr, который позволяет вести кросс-браузерную разработку на HTML5 и CSS. Modernizr постоянно обновляется, так что создатели сайта могут улучшать код по мере представления новых возможностей.

Кроме того, при реализации сервиса применена библиотека Backbone.js — с помощью неё подгружаются плитки для создания эффекта бесконечной страницы.

14. Nouvelle Vague

Nouvelle Vague — сайт от французского дизайнерского агентства Ultranoir. Сервис позволяет «отслеживать» твиты по заданному хештегу. Он реализован с помощью JavaScript, WebGL и HTML5. HTML5, правда, отвечает только за тизер при открытии ресурса.

Один из разработчиков агентства рассказал, что на создание сайта ушло четыре месяца, а трудились над ним три человека. «Нам было очень интересно попробовать поработать с WebGL», — объясняет он.

Основная цель проекта заключалась в том, чтобы при помощи 3D-изображений воссоздать атмосферу из видеозаставки. Команда погрузилась в новые технологии HTML5, CSS3 и JavaScript, и считает, что эти языки могут стать стандартами для работы с 3D в будущем — из-за качественного рендеринга, богатых возможностей взаимодействия и реагирования.

15. The Convergence

The Convergence — браузерная игра, своей ретро-графикой напоминающая Super Mario Bros. Она демонстрирует потрясающие возможности JavaScript и HTML5 и доказывает, что HTML5 справляется со своими задачами ничуть не хуже, чем Flash.

Разработчики обещают в будущем добавить в игру аудиосопровождение и новые уровни, а также поддержку Mozilla Gamepad API.

16. Kindle Cloud Reader

Это веб-приложение превращает слова «купите один раз, читайте на всех устройствах» в реальность. Оно использует технологии HTML5, JavaScript API, библиотеки jQuery и jQuery UI и несколько плагинов jQuery, в том числе jScrollPane для прокрутки страниц и jQuery Templates. Кроме того, команда разработчиков воспользовалась WebSQL для поддержки офлайн-режима.

17. Les Enfants Terrible

Сайт, запущенный студией WeFail, считают авторы заметки, выглядит страшновато, но всё равно очень круто. Ресурс выполнен в довольно резком стиле. JavaScript используется для анимации при взаимодействии пользователя и системы. Чтобы прокручивание осуществлялось только для отдельных элементов интерфейса, командой был применён плагин jQuery ScrollTo. Для появления видео не во всплывающих окнах, а прямо на сайте использовалась библиотека Shadowbox.js.

Кроме того, в коде Les Enfants применяется плагин jQuery Cycle — он отвечает за отображение картинок и примеров работ агентства.

«Мы запустили Les Enfants, чтобы понять, какие возможности по производительности имеются у JavaScript. Оказалось, что в сочетании с СSS Transform можно добиться отличных результатов», — говорит разработчик Мартин Хью.

Не так давно, отмечает Хью, подобные вещи можно было создавать только при помощи Flash, но теперь у него есть жизнеспособная альтернатива — JavaScript.

18. Pinterest

Pinterest — яркий пример использования JavaScript для создания эффекта бесконечной страницы. Для создания сайта понадобились инструменты jQuery, jQuery UI и плагин PageLess.

Как считают авторы заметки, PageLess жизненно важен для Pinterest, потому что бесконечная прокрутка и прогрузка новых пинов гораздо эффективнее помогает удерживать внимание пользователя, чем социальные функции — например, комментирование записей.

19. Love Bomb Builder

Love Bobm Builder помогает пользователям выразить свою любовь или благодарность кому-либо. Это аккуратный и простой сайт, который позволяет создать и отправить послание-бомбу.

Ресурс иcпользует инструмент Modernizr для своевременного обновления кода на JavaScript и HTML5.

20. Michelberger Booze

Когда пользователь попадает на сайт, первым делом он видит так называемый «прелоадер» — может показаться, что он выполнен при помощи Flash, но это не так. За наполнение стакана пивом по мере загрузки отвечает HTML5 и JavaScript.

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

Нажимая на маски животных, клиент отправляется к другим сценам — все анимационные эффекты в которых исполнены при помощи jQuery.animate().

21. Trello

Trello — приложение для совместного или индивидуального планирования, в котором пользователи могут создавать списки выполненных и невыполненных задач и делиться прогрессом в режиме реального времени. Сайт разработан с использованием Node.js, MongoDB и Backbone.js.

Один из создателей Trello Даниэль ле Черминан поясняет, что применение только одного языка при написании сайта помогает новым членам команды быстрее влиться в процесс разработки.

Общение между пользователями реализовано с помощью Web Sockets — ле Черминан отмечает, что это достаточно новая технология, поэтому при её настройке возникали некоторые сложности.

22. BrowserQuest

Это игра в ретро-стиле, созданная студией Little Workshop, призвана продемонстрировать возможности HTML5, JavaScript и, в особенности, Web Sockets. Он может одновременно поддерживать взаимодействие между тысячами пользователей.

«Создание многопользовательской игры — отличный способ продемонстрировать, как такие технологии могут работать вместе. BrowserQuest опирается на серверы Node.js, каждый из которых может запустить несколько экземпляров игрового мира», — рассказывает разработчик студии Гийом Лекольне.

23. JS1k

JS1k — ежегодный конкурс, задача участников которого создать страницу на JavaScript на заданную тему (чаще всего — анимированные изображения). Её вес не должен превышать 1 КБ.

Тема этого года — «Here be dragons».

Работа-победитель конкурса в 2012 году. Автор — Филипп Бучанан, тема — «Любовь»

Работа победителя 2012 года изначально весила 8 КБ — но за день Филипп смог сократить её размер до требуемого 1 КБ, оптимизировав алгоритм генерации дерева:

Моей тактикой был «честный обман» компилятора. Например, использование конструкции «a ? b : c» вместо «if (a) b else c» экономит 8 байтов.

24. Timeline

Сервис помогает пользователям создавать таймлайны, и он очень прост в использовании. В интерактивную шкалу можно включать твиты, видео, фотографии и аудиозаписи. Свой таймлайн можно описать с помощью JSON или Google Docs — как удобнее самому клиенту.

25. Draw a Stickman

Основная идея сервиса заключается в том, чтобы предоставить пользователю возможность немного развлечься, принимая участие в интерактивной истории — помогая нарисованному человечку преодолевать различные препятствия. Зарисовки на сайте выполняются при помощи мыши.

Для создания игры использовались jQuery и библиотека для работы с векторной графикой Raphal.js. Реализация проекта с помощью Raphal помогла разработчикам избежать проблем с производительностью на большинстве устройств и во всех браузерах.

26. Panera Bread

Рекламный сайт сети пекарен Panera Bread был создан агентством Luxurios Animals. Технический директор студии Дэн Федермен говорит, что разработчики с самого начала решили реализовывать проект на CSS3 там, где это возможно, а для всего остального использовать JavaScript.

Анимация с помощью CSS3 обеспечивает плавность переходов на всех типах устройств. Кроме того, команда воспользовалась библиотекой Hammer.js для обработки прикосновений, Backbone.js для создания моделей данных, плагинами jQuery Transit и Isotope и HTML.

Peanut Gallery — проект, реализованный Google Creative Lab. Сайт позволяет пользователям добавлять озвучку в «немые» короткометражки с при помощи микрофона. Ресурс использует Google Speech API и JavaScript API — они помогают интегрировать распознавание речи в веб-приложения.

Валден Кламп, один из разработчиков проекта, выделяет на его взгляд интересную особенность Google Speech API — динамического распознавание речи. Например, если англоязычный пользователь начинает произносить «European Union», то сначала распознаётся слово «your» или «year» и лишь под конец оно преобразовывается в «European». Ещё одна полезная возможность — распознавание знаков препинания. Словосочетания «вопросительный знак», «восклицательный знак» и другие автоматически превращаются в соответствующие им пунктуационные знаки.

28. The Interactive Ear

«Интерактивное ухо» создано агентством Epiphany Solutions для своего клиента Amphilon, который специализируется на слуховых аппаратах и других решениях для слабослышащих людей. Ресурс ориентирован на детей возраста младшей и средней школы. Сайт состоит из трёх «витрин», демонстрирующих, как устроено человеческое ухо.

Создатель проекта Брайан Джеймс отмечает, что благодаря использованию JavaScript, HTML5 и CSS команда смогла достичь максимальной производительности даже в устаревших и неподдерживаемых браузерах. Анимации при исследовании уха с помощью лупы — это GIF-изображения.

29. Violin

Violin — инструмент для визуализации кода на JavaScript. Он показывает, как части приложения взаимодействуют друг с другом в режиме реального времени. Сам сайт выполнен на JavaScript с использованием библиотеки D3.js для построения графиков.

30. Сайт Филиппы Грегори

Сайт британской писательницы Филиппы Грегори, автора романа «Ещё одна из рода Болейн», выполнен по её заказу агентством Better. Основной задачей разработчиков являлась оптимизация площадки для всех видов устройств. Ресурс построен на базе FuelPHP CMS. JavaScript отвечает за пользовательский интерфейс, интерактивность и плавность переходов на сайте.

JavaScript Использование window.confirm ()

пример

Метод window.confirm() отображает модальное диалоговое окно с необязательным сообщением и двумя кнопками: «ОК» и «Отмена».

Теперь давайте рассмотрим следующий пример:

Здесь сообщение является необязательной строкой, отображаемой в диалоговом окне, и результатом является логическое значение, указывающее, было ли выбрано значение «ОК» или «Отмена» (true означает «ОК»).

window.confirm() обычно используется для запроса подтверждения пользователя перед тем, как совершить опасную операцию, например, удалить что-то в панели управления:

Результат этого кода будет выглядеть в браузере:

Если вам это нужно для последующего использования, вы можете просто сохранить результат взаимодействия пользователя с переменной:

Как работает функция confirm() в JavaScript

Я думал о том, как работают нативные функции в JavaScript, и я могу через alert() , и я решил, что он должен использовать createElement() или создать элемент и использовать innerHTML , но я не могу понять, полный код, он должен будет создать всплывающий элемент и сделать две кнопки, а затем вернуть true или false на основе одного щелчка.
jowes сказал:

обычно JS является асинхронным; почему это особенность? как и почему он создает элементы пользовательского интерфейса по-другому из моих собственных скриптов?

Вот код, который я выяснил:

Но я не понимаю, как он останавливает фон script, если доступен доступ, или как работает createElement() (но это вопрос в другое время)

confirm() -функция — это нативная функция, предоставляемая вам каждым браузером. Он не создается с помощью javascript. Однако, если вы хотите воспроизвести это поведение, вы пойдете так же, как это:

Это может быть реализация для самодельного окна оповещения.
Примечание, что собственное оповещение — это synchronous -функция. Это означает, что браузер останавливает JavasScript-движок до тех пор, пока окно предупреждения не будет закрыто. Вы не можете клонировать это поведение, но по крайней мере вы можете дать функции обратного вызова, который вызывается, когда нажата одна из кнопок. В этом случае обратный вызов просто регистрирует значение на консоли.

Надеюсь, я могу помочь здесь!

ОБНОВЛЕНИЕ к обновленному вопросу
В те времена, когда JavaScript был новым, confirm был действительным способом запросить у пользователя определенное значение. confirm , prompt и alert являются специальными функциями из этих дней, которые ведут себя совершенно иначе, чем обычные функции, поскольку они нарушают JavaScript-поток. Когда вы спрашиваете, почему: Ну, может быть, в эти дни было приятно иметь функцию. Обратите внимание, что в более ранних версиях alert выглядел как системное сообщение (в IE он все еще делает). По крайней мере, в Firefox вы теперь можете нормально взаимодействовать с вашим браузером, даже если вызывается предупреждение.
Вот почему он просто используется для отладки только сегодня (и даже здесь console.log — лучший выбор).

Я уверен, что сегодня (в FF) предупреждение выдается с помощью браузера-intern html и CSS.

Библиотека Интернет Индустрии I2R.ru

Малобюджетные сайты.

Продвижение веб-сайта.

Контент и авторское право.

JavaScript 1.5: учебный курс. JavaScript в действии

JavaScript 1.5 by exmple, Adrian Kingsley-Hughes, Kathie Kingsley-Hughes

Ознакомившись с этим материалом, вы сможете наконец создать свой первый сценарий. Вы начнете осваивать азы JavaScript на конкретных примерах. На ваше рассмотрение предлагается следующее:

  • основные понятия JavaScript, такие как синтаксис, разметка, комментарии и др.;
  • некоторые термины языка JavaScript и причины, по которым он относится к объектно-ориентированным языкам программирования;
  • создание и чтение сценария JavaScript;
  • использование JavaScript для вывода и ввода информации.

Ввод/вывод информации с помощью JavaScript

Исследование возможностей ввода и вывода информации — это не только замечательный повод научиться создавать сценарии JavaScript, обеспечивающие двустороннюю связь с пользователем, но и прекрасное начало вашего профессионального пути.
В вычислительной технике все основано на вводе и выводе данных. Без этого ничего не происходит. Текстовый процессор не выполняет никаких действий, пока пользователь не введет какую-либо информацию (символы, набираемые на клавиатуре), и лишь затем эта информация отображается на экране, распечатывается или сохраняется на жестком диске.
Теперь вы научитесь как вводить информацию с помощью JavaScript, так и выводить ее в виде разнообразных окон сообщений. (Если вам приходилось блуждать по сети дольше нескольких минут, то вам они уже встречались.)
На рис. 3.1, 3.3 и 3.5 показаны окна сообщений трех типов в браузере Internet Explorer, а на рис. 3.2, 3.4 и 3.6 — в браузере Netscape Navigator.
Все эти окна созданы на языке JavaScript:

  • Alert (Предупреждение) — служит для вывода информации;
  • Confirm (Подтверждение) — предназначено для вывода информации и позволяет пользователю сделать выбор в форме ответа Да/Нет на вопрос;
  • Prompt (Запрос) — служит для вывода информации и позволяет пользователю ввести ответ с клавиатуры.

ПримечаниеОкна сообщений в браузере Internet Explorer выглядят иначе, чем в браузере Netscape Navigator. Это происходит потому, что окна предупредительных сообщений, подтверждений и запросов генерируются в браузере. Они только вызываются с помощью JavaScript. Поэтому в разных браузерах они выглядят по-разному. Методы alert(), confirm() и prompt() в действительности являются методами объекта Window (окно) в браузере.

Объекты, методы и свойства

Вы, вероятно, слышали о том, что JavaScript — объектно-ориентированный язык. Но что это означает? Чтобы это понять, вам следует ознакомиться с тремя терминами:

Сначала рассмотрим их в общих чертах. Чем дальше вы продвинетесь в изучении JavaScript, тем чаще вам придется ими пользоваться, так что более близкое знакомство оставим на будущее.

Объекты

Говоря простым языком, объект (object) — это какой-либо предмет. Подобно тому, как в реальном мире все одушевленные и неодушевленные предметы являются объектами (машины, собаки и пр.), объектами считаются и составляющие компьютерного мира.
Что касается JavaScript, его объекты находятся внутри браузера. Это, в частности, окно браузера, формы и их части, например кнопки и текстовые окна. В JavaScript также имеется собственная группа встроенных объектов, к которым относятся массивы, данные и т.д. Сейчас вам не обязательно фиксировать на этом внимание, поскольку все эти объекты будут рассмотрены позже. Пока вы должны усвоить лишь необходимые определения.
Именно благодаря наличию объектов язык JavaScript считается объектно-ориентированным. Язык организован вокруг объектов, а не действий, или, иначе говоря, ориентирован на данные, а не на логику. При объектно-ориентированном программировании первоочередное внимание уделяется объектам, с которыми производятся некоторые манипуляции, а не логическим правилам, необходимым для таких манипуляций. Преимуществом такого подхода является не только облегчение программирования (или написания сценария), но и в то, что каждое действие можно выполнить разными способами.

Методы

Метод (method) — это действия, которые может выполнять объект. В реальном мире у объектов тоже имеются какие-либо методы. Машины ездят, собаки лают, доллар покупается и т.д. В нашем случае alert() является методом объекта Window, то есть объект Window может выдавать пользователю какое-либо предупреждение в окне сообщений. Примерами других методов являются открытие и закрытие окон, нажатие кнопок. Здесь речь идет о трех методах: open(), close() и click(). Обратите внимание на круглые скобки. Они означают, что методы, в отличие от свойств, используются.

Свойства

У всех объектов имеются свойства (properties). Если вы и далее будете следовать аналогии с объектами реального мира, то обнаружите, что все предметы обладают какими-то свойствами: у машин есть колеса, а у собаки — шерсть. Что касается JavaScript, то у такого объекта, как браузер, имеется название и номер версии.

Рекомендация Все будет понятнее, если объекты ассоциировать с вещами, а методы — с действиями.

Использование метода alert()

Пользоваться методом alert() проще всего. Он применяется для вывода на экран текстовой информации в краткой форме. После прочтения сообщения пользователь щелкает по кнопке OK и окно исчезает.
Прежде всего, откройте шаблон HTML-страницы в текстовом редакторе и сохраните его под новым именем в любой удобной для вас папке.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL