Пользовательские функции в JavaScript

10.06.2017 05:27:36 pm

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

function name(value1, value2, value3) {
    // Код функции
}; 

name(1, 2, 3); // Вызов функции

Давайте попробуем создать функцию с именем html, которая будет добавлять текст|html к любому тегу имеющему идентификатор, скажем к блоку <div>:

<div id="block"></div>

Код самой функции я написал вот так:

function html(id, html) {
    var element = document.getElementById(id);
    element.innerHTML = html;
};

Вызывается эта функция так:

html('block', '<strong>Привет Мир!</strong>');

block - это идентификатор тега div.
<strong>Привет Мир!</strong> - то, что надо вывести на экран, в блоке.

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

Пишем нашу функцию дальше, я думаю, будет ещё удобнее, если функция будет уметь не тока выводить, но и получать контент. И я переписал её так:

function html(id, html = null) {
    var content, element;
    if (html) {
        element = document.getElementById(id);
        element.innerHTML = html;
    }
    else {
        element = document.getElementById(id);
        content = element.innerHTML;
        return content;
    };
};

Обратите внимание на второй параметр функции, ему присваивается null (html = null). Это говорит о том, что данный параметр необязательный, вызывать функцию можно, как с двумя параметрами, так и с одним.

Тут при необходимости можно получить содержимое тегов, просто указав всего один параметр - это идентификатор тега:

var content = html('block');

Теперь переменная content содержит в себе содержимое тега с идентификатором block. Можно, даже получить содержимое первого блока и передать его во второй, пример:

html('second', html('first'));

На мой взгляд, это очень удобно.

Надеюсь мой пост, оказался полезным.
Спасибо за внимание.

Жалоба

10.06.2017 06:11:47 pm

Хочу продолжить создавать функции, сейчас будем писать функцию, которая будет выводить текст или HTML теги, в том месте, где находится сама функция. Можно было бы добавить это в уже написанную функцию, что в первом посте, но пока напишем её отдельно. Я решил назвать функцию output, кода в ней совсем мало:

function output(value) {
    document.write(value);
};

Пример использования:

output('Привет Мир!');

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

function output(value) {
    if (value instanceof Array) {
        for (var i = 0; value.length > i; i++) {
            document.write(value[i]);
        }
    }
    else {
        document.write(value);
    };
};

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

function output(value, separator = null) {
    if (value instanceof Array) {
        if (!separator) {
            var separator = ' ';
        }

        for (var i = 0; value.length > i; i++) {
            document.write(value[i] + separator);
        }
    }
    else {
        document.write(value);
    };
};

Теперь можно писать тег или текст, который будет между элементами массива, например так:

output(array, '<br />');

Если при вызове, разделитель не указывать, то по умолчанию разделителем будет пробел.

Жалоба

10.06.2017 07:27:20 pm

Совместил функции из первого и второго поста, плюс добавил возможно работать не тока с атрибутом id, но и с атрибутом class.

Код функции:

function html(value, html) {
    var element;
    if (value.indexOf('class:') + 1 | value.indexOf('id:') + 1) {
        var attribute = value.split(':')[0];
        var name      = value.split(':')[1];
        if (attribute == 'class') {
            element = document.getElementsByClassName(name);
            element = element[0];
        }
        else {
            element = document.getElementById(name);        
        };

        if (html) {
            element.innerHTML = html;
        }
        else {
            return element.innerHTML;
        };
    }
    else {
        if (value instanceof Array) {
            if (!html) {
                var html = ' ';
            }

            for (var i = 0; value.length > i; i++) {
                document.write(value[i] + html);
            }
        }
        else {
            document.write(value);
        };
    };
};

Как работать с функцией:
Название атрибута пишется после двоеточия ('class:'|'id:'), например:

var first = html('class:first');
html('id:second', first);

Данный код получит содержимое с блока с классом first и передаст его в блок с идентификатором second.

Для простого вывода сообщения, пишем текст без дополнительного параметра:

html('<strong>Привет Мир!</strong><br />Как поживаешь?');

Так же можно вывести массив:

html([1, 2, 3], '<br />');

Или без разделителя:

html([1, 2, 3]);

Жалоба

10.06.2017 07:29:49 pm

Решил написать функцию для вывода случайного значения.
Код функции:

function fortuity(value) {
    if (value instanceof Array) {
        var r = Math.round(Math.random() * value.length);
        return value[r];
    }
    else {
        return 'Error Array';
    };
};

Как пользоваться функцией:
Создаем массив, например:

var arr = [
    'Первая фраза',
    'Вторая фраза',
    'Третья фраза',
    'Четвертая фраза',
    'Пятая фраза'
];

Затем получаем случайное значение:

var value = fortuity(arr);

Теперь переменная value содержит случайную фразу.

Жалоба

21.09.2017 12:03:06 pm

Написал функцию, которая удаляет пробелы в строке, там, где ей будет указано (в начале | в конце | в начале и в конце | все имеющие пробелы).
Код функции:

function delspace(variable, type) {
    if (type == 'trim') {
        variable = variable.replace(/(^\s*)|(\s*)$/g, '');
    }
    else if (type == 'ltrim') {
        variable = variable.replace(/^\s*/g, '');
    }
    else if (type == 'rtrim') {
        variable = variable.replace(/\s*$/g, '');
    }
    else if (type == 'all') {
        variable = variable.replace(/\s*/g, '');
    };

    return variable;
};

Как пользоваться функцией:
var variable = delspace(variable, 'type');
variable - строка, где надо удалить пробелы.
type - какие пробелы надо удалить:
- trim - в начале и в конце строки.
- ltrim - в начале строки.
- rtrim - в конце строки.
- all - все имеющиеся пробелы в строке.

Пример:

alert(delspace(' Привет Мир! ', 'all'));

Результат:

ПриветМир!

Жалоба

21.09.2017 12:05:29 pm

Пишем функцию для изменения стиля, функцию назвал css:

function css(e, s) {
    var p = '';
    for (var i = 0; s.length > i; i++) {
        p += s[i] + ';' + (s.length - 1 == i ? '' : ' ');
    };

    e.setAttribute('style', p);
};

Как пользоваться:
Создаем переменную с элементом:

var elId = document.getElementById('id');

Затем вызываем функцию указав два параметра, первый параметр - это полученный элемент, в данном случаи это переменная el_id, второй параметр - это массив свойств стиля, одно значение массива - одно свойство:

css(elId, [
    'border: 1px solid red',
    'color: #999999',
    'width: 450px'
]);

Жалоба