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


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

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

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

Давайте начинать.

Урок 21. Функции, Часть IV. Аргументы.

Для нашего курса (курса для новичков) условно, сущности, которые мы можем предавать в аргументы функции можно поделить на группы:

  1. Переменные
  2. Операции взаимодействия между переменными
  3. Вызов Функции и сами функции.

Давайте разберем все группы подробнее.

Переменные.

Эта группа одна из самых простых для понимания. Здесь все предельно ясно - любые переменные, в том числе и сложносоставные, допустимые в JavaScript'e могут быть переданы функции в роли аргумента. Пример:

var  a = 'привет, голос!'; // String
var  b = 22; // Number
var  c = false; // Boolean
var  d = undefined; // Undefined
var  e = null; // Null
var  f = [1, 2, 3, 4]; // Array(Object)

function plusMessage(arg_1, arg_2) {
    alert(arg_1 + arg_2);
}

plusMessage(a, b);
plusMessage(a, c);
plusMessage(a, d);
plusMessage(a, e);
plusMessage(a, f);

В начале этого примера мы создали переменные со всеми известными нам с Вами на текущий момент типами. Простая функция plusMessage принимает два аргумента и старается произвести операцию сложения между ними. Обратите внимание на вызовы этой функции на строчках №12-№16. Первым аргументом в этих вызовах всегда стоит переменная а c типом String и значением "привет, голос!". Другими словами, результатом которые мы будем видеть в сообщениях будет результат сложения строки с переменной другого типа. Как именно формируется такой результат мы рассматривали с Вами одном из прошлых уроков. Но сейчас нам важен не результат, как таковой, а то что мы можем передать в аргументы функции абсолютно любую переменную, с абсолютно любым типом и это допустимо. Результат выполнения:

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

Операции взаимодействия между переменными.

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

Арифметические операции (сложение (a + b), вычитание (a - b), умножение (a * b) и т.д.)

var  a = 12; // Number
var  b = 22; // Number

function message(text) {
    alert(text);
}

message(a+b);

Обратите внимание, функция message ожидает принять один аргумент. Но при вызове мы ей передаем арифметическую операцию message(a+b);. В это ситуации сначала будет выполнена операция сложения, а уже результат этой операции функция message возьмет как аргумент и выведит с ним сообщение:

Операции присваивания (присваивание со сложением (a += 1), присваивание с вычитанием (a -= 1), инкремент (a++) и т.д.)

var  a = 12; // Number

function message(text) {
    alert(text);
}

message(a+=1);

В этом примере мы в вызове функции message(a+=1); как аргумент передали операцию присваивания со сложением. Логика работы будет такой же, как и в предыдущем примере. Сначала будет произведена операции присваивания, а уже потом, будет выведено сообщение с результатом:

При этом есть важный момент, так как мы использовали операцию присваивания (не важно, что в виде аргумента) то значение самой переменой a после вызова message уже будет 13. То есть оно отработало не только для функции, но и для переменной.

Операции сравнения (больше (a > b), меньше (a < b), неравно (a и т.д.)

var a  // Number
var b  // Number    

function message(text) {
    alert(text);
}

message(a < b);

Здесь в роли аргумента выступает операция сравнения. Так же как и в предыдущих примерах сначала это операция приведется к результату. В нашем слуае это false так как 12 не может быть меньше, чем 11. И вот уже значение false выступит в качестве окончательного аргумента для самой функции:

Логические операции (логическое "И (AND)" (a && b), логическое "ИЛИ (OR)" (a || b) и т.д.)

var a  // Number
var b  // Number    

function message(text) {
    alert(text);
}

message(a && b);

И наконец, в этом примере мы видим логическую операцию "И (AND)" вместо аргумента. Из прошлого урока мы знаем, что результатом работы a && b -> 12 && 11 будет 11. Именно это значение и будет воспринято функцией как окончательный аргумент. Проверим:

Вызов Функции и сами функции.

Вызов функции может выступать аргументом только случае использования оператора return в теле такой функции. В прошлом уроке мы рассмотрели несколько таких примеров. Приведем один из них:

var a = 12; // Number
var b = 11; // Number

function sum (arg_1, arg_2) {
    return arg_1 + arg_2;
}   

function message(text) {
    alert(text);
}

message(sum(a, b));

В данном примере в роли аргумента для функции message выступает вызов функции sum. Сама функция sum использует оператор return. Это значит, что на место вызова функции sum "вернется" результат операции arg_1 + arg_2, расположенной в её теле. То есть по сути, запись вида message(sum(a, b)); можно интерпретировать как message(sum(12, 11)); и окончательно - как message(23);. Соответственно результат будет:

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

var a = 12; // Number
var b = 11; // Number

function sum (arg_1, arg_2) {
    return arg_1 + arg_2;
}   

function message(arg_1, arg_2, function_1) {

    alert(function_1(arg_1, arg_2));
}

message(a, b, sum);

Давайте разбираться. Функция sum осталась без изменений. Основное преобразование пережила фнукция message. Обратите внимание, теперь она принимает ТРИ параметра. При этом последний я назвал _function1 для того чтобы логически подчеркнуть, что на его место будет ожидаться именно функция (подчеркиваю: не вызов функции, а сама функция). Смотрим на вызов message(a, b, sum); на строке №13. Двумя первыми параметрами мы передали цифры, а третьим параметром - функцию sum. То есть запись может интерпретироваться как message(12, 11, sum);. После этого вызова в работу вступает тело функции message alert(function_1(arg_1, arg_2)); и если мы в эту запись подставим значения из вызова то получим alert(sum(12, 11));. Ну а как отработает эта запись мы уже знаем - на место вызова sum(12, 11) вернется 23, так как sum использует оператор return.

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

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

(function () {
Урок 1, Урок 2, Урок 3, Урок 4, Урок 5, Урок 6, Урок 7, Урок 8, Урок 9, Урок 10, Урок 11, Урок 12, Урок 13, Урок 14, Урок 15, Урок 16, Урок 17, Урок 18, Урок 19, Урок 20 })();


Comments 5


Привет!

Этот пост был выбран Академией Голоса и попал в список программы поддержки качественных образовательных постов.
Ссылка на твой пост будет опубликована в отчете Академии.

Спасибо за полезный контент (ノ◕ヮ◕)ノ*:・゚✧

21.02.2017 12:08
0

Добрый день, rassen!
Такой, честно говоря, возможно, неожиданный вопрос: а что в конце?
То есть, есть намерение проштудировать все ваши уроки - они короткие, доходчивые и не требуют много времени. Я не программист и не собираюсь им стать. Это скорее сейчас для меня такое хобби - познать нечто новое, на этот раз Javascipt :-)
Но просто хотелось бы видеть цель. Это как иногда заглядываешь на последнюю страницу рассказа, чтобы знать, что в конце.
Что мы будем иметь на выходе?

21.02.2017 12:10
0

Добрый день.

Что мы будем иметь на выходе?

Если Ваш вопрос касается знаний, то ответ очевиден, после курса Вы сможете на уровне младшего разработчика оперировать связкой JavaScript Html и Css, то есть освоите базовые принципы построения WEB-сайтов и WEB-приложений.

Если же Ваш вопрос касательно того, во что непосредственно выльются приобретенные Вами знания в конце курса. То мы с Вами сделаем некое подобие Тамогочи, с примитивным эмулятором искусственного интеллекта, снова-таки используя связку HTML, CSS и JavaScript. Такой проект научит целевому программированию, покажет основы в архитектурном построении приложения, покажет явную связь между кодом и визуальным представлением и даст некий наглядный результат, как итог Вашим знаниям.

21.02.2017 12:36
0

Отлично. Нечто подобное я и хотел от Вас услышать.
Тогда поехали дальше :-)

21.02.2017 12:59
0

Какова приблизительная продолжительность курса?

21.02.2017 14:32
0

А вот на этот вопрос я пока не могу ответить точно. Дело в том, что я знаю только какие темы нам следовало бы рассмотреть. Но непосредственно уроки по этим темам я готовлю в день публикации. Иногда темы приходится разбивать на части. И заранее сказать на сколько частей ее логично и доступно придется разбивать я не могу.

21.02.2017 17:29
0

@rassen, Поздравляю!
Ваш пост был упомянут в моем хит-параде в следующих категориях:

  • Голосов - 4 позицию - 133 Голосов
  • Выплаты - 1 позицию - 1972,0270 GESTS
22.02.2017 07:55
0

Благодарю

22.02.2017 08:25
0