JavaScript – Блог Stafox'a https://stafox.cc О программировании и веб-разработке Thu, 11 Feb 2016 07:20:37 +0000 en-US hourly 1 https://wordpress.org/?v=5.8.2 Grunt error: Cannot find module ‘coffee-script’ https://stafox.cc/grunt-error-cannot-find-module-coffee-script/ https://stafox.cc/grunt-error-cannot-find-module-coffee-script/#comments Tue, 20 Jan 2015 20:24:39 +0000 http://stafox.ru/?p=2365 Если Вы разворачиваете проект с grunt’ом и столкнулись с ошибкой $ grunt Error: Cannot find module ‘coffee-script’ Вот решение: Удаляем каталог node_modules из корневой директории проекта и запускаем npm install Мне помогло.

Сообщение Grunt error: Cannot find module ‘coffee-script’ появились сначала на Блог Stafox'a.

]]>
Grunt wants a coffee?
Если Вы разворачиваете проект с grunt’ом и столкнулись с ошибкой

$ grunt
Error: Cannot find module ‘coffee-script’

Вот решение:

Удаляем каталог node_modules из корневой директории проекта и запускаем

npm install

Мне помогло.

Сообщение Grunt error: Cannot find module ‘coffee-script’ появились сначала на Блог Stafox'a.

]]>
https://stafox.cc/grunt-error-cannot-find-module-coffee-script/feed/ 1
Особенность циклов for в JavaScript https://stafox.cc/peculiarity-of-cycles-for-in-javascript/ https://stafox.cc/peculiarity-of-cycles-for-in-javascript/#respond Sat, 18 Jan 2014 22:01:41 +0000 http://stafox.ru/?p=2141 Недавно столкнулся с небольшой неприятностью, а именно: по разному отрабатывал код с for…in и обычным циклом for. Передо мной стояла задача отрисовать график на canvas’е, данные которого хранились в JSON объекте. Для перебора всех свойств из объекта используется цикл по свойствам for..in. Так вот, цикл в разных вариациях вел себя по-разному. Чтобы разобраться в проблеме,

Сообщение Особенность циклов for в JavaScript появились сначала на Блог Stafox'a.

]]>
Недавно столкнулся с небольшой неприятностью, а именно: по разному отрабатывал код с for…in и обычным циклом for.

Передо мной стояла задача отрисовать график на canvas’е, данные которого хранились в JSON объекте. Для перебора всех свойств из объекта используется цикл по свойствам for..in. Так вот, цикл в разных вариациях вел себя по-разному. Чтобы разобраться в проблеме, я покажу как работает код в каждой вариации.

В качестве данных у нас будет вот такой небольшой объект, который представляет собой результат работы php-функции json_encode, которая была использована чтобы конвертировать в JSON выборку из БД. Реальная ситуация практически на любом проекте.


var data = {
    0: { 
        x: 5,
        y: 6
    },
    1: { 
        x: 10,
        y: 4
    },
    3: { 
        x: 15,
        y: 8
    }
};

Данный код должен отрисовать на canvas’е порядковый номер каждого элемента объекта увеличенной на 1 (т.е вместо 0, 1, 2 – 1, 2, 3) оранжевым цветом, шрифт Arial высотой 10 точек, в координатах, заданных в самом объекте.
for..in


var canvas = document.getElementById('chart_canvas');
var context = canvas.getContext('2d');
for (var i in data) {
    context.font = '10pt Arial';
    context.fillStyle = '#ff9900';
    context.fillText((i+1), data[i].x, data[i].y);
}

for


var canvas = document.getElementById('chart_canvas');
var context = canvas.getContext('2d');
for (var i = 0; i < data.length; i++) {
    context.font = '10pt Arial';
    context.fillStyle = '#ff9900';
    context.fillText((i+1), data[i].x, data[i].y);
}

Результат

А что же выйдет на самом деле: первый вариант отобразит вместо ожидаемых 1, 2, 3 - 01, 11, 21. Не верите? Проверьте сами!
Почему? Да потому, что имя свойства обязано быть строкой. Если использовано значение другого типа — JavaScript приведет его к строке автоматически. Когда мы конвертировали массив в JSON, а после передали его в JavaScript, мы и представить не могли, что js посмеет не спросив нас выполнить преобразование типов, и наш int благополучно станет string.
for..in:

console.log(typeof i); // string

for:

console.log(typeof i); // number

Это в данном примере ошибка легко выявилась. Я же, должен признаться, поломал голову, почему у меня циклы по-разному отрабатывают. Тем более, что

console.log(i);

Выдавал одинаковые значения.
Чтобы все было как нам нужно, необходимо выполнить приведение типов:


for (var i in data) {
    console.log(typeof i); // string
    i = +i;
    console.log(typeof i); // number
    context.font = '10pt Arial';
    context.fillStyle = '#ff9900';
    context.fillText((i+1), data[i].x, data[i].y);
}

А вот теперь, все отработает как положено.
Будьте внимательны и не забывайте про типы, и про то, что имя свойства объекта является значение типа string.

Сообщение Особенность циклов for в JavaScript появились сначала на Блог Stafox'a.

]]>
https://stafox.cc/peculiarity-of-cycles-for-in-javascript/feed/ 0
Простой калькулятор https://stafox.cc/prostoj-kalkulyator/ https://stafox.cc/prostoj-kalkulyator/#comments Wed, 13 Apr 2011 22:43:29 +0000 http://stafox.ru/?p=839  Помимо всего прочего, мне приходится время от времени учиться 🙂 Шучу, учёба занимает большое количество времени и сил. Так вот, по одной дисциплине, программирование сетевых приложений, мне дали задание написать калькулятор, и не простой, а на JavaScript. Говорю я так, потому, что до этого не было надобности учить JS. Код я и так понимал,

Сообщение Простой калькулятор появились сначала на Блог Stafox'a.

]]>


Помимо всего прочего, мне приходится время от времени учиться 🙂 Шучу, учёба занимает большое количество времени и сил. Так вот, по одной дисциплине, программирование сетевых приложений, мне дали задание написать калькулятор, и не простой, а на JavaScript. Говорю я так, потому, что до этого не было надобности учить JS. Код я и так понимал, и мог подправить чего-нибудь, если мне это было нужно.

Не скажу конечно, что я приобрёл сверхъестественные знания в области JS, но что приобрёл, то приобрёл. Задача моя была написать калькулятор, который бы мог слаживать, умножать, делить и вычитать. Ну я как всегда решил выпендриться, и дописать ещё функции очистки экрана, удаления символа, и осуществить работу с дробными числами.

Как я когда-то сказал: “JavaScript вдвойне вкусней, если в нём есть CSS” – бред конечно, а мне нравится. Вобщем дописал ещё пару css-строк, и отрисовал в photoshop’э дизайн кнопок, который почему-то посчитал схожим с iPhone.

В общем качаем моё чудо. Надеюсь пригодится. Ниже ссылки на исходник и psd:

Исходник, Дизайн и Демо

Сообщение Простой калькулятор появились сначала на Блог Stafox'a.

]]>
https://stafox.cc/prostoj-kalkulyator/feed/ 8