Обновить
128K+

JavaScript *

Прототипно-ориентированный язык программирования

138,9
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности
Формат публикации

Геттеры и сеттеры в Javascript

Время на прочтение5 мин
Охват и читатели50K
Javascript — очень изящный язык с кучей интересных возможностей. Большинство из этих возможностей скрыты одним неприятным фактором — Internet Explorer'ом и другим дерьмом, с которым нам приходится работать. Тем не менее, с приходом мобильных телефонов с актуальными браузерами и серверного JavaScript с нормальными движками эти возможности уже можно и нужно использовать прям сейчас. Но по привычке, даже при программировании для node.js мы стараемся писать так, чтобы оно работало в IE6+.

В этой статье я расскажу про интересный и не секретный способ указывать изящные геттеры и сеттеры и немножко покопаемся в исходниках Mootools. Частично это информация взята из статьи John Resig, частично лично мой опыт и эксперименты.
function Foo(bar){
    this._bar = bar;
}

Foo.prototype = {
    get bar () {
        return this._bar;
    },
    set bar (bar) {
        this._bar = bar;
    }
};


Читать дальше →

Умляуты в регулярных выражениях

Время на прочтение6 мин
Охват и читатели11K
Умла́ут или реже умля́ут (нем. Umlaut) — диакритический знак, указывающий на фонетическое явление умлаута гласных звуков в немецком и некоторых других языках. Обычно изображается в виде двух точек над буквой, в готическом же шрифте традиционно (за исключением последних десятилетий) выглядел как маленькая надстрочная буква e. В немецком присутствует в таких буквах, как Ää, Öö и Üü (называемых «A-умляут», «O-умляут» и «U-умляут» соответственно).
Wikipedia
Читать дальше →

Простой Javascript Benchmarker

Время на прочтение1 мин
Охват и читатели1.1K
Как вы замеряете производительность javascript кода?
У меня это происходило так:
  1. создаю файл index.html;
  2. копирую откуда-нибудь шаблон HTML;
  3. добаляю тэг script, в котором будет жить тестируемый код;
  4. если нужно замерить работу с массивами, то обязательно создаю или беру готовый генератор случайных массивов.
Читать дальше →

Пошаговая установка Node.js на Windows без виртуалок

Время на прочтение3 мин
Охват и читатели60K


Эта статья предназначена для тех, кого бесят мильён левых служб и драйверов, которые ставят любые виртуалки. Тем, кто будут ставить доп. пакеты Node.js
Все остальные могут скачать скомпилированный Node.js node-js.prcn.co.cc
Или же установить Node.js из-под виртуалки nodejs.ru/25

Прошу под кат
Читать дальше →

QooxDoo: запуск source-версии с denwer

Время на прочтение2 мин
Охват и читатели823
QooxDoo — достаточно хорошо проработанная JS-библиотека для разработки RIA (Rich Internet Applications). Углубляться в подробности библиотеки и описывать, откуда растут ноги проблемы не буду. Кто столкнулся с проблемой — тот поймет что к чему.
И так. Проблема заключается в том, что source-версия приложения, в том виде в котором ее собирает компилятор, не запускается с вебсервера (эмулирует denwer) а только как локальный файл.
Читать дальше →

Используем Coffeescript на Windows

Время на прочтение5 мин
Охват и читатели9.1K
CoffeeScript — это новый язык/надстройка/сахарная пудра над обычным JavaScript. Если кто ещё не слышал о нём, то можете прочитать эту отличную вводную статью.

По своей магической природе, сам компилятор для coffee-скриптов написан на coffee-скрипте. Но на наше счастье, пакет исходников CoffeeScript уже содержит готовые к употреблению js-скрипты. И сейчас я расскажу вам как их использовать в windows с помощью Node.js, Cygwin и Nant, ибо дело это не совсем простое, на первый взгляд.

Как жарить кофе?

История создания Javascript

Время на прочтение1 мин
Охват и читатели25K
Brendan Eich (создатель языка JavaScript) между делом пишет о том, как язык создавался, и почему он такой, какой есть.

JS был обязан «выглядеть как Java», только поменьше, быть эдаким младшим братом-тупицей для Java. Кроме того, он должен был быть написан за 10 дней, а иначе мы бы имели что-то похуже JS.
…
что-то вроде PHP, только еще хуже. Его босс Netcsape быстро «зарубил» (в июле 1995, если мне не изменяет память; я сдлелал JS в начале/середине мая), т.к. это был уже третий язык после Java и JS. Было и так трудно обосновать то, что у нас 2 новых языка программирования для web.
…

В то время мы должны были двигаться очень быстро, т.к. знали, что Microsoft идет за нами.
…

Считайте, что JavaScript (пожалуйста, только не «JScript») спас вас от VBScript.
…

10 дней на то, чтобы сделать лексер, парсер, компилятор в байткод (bytecode emitter), интерпретатор, встроенные классы и декомпилятор. Помощь была только с файлом jsdate.c — от Ken Smith из Netscape (который, по нашему излишне оптимистичному соглашению, склонировал java.util.Date — Y2K баги и т.д. Гослинг...).

Простите, времени было мало для того, чтобы сделать правильную оптимизацию хвостовой рекурсии. 10 дней почти без сна, чтобы сделать JS с чистого листа, заставить его «выглядеть как Java» (я сделал, чтобы он выглядел как C), и тайком протащить туда его спасительные фишки: first class functions (замыкания сделал позже, но они были частью плана сразу) и прототипы (примерно как в языке Self).

I'll do better in the next life.

Impact HTML5 Game Engine — движок на JS

Время на прочтение1 мин
Охват и читатели19K
Просматривая обзоры инди-игрушек наткнулся на весьма интересный проект — Biolab Disaster (да поможет ему НЛО выдержать хабраэффект) — браузерный платформер на чистых HTML5 & JavaScript, навеивающий воспоминания о тех временах, когда каждую игру делали с душой.
Коротенькая и незатейливая игрушка крутится необычайно быстро и красиво, оставляя за собой приятное впечатление, активированные чекпоинты и маленькие кусочки врагов :)
Выполнена она на движке автора этой же игры, Impact HTML5 Game Engine, в качестве демонстрации его возможностей. Движок на данный момент все еще находится в состоянии разработки, но предлагает уведомить нас электронным письмом по официальному выходу в свет.
За новостями можно так же следить в блоге автора.

На закуску — видео с геймплеем, некоторыми моментами создания игры и редактором уровней — с комментариями автора.

(Благодаря видео можно узнать ссылку на официально еще не опубликованный, но вполне рабочий level editor)

Флеш становится все менее значимым, что не может не радовать.
Приятного пятничного ковыряния в коде ^_^

extsrc.js — загружаем все скрипты асинхронно и уже после отрисовки страницы (даже с document.write)

Время на прочтение4 мин
Охват и читатели21K
Хочу Вам рассказать о штуке, которую я изобрел сегодня, чтобы ускорить процесс загрузки сайтов. Все вы знаете, что <script src="..."></script> задерживает отрисовку страницы, пока не загрузится этот скрипт. Если их десятки — это может сереьезно замедлить работу сайта — в результате пользователь 20 секунд пялится на пустую (или недорисованную) страницу из-за какого-нибудь тупящего социального виджета (умножить на десяток этих виджетов).

Не правда ли было бы круто, если бы можно было сказать <script extsrc="..."></script> ("extsrc" = "грузи потом"), чтобы скрипты загружались после того как страница отрисована?

Все бы хорошо, но есть document.write… Сегодня я наконец решил его проблему — представляю extsrc.js — скрипт, который запустит все скрипты после отрисовки страницы (даже если они содержат document.write — и правильно отрисуется все).

Результат? Супер-быстрая загрузка страниц, даже если там море всяких внешних скриптов.

Использование:

Заменяем <script src="..."> на <script extsrc="...">.

Итого получается:

<script src="http://whiteposts.com/extsrc_js/extsrc.js"></script>
<script extsrc="..."></script>

все остальное под катом

Юнит-тестирование и CodeCoverage для Javascript-кода

Время на прочтение4 мин
Охват и читатели8.5K
В этой заметке расскажу о своем опыте юнит-тестирования JS-кода, опыте использования среды выполнения тестов js-test-driver, ее возможности code coverage и скручивании ежа с ужом, а именно данных о code coverage от js-test-driver и генератора отчетов о покрытии PHP_CodeCоverage. Расскажу и покажу как получить вот такие отчеты о покрытии кода...
Читаем дальше...

JSNAV

Время на прочтение3 мин
Охват и читатели3K

Навигация по странице


Всё чаще и чаще в web появляются сайты, использующие навигацию, написанную на JavaScript. Типичный случай использования javascript для навигации: страница с меню и блоком контента, куда через AJAX подгружается содержимое:



Пользователь кликает по пункту, JavaScript грузит из сети содержимое, вставляет в блок контента, пользователь доволен: страница без перезагрузки показывает требуемое и траффика потребовалось меньше за счёт того, что не потребовалось грузить все эти HEAD, BODY, STYLE и прочие элементы.

Но вот проблема: URL страницы. Если на old scool сайтах на каждый пункт меню показывается новая HTML страница, и у пользователя есть вменяемый URI, который он может скопировать из адресной строки бразуера, послать другу или положить в закладки, то в случае AJAX интерфейсов в URI странице зачастую нет никаких ссылок на текущий контент документа.

Пересылая ссылку из адресной строки браузера другу, пользователь не может быть уверен, откроется ли документ с тем содержимым, что он просматривает сейчас, или откроется документ с начальным содержимым страницы.

Не с секрет, что для решения этой проблемы многие программисты кодируют ссылку на текущее просматриваемое содержимое в якорь (anchor) URI документа. К примеру, на сайте jqapi.com (скриншот которого приведён вначале топика) при выборе того или иного пункта меню якорь страницы меняется на #p={contentId}.
Читать дальше →

Сравнение производительности Javascript-движков с родным Linux приложением

Время на прочтение2 мин
Охват и читатели2.7K
Сегодня существует множество браузеров и все они как-то борются друг с другом ради рынка. Основные игроки: Internet Explorer, Mozilla Firefox, Google Chrome, Safari. И на сегодня они друг у друга копируют внешний вид (все пытаются походить на Google Chrome) и все поголовно хвалятся кто из них лучше соответствует HTML 5, правда главное, что они в нем нахваливают — это тэг canvas.

Вот и получается, что все они практически одинаковы, но как-то ведь им надо выделяться, чтобы быть лучшими? А здесь есть еще кое-что, что они всегда нахваливают — скорость работы. Лет 10 назад под скоростью работы браузера подразумевалась скорость загрузки страницы (например, часть армии поклонников Opera как раз из за этой возможности). А вообще на сегодня важна работа Javascript, реализацией которого кичится каждый браузер. Они даже движкам Javascript дают свои имена и это становится их очередной торговой маркой. Вот именно та самая скорость работы Javascript и является сегодня основным достоинством того или другого браузера.
Читать дальше →

Итоги конкурса JS1k

Время на прочтение4 мин
Охват и читатели762

Ближайшие события

Проверка существования свойств и методов объекта в Javascript

Время на прочтение1 мин
Охват и читатели68K
Нашел в коде Javascript библиотеки вот такую вот конструкцию:

if ('is_public' in profile) {
...
}


Очень заинтересовало, как это работает. До этого использовал оператор 'in' только для итерации, а тут вот такая вот проверка интересная. Покопавшись я обнаружил для себя, что оператор 'in' также можно использоваться для проверки существования метода объекта, свойства объекта и индекса элемента в массиве. Ниже несколько примеров:
Читать дальше →

Получаем Object из формы

Время на прочтение3 мин
Охват и читатели14K

Задача


При помощи javascript'а получить объект, содержащий данные формы. Набор полей и свойств должен задаваться разметкой формы. Зачем — чтоб из этого объекта получить json, xml, да и мало ли еще применений можно найти.
решение

Правильный захват контекста в Javascript

Время на прочтение5 мин
Охват и читатели37K
Довольно часто во многих статьях я вижу, как люди захватывают контекст this для использования в анонимной функции и удивляюсь — то, что уже стало стандартом — просто ужасная практика, которая противоречит всем канонам программирования. Вам знакома такая запись?
var self = this;
Может вам тоже стоит переосмыслить этот аспект?
Читать дальше →

Велосипедим, или Django-like Javascript Templates

Время на прочтение1 мин
Охват и читатели4.2K
Одним из компонентов нашего проекта Shopium.ua является административный интерфейс, который строится как полностью выполняющийся на клиенте rich internet application.

Для отрисовки данных приходящих с сервера в HTML нам часто нужен Javascript-шаблонизатор.

Различных шаблонизаторов для Javascript существует предостаточно. Даже в библиотеке ExtJS которую мы используем для своего проекта их целых два, однако их синтаксис и возможности каждого далеки от идеала.

К хорошему быстро привыкаешь, и мы быстро привыкли к синтаксису шаблонов Jinja2 который мы используем для генерации HTML на стороне сервера. И захотели такой же, но с перламутровыми пуговицамино для Javascript.

И сформировали к нему такие требования:
Читать дальше →

jQuery плагин визуального стека сообщений

Время на прочтение2 мин
Охват и читатели3.9K
Стояла задача динамического визуального отображения реакции на действия пользователя со стороны системы.
Другими словами: изменилось какое-то состояние объекта — вывести сообщения об удачном завершении сохранения изменения в базе/системе.
Написание плагина не заставило себя ждать...
 
Читать дальше →

Chrome / Chromium и клавиатура

Время на прочтение10 мин
Охват и читатели2.5K
В замечательном браузере Chromium (я думаю, это так же относится и к Google Chrome) события клавиатуры, которые можно обрабатывать JavaScript'ом, почему-то ведут себя очень странным, как по мне, образом. Я столкнулся с двумя интересными его проявлениями:

1. Событие onkeyup генерируется сразу же после события onkeydown, при этом при «зажатии» клавиши эта пара событий начинает генерироваться с завидной частотой в 25 миллисекунд, однако с некоторой паузой в начале.
2. Если после нажатия и удержания одной клавиши нажать следующую — происходит пауза ~500мс, и затем пара onkeydown/onkeyup уже генерируется для новой клавиши.

Ниже приведу свой способ обходить такие «милые» баги реализации.
CAUTION! Способ не идеален, и по большей части это dirty hack, чем работающее решение.

Читать дальше →

Javascript fluent html builder

Время на прочтение3 мин
Охват и читатели3.9K
Идея генерации html с помощью javascript меня не отпустила. Напомню eе суть с помощью jQuery
$("<div>", {"class":"something",id:10})

но так как читаемость оставляет желать лучшего, была реализована небольшая библиотека.
Читать дальше →