rassen

7 лет назад

Стать программистом. Часть 23. Основы JavaScript для абсолютных новичков!

Доброго времени суток, друзья!

В нашем прошлом уроке мы с Вами начали знакомится с обширной темой Объектов в JavaScript'e. Мы разобрались что такое объект, какую структуру он имеет, узнали что называется свойствами объекта, а что носит название метод объекта. Рассмотрели на практике способа извлечения данных из объекта, в том числе, когда в свойствах объекта находятся сложносоставные переменные, такие как Array (Массив) и сам Object (Объект). Надеюсь, что возникшие вопросы по этой теме (если таковые имели место быть) вы изложите в комментариях, а я в свою очередь постараюсь доходчиво на них ответить.

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

Давайте начнем.

Урок 23. Встроенные функции и объекты.

Тема, которую мы сегодня начиняем является достаточно специфичной. В чем заключается эта специфика? Дело в том, что она по сути не имеет логического окончания. При всем желании мы не сможем рассмотреть все аспекты этой темы в рамках нашего курса Основы JavaScript для абсолютных новичков. Встроенных функций и объектов в JavaScript'e существует достаточно большое количество и если мы попытаемся рассматривать каждые из них в отдельности, то нам придется создать огромное количество уроков и весь курс растянется на неопределенное время.

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

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

Хотите стать хорошим программистом? Изучайте синтаксис и как можно больше технических возможностей своего языка программирования.

Вот в рамках этой цитаты мы сегодня и будем работать. Итак, в наших предыдущих уроках мы уже коснулись тем функций и объектов. Однако обратите внимание, во всех примерах из наших предыдущих уроков мы сами создавали функции и сами создавали объекты. Но внутри самого JavaScript'a у нас существует определённый набор уже созданных функций и объектов, которые мы можем использовать в своем коде.

Давайте рассмотрим несколько встроенных функций для наглядности.

Встроенные Функции.

В своих примерах для вывода сообщений в браузере мы уже использовали одну встроенную функцию - alert(...);. Эта функция выводит в браузере окно сообщения и текст сообщения берет из аргумента, который был ее передан. Пример:

/* Встроенные функции */
alert('я встроенная функция');

Результат работы этого кода нам известен, мы не будем его показывать. Теперь давайте допустим, что у нас возникает такая ситуация, при которой мы не просто должны вывести сообщение в браузере, а задать нашему пользователю вопрос с помощью такого сообщения и при этом узнать был ли ответ пользователя положительным или он был отрицательным. Для того чтобы реализовать такую ситуацию в коде у нас есть теоретически два пути. Например, реализовать такую функциональность самостоятельно (Придумать алгоритм, написать свои функции для показа сообщения, для приема ответа, для обработки отрицательного или положительного ответа). А можем вспомнить что в JavaScript'e есть встроенные функции, и предположить, что возможно авторы самого языка уже подумали про то, что такая ситуация может случится и написали за нас такую функцию. И окажется что это действительно так. Для такой ситуации в JavaScript'e есть встроенная функция с названием confirm.

Функция confirm принимает один аргумент, как правило это строка или переменная строкового типа, которая используется для обозначения вопроса для пользователя? Сама функция confirm возвращает на место своего вызова результат булевского типа. То есть true в случае положительного ответа и false в случае отрицательного ответа.

Пример:

/* Встроенные функции */

var a = confirm('а я тоже встроенная функция?');

if(a) {
    alert('положительный ответ');
} else {
    alert('отрицательный ответ');
}

В примере выше мы создали переменную a в значение которой вернется результат работы функции confirm c параметром "а я тоже встроенная функция?". В этом окне в отличии от окна, генерируемого функцией alert пользователю предоставляется две кнопки: ok и cancel. Cсоответственно когда пользователь нажмет на кнопку ok то функция confirm вернет значение true если будет нажата кнопка cancel - вернется false. Ну а на строках кода №6 - №10 мы используем известный нам условный оператор для обработки ответа пользователя. В случае если в переменную a будет записано значение true у нас выведется еще одно сообщение с текстом "положительный ответ" в противном случае текст будет иметь вид "отрицательный ответ". Проверим:

Все работает так, как и ожидалось.

Вот примерно такая логика касательно встроенных функций должна постоянно присутствовать в Вашем уме при написании какого-либо кода. То есть еще раз вы сталкиваетесь с ситуацией, которую требуется реализовать. Прежде чем писать свой код, Вы должны задать вопрос - а может в JavaScript'e уже есть встроенные функции для реализации? Потому что вполне возможно, что-таки да, они есть, и тот факт, что Вы можете пока не знать об их существовании, не должен становится у Вас на пути.

Приведем другой пример с использованием еще одной встроенной функции. Допустим походу исполнения вашего кода Вам требуется не просто задать пользователю вопрос и сделать так чтобы он на него ответил, а Вам надо чтобы пользователь этот ответ ввел вручную с клавиатуры. Что Вы первым делом сделаете для реализации такой функциональности? Правильно. Сначала Вы проверите в документации нет ли встроенной функции для это реализации. И окажется, что есть. Называется такая функция prompt.

Функция prompt принимает один аргумент, который также, как и в функции confirm обычно является либо строкой, либо переменной строкового типа. Как правило это вопрос, на который требует ответ пользователя. Однако в отличие от окна генерируемого функцией confirm где у нас располагается текст и две кнопки для положительного и отрицательного ответа. В окне, генерируемом функцией prompt также появляется поле, куда мы можем вписать текст нашего ответа.

Пример:

/* Встроенные функции */

var response = prompt('а я тоже встроенная функция?');

alert(response);

Мы создали переменную response куда будет присвоено значение, возвращаемое функцией prompt. А возвращает эта функция все то, что пользователь ввел в поле для ответа в случае если была нажата кнопка ок и пустоту (Null) если была нажата кнопка cancel. В текущем примере мы не стали использовать условный оператор для обработки ответа, а просто выводим сообщение с этим ответом (каким бы он ни был) на строке №6. Проверим

Как видим, всё правильно. В первом случае мы ввели в поле для ответа слово "нет" и сообщение с этим словом было продублировано функцией alert(response);. Во втором случае, так как мы нажали кнопку cancel в ответ нам была возвращена пустота, то есть значение null.

Все три всторенных функции: alert, confirm и prompt относятся к группе встроенных функций для работы с диалоговыми окнами.

Следующую группу всторенных функций, которые мы рассмотрим для примера будут функции для работы с временными интервалами. Бывают такие ситуации, когда Вам требуется чтобы какая часть кода отработала не сразу при исполнении основного кода, а через минуту, две или любой другой временной промежуток. Например, пользователь зашел на Ваш сайт, и вы хотите, чтобы реклама ему показалась не сразу, а скажем через 7 секунд. Снова, Вам не требуется придумывать какую-то свою функцию для реализации такого поведения. В нашем распоряжении есть встроенная функция как раз для этого и называется она setTimeout.

Функция setTimeout принимает два аргумента. Первый аргумент должен быть функцией, в теле которой как раз и будет расположена та часть, когда, которая должна будет исполниться через время. А вот вторым параметром будет указываться само время, через которое будет исполнена функция, указанная в первом параметре. Пример:

/* Встроенные функции */

var a = function() {
    alert('РЕКЛАМА');
}

setTimeout(a, 7000);

Первым делом мы создали Анонимную (вспоминаем предыдущие уроки) функцию и присвоили ее переменной a. Ну а дальше мы вызвали встроенную фнукцию setTimeout() указав ей первым параметром нашу функцию в переменно a а вторым параметром - временной интервал, через который данная функция a будет выполнена. Тут надо обратить внимание на два момента:

Обратите внимание что первым аргументом мы передаем именно функцию a, а не ее вызов. Нам это не требуется. Именно setTimeout и вызовет на исполнение нашу функцию a.
Обратите внимание что в описании мы говорили о семи секундах. А вторым аргументом мы почему-то передали не 7 а 7000. Дело в том, что время в JavaScript'e передается в миллисекундах. в 1 секунде располагется 1000 миллисекунд. То есть 7 секунд реального времени будут равны 7000 миллисекунд. Таким образом наша функция a, которая при исполнении должна выдать в браузере сообщение с текстом "РЕКЛАМА", должно будет появится на экране через 7 секунд. Давайте проверим.

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

/* Встроенные функции */
function a () {
    alert('РЕКЛАМА');
}
setTimeout(a, 7000);

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

/* Встроенные функции */
setTimeout(function() {
    alert('РЕКЛАМА');
}, 7000);

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

Функция setInterval() во многом схожа со своим собратом setTimeout(). Даже аргументы, которые принимает setInterval совпадают с аргументами которые мы используем в setTimeout. Разница заключается лишь в одном - в периодичности. setTimeout исполнит функцию которую ей передали в первый аргумент через время указанное во втором аргументе только один раз. А вот setInterval будет снова и снова вызывать к исполнению функцию, указанную в первом аргументе, через промежуток времени, которые был ей передан вторым аргументом. Например, нам надо, чтобы реклама для пользователя появлялась не через 7 секунд, а каждые 2 секунды. Давайте реализуем такое поведение используя setInterval:

/* Встроенные функции */
setInterval(function() {
    alert('РЕКЛАМА');
},  2000);

Этот пример кода абсолютно идентичен примеру кода с функцией setTiemout единственная разница естественно в используемой функции и во втором аргументе. У нас это 2000 миллисекунд, то есть 2 секунды. То есть каждые две секунды у нас на экране должно появляться сообщение с текстом "РЕКЛАМА". Давайте проверим:

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

setInterval и clearInterval это пара. Первая функция начинает бесконечное повторение какого-то кода, вторая функция позволяет это повторение прекратить. Пример:

/* Встроенные функции */
var interval = setInterval(function() {
    alert('РЕКЛАМА');
    clearInterval(interval);
}, 2000);

В этом примере мы создали переменную interval и присвоили ей результат выполнения функции setInterval. Результатом в данном случае будет ссылка (метка) конкретно на это повторение кода. И сразу же после первого вызова кода alert('РЕКЛАМА'); мы прекращаем периодической повторение этого вызова использованием встроенной функции clearInterval(interval); параметром для нее послужила наша переменная interval. Таким образом, не смотря на то что мы используем функцию для периодического повторения кода, он будет исполнен только 1 раз, после чего сразу же прекращен. Проверим:

Как мы можем видеть, код действительно выполнился только 1 раз и после этого не повторился.

А на сегодня все.

Ссылки на предыдущие уроки:

var lessons = {
Урок_1 : "Урок 1",
Урок_2 : "Урок 2",
Урок_3 : "Урок 3",
Урок_4 : "Урок 4",
Урок_5 : "Урок 5",
Урок_6 : "Урок 6",
Урок_7 : "Урок 7",
Урок_8 : "Урок 8",
Урок_9 : "Урок 9",
Урок_10 : "Урок 10",
Урок_11 : "Урок 11",
Урок_12 : "Урок 12",
Урок_13 : "Урок 13",
Урок_14 : "Урок 14",
Урок_15 : "Урок 15",
Урок_16 : "Урок 16",
Урок_17 : "Урок 17",
Урок_18 : "Урок 18",
Урок_19 : "Урок 19",
Урок_20 : "Урок 20",
Урок_21 : "Урок 21",
Урок_22 : "Урок 22"
}