JavaScript для начинающих | Введение

Это вводный курс по JavaScript для начинающих. В плане очередности это третий по счету предмет, который необходимо знать грамотному веб-разработчику. Первые два — это HTML и CSS, разумеется. Вэлкам!

Язык сценариев JavaScript был разработан Бренданом Эйхом (Brendan Eich) в 1995 году, как одно из расширений для браузера Netscape Navigator 2.0, о котором мало уже кто помнит. Но сам язык живет и процветает.

JavaScript для начинающих | Введение

В отличие от HTML и CSS это уже настоящий язык программирования. Можно сказать, что HTML и CSS — это только цветочки, а вот JavaScript — такие себе ягодки ягодки. Различаются они принципиально. HTML — банально разметка (или иначе — структура сайта), а CSS — внешний вид этой разметки. А вот JavaScript позволяет создавать именно программы, которые предписывают компьютеру пользователя выполнять активные действия.

Поэтому, если вы еще не знаете даже таких простых вещей, как HTML и CSS, то за JavaScript вам браться явно рановато.

Но пугаться не стоит. В отличие от старших братьев, типа Java или C++, JavaScript довольно простой язык. Освоить его может любой начинающий веб-разработчик. Во всяком случае, научиться им пользоваться совсем не трудно.

Программы, которые создаются на JavaScript, называются сценариями или скриптами. Следует четко понимать, что сценарии эти выполняются только на компьютере пользователя, а не где-то в сети. Поэтому во многом они зависят от настроек того же браузера, которые выставил у себя пользователь. Если он намеренно отключил у себя работу скриптов, то они попросту не сработают.

Зачем нужен JavaScript?

JavaScript для начинающих | Введение

Зачем вообще использовать какие-то скрипты на стороне пользователя? Ключевое слово здесь — обработка событий. Таким событием может стать, например, клик по кнопке в форме отправки данных. Для этого предусмотрены специальные атрибуты, начинающиеся с on.

Примеры таких атрибутов:

onclick — одиночный щелчок мышью;
onmouseover — размещение курсора мыши в области, которую занимает какой-либо элемент страницы;
onfocus — выделение (фокусировка) элемента. Например, поля формы, куда установлен курсор.

Окей, скажете вы, а зачем использовать какой-то JavaScript для обработки той же формы? Есть же php для этого. Заполнил, что требуют, и отправил себе с миром.

Все верно, JavaScript не обрабатывает данные, это делает php на удаленном сервере.

Но что если пользователь не все заполнил? Если пропустил обязательные поля, помеченные звездочкой *? Что тогда? Тогда с сервера к нему прилетит новая страница, на которой будет написано, какой он лох.

Принципиальная разница тут вот в чем: без использования JavaScript при отправке формы запрос будет в любом случае отправлен на удаленный сервер, даже если форма заполнена неправильно или не полностью. И от сервера будет получен ответ с ошибкой. Пользователю придется все вводить заново. И так каждый раз. А если применить JavaScript, то страница с формой не будет отправлена на сервер до тех пор, пока пользователь не введет правильные данные.

То есть, скрипт, как говорится, «не отходя от кассы», прямо в браузере пользователя проверит форму и выдаст сообщение в случае неправильного или недостаточного ее заполнения. Здесь он выступает как контролирующий орган.

Согласитесь, что это гораздо удобнее, занимает меньше времени и, безусловно, съедает меньше трафика. А в случае с мобильным подключением к сайту это тем более существенно.

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

Продвинутый читатель скажет: « — Ха! Так это же все можно сделать и на чистом CSS3 без всяких скриптов!»

Согласен, кроме слова «все». Все да не все. Всякие свистелки и перделки можно и на чистом CSS3 сотворить, но проверить правильность заполнения формы CSS никак не может. А кроме этого существует еще тысячи способов использовать скрипты JavaScript для более серьезных вещей. Иначе умные люди не стали бы впихивать JavaScript в тот же Bootstrap или создавать мегаполезную библиотеку скриптов jQuery.

Как включить JavaScript в страницу сайта

JavaScript для начинающих | Введение

Существует несколько вариантов подключения JavaScript на страницах сайта.

1. Небольшой код JavaScript можно внедрить непосредственно в тегах HTML. Например, следующий код будет выводить в поле формы текст «Ведите ваш E-mail», который при установке туда курсора будет автоматически исчезать, чтобы не мешать пользователю:

<input type="text" value="Введите ваш E-mail" onblur="if(this.value=='') {this.value='Введите ваш E-mail';}" onfocus="if(this.value=='Введите ваш E-mail') {this.value='';}" />

Как видите, нигде специально не обозначено, что это JavaScript, но браузеры это понимают и обрабатывают соответственно написанным командам.

Однако JavaScript активно использует те же символы, что применяются в HTML. Например, угловые скобки или прямые кавычки. Чтобы браузер не ошибся в интерпретации этих знаков, обычно сценарии записываются между специальными тегами:

<script></script>

2. Чуть более крупный код сценария JavaScript можно добавить непосредственно в том месте страницы, где ему надлежит срабатывать. Как было указано выше, его мы обрамляем тегами <script></script>.

Но это не всегда удобно, а в некоторых случаях и чревато.

К примеру, если пользователь отключил в своем браузере работу скриптов, то страница может «зависнуть» на этом месте и не загрузиться полностью. Поэтому обычно рекомендуется размещать скрипты в самом низу страницы перед закрывающим тегом </body>. В этом случае, даже если скрипт не сработает, то сама страница загрузится целиком и без лишних задержек.

3. Самый правильный способ подключения скриптов JavaScript — это вынести их в отдельный файл с расширением .js и подключить к странице посредством ссылки, как и в случае с листом стилей CSS, вынесенным в отдельный файл. Пример:

<script src="myscript.js"></script>

Кстати, подключать его тоже рекомендуется в самом низу страницы перед закрывающим тегом </body>. Это ускоряет загрузку страниц в целом.

На этом ознакомительный экскурс в JavaScript заканчиваем. В следующий раз напишем наш первый сценарий на этом замечательном языке. Подпишитесь на обновления блога Вебсовет, чтобы ничего не пропустить!

18.01.2017

Автор: Игорь Квентор
www.websovet.com

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (17 votes, average: 4,94 out of 5)
Загрузка...

Похожие записи:

Подпишитесь на рассылку блога Вебсовет, чтобы первыми получать самые интересные материалы:

4 комментария

  1. alexx

    20.01.2017

    Интересно рассказываете. Жду продолжения. У других написано сложно, а у вас все понятно пока.

  2. Игорь Квентор

    20.01.2017

    Отлично! Рад, что понравилось. Продолжение следует.

  3. Марина

    20.01.2017

    Ой,для меня это пока сложновато. )) А скажите, Игорь, обязательно нужно уметь программировать на этих скриптах? Я имею в виду, чтобы просто сверстать небольшой сайт, нужно ли это умение?

  4. Игорь Квентор

    20.01.2017

    Марина, это вовсе не обязательно. Вы можете просто использовать готовые скрипты, если они вам понадобятся. Тот же jQuery, например, прикрутить к сайту достаточно легко, и понимать что-то в программировании нет необходимости. Курс будет полезен тем, кто хочет разобраться, как вся эта кухня работает.

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