Опубликован: 28.02.2016 | Доступ: свободный | Студентов: 1834 / 156 | Длительность: 11:48:00
Лекция 1:

О HTML, CSS и JavaScript

Лекция 1: 12345 || Лекция 2 >

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

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

  • выносим 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, лучше всего именовать, начиная с символа "$". Поверьте, такая небольшая хитрость экономит много времени.

И ещё – в конце каждой строки я ставлю точку с запятой, сам 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(); // удаляем и возращаем первый элемент

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

Лекция 1: 12345 || Лекция 2 >
Наталья Маркова
Наталья Маркова
Ярослав Гаевой
Ярослав Гаевой

10 марта 2016 c 20:13 до 22:39 я сдавал экзамен. Однако, за два месяца статус не изменился: "Задание не проверено"

Когда ожидать проверки?