Я пытаюсь создать cross domain AJAX форму загрузки и решить несколько вопросов. Я буду использовать Ajax Upload - наиболее удобный ajax загрузчик. Этот загрузчик прекрасно работает на одном домене и очень прост в настройке.

Примечание переводчика: Статья незавершенная, готового решения в ней нет, решил перевести ее потому-что часть кода использованного в ней мне помогло, однако повторюсь, что это не урок.

При собеседовании в одной весьма и весьма крупной российской IT компании, интервьюеры задавали мне каверзные вопросы по JavaScript. Если на алгоритмические вопросы я отвечал без проблем, то на вопросах, связанных с нативными методами в JavaScript троках ответить я не смог. Просто потому, что привык везде и всегда гуглить необходимую информацию. и если мне понадобилось разбить в JavaScript строку на части, то я сразу гуглю

Разбить строку в JS

Возможно вы знаете ответ, как это делать, но лишней, информация, которую я изложу ниже точно не будет. Как работать со строками, как работать с массивами, как объединять строки и массивы?

В этой короткой заметке расскажу об одной технике, казалось бы очень очевидной, но тем не менее новички в программирования на JavaSсript часто про нее забывают. 

Для начала обычный код, который Вы, я уверен, видели ни раз.

$('input').keyup(function(){
	$.post('autocomplite.php',{str:this.value},function(data){
		complite(data);
	});
})

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

Что в этом коде не так, как Вы считаете?

В моем предыдущем посте, я затронул тему использования файлов в JavaScript, с особым акцентом на том, как получить доступ к объектам File. Эти объекты, содержащие блок метаданных, можно получить только тогда, когда пользователь либо собирается загрузить файл через контрол формы или перетаскивает его методом Drag&Drop на веб-страницу. Итак у Вас есть эти метаданные, следующим шагом является чтение данных из них.

Тип FileReader

FileReader  имеет одно назначение: чтение данных из файла и сохранение их в переменной JavaScript. API намеренно разработан так, чтобы быть похожим на XMLHttpRequest, так как оба, по сути являются методом загрузки данных из внешних (вне браузера) ресурсов.Чтение осуществляется асинхронно, чтобы не блокировать браузер.

Есть несколько форматов, в которые  FileReader может представлять данные из файла,  формат должен быть задан, когда файл открывается для чтения. Чтение осуществляется с помощью вызова одного из следующих методов:

readAsText()  – возвращает содержимое файла как plain text
readAsBinaryString() – возвращает содержимое файла в виде строки закодированных двоичных данных (устарело – вместо него используйте readAsArrayBuffer() )
readAsArrayBuffer() – возвращает содержимое файла как ArrayBuffer (хорошо для двоичных данных, например, изображения)
readAsDataURL() – возвращает содержимое файла как data URL

На днях довелось мне делать один весьма интересный проект. Нужно было сделать онлайн графический редактор. Он должен был уметь рисовать графические примитивы: круги, прямоугольники, линии между ними и полигоны. Кроме того содержимое должно было легко экспортироваться в png. Долго тему рисования изучать не стал. Инструментов в сети предостаточно. Давно слышал про такую библиотеку как Raphaël, и все не было повода познакомится с ней поближе. Повод появился и я приступил. Далее приведу лишь несколько примеров и принцип работы.

Замечали ли вы, когда в соседней вкладке открыта Яндекс почта и приходит письмо, JS проигрывает короткий звук, а favicon вкладки меняется на цифру. Это очень удобно и позволяет быть достаточно оперативным, не используя сомнительный почтовый софт (привет тумберберд).

Похожая ситуация с Контактом. Когда вы не просматриваете страницу или вообще когда свернули браузер. 

Как это работает?

Раньше, мы использовали хитрости вроде 

$(window).on('mousemove', function () {})

Если мышка над вкладкой то все ок. Если нет то выдаем сообщение. Это работает, но с известной долей ошибок. 

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

Как часто вы используете отладчик браузера при разработке? Я использую его ежедневно/ежечасно/ежеминутно. Не только в разработке, но и в повседневной жизни. Посмотреть размер фото, размер шрифта, шрифт, отладить CSS, найти ошибку в JS, найти причину медленной работы скрипта, узнать какая из картинок не грузится - все это и многое другое, позволяет отладчик браузера. Я использую Google Chrome. На мой взгляд в нем  самый удобный отладчик из всех Developer Tools. Это целая система разработки с подсветкой синтаксиса и отладчиком кода. Как более эффективно работать с Developer Tools читайте ниже. Собрал все в одном месте, чтобы и самому не забыть и вам, уверен пригодится. 

Улучшаем юзабилити textarea. Подключаем к нему xedit.js и получаем более или менее сносный редактор. Что если, хочется большего. К примеру подсветки синтаксиса в textarea 
Всем известно, что textarea в плане редактирования текста очень неудобен. Нет ни табов, ни подсветки синтаксиса, ни показа ошибок. Нет ничего, к чему мы привыкли в современных редакторах типа notepad++

   В браузере Opera подключить собственные скрипты весьма просто. Создаем папку, закидываем туда свои .js файлы. Затем на вкладке нужного сайта кликаем правой кнопкой мыши, выбираем пункт меню настройки для сайта и  выбираем вкладку скрипты. В пункте Папка пользовательских скриптов JavaScript находим созданную папку. Вот и все. Скрипты автоматически будут загружены для соответствующем сайте. Единственное, что нужно помнить - это порядок их загрузки. Опыт показывает, что скрипты загружаются в алфавитном порядке. К примеру jquery.js будет загружен раньше чем user.js. Это нужно помнить, когда подключаете jQuery, если его еще нет (да, Вы не поверите, но есть еще сайты без jQuery). Еще один тонкий момент: скрипты будут загружены для всех страниц сайта, в том числе и для всех фреймов. И соответственно будут выполняться для всех фреймов. Чтобы скрипт выполнялся только в главном фрейме, я делаю так

if(  !self.parent.frames.length ){
// тут код
}

По тем или иным причинам не всегда есть возможность подключить к странице jquery Тогда многие привычные вещи приходится делать руками. 

На этом сайте есть много полезных скриптов, показывающих, как можно не подключая тяжелую библиотеку обойтись нативным js. 

Эта короткая заметка из той же серии: как установить фокус на поле ввода используя только javascript