December 8th, 2010

default

Быстрое введение в язык JavaScript

Чему вы научитесь, прочитав это введение?

Текст, как видите, очень короткий - всего на одну длинную страницу.

Но он уже позволит вам понять и проверить на практике некоторые простые принципы написания программ на языке JavaScript.

А более сложные программы - это, в большинстве случаев просто хорошо подобранное сочетание простых кусочков.

Естественно, скоро появится продолжение. Для этого мне нужно знать, чего вы хотите. Задавайте вопросы в комментариях.


Лирическое введение

JavaScript - это язык программирования.
JavaScript подходит для любых задач.
JavaScript чаще всего сейчас используется для "оживления" страниц интернет-сайтов.
JavaScript один из самых простых и понятных языков программирования.
JavaScript сделает вас счастливыми.


Техническое предупреждение

Во всех языках программирования важно строго соблюдать синтаксис.
Это значит, что в программировании любая опечатка может изменить работу программы, а зачастую приводит к неработоспособности программы.
Поэтому нужно быть внимательными ко всем пробелам, точкам, запятым, кавычкам и написанию слов-команд (в том числе, и к большим-маленьким буквам в словах).
Хорошая новость в том, что все эти правила написания команд достаточно простые.


Для чего можно использовать JavaScript на вашем сайте

JavaScript можно использовать, например, для:
- Проверки заполнения форм до того, как они будут отправлены на сервер;
- Изменение цветов, размеров, положения элементов на странице;
- Создания анимационных эффектов (это "продвинутый" вариант предыдущего пункта);
- Отправки запросов на сервер и получение ответов (и, возможно, изменение частей страницы в соответствии с полученным ответом) без перехода на другую страницу (это так популярный сейчас AJAX);

Все эти действия, будучи скомбинированными в различных сочетаниях, позволяют сделать работу с вашим сайтом очень удобной и привлекательной.


Запомните одну важную вещь

После каждой команды в JavaScript нужно ставить точку с запятой:

document.write("Hello");
alert("Hello");


Самый простой вариант HTML-страницы с использованием JavaScript

Чтобы заставить заработать программу на языке JavaScript, достаточно написать вот такую "болванку" внутри файла с расширением .html и открыть этот файл в браузере (Internet Explorer, Mozilla, Opera...)

<html>
<head>
</head>
<body>
<script type="text/javascript">
</script>
</body>
</html>

А потом вставить между <script ...> и </script> текст программы.

Например, вывести сообщение в окошке:

alert("Это моё сообщение");

То есть, всё вместе будет выглядеть так:

<html>
<head>
</head>
<body>
<script type="text/javascript">
alert("Это моё сообщение");
</script>
</body>
</html>

Попробуйте прямо сейчас.

Чтобы упростить вам задачу, я написал небольшую программу, которая позволит вам проверять ваши программы на JavaScript прямо в браузере:

http://easysite-school.com/tools/js-tester/

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


Как вывести пользователю навязчивое сообщение

Знаете, иногда на сайтах вылезают такие окошки с каким-нибудь сообщением вроде "Подтвердите, что вы человек!" и кнопка "ОК", причём с сайтом невозможно ничего сделать, пока эту кнопку "ОК" не щёлкнешь?

Вот такие окошки выводятся в JavaScript очень просто.

Поэтому их так часто и делают, что это очень просто:

alert("А вот и я!");



Как показать пользователю ненавязчивое сообщение

Например, вывести это сообщение внутрь какого-нибудь блочка на странице.

Допустим, у вас есть абзац на странице и внутри этого абзаца специальное место для сообщения:

<p>Сообщение: <strong id="myMessage"></strong></p>

А вот то, что выполнится при щелчке на эту ссылку, изменить сообщение внутри тега STRONG выше.

<p><a href="javascript:document.getElementById('myMessage').innerHTML = 'А вот и снова я, но вежливее!';">Щёлкни, а?</a></p>

Это гораздо более вежливый вариант общения с пользователем, чем простой alert().


Как обратиться к любому элементу на странице

Вот так и обратиться:

document.getElementById('elementId');

Естественно, вместо "elementId" нужно подставить идентификатор того элемента, к которому вы хотите обратиться.

Напоминаю, что идентификатор - это то, что задаётся атрибутом id="" у любого тега.

Например,

<div id="superDiv">Это супер-div! :-)</div>

Как изменить HTML-код внутри элемента страницы

document.getElementById('здесьИдентификаторЭлемента').innerHTML = "И здесь впишите тот HTML, который вы хотели бы вставить внутрь элемента";

Обработчики событий

С каждым элементом страницы могут происходить какие-то события.
Мало того, они постоянно происходят.
Например, наведение указателя мышки на элемент (onmouseover); или наоборот, уведение мышки с поверхности элемента (onmouseout); или щелчок мышью по элементу (onclick).
Эти события очень легко использовать.
Достаточно указать в HTML-коде элемента, при каком событии и что вы хотите сделать.
Например, у вас есть вот такой абзац на странице:

<p>Щёлкни меня!</p>

Сделаем так, чтобы по щелчку мыши по этому тексту выводилось сообщение во всплывающем окне:

<p onclick="alert('Щёлкнули!');">Щёлкни меня!</p>

А теперь добавим изменение текста внутри абзаца при наведении.

<p onclick="alert('Щёлкнули!');" onmouseover="this.innerHTML = 'Навелись. Щёлк!';">Щёлкни меня!</p>

...и изменение текста внутри абзаца при убирании мышки с этого абзаца:

<p onclick="alert('Щёлкнули!');" onmouseover="this.innerHTML = 'Навелись. Щёлк!';" onmouseout="this.innerHTML = 'Ну, вот, увели мышку :-(';">Щёлкни меня!</p>


Почему разные кавычки?

Всё очень просто.
Внутри двойных кавычек нельзя использовать двойные, а внутри одинарных нельзя использовать одинарные.
Потому что, если какая-то часть команды начинается, например, с двойных кавычек, то JavaScript будет "думать", что на двойной кавычке эта команда и заканчивается.
Поэтому когда вам внутри одной команды нужно использовать строку в кавычках, вы просто пишите другие кавычки (одинарные - внутри двойных, и наоборот, - двойные внутри одинарных).


Как быстро найти место ошибки в программе

Иногда программа перестаёт работать по непонятной или не до конца понятной причине. Часто главной проблемой является найти место, где именно произошла ошибка. Это место легко найти, если вставлять вот такую команду:

alert(5);

(она просто выводит цифру 5 во всплывающем окне) в разные места программы и смотреть - повторилась ли ошибка до или после появления сообщения "5".

Соответственно, ошибка происходит выше или ниже по тексту программы, чем вы вставили эту команду, выводящую пятёрку.



Как использовать переменные

Переменная - это что-то вроде коробки, на которой написано её название.
Внутри коробки может быть что угодно, но наклеенный "ярлычок" всегда остаётся одним и тем же.
Хорошо, когда наклейка на коробке-переменной соответствует типу тех вещей, которые в эту коробку обычно складывают.
То есть, если на коробке-переменной написано "фрукт", то внутри будет яблоко, груша или персик, но не будет огурцов и картошки.
А если название переменной "бумаги", то там может лежать один листик или же целая пачка разнообразных бумажек, а может и ничего не лежать (и такое бывает). Но если что-то лежит, то обязательно - бумага.

Переменную в JavaScript создать легко.

Достаточно написать в любом месте:

var имяПеременной;

(вместо имяПеременной соответственно подставляете название, которое вам больше нравится).

Имя переменной должно состоять только из английских букв и цифр. На самом деле, там можно использовать и некоторые другие символы, но зачем вам сейчас забивать этим голову?

Чтобы "положить" какое-то значение внутрь переменной, нужно написать знак равенства:

имяПеременной = значениеПеременной;

Например,

var myNumber;
myNumber = 17;
var myText;
myText = "Я люблю JavaScript!";


Зачем вообще нужны переменные?

Например, чтобы можно было использовать одно и то же значение несколько раз:

var myText;
myText = "Это достаточно длинное сообщение, и чтобы набрать его два раза в программе, нужно потратить драгоценное время";
alert(myText);
alert(myText);

Как видите, набрать сообщение пришлось всего один раз, хотя вывели во всплывающем окне мы его дважды.


Как видите, статья получилась немного сумбурная :-) Но именно такой я её и задумывал - дать вам вводную информацию и потом дополнить её на основе тех вопросов, которые у вас появятся.

Я планирую написать продолжение для этой статьи.

Но для этого мне нужно знать, что вы ещё хотите узнать по JavaScript.

Задавайте вопросы в комментариях.