Язык программирования JavaScript придумали специально для того, чтобы создавать интерактивные сайты.
Код на языке JavaScript называют скриптом. Его сохраняют в отдельный файл с расширением js , а чтобы запустить, подключают этот файл на страницу. В HTML для добавления JavaScript есть специальный тег:
Подключают скрипт обычно в самом конце страницы, перед закрывающим тегом
Программа на JavaScript — это последовательность инструкций, то есть указаний браузеру выполнить какие-то действия. Инструкции выполняются последовательно, сверху вниз.
Чтобы сказать JavaScript, что инструкция закончена, нужно поставить точку с запятой или перейти на новую строку. Новая строка правильно работает в большинстве случаев, а точка с запятой — всегда. Поэтому лучше ставить точку с запятой в конце каждой инструкции.
JavaScript не меняет исходный файл с разметкой, но, выполняя инструкции, меняет страницу прямо в браузере пользователя.
Комментарий — это текст, поясняющий код. Он не выводится в браузер и никак не влияет на работу программы. Инструкции внутри комментария не выполняются, поэтому комментарии часто используют, если нужно временно отключить часть кода.
В JavaScript есть два вида комментариев:
// Однострочные комментарии. /* И многострочные. Они могут отключить сразу несколько строк кода. */Чтобы найти на странице элемент, нужно использовать метод querySelector , он ищет по селектору:
document.querySelector('селектор');Эта инструкция состоит из двух частей. Первая часть — элемент, внутри которого будет искать JavaScript. Словом document обозначается веб-страница, к которой скрипт подключён. Неважно, как называется файл на самом деле, в JavaScript это всегда «документ». Он является элементом-родителем для любого другого элемента на странице.
Вторая часть инструкции — это то, что нужно сделать. Её называют методом.
Консоль — инструмент разработчика, который помогает тестировать код. Если во время выполнения скрипта возникнет ошибка, в консоли появится сообщение о ней. А ещё в консоль можно выводить текстовые подсказки. Чтобы вывести сообщение в консоль, нужно использовать console.log :
console.log('Привет от JavaScript!'); // Выведет: Привет от JavaScript! console.log(document.querySelector('.page')); // Выведет в консоль найденный элементПеременная — способ сохранить данные, дав им понятное название.
Переменную можно создать, или объявить, с помощью ключевого слова let . За ним следует имя переменной. После объявления в переменную нужно записать, или присвоить, какое-то значение:
let header = document.querySelector('header');Имя переменной может быть почти любым, но не должно начинаться с цифры, а из спецсимволов разрешены только ‘_’ и ‘$’. Ещё для именования переменных нельзя использовать зарезервированные слова. Имена переменных чувствительны к регистру: header , Header и HEADER — это разные переменные. Имя переменной должно описывать то, что в ней хранится.
Когда в коде встречается переменная, браузер вместо её имени подставляет присвоенное ей значение. Когда мы используем переменную, снова писать let не нужно:
console.log(header);Ключевое слово let появилось в JavaScript в 2015 году, до этого для объявления переменных использовалось слово var .
Чтобы убрать у элемента класс, нужно использовать метод classList.remove . Он убирает с элемента тот класс, который указан в скобках:
элемент.classList.remove('класс');Чтобы добавить элементу класс, нужно использовать метод classList.add :
элемент.classList.add('класс');Метод-переключатель classList.toggle убирает у элемента указанный класс, если он есть, и добавляет, если этого класса нет:
элемент.classList.toggle('класс');У каждого элемента имеется множество свойств: его размеры, цвет и так далее. Свойство textContent хранит в себе текстовое содержимое элемента. Свойствам можно присваивать новые значения:
let paragraph = document.querySelector('p'); paragraph.textContent = 'Здесь был Кекс. Мяу!';У полей ввода есть особое свойство — value . Оно хранит данные, введённые в поле. Мы можем вывести их прямо на страницу:
let input = document.querySelector('input'); paragraph.textContent = input.value;Операция, когда мы «склеиваем» несколько значений, называется конкатенацией и в JavaScript выполняется с помощью знака плюс.
let name = 'Кекс'; paragraph.textContent = 'Вас зовут ' + name + '. Хорошего дня!'; console.log(paragraph.textContent); // Выведет: Вас зовут Кекс. Хорошего дня!JavaScript следит за всем, что происходит на странице. Клик по кнопке или отправка формы — это событие. Мы можем сказать JavaScript, что сделать, когда некое событие произойдёт. Для этого используют обработчики событий. Инструкции, которые должны будут выполниться, когда событие произойдёт, располагают между фигурных скобок.
Свойство onclick означает «по клику»:
let button = document.querySelector('button'); button.onclick = function() < console.log('Кнопка нажата!'); >;При каждом клике по кнопке в консоли будет появляться новое сообщение Кнопка нажата! .
За обработку отправки формы отвечает свойство onsubmit :
let form = document.querySelector('form'); form.onsubmit = function() < console.log('Форма отправлена!'); >;После отправки формы в консоли появится сообщение Форма отправлена! .
Другой очень распространённой задачей в современных веб-сайтах и приложениях является получение отдельных элементов данных с сервера для обновления разделов веб-страницы без необходимости загрузки всей новой страницы. Эта, казалось бы, небольшая деталь оказала огромное влияние на производительность и поведение сайтов, поэтому в этой статье мы объясним концепцию и рассмотрим технологии, которые делают это возможным, например XMLHttpRequest и API Fetch.
| Необходимые условия: | Основы JavaScript (см. первые шаги, структурные элементы, объекты JavaScript), основы клиентских API |
|---|---|
| Задача: | Узнать, как извлекать данные с сервера и использовать их для обновления содержимого веб-страницы. |
Первоначальная загрузка страницы в Интернете была простой — вы отправляли запрос на сервер web-сайта, и если всё работает, как и должно, то вся необходимая информация о странице будет загружена и отображена на вашем компьютере.
Проблема с этой моделью заключается в том, что всякий раз, когда вы хотите обновить любую часть страницы, например, чтобы отобразить новый набор продуктов или загрузить новую страницу, вам нужно снова загрузить всю страницу. Это очень расточительно и приводит к плохому пользовательскому опыту, особенно по мере того, как страницы становятся все более сложными.
Это привело к созданию технологий, позволяющих веб-страницам запрашивать небольшие фрагменты данных (например, HTML, XML, JSON или обычный текст) и отображать их только при необходимости, помогая решать проблему, описанную выше.
Это достигается с помощью таких API, как XMLHttpRequest или — более новой — Fetch API. Эти технологии позволяют веб-страницам напрямую обрабатывать запросы HTTP для определённых ресурсов, доступных на сервере, и форматировать результирующие данные по мере необходимости перед их отображением.
Примечание: Вначале эта общая техника была известна как Асинхронный JavaScript и XML (Ajax), поскольку она, как правило, использовала XMLHttpRequest для запроса данных XML. В наши дни это обычно не так (вы, скорее всего, будете использовать XMLHttpRequest или Fetch для запроса JSON), но результат все тот же, и термин «Ajax» по-прежнему часто используется для описания этой техники.
Модель Ajax предполагает использование веб-API в качестве прокси для более разумного запроса данных, а не просто для того, чтобы браузер перезагружал всю страницу. Давайте подумаем о значении этого:
Это действительно хорошо, потому что:
Чтобы ускорить работу, некоторые сайты также сохраняют необходимые файлы и данные на компьютере пользователя при первом обращении к сайту, а это означает, что при последующих посещениях они используют локальные версии вместо загрузки свежих копий, как при первой загрузке страницы. Содержимое загружается с сервера только при его обновлении.
Давайте посмотрим, как обрабатывается такой запрос, используя как XMLHttpRequest , так и Fetch. В этих примерах мы будем запрашивать данные из нескольких текстовых файлов и использовать их для заполнения области содержимого.
Этот набор файлов будет действовать как наша поддельная база данных; в реальном приложении мы с большей вероятностью будем использовать серверный язык, такой как PHP, Python или Node, чтобы запрашивать наши данные из базы данных. Здесь, однако, мы хотим сохранить его простым и сосредоточиться на стороне клиента.
XMLHttpRequest (который часто сокращается до XHR) является довольно старой технологией сейчас — он был изобретён Microsoft в конце 1990-х годов и уже довольно долго стандартизирован в браузерах.
var verseChoose = document.querySelector("select"); var poemDisplay = document.querySelector("pre"); verseChoose.onchange = function () var verse = verseChoose.value; updateDisplay(verse); >;
function updateDisplay(verse) >
= verse.replace(" ", ""); verse = verse.toLowerCase(); var url = verse + ".txt";
var request = new XMLHttpRequest();
.open("GET", url);
.responseType = "text";
.onload = function () poemDisplay.textContent = request.response; >;
.send();
updateDisplay("Verse 1"); verseChoose.value = "Verse 1";
Некоторые браузеры (включая Chrome) не будут запускать запросы XHR, если вы просто запускаете пример из локального файла. Это связано с ограничениями безопасности (для получения дополнительной информации о безопасности в Интернете, ознакомьтесь с Website security).
Чтобы обойти это, нам нужно протестировать пример, запустив его через локальный веб-сервер. Чтобы узнать, как это сделать, прочитайте Как настроить локальный тестовый сервер?
API-интерфейс Fetch — это, в основном, современная замена XHR — недавно он был представлен в браузерах для упрощения асинхронных HTTP-запросов в JavaScript, как для разработчиков, так и для других API, которые строятся поверх Fetch.
Давайте преобразуем последний пример, чтобы использовать Fetch!
var request = new XMLHttpRequest(); request.open("GET", url); request.responseType = "text"; request.onload = function () poemDisplay.textContent = request.response; >; request.send();
fetch(url).then(function (response) response.text().then(function (text) poemDisplay.textContent = text; >); >);
Прежде всего, мы вызываем метод fetch() , передавая ему URL-адрес ресурса, который мы хотим получить. Это современный эквивалент request.open() в XHR, плюс вам не нужен эквивалент .send() .
После этого вы можете увидеть метод .then() , прикреплённый в конец fetch() — этот метод является частью Promises — современная функция JavaScript для выполнения асинхронных операций. fetch() возвращает промис, который разрешает ответ, отправленный обратно с сервера, — мы используем .then() для запуска некоторого последующего кода после того, как промис будет разрешено, что является функцией, которую мы определили внутри неё. Это эквивалент обработчика события onload в XHR-версии.
Эта функция автоматически передаёт ответ от сервера в качестве параметра, когда обещает fetch() . Внутри функции мы берём ответ и запускаем его метод text() (en-US), который в основном возвращает ответ как необработанный текст. Это эквивалент request.responseType = ‘text’ в версии XHR.
Вы увидите, что text() также возвращает промис, поэтому мы привязываем к нему другой .then() , внутри которого мы определяем функцию для получения необработанного текста, который выполняет text() .
Внутри функции внутреннего промиса мы делаем то же самое, что и в версии XHR, — устанавливаем текстовое содержимое в текстовое значение.
Промисы немного запутывают первый раз, когда вы их встречаете, но не беспокойтесь об этом слишком долго. Через некоторое время вы привыкнете к ним, особенно, когда вы узнаете больше о современных JavaScript-API. Большинство из них в большей степени основаны на промисах.
Давайте посмотрим на структуру промисов сверху, чтобы увидеть, можем ли мы ещё немного понять это:
fetch(url).then(function (response) response.text().then(function (text) poemDisplay.textContent = text; >); >);
В первой строке говорится: «Получить ресурс, расположенный по адресу url» (fetch(url) ) и «затем запустить указанную функцию, когда промис будет разрешено» ( .then(function() < . >) ). «Resolve» означает «завершить выполнение указанной операции в какой-то момент в будущем». Указанная операция в этом случае заключается в извлечении ресурса с указанного URL (с использованием HTTP-запроса) и возврата ответа для нас, чтобы что-то сделать.
Фактически, функция, переданная в then() , представляет собой кусок кода, который не запускается немедленно — вместо этого он будет работать в какой-то момент в будущем, когда ответ будет возвращён. Обратите внимание, что вы также можете сохранить своё промис в переменной и цепочку .then() вместо этого. Ниже код будет делать то же самое:
var myFetch = fetch(url); myFetch.then(function (response) response.text().then(function (text) poemDisplay.textContent = text; >); >);
Поскольку метод fetch() возвращает промис, который разрешает HTTP-ответ, любая функция, которую вы определяете внутри .then() , прикованная к концу, будет автоматически передаваться как параметр. Вы можете вызвать параметр, который вам нравится — приведённый ниже пример будет работать:
fetch(url).then(function (dogBiscuits) dogBiscuits.text().then(function (text) poemDisplay.textContent = text; >); >);
Но имеет смысл называть параметр тем, что описывает его содержимое!
Теперь давайте сосредоточимся только на функции:
function(response) response.text().then(function(text) poemDisplay.textContent = text; >); >
Объект ответа имеет метод text() (en-US), который берёт необработанные данные, содержащиеся в теле ответа, и превращает его в обычный текст, который является форматом, который мы хотим в нем А также возвращает промис (который разрешает полученную текстовую строку), поэтому здесь мы используем другой .then() , внутри которого мы определяем другую функцию, которая диктует что мы хотим сделать с этой текстовой строкой. Мы просто устанавливаем свойство textContent элемента нашего стихотворения равным текстовой строке, так что это получается довольно просто.
Также стоит отметить, что вы можете напрямую связывать несколько блоков промисов ( .then() , но есть и другие типы) на конце друг друга, передавая результат каждого блока следующему блоку по мере продвижения по цепочке , Это делает промисы очень мощными.
Следующий блок делает то же самое, что и наш оригинальный пример, но написан в другом стиле:
fetch(url) .then(function (response) return response.text(); >) .then(function (text) poemDisplay.textContent = text; >);
Многие разработчики любят этот стиль больше, поскольку он более плоский и, возможно, легче читать для более длинных цепочек промисов — каждое последующее промис приходит после предыдущего, а не внутри предыдущего (что может стать громоздким). Единственное отличие состоит в том, что мы должны были включить оператор return перед response.text() , чтобы заставить его передать результат в следующую ссылку в цепочке.
Это действительно зависит от того, над каким проектом вы работаете. XHR существует уже давно и имеет отличную кросс-браузерную поддержку. Fetch and Promises, с другой стороны, являются более поздним дополнением к веб-платформе, хотя они хорошо поддерживаются в браузере, за исключением Internet Explorer и Safari (которые на момент написания Fetch были доступны в своём предварительный просмотр технологии).
Если вам необходимо поддерживать старые браузеры, тогда может быть предпочтительным решение XHR. Если, однако, вы работаете над более прогрессивным проектом и не так обеспокоены старыми браузерами, то Fetch может быть хорошим выбором.
Вам действительно нужно учиться — Fetch станет более популярным, так как Internet Explorer отказывается от использования (IE больше не разрабатывается, в пользу нового браузера Microsoft Edge), но вам может понадобиться XHR ещё некоторое время.
Чтобы завершить статью, мы рассмотрим несколько более сложный пример, который показывает более интересные применения Fetch. Мы создали образец сайта под названием The Can Store — это вымышленный супермаркет, который продаёт только консервы. Вы можете найти этот пример в прямом эфире на GitHub и посмотреть исходный код.
По умолчанию на сайте отображаются все продукты, но вы можете использовать элементы управления формы в столбце слева, чтобы отфильтровать их по категориям, поисковому запросу или и тому и другому.
Существует довольно много сложного кода, который включает фильтрацию продуктов по категориям и поисковым запросам, манипулирование строками, чтобы данные отображались правильно в пользовательском интерфейсе и т.д. Мы не будем обсуждать все это в статье, но вы можете найти обширные комментарии в коде (см. can-script.js).
Однако мы объясним код Fetch.
Первый блок, который использует Fetch, можно найти в начале JavaScript:
fetch("products.json").then(function (response) if (response.ok) response.json().then(function (json) products = json; initialize(); >); > else console.log( "Network request for products.json failed with response " + response.status + ": " + response.statusText, ); > >);
Это похоже на то, что мы видели раньше, за исключением того, что второй промис находится в условном выражении. В этом случае мы проверяем, был ли возвращённый ответ успешным — свойство response.ok (en-US) содержит логическое значение, которое true , если ответ был в порядке (например, 200 meaning «OK») или false , если он не увенчался успехом.
Если ответ был успешным, мы выполняем второй промис — на этот раз мы используем json() (en-US), а не text() (en-US), так как мы хотим вернуть наш ответ как структурированные данные JSON, а не обычный текст.
Если ответ не увенчался успехом, мы выводим сообщение об ошибке в консоль, в котором сообщается о сбое сетевого запроса, который сообщает о статусе сети и описательном сообщении ответа (содержащемся в response.status (en-US) и response.statusText (en-US), соответственно). Конечно, полный веб-сайт будет обрабатывать эту ошибку более грациозно, отображая сообщение на экране пользователя и, возможно, предлагая варианты для исправления ситуации.
Вы можете проверить сам случай отказа:
Второй блок Fetch можно найти внутри функции fetchBlob() :
fetch(url).then(function (response) if (response.ok) response.blob().then(function (blob) objectURL = URL.createObjectURL(blob); showProduct(objectURL, product); >); > else console.log( 'Network request for "' + product.name + '" image failed with response ' + response.status + ": " + response.statusText, ); > >);
Это работает во многом так же, как и предыдущий, за исключением того, что вместо использования json() (en-US) мы используем blob() (en-US) — в этом случае мы хотим вернуть наш ответ в виде файла изображения, а формат данных, который мы используем для этого — Blob — этот термин является аббревиатурой от« Binary Large Object »и может в основном использоваться для представляют собой большие файловые объекты, такие как изображения или видеофайлы.
После того как мы успешно получили наш blob, мы создаём URL-адрес объекта, используя createObjectURL() . Это возвращает временный внутренний URL-адрес, указывающий на объект, указанный в браузере. Они не очень читаемы, но вы можете видеть, как выглядит, открывая приложение Can Store, Ctrl-/щёлкнуть правой кнопкой мыши по изображению и выбрать опцию «Просмотр изображения» (которая может немного отличаться в зависимости от того, какой браузер вы ). URL-адрес объекта будет отображаться внутри адресной строки и должен выглядеть примерно так:
blob:http://localhost:7800/9b75250e-5279-e249-884f-d03eb1fd84f4
Мы хотели бы, чтобы вы решили преобразовать версию приложения Fetch для использования XHR в качестве полезной части практики. Возьмите копию ZIP файла и попробуйте изменить JavaScript, если это необходимо.
Некоторые полезные советы:
Примечание: Если у вас есть проблемы с этим, не стесняйтесь сравнить свой код с готовой версией на GitHub (см. исходник здесь, а также см. это в действии).
Это завершает нашу статью по извлечению данных с сервера. К этому моменту вы должны иметь представление о том, как начать работать как с XHR, так и с Fetch.
Однако в этой статье обсуждается много разных тем, которые только поцарапали поверхность. Для получения более подробной информации по этим темам, попробуйте следующие статьи:
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
После прочтения последних двух статей вы знаете, что такое JavaScript, что он может сделать для вас, как использовать его вместе с другими веб-технологиями и какими он обладает функциями высокого уровня. В этой статье мы перейдём к реальным основам, рассмотрим, как работать с большинством базовых блоков JavaScript — Переменными.
| Необходимые навыки: | Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание того, что такое JavaScript. |
|---|---|
| Цель: | Ознакомиться с основами переменных в JavaScript. |
В этой статье вам будет предложено ввести строки кода, чтобы проверить ваше понимание материала. Если вы используете браузер для настольных компьютеров, лучшим примером для ввода кода примера является консоль JavaScript вашего браузера (см. What are browser developer tools для получения дополнительной информации о том, как получить доступ к этому инструменту).
Также мы предоставили простую консоль JavaScript, встроенную ниже в странице, для ввода кода, если вы не используете браузер с консолью JavaScript или консоль на странице окажется для вас более комфортной.
Переменные — это контейнер для таких значений, как числа, используемые в сложении, или строка, которую мы могли бы использовать как часть предложения. Но одна из особенностей переменных — их значение может меняться. Давайте взглянем на простой пример:
button>Нажми на меняbutton>
const button = document.querySelector("button"); button.onclick = function () let name = prompt("Как вас зовут?"); alert("Привет " + name + ", рады видеть вас!"); >;
В примере, по нажатию кнопки выполнится несколько строк кода. Первая строка в функции покажет пользователю окно, где попросит ввести его имя и сохранит значение в переменной. Вторая строка отобразит приветствие с включённым введённым именем, взятым из значения переменной.
Чтобы лучше понять действие переменной здесь, давайте подумаем о том, как мы будем писать этот пример без использования переменной. Это будет выглядеть примерно так:
var name = prompt('Как вас зовут?'); if (name === 'Адам') < alert('Привет, Адам, рады тебя видеть!'); >else if (name === 'Алан') < alert('Привет, Алан, рады тебя видеть!'); >else if (name === 'Белла') < alert('Привет, Белла, рады тебя видеть!'); >else if (name === 'Бьянка') < alert('Привет, Бьянка, рады тебя видеть!'); >else if (name === 'Крис') < alert('Привет, Крис, рады тебя видеть!'); >// . и так далее .
Вам сейчас не обязательно понимать синтаксис, который мы используем (пока!), но вы должны понять идею: если бы у нас не было доступных переменных, нам пришлось бы реализовать гигантский блок кода, который проверял, какое имя было введено, а затем отображал соответствующее сообщение для этого имени. Очевидно, что это неэффективно (код намного больше, даже для четырёх вариантов), и он просто не сработает, так как вы не можете хранить все возможные варианты.
Переменные имеют смысл, и, когда вы узнаете больше о JavaScript, они начнут становиться второй натурой.
Ещё одна особенность переменных заключается в том, что они могут содержать практически все, а не только строки и числа. Переменные могут также содержать сложные данные и даже целые функции. Об этом вы узнаете больше при дальнейшем изучении курса..
Заметьте: мы говорим, что переменные содержат значения. Это важное различие. Переменные не являются самими значениями; они представляют собой контейнеры для значений. Представьте, что они похожи на маленькие картонные коробки, в которых вы можете хранить вещи.
Чтобы использовать переменную, вы сначала должны её создать, или, если быть точнее, объявить переменную. Чтобы сделать это, мы вводим ключевое слово var, за которым следует имя, которое вы хотите дать своей переменной:
var myName; var myAge;
Здесь мы создаём две переменные myName и myAge. Попробуйте ввести эти строки сейчас в консоли вашего веб-браузера или в консоли ниже (можно открыть эту консоль в отдельной вкладке или в новом окне). После этого попробуйте создать переменную (или две) с вашими именами.
doctype html> html> head> meta charset="utf-8" /> title>JavaScript consoletitle> style> * box-sizing: border-box; > html background-color: #0c323d; color: #809089; font-family: monospace; > body max-width: 700px; > p margin: 0; width: 1%; padding: 0 1%; font-size: 16px; line-height: 1.5; float: left; > .input p margin-right: 1%; > .output p width: 100%; > .input input width: 96%; float: left; border: none; font-size: 16px; line-height: 1.5; font-family: monospace; padding: 0; background: #0c323d; color: #809089; > div clear: both; > style> head> body>body> script> var geval = eval; function createInput() var inputDiv = document.createElement("div"); var inputPara = document.createElement("p"); var inputForm = document.createElement("input"); inputDiv.setAttribute("class", "input"); inputPara.textContent = ">"; inputDiv.appendChild(inputPara); inputDiv.appendChild(inputForm); document.body.appendChild(inputDiv); if (document.querySelectorAll("div").length > 1) inputForm.focus(); > inputForm.addEventListener("change", executeCode); > function executeCode(e) try var result = geval(e.target.value); > catch (e) var result = "error — " + e.message; > var outputDiv = document.createElement("div"); var outputPara = document.createElement("p"); outputDiv.setAttribute("class", "output"); outputPara.textContent = "Result: " + result; outputDiv.appendChild(outputPara); document.body.appendChild(outputDiv); e.target.disabled = true; e.target.parentNode.style.opacity = "0.5"; createInput(); > createInput(); script> html>
Примечание: в JavaScript все инструкции кода должны заканчиваться точкой с запятой (;) — ваш код может работать правильно для отдельных строк, но, вероятно, не будет, когда вы пишете несколько строк кода вместе. Попытайтесь превратить написание точки с запятой в привычку.
Теперь проверим, существуют ли эти значения в среде выполнения. Для этого введём только имя переменной.
; myAge;
В настоящее время они не содержат значения, это пустые контейнеры. В этом случае, когда вы вводите имена переменных, вы должны получить значение undefined . Если они не существуют, вы получите сообщение об ошибке — попробуйте сейчас ввести в консоли имя переменной ниже:
Примечание: Не путайте переменную, которая существует, но не имеет значения, с переменной, которая вообще не существует — это разные вещи.
Как только переменная объявлена, ей можно присвоить значение. Для этого пишется имя переменной, затем следует знак равенства ( = ), а за ним значение, которое вы хотите присвоить. Например:
= "Chris"; myAge = 37;
Попробуйте вернуться в консоль и ввести эти строки. Вы должны увидеть значение, которое вы назначили переменной, возвращаемой в консоли. Чтобы посмотреть значения переменных, нужно набрать их имя в консоли:
; myAge;
Вы можете объявить переменную и задать ей значение одновременно:
var myName = "Chris";
Скорее всего, так вы будете писать большую часть времени, так как запись и выполнения кода с одно строки происходит быстрее, чем выполнение двух действий на двух отдельных строках.
Примечание: Если вы пишете многострочную программу JavaScript, которая объявляет и инициализирует (задаёт значение) переменную, вы можете объявить её после её инициализации, и она всё равно будет работать. Это связано с тем, что объявления переменных обычно выполняются первыми, прежде чем остальная часть кода будет выполнена. Это называется hoisting — прочитайте var hoisting для более подробной информации по этому вопросу.
Когда переменной присваивается значение, вы можете изменить (обновить) это значение, просто указав другое значение. Попробуйте ввести следующие строки в консоль:
= "Bob"; myAge = 40;
Вы можете назвать переменную как угодно, но есть ограничения. Как правило, вы должны придерживаться только латинских символов (0-9, a-z, A-Z) и символа подчёркивания.
Примечание: По ссылке можно найти довольно полный список зарезервированных ключевых слов: Lexical grammar — keywords.
Примеры хороших имён переменных:
age myAge init initialColor finalOutputValue audio1 audio2
Примеры плохих имён переменных:
1 a _12 myage MYAGE var Document skjfndskjfnbdskjfb thisisareallylongstupidvariablenameman
Примеры имён переменных, которые вызовут ошибки:
var Document
Попытайтесь создать ещё несколько переменных прямо сейчас, используя знания, изложенные выше.
Есть несколько различных типов данных, которые мы можем хранить в переменных. В этом разделе мы кратко опишем их, а затем в будущих статьях вы узнаете о них более подробно.
Вы можете хранить числа в переменных (целые числа, такие как 30, или десятичные числа, такие как 2.456, также называемые числами с плавающей точкой или с плавающей запятой). Вам не нужно объявлять типы переменных в JavaScript, в отличие от некоторых других языков программирования Если давать переменной значение числа,кавычки не используются:
var myAge = 17;
Строки — это фрагменты текста. Когда вы даёте переменной значение строки, вам нужно обернуть её в одиночные или двойные кавычки, в противном случае JavaScript попытается проиндексировать её как другое имя переменной.
var dolphinGoodbye = "So long and thanks for all the fish";
Booleans — истинные / ложные значения — они могут иметь два значения: true или false. Они обычно используются для проверки состояния, после чего код запускается соответствующим образом. Вот простой пример:
var iAmAlive = true;
В действительности вы чаще будете использовать этот тип переменных так:
var test = 6 3;
Массив — это один объект, который содержит несколько значений, заключённых в квадратные скобки и разделённых запятыми. Попробуйте ввести следующие строки в консоль:
var myNameArray = ["Chris", "Bob", "Jim"]; var myNumberArray = [10, 15, 40];
Как только эти массивы определены, можно получить доступ к каждому значению по их местоположению в массиве. Наберите следующие строки:
[0]; // should return 'Chris' myNumberArray[2]; // should return 40
Квадратные скобки указывают значение индекса, соответствующее позиции возвращаемого значения. Возможно, вы заметили, что массивы в JavaScript индексируются с нулевой отметкой: первый элемент имеет индекс 0.
В следующей статье вы узнаете больше о массивах.
В программировании объект представляет собой структуру кода, который моделирует объект реальной жизни. У вас может быть простой объект, представляющий автостоянку, и содержит информацию о её ширине и длине; или вы можете иметь объект, который представляет человека, и содержит данные о его имени, росте, весе, на каком языке он говорит, как сказать ему привет и многое другое.
Попробуйте ввести следующую строку в консоль:
var dog = name: "Spot", breed: "Dalmatian" >;
Чтобы получить информацию, хранящуюся в объекте, вы можете использовать следующий синтаксис:
.name;
Мы больше не будем рассматривать объекты в данном курсе — вы можете больше узнать о них в будущем модуле.
JavaScript — это «динамически типизируемый язык», что означает, что в отличие от некоторых других языков вам не нужно указывать, какой тип данных будет содержать переменная (например, числа, строки, массивы и т. д.).
Например, если вы объявите переменную и присвоите ей значение, заключённое в кавычки, браузер будет обрабатывать переменную как строку:
var myString = "Привет";
Он всё равно будет строкой, даже если он содержит числа, поэтому будьте осторожны:
var myNumber = "500"; // упс, это все ещё строка (string) typeof myNumber; myNumber = 500; // так-то лучше, теперь это число (number) typeof myNumber;
Попробуйте ввести четыре строки выше в консоль одну за другой и посмотреть результаты. Вы заметите, что мы используем специальную функцию typeof() — она возвращает тип данных переменной, которую вы передаёте в неё. В первый раз, когда она вызывается, она должа возвращать строку, так как переменная myNumber содержит строку ‘500’ . Посмотрите, что она вернёт во второй раз, когда вы её вызовите.
К настоящему времени вы должны знать достаточно о переменных JavaScript и о том, как их создавать. В следующей статье мы остановимся на числах более подробно, рассмотрев, как сделать базовую математику в JavaScript.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Перед началом статьи хочу сказать, что еще больше полезной и нужной информации вы найдете в нашем Телеграм-канале по ссылке: https://t.me/metsolution (Огромная просьба подписаться, ведь именно Телеграм-канал является моей мотивацией <3)
11K открытий
В январе 2017 года сообщество Stack Overflow провело опрос, в котором приняли участие 64 000 разработчиков из разных стран мира. Результаты для первого места остаются без изменений в течение пяти последних лет. JavaScript остаётся несменяемым лидером в гонке популярности языков программирования.
На изображении представлены результаты опроса на Stack Overflow
JavaScript служит мощной и стабильной основой для многих продвинутых современных веб-приложений и веб-сайтов. В умелых руках опытного разработчика с помощью JavaScript можно продвинуть UX приложения на новый уровень и добавить богатый набор функций и разные высоко функциональные компоненты. В программной экосистеме JavaScript существует множество инструментов. Иногда может показаться, что новые библиотеки и фреймворки «атакуют» сообщество разработчиков своим огромным количеством. В этой статье вам будут представлены наиболее удобные инструменты работы с JavaScript.
Можно выбирать инструменты, основываясь на рейтинге и популярности. Если инструмент популярен и имеет хорошие отзывы и большое сообщество, то повышается вероятность того, что вы столкнётесь с меньшим количеством проблем во время работы с ним. Вы можете также посмотреть на лучшие фреймворки и библиотеки для JavaScript, по мнению некоторых программистов. Также при выборе инструмента нужно со всех сторон изучить свой проект, чтобы не было проблем с масштабируемостью и совместимостью с разными браузерами и их версиями.
Инструменты сборки и автоматизации
Инструменты сборки для кросс-платформенных языков вроде .Net или Java — обычное дело. Но что насчёт JavaScript? Когда разработчики начали использовать этот язык программирования для крупномасштабных проектов, то они столкнулись с проблемами масштабируемости, безопасности, производительности и обслуживания. Поэтому пришло время использовать инструменты сборки для работы с JavaScript.
IDE и редакторы кода
Инструменты документирования кода
Документирование кода превращает ваше приложение в «стеклянную коробку», показывая, как работает тот или иной фрагмент кода. Инструменты автоматического документирования кода описывают функции и их назначения, что позволяет экономить время на анализе и понимании кода в будущем.
Инструменты тестирования
Инструменты тестирования для JavaScript созданы для обнаружения ошибок на этапе производства, чтобы избежать в будущем ошибок у пользователей. С ростом сложности пользовательских приложений автоматические тесты не только повышают производительность приложения, но и помогают компаниям сохранить бюджет.
Инструменты отладки
Отладка кода — довольно трудоёмкий и поглощающий время процесс для JavaScript-разработчиков. Инструменты для отладки кода будут особенно полезны при работе с тысячами строк кода. Многие из инструментов отладки обеспечивают довольно точные результаты.
Инструменты безопасности
Инструменты аналитики и оптимизации кода
Для проверки качества кода обычно обращаются к функциональному тестированию и юнит-тестированию. Однако существует еще один подход, который позволяет разработчикам проверять качество кода и его соответствие стандартам кодирования, а именно статический анализ кода.
В настоящее время в современном программном обеспечении объединяются инструменты анализа статического кода во время разработки, чтобы исключить попадание некачественного кода в продакшен.
Инструменты управления версиями
Системы управления версиями JavaScript необходимы для плавного взаимодействия внутри команды, поскольку они обеспечивают лучшее обслуживание различных версий и помогают отслеживать изменения. С инструментами управления версиями разработчики могут работать над одним и тем же проектом одновременно, без конфликтов и недоразумений. Кроме того, эти утилиты архивируют каждую версию со всеми изменениями, удалениями и добавлениями.
Инструменты управления пакетами и зависимостями
Современное ПО хранится в виде пакетов в репозиториях. Такие пакеты предоставляют исходные компоненты операционной системы, такие как приложения, библиотеки, службы и документы. Системы управления пакетами отвечают за различные операции, такие как установка и обновление, тем самым помогают убедиться, что программное обеспечение было одобрено разработчиками.
Список лучших инструментов для разработки на JavaScript может продолжаться до бесконечности. В этой статье вы увидели лишь популярные и надёжные инструменты, которые служат основой для качественных продуктов. Благодарим за внимание!