Основы языка JavaScript

Здравствуйте, дорогие читатели блога. В данной статье рассмотрим основы JavaScript для начинающих front-end разработчиков, разберем варианты внедрения сценариев языка в web-страницу, познакомимся с его синтаксисом.

Несколько лет назад при разработке пользовательской части сайта (front-end) было достаточно знания HTML & CSS, но время не стоит на месте и в данных реалиях верстальщик обязательно должен владеть языком JavaScript.

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

JS является полноценным языком программирования, с помощью него запускаются программы на сервере, но в сайтостроении, в подавляющем большинстве, используется клиентский JavaScript для быстрой и легкой интеграции с HTML & CSS на стороне клиента, то есть в браузере. Именно о клиентском JS и будет идти речь в рамках данной статьи.

Практически все современные web-сайты используют функционал языка JavaScript, и практически все современные браузеры включают в себя интерпретатор данного языка программирования, что делает JS одним из самых популярных и применяемых языков программирования для разработки сайтов.

При создании сайтов JavaScript, в основном, используется для оживления сайта, он придает элементам интерактивность. С помощью JS реализуются: фото и видео галереи, модальные окна, валидация и отправка форм, всевозможные выпадающие списки и вкладки, всплывающие подсказки, анимация элементов и еще много чего интересного.

Что такое JavaScript

Внедрение сценариев JavaScript в HTML

Внедрить JS скрипт в HTML код можно несколькими способами.

  • Добавить парный тег <script> ... </script> непосредственно в HTML код. Тег script можно использовать в секции headи в секции body.
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Внедрение сценариев</title>
  <script>Код скрипта</script>
</head>
<body>
  <h1>Заголовок статьи</h1>
  <p>Контент...</p>
  <script>Код скрипта</script>
</body>
</html>

При использовании более старых версий HTML к тегу script нужно добавлять атрибут type со значением text/javascript.

<script type="text/javascript">Код скрипта</script>
  • Подключить к HTML странице скрипт, располагающийся во внешнем файле. Скрипт пишется в отдельном файле с расширением .js, а называть файл можно как угодно, например: script.js. Для подключения файла к тегу script необходимо добавить атрибут src и полный или относительный путь к файлу.
<!-- Полный путь -->
<script src="https://site.com/script.js"></script>

<!-- Относительный путь -->
<script src="script.js"></script>

<!-- Для HTML4 -->
<script src="https://site.com/script.js" type="text/javascript"></script>

При таком подключении между парными тегами script код скрипта не пишется. Вставлять данное подключение также можно и в head, и в body. Такое внедрение JS скрипта является приоритетным, так как такой файл можно подключать к разным страницам, написав код всего один раз.

  • Встраивание JS кода через обработчик событий. Существуют несколько обработчиков событий, все они сработают при определенном действии пользователя на сайте: наведение курсора мыши, клик мыши, нажатие определенной клавиши на клавиатуре и т.д. Как только пользователь сделал необходимое действие с элементом, для которого атрибутом прописан обработчик событий, например: onClick (срабатывает при клике мышью по элементу), происходит вызов js кода, который указан значением данного атрибута.
<p onClick="Код скрипта">Контент...</p>
  • Передача JS кода в URL. Используя атрибут ссылки href, можно передать код скрипта, при этом необходимо использовать псевдопротокол JavaScript. Этот специальный тип протокола обозначает, что тело УРЛ адреса является произвольным JS кодом.
<a href="JavaScript:Код скрипта">текс ссылки</a>

Основы синтаксиса языка JavaScript

JavaScript – это регистрозависимый язык программирования, все: ключевые слова, имена переменных, функции и другие инструкции языка должны содержать одинаковые наборы букв. Например: variable и Variable – это две разные переменные.

Переменные объявляются с помощью оператора var, в именах переменных можно использовать буквы, цифры, нижнее подчеркивание, символ доллара и арабские цифры, при этом имя переменной не может начинаться с цифры. Можно объявить сразу несколько переменных одной строкой, перечислив их название через запятую. В конце каждой конструкции ставится «;».

// Объявление одной переменной
var variable;

// Объявление нескольких переменных
var variable, variable2, variable3;

Чтобы присвоить переменной какое-то значение используется оператор присваивания «=», затем пишется само значение. Если значение строковое, то строка берется в одинарные или двойные кавычки, а если числовое, то кавычки не ставятся. Еще есть логическое значение, которое возвращает истину true или ложь false. Так же, как и в других языках программирования, в JS можно оформить однострочные и многострочные комментарии.

//Строковое значение
var variable = 'Строковое значение переменной';
var variable = "Строковое значение переменной";

//Числовое значение
var variable = 123;

//Логическое значение
var variable = true;
var variable = false;

//Однострочный комментарий

/*
Многострочный комментарий
*/

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

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

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

Нажимая на кнопку «Добавить», я даю согласие на обработку своих персональных данных в соответствии с политикой конфиденциальности