Пятница , 20 Январь 2017
Конкурс «Книга за вопрос»
ДомойПубликациикраткое введение в javascript

краткое введение в javascript

интерактивность хорошо. благодаря этому мы имеем такие незаменимые для многих вещи, как социальные сети, яндекс-карты, гугль-документы и ещё много всяких полезностей.

не появись в середине 90-ых javascript, обязательно возникло бы что-то другое: возможно, это что-то было бы лучше и удобнее, возможно — нет, но в любом случае, нам был явлен замечательный инструмент.

существует аналог javascript, который называется JScript — продукт от майкрософта, выпущенный для браузера internet explorer. в свою очередь эти языки отталкиваются от ECMAScript — версией JavaScript, стандартизованной международной организацией ECMA. для более глубокого понимания языка в целом, очень неплохо почитать эту книгу (pdf, 2.4 МБ), а также заглянуть на страничку с документацией по JavaScript от Mozilla (да-да, той самой, выпускающий Firefox).

браузерный javascript дал то, чего так не хватало html — интерактивность. однако использование его сопряжено с некоторыми особенностями. и дело тут не в том, что для манипуляций со страницей требуются какие-то специфичные приёмы. сложность в том, что человеку, прекрасно знакомому с серверным программированием и знающим html/css, понадобится немного абстрагироваться от этих знаний smile

звучит немножко дико, но в сущности, как и гениальное, всё довольно просто. итак, приступаем.

маленькое лирическое отступление
статья не ставит своей целью полновесно ввести пользователя в прекрасный мир 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 также необходим: он предотвращает переход браузера по ссылке, указанной в атрибуте href (решётка # перебросит пользователя в начало страницы, что в большинстве случаев не требуется). кстати, одна функция может обрабатывать несколько ссылок. для этого достаточно функции-обработчику в качестве параметра передать ссылку на объект, её вызвавший:

ссылка 1
ссылка 2


<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 можно считать оконченой. лучше всего, конечно, попробовать выполнить эти примеры и пощупать их руками.

Поддержать проект

WebMoney

Яндекс.Деньги


Рейтинг: 0

Автор публикации

1 207
не в сети 1 день

x64 (aka andi)

Комментарии: 1850Публикации: 303Регистрация: 02-04-2009
Так себеНеплохоХорошоЗамечательноСупер! (Оценок пока нет)
Загрузка...

Оставить комментарий

Ваш email не будет опубликован.Необходимы поля отмечены *

*

Добавьте изображение (jpg/gif/png)

Авторизация

Регистрация

Пароль не введен

Генерация пароля