Задать вопрос
AngReload

AngReload

Кратко о себе
Ответы

  • Замыкания, return и ссылки на функцию?

    AngReload
    @AngReload
    Кратко о себе
    Кратко.

    В первом случае, функция создаёт и возвращает bar.
    При каждом запуске происходит создание объекта bar. И при каждом запуске функции, она возвращает уникальную ссылку на уникальный объект.

    Во втором случае, функция возвращает foo.
    В коде функции нет объявления foo, а значит это переменная в лексическом окружении при создании функции.
    Функция создаётся только один раз, значит и эта переменная будет одна и та же при каждом запуске.

    Нужно знать, как работают объекты в js, чем отличаются от примитивных типов. Они не равны, даже если они имеют одинаковое содержимое, они все равно хранятся в разных областях памяти. Только примитивы в виде чисел \ строк \ null, undefined равны если их содержимое одинаково. Объекты не копируются при присвоении, только создаются ссылки на них.
    Ответ написан
    Комментировать
    Комментировать

  • Насколько актуальна книга "Javascript Patterns" С. Стефанова?

    AngReload
    @AngReload
    Кратко о себе
    Пролистал, похоже на Руководство по написанию JavaScript кода от Airbnb(), но более развёрнуто. Цель книги, как я понимаю, показать особенности js кода, и как лучше сделать то чего можно добиться разными путями.
    То что там написано, наверное ещё очень долго будет актуальным. Но, например, вместо var сейчас принято использовать let и const, про оператор delete я почему-то не нашел упоминания что его лучше не использовать. Думаю это некритично.
    Ответ написан
    Комментировать
    Комментировать

  • Как организовать быструю сортировку на JS со средним опорным элементом?

    AngReload
    @AngReload
    Кратко о себе
    Несколько мелких ошибок
    function quickSort (array) {
	if (array.length <= 1) { // так понятнее
		return array;
	} else {
		let pivotIndex = Math.floor(array.length / 2); // так понятнее
		let pivot = array[pivotIndex];
		let less = [];
		let greater = []; // не объявляйте переменные через запятую

		for (let i = 0; i < array.length; i++) { // индексы элементов в массиве идут с нуля
			if (i === pivotIndex) continue; // опорный элмент нужно пропускать
			if (array[i] <= pivot) {
				less.push(array[i]);
			} else {
				greater.push(array[i]);
			}
		}
		let result = [];
		return result.concat(quickSort(less), pivot, quickSort(greater));
	}
}
console.log(quickSort([5,1,7,4,3])); // алерт?
    Ответ написан
    2 комментария
    2 комментария

  • Как построить дерево из объектов в массиве JavaScrypt?

    AngReload
    @AngReload
    Кратко о себе 
    function getTree(flatTree) {
	// node["1"] is node.index
	// node["key"] is node.parent.index

	flatTree.forEach(node => {
		const nodeIndex = node["1"];
		const nodeParentIndex = node["key"];
		
		node.parent = flatTree
			.find(someNode => someNode["1"] === nodeParentIndex);

		node.childrens = flatTree
			.filter(someNode => someNode["key"] === nodeIndex);

		node.siblings = flatTree
			.filter(someNode => someNode["key"] === nodeParentIndex && someNode !== node);
	});

	const rootNode = flatTree.find(obj => obj["1"] === 1);
	return rootNode;
}

const flatTree = [
	{"1": 1, "3": 128, "4": 1, "key": 0},
	{"1": 2, "3":   0, "4": 0, "key": 1},
	{"1": 3, "3":   0, "4": 0, "key": 1},
	{"1": 4, "3":   0, "4": 0, "key": 2},
	{"1": 5, "3":   0, "4": 0, "key": 2},
	{"1": 6, "3":   0, "4": 0, "key": 3},
	{"1": 6, "3":   0, "4": 0, "key": 3},
	{"1": 7, "3":   0, "4": 0, "key": 1}
];

console.log(getTree(flatTree));
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать функцию на js, что бы нельзя было занимать занятые клетки при игре в крестики нолики?

    AngReload
    @AngReload
    Кратко о себе
    Нужно изменить обработчик, добавить проверку что клетка пустая:
    document.getElementById('game').onclick = function(event){
    console.log(event);
    if (event.target.className == 'block' && event.target.innerHTML === ''){
      if (hod%2==0) {
        event.target.innerHTML = 'x';
      }
      else {
        event.target.innerHTML = '0';
      }
      hod++;
      checkWinner();
    }
  }

    Но, как справедливо пишут, код не очень красивый. Прочитай как-нибудь про DRY (и другие принципы), иначе самому же тяжело будет свой код читать и редактировать.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как правильно называть переменные в CSS?

    AngReload
    @AngReload
    Кратко о себе
    Можно подглядеть у пикабу, на сайте можно менять светлую и тёмную тему и основной цвет. Там хороший код, и названия, которые дали переменным отлично отражают их назначение.
    Длиннокод
    :root {
  --color--bg: #fff;
  --color--bg_80: rgba(255, 255, 255, 0.8);
  --color--bg_90: rgba(255, 255, 255, 0.9);
  --color--bg_contrast: #000;
  --color--bg_contrast-50: rgba(0, 0, 0, 0.5);
  --color--bg_contrast-60: rgba(0, 0, 0, 0.6);
  --color--color: #000;
  --color--green: #8ac858;
  --color--red: #FD5D47;
  --color--yellow: #ffc800;
  --color--gray: #cacaca;
  --color--gray_light: #e8e8e8;
  --color--gray_dark: #adadad;
  --color--text: #212121;
  --color--secondary: #4d4d4d;
  --color--caption: #757575;
  --color--text_green: #6c9b45;
  --color--text_link: #6c9b45;
  --color--text_link: var(--color--text_green);
  --color--text_red: #f75c48;
  --color--text_contrast: #fff;
  --color--text_search: rgba(255, 200, 0, 0.3);
  --color--selection: #c5e4ac;
  --color--tool: #c2c2c2;
  --color--icon: #BDBDBF;
  --color--social_vk: #5b7aa8;
  --color--social_facebook: #4867aa;
  --color--social_twitter: #41abe1;
  --color--social_google: #dd4b38;
  --color--app__bg: #f4f4f4;
  --color--app__text: #212121;
  --color--section__bg: #fff;
  --color--section_gray__bg: #f9f9fb;
  --color--section_success__bg: #8ac858;
  --color--section_success__bg: var(--color--green);
  --color--section_success__text: #fff;
  --color--section_danger__bg: #FD5D47;
  --color--section_danger__bg: var(--color--red);
  --color--section_danger__text: #fff;
  --color--section_warning__bg: rgba(255, 200, 0, 0.05);
  --color--section_warning__border: #ffc800;
  --color--section_warning__text: #212121;
  --color--toast_default__bg: #6ea046;
  --color--toast_default__text: #fff;
  --color--toast_danger__bg: #FD5D47;
  --color--toast_danger__bg: var(--color--red);
  --color--toast_danger__text: #fff;
  --color--toast_warning__bg: #ffc800;
  --color--toast_warning__text: #5e3a00;
  --color--popup_shadow-arrow: rgba(0, 0, 0, 0.08);
  --color--popup_default__bg: #fff;
  --color--popup_default__text: #212121;
  --color--popup_gray__bg: #f9f9fb;
  --color--popup_gray__text: #212121;
  --color--popup_danger__bg: #FD5D47;
  --color--popup_danger__bg: var(--color--red);
  --color--popup_danger__text: #fff;
  --color--popup_warning__bg: #212121;
  --color--popup_warning__text: #fff;
  --color--tag__text: #757575;
  --color--tag_highlight__text: #4d4d4d;
  --color--tag-focus__text: #212121;
  --color--header__text: #d8ffbc;
  --color--header_active__text: #fff;
  --color--header_dark__text: rgba(255, 255, 255, 0.7);
  --color--header_icon__bg: rgba(0, 0, 0, 0.05);
  --color--header__bg: #8ac858;
  --color--header__bg: var(--color--green);
  --color--footer__text: #212121;
  --color--footer__bg: #f0f0f0;
  --color--award__bg: #f1f1f1;
  --color--award__bg_hover: #d9d9d9;
  --color--menu-item-current__text: #6c9b45;
  --color--menu-item-current__text: var(--color--text_green);
  --color--menu-item-current__bg: #8ac858;
  --color--menu-item-current__bg: var(--color--green);
  --color--comments__left-border: #efefef;
  --color--comments__image: #fff;
  --color--input__bg: #fff;
  --color--input__text: #212121;
  --color--input-placeholder__text: #757575;
  --color--input-focus__border: #8ac858;
  --color--input-focus__border: var(--color--green);
  --color--input_complexity__bg: #e8e8e8;
  --color--input_checkbox: #adadad;
  --color--bell_yellow: #ffc800;
  --color--border: #e9e9e9;
  --color--border_success: #8ac858;
  --color--border_success: var(--color--green);
  --color--border_error: #FD5D47;
  --color--border_error: var(--color--red);
  --color--border_upload: rgba(233, 233, 233, 0.4);
  --color--highlight_yellow__bg: rgba(255, 200, 0, 0.1);
  --color--highlight_yellow__bg_40: rgba(255, 200, 0, 0.4);
  --color--highlight_red__bg: rgba(253, 93, 71, 0.1);
  --color--highlight_gray__bg: rgba(233, 233, 233, 0.4);
  --color--highlight_green__bg: rgba(138, 200, 88, 0.1);
  --color--shadow: rgba(0, 0, 0, 0.16);
  --color--button__text_contrast: #fff;
  --color--button__stroke: rgba(88, 88, 88, 0.2);
  --color--button__stroke_contrast: rgba(255, 255, 255, 0.2);
  --color--button_default__bg: #e9e9e9;
  --color--button_default__text: #585858;
  --color--button_success__bg: #8ac858;
  --color--button_success__bg: var(--color--green);
  --color--button_danger__bg: #FD5D47;
  --color--button_danger__bg: var(--color--red);
  --color--button_warning__bg: #ffc800;
  --color--button_warning__bg: var(--color--yellow);
  --color--button_dark__bg: #4d4d4d;
  --color--button_dark__bg: var(--color--secondary);
  --color--button-small_success__bg: #83be54;
  --color--button-small_default__bg: #dddddd;
  --color--button-small_default__text: #585858;
  --color--slider__quantity: rgba(138, 200, 88, 0.7);
  --color--progress-circle__storke: rgba(117, 117, 117, 0.2);
  --color--editor__bg: rgba(0, 0, 0, 0.7);
  --color--editor__text: #fff;
  --color--editor__button_hover: rgba(0, 0, 0, 0.4);
  --color--editor__button_active: rgba(0, 0, 0, 0.4);
  --color--player__play: rgba(0, 0, 0, 0.1);
  --color--player__logo: rgba(255, 255, 255, 0.5);
  --color--code__bg: #f9f9fb
}

html[data-theme-dark] {
  --color--bg: #22272B;
  --color--bg_80: rgba(34, 39, 43, 0.8);
  --color--bg_90: rgba(34, 39, 43, 0.9);
  --color--bg_contrast: #fff;
  --color--bg_contrast-50: rgba(34, 39, 43, 0.5);
  --color--bg_contrast-60: rgba(34, 39, 43, 0.6);
  --color--color: #fff;
  --color--green: #567842;
  --color--red: #FD5D47;
  --color--yellow: #917815;
  --color--gray: #4e5255;
  --color--gray_light: #65686b;
  --color--gray_dark: #393d41;
  --color--text: #bfbfbf;
  --color--secondary: #a6a6a6;
  --color--caption: #7d7d7d;
  --color--text_green: #6c9b45;
  --color--text_red: #f75c48;
  --color--text_contrast: #fff;
  --color--text_search: rgba(145, 120, 21, 0.3);
  --color--selection: rgba(69, 96, 53, 0.99);
  --color--tool: #4e5255;
  --color--icon: #4e5255;
  --color--social_vk: #5b7aa8;
  --color--social_facebook: #4867aa;
  --color--social_twitter: #41abe1;
  --color--social_google: #dd4b38;
  --color--app__bg: #171c20;
  --color--app__text: #bfbfbf;
  --color--section__bg: #22272B;
  --color--section_gray__bg: #1a1e21;
  --color--section_success__text: #fff;
  --color--section_danger__bg: #FD5D47;
  --color--section_danger__text: #fff;
  --color--section_warning__bg: rgba(145, 120, 21, 0.05);
  --color--section_warning__border: #917815;
  --color--section_warning__text: #bfbfbf;
  --color--toast_default__bg: #8ac858;
  --color--toast_default__text: #fff;
  --color--toast_danger__bg: #FD5D47;
  --color--toast_danger__text: #fff;
  --color--toast_warning__bg: #fed45b;
  --color--toast_warning__text: #5e3a00;
  --color--popup_shadow-arrow: rgba(0, 0, 0, 0.08);
  --color--popup_default__bg: #1f2327;
  --color--popup_default__text: #bfbfbf;
  --color--popup_gray__bg: #171b1e;
  --color--popup_gray__text: #bfbfbf;
  --color--popup_danger__bg: #FD5D47;
  --color--popup_danger__text: #fff;
  --color--popup_warning__bg: #181b1e;
  --color--popup_warning__text: #bfbfbf;
  --color--tag__text: #7d7d7d;
  --color--tag_highlight__text: #a6a6a6;
  --color--tag-focus__text: #bfbfbf;
  --color--header__text: rgba(255, 255, 255, 0.7);
  --color--header_active__text: #fff;
  --color--header_dark__text: rgba(255, 255, 255, 0.7);
  --color--header_icon__bg: rgba(255, 255, 255, 0.05);
  --color--header__bg: #1f2327;
  --color--footer__text: #bfbfbf;
  --color--footer__bg: #0f0f0f;
  --color--award__bg: #4e5255;
  --color--award__bg_hover: #606366;
  --color--comments__left-border: #393d41;
  --color--input__bg: #22272B;
  --color--input__text: #bfbfbf;
  --color--input-placeholder__text: #7d7d7d;
  --color--input-focus__border: #8ac858;
  --color--input-focus__border: var(--color--green);
  --color--input_complexity__bg: #65686b;
  --color--input_checkbox: #393d41;
  --color--bell_yellow: #ffc800;
  --color--border: #393d41;
  --color--border_error: #FD5D47;
  --color--border_upload: rgba(57, 61, 65, 0.4);
  --color--highlight_yellow__bg: rgba(145, 120, 21, 0.1);
  --color--highlight_yellow__bg_40: rgba(145, 120, 21, 0.4);
  --color--highlight_red__bg: rgba(253, 93, 71, 0.1);
  --color--highlight_gray__bg: rgba(255, 255, 255, 0.1);
  --color--highlight_green__bg: rgba(86, 120, 66, 0.1);
  --color--shadow: rgba(0, 0, 0, 0.46);
  --color--button__text_contrast: #fff;
  --color--button__stroke: rgba(110, 110, 110, 0.2);
  --color--button__stroke_contrast: rgba(255, 255, 255, 0.2);
  --color--button_default__bg: #2d3236;
  --color--button_default__text: #6e6e6e;
  --color--button_dark__bg: #0f0f0f;
  --color--button-small_default__bg: #2b3033;
  --color--button-small_default__text: #6e6e6e;
  --color--button-small_success__bg: #52723f;
  --color--slider__quantity: #3c542e;
  --color--progress-circle__storke: rgba(125, 125, 125, 0.2);
  --color--editor__bg: rgba(34, 39, 43, 0.9);
  --color--editor__text: #fff;
  --color--editor__button_hover: rgba(255, 255, 255, 0.2);
  --color--editor__button_active: rgba(255, 255, 255, 0.4);
  --color--player__play: rgba(34, 39, 43, 0.1);
  --color--player__logo: rgba(255, 255, 255, 0.5)
}
    Ответ написан
    Комментировать
    Комментировать

  • Как изменить метод класса в неизменяемом js коде?

    AngReload
    @AngReload
    Кратко о себе
    То есть, ты можешь вставить любой код между head и body? Тогда в чём вопрос?
    Если чужой скрипт грузится в head, тогда прямо так и вставляй свой код, если в body то по событию
    document.addEventListener('DOMContentLoaded', () => {
  form.prototype.submitForm = function { console.log('test') }
  form.prototype.submitForm()
});
    Ответ написан
    1 комментарий
    1 комментарий

  • Как сделать так, что-бы условие выполнялось после того, как оно будет НЕ выполнено один раз?

    AngReload
    @AngReload
    Кратко о себе
    Как-то так?
    // global variable
let isBeforeWasNotOffset = false;

function myAwesomeListener() {
  if (top_offset >= general_logo_offset.top) isBeforeWasNotOffset = true;
  if (isBeforeWasNotOffset &&
      top_offset <= general_logo_offset.top - 55 && top_offset >= 0
  ) {
    // bla bla bla
  }
}
    Ответ написан
    Комментировать
    Комментировать

  • Почему функция следующего вида не работает в обработчике событий?

    AngReload
    @AngReload
    Кратко о себе
    Функция f создаёт и возвращает анонимную функцию. Но и всё. Что бы новосозданная функция запустилась, нужно добавить скобок.
    parentElem.onclick = function(event) {
  if(условие) f(event.target)();
}

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

  • Почему иконки стали пиксельными?

    AngReload
    @AngReload
    Кратко о себе
    Я бы проверил нет ли каких-нибудь поворотов, хитрых наложений, эффектов. Чего-нибудь что может отправить на обработку на видеокарту. Хе-хе, артефакты выглядят как шрифты в win xp, который не умел сглаживать текст по вертикали.
    Ответ написан
    Комментировать
    Комментировать

  • Как убрать перенос корейских и японских иероглифов?

    AngReload
    @AngReload
    Кратко о себе
    CSS-свойство word-break меняет определение того, что считать словом. Значение break-all по сути воспринимает любой текст как восточноазиатский, который может переноситься практически где угодно (кроме точек в конце предложений и закрывающих скобок). Значение keep-all, наоборот, воспринимает восточноазиатские иероглифы как буквы в слове, а не как целые слова.
    p {
  word-break: keep-all;
}

    Рекомендую чтение css-live.ru/articles/gde-vsyo-slozhno-s-perenosami...
    Ответ написан
    1 комментарий
    1 комментарий

  • Почему не работает деструктуризация?

    AngReload
    @AngReload
    Кратко о себе
    У вас нет точек с запятой, а сам язык между закрывающей круглой скобкой и открывающей квадратной её не ставит. Ваш код аналогичен такому:

    console.log()[puzzles[first],puzzles[second]] = [puzzles[second],puzzles[first]]


    Надо так:
    replacePuzzles({commit, getters},{first,second}){
        let puzzles = getters.getPuzzles 
        console.log(puzzles[first],puzzles[second])
        ;[puzzles[first],puzzles[second]] = [puzzles[second],puzzles[first]]
    Ответ написан
    Комментировать
    Комментировать

  • Как проверить размеры загружаемого файла(изображения)?

    AngReload
    @AngReload
    Кратко о себе
    Изображение уже скачано, но ваш код выполняется раньше чем браузер успевает поменять размер картинки. Оберните код функции в setTimeout с небольшой задержкой и всё заработает, хотя может лучше было бы ловить изменение размеров.
    код
    function readURL(input) {

  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      
      var $img = $('<img id="blah">');
      $img.attr('src', e.target.result);
      setTimeout(function() {
      $('.form-group>label').find('img').remove();
      $img.appendTo('.form-group>label');
      $img = $(document).find('#blah');
        console.log($img.width(), $img.height());
      if ( $img.width() >= $img.height() ) {
          $img.css({
            'width': '100%',
            'height': 'auto',
          });
      } else {
        $img.css({
            'width': 'auto',
            'height': '100%',
          });
      }
      }, 100);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("#imgInp").change(function() {
  readURL(this);
});
    Ответ написан
    Комментировать
    Комментировать

  • Можно ли менять html файл с помощью js?

    AngReload
    @AngReload
    Кратко о себе
    По первому вопросу.
    С помощью js можно редактировать документ, добавлять кнопки \ ссылки \ текст. Собственно для этого этот язык программирования и был создан.
    С помощью js можно сохранять измененный документ, но не очень удобным способом. Скрипт может создать закачку файла, а пользователю придётся указать куда сохранить его.

    Ответ на второй вопрос, да можно сделать ссылки которые будут сразу открыты офисной программой:
    https://msdn.microsoft.com/ru-ru/library/office/dn...

    Но, мне кажется вам не нужно этих сложностей, а нужна портабельная программа - блокнот.
    Посмотрите, например https://mars-soft.net/mars-notebook/
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать анимацию фонового градиента, которая не грузит CPU?

    AngReload
    @AngReload
    Кратко о себе
    Используйте animation-timing-function: steps вместо linear, ведь анимация очень плавная, можно и уменьшить частоту кадров.

    $animation-steps: 100;
    codepen.io/anon/pen/BKoqpm?editors=1100
    Ответ написан
    1 комментарий
    1 комментарий

  • Как убрать отступ-пробел перед шапкой?

    AngReload
    @AngReload
    Кратко о себе
    В инспекторе текст перед шапкой, в начале body:
    61963bcb61ed4c90a540d72865b2dc23.png
    Ответ написан
    2 комментария
    2 комментария

  • Как работает присваивание при выводе?

    AngReload
    @AngReload
    Кратко о себе
    Просто не запускается геттер в первом случае, а выводится присваиваемое значение, да и наверное это к лучшему.
    Хотя было бы прикольно:
    x = pow2.x = deduct1.x = abs.x = -6;
> 25
    Ответ написан
    Комментировать
    Комментировать

  • Как обрезать так картинки?

  • Почему валидатор ругается на закрытый тег?

    AngReload
    @AngReload
    Кратко о себе
    Потому, что это пустой тег, он не может содержать дочерних узлов.
    Есть еще такие же перечисленные Антон Нагаец, вспоминается input ещё.
    Ответ написан
    Комментировать
    Комментировать

  • Почему странно работает цикл?

    AngReload
    @AngReload
    Кратко о себе
    Всё объясню:
    Как работает код:
    Находятся элементы на странице и помещаются в массив x = [0, 1, 2];
    Начинается цикл объявлением глобальной переменной i = 0;
    Затем идет проверка, и если i < длины массива, то:
    1) на div вешается функция слушатель для нажатия с функцией function(){console.log( _x[i] )
    2) глобальная переменная i увеличивается на единицу.
    Когда i достигает значения больше индексов массива (i = 3, не проходит проверку) цикл прекращается.

    Теперь мы наводим курсор на div и кликаем:
    Слушатель запускает функцию function(){console.log( _x[i] )
    Функция пытается найти i.
    Так как внутри функции переменная i не была определена, она обращается к глобальной области видимости.
    В глобальной области видимости переменная i == 3, по такому индексу в массиве ничего нет - функция пишет в консоль undefined.

    Как исправить:
    Создать функцию, которая будет создавать функции с определенным индексом и вызывать её в цикле:
    var _a = document.querySelectorAll('.a'),
      _b = document.querySelectorAll('.b');

function f_console_log_B_for_index(i) {
      return function(){console.log( _b[i] );}
}
function f_console_log_A_for_index(i) {
      return function(){console.log( _a[i] );}
}
for(var i = 0; i < _a.length; i++){
      _a[i].addEventListener('click', f_console_log_A_for_index(i),false);
      _b[i].addEventListener('click', f_console_log_B_for_index(i),false);
}

    В такой создаваемой функции значение переменной i будет таким с каким вызвали функцию, создавшую её.
    Прочитайте про области видимости и замыкания.
    Ответ написан
    Комментировать
    Комментировать