Для получения полного доступа
зарегистрируйтесь.
RSS

Все сниппеты с тэгом «JavaScript»

JavaScript / JS
JavaScript — прототипно-ориентированный сценарный язык программирования. Является реализацией языка ECMAScript (стандарт ECMA-262). JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений.


Gravatar image
zular
  • Репутация: 36
  • Сниппеты: 7
  • Ревизии: 0

Здравствуйте, скрипт оч прост, делал его минут 5, но может кому пригодиться.

Что делает этот код? создаем переменную result, онаобязательно должнабыть равна 0 Бьем строку методом split, после разбития это уже массив, по нему проходимся методом map, предварительно сконвертировав текущий элемент в число, дальше просто складываем числа и выводим результат.

var target = "5466365465";
var result = 0;

target.split("").map(function(item){
  result += +item;
});

console.log(result); // 50

//другое решение этой задачи

var target = "5466365465".split("");

var result = target.reduce(function(prev, current){
  return (+prev) + (+current);
});

console.log(result); // 50
Gravatar image
zular
  • Репутация: 36
  • Сниппеты: 7
  • Ревизии: 0

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

Зависимости:

  • Jquery

Классы:

  • .nav-afix - само меню
  • .affix - класс который добавляется в после скролла

Преимущества скрипта:

  • не надо высчитывать отступ сверху (скрипт сам его отсчитывает)
// --- affix top menu script ---
$(() => {
    let target = $('.nav-afix');
    let startPosition = target.offset().top;

    $(window).scroll(() => {
        if ($(window).scrollTop() >= startPosition) {
            if (!target.hasClass()) {
                target.addClass('affix')
            };
        } else {
            target.removeClass('affix')
        };
    });
});

Gravatar image
maxyc
  • Репутация: 29
  • Сниппеты: 4
  • Ревизии: 0

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

Есть такая замечательная штука Gulp. Легко гуглится. В кратце это серверный комбайн расширяемый плагинами. Код который привел ниже запускается в командной строке одной лишь командой # gulp При этом он делает следующее

Продолжение »

jestonedev
  • Репутация: 99
  • Сниппеты: 11
  • Ревизии: 1

Вот такие вот задачки иногда попадаются на собеседовании на должность Frontend Web Developer: Написать парсер математических выражений методом рекурсивного спуска. Должны поддерживаться операции сложения, вычитания, умножения, деления, возведения в степень, а также скобки. Хоть задача и тривиальная, но мне стало интересно ваше мнение, как подобная задача коррелирует с должностью? Видимо оценить уровень владения языком?

P.S.: Известные проблемы данной реализации:

  1. Неочевидность сообщения об ошибке: пользователю может быть не всегда понятно, почему в одних случаях выводится Token unexpected, а в других Invalid formula
  2. Проблема двух знаков минус в начале выражения: "(--2)" - вернет NaN, а не "Invalid formula" Писалось на коленке, поэтому прошу понять и простить.

var TokenType = {
    Empty: { name: "Empty" },
    Number: { name: "Number", expectAfter: [ "Empty", "Operator" ] },
    Operator: { name: "Operator", expectAfter: [ "Number", "Expression" ] },
    Expression: { name: "Expression", expectAfter: [ "Empty", "Operator" ] }
};

var Operator = [
    { operator: "^", priority: 3, eval: function(a,b) { return Math.pow(a,b); } },
    { operator: "*", priority: 2, eval: function(a,b) { return a*b; } },
    { operator: "/", priority: 2, eval: function(a,b) { return a/b; } },
    { operator: "+", priority: 1, eval: function(a,b) { return a+b; } },
    { operator: "-", priority: 1, eval: function(a,b) { return a-b; } }
];

function Evaluator()
{
}

Evaluator.prototype = {
    eval: function(str) {
        var tokens = [];
        while(str !== "") {
            var token = this.extractNumber(str, tokens.length === 0);
            if (token === null) {
                token = this.extractOperator(str);
            }
            if (token === null) {
                token = this.extractExpression(str);
            }
            if (token === null) {
                throw Error('Token unexpected '+str);
            }
            this.assert(tokens[tokens.length - 1], token);
            tokens.push(token);
            str = str.substr(token.rawValue.length);
        }
        if (tokens.length === 0) return null;
        if (tokens[tokens.length - 1].type === TokenType.Operator) {
            throw new Error('Invalid formula');
        }
        return this.processTokens(tokens);
    },

    processTokens: function(tokens) {
        var processTokens = [];
        while (tokens.length > 1) {
            var maxPriority = tokens.filter(function(t) {
                return t.type === TokenType.Operator;
            }).map(function(t) {
                return t.operator.priority;
            }).reduce(function (acc, v) {
                return v > acc ? v : acc;
            }, Number.MIN_VALUE);
            for (var i = 0; i < tokens.length; i++) {
                if (tokens[i].type === TokenType.Operator && tokens[i].operator.priority === maxPriority) {
                    var leftOperand = processTokens.pop();
                    var operator = tokens[i].operator;
                    var rightOperand = tokens[i + 1];
                    var evalValue = operator.eval(Number(leftOperand.value), Number(rightOperand.value));
                    processTokens.push({"value": evalValue, "rawValue": evalValue, "type": TokenType.Number});
                    i++;
                } else {
                    processTokens.push(tokens[i])
                }
            }
            tokens = processTokens;
            processTokens = [];
        }
        if (tokens.length === 0) {
            throw new Error('Unexpected error');
        }
        return tokens[0].value;
    },

    assert: function(prevToken, currentToken)
    {
        if (prevToken == undefined && currentToken.type.expectAfter.indexOf("Empty") !== -1)
            return;
        if (prevToken !== undefined && currentToken.type.expectAfter.indexOf(prevToken.type.name) !== -1)
            return;
        throw Error("Invalid formula");
    },

    clear: function(str)
    {
        return str.replace(/\s+/g,"");
    },

    extractNumber: function(str, allowMinus)
    {
        var regExp = new RegExp("^"+(allowMinus ? "[\-]?" : "")+"[0-9]*(?:[.][0-9]+)?","g");
        var match = regExp.exec(str);
        if (match === null || match.length === 0 || match[0].length === 0) return null;
        return { "value": match[0], "rawValue": match[0], "type": TokenType.Number };
    },

    extractOperator: function(str)
    {
        for(var i = 0; i < Operator.length; i++)
        {
            var regExp = new RegExp("^"+ RegExp.escape(Operator[i].operator)+"","g");
            var match = regExp.exec(str);
            if (match !== null && match.length > 0)
                return { "value": match[0], "rawValue": match[0], "operator": Operator[i], "type": TokenType.Operator }
        }
        return null;
    },

    extractExpression: function(str)
    {
        var regExp = /^(\(.*\))/g;
        var match = regExp.exec(str);
        if (match === null || match.length < 2) return null;

        var brackets = ['('];
        var value = match[0];
        for (var i = 1; i < value.length; i++)
        {
            if (value[i] === '(') {
                brackets.push('(');
            }
            if (value[i] === ')') {
                brackets.pop();
            }
            if (brackets.length === 0) {
                break;
            }
        }
        value = value.substr(1, i-1);
        if (value === "") {
            throw new Error("Invalid formula");
        }
        var e = new Evaluator();
        return { "value": e.eval(value), "rawValue": "("+value+")", "type": TokenType.Expression };
    }
};

if (RegExp.escape === undefined) {
	RegExp.escape= function(s) {
		return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
	};
}
Gravatar image
maxyc
  • Репутация: 29
  • Сниппеты: 4
  • Ревизии: 0

1) Сложность пароля Качество и сложность пароля - мнение часто субъективно. Но данный сниппет хорошее начало )

^(?=.*[A-Z].*[A-Z])(?=.*[!@#$&*])(?=.*[0-9].*[0-9])(?=.*[a-z].*[a-z].*[a-z]).{8}$

2) Проверка на HEX цвет.

\#([a-fA-F]|[0-9]){3, 6}

3) Проверка email. Данный пункт хорошее начало холивара!

/[A-Z0-9._%+-]+@[A-Z0-9-]+.+.[A-Z]{2,4}/igm

Продолжение »

Gravatar image
Илья Понамарёв
  • Репутация: 1
  • Сниппеты: 1
  • Ревизии: 0

Для создания сайтов или веб-приложений в материальном дизайне есть отличный framework Material Design Lite, но он дает лишь основу. Мы попытаемся создать плавающую кнопку, которая будет исчезать при прокрутке страницы вниз и появляться при прокрутке вверх.

Внимание! код не претендует на супер оригинальность, возможно, что-то можно было сделать по-другому, но в своё время было потрачено много времени для изучения подобных мелочей, которые сейчас кажутся простыми. Надеюсь, код кому-нибудь поможет.

Для начала подключим стили и скрипт MDL, а также подлючим JQuery, с помощью которого мы будем реализовывать исчезновение/появление кнопки.

<!--JQuery-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!--MDL-->
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Добавим кнопку на страницу и создадим сss свойства для неё. Остальные классы базовые для фреймворка.

.mdl-float-button {
position:fixed;
right:10px;
bottom:10px;
}

<button class="mdl-float-button mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
  <i class="material-icons">add</i>
</button>

Теперь кнопка жестко привязана к правому нижнему углу с помощью параметра position:fixed и right:10px;bottom:10px;. Создадим два стиля: первый - это анимация уплывания кнопки вниз, а второй - сворачивание внутрь себя (не знаю как назвать этот эффект).

.scale-zero{                 // сворачивание кнопки
transform: scale(0,0);
transition: all 0.1s linear;
}

.scale-one{                  // разворачивание кнопки
transform: scale(1,1);
transition: all 0.1s linear;
}

.translate-down {           // уплывание вниз кнопки
transform: translate(0,120%);
transition: all 0.1s linear;
}

.translate-up {            // всплывание вверх кнопки
transform: translate(0,0);
transition: all 0.1s linear;
}

Осталось только добавить скрипт, который будет отслеживать скролл страницы и добавлять нужные классы к кнопке

var scroll = $(window).scrollTop();  // переменная, с помощью который мы будем узнавать куда скроллиться страница
$(window).scroll ( function() {     //отслеживаем скроллится ли страница
transform('mdl-float-button','translate-up','translate-down'); //параметры для уплывания кнопки
transform('mdl-float-button','scale-one','scale-zero'); //параметры для сворачивания кнопки
})

function transform (selector,classOne,classTwo) {  // функция, которая определяет куда прокручивается список и добавляет/удаляет нужные классы кнопке
 if ($('.'+selector).length != 0) {
   if ($(window).scrollTop() - 20 > scroll) {    // -20 используется лишь для того, чтобы кнопка пропадала не сразу, а после непродолжительного скролла. Данная штука сделана для красоты
    $('.'+selector).removeClass(classOne);
    $('.'+selector).addClass(classTwo);
    scroll = $(window).scrollTop();
   }
   if ($(window).scrollTop() + 20 < scroll) {  // +20 использется по той же причине, что и выше
    $('.'+selector).removeClass(classTwo);
    $('.'+selector).addClass(classOne);
    scroll = $(window).scrollTop();
   }
 }
}

Вот собственно и всё, что нужно для создания плавающей кнопки.

Рабочий пример

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<style>

.scale-zero{
transform: scale(0,0);
transition: all 0.1s linear;
}

.scale-one{
transform: scale(1,1);
transition: all 0.1s linear;
}

.translate-down {
transform: translate(0,120%);
transition: all 0.1s linear;;
}

.translate-up {
transform: translate(0,0);
transition: all 0.1s linear;;
}

.mdl-float-button {
position:fixed;
right:10px;
bottom:10px;
}

</style>

<button class="mdl-float-button mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
  <i class="material-icons">add</i>
</button>
  
<script>
var scroll = $(window).scrollTop();
$(window).scroll ( function() {
console.log($('#option-1').prop('checked'))
if ($('#option-1').prop('checked')) {transform('mdl-float-button','translate-up','translate-down');}
else {transform('mdl-float-button','scale-one','scale-zero');}
})

function transform (selector,classOne,classTwo) {
 if ($('.'+selector).length != 0) {
   if ($(window).scrollTop()> scroll) {
    $('.'+selector).removeClass(classOne);
    $('.'+selector).addClass(classTwo);
    scroll = $(window).scrollTop();
   }
   if ($(window).scrollTop() < scroll) {
    $('.'+selector).removeClass(classTwo);
    $('.'+selector).addClass(classOne);
    scroll = $(window).scrollTop();
   }
 }
}

</script>  
Valentin Sayik
  • Репутация: 37
  • Сниппеты: 5
  • Ревизии: 0

Иногда, что бы сделать сайт максимально быстрым для пользователя (или хотя бы сделать такое впечатление), можно прибегать к таким средствам как в этом сниппете. Суть этих строк в том, что страница на которую ведёт ссылка -- начинает загружаться еще до того как пользователь на нее нажмёт (в тот период как только клавиша миши начала опускаться, а курсор указывает на ссылку), это ускорит загрузку страниц на 50ms.

document.onmousedown = function(e) {
	e.target.click();
}
jestonedev
  • Репутация: 99
  • Сниппеты: 11
  • Ревизии: 1

Этим скриптом можно получить изображение из буфера обмена при нажатии ctrl+v на js. Работает только в хроме и мозиле. Может кто обращал внимание, в вк, в переписке есть возможность прикрепления картинки в диалог прямо из буфера, с этим скриптом вы можете реализовать то же самое.

// проверяем, поддерживает ли браузер объект Clipboard
// если нет создаем элемент с атрибутом contenteditable
if (!window.Clipboard) {
   var pasteCatcher = document.createElement("div");
    
   // Firefox вставляет все изображения в элементы с contenteditable
   pasteCatcher.setAttribute("contenteditable", "");
    
   pasteCatcher.style.position = "absolute";
   pasteCatcher.style.left = "-3000px";
   document.body.appendChild(pasteCatcher);
 
   // элемент должен быть в фокусе
   pasteCatcher.focus();
   document.addEventListener("click", function() { pasteCatcher.focus(); });
} 
// добавляем обработчик событию
window.addEventListener("paste", pasteHandler);
 
function pasteHandler(e) {
// если поддерживается event.clipboardData (Chrome)
      if (e.clipboardData && e.clipboardData.items) {
      // получаем все содержимое буфера
      var items = e.clipboardData.items;
      if (items) {
         // находим изображение
         for (var i = 0; i < items.length; i++) {
            if (items[i].type.indexOf("image") !== -1) {
               // представляем изображение в виде файла
               var blob = items[i].getAsFile();
               // создаем временный урл объекта
               var URLObj = window.URL || window.webkitURL;
               var source = URLObj.createObjectURL(blob);                
               // добавляем картинку в DOM
               createImage(source);
            }
         }
      }
   // для Firefox проверяем элемент с атрибутом contenteditable
   } else {      
      setTimeout(checkInput, 1);
   }
}
 
function checkInput() {
    var child = pasteCatcher.childNodes[0];   
   pasteCatcher.innerHTML = "";    
   if (child) {
// если пользователь вставил изображение – создаем изображение
      if (child.tagName === "IMG") {
         createImage(child.src);
      }
   }
}
 
function createImage(source) {
   var pastedImage = new Image();
   pastedImage.onload = function() {
      // теперь у нас есть изображение из буфера
   }
   pastedImage.src = source;
}

Артем Леготин
  • Репутация: 18
  • Сниппеты: 5
  • Ревизии: 0

Возвращает линейную функцию f(x), построенную следующим образом:

f(a) = A; f(b) = B;

var linear = function( a, b, A, B, is_ext ) {
	return function( x ) {
		if ( x <= a && is_ext !== true ) {
			return A;
		} else if ( x >= b && is_ext !== true ) {
			return B;
		} else {
			return x * ( B - A ) / ( b - a ) + ( A * b - B * a ) / ( b - a );
		}
	};
};

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

	f(x) = A, если x < a;
	f(x) = B, если x > b;

	Однако, если передать параметр is_ext в значении true, f(x) будет экстраполировать значения линейным образом.
*/

var f = linear( -50, 50, 0, 1 );// без экстраполяции

f(-60);// 0
f(-50);// 0
f(0);// 0.5
f(50);// 1
f(100);// 1

var g = linear( 0, 10, 0, 100, true );// c экстраполяцией

g(-5);// -50
g(0);// 0
g(5);// 50
g(10);// 100
g(20);// 200