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

Раздел языка JavaScript.
Аватара пользователя
Slash
Администратор
Сообщения: 2028
Поблагодарили: 62 раза

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

Сообщение Slash » Ср июн 15, 2016 9:01 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) {
    var content, element;
    if (html) {
        element = document.getElementById(id);
        element.innerHTML = html;
    }
    else {
        element = document.getElementById(id);
        content = element.innerHTML;
        return content;
    };
}; 

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

Код: Выделить всё

var content = html('block'); 

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

Код: Выделить всё

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

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

Надеюсь мой пост, оказался полезным.
Спасибо за внимание.
Реклама
Аватара пользователя
Slash
Администратор
Сообщения: 2028
Поблагодарили: 62 раза

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

Сообщение Slash » Пт июн 17, 2016 2:36 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) {
    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 />'); 

Если при вызове, разделитель не указывать, то по умолчанию разделителем будет пробел.
Аватара пользователя
Slash
Администратор
Сообщения: 2028
Поблагодарили: 62 раза

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

Сообщение Slash » Пт июн 17, 2016 8:52 pm

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

Код функции:

Код: Выделить всё

function html(valuehtml) {
    var 
element;
    if (
value.indexOf('class:') + || 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 
0value.length ii++) {
                
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([123], '<br />'); 

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

Код: Выделить всё

html([123]); 
Аватара пользователя
Slash
Администратор
Сообщения: 2028
Поблагодарили: 62 раза

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

Сообщение Slash » Сб июн 18, 2016 10:45 am

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

Код: Выделить всё

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 содержит случайную фразу.
Аватара пользователя
Slash
Администратор
Сообщения: 2028
Поблагодарили: 62 раза

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

Сообщение Slash » Вс июн 19, 2016 11:16 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')); 

Результат:
ПриветМир!
Аватара пользователя
Slash
Администратор
Сообщения: 2028
Поблагодарили: 62 раза

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

Сообщение Slash » Вт июн 21, 2016 2:35 pm

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

Код: Выделить всё

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

    element.setAttribute('style', property);
};

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

Код: Выделить всё

var id document.getElementById('id'); 

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

Код: Выделить всё

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

Вернуться в «JavaScript»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость