• Как сделать регистрозависимые замены в строке?

    twobomb
    @twobomb
    Ух чето как-то костыльно, особенно setInterval
    сделай хотя бы типа
    let input = document.querySelector('.input');
    let p = document.querySelector('.resultParagraph');
    
    input.addEventListener("input",(e)=>{	
    	if(e.target.value.trim() == "")
      	Array.from(p.children).forEach(el=>{
        	p.replaceChild(document.createTextNode(el.textContent),el);
        });  
    });
    input.addEventListener("change",(e)=>{	
         	p.innerHTML = p.innerHTML.replace(new RegExp(input.value, 'gmi'), (a)=>
           `<span style="background: red;">${a}</span>`
          );
    });

    или только на ввод
    let input = document.querySelector('.input');
    let p = document.querySelector('.resultParagraph');
    
    input.addEventListener("input",(e)=>{	
      	Array.from(p.children).forEach(el=>{
        	p.replaceChild(document.createTextNode(el.textContent),el);
        });  
         	p.innerHTML = p.innerHTML.replace(new RegExp(input.value, 'gmi'), (a)=>
           `<span style="background: red;">${a}</span>`
          );
    });
    Ответ написан
    9 комментариев
  • Почему с let работает а с var нет?

    @Shmulhe
    Muranx, с var выводит 3,3,3 потому что переменная данном случае глобальная, а SetTimeout() улетает в стек вызовов.

    Для проверки можешь вынести let за пределы блока и убедиться что в таком случае отработает как и с var все. То есть так:
    let k = 0;
    for(; k < 3; k++) {
        setTimeout(function() {
            console.log(k);
        }, 500);
    };
    Ответ написан
  • Почему с let работает а с var нет?

    @umbarutiba
    В первом случае: когда придет время поставь в очередь функцию выводящую в консоль то что будет в переменной к,
    Во втором: тоже самое, но для каждой итерации будет создана своя переменная к
    Ответ написан
  • Где в данном случае создалась переменная?

    Athanor
    @Athanor
    Лайк + Решение: не жмись, нажми
    Во первых, для меня было странным то, что при вызове конструкции new F( ) не создался объект, ну в принципи я допустил, что в переменную b записалась возвращаемая из функции F( )

    А это, кстати, происходит потому что вы возвращаете не примитивное значение в функции-конструкторе.

    Подробней

    Если хотите получить a в объекте, возвращенном функцией, конструктором, нужно убрать returnиз F
    Ответ написан
    1 комментарий
  • Как реализуется затенение свойств в случае с set: function(val){...}?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    Сеттер по сути есть функция (метод). Внутри вы обращаетесь к this. При этом сеттер вызывается в контексте myObject, вот и создается свойство у myObjcet, т.к. this указывает на него.
    Ответ написан
    1 комментарий
  • Почему данном случае теряется контекст this?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Простой ответ:
    Берём метод:
    метод = function(){
      console.log(this)
    };
    и(не важно как) пихаем его в какие-то объекты.
    Получаем:
    хрень.метод() // this - хрень
    хрень.кишки.метод() // this - хрень.кишки
    метод() // this - window
    
    хрень.метод.call(хрень.кишки) // this - хрень.кишки
    метод.call(хрень.кишки) // this - хрень.кишки
    метод.call(null) // this - null
    
    элемент.addEventListener('оппа', хрень.метод) //  this -элемент
    элемент.addEventListener('оппа', метод) //  this -элемент
    элемент.addEventListener('оппа', хрень.кишки.продукт.метод) //  this -элемент

    По сути this для фукции - это то, что идёт перед точкой, кроме тех случаев когда он переопределён явно. Всё, никакой эзотерики.)

    fn.call(!this ? this : obj) - это чушь скорее всего. Если this - falsy, то ставим его как this при вызове функции fn, иначе ставим obj. Falsy this может быть только при явном указании(или в strict режиме, при вызове функции напрямую("без точки перед ней")), и скорее всего передача пустого this в таком случае просто сломает выполнение fn.

    Ну ещё следует упомянуть стрелочную фукнцию:
    метод = () => {
      console.log(this)
    };
    это можно считать за явное указание this, потому что this тут всегда привязан тот, что был при создании стрелочной функции, независимо от того как и откуда её вызывают.
    Ответ написан
    3 комментария
  • Как сделать тест знаний на чистом javascript?

    dollar
    @dollar
    Делай добро и бросай его в воду.
    Я делаю все вопросы в отдельной структуре.
    Примерно так
    var data = [
    	{
    		name:'Психотип - это',
    		radio:['темперамент','акцентуация','соционический тип','экстраверсия','архетип','характер','ничего из этого'],
    		answer: 7,
    	},
    	{
    		name:'Что позволяет игра с точки зрения социологов?',
    		checkbox:['выразить себя','снять запреты','снять напряжение',],
    		answer: 1 + 10, //+100
    	},
    	{
    		name:'Что есть игра с точки зрения биогенетиков?',
    		checkbox:['атавизм','приготовление к жизни','снятие напряжения',],
    		answer: 1, // +10 +100,
    	},
    	// и так далее
    ];

    А на экране показываю одновременно только один вопрос и кнопку "Дальше". То есть DOM формируется динамически. Причем, при показе вопроса варианты ответов перемешиваются (кроме вариантов "ничего из вышеперечисленного" и "всё вышеперечисленное", которые добавляются в конец).

    Собственно, порядок вопросов тоже можно перемешать. Но здесь уже начинаются тонкости. Потому что некоторые вопросы стоит показывать в определенном порядке. А некоторые вопросы не стоит показывать вообще, если был дан неправильный ответ на определенный предыдущий вопрос. Не знаю, стоит ли вам заморачиваться так, как я.

    К слову, тест знаний делать на js - так себе идея. Ведь шпаргалка открывается в два клика (или комбинацией Ctrl+U) и читается без навыков программирования. По уму вопросы и ответы должны перемешиваться на сервере, id ответов должны быть каждый раз произвольные типа fGx9PeL7, подсказки ответа в js коде не должно быть вообще (проверка ответа только на сервере), вопросы должны отдаваться не все сразу, а порциями через ajax, ну и на каждый вопрос должно отводиться ограниченное время. А если лимита времени нет, то придется физически стоять над душой респондента и смотреть, чтобы он не лез в Гугл за подсказками. Ведь тест знаний должен проверять знания в предметной области, а не хакерские способности или скорость гугления.
    Ответ написан
    4 комментария
  • Как создать функцию для создания массива?

    @poniyur
    Какое-то извращенство, ну да ладно:
    function createArr(n, name){
         var tempArr = new Array(n)
           for(var k=0; k<n; k++){
                tempArr[k] = 1+Math.floor(10*Math.random())
            }
          window[name] = tempArr;
    };
    
    createArr(5, 'test');
    console.log(test);
    Ответ написан
    3 комментария
  • Как описать функцию смены картинки слайдера в данном случае?

    hzzzzl
    @hzzzzl
    сохраняешь в массиве src всех картинок
    images = ['a','b','c','d']
    // "https://www.stihi.ru/pics/2005/12/19-543.jpg"  , и так далее

    и сохраняешь индекс текущего слайда
    current = 0
    // начинаем с первого, то есть "нулевого" элемента в массиве


    и тогда

    aL.onclick=function(){
      alert("Arrow left") //в этих фукнциях и есть вопрос
      current = current - 1 < 0 ? images.length - 1 : current - 1
      // меняем индекс текущего и перерисовываем в слайдере картинку на images[current]
    }
    
    aR.onclick=function(){
      alert("Arrow right") //в этих фукнциях и есть вопрос
      current = current + 1 > images.length - 1 ? 0 : current +1
      // меняем индекс текущего и перерисовываем в слайдере картинку на images[current]
    }
    Ответ написан
    8 комментариев
  • Как понять конструкцию this.prototype[name] =. . .?

    potapchino
    @potapchino
    1 - да
    2 - да
    3.1 - да
    3.2 - Доступ через квадратные скобки
    3.3 - ну например, чтобы можно было делать чейнинг. foo.method().method().method()...

    Если можете, приведите примеры использования данного метода, ну и конечно объясните мне мои вопросы, спасибо!

    например задание методов прототипа функции-конструктора:
    Function.prototype.method = function(name, func){
        this.prototype[name] = func;
        return this
    };
    
    function Person(name) {
      this.name = name
    }
    
    Person
      .method('say', function() {
        console.log('dude!')
      })
      .method('myName', function() {
        console.log(this.name)
      });
    
    var person = new Person('Alex')
    
    person.say() // dude!
    person.myName() // Alex
    Ответ написан
    3 комментария
  • Как правильно описать функцию, применения CSS свойств к элементам HTML разметки?

    Чтобы манипулировать "элементами HTML разметки", нужно дождаться их загрузки. В этом нам поможет событие DOMContentLoaded, на которое мы подпишемся с помощью addEventListener

    var oneStyle={
      backgroundColor: "lime"
    };
    
    function change(el, obj)
    {
      for(var k in obj)
      {
      	el.style[k] = obj[k];
      }
    }
    
    document.addEventListener("DOMContentLoaded", function(event) { 
    	var el = document.getElementById("some");
    	change( el, oneStyle )
    });
    Ответ написан
  • Как научиться понимать работу js в браузере?

    dhs
    @dhs
    Web-разработчик
    Когда-то и я столкнулся с этим вопросом лицом к лицу. В тот момент я решил обратиться к основам работы браузера. На Хабре есть статьи на эту тему, причем их немало, которые мне помогли вникнуть в суть происходящего. Далее я начал изучать инструменты разработчика. Сам я использую Chromium с его Chrome Dev tools от Google, разумеется, вам нужно использовать тот инструмент, который вам больше нравится, т.к. нет никакой разницы что использовать. Есть разница, как это использовать. Немного освоившись, я принялся дебажить свой же код. Иногда в ход шли реальные работы, а иногда, код написанный специально для этого. Самый эффективный пример, который мне понравился, это to do list, который я написал специально для этих целей. В интернет, to do list является самым популярным примером не просто так - это достаточно простой, но гибкий пример, на котором можно строить задачи как для новичков, так и для проффи. Знания, которые я получил этой практикой мне пригодились не сразу, но зато к месту. Спустя время, я начал осознавать, что мне стало проще ковыряться в чужом коде, и вот тогда я понял, что изучение основ и практика не прошли даром. Повторюсь, что когда-то я задал такой же вопрос, а ответ на него пришел сам собой спустя годы изучения и практики. Я считаю, что вам нужно, просто, больше практиковаться и тогда не вы будете задавать вопросы, а вам. Успехов вам. Надеюсь, что мой недоответ немного вам поможет.
    Ответ написан
    1 комментарий
  • Как научиться понимать работу js в браузере?

    Kozack
    @Kozack Куратор тега JavaScript
    Thinking about a11y
    Отличный цыкл статтей на хабре https://habr.com/ru/company/ruvds/blog/337042/
    Ответ написан
    1 комментарий
  • Как научиться понимать работу js в браузере?

    dollar
    @dollar
    Делай добро и бросай его в воду.
    Сначала вы учите алфавит, затем учитесь читать и писать по слогам, потом уже можете читать слова целиком. Точнее, как бы воспринимать слова целиком, а не по буквам или по слогам, то есть это переход на новый уровень смысловых единиц. Дальше вы можете быстро читать, целыми предложениями. Хотя если встречается сложносочиненное/сложноподчиненное предложение, то не всегда удаётся ухватить его с первого раза. Ну а спустя годы, освоив скорочтение, вы спокойно читаете по диагонали.

    Профессиональный шахматист смотрит на доску и просто видит ходы. Причем из сотен вариантов он видит 2-3 нормальных и только над ними думает, остальные даже не замечает. И он не то чтобы просчитывал вперед, опять же он просто видит, как будет развиваться ситуация дальше. Использует ли он шахматные инструменты для анализа доски? Нет. Использует ли он какие-то учебники, которые помогают познать тайны шахматных правил? Нет. Правила просты до безобразия и можно выучить за 5 минут. А дальше только практика.

    Мы используем инструменты разработчика, в основном, для отладки. То есть, чтобы проверить ту или иную переменную или посмотреть отладочные сообщения в консоли. Там есть всякие приятные возможности, но основное - это консоль. Она помогает пощупать интерпретатор, познакомиться вплотную. Чему равно 0/0? Или typeof []? Консоль даст ответ на множество подобных вопросов. JS довольно запутанный язык, который тянет за собой кучу исторических особенностей, которые нет смысла помнить все. Но время от времени играть с интерпретатором можно для общего развития.

    А теперь главный вопрос. Для чего вам понимать работу js в чужих сайтах? Если у вас есть задача, так и делайте её. Какой смысл ковыряться в других сайтах?
    Ответ написан
    4 комментария
  • Как правильно формировать таблицы из массивов в JavaScript?

    coderisimo
    @coderisimo Куратор тега JavaScript
    1) имхо, лучше отвязывать данные от представления. так что данные с сервера приходят в чистом виде, а браузер уже отрисовывает таблицу
    2) надо изучать новые инструменты ) см.ниже
    3) из базы данных конечно, хотя из файла тоже можно
    4) есть много решений. какие-то лучше, какие-то хуже. я думаю стоит изучать имеющиеся, чтобы делать осознанный выбор
    5) накатал пример, спешал фор ю ))


    https://codepen.io/coderisimo/pen/QRNgxz?editors=1010

    Обрати внимание, что для отрисовки таблицы по массиву данных вообще ничего писать не надо. Код получается очень лаконичный. Добавить столбец дело 10 секунд. Большая часть js написана для замены одного набора данных на другой. Можно вообще написать метод который будет получать массив анализировать его и сам делать нужное кол-во столбцов.
    В общем, vue.js полезный и не слишком сложный инструмент для решения многих задач.
    Ответ написан
  • Почему не работает метод forEach( )?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега JavaScript
    Потому что, внезапно, forEach - это не то же самое, что reduce. Метод forEach используется исключительно для итерирования, а reduce для получения какого-то результата, поэтому forEach ничего не возвращает.

    Вам нужен метод map:
    var bisOne = [1,2,3,4,5].map(function(e){return e*10});


    Если очень хочется сделать это при помощи forEach, то должно быть так:
    var bisOne = [1,2,3,4,5];
    bisOne.forEach(function(e,i,arr){arr[i]=e*10});
    Ответ написан
    7 комментариев
  • Как объяснить конструкцию return this?

    Xuxicheta
    @Xuxicheta
    инженер
    constructor работает как конструктор только в составе es6 класса.
    А у вас тут это просто обычная функция, если вы ничего из нее не возвращаете, то она ничего и не вернет.
    Т.е. вы создаете объект, присваиваете ему прототип Person и обращаетесь к свойству constructor этого объекта.
    В объекте такого свойства нет, ищется в цепочке прототипов, находится и вызывается функция на которую указывает One.__proto__.constructor

    А правильно будет так

    class Person {
      constructor(name,age) {
        this.name=name;
        this.age=age;
      }
    };
    
    var One = new Person("Alex", 32);


    другой вариант
    var Person = {
        constructor: function(name,age){
        this.name=name;
        this.age=age;
      }
    };
    
    var One = Object.create(new Person.constructor("Alex", 32));
    console.log(One.name);

    но в этом случае One будет иметь прототипом не Person, а новый объект, созданный через Person.constructor
    Ответ написан
    6 комментариев
  • Как объяснить конструкцию return this?

    potapchino
    @potapchino
    все банально. смотрите на эту строчку кода:
    var One = Object.create(Person).constructor("Alex", 32);

    чему будет равна переменная One? она будет равна тому, что вернет метод .constructor(). а что он возвращает? ничего. а точнее undefined. когда функция явно ничего не возвращает, она возвращает undefined. поэтому строчка кода выше, эквивалента строчке:
    var One = undefined
    а ваш метод constructor на самом деле сейчас выглядит вот так:
    constructor: function(name,age){
        this.name=name;
        this.age=age;
        
        return undefined
      }


    Что означает конструкция return this?
    означет, что функция возвращает текущий контекст. контекстом в данном случае будет являтся объект, созданный с помощью Object.create()
    Ответ написан
    8 комментариев