О 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 (т.е. меньше)
- NaN (not-a-number) – результат числовой операции, которая завершилась ошибкой – запустите:
- string – строка, заключается в кавычки:
в JavaScript нет разницы между двойными кавычками и одинарными (привет PHP)
var str = "Hello World!";
- 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(); // удаляем и возращаем первый элемент
Последние два метода работают медленно, т.к. перестраивают весь массив