Что такое JavaScript и как он работает?

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

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

Что такое JavaScript?

JavaScript — это язык сценариев для Интернета. Это интерпретируемый язык, что означает, что ему не нужен компилятор для перевода своего кода, такого как C или C ++. Код JavaScript запускается прямо в веб-браузере.

Последняя версия языка — ECMAScript 2018, выпущенная в июне 2018 года.

JavaScript работает с HTML и CSS для создания веб-приложений или веб-страниц. JavaScript поддерживается большинством современных веб-браузеров, таких как Google Chrome, Firefox, Safari, Microsoft Edge, Opera и т. Д. Большинство мобильных браузеров для Android и iPhone теперь также поддерживают JavaScript.

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

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

Строительные блоки веб-приложений

Существуют три компонента, которые создают веб-сайты и приложения: язык разметки гипертекста (HTML), каскадные таблицы стилей (CSS) и JavaScript. У каждого есть роль в создании веб-приложения.

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

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

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

Перед написанием JavaScript важно знать, как он работает под капотом. Необходимо изучить две важные вещи: как работает веб-браузер и объектная модель документа (DOM).

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

Веб-браузер загружает веб-страницу, анализирует HTML и создает из содержимого так называемую объектную модель документа (DOM). DOM представляет в реальном времени веб-страницу для вашего кода JavaScript.

Затем браузер будет захватывать все, что связано с HTML, например изображения и CSS-файлы. Информация CSS поступает из анализатора CSS.

HTML и CSS объединяются DOM, чтобы сначала создать веб-страницу. Затем движок JavaScript браузеров загружает файлы JavaScript и встроенный код, но не запускает код сразу. Он ожидает завершения загрузки HTML и CSS.

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

Порядок здесь важен. Если JavaScript не будет ждать завершения HTML и CSS, он не сможет изменить элементы DOM.

Что я могу сделать с JavaScript?

JavaScript — это полноценный язык программирования, который может выполнять большинство функций обычного языка, такого как Python. Это включает:

Объявление переменных.
Хранение и получение значений.
Определение и вызов функций.
Определение объектов и классов JavaScript.
Загрузка и использование внешних модулей.
Написание обработчиков событий, которые реагируют на события кликов.
Написание кода сервера.
И многое другое.

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

Использование JavaScript

Давайте рассмотрим некоторые основы JavaScript с примерами кода.

Объявление переменных

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

let num = 5; let myString = "Hello"; var interestRate = 0.25;

операторы

прибавление

 12 + 5 >> 17

Вычитание

 20 - 8 >> 12

умножение

 5 * 2 >> 10

разделение

 50 / 2 >> 25

модуль

 45 % 4 >> 1

Массивы

 let myArray = [1,2,4,5]; let stringArray = ["hello","world"];

функции

JavaScript может писать функции, вот простая функция, которая добавляет числа.

 function addNumbers(num1,num2){ return num1 + num2; } >> addNumbers(10,5); >> 15

Loops

JavaScript может выполнять циклы для итерации, циклы как для циклов и циклов while.

 for(let i = 0; i < 3; i++){ console.log("echo!"); } >> echo! >> echo! >> echo!

 let i = 0; while(i < 3) { console.log("echo!"); i++; } >> echo! >> echo! >> echo!

На веб-странице

Наиболее распространенный способ загрузки JavaScript на веб-странице — использование HTML-тега script . В зависимости от ваших требований вы можете использовать один из следующих методов.

Загрузите внешний файл JavaScript на веб-страницу следующим образом:
```
 <script type="text/javascript" src="/path/to/javascript"></script> 
```
Вы можете указать полный URL-адрес, если JavaScript находится в другом домене, чем веб-страница, следующим образом:
```
 <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
```
JavaScript может быть непосредственно встроен в HTML. Вот
```
 <script type="text/javascript"> alert("Page is loaded"); </script> 
```

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

Это более сложные темы, сейчас вы изучаете основы.

Образцы фрагментов кода JavaScript

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

Следующее выбирает все элементы, выделенные жирным шрифтом в документе, и устанавливает цвет первого на красный.
```
 var elems = document.getElementsByTagName('b'); elems[0].style.color = 'red'; 
```
Хотите изменить изображение в теге img ? Следующее связывает обработчик событий для события нажатия кнопки.
```
 <img id="myImg" src="prev-image.png"> <button onclick="document.getElementById('myImg').src='new-image.png'">Change Image</button> 
```
Обновить текстовое содержание элемента параграфа ( p )? Установите свойство innerHTML элемента, как показано:
```
 <p id="first-para">Hello World</p> <button onclick="document.getElementById('first-para').innerHTML = "Welcome to JavaScript!"'>Click me</button> 
```

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

Теперь вы знаете, что делает JavaScript

Надеемся, что это введение дало некоторое представление о JavaScript и вдохновило вас на веб-программирование. Существует гораздо больше, чтобы узнать о JavaScript. Как только вы почувствуете себя более комфортно, почему бы не попытаться научиться использовать объектную модель документа ?

Что такое JavaScript и как он работает?