· Переменная, объявленная внутри функции, считается локальной. Область видимости такой переменной ограничивается телом функции, в которой она объявлена.
· Переменная, объявленная вне функции, считается глобальной. К ней можно обращаться из любой точки сценария.
· Если локальная и глобальная переменные имеют одинаковые имена, то в теле функции локальная переменная "маскирует" глобальную.
20 Динамические Web технологии. JavaScript, операции над числовыми и строковыми типами данных
· Набор операторов в JavaScript, их назначение и правила использования в основном совпадают с принятыми в языке С++.
· Исключением является операция задаваемая символом "+". В JavaScript символ "+" определяет как суммирование числовых значений, так и конкатенацию строк.
· Так, например, в результате вычисления выражения
sum = 47 + 21;
переменной sum будет присвоено значение 68,
а после выполнения операции
sum = "строка 1 " + "строка 2";
в переменную sum будет записана последовательность Набор операторов в JavaScript, их назначение и правила использования в основном совпадают с принятыми в языке С++.
21 Динамические Web технологии. JavaScript массивы
· Для массива с числовыми индексами обычно используется объект типа Array.
arr = new Array("my", "array")
alert(arr.length) // 2
· Обычно используется другая, почти эквивалентная, запись массива, использующая квадратные скобки:
arr = [ "my", "array" ]
alert(arr[0]) // "my" <- нумерацияотнуля
· Новые элементы можно добавить в конец методом push.
· Для перебора значений используется цикл for.
arr = ["первый", "второй"]
arr.push("третий")
for(var i=0; i<arr.length; i++)нумерация ячеек памяти на языке С начинается с 0 {
alert(arr[i])
}
22 Динамические Web технологии. JavaScript, операторы условного перехода
Оператор if...else
Принцип работы и синтаксис мы уже знаем. Напомню ещё раз:
| if (условие) {этот код работает при выполненном условии} else {этот код работает, если условие не выполнено} |
А если при невыполненном условии нам вообще никакого кода не надо?
Тогда так:
| if (условие) {этот код работает при выполненном условии} // И больше ничего |
Оператор switch
С английского switch переводится как «переключать». Это оператор-переключатель. Вот его структура (в квадратных скобках обозначены необязательные части):
| switch (выражение) { case вариант1: код [break] case вариант2: код [break] [default: код] } |
Выражение — это контрольное, тестовое значение, с которым будут сравниваться варианты.
Выражение может быть числовым, строковым или булевым значением. При булевом значении возможны только 2 варианта: true и false (или 1 и 0). При остальных вариантов может быть сколько угодно.
Для каждого варианта пишется определённый код. Весь перебор вариантов заключён в фигурные скобки.
23 Динамические Web технологии. JavaScript, циклы
Цикл while
Цикл while имеет вид:
while (условие) {
// код, тело цикла
}
Пока условие верно – выполняется код из тела цикла.
var i = 3;
while (i) { // при i, равном 0, значение в скобках будет false и цикл остановится
alert(i);
i--;
}
Цикл do…while
Проверку условия можно поставить под телом цикла, используя специальный синтаксис do..while:
do {
// тело цикла
} while (условие);
Цикл, описанный, таким образом, сначала выполняет тело, а затем проверяет условие.
vari = 0;
do {
alert(i);
i++;
} while (i < 3);
Цикл for
Чаще всего применяется цикл for. Выглядит он так:
for (начало; условие; шаг) {
//... тело цикла...
}
Пример цикла, который выполняет alert(i) для i от 0 до 2 включительно (до 3):
vari;
for (i = 0; i< 3; i++) {
alert(i);
}
24 Динамические Web технологии. JavaScript, обработка событий
Для того, чтобы скрипт реагировал на событие - нужно назначить хотя бы одну функцию-обработчик. Обычно обработчики называют "on+имя события", например: onСlick.
Нужно сразу отметить, что JavaScript - однопоточный язык, поэтому обработчики всегда выполняются последовательно и в общем потоке. Это значит, что при установке обработчиков двух событий, которые возникают на элементе одновременно, напримерmouseover (мышь появилась над элементом) и mousemove (мышь двигается над элементом), их обработчики будут выполнены последовательно.
Существует несколько способов назначать обработчик на конкретное событие элемента:
1) Через атрибут HTML-тега
Обработчик события можно указать в виде inline-записи, прямо в атрибуте onСобытие.
Например, для обработки события click на кнопке input, можно назначить обработчик onСlick вот так:
<input id="b1" value="НажмиМеня" onclick="alert('Спасибо!');" type="button"/>
Когда использовать? Такой способ установки обработчиков очень удобен - он нагляден и прост, поэтому часто используется в решении простых задач.
У этого способа установки обработчика есть и минусы. Как только обработчик начинает занимать больше одной строки - читабельность резко падает.
Можно назначить и функцию. Например, пусть при клике на кнопку input запускается функция count_rabbits(). Для этого запишем вызов функции в атрибут onClick:
<html>
<head>
<script type="text/javascript">
functioncount_rabbits() {
for(var i=1; i<=3; i++) {
// оператор + соединяет строки
alert("Из шляпы достали "+i+" кролика!")
}
}
</script>
</head>
<body>
<input type="button" onclick="count_rabbits()" value="Считатькролей!"/>
</body>
</html>
2) Через свойство события
Самый близкий родственник описанного выше способа - установка функции-обработчика через свойство oncобытие соответствующего элемента. Этот способ тоже будет работать в любом браузере с поддержкой JavaScript.
Для этого нужно:
1. получить элемент
2. назначить обработчик свойству on+имя
Вот пример установки обработчика события click на элемент с id="myElement":
document.getElementById('myElement').onclick = function() {
alert('Спасибо')
}
<input id="myElement" type="button" value="Нажмименя"/>
Конечно, можно и не создавать анонимную функцию, а использовать любую уже готовую:
functiondoSomething() {
alert('Спасибо')
}
document.getElementById('button').onclick = doSomething;
Все вызовы типа getElementById должны запускаться после описания соответствующего HTML-узла, а лучше - после окончания загрузки страницы.
Описанная установка обработчика через свойство - очень популярный и простой способ.
У него есть один недостаток: на элемент можно повесить только один обработчик нужного события.
25 Стандарты HTML. Язык HTML 5. Валидный код
Когда впервые появились Интернет и веб-сайты, разработчики столкнулись с технической проблемой – как организовать и структурировать информацию текстовых и графических документов для удобства представления в браузерах?
Выход был найден в HTML – языке разметки гипертекста. В те времена каждый разработчик сайта практически сочинял свой собственный язык, не думая о совместимости. В результате для каждого сайта требовался собственный браузер.
Естественно, так не могло продолжаться долго. Как только интернет стал представлять коммерческий интерес, возникла настоятельная потребность немедленно унифицировать и стандартизировать информационное пространство интернета.
СТАНДАРТ HTML 2.0
Первым признанным стандартным языком разметки гипертекста стал HTML 2.0. До этого разработчик никак не могли договориться между собой. Сайты на этом языке создавались самые простые и имели множество ограничений. И вскоре Консорциум Всемирной Паутины предложил следующую версию.
HTML 3.2
Третья версия тоже ничем особенным не отличилась. Продолжалась разработка новых возможностей, делались попытки унифицировать браузеры разных воспроизводителей.
Стандарт HTML 4.0
Четвертая версия HTML уже позволяла качественное создание сайта. Были устранены многие ненужные теги. Чтобы облегчить веб-страницы, произведено разделение текстовой информации и ее форматирование путем введения такого элемента, как каскадные таблицы стилей.
Именно это и позволило добиться по-настоящему стандартного отображения сайтов в браузерах от разных производителей.
К концу 20 века четвертый HTML практически исчерпал свои возможности развития, и консорциум C3W предложил новую, расширенную версию под названием XHTML.
СТАНДАРТ XHTML 2.0
После некоторых экспериментов устоялась вторая версия расширенного языка разметки гипертекста. Собственно расширение состояло в применении формата XML для более строгой и систематизированной организации самого HTML. По сути, XHTML представляет собой все те же теги, но передаваемые в виде документа XML.
Такой процесс требует определенного ужесточения требований к HTML:
1. Допустимы только строчные символы.
2. Все теги должны быть закрытыми: <>.
3. Форматирование текста внутри тела документа недопустимо.
4. Обязательно использование каскадных таблиц стилей CSS.
Таким образом, новая версия стала “более строгой и стандартной”. Для того чтобы полностью реализовать все новые возможности, потребовались и новые версии браузеров. В то же время, старые браузеры могут воспроизводить XHTML-сайты.
Совершенно достигнуто?
Как бы не так. Компьютерные технологии не стоят на месте, появились мобильные компьютеры, возникли облачные сервисы, интернет перестал быть роскошью. Социальные сети были настоявшим прорывом в области массмедиа. Пользователи продвинулись, и от веб-сайтов стало требоваться гораздо больше возможностей, чем просто удобное обеспечение информацией.
Таким образом, XHTML был признан тупиковым путем развития еще до начала 21 века. Даже расширенного языка гипертекста оказалось недостаточно для создания динамических, интерактивных и мультимедийных веб-ресурсов.
Была попытка усилить статические сайты за счет включения программных элементов (скриптов) и реорганизации структуры веб-страницы в формате объектной модели документа. Сайты стали более быстрыми и интерактивными. Но, слишком сложными для верстки, отладки и настройки.
Знаете, что такое DHTML?