Javascript что это такое простыми словами

Что такое JavaScript?

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

Необходимые навыки:	Базовая компьютерная грамотность, знание основ HTML и CSS.
Цели:	Знакомство с JavaScript и его возможностями, способами его подключения к веб-странице.

Определение высокого уровня

JavaScript это язык, который позволяет вам применять сложные вещи на web странице — каждый раз, когда на web странице происходит что-то большее, чем просто её статичное отображение — отображение периодически обновляемого контента, или интерактивных карт, или анимация 2D/3D графики, или прокрутка видео в проигрывателе, и т.д. — можете быть уверены, что скорее всего, не обошлось без JavaScript. Это третий слой слоёного пирога стандартных web технологий, два из которых (HTML и CSS) мы детально раскрыли в других частях учебного пособия.

— это язык разметки, который мы используем для визуального и смыслового структурирования нашего web контента, например, определяем параграфы, заголовки, таблицы данных, или вставляем изображения и видео на страницу. — это язык стилей с помощью которого мы придаём стиль отображения нашего HTML контента, например придаём цвет фону (background) и шрифту, придаём контенту многоколоночный вид. язык программирования, который позволяет вам создать динамически обновляемый контент, управляет мультимедиа, анимирует изображения, впрочем, делает всё, что угодно. Окей, не все, что угодно, но всё равно, это удивительно, что можно достичь с помощью нескольких строк JavaScript-кода.

Три слоя прекрасно выстраиваются друг над другом. Возьмём простой текст для примера. Для придания структуры и смыслового назначения тексту, разметим его с помощью HTML:

Затем мы добавим немного CSS, что бы это выглядело симпатичнее:

И наконец, добавим немного JavaScript для придания динамического поведения:

Попробуйте кликнуть по тексту чтобы увидеть, что произойдёт (Вы так же можете найти это демо на GitHub — смотрите исходный код, или запустите вживую)!

JavaScript может делать намного больше — давайте выясним это более детально.

Так что же он действительно может делать?

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

• Хранить данные внутри переменных. В примере выше, мы, например, запрашивали ввод нового имени, которое нужно было ввести, затем сохраняли имя в переменной name .
• Операции над фрагментами текстов (известными в программировании как «строки»). В примере выше мы брали строку «Player 1: » и присоединили её к значению переменной name для получения полного текста, например: »Player 1: Chris».
• Запускать код в соответствии с определёнными событиями происходящими на web странице. В нашем примере выше, мы использовали click (en-US) событие, для определения момента, когда кнопка была кликнута, в соответствии с этим запускался код, который обновлял текст.
• И многое другое!

Ещё более увлекательным является функциональность, созданная поверх основного языка JavaScript. Так называемые интерфейсы прикладного программирования (API) предоставляют вам дополнительные сверхспособности для использования в вашем коде JavaScript.

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

Они обычно делятся на две категории.

API-интерфейсы браузера встроены в ваш веб-браузер и могут отображать данные из окружающего компьютерного окружения или делать полезные сложные вещи. Например:

• API-интерфейс DOM (Document Object Model) позволяет вам манипулировать HTML и CSS, создавать, удалять и изменять HTML, динамически применять новые стили к вашей странице и т. д.. Каждый раз, когда вы видите всплывающее окно на странице или какое-то новое содержимое, Как мы видели выше в нашем простом демо), например, это DOM в действии.
• API геолокации извлекает географическую информацию. Так Google Maps может найти ваше местоположение и нанести его на карту.
• API Canvas и WebGL позволяют создавать анимированные 2D и 3D-графики. Люди делают некоторые удивительные вещи, используя эти веб-технологии — см. Chrome Experiments и webglsamples.
• Аудио и видео API, такие как HTMLMediaElement и WebRTC, позволяют делать действительно интересные вещи с мультимедиа, такие как проигрывание аудио и видео прямо на веб-странице, или захватывать видео с веб-камеры и отображать его на Чужой компьютер (попробуйте наш простой демонстрационный снимок, чтобы понять идею)

Примечание: Большинство наших демо не будут корректно работать в старых браузерах — поэтому будет хорошей идеей, для запуска вашего кода установить один из современных браузеров , таких как Firefox, Chrome, Edge или Opera . Также понадобится более подробно рассмотреть раздел по кроссбраузерному тестированию, когда вы приблизитесь к разработке производственного кода (т.е реального кода, который будут использовать клиенты).

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

позволяет вам отображать ваши последние твиты на вашем веб-сайте. позволяет вам встраивать пользовательские карты на ваш сайт и другой подобный функционал.

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

Доступно ещё больше! Но пока не заостряйте на этом внимание. Вы не сможете создать следующий Facebook, Google Maps или Instagram после 24 часов изучения JavaScript — сначала нужно изучить основы. И именно для этого вы здесь — давайте двигаться дальше!

Что JavaScript делает на вашей странице?

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

Давайте составим краткий бриф, что же происходит когда мы загружаем страничку в браузере (первое упоминание в статье Как работает CSS). Когда вы загружаете страничку в браузере, вы запускаете ваш код (HTML, CSS и JavaScript) внутри исполняемой среды (внутри вкладки браузера). Это как будто фабрика берёт сырьё (некий код) и выдаёт продукцию (веб-страничку).

Код JavaScript выполняется JavaScript-движком браузера, после того как код HTML и CSS был обработан и сформирован в веб-страницу. Это гарантирует, что структура и стиль страницы уже сформированы к моменту запуска JavaScript.

Это хорошо, так как часто использование JavaScript заключается в динамическом изменении HTML и CSS в целях обновления пользовательского интерфейса посредством Document Object Model API (как упоминалось выше). Если бы запуск JavaScript осуществлялся прежде загрузки HTML и CSS, то это привело бы к возникновению ошибок.

Безопасность браузера

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

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

Последовательность выполнения JavaScript

Обычно, когда браузер сталкивается с блоком JavaScript, он запускает его по порядку, сверху вниз. Это значит, что вам нужно осторожно выбирать порядок. Например, вернёмся к блоку JavaScript, который мы видели в первом примере:

Здесь мы выбираем абзац текста (строка 1), а затем добавляем к нему обнаружение событий (строка 3), чтобы при нажатии на этот абзац выполнялся блок кода updateName() (строки 5–8). Блок кода updateName() (эти типы многократно используемых блоков кода называются «функции») запрашивает у пользователя новое имя, а затем вставляет это имя в абзац для обновления отображения.

Если вы поменяете порядок первых двух строк кода, он перестанет работать — вместо этого вы получите ошибку возвращаемую в консоль браузера — TypeError: para is undefined . Это значит, что объект para ещё не существует и вы не можете добавить к нему обнаружение событий.

Примечание: Это очень частая ошибка — вы должны быть осторожны, чтобы объекты, на которые ссылается ваш код, существовали до того, как вы попытаетесь что-то с ними сделать.

Интерпретируемый против компилируемого кода

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

С другой стороны, ккомпилируемые языки преобразуются (компилируются) в другую форму, прежде чем они будут запущены компьютером. Например, C / C ++ компилируются в язык ассемблера, который затем запускается компьютером.

Оба подхода имеют разные преимущества, которые на данном этапе мы обсуждать не будем.

Серверный против клиентского кода

Вы так же можете услышать термины серверный и клиентский код, особенно в контексте веб-разработки. Клиентский код — это код, который запускается на компьютере пользователя. При просмотре веб-страницы, клиентский код загружается, а затем запускается и отображается браузером. В этом модуле JavaScript мы явно говорим о клиентском JavaScript.

С другой стороны, серверный код запускается на сервере, затем его результаты загружаются и отображаются в браузере. Примеры популярных серверных веб-языков включают PHP, Python, Ruby и ASP.NET. И JavaScript! JavaScript так же может использоваться, как серверный язык, например в популярной среде Node.js — вы можете больше узнать о серверном JavaScript в нашем разделе Dynamic Websites – Server-side programming.

Слово динамический используется для описания и клиентского JavaScript, и серверного языка — это относится к возможности обновления отображения веб-страницы/приложения, чтобы показывать разные вещи в разных обстоятельствах, генерируя новый контент по мере необходимости. Серверный код динамически генерирует новый контент на сервере, например достаёт данные из базы данных, тогда как клиентский JavaScript динамически генерирует новое содержание внутри браузера на клиенте, например создаёт новую HTML таблицу, вставляя в неё данные полученные с сервера, затем отображает таблицу на веб-странице, которую видит пользователь. В этих двух контекстах значение немного отличается, но связано, и обычно оба подхода (серверный и клиентский) работают вместе.

Веб-страница без динамического обновления контента называется статической — она просто показывает один и тот же контент все время.

Как добавить JavaScript на вашу страницу?

JavaScript применяется к вашей HTML странице точно так же, как CSS. И если CSS использует элементы <link> для внешних стилей и <style> для встроенных в HTML, то для JavaScript нужен только один друг в HTML мире — элемент <script> . Давайте узнаем, как это работает.

Внутренний JavaScript

1. Сначала, сделайте локальную копию нашего файла-примера apply-javascript.html. Сохраните его в удобное для вас место.
2. Откройте этот файл в вашем браузере и в вашем текстовом редакторе. Вы увидите, что HTML создаёт простую веб-страницу с активной кнопкой.
3. Затем, перейдите в текстовый редактор и добавьте следующие строки перед закрывающим тегом </head> :

Примечание: Если ваш пример не работает, пройдите ещё раз все шаги и проверьте, сделали ли вы все правильно. Сохранили ли вы вашу локальную копию начального кода, как .html файл? Добавили ли ваш <script> элемент после тэга </body> ? Ввели ли вы JavaScript именно так, как показано? JavaScript регистрозависимый, и очень привередливый. Поэтому вам нужно вводить синтаксис именно так, как показано, в противном случае оно может не работать.

Примечание: вы можете увидеть эту версию на GitHub-е как apply-javascript-internal.html (посмотреть вживую).

Внешний JavaScript

Это отлично работает, но что если мы хотим поместить наш JavaScript в отдельный файл? Давайте сейчас разберёмся с этим.

1. Сначала, создайте новый файл в той же папке, что и ваш файл-пример HTML. Назовите его script.js — убедитесь, что у имени файла расширение .js, так как оно распознается, как JavaScript.
2. Замените ваш текущий элемент <script> на следующий:

Примечание: вы можете увидеть эту версию на GitHub-е как apply-javascript-external.html и script.js (посмотреть вживую).

Инлайновые JavaScript обработчики

Обратите внимание, что иногда можно столкнуться с частями JavaScript-кода, который живёт внутри HTML. Это может выглядеть примерно так:

Вы можете попробовать эту версию в нашей демонстрации ниже:

Эта демонстрация имеет те же функциональные возможности, что и в предыдущих двух разделах, за исключением того, что элемент <button> содержит встроенный обработчик onclick , который запускает функцию при нажатии кнопки.

Но пожалуйста, не делайте этого. Это плохая практика — загрязнять ваш HTML кодом JavaScript, и она не эффективна — вам нужно будет добавить атрибут onclick=»createParagraph()» к каждой кнопке, к которой вы хотите подключить JavaScript.

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

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

Примечание: Попробуйте отредактировать вашу версию apply-javascript.html и добавить ещё несколько кнопок в файл. После перезагрузки вы должны увидеть, что все кнопки создают параграф, если кликнуть на них. Классно, да?

Стратегии загрузки скриптов

Существует ряд проблем, связанных с загрузкой скриптов в нужное время. Всё не так просто, как кажется! Распространённой проблемой является то, что весь HTML-код на странице загружается в том порядке, в котором отображается. Если вы используете JavaScript для манипуляции элементами на странице (или, точнее, в DOM – Объектной Модели Документа), ваш код не будет работать, если JavaScript-код загрузится и распознается раньше HTML-кода, с которым вы пытаетесь взаимодействовать.

Комментарии

Так же, как и в HTML и CSS, возможно писать комментарии в вашем JavaScript-коде, что будет проигнорировано браузером, и существует только для того, чтобы давать подсказки вашим друзьям-разработчикам о том, как работает код (и лично вам, если вы вернётесь к коду спустя 6 месяцев и не сможете вспомнить, что вы делали). Комментарии очень полезны, и вы должны часто их использовать, особенно для больших приложений. Вот два типа комментариев:

Однострочный комментарий пишется после двойного слеша (//), например:

Так, например, мы можем описать наш последний демо-пример JavaScript подобными комментариями:

Выводы

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

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

Что такое JavaScript и зачем он нужен

Знакомимся с главным языком фронтенд-разработки, сравниваем его с Java и запускаем первую программу.

Иллюстрация: Merry Mary для Skillbox Media

На JavaScript написан практически весь фронтенд — всё, что мы можем увидеть в интернете. А относительно недавно он обосновался в бэкенде, на смартфонах и даже в прошивках умных чайников. Язык востребован и регулярно занимает первое место в рейтинге Stack Overflow.

Разбираемся, чем хорош JavaScript, где применяется и подходит ли он новичкам.

Что ещё за скрипт такой

JavaScript — это язык управления элементами на сайте. Он умеет красить кнопки, запускать анимации, загружать эффекты, и всё это — без перезагрузки страницы. Например, вы нажали кнопку «Нравится» — вспыхнуло красное сердечко. Или навели курсор на три точки, и выпало меню. В обоих случаях на странице сработал скрипт . А JavaScript как раз главный по ним в интернете — отсюда и его название.

JavaScript появился в далёкие девяностые, когда интернет был совсем юным и состоял в основном из текста и гиперссылок. Тогда компания Netscape захотела себе новый язык для веба в дополнение к HTML и CSS.

На то было две причины:

• Благородная — чтобы люди в браузере могли не только читать текст, но и запускать разные меню, окошки, мигающие кнопки и так далее.
• Коммерческая — чтобы утереть нос Microsoft. В то время между Netscape Navigator и Internet Explorer шла «браузерная война», и Netscape решила привлечь разработчиков к работе в своём браузере с помощью нового языка.

После этого сайты стали выглядеть примерно так:

А ещё Netscape договорилась с Sun Microsystems, чтобы язык считался «младшим братом» Java для браузеров. Так появилось название JavaScript — не потому, что языки сильно похожи, а потому, что Java тогда был на хайпе. В общем, во всём вините маркетологов 🙂

Пишем первую программу

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

JavaScript относится ко второму типу языков. С одной стороны, это удобно — меньше мороки и рутины, больше творчества. С другой — без интерпретатора он просто не запустится. К счастью, все современные веб-браузеры дружат c JavaScript.

Вот как запустить скрипт в браузере:

1. Берём код.
2. Вставляем в браузер.
3. Запускаем.

Кажется, звучит несложно. Давайте что-нибудь напишем. Откроем консоль браузера (Ctrl + Shift + J или Cmd + Opt + J) и вставим туда вот этот код:

Введите своё имя и нажмите OK. Теперь сайт умеет с нами здороваться!

Возьмём задачу посложнее. Допустим, у вашего учителя музыки юбилей, и вы готовите ему в подарок небольшой сайт-открытку. Добавили туда красивую надпись, фотографии, стихи. Вроде всё есть, но чего-то не хватает — ну, точно, воздушных шариков! Непорядок. Берём этот код и вставляем в консоль:

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

Где ещё нужен JavaScript

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

Веб-приложения

Возьмём, к примеру, «Google Документы». Вспомните, как много там функций: можно менять шрифт, выравнивать абзацы, вставлять картинки. Без JavaScript нам бы пришлось перезагружать страницу после каждого действия — проще плюнуть и уйти в Word. А так у нас есть удобная облачная альтернатива.

Бэкенд

JavaScript умеет запускаться на сервере и может быть полноценным бэкенд-языком — как Python, С# и Java. Подключаем к нему специальный движок Node.js, и можно писать вообще что угодно: чаты, соцсети, компьютерные программы и так далее. В Netflix, например, пишут на нём и серверную логику, и интерфейс.

Расширения для браузера

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

Мобильные приложения

Допустим, вы работаете тимлидом в небольшой IT-компании, создаёте облачное хранилище. Однажды к вам приходит продакт-менеджер и требует приложение для Android — чтобы клиенты могли заходить в хранилище с телефона. А у вас вообще-то стартап, и денег на Android-разработчика нет.

Можно пойти сложным путём и обучить команду программировать на Kotlin. А можно схитрить и попросить фронтендера написать программу на JavaScript. Потом просто компилируете её под Android с помощью React Native и получаете нативное приложение.

Игры

Помните динозаврика из Google Chrome? Который прыгает через кактусы, если пропал интернет. Вы тоже можете написать такого на JavaScript, и ещё много других простых игрушек: гонок, бродилок, головоломок, стратегий и так далее.

Чем JavaScript отличается от Java

Многие начинающие разработчики думают, что Java и JavaScript — родственники. Мол, сначала нужно выучить Джаву, а придачу к ней ещё Скрипт, и дело в шляпе 🙂 На самом деле это совсем разные языки — они по-разному устроены и используются для разных задач.

Типизация

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

А в JavaScript типизация динамическая, поэтому типы задавать не нужно. С одной стороны, свобода и рок-н-ролл, а с другой — возможны разные аномалии. Например, у JavaScript можно спросить, что больше — банан или 150, и получить ответ:

Java на такие фокусы начнёт ругаться:

Зато так безопаснее — язык защищает программиста от его собственных ошибок. Не сравнивайте бананы с числами!

Компиляция

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

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

Применение

Магия языка Java — в его виртуальной машине (JVM). Виртуальная машина позволяет запускать код на любом устройстве, где она установлена. Удалось запустить машину — запустится и программа. Поэтому на Java удобно писать софт для самых разных устройств: серверов, компьютеров, смартфонов, банкоматов и даже роботов.

У JavaScript совсем другая задача — управлять элементами страницы. Можно написать полезный скрипт и добавить функций на сайт. А если ещё освоить Node.js, то вообще никакой другой язык не нужен — можно хоть розетку запрограммировать.

Что легче учить

Короткий ответ — JavaScript. Чтобы написать первый скрипт, не нужно тратить время на установку виртуальной машины и разбираться в типах данных. А из инструментов понадобятся лишь блокнот и браузер. Выбирайте его, если вы совсем новичок и хотите быстро вкатиться в разработку.

С Java на первых порах придётся попотеть, зато потом вы сможете запускать сложные системы. А ещё с Java легко перейти на другие языки — Kotlin или C#.

Сколько платят программистам

Программисты на JavaScript всегда востребованны — они нужны банкам, IT-компаниям, рекламным агентствам и всем, кто ведёт бизнес в интернете. Да и платить им готовы неплохо — в среднем 156 000 рублей в месяц (по данным «Хабр Карьеры»). А джун без опыта может получать около 60 000 рублей.

Если сравнивать разные грейды, то зарплаты JavaScript-разработчиков выглядят так:

• от 40 до 100 тысяч — джуны;
• от 80 до 225 тысяч — мидлы;
• от 200 до 450 тысяч — сеньоры.

Работы у «джаваскриптеров» хоть отбавляй. Согласно hh.ru, в Петербурге и Москве для них открыто 5000 вакансий — это больше, чем для программистов на Java, PHP или C#.

С чего начать?

Почитайте книгу «Выразительный JavaScript» Марейна Хавербеке — это отличное пособие по языку с примерами, заданиями и без воды. Хороший онлайн-учебник у программиста Ильи Кантора — по нему можно дойти от азов до продвинутых концепций вроде ООП и прототипов.

Дальнейший путь зависит от вашего стека. Если метите во фронтенд, начните с HTML и CSS. На сайте Code Basics есть бесплатные курсы по ним — с понятной теорией и тренажёрами. Потом разберитесь в работе браузера, сетевой безопасности и определитесь с фреймворком: React.js, Vue.js или Angular.JS.

Если больше нравится бэкенд, в первую очередь изучите Node.js — он позволяет разворачивать JavaScript на сервере. Во-вторых, освойте SQL-запросы, базы данных и сетевые протоколы. По последней теме посоветуем бессмертную классику Эндрю Таненбаума «Компьютерные сети», которая обновляется каждые 3–5 лет.

Резюмируем

JavaScript отлично подходит для «вкатывания» в IT. На первых порах с ним не нужно погружаться в технические детали и сложные концепции, а писать код можно в блокноте или простом редакторе. На JavaScript написан фронтенд большинства сайтов, а у некоторых — даже серверная часть. Поэтому программисты, которые освоили этот язык, будут востребованны, пока жив интернет 🙂

What Is JavaScript? A Basic Introduction to JS for Beginners

JavaScript is a lightweight programming language that web developers commonly use to create more dynamic interactions when developing web pages, applications, servers, and or even games.

Developers generally use JavaScript alongside HTML and CSS The scripting language works well with CSS in formatting HTML elements. However, JavaScript still maintains user interaction, something that CSS cannot do by itself.

JavaScript’s implementations within the web, mobile application, and game development make the scripting language worth learning. You can do so via learning platforms like BitDegree or by exploring free JavaScript templates and applications on code hosting platforms like GitHub.

What Is JavaScript?

JavaScript is a scripting language for creating dynamic web page content. It creates elements for improving site visitors’ interaction with web pages, such as dropdown menus, animated graphics, and dynamic background colors.

JavaScript Explained! – Video Tutorial

Watch our video to learn all about one of the most popular lightweight programming languages.

What Makes JavaScript Great?

JavaScript has a number of advantages that make it a better choice than its competitors. The following are several benefits of using JavaScript:

• Simplicity ‒ having a simple structure makes JavaScript easier to learn and implement, and it also runs faster than some other languages. Errors are also easy to spot and correct.
• Speed ‒ JavaScript executes scripts directly within the web browser without connecting to a server first or needing a compiler. Additionally, most major browsers allow JavaScript to compile code during program execution.
• Versatility ‒ JavaScript is compatible with other languages like PHP, Perl, and Java. It also makes data science and machine learning accessible to developers.
• Popularity ‒ plenty of resources and forums are available to help beginners with limited technical skills and knowledge of JavaScript.
• Server load ‒ another perk of operating on the client-side is that JavaScript reduces the requests sent to the server. Data validation can be done via the web browser, and updates only apply to certain web page sections.
• Updates ‒ JavaScript development team and ECMA International continuously update and create new frameworks and libraries, ensuring its relevance within the industry.

What Are JavaScript’s Weaknesses?

Like any other programming language, JavaScript has several limits you need to consider. The following are some of the disadvantages of using JavaScript:

• Browser compatibility ‒ different web browsers interpret JavaScript code differently, causing inconsistency. Therefore, you should test your JavaScript script in all popular web browsers, including their older versions, to avoid harming the user experience.
• Security ‒ JavaScript code that runs on the client-side is vulnerable to exploitation by irresponsible users.
• Debugging ‒ while some HTML editors support debugging, they’re less efficient than other editors. Since browsers don’t show any warning for errors, finding the issue may be challenging.

How Does the JavaScript Code Work on Your Web Page?

JavaScript is either embedded directly into a web page or referenced via a separate .js file. When a user visits that web page, their browser will run the script along with the HTML and CSS code ‒ creating a functional page displayed via the browser tab.

The script is downloaded to the visitors’ machines and processed there. This differs from a server-side language, in which the server processes the script before sending it to the browser.

When encountering a block of JavaScript code, a web browser will process it from top to bottom. Since it’s order-sensitive, make sure to reference the objects or variables within the block first before modifying them. Having variables with no values will result in an undefined error.

How Does JavaScript Differ from Other Programming Languages?

The reason why JavaScript is one of the most popular programming languages is the fact that it’s highly versatile. Many developers consider it their primary choice unless they need a specific function that JavaScript doesn’t provide.

Let’s take a look at a few of the most popular programming languages:

C# – an object-oriented language for building applications that run within the .NET ecosystem. It’s statically typed, meaning that its variables are identifiable at compile-time. Unlike JavaScript, C# has operator and conversion overloading, allowing you to alter data types.

Java – an object-oriented programming language designed to support large programs and applications. Unlike JavaScript, Java is strongly typed, meaning that its variables must be bound to specific data types. Java requires a just-in-time (JIT) compiler to run its script.

PHP – a server-side language commonly seen in PHP-based content management systems like WordPress. Its main goals is to transfer information to and from a database, assemble HTML files, and track sessions. Unlike JavaScript, PHP can access databases directly and accepts both lowercase and uppercase variables.

Ruby – a general-purpose programming language that supports metaprogramming, meaning that it can analyze and modify other programs and itself. Its most popular framework, Ruby on Rails, lets you build big web applications cost and time effectively. JavaScript’s implementation on Node.js takes inspiration from the Ruby on Rails framework.

How Do You Add JavaScript Code to a Website?

There are two ways of adding JavaScript code to an HTML web page ‒ internally and externally.
Internal JavaScript uses the <script> tag within the body of the HTML script to encapsulate all the JavaScript code.

Here’s an example of internal JavaScript with the <script> tag:

You can also embed its script on HTML event attributes, prompting the browser to execute it when an event is triggered ‒ this script type is called inline JavaScript:

On the other hand, external JavaScript involves storing the code in a separate .js file and then recalling it within the HTML page. Developers often use this method when working on large projects, as doing so keeps the script organized.

Plus, it lets you reuse the script in multiple HTML pages, which is something that many developers value greatly.

For example, adding the following script to an HTML page lets you recall an external JavaScript file named script.js:

Here’s an example of how to reference an external JavaScript file:

You can create and modify JavaScript code using a text editor. We have compiled the five best text editors to narrow down your search.

Keep in mind that there are two types of text editors ‒ what-you-see-is-what-you-get (WYSIWYG) editors and textual editors. A WYSIWYG text editor is more suitable for beginners as it displays how the code blocks look on a page.

For example, TinyMCE is a popular WYSIWYG text editor used in WordPress.

On the other hand, a text-based editor offers more freedom in customizing the code but requires HTML skills to operate. Some of the most popular text editors include Sublime Text, Atom, and Notepad++.

For more in-depth information, check our tutorial on how to add JavaScript to your website. The tutorial comes with examples and a further explanation about JavaScript’s implementation. The JavaScript official website also provides tons of demo tutorials for beginners and enthusiasts alike.

Conclusion

JavaScript is often used alongside HTML and CSS to add interactivity to websites. In some cases, JavaScript may tap into third-party libraries to provide advanced functionality without the developer having to code it from scratch each time.

Value-wise, JavaScript beginners can expect the following benefits:

• Easy to learn and implement into certain web page elements or events
• Backed by a strong community of developers
• Reduces the requests sent to the server
• Compatible with many other languages
• Faster and more lightweight than other programming languages

We hope this article helped you understand what JavaScript is and its function within websites and applications. If you’d like to learn coding JavaScript, check out our guide on learning to code.

If you have any more questions or suggestions, feel free to leave us a comment.

What Is JavaScript FAQ

What Is JavaScript and Why Is It Used?

JavaScript is a programming language used to create dynamic and interactive content on web applications and browsers.

What Is the Difference Between Java and JavaScript?

Java is an OOP programming language used to create applications that run in virtual machines or browsers, while JavaScript is an OOP scripting language used to run code in web browsers. Java code needs to be compiled, while JavaScript is in text format.

Jordana is a digital marketing and web development enthusiast. She loves spending her time in front of her laptop, working on new projects and learning new things. When she’s not busy with work, you can find her traveling the world in search of the best sushi!

Что такое JavaScript?

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

Для чего используется JavaScript?

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

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

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

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

Как работает JavaScript?

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

Движок JavaScript

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

JavaScript на стороне клиента

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

Разработчики веб-приложений пишут код JavaScript с разными функциями, связанными с различными событиями, такими как щелчок мыши или наведение курсора. Эти функции вносят изменения в HTML и CSS.

Ниже представлен обзор того, как работает JavaScript на стороне клиента.

1. Браузер загружает веб-страницу, когда вы ее посещаете.

2. В процессе загрузки браузер преобразует страницу и все ее элементы, такие как кнопки, ярлыки и выпадающие поля, в структуру данных, называемую объектной моделью документа (DOM).

3. Движок JavaScript браузера преобразует код JavaScript в байткод. Этот код является посредником между синтаксисом JavaScript и машиной.

4. Различные события, такие как щелчок мыши по кнопке, вызывают выполнение связанного блока кода JavaScript. Затем движок интерпретирует байткод и вносит изменения в DOM.

5. Браузер отображает новую DOM.

JavaScript на стороне сервера

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

Сторона клиента и сторона сервера

Слово динамический описывает как клиентский, так и серверный JavaScript. Динамическое поведение – это способность обновлять отображение веб-страницы для генерации нового контента по мере необходимости. Разница между JavaScript на стороне клиента и на стороне сервера заключается в генерировании нового контента. Код на стороне сервера динамически генерирует новый контент, используя логику приложения и изменяя данные из базы данных. JavaScript на стороне клиента, с другой стороны, динамически генерирует новый контент внутри браузера, используя логику пользовательского интерфейса и изменяя контент веб-страницы, которая уже находится на стороне клиента. Смысл немного отличается в этих двух контекстах, но они связаны, и оба подхода работают вместе для улучшения пользовательского опыта.

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

Что такое библиотеки JavaScript?

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

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

Визуализация данных

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

В таких библиотеках, как Chart.js, ApexCharts и Algolia Places, есть встроенные функции, которые можно использовать для создания веб-приложений, отображающих данные в виде графиков и карт.

Манипулирование DOM

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

Формы

Математические и текстовые функции

Многие веб-приложения должны решать математические уравнения, обрабатывать даты, время и текст. Вместо того чтобы отправлять все такие запросы на сервер, эффективнее обрабатывать некоторые из них на стороне клиента. Веб-разработчики делают это с помощью библиотек JavaScript, таких как Date.js, Sylvester и JavaScript URL Library.

Что такое фреймворки JavaScript?

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

Вот некоторые примеры использования фреймворков JavaScript.

Разработка веб- и мобильных приложений

AngularJS – это фреймворк, который упрощает разработку и тестирование веб-приложений, таких как приложения электронной коммерции, приложения реального времени и видеоприложения. React Native – это еще один фреймворк, который поддерживает разработку мобильных приложений с естественным рендерингом для iOS и Android.

Веб-разработка с откликом

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

Разработка приложений на стороне сервера

Node.js – это серверный фреймворк JavaScript с открытым исходным кодом, который запускает код JavaScript вне браузера. Разработчики используют его для создания масштабируемых, быстрых и надежных сетевых приложений на стороне сервера. Он может обрабатывать HTTP-запросы и потоки данных, поддерживать файловые системы и управлять несколькими внутренними процессами одновременно.

Что такое HTML и CSS?

Hypertext Markup Language (HTML) и Cascading Style Sheets (CSS) – два других языка программирования, которые разработчики используют при создании фронтенда. HTML – это основной строительный блок большинства веб-страниц. Все абзацы, разделы, изображения, заголовки и текст написаны на HTML. Контент появляется на сайте в том порядке, в котором он написан в HTML.

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

HTML, CSS и JavaScript

Все три языка используются вместе, чтобы создать положительный пользовательский опыт на любом сайте. Хотя HTML и CSS в основном управляют статическим содержимым, они также могут интегрироваться с кодом JavaScript на стороне клиента для динамического обновления контента.

Например, блок кода сценария на HTML-странице может содержать JavaScript. Затем браузер может обрабатывать как HTML, так и внутренний код JavaScript, когда HTML-страница загружается в браузере.

В чем заключаются преимущества языка JavaScript?

Простота освоения и использования

Независимость от платформы

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

Снижение нагрузки на сервер

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

Улучшение пользовательского интерфейса

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

Поддержка параллелизма

JavaScript может выполнять несколько различных наборов инструкций параллельно. На сервере Node.js может обрабатывать множество ответов на запросы сервера, нуждаясь при этом в меньшей пропускной способности.

Какие ограничения актуальны для JavaScript?

В языках программирования переменные используются в качестве держателей для фактических значений данных. Например, в блоке кода разработчик может написать x=5 и y=x+1. Когда код будет запущен, компьютер автоматически изменит x и y на 5 и 6, соответственно, для выполнения функций над ними. Данные могут быть различных типов, например строка текста, число или дата. Именно поэтому большинство языков программирования позволяют определить тип переменной. После определения типа переменной он не меняется; вы не можете хранить числа в строковых переменных.

Например, если вы скажете программе, что x и y – это числа, а затем выполните операцию x+y, компьютер будет знать, что нужно получить два числа и сложить их. С другой стороны, если вы определите x и y как строки, оператор + сложит две строки вместе, чтобы создать более длинное слово.

Слабо типизированный язык

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

Что такое TypeScript?

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

Что такое AWS SDK для JavaScript?

AWS SDK для JavaScript – это набор бесплатных библиотек JavaScript с открытым исходным кодом для интеграции с сервисами AWS. Они поддерживают разработку API, абстракции более высокого уровня и три типа приложений:

• JavaScript для браузера
• Node.js для сервера
• React Native для разработки мобильных приложений

AWS SDK для JavaScript полностью написан на TypeScript, а затем скомпилирован в JavaScript. Таким образом, вы получаете все преимущества TypeScript, не беспокоясь об обратной совместимости.

Вы можете начать работу с AWS SDK для Java, прочитав примеры кода и руководство по миграции или установив его непосредственно из GitHub.