Рекомендации решившим начать изучать JavaScript

Если вы решили начать изучать JavaScript, то эта статья для вас. Надеюсь, что её прочтение избавит вас в будущем от множества ошибок и сделает его изучения более простым, быстрым и эффективным. В статье рассмотрены популярные ошибки и заблуждения насчёт JavaScript‘a, а так же рекомендации новичкам.

Мифы о JavaScript

1.1. JavaScript и Java — совершенно разные языки программирования

Многие до сих пор путают эти два языка программирования, однако, общего у них не так уж и много. JavaScript и Java несколько синтаксически схожи и способны выполнять некоторое динамическое содержимое веб-страниц в браузере (в случае Java это называется апплет — эта технология на сегодняшний день устарела и почти не используется). На этом их сходство заканчивается. JavaScript – это отдельный язык программирования, а не упрощённая версия Java.

1.2. JavaScript — не простой язык

Многие рассматривают JavaScript как язык простой и доступный для использования простыми пользователями. Это не так. Используя фреймворки и готовые плагины не знакомый с js человек может легко внести динамическую составляющую в веб-станичку, однако, сам написать подобные плагины, или более сложный скрипт, для решения нетривиальной задачи не способен. Популяризации этого мифа способствует распространение статей, которые, по сути, являются инструкциями по использования того или иного скрипта, но не затрагивают его внутреннее содержимое.

Рекомендации новичкам и популярные ошибки

2.1. Изучите HTML и CSS

Хотя, если вы читаете эту статью и заинтересовались js, то, скорее всего, вы уже знакомы с этими технологиями, в противном случае вначале изучите их, а только затем js. Этот язык программирования очень тесно взаимодействует с HTML и СSS. Решение многих задач на js сводится к отбору html-элементов и манипулированию с их атрибутами и css-свойствами.

2.2. Не читайте старые учебники и статьи

Технологии не стоят на месте, веб-стандарты и веб-браузеры развиваются, и то, что было некогда популярным сегодня уже устарело и не используется. Старых стандартов придерживаться незачем. Некоторые браузеры, как Netscape Navigator уже отжили свой век, некоторые отживают, как IE6, и бороться с их лагами не нужно. Не читайте учебники по js выпущенные раньше 2008 года. Если вы встретили скрипт, вставленный в html при помощи тегов

<script language="JavaScript"></script>

или если js-код закомменчен html-коментариями

<!-- -->

, то знайте, что он безнадёжно устарел.

2.3. Не копируйте куски чужого кода, если не знаете, что он делает

Ключевое слово здесь «куски». В подключении фреймворка такого как jQuery или копировании завершённого примера из учебника нет ничего плохого. Избегать копирования именно частей кода нужно из-за того, что вырванный из контекста код может работать у вас совершенно по-другому, а иногда и вовсе не работать.

2.4. Придерживайтесь одного стиля форматирования кода

Форматирование кода – это отступы, способ расстановки фигурных скобок, пробелов между операторами, переменными и т.д. Это не влияет на ход выполнения кода. Код, выдержанный в одном стиле всегда легче читать, понимать и отлаживать. К слову о расстановке фигурных скобочек: существуют два наиболее популярных способа это делать. Такой (египетские скобки):

function doSomething() {
	//code…
}

и такой:

function doSomething()
{
	//code…
}

Лично я придерживаюсь первого стиля и тому множество причин:
1. Код не раздувается в высоту т.к. не тратится лишняя строка на верхнюю скобку.
2. В js функции можно присваивать свойствам объектов. Если использовать второй стиль это будет выглядеть вот так:

btn.onclick = function ()
{
	alert("Hello!");
}

На мой взгляд, тут теряется связь между телом функции (alert(«Hello!»);) и первой
строчкой. Сложно отнести тело функции к свойству (btn.onclick).

Намного органичнее выглядит вот такой код:

btn.onclick = function () {
	alert("Hello!");
}

3. Многие среды разработки, например, Aptana диктуют программисту правила форматирования и не в пользу первого способа.
4. Египетские скобки (1 способ) более популярны и многим программистам будет привычнее читать ваш код.

2.5. Называйте переменные и функции осмысленными именами

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

// хорошо =)
var email = "mail@gmail.com";
 
// плохо =( переменную нужно было назвать, например, site
var a = "true-coder.ru";

 

2.6. Используйте инструменты отладки

Очень часто скрипт работает не так, как бы вам хотелось или не работает вовсе. Где же ошибка вам всегда помогут понять различные инструменты веб-разарботчика. Они есть в Opera (ctrl + shift + i), Chrome (ctrl + shift + i), и даже в IE9 (F12). Для Мозилы сущесвует плагин firebug и по умолчанию там есть js-консоль(ctrl + shift + k). Используйте их — это поможет сэкономить время и нервные клетки.

2.7. Изучайте чужие работы

Если вы не знаете, как решить ту или иную задачу посмотрите чужое решение. Копировать не нужно, просто посмотрите. Возможно, это натолкнёт вас на мысль, и вы напишете лучший код. Изучение чужих работ также позволит вам научится понимать чужой код, а это ценное умение, ведь не всегда вы будете писать скрипты с нуля, возможно, вам придётся дорабатывать чужие скрипты или исправлять в них баги.

2.8. Изучайте фреймворки

Использование фреймворков избавит вас от написания шаблонного кода и от забот об обеспечении кроссбраузерности. Кроме того, многие проекты реализованы с использованием фреймворков и, возможно, вам придётся дописывать их или что-то в них исправлять.

2.9. Не изобретайте велосипед

Хотя, это иногда полезно, в реальных проектах следует этого избегать. Если задача уже решена в используемом вами фреймворке или в нативных (родных) функциях языка не нужно её решать самому. В начале посмотрите, действительно ли нет каких-то готовых реализаций, и только в противном случае пишите код, но не забывайте про рекомендацию 2.3! Я однажды сам написал вот такой код для перевода числа в 16-ричную систему счисления. Это было необходимо для работы с цветом (в css-свойствах они задаются в 16-ричном формате).

function toHex(a) {
	var a = parseInt(a),
		hex = '0123456789ABCDEF'.split(''),
		str = '';	
 
	do {
		str = hex[a % 16] + str;		
		a = Math.floor(a / 16);
	} while(a < 0);
 
	return str;
}

Этот код прекрасно делал то, что от него требовалось, но он говорит лишь только о хорошем знании школьного курса информатики, но не о профессионализме программиста. Эта задача решалась намного проще.

function toHex(a) {
	return parseInt(a).toString(16);
}

 

2.10. Следите за новостями

Прогресс не стоит на месте. Возможности браузеров не редко пополняются новенькими фишками, которые облегчают жизнь js-программисту. Регулярно выходят в свет различные toolkit’ы, возможности фреймворков пополняются. Знание всех этих новостей позволит упростить написание ваших новых проектов и улучшить их. И ещё не унывайте, если у вас что-то не получается. Помните, что ошибок не совершает только тот, кто ничего не делает! Успехов вам!

  • Очень интересная и полезная информация, беру себе на заметку.
    Автору спасибо за проделанную работу.
    Пыхтелкин.

  • Изучение языка программирования JavaScript необходимость, для тех кто хочет создавать свои сайты, но разобраться в нем не так уж и просто. Я потратил несколько месяцев чтобы разобраться в основах, на большее у меня пока сил не хватило…

  • Виталий, не унывайте! Выучить его за такое время сложно, тем более если js для вас первый язык программирования, который вы учите. Продолжайте! Немного больше терпения и у вас всё получится.

  • Алекс

    Полезная статья.Читал с интересом так как хочу изучить этот язык.
    Автору спасибо за статью!

  • Юрий

    Довольно интересно,но мне лично удобнее на паскале скрипты клепать.Автор молоток,продолжай в том же духе.

  • Антон

    Статья полезная. Большая часть примеров кода JavaScript в сети в Camel case, но сам использую нижнее подчеркивание 🙂 . В приведенный пример кода наверное вкралась ошибка,
    вместо ( a 0 ) ? И на слово «проффесионализм» spellchecker ругается 🙂 .

  • Антон

    вместо (a 0) ?

  • Антон

    Отличный HTML-парсер )

  • Много полезного, нового для себя у Вас нашла! Спасибо!