О HTML, CSS и JavaScript

Разделяй и властвуй

Тут стоит запомнить несколько простых правил:

• выносим JavaScript во внешние файлы
• никогда не пишем inline обработчиков событий "onclick="some()""
• выносим CSS из HTML во внешние файлы
• никогда не пишем inline стилей "style="color:red""
• и ещё разок для закрепления – не пишем inline!

Теперь приведу код, за который следует что-нибудь ломать (это пример плохого кода, уточняю для тех, кто не понимает намёков):

<script>

function doSomething(){ /* … */ }
/* раздается хруст сломанных костей запястья, чтобы не печатал */
</script>
<style>
p { line-height:20px; }
/* крхххх… берцовая кость, и на работу уже не пойдет */
</style>
<div style="color:red;font-size:1.2em">
<p onclick="doSomething();">Lorem ipsum dolor sit amet...</p>
<!-- тыдыщь, головой об стол… насмерть. как жест милосердия -->
</div>

Неясно, почему же это плохо? Похоже, вам просто не приходилось менять дизайн для уже готового сайта :) Проясню суть проблемы: вам ставят задачу – "надо поменять цвет шрифта для всех страниц сайта", коих может быть три десятка. Это могут быть не только HTML-файлы, а страницы какого-то шаблонизатора, разбросанные по двум десяткам папок (и это еще не самый плохой вариант). И тут появляется он — красный абзац. Вероятность услышать "слова поддержки" в адрес автора сего кода будет стремиться к единице. Насчет inline-обработчиков событий ситуация похожа, вот представьте себе — пишите вы JavaScript код, всё отлично, всё получается, пока вы не пытаетесь кликнуть по красному абзацу, он оказывается вам не подвластен, и живёт своей собственной жизнью, игнорируя все ваши усилия. Вы смотрите код, и опять кто-то услышит эти слова...

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

<div id="abzac">
<p>Lorem ipsum dolor sit
amet...</p> </div>

Стили можно будет легко повесить на <div> с идентификатором, как собственно и обработчик событий для нашего параграфа.

Абзац не параграф, но для красного словца, и лёгкости усвоения сгодится

Немного о JavaScript

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

Изучать хотите JavaScript и jQuery? Так силу познайте инструмента истинного:

• Developer Tools для Chrome и Safari (и других webkit-based браузеров)
• FireBug для FireFox
• DragonFly для Opera
• Developer Tools для IE8+

Список не полон, но console там есть, применять её надо уметь

О форматировании

Хотел бы сразу обратить внимание на форматирование JavaScript кода. Мой опыт мне подсказывает – лучше всего спроецировать стандарты форматирования основного языка разработки на прикладной – JavaScript, а если вы хотите чего-нить глобального, то я для вас уже погуглил:

• "JQuery Core Style Guidelines" [http://contribute.jquery.org/style-guide/js/]
• "Google JavaScript Style Guide" [http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml]
• Siemens "JavaScript Programming Guideline" [http://www.galasoft-lb.ch/myjavascript/Siemens_SBT_JavaScript_Coding_Guidelines.pdf]
• "Как писать неподдерживаемый код?" – вредные советы от Ильи [http://learn.javascript.ru/write-unmain-code]

В довесок поделюсь небольшим советом: все переменные, содержащие объект jQuery, лучше всего именовать, начиная с символа "$". Поверьте, такая небольшая хитрость экономит много времени.

И ещё – в конце каждой строки я ставлю точку с запятой, сам JavaScript этого не требует, но и лишним не будет.

Основы JavaScript

Переменные

Первое с чем столкнёмся – это объявление переменных:

var name = "Ivan"; 
var age = 32;

Всё просто, объявляем переменную, используя ключевое слово "var". Можно, конечно же, и без него, но делать я вам это настоятельно не рекомендую, т.к. могут возникнуть непредвиденные проблемы (о чём чуть позже расскажу).

На имена переменных наложено два ограничение:

• имя должно состоять только из букв, цифр, и символов "$" и "_"
• первый символ не должен быть цифрой

И ещё, регистр букв имеет значение:

var company = "Facebook";
// совсем другая "компания" 
var Company = "Google";

Константы

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

var USER_STATUS_ACTIVE = 1; 
var USER_STATUS_BANNED = 2;

Константы необходимы, чтобы избежать появления "magic numbers", сравните следующий код "if(status==2)" – о чём тут речь мало кому будет понятно, а вот код "if(status==USER_STATUS_BANNED)" уже более информативный

Типы данных

В JavaScript не так уж и много типов данных:

• number – целое или дробное число

  var answer = 42; 
  var pi = 3.1415;

  также существуют следующие специальные значения:
  • NaN (not-a-number) – результат числовой операции, которая завершилась ошибкой – запустите:

    Math.sqrt(-5);

    но учтите:

    (NaN == NaN) == false; 
    isNaN(NaN) == true;
  • Infinity – за гранью 1.7976931348623157E+10308 (т.е. больше)
  • -Infinity – за гранью -1.7976931348623157E+10308 (т.е. меньше)
• string – строка, заключается в кавычки:

  var str = "Hello World!";

  в JavaScript нет разницы между двойными кавычками и одинарными (привет PHP)
• boolean – булево значение, т.е. или "true" или "false"

  var result = true; 
• object – это объекты, на них остановлюсь подробнее чуть позже…
• null – специальное значение для определения "пустоты"

  var result = null;
• undefined – ещё одно специальное значение "неопределенности", используется как значение неопределённой переменной, т.е. переменная объявлена и существует, но значение ей ещё не присвоено:

  // переменная есть, но нет значения var a;
  alert(a);  // undefined
  if (typeof a == "undefined") { alert("variable is undefined");
  }
  // или может совсем не быть переменной if (window["a"] == undefined) {
  alert("variable does not exist");
  }
  

Во втором примере нас может ожидать сюрприз, если кто определит переменную "undefined", как обойти такую "неприятность" я ещё расскажу

Массивы

Массив – это коллекция данных с числовыми индексами. Данные могут быть любого типа, но я приведу самый простой массив со строками:

var users = ["Ivan", "Petr", "Serg"]

Нумерация массивов начинается с "0", так что для получения первого элемента вам потребуется следующий код:

alert(users[0]);  // выведет Ivan

Размер массива хранится в свойстве length:

alert(users.length);  // выведет 3
a[3] = "Danylo"; 
alert(users.length); // выведет 4

В действительности "length" возвращает индекс последнего элемента массива+1, так что не попадитесь:

var a = []; 
a[4] = 10;
alert(a.length); // выведет 5;

Для перебора массива лучше всего использовать цикл "for(;;)":

for (var i = 0; i < users.length; i++) {
alert(users[i]);  // последовательно выведет Ivan, Petr и Serg
}

Для работы с последними элементами массива следует использовать методы "push()" и "pop()":

users.push("Sidorov"); // добавляем элемент в конец массива var 
sidorov = users.pop(); // удаляем и возращаем последний элемент

Для работы с первыми элементами массива следует использовать методы "unshift()" и "shift()":

users.unshift("Sidorov"); // добавляем элемент в начало массива var 
sidorov = users.shift(); // удаляем и возращаем первый элемент

Последние два метода работают медленно, т.к. перестраивают весь массив