Урок 17. Продвинутая работа с пользовательскими функциями

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

Значения по умолчанию

Пусть у нас есть функция, которая возводит число в квадрат:

function func(num) {

    return num * num

}

Давайте с ее помощью возведем в квадрат число 3:

alert(func(3)); //выведет 9

Что будет, если в функцию не передать параметр: это не приведет к ошибке, просто в переменную num запишется undefined. То есть: в JavaScript в функцию можно не передавать все параметры - если какой-то не передан, вместо него запишется undefined.

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

Давайте сделаем так, чтобы, если мы не передали параметр num, то по умолчанию бралось значение 3. То есть мы хотим, чтобы функция работала так:

//Параметр не передали

alert(func()); //хотим, чтобы вывело 9

 

//Параметр передали

alert(func(4)); //выведет 16

Для этого есть 2 способа. Первый способ - проверить переменную на undefined и, если она равна ему, записать в нее нужно значение:

function func(num) {

    if (num === undefined) {

            num = 3;

    }

 

    return num * num;

}

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

function func(num) {

    num = num || 3;

    return num * num;

}

Второй способ считает, что параметр отсутствует, если передана пустая строка, 0, или вообще любое значение, которое в логическом контексте является false.

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

function func(num1, num2, num3) {

    num3 = num3 || 3;

    num2 = num2 || 2;

 

    return num * num;

}

Область видимости переменных

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

Различают глобальные и локальные переменные. Первые видны во всем скрипте, а вторые - только ограниченной области.

В следующем примере переменная внутри функции не видна снаружи, она является локальной внутри функции:

function func() {

    var local = 'Тест! ';

    alert(local); //выведет 'Тест! '

}

func();

 

alert(local); //выведет undefined

А сейчас та переменная test, которая находится вне функции, это не та переменная test, которая находится внутри нее:

var test = 'Тест! ';

function func() {

var test = 'Локальная! '; alert(test); //выведет 'Локальная! '

}

func();

А вот если внутри функции переменная не объявлена через var - она будет считаться глобальной:

var test = 'Тест! ';

function func() {

    alert(test); //выведет 'Тест! '

}

func();

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

var global = 'Тест! ';

function func() {

    global = 'Поменялась! ';

}

func();

 

alert(global); //выведет 'Поменялась! '

Если написать var - переменная будет локальной внутри функции:

var global = 'Тест! ';

function func() {

    var global = 'Поменялась! ';

}

func();

 

alert(global); //выведет 'Тест! '

Еще раз напомню: переменная внутри функции не видна снаружи:

function func() {

    var local = 'Тест! ';

    alert(local); //выведет 'Тест! '

}

func();

 

alert(local); //выведет undefined

А теперь мы забыли написать var перед переменной и она видна снаружи:

function func() {

    local = 'Тест! ';

    alert(local); //выведет 'Тест! '

}

func();

 

alert(local); //выведет 'Тест! '

Строгий режим

Забыв поставить var, можно случайно затереть глобальную переменную, что является источником трудноуловимых ошибок. Поэтому рекомендуется включать так называемый строгий режим командой 'use strict';, которая пишется в начале скрипта.

В следующем примере мы забыли поставить var и затерли глобальную переменную test:

var test = 'Привет! ';

 

function func() {

    test = 'Тест! ';

}

func();

 

alert(test); //выведет 'Тест! ', а не 'Привет! '

А если включить строгий режим, то скрипт просто выдаст ошибку, которую мы сможем заметить в консоли:

'use strict';

 

var test = 'Привет! ';

 

function func() {

    test = 'Тест! '; //будет ошибка, нет var

}

func();

 

alert(test);

Глобальные переменные через window

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

Однако, это еще не все: все глобальные переменные являются свойствами объекта window:

var test = 'Тест! ';

alert(window.test); //выведет 'Тест! '

И наоборот:

var window.test = 'Тест! ';

alert(test); //выведет 'Тест! '

Такую особенность можно использовать для обмена данными между функциями:

function func1() {

    window.test = 'Тест! ';

}

 

function func2() {

    alert(window.test); //выведет 'Тест! '

}

 

func1(); //< --- без этого вызова не сработает

func2();

Если не вызывать первую функцию, то код window.test = 'Тест! ' не сработает (он срабатывает только в момент вызова func1() ):

function func1() {

    window.test = 'Тест! ';

}

 

function func2() {

    alert(window.test); //выведет undefined

}

 

//Тут func1() больше не вызывается

 

func2();

Рекурсия

Посмотрите также новый видеоурок на рекурсию, там этот материал раскрыт подробнее: https: //youtu.be/-2RiM6tRk-Q

В программировании есть такое понятие, как рекурсия - это когда функция вызывает сама себя.

Давайте разберемся с этим понятием на следующем примере: выведем все элементы массива с конца с помощью рекурсии (для примера, цикл тут эффективнее).

Для этого мы будем использовать метод pop, который забирает из массива последний элемент (массив при этом уменьшается). Затем будем проверять, осталось ли что в массиве с помощью empty.

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

var arr = [1, 2, 3, 4, 5];

 

last(arr);

 

function last(arr) {

    document.write(arr.pop() + '< br> '); //выводим последний элемент массива

   

    if(arr.length! = 0) {

            last(arr); //это рекурсия

    }

}

Урок 18. Практика на отработку циклов и функций JavaScript

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

Урок 19.Основы работы с DOM в JavaScript

В данном уроке мы разберем основы работы с событиями, атрибутами и getElementById на языке JavaScript.

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

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

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

В JavaScript существует несколько способов работы с событиями. Мы начнем с самого простого из них.

Основы работы с событиями

Самый простой способ задать реакцию элемента на определенное событие - указать ее с помощью атрибута для определенного тега. К примеру, событию 'нажатие мышкой' соответствует атрибут onclick, событию 'наведение мышкой' - атрибут onmouseover, а событию 'уход курсора с элемента' - атрибут onmouseout.

Значением атрибута с событием служит JavaScript код. В следующем примере по нажатию мышкой на кнопку выполнится функция alert:

< input type=" submit" onclick=" alert('! ')" >

А сейчас по клику на элемент выполнится функция func:

< input type=" submit" onclick=" func()" >

function func() {

    alert('! ');

}

Можно выполнить не одну функцию, а несколько:

< input type=" submit" onclick=" func1(); func2(); " >

function func1() {

    alert('1');

}

 

function func2() {

    alert('2');

}

Обратите внимание на то, что если внутри атрибута вам нужны двойные кавычки (например, для строки) и внешние кавычки атрибута тоже двойные - onclick=" alert("! " )" - такой код не будет работать.

С этим можно бороться несколькими способами: можно сменить внешние кавычки на одинарные onclick='alert("! " )', можно также заэкранировать внутренние кавычки обратным слешем onclick=" alert(\"! \" )" или же просто перенести JavaScript код из атрибута в функцию, а в атрибуте оставить только имя функции onclick=" func()" .

То же самое будет, если вы внешние кавычки атрибута ставите одинарными и для строки тоже используете одинарные: onclick='alert('! ')' - тут также все решается аналогичными способами.

Таблица атрибутов для событий

Все возможные атрибуты смотрите тут: атрибуты для событий в справочнике JavaScript.

 

Работа с getElementById

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

Пусть у нас на странице есть тег с атрибутом id в значении test. Запишем ссылку на этот тег в переменную elem. Для этого мы должны воспользоваться методом getElementById, который получает элемент по его id.

Эта запись произойдет по клику на кнопку, которой мы задали атрибут onclick. По нажатию на эту кнопку сработает функция func, которая найдет на HTML странице элемент с id равным test и запишет ссылку на него в переменную elem:

< input type=" text" id=" test" >

< input type=" submit" onclick=" func()" >

function func() {

    var elem = document.getElementById('test');

}

Теперь в переменной elem у нас лежит ссылка на элемент с атрибутом id в значении test. Сама переменная elem является объектом.

Этот объект и тег HTML страницы связаны друг с другом - мы можем поменять какие-либо свойства объекта elem и при этом увидим изменения на HTML странице, которые произойдут с полученным нами элементом.

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

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

Поделиться: