Задать вопрос
  • Какой курс по JS подойдет для новичка?

    miraage
    @miraage
    Старый прогер
    Никакой. Начните с learn.javascript.ru и "you don't know js"
    Ответ написан
    Комментировать
  • Какой курс по JS подойдет для новичка?

    @Araya
    https://learn.javascript.ru/ безусловно
    Ответ написан
    Комментировать
  • Как стать javascript разработчиком?

    Zoominger
    @Zoominger
    System Integrator
    Как устроиться джуном?

    Иметь пет-проекты и официальный опыт работы от года.

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

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

    Перейти рубеж в 120к за какое время реально при условии адекватного работодателя? Фултайм в Мск.

    Около 7-9 лет. Да-да, сейчас прибегут вайтишнички с рассказами, как их одноклассник рубит по 400k на PHP, особо не напрягаясь, но объективная реальность такова, что з/п за 100 имеют только сеньоры и тимлиды, а это 7-9 лет опыта.

    Очевидно, вы стали жертвой Хабра и рекламы курсиков. Сочувствую.

    Ха, лол, только заметил:
    Погуглил что во фронтэнде нехватка спецов, а зарплаты в очень широком диапазоне.

    Пфффпхавхахахахахахаааа *захлёбывается слюнями*
    Спецов, может, и нехватка, а вот вайтоты просто огромные толпы и конкуренция среди трейни и джунов невероятная, благодаря чему диапазон зарплат разнится от "бесплатной стажировки" до "20-25 тысяч в мегаполисе". Да, вы точно жертва рекламы. Откуда вы такие берётесь-то в 32 года?
    Ответ написан
    19 комментариев
  • Как сделать так, чтобы ключи в объекте шли по очереди даже после удаления?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Есть такая штука - массив называется. Попробуйте как-нибудь.
    Ответ написан
    4 комментария
  • Какие аналоги в JS данных JQ выражений?

    0xD34F
    @0xD34F Куратор тега JavaScript
    youmightnotneedjquery.com

    UPD.

    $(this).parents('.portfolio')

    function parents(el, selector) {
      const p = [];
      while ((el = el.parentNode) !== document && el) {
        (!selector || el.matches(selector)) && p.push(el);
      }
      return p;
    }
    
    parents(this, '.portfolio')

    $(this).parent('.portfolio')

    this.parentNode.classList.contains('portfolio') ? this.parentNode : null

    $(this).children('.portfolio')

    [...this.children].filter(n => n.classList.contains('portfolio'))
    
    // или
    
    Array.prototype.filter.call(this.children, n => n.matches('.portfolio'))
    
    // или
    
    this.querySelectorAll(':scope > .portfolio')

    $(this).find('.portfolio')

    this.querySelectorAll('.portfolio')

    $(this).next('.portfolio')

    (el => el && el.matches('.portfolio') ? el : null)(this.nextElementSibling)
    Ответ написан
    4 комментария
  • Как сделать web страницу с генератором картинки?

    heavenst
    @heavenst
    Обычно подобные операции с картинками делаются на сервере с помощью ImageMagick и т.д., это лучший вариант.
    А реализовать такое целиком на фронтенде можно попробовать с помощью API внешних сервисов обработки изображений:
    www.blitline.com/docs/quickstart
    https://cloudinary.com
    https://www.imgix.com/
    У всех есть бесплатные тарифные планы для разработчиков.
    Ответ написан
    1 комментарий
  • Как связать компоненты между страницами?

    Xuxicheta
    @Xuxicheta Куратор тега Angular
    инженер
    Вот вам пример простейшего стора для обмена данными
    https://ng-run.com/edit/RmyDdpUtMUe0V5cmb6X7
    Ответ написан
    Комментировать
  • ESlint не понимает Smart Pipelines?

    @quadabrashell Автор вопроса
    Проблема решилась обновлением babel-eslint до 11.0.0-beta.0

    yarn upgrade babel-eslint@11
    Ответ написан
    Комментировать
  • Как вывести data-attr?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Вам это не надо, не на jquery же пишите. Пусть выбранным значением будет сам элемент массива deliveryPrice, а не какое-то из его свойств:

    <select v-model="selected">
      <option v-for="n in deliveryPrice" :value="n">{{ n.city }}</option>
    </select>

    Ну и выводите чего хотите без проблем:

    <div v-if="selected">
      <div>{{ selected.city }}</div>
      <div>{{ selected.priceFrom }}</div>
    </div>


    Если вдруг напрягает [object Object], отображаемый в качестве value в разметке, то v-model пусть по-прежнему с примитивными значениями работает, а выбранный объект оформляем как computed свойство:

    <select v-model="city">
      <option v-for="n in deliveryPrice">{{ n.city }}</option>
    </select>

    computed: {
      selected() {
        return this.deliveryPrice.find(n => n.city === this.city);
      },
    },

    или

    <select v-model="selectedIndex">
      <option v-for="(n, i) in deliveryPrice" :value="i">{{ n.city }}</option>
    </select>

    data: () => ({
      selectedIndex: -1,
    }),

    computed: {
      selected() {
        return this.deliveryPrice[this.selectedIndex];
      },
    },
    Ответ написан
    1 комментарий
  • Angular 2: Удаление элементов страницы в зависимости от роли?

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

    Попробуйте написать структурную директиву как это:

    @Directive({
        selector: '[hasRole]'
    })
    export class HasRoleDirective implements OnInit {
        @Input() hasRole: Array<string>;
    
        constructor(private viewContainerRef: ViewContainerRef, 
                           private template: TemplateRef<any>) {}
    
        ngOnInit() {
            this.checkRoles('user');
        }
    
        checkRoles(userRole: string) {
            console.log("Роль пользователя: " + userRole);
            if (!this.hasRole || this.hasRole.indexOf(userRole) != -1) {
                console.log("Есть доступ");
                this.viewContainerRef.createEmbeddedView(this.template);
            } else {
                this.viewContainerRef.clear();
                console.log("Доступ запрещен");
            }
        }
    }


    Используйте просто со звездочкой

    <p *hasRole="['admin', 'user']"><Блок идят только Админ и Пользователь</p>
    <div *hasRole="['admin']">Тестовый блок который видит только Админ</div>


    Это аналогично этому

    <template [hasRole]="['admin', 'user']">
       <p>Тестовый параграф которые видят только Админ и Пользователь</p>
    </template>
    <template [hasRole]="['admin']">
       <div>Тестовый блок который видит только Админ</div>
    </template>

    Т.е. здесь template(будет текстовой нодой) выступает в роли хоста-контейнера для элементов. И мы в зависимости от наших условий решаем - добавлять или нет эти элементы в контейнер, которые пойдут следом за хостом. Если планируете динамически менять права, то можете использовать сеттер для инпута. Вот вам шаблон https://github.com/angular/angular/blob/2.4.5/modu...
    Ответ написан
  • Как создать связный список из массива?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Перебираем массив от конца к началу, на каждом шаге создаём узел связного списка - в качестве значения используется текущий элемент массива, а следующим элементом списка будет выступать узел, полученный на предыдущем шаге:

    const createList = arr => arr.reduceRight((acc, n) => ({ val: n, next: acc }), null);
    
    const list = createList([ 1, 2, 3, 4 ]);
    Ответ написан
    6 комментариев
  • Блеск на лого при загрузке страницы?

    SmthTo
    @SmthTo Куратор тега CSS
    Все перепёлки мира будут оплакивать мою смерть.
    Есть ещё много вариантов (clip, mask-image, SVG и т. п.), которые предназначены для более продвинутых эффектов. Этот вариант — самый простой и требует однородного цвета на фон, если логотип прозрачный.


    Ответ написан
    1 комментарий
  • Как сделать добавление ссылки по тексту?

    mahmudchon
    @mahmudchon
    var re  = 'яблоки';
    var reg = new RegExp(re,"g");
    var str = 'яблоки круглые и яблоки сочные.';
    var str = str.replace(reg, '<a href="#">' + re + '</a>');
    alert(str);
    Ответ написан
    4 комментария
  • Запутался в замыкании + обертка, разбермся?

    lastuniverse
    @lastuniverse
    Всегда вокруг да около IT тем
    Тут все просто:
    ...
    
    function delay(func, timeOut) {
        // при вызове delay(func, timeOut) мы создаем анонимную функцию и возвращаем ее
        // но при этом внутри нее мы обращаемся к переданному параметру func 
        // создавая тем самым замыкание на него
        return function() {
            // внутри возвращаемой анонимной функции мы запускаем таймер
            // которому передаем параметр func являющейся функцией, определенной 
            // где то вовне этот таймер выполнит func но при этом внутри самой func 
            // уже будет не видны параметры переданные для анонимной функции. 
            // Внутри анонимной функции эти параметры можно получить через arguments.
            // Тля того, чтобы func могла получить к ним доступ, мы используем apply, 
            // привязывая к func контент вызова анонимной функции и ее arguments
            // тем самым создавая замыкания к this и arguments анонимной функции
            setTimeout(func.apply(this, arguments), timeOut);
            // как правильно подсказал @bingo347, эту строчку надо немного переписать
            setTimeout(func.bind(this, ...arguments), timeOut);
        }
    }
    
    // примерно того же эффекта можно было добиться следующим кодом
    function delay(func, timeOut) {
        return function(text) {
            setTimeout(()=>func(text), timeOut);
        }
    }
    
    // можно даже добиться не примерно такого, а точно такого же эффекта
    // (за исключением привязки контекста анонимной функции через this
    // который влияет лишь на возможность обратится непосредственно
    // к методам и свойствам самой анонимной функции, которых в вашем
    // примере не объявлено ))) 
    function delay(func, timeOut) {
        return function(...args) {
            setTimeout(()=>func(...args), timeOut);
        }
    }
    ...


    по теме:
    arguments
    apply

    PS: но ваш способ с учетом поправок от Дмитрий Беляев (как и мой второй способ) правильнее, потому что позволяет не переписывая функцию delay делать так:
    function f(argument1, argument2) {
        alert(argument1 + " " + argument2);
    }
    let f1000 = delay(f, 1000);
    f1000("1111", "2222"); // показывает "1111 2222" после 1000 мс


    и так:
    function f(argument1, argument2, argument3) {
        alert(argument1 + " " + argument2 + " " + argument3);
    }
    let f1000 = delay(f, 1000);
    f1000("1111", "2222", "3333"); // показывает "1111 2222 3333" после 1000 мс


    и так далее ))))
    Ответ написан
    1 комментарий
  • Как сложить числа между символами?

    0xD34F
    @0xD34F Куратор тега JavaScript
    const sum = str.match(/\d+/g).reduce((acc, n) => acc + +n, 0);
    
    // или
    
    let sum = 0;
    for (const n of str.split(/\D+/)) {
      sum += Number(n);
    }

    preg_match_all('/\d+/', $str, $matches);
    $sum = array_sum($matches[0]);
    
    // или
    
    $sum = 0;
    foreach (preg_split('/\D+/', $str) as $n) {
      $sum += intval($n);
    }
    Ответ написан
    Комментировать
  • Как смещать серый квадрат только после прохода курсором ячейки?

    0xD34F
    @0xD34F Куратор тега Vue.js
    data: () => ({
      size: 52,
      col: 0,
      row: 0,
    }),
    methods: {
      onMouseMove(e) {
        this.col = e.offsetX / this.size | 0;
        this.row = e.offsetY / this.size | 0;
      },
    },
    computed: {
      blockStyle() {
        return {
          backgroundSize: `${this.size}px ${this.size}px`,
        };
      },
      blockCursorStyle() {
        const { col, row, size } = this;
        return {
          transform: `translate(${col * size}px, ${row * size}px)`,
          width: `${size * 0.95}px`,
          height: `${size * 0.95}px`,
        };
      },
    },

    <div class="block" :style="blockStyle" @mousemove="onMouseMove">
      <div class="block-cursor" :style="blockCursorStyle"></div>
    </div>

    https://jsfiddle.net/La4297zd/

    Почему вместо координат курсора хранятся индексы столбца и строки - это чтобы при изменении размера не случалось переключения подсветки на другую ячейку.
    Ответ написан
    2 комментария
  • Как переписать функцию красивее?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    r.forEach(e => e.field = myFunc(e.field));

    Метод forEach() применит функцию к каждому элементу массива.
    Т.к. задача только поменять свойство внутри каждого объекта, а объекты в JavaScript передаются по ссылке, то можно прямо внутри функции, куда передан объект, поменять его свойства. Заменять весь объект не требуется.
    Ответ написан
    Комментировать
  • Как изменить массив?

    tuychin
    @tuychin
    Frontend dev
    Используйте reduce

    const data = [[1, 2], [3, 4], [5, 6]];
    const merged = data.reduce((res, arr) => ([...res, ...arr]), []);

    console.log(merged);
    Ответ написан
    2 комментария