Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях

Основы языка javascript: введение в программирование для создания функциональных сайтов

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

Хочу отметить, что курс писался для начинающих javascript-овых разработчиков, однако он будет полезен и продвинутым девелоперам.

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

Мир JavaScript-а

Сначала хочу поведать вам несколько интересных фактов, которые нужно знать, если вы хотите писать на конкретно этом языке и вообще работать в ИТ-шной области.

Итак, главным разработчиком JavaScript был Бредан Эйх. Он вместе с командой опытных экспертов начал создавать новый язык, который сможет внедряться в разметку на html. Это было в далеком 1995 году.

Бредан Эйх

Некоторые из вас конечно могут сказать: «Как же далеком, если я застал тот год». В мире IT все развивается с бешенной скоростью (думаю вы обратили на это внимание), новые фреймворки и технологические решения появляются буквально каждый месяц.

Конечно языки выпускаются не с такой частотой, но большинство популярных и перспективных языков были созданы менее 15 лет назад (например, Swift презентовали только 2 года назад). Так что разработки быстро переходят из состояния «инновация» в состояние «старый (традиционный) инструмент для работы».

Очень часто новички путают JavaScript с Java, обращая внимание только на название и не понимая, в чем же собственно разница.

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

Java – это язык высокого уровня, код которого транслируется на виртуальной машине. В 1995 году он считался самым популярным и часто используемым языком для написания множества программ в разных сферах IT.

JavaScript-vs-Java

JavaScript же является встраиваемым языком в html-код и его главное предназначение – сделать страницу веб-ресурса интерактивной, т.е. более гибкой и «коммуникабельной». Он основан на ECMAScript, который в свою очередь является фундаментом еще для нескольких скриптовых языков.

JavaScript такое название получил не сразу. Изначально он был прозван Mocha, после переименован на LiveScript. Однако было принято решение воспользоваться хитрой маркетинговой фишкой и в название нового продукта включить слово «Java». Кстати, любое приложение, написанное на этом языке, называется скриптом.

Возможности JavaScript

Современный JavaScript является интерпретируемым языком. Это означает, что код программ обрабатывается и выполняется «как есть». Именно так браузеры работают со скриптами.

Если отойти в сторону от веб-разработки, то JavaScript можно найти и в других областях. С его помощью пишут разные виды приложений, игры, прикладное ПО и многое другое. Скрипты можно запустить абсолютно везде и не только в браузерах. Главное условие – наличие интерпретатора кода.

Основными преимуществами и навыками JavaScript-а являются:

  • Умение создавать пользовательские теги в разметке html, а также удалять и видоизменять существующие;
  • Быстрое и простое подключение к html;
  • Возможность реагировать на различные пользовательские действия: кликанье, перемещение курсора по веб-странице, набор символов на клавиатуре и т.д.;
  • Способность срабатывать в указанные моменты;
  • Взаимодействие с jquery и ajax. При помощи первой технологии, которая является библиотекой JavaScript, упрощается работа с многими элементами веб-сервисов и в том числе с ajax. Ajax в свою очередь позволяет реализовывать очень классный финт ушами: отправлять информацию на сторону сервера, получать ответ и обновлять данные на веб-странице, не перегружая ее целиком.
  • Спецификация JavaScript является общим стандартом и поэтому поддерживается всеми существующими браузерами;
  • Высокая скорость работы.

Также я хочу отметить, что код, написанный на JavaScript иногда может заменить css. Однако тут есть несколько нюансов.

html-css-javascript

Во-первых, ключевое слово в предыдущем предложении – «иногда». Да, некоторые свойства внешнего вида веб-сервисов можно прописать с помощью скриптов, однако далеко не все.

Все-таки css и css3 живут ради исполнения своей главной цели – обеспечение качественного и многофункционального дизайна страниц сайтов. И стоит им отдать должное, ведь справляются со своей задачей они безупречно.

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

Ограничения js

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

Для начала в JavaScript отсутствует строгая типизация. Это может порадовать только вначале, когда голову посещают мысли: «Наконец не надо заморачиваться по поводу типов переменных и их конвертации».

Ограничения js

Однако по мере увеличения сложности и объемов кода отсутствие типизации открывает свою настоящую сущность. Хотя бы взять компилятор. Он не может сообщить об ошибках несоответствия типов данных, так как сам не знает их до тех пор, пока не отработает нужная строчка программы.

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

Что касается наследования, то эту тему нужно подробно разбирать, ведь наследование в js – это совершенно другой механизм, отличающийся от привычного наследования в популярных языках. Пока скажу только, что он основан на прототипах и наследование выполняется через объекты.

Как подключается скриптовый код к html?

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

Если кто помнит мою публикацию о вставке css в html, то сразу поймет, о чем пойдет речь, потому что способы внедрения скриптов и стилевых правил идентичны.

Подключение кода

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

Однако если вы вставите код в любом другом месте, результат работы от этого не изменится. Сейчас я покажу стандартный пример первой программы на js, который стал своего рода традицией посвящения новичков в изучение нового языка программирования. Давайте поприветствуем мир!

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
    <script>
    alert( 'Hello, world!' );
  </script>
</head>
<body>
</body>
</html>

Если же создаваемый вами проект массивный или скрипт достаточно объемный, то используется внешнее подключение. Для этого прописывается все тот же парный тег, а в нем указывается тип и путь к файлу. Перепишем прошлый пример.

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
    <script type="application/javascript" src="Путь к документу с кодом скрипта">
  </script>
</head>
<body>
</body>
</html>

И третий способ – это внесение скриптовых элементов в теги. Такой вариант используется для определения событий (например, подключения события, которое срабатывает на щелчок мышки).

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
<script>обработка функции avg_salary()</script> //комментарий
</head>
<body>
<input type="button" onclick="avg_salary()" value="Подсчет среднемесячной зарплаты"/>
</body>
</html>

Обратите внимание на конец 5-й строки приложения. Таким образом в js создается комментарий.

Вот теперь я рассказал все, что нужно знать для общего понимания особенностей языка JavaScript и его предназначения. Далее статьи будут касаться конкретных тем разработки на js. Так что подписывайтесь на мой блог и следите за обновлениями. Пока-пока!

С уважением, Роман Чуешов

Прочитано: 13 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o:
  • Дмитрий

    Ох, как я хотел начать изучать java script, но постоянно что-то отвлекает или нет времени)

    13.08.2016 в 23:17
    • Роман

      Да времени никогда нет, особенңо если делом занимаешься всегда. А чтобы научиться программить с нуля нужна уйма времени. )

      08.09.2016 в 22:20
  • Денис

    Тоже времени ужасно не хвататет. Если начинать учить язык, так конкретно под нужды сайтостроения и с примерами. Надеюсь, у Руслана найду для себя много интересного. Хотя у меня в планах сначала регулярки выучить, а после JS.

    03.01.2017 в 04:39
  • Денис

    Знание языка JS для продвинутого пользователя стало не меньшей необходимостью, чем знание html и css. JS позволяет лучше узнать о принципах функционирования движка, создания вэб-страниц. Ни один движок не обходится без файлов JS.

    03.01.2017 в 04:41
  • Денис

    Что считается в третьем способе скриптовым элементом? Если парный тег script, то он не отличается от первого способа. Или это 8-я строка с input?

    18.01.2017 в 12:44
  • Денис

    У внешнего подключения плюс — не видно, что делает код джавы. Минус в том что для обработки надо делать лишний запрос к файлу на сервере, что более ресурсоёмко по времени.

    18.01.2017 в 12:48