интерактивность хорошо. благодаря этому мы имеем такие незаменимые для многих вещи, как социальные сети, яндекс-карты, гугль-документы и ещё много всяких полезностей.
не появись в середине 90-ых javascript, обязательно возникло бы что-то другое: возможно, это что-то было бы лучше и удобнее, возможно — нет, но в любом случае, нам был явлен замечательный инструмент.
существует аналог javascript, который называется JScript — продукт от майкрософта, выпущенный для браузера internet explorer. в свою очередь эти языки отталкиваются от ECMAScript — версией JavaScript, стандартизованной международной организацией ECMA. для более глубокого понимания языка в целом, очень неплохо почитать эту книгу (pdf, 2.4 МБ), а также заглянуть на страничку с документацией по JavaScript от Mozilla (да-да, той самой, выпускающий Firefox).
браузерный javascript дал то, чего так не хватало html — интерактивность. однако использование его сопряжено с некоторыми особенностями. и дело тут не в том, что для манипуляций со страницей требуются какие-то специфичные приёмы. сложность в том, что человеку, прекрасно знакомому с серверным программированием и знающим html/css, понадобится немного абстрагироваться от этих знаний 
звучит немножко дико, но в сущности, как и гениальное, всё довольно просто. итак, приступаем.
маленькое лирическое отступление
статья не ставит своей целью полновесно ввести пользователя в прекрасный мир javascript. будут рассмотрены несколько моментов, по которым мне задавались вопросы в разное время.
добавляем javascript на страницу
это, пожалуй, самое простое. контейнер обязательно вставляется между тегами <head>…</head> или <body>…</body>. возможные варианты:
<!-- контейнер для кода -->
<script type="text/javascript">
// код javascript
</script><!-- загрузка файла http://адрес_сайта/script.js -->
<script type="text/javascript" src="/script.js"></script><!-- код, фактически, аналогичен предыдущему. однако здесь используется очень полезный атрибут defer, который указывает, что выполнение скрипта следует отложить до тех пора, пока страница не будет загружена целиком -->
<script type="text/javascript" src="/script.js" defer="defer"></script>
здесь следует учитывать, что для xhtml-документов во 2 и 3 случаях код будет выглядеть несколько иначе:
<!-- загрузка файла http://адрес_сайта/script.js -->
<script type="text/javascript" src="/script.js" /><!-- загрузка файла http://адрес_сайта/script.js -->
<script type="text/javascript" src="/script.js" defer="defer" />
сверх-краткий экскурс по подключению javascript к странице завершён. теперь немного о том, чего же данный язык программирования умеет. а умеет он, надо сказать, очень много: произвольным образом изменять страницу и стили оформления (css), реагировать на различные события (щелчки и движения мыши, нажатия клавиш, потеря/получение фокуса и т. д.), перенаправлять пользователя на указанный адрес и даже обращаться к серверу без перезагрузки страницы (ajax). однако для первого раза всего этого многообразия не понадобится.
простое выполнение javascript
приведённый ниже код при загрузке просто выводит адрес текущей страницы:
<script type="text/javascript">
alert('вы находитесь тут: ' + location.href);
</script>
события javascript
код ниже также выводит адрес текущей странички, но делает это при щелчке на ссылке:
<p><a href="#" onclick="clickme1();return false">где я?</a></p>
<script type="text/javascript">
function clickme1() {
alert('вы находитесь тут: ' + location.href);
}
</script>
при щелчке по ссылке будет исполняться код из onclick. код return false также необходим: он предотвращает переход браузера по ссылке, указанной в атрибуте
<p><a href="#" onclick="return clickme2(this)">ссылка 1</a></p>
<p><a href="#" onclick="return clickme2(this)">ссылка 2</a></p>
<script type="text/javascript">
function clickme2(elem) {
alert(typeof elem.text == 'undefined' ? elem.innerText : elem.text);
return false;
}
</script>
здесь уже рассматривается сразу несколько моментов. во-первых, конструкция return clickme2(this) вызывает функцию clickme2(), а в качестве параметра передаётся ссылка на текущий объект. как видно, функция должна возвращать false (иначе будет происходить прокрутка страницы в начало). во-вторых, в функции используется тернарный условный оператор (условие ? код_если_условие_истина : код_если_условие_ложно). проблема в том, что в internet explorer текст ссылки можно получить с помощью свойства innerText, в то время, как в остальных браузерах для этого используется text. т. е. в коде мы проверяем наличие свойства text; если такого свойства нет, будет использоваться innerText. и последняя строка функции возвращает значение false, которое предотвращает переход по ссылке.
область видимости
чтобы было проще разобраться, посмотрите следующий код:
a = 1;
var b = 2;
function go1() {
var d = 4;
c = 3;for (var i = 0; i < 2; i++) alert(i);
function go2() {
return 5;
}var go3 = function() {
return 6;
}go4 = function() {
return 7;
}
}
</script>
теперь по порядку. если перед объявлением используется ключевое слово var, то переменная будет видна только в пределах текущего блока данных (это может быть, например, функция). теперь к описанию данных:
переменные a и b определяются вне всяких блоков, и в данном примере они становятся глобальными. с равным успехом их можно было определить, например, так: window.a = 1;. window — глобальный объект с одной стороны, доступный из любой функции, и текущее окно браузера с другой.
переменная d определена только в функции go1(), и доступны внутри этой функции (включая под-функции).
переменная c, несмотря на то, что она определяется в функции go1(), будет доступна глобально. эта запись аналогична следующей: window.c = 3;; т. е. переменная попадает в глобальную область видимости.
функции go2() и go3() по своей сути равноценны: обе из них определяются внутри функции go1() и, соответственно, могут быть вызваны только внутри данной функции. отличие заключается только в способе объявления: функция, объявленная как go3(), называется лямбда-функция.
и наконец, функция go4(), несмотря на то, что объявляется внутри go1(), является глобальной (т. к. при описании не используется ключевое слово var).
осталась всего одна переменная — i. здесь всё просто: т. к. переменная объявляется внутри функции go1(), то доступна она внутри данной функции. кстати, если после цикла выполнить код alert(i), выведется значение 2, из чего делается вывод: значение в цикле сначала увеличивается, а затем уже происходит сравнение.
пожалуй, микро-экскурсию в мир javascript можно считать оконченой. лучше всего, конечно, попробовать выполнить эти примеры и пощупать их руками.
днём интернета
шоколадкой для работы мозга
коробочкой ароматного чая для бодрости
продлением хостинга на +1 месяц
Автор публикации
(Оценок пока нет)
Загрузка...
