Урок 9. Практика на комбинации стандартных функций JavaScript

Данный урок представляет собой практику на комбинации стандартных функций JavaScript. В этом уроке вы должны отработать все полученные ранее знания на практических задачах. Переходите сразу к ним.

 

Урок 10.Работа с пользовательскими функциями в JavaScript

Вы уже знаете многие стандартные функции JavaScript, например substr(), reverse(), split(). Их использование очень удобно - чтобы написать свои аналоги на JavaScript, потребовалось бы много времени и сил.

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

Зачем нужны пользовательские функции?

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

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

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

Синтаксис функций пользователя

Функция создается с помощью команды function. Далее через пробел следует имя функции и круглые скобки. Круглые скобки могут быть пустыми, либо в них могут быть указаны параметры, которые принимает функция.Параметры - это обычные переменные JavaScript.

Сколько может быть параметров: один, несколько (в этом случае они указываются через запятую), ни одного (в этом случае круглые скобки все равно нужны, хоть они и будут пустыми).

//'func' - это имя функции, ей передается один параметр param: function func(param) { } //Передаем функции два параметра - param1 и param2: function func(param1, param2) { } //Вообще не передаем никаких параметров: function func() { }

Обратите внимание на фигурные скобки в примерах: в них мы пишем код, который выполняет функция. Общий синтаксис функции выглядит так:

function имя_функции(здесь перечисляются параметры через запятую) {    Здесь написаны команды, которые выполняет функция.}

Как вызвать функцию в коде?

Саму функцию мы можем вызвать в любом месте нашего JavaScript документа (даже до ее определения). Функция вызывается по ее имени. При этом круглые скобки после ее имени обязательны, даже если они пустые. Смотрите пример:

/*    Мы написали функцию,     которая выводит на экран 'Привет, мир! '.    Назовем ее 'hello': */function hello() {    /*            В этом месте ничего не выведется само по себе,             а выведется только при вызове функции.    */    alert('Привет, мир! '); } /*    Теперь мы хотим вызвать нашу функцию,     чтобы она вывела на экран свою фразу.    Обратимся к ней по имени: */hello(); //Вот и все! Функция выведет на экран фразу 'Привет, мир! './*    Мы можем вывести нашу фразу несколько раз -     для этого достаточно написать функцию     не один раз, а несколько: */hello(); hello(); hello();

Подробнее о параметрах

В наших примерах мы вызывали функцию 'hello()' без параметров.

Давайте теперь попробуем ввести параметр, который будет задавать текст, выводимый нашей функцией:

//Зададим нашу функцию: function hello(text) { //укажем здесь параметр text    //Выведем на экран значение переменной text:     alert(text); } //Теперь вызовем нашу функцию: hello('Привет, Земляне! '); //она выведет именно ту фразу, которую мы ей передали

Обратите внимание на переменную text в нашей функции: в ней появляется то, что мы передали в круглых скобках при вызове функции.

Как JavaScript знает, что текст 'Привет, Земляне! ' нужно положить в переменную text? Мы сказали ему об этом, когда создавали нашу функцию, вот тут: 'function hello(text)'.

Если мы зададим несколько параметров - то каждый из них будет лежать в своей переменной внутри функции.

Инструкция return

Чаще всего функция должна не выводить что-то через alert на экран, а возвращать.

Сделаем теперь так, чтобы функция не выводила что-то на экран, а возвращала текст скрипту, чтобы он смог записать этот текст в переменную и как-то обработать его дальше:

//Зададим функцию: function hello(text) {    /*            Укажем функции с помощью инструкции 'return',             что мы хотим, чтобы она ВЕРНУЛА текст, а не вывела на экран:     */    return text; } //Теперь вызовем нашу функцию и запишем значение в переменную message: var message = hello('Привет, Земляне! '); //пока вывода на экран нет //И теперь в переменной message лежит 'Привет, Земляне! ': alert(message); //убедимся в этом //Можно не вводить промежуточную переменную message, а сделать так: alert(hello('Привет, Земляне! '));

В принципе, практической пользы от того, что мы сделали - никакой, так как функция вернула нам то, что мы ей передали. Модернизируем наш пример так, чтобы функция принимала имя человека, а выводила строку 'Привет, %имя_человека_переданное_функции%! ':

//Зададим функцию: function hello(name) { //укажем здесь параметр name, в котором будет лежать имя человека    //Введем переменную text, в которую запишем всю фразу:     var text = 'Привет, '.name.'! ';     /*        Укажем функции с помощью инструкции 'return',             что мы хотим, чтобы она ВЕРНУЛА содержимое переменной text:     */    return text; } //Теперь вызовем нашу функцию и запишем значение в переменную message: var message = hello('Дима'); //И теперь в переменной text лежит 'Привет, Дима! ': alert(message); //убедимся в этом //Поздороваемся сразу с группой людей из трех человек: alert(hello('Вася').' '.hello('Петя').' '.hello('Коля'));

Частая ошибка с return

После того, как выполнится инструкция return – функция закончит свою работу. То есть: после выполнения return больше никакой код не выполнится.

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

Смотрите пример:

function func(param){    /*            Если переменная param имеет значение true, то вернем 'Верно! '.            Напоминаю о том, что конструкция if(param) эквивалентна if(param === true)!     */    if (param) return 'Верно! ';     /*            Далее новичок в JavaScript хочет проделать еще какие-то операции,             но если переменная param имеет значение true – сработает инструкция return,             и код ниже работать не будет!             Напротив, если param === false – инструкция return не выполнится            и код дальше будет работать!     */    alert('Привет, мир! '); }//Осознайте это и не совершайте ошибок

Приемы работы с return

Существуют некоторые приемы работы с return, упрощающие код. Как сделать проще всего:

function func(param) {    /*            Что делает код:             если param имеет значение true – то в переменную result запишем 'Верно! ',             иначе 'Неверно! ':     */    if (param) {            var result = 'Верно! '    } else {            var result = 'Неверно! ';     }     //Вернем содержимое переменной result:     return result; }

Теперь упростим нашу функцию, используя прием работы с return:

function func(param) {    /*            Что делает код:             если param имеет значение true – вернет 'Верно! ',             иначе вернет 'Неверно! '.    */    if (param) {            return 'Верно! '    } else {            return = 'Неверно! ';     }}

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

 

Урок 11. Приемы работы с флагами на JavaScript

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

Флаги

Давайте решим следующую задачу: дан массив, нужно проверить, есть ли в нем элемент со значением 'c' или нет. Если есть - выведем 'есть', если нет - выведем 'нет'.

Для начала давайте попробуем вывести 'есть'. Для этого переберем все элементы нашего массива и ифом будем спрашивать - равен ли текущий элемент значению 'c'. Если равен - выведем 'есть':

var arr = ['a', 'b', 'c', 'd', 'e']; for (var i = 0; i < arr.length; i ++ ) {    if (arr[i] == 'c') {            alert('Есть');     }}

Но наше решение не очень хорошо: ведь если в массиве будет не одно значение 'c', а несколько, то алерт выведется несколько раз. Давайте исправим наш массив (сделаем два элемента с 'c') и убедимся в этом:

var arr = ['a', 'b', 'c', 'd', 'с']; for (var i = 0; i < arr.length; i ++ ) {    if (arr[i] == 'c') {            alert('Есть'); //выведет несколько раз    }}

Поправим проблему: оборвем цикл с помощью break, если элемент уже найден:

var arr = ['a', 'b', 'c', 'd', 'с']; for (var i = 0; i < arr.length; i ++ ) {    if (arr[i] == 'c') {            alert('Есть');             break; //оборвем цикл    }}

Давайте теперь попробуем сделать так, чтобы, если в массиве вообще нет элементов со значением 'c', выводилось 'нет'. Распространенным заблуждением будет добавить else к нашему ифу - в этом случае 'нет' будет выводиться на все элементы, не являющиеся 'c':

var arr = ['a', 'b', 'c', 'd', 'с']; for (var i = 0; i < arr.length; i ++ ) {    if (arr[i] == 'c') {            alert('Есть');     } else {            alert('Нет'); //выведет на 'a', 'b' и 'd'    }}

Итак, идея добавить else - плохая идея, не рабочая. Для решения задач подобного типа (такие задачи встречаются достаточно часто) используют так называемые флаги.

Флаг - это такая переменная, которая может принимать два значения: true или false. Как работать с флагами - посмотрим на примере нашей задачи.

Итак, давайте сделаем переменную flag с таким значением: если она равна true - то в массиве есть элемент 'c', а если false - то такого элемента нет.

Изначально поставим переменную flag в значение false - то есть будем считать, что элемента 'c' в массиве нет:

var arr = ['a', 'b', 'c', 'd', 'с']; var flag = false; //считаем, что элемента 'c' нету в массиве

Затем запустим цикл с ифом так, как мы делали это раньше. Если цикл обнаружит, что в массиве есть элемент 'c' - то поставим переменную flag в значение true (и выйдем из цикла с помощью break).

for (var i = 0; i < arr.length; i ++ ) {    if (arr[i] == 'c') {            flag = true; //элемент есть - переопределим переменную flag            break;     }}

Далее: ответ на вопрос, если в массиве 'c' или нет, мы можем дать только после цикла. И этот ответ у нас уже есть: после цикла переменная flag могла остаться false или могла сменить свое значение на true, если цикл обнаружил в массиве 'c':

var arr = ['a', 'b', 'c', 'd', 'с']; var flag = false; //считаем, что элемента 'c' нету в массиве for (var i = 0; i < arr.length; i ++ ) {    if (arr[i] == 'c') {            flag = true; //элемент есть - переопределим переменную flag            break;     }} //тут переменная flag равна или true, или false

Теперь после цикла мы можем сделать иф, который посмотрит на переменную flag и выведет на экран 'есть' или 'нет':

var arr = ['a', 'b', 'c', 'd', 'с']; var flag = false; //считаем, что элемента 'c' нету в массиве for (var i = 0; i < arr.length; i ++ ) {    if (arr[i] == 'c') {            flag = true; //элемент есть - переопределим переменную flag            break;     }} if (flag === true) {    alert('Есть'); } else {    alert('Нет'); }

Таким образом и работают флаги. Запомните этот прием - он обязательно встретится вам в дальнейшем, причем неоднократно.

Флаги в функции

Когда мы работаем с пользовательскими функциями - флаги тоже можно и нужно использовать, но работа с ними упрощается. Давайте решим ту же задачу на 'c', но таким образом: необходимо создать функцию hasElem, которая параметром будет принимать массив и возвращать true, если 'c' есть в массиве, и false - если нет:

var arr = ['a', 'b', 'c', 'd', 'с']; alert(hasElem(arr)); //выведет true или false

Давайте реализуем функцию hasElem. В этом случае переменная flag и команда break нам не понадобится - вместо них все сделает команда return.

Как это будет: внутри функции запускаем наш цикл с ифом и, если мы попали в иф - делаем return true, тем самым выходя из цикла и из функции. А если цикл прокрутился, но выхода из функции не случилось - после цикла делаем return false:

function hasElem(arr) {    for (var i = 0; i < arr.length; i ++ ) {            if (arr[i] == 'c') {                return true;             }    }     return false; //элемент 'c' не найден}var arr = ['a', 'b', 'c', 'd', 'с']; alert(hasElem(arr));

Еще раз как это работает: если в массиве найдется элемент со значением 'c' - мы выйдем из функции с помощью return. Но если в массиве не найдется элемент 'c' - выхода из функции не произойдет и выполнение дойдет до команды return false. И получится, что функция вернет false в знак того, что элемент 'c' не найден в массиве.

 

⇐ Предыдущая3456789101112Следующая ⇒

Поделиться: