Что такое javascript простыми словами

Что такое JavaScript

20 июня 2022 JavaScript — это язык программирования, который помогает сделать любой объект на веб-странице интерактивным, то есть визуально отобразить отклик одного из элементов контента на действие пользователя. Благодаря JS посетители сайта, нажимая на кнопку, например «положить товар в корзину», видят ее внешние изменения и понимают, что действие выполнилось.

В данном материале простыми словами и на примерах разберем сферы применения JavaScript и особенности его изучения.

Для чего нужен JavaScript

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

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

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

Адаптация контента под окно браузера

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

Проверка корректности заполнения HTML-форм

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

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

Автозаполнение полей

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

Взаимодействие с пользователями

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

Управление содержимым и стилями HTML-элементов

Кроме эффектов шаги пользователей по сайту могут сопровождаться изменением внешнего вида элементов (стилей, заданных на CSS). JS позволяет добавлять HTML-теги и атрибуты к ним. Таким образом можно изменить, например, цвет шрифта.

Добавление анимации

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

Выполнение математических операций

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

Где применяется JavaScript: примеры

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

1. Динамические веб-страницы — всплывающие подсказки, падающие снежинки и прочие анимации. На сайте Майка Куса — дизайнера из Великобритании — при наведении курсора на один из блоков меняется находящееся в нем изображение, а на блок накладывается эффект затемнения.
2. Веб-приложения и игры — 2D- и 3D- анимация, воспроизведение видео, обновление контента, игры «три в ряд». Trello является популярным веб-приложением, разработанным с использованием Node.js, Backbone.js (JavaScript-библиотек) и MongoDB (системы управления базами данных). Оно позволяет составлять список задач, требующих решения, и понимать на каком этапе работы над совместным проектом находится команда. Draw a Stickman — браузерная игра, для создания которой разработчики задействовали jQuery и библиотеку для работы с векторной графикой Raphal.js. Пользователю предлагают нарисовать собственного двухмерного персонажа и отправиться с ним в приключение, а по ходу сюжета игроку потребуется дорисовывать инструменты, которые помогут герою справиться с проблемами, например с драконом.
3. Расширения для браузера — сбор статистики работы в интернете, сохранение паролей, блокировка рекламы, перевод текстов.
4. Серверные приложения — возможность писать клиентскую и серверную часть сайта на одном языке. Paypal — это одна из самых больших компаний, использующих Node.JS. Как браузерная, так и серверная часть приложения Paypal написаны на JavaScript.
5. Мобильные приложения — кроссплатформенные приложения. Netflix — одна из самых крупных платформ для просмотра фильмов и сериалов со статистикой в один миллиард скачиваний из плеймаркета. Большое количество персонализированного контента замедляет масштабируемость приложения, поэтому компания перешла на легковесный и быстрый фреймворк Node.JS.
6. Десктопные приложения. Slack — приложение для организации командной работы над проектом, с возможностью обсуждать задачи в режиме реального времени. Для его создания был использован фреймворк с открытым исходным кодом Electron. Десктопные приложения, созданные с помощью данного фреймворка, позволяют создавать GUI десктопных приложений при помощи JavaScript, HTML и CSS. Десктопные приложения с Electron похожи по поведению на веб-приложения, но могут читать и записывать данные в файловой системе ПК пользователя.

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

Хотя Java и JavaScript носят похожие названия, они не связаны друг с другом, являются разными языками программирования и используются для разных целей. Java создавался как язык для серверной веб-разработки и остается инструментом для создания серверных и десктопных программ и мобильных приложений. Он является одним из основных языков, используемых для написания приложений на Android.

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

Советы по изучению JavaScript

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

1. Изучите основы языка: типы данных, переменные, операторы, циклы, функции, которые использует JavaScript. Важно понимать, за что отвечает каждая строка кода. Это позволит вам самостоятельно создавать любой скрипт, даже если его не разбирали на онлайн-курсах или в учебнике.
2. Научитесь пользоваться библиотеками. Они представляют собой наборы готовых функций, классов и объектов для решения разных задач. Их применение позволяет сократить время работы над кодом. Среди библиотек можно выделить jQuery и React.
3. Познакомьтесь с фреймворками. Это готовая структура приложения (сайта, программы), при доработке которой получается конечный продукт. Node.JS — это технология, позволяющая расширить область применения JavaScript до разработки приложений и полноценных программ для ПК. Angular применяют для создания одностраничных приложений, Vue.js — для пользовательских интерфейсов.
4. Научитесь использовать системы контроля версий. Они помогают находить ошибки в коде и исправлять их.
5. Изучите HTML и CSS. Это будет особенно полезно тем, кто планирует заниматься фронтендом.
6. Совершенствуйте код с помощью надстроек над JavaScript: CoffeeScript, TypeScript и Dart.

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

Заключение

JavaScript — универсальный язык, который подходит как для создания веб-интерфейса, способного привлечь к веб-ресурсу внимание пользователей, так и для разработки программного обеспечения на ПК и приложений. JS является самым популярным языком веб-программирования, поэтому его изучение остается актуальным и в 2023 году.

Что такое Javascript.

Что же такое Javascript? Давайте попробуем сейчас разобраться в этом вопросе.

1. Javascript — это язык программирования.

Первое, что нужно понимать это то, что Javascript — это язык программирования.

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

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

2. Javascript — это клиентский язык программирования.

Что значит клиентский?

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

Получается клиент-серверная структура.

Клиент — это наш локальный компьютер, с которого мы работаем.

Сервер — это тот удаленный компьютер на котором располагается какой-либо сайт.

То, что нужно понимать — Javascript работает на клиенте.

Что является клиентом для протокола http?

Клиентом для протокола http является браузер. Обычный браузер, с помощью которого вы заходите на какие-либо сайты по сети Интернет. Это может быть Google Chrome, Firefox, Яндекс Браузер и.т.д.

Javascript — это тот язык программирования, который работает в браузерах.

Можно упрощенно сказать, что язык программирования Javascript встроен в возможности браузера. При установке браузера вы уже имеете возможности для работы с языком Javascript.

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

Все встроено в браузер и имея его, вы уже можете работать с языком Javascript.

Отсюда же вытекает минус. Я нас появляются трудности с переходом на новые версии языка Javascript.

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

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

Но, на самом деле есть возможности как можно обойти этот минус, как можно сделать возможность поддержки новых возможностей Javascript для всех посетителей сайта и клиентов, но это тема не этого видео.

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

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

Что мы можем делать с помощью Javascript?

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

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

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

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

С помощью технологии CSS можно придавать для веб-страницы элемент оформления. Каким размером, цветом, положением должны быть элементы.

И, Javascript — это автоматизация и логика веб-страницы.

Javascript позволяет создавать интерактивные элементы на веб-странице, обрабатывать события с этими элементами, создавать автоматизированные программы и.т.д.

Надеюсь, что вам стало более или менее понятно что такое Javascript. Если будут вопросы, пишите в комментариях.

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

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

Напишите в комментариях:

1) Для решения каких задач вы планируете использовать язык Javascript?

2) Если изучали язык Javascript раньше, с какими трудностями сталкивались? Что мешало освоить этот инструмент полноценно?

3) Есть какие-нибудь ожидания от этого курса? Что бы хотелось в нем увидеть?

4) Где будете хранить данные из этого курса (блокнот, компьютерная программа или еще где-то)? Что является вашей «Базой знаний»? Поделитесь этим в комментариях.

Как это организую я, можно посмотреть здесь

Дмитрий Ченгаев ��
Занимаюсь заказной веб-разработкой. Подписывайтесь на телеграм канал https://t.me/dchengaev 😉
2020-12-29

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

Автор: Асем Акилбекова 22/06/2022 04:06:50

1) пока что не знаю, но хочу зарабатывать 1лям за месяц
2)не изучала, только что с вами начала
3)есть, хочу выучить язык и зарабатывать свои лямы
4) блокноте и в компьютерном блакноте

Автор: Илюнин Олег 20/05/2020 04:05:46

JS осваиваю с нуля, пока по Вашим урокам, Дмитрий. Подача материала приятна и легка в усвоении. Базу знаний буду организовывать по вашему совету.Раньше этим не занимался, начальная цель — сделать свой сайт, в курсе надеюсь увидеть методику построения сайта.

Javascript и jQuery

Javascript (сокращенно js) — это язык программирования, в отличие от HTML и CSS. На JS делаются такие вещи, которые невозможно сделать просто на HTML и CSS.

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

Короче, Javascript нужен, чтобы делать вещи, которые сложно или невозможно сделать на HTML и CSS. Сейчас верстальщику знать Javascript это уже необходимость.

Хорошо, что он несложный, хотя, конечно, посложнее HTML и CSS. А еще хорошо, что есть jQuery.

Что такое jQuery

Язык программирования называется Javascript (сокращенно — js). А jQuery — это готовые функции Javascript’a.

Одно из главных преимуществ любого языка программирования — это функции. Дальше. Благодаря JS можно сделать так, что при клике на какую-нибудь кнопку появлялось окно посреди экрана. Чтобы это сделать, нужно написать функцию, которая будет реагировать на сам клик. А в jQuery эта функция уже написана! Короче, jQuery облегчает работу верстальщику, и очень сильно.

Что нужно знать в Javascript

Сейчас от JS вам нужно просто понять, как на нем писать. А потом в работе использовать jQuery, как это и делают наверно все. Всё очень просто.

Сперва создайте в своем проекте, который вы еще делали на уровне ПРОФЕССИОНАЛ, папку js, а в ней файл script.js. В файле index.html внизу, перед закрывающим тегом вставьте:

Вы только что создали js-файл и подключили его к своему проекту.

Итак, что нужно знать из JS.

Переменные

Вы наверное знаете переменные x и y из математики. В языках программирования тоже есть переменные. В JS это выглядит так.

Чтобы просто объявить переменную, нужно написать так:

let x;

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

let x = 1;

Обратите внимание, я всегда ставлю точку с запятой в конце. Это важно.

Вставьте следующий код в ваш script-2.js, сохраните файл и откройте в браузере index.html:

let x = 1; alert(x);

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

alert — это стандартная функция Javascripta. Как вы поняли, она нужна для появления всплывающего окна.

В переменную можно записать не только число, но и слово, и текст:

let x = 'Привет, мир!'; alert(x);

Текст пишется в одинарных или в обычных (двойных) кавычках.

С переменными понятно. Теперь о функциях.

Функции

Функция нужна, чтобы не писать один и тот же код несколько раз. Например, вот функция, которая суммирует 2 числа:

function sum(x,y) < return x+y; >alert( sum(2,3) );

Протестируйте этот код с помощью файла script-2.js.

Здесь спрева объявляется сама функция через слово function. Затем она вызывается с числами 2 и 3. Браузер, когда находит alert( sum(2,3) ), «понимает», что sum() — это какая-то функция. Начинает ее искать в коде, находит function sum(x,y). «Видит», что x и y надо сложить. И подставляет вместо x двойку, а вместо y тройку. Вот и всё.

Конечно, для суммы обычно функции не создаются. Я просто показал на этом примере, как функции пишутся и как они вызываются.

Сперва нужно назвать функцию, а затем написать в фигурных скобках, что эта функция должна делать. Потом в коде, где это нужно, вызвать эту функцию. Чтобы её вызвать, нужно написать имя функции, и если нужно, что то указать в обычных скобках, то указать это.

Так работают функции наверно во всех языках программирования.

Вот небольшая картинка-диаграмма для функции:

Этих знаний практически достаточно, чтобы верстать и чтобы познакомиться с jQuery.

jQuery

В вашей верстке уже есть подключение jQuery в файле index.html в самом низу в строке:

Это подключается jQuery версии 3.3.1.

JQuery придуман еще в 2006 году. С тех пор было выпущено уже много версий. Как я уже писал, jQuery это не отдельный язык программирования, это готовые функции, написанные на Javascript. Чтобы вам не приходилось писать их самостоятельно.

Вот пример кода на jQuery:

$('.logo').click( function() < alert("Hello!"); >);

Вставьте его в script-2.js, сохраните, откройте index.html в браузере, нажмите на логотип. Появится окно с надписью Hello!.

Этот код можно прочитать так: при клике на logo нужно вызвать функцию, в которой выполняется функция alert().

Разберу сам код. Сперва пишется знак доллара $ (это особенность jQuery). Потом в скобках и в кавычках указывается нужный элемент, пишется он так же, как в CSS. В данном случае это класс logo. Затем пишется функция click() из jQuery. А в этой функции click() пишется, что нужно выполнить функцию, а в функции уже знакомая вам alert(), которая показывает окошко в браузере.

Функция alert() — это встроенная функция самого языка программирования Javacript, а вот функция click() — это функция уже jQuery.

Может быть сейчас для вас что-то показалось сложным, но использовать JS и JQuery для верстки очень легко, надо просто привыкнуть.

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

И хочу сказать, что изучать Javascript интересно, с ним можно делать крутые вещи на сайте.

Основы JavaScript

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

Что такое JavaScript на самом деле?

JavaScript («JS» для краткости) — это полноценный динамический язык программирования, который применяется к HTML документу, и может обеспечить динамическую интерактивность на веб-сайтах. Его разработал Brendan Eich, сооснователь проекта Mozilla, Mozilla Foundation и Mozilla Corporation.

JavaScript невероятно универсален и дружелюбен к новичкам. Обладая большим опытом, вы сможете создавать игры, анимированную 2D и 3D графику, полномасштабные приложения с базами данных и многое другое!

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

• Программные интерфейсы приложения (API), встроенные в браузеры, обеспечивающие различные функциональные возможности, такие как динамическое создание HTML и установку CSS стилей, захват и манипуляция видеопотоком, работа с веб-камерой пользователя или генерация 3D графики и аудио сэмплов.
• Сторонние API позволяют разработчикам внедрять функциональность в свои сайты от других разработчиков, таких как Twitter или Facebook.
• Также вы можете применить к вашему HTML сторонние фреймворки и библиотеки, что позволит вам ускорить создание сайтов и приложений.

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

Ниже мы познакомим вас с некоторыми аспектами основного языка, и вы также будете играть с несколькими функциями API браузера. Веселитесь!

Пример «hello world»

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

Тем не менее, с JavaScript немного более сложно освоиться, чем с HTML и CSS. Вам придётся начать с малого, продолжая изучение небольшими шагами. Для начала мы покажем вам, как добавить некоторые основы JavaScript на вашу страницу, чтобы создать «hello world!» пример (стандарт в начальных примерах программирования).

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

1. Для начала перейдите на ваш тестовый сайт и создайте папку с именем ‘scripts’ (без кавычек). Затем, в новой папке скриптов, которую вы только что создали, создайте новый файл с именем main.js . Сохраните его в вашей папке scripts .
2. Далее перейдите в ваш index.html файл и введите следующий элемент на новой строке прямо перед закрывающим тегом :

script src="scripts/main.js"> script> 

var myHeading = document.querySelector("h1"); myHeading.textContent = "Hello world!"; 

Теперь убедитесь, что HTML и JavaScript файлы сохранены, и загрузите index.html в браузере. Вы должны увидеть что-то вроде этого:

Что произошло?

Итак, ваш заголовок текста был изменён на «Hello world!» с помощью JavaScript. Мы сделали это с помощью вызова функции querySelector() , захватив ссылку на наш заголовок и сохранив её в переменной, названной myHeading . Это очень похоже на то, что мы делали в CSS с помощью селекторов. Если вы хотите что-то сделать с элементом, то для начала вам нужно его выбрать.

После этого, вы устанавливаете значение переменной myHeading в textContent свойство (которое представляет собой контент заголовка) «Hello world!».

Ускоренный курс по основам языка

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

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

Переменные

Переменные — это контейнеры, внутри которых вы можете хранить значения. Вы начинаете с того, что объявляете переменную с помощью ключевого слова var (не рекомендуется, продолжайте читать, чтобы получить объяснения) или let , за которым следует любое имя, которым вы захотите её назвать:

let myVariable; 

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

Примечание: вы можете назвать переменную практически как угодно, но есть некоторые ограничения для её имени (смотрите в правилах именования переменных). Если вы не уверены, вы можете проверить имя вашей переменной, чтобы увидеть корректно ли оно.

Примечание: JavaScript чувствителен к регистру — myVariable отличается от переменной myvariable . Если у вас возникают проблемы в вашем коде, проверьте регистр!

**Примечание:**Для получения более подробной информации о разнице между var и let, смотрите: Разница между var и let.

После объявления переменной вы можете присвоить ей значение:

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

var myVariable = "Bob"; 

Вы можете получить значение, просто вызвав переменную по имени:

После установки значения переменной вы можете изменить его позже:

var myVariable = 'Bob'; myVariable = 'Steve';

Обратите внимание, что переменные имеют разные типы данных:

Переменная	Пояснение	Пример
String	Последовательность текста, называемая строкой. Чтобы указать, что это значение является строкой, вы должны заключить его в кавычки.	var myVariable = ‘Bob’;
Number	Числа. Числа не имеют кавычек вокруг них.	var myVariable = 10;
Boolean	Значение True(Правда)/False(Ложь). Слова true и false специальные ключевые слова в JS, и не нуждаются в кавычках.	var myVariable = true;
Array	Массив, который позволяет хранить несколько значений в одной ссылке.	var myVariable = [1,’Bob’,’Steve’,10]; Обратиться к каждому элементу массива можно так: myVariable[0] , myVariable[1] , и т.д.
Object	В принципе, что угодно. Все в JavaScript является объектом, и может храниться в переменной. Имейте это в виду, пока вы учитесь.	var myVariable = document.querySelector(‘h1’); Все это из вышеприведённых примеров.

Так для чего нам нужны переменные? Что ж, переменные должны были сделать что-нибудь интересное в программировании. Если значения не могли бы изменяться, то вы не могли бы ничего сделать динамическим, например, персонализировать приветственное сообщение или сменить изображение, отображаемое в галерее изображений.

Комментарии

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

/* Всё, что находится тут - комментарий. */ 

Если ваш комментарий не содержит переноса строк, то зачастую легче поставить две косые черты, как тут:

// Это комментарий 

Операторы

operator (en-US) — это математический символ, который производит результат, основанный на двух значениях (или переменных). В приведённой ниже таблице вы можете увидеть некоторые из наиболее простых операторов, наряду с некоторыми примерами, которые опробуете в JavaScript консоли.

Оператор	Пояснение	Символ(ы)	Пример
Сложение (Конкатенация)	Используется для сложения двух чисел или склеивания двух строк вместе.	+	6 + 9; «Hello » + «world!»;
Вычитание, Умножение, Деление	Они делают то, чего вы от них ожидаете в математике.	— , * , /	9 — 3; 8 * 2; // умножение в JS это звёздочка 9 / 3;
Присваивание	Вы уже это видели: он присваивает значение переменной.	=	var myVariable = ‘Bob’;
Равенство (Тождество)	Делает проверку, если увидит, что два значения равны друг другу, то возвращает результат true / false (Boolean).	===	var myVariable = 3; myVariable === 4;
Отрицание (Неравенство)	Возвращает логически противоположное значение, которое ему предшествует; превращает true в false , и т.д. Когда используется вместе с оператором равенства, оператор отрицания проверяет, являются ли два значения не равными.	! , !==	Основное выражение true , но сравнение возвращает false , потому что мы отрицаем его: var myVariable = 3; !(myVariable === 3); Здесь мы проверяем » myVariable НЕ равно 3″. Это возвращает false , потому что myVariable равно 3. var myVariable = 3; myVariable !== 3;

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

Примечание: Смешивание типов данных может привести к некоторым неожиданным результатам при выполнении вычислений, поэтому будьте осторожны, правильно ссылайтесь на ваши переменные, чтобы получать ожидаемые результаты. Например, введите «35» + «25» в вашу консоль. Почему вы не получили результат, который вы ожидали? Потому, что кавычки превратили числа в строки, так что у вас в итоге получилась конкатенация строк, а не сложение чисел. Если вы введёте, 35 + 25 , то получите правильный результат.

Условия

Условия — это конструкции в коде, которые позволяют проверить истинность или ложность выражения и выполнить другой код в зависимости от полученного результата. Самая распространённая форма условия — инструкция if . else . Например:

var iceCream = "chocolate"; if (iceCream === "chocolate")  alert("Yay, I love chocolate ice cream!"); > else  alert("Awwww, but chocolate is my favorite. "); > 

Выражение внутри if ( . ) — это проверка, которая использует тождественный оператор (как описано выше), чтобы сравнить переменную iceCream со строкой chocolate и увидеть равны ли они. Если это сравнение возвращает true , выполнится первый блок кода. Если нет, этот код пропустится и выполнится второй блок кода, после инструкции else .

Функции

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

var myVariable = document.querySelector("h1"); 

alert("hello!"); 

Эти функции, document.querySelector и alert , встроены в браузер для того, чтобы вы использовали их всякий раз, когда вам это необходимо.

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

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

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

function multiply(num1, num2)  var result = num1 * num2; return result; > 

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

multiply(4, 7); multiply(20, 20); multiply(0.5, 3); 

Примечание: Инструкция return сообщает браузеру, что нужно вернуть переменную result из функции, которую можно будет использовать. Это необходимо потому, что переменные, определённые внутри функций, доступны только внутри этих функций. Это называется областью видимости (en-US) переменной. (Читайте больше об области видимости переменных.)

События

Для создания действительной интерактивности на веб-сайте вам необходимы события. События — это структура, которая следит за тем, что происходит в браузере, а затем позволяет вам запускать код в ответ на это. Наиболее очевидным является событие клика (en-US) , которое вызывается браузером, когда мы щёлкаем по чему-то мышью. Для демонстрации этого события введите следующую команду в вашу консоль, а затем щёлкните по текущей веб-странице:

.querySelector("html").onclick = function ()  alert("Ouch! Stop poking me!"); >; 

Существуют множество способов прикрепить событие к элементу. Здесь мы выбираем элемент и устанавливаем ему обработчик свойства onclick (en-US) анонимной функцией (т.е. безымянной) которая содержит код, который мы хотим запустить для события клика.

Обратите внимание, что

.querySelector("html").onclick = function () >; 

var myHTML = document.querySelector("html"); myHTML.onclick = function () >; 

Просто так короче.

Прокачаем пример нашего веб-сайта

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

Добавление смены изображения

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

1. В первую очередь найдите другое изображение, которые вы хотели бы показать на вашем сайте. Убедитесь что оно такого же размера, как ваше первое изображение или максимально близкое к нему.
2. Сохраните изображение в вашу папку images .
3. Переименуйте это изображение в ‘firefox2.png’ (без кавычек).
4. Перейдите в ваш файл main.js и введите следующий JavaScript. (Если ваш «hello world» JavaScript по-прежнему существует, удалите его.)

var myImage = document.querySelector("img"); myImage.onclick = function ()  var mySrc = myImage.getAttribute("src"); if (mySrc === "images/firefox-icon.png")  myImage.setAttribute("src", "images/firefox2.png"); > else  myImage.setAttribute("src", "images/firefox-icon.png"); > >; 

1. Мы получаем значение из атрибута src изображения.
2. Мы используем условие для проверки значения src, равен ли путь к исходному изображению:
   1. Если это так, мы меняем значение src на путь ко 2-му изображению, заставляя другое изображение загружаться внутри элемента .
   2. Если это не так (значит, оно должно было уже измениться), мы меняем значение src , возвращаясь к первоначальному пути изображения, каким он был изначально.

   Добавление персонального приветственного сообщения

   Далее мы добавим немного другого кода, чтобы изменить заголовок страницы на персонализированное приветственное сообщение, когда пользователь впервые зайдёт на сайт. Это приветственное сообщение будет сохраняться, когда пользователь покинет сайт, а позже вернётся — мы сохраним его с помощью Web Storage API. Мы также включим возможность изменить пользователя и, следовательно, приветственное сообщение, в любое время, когда это будет необходимо.

   В index.html , добавьте следующую строку перед элементом :

   button>Change userbutton> 

   var myButton = document.querySelector("button"); var myHeading = document.querySelector("h1"); 

   function setUserName()  var myName = prompt("Please enter your name."); localStorage.setItem("name", myName); myHeading.textContent = "Mozilla is cool, " + myName; > 

   if (!localStorage.getItem("name"))  setUserName(); > else  var storedName = localStorage.getItem("name"); myHeading.textContent = "Mozilla is cool, " + storedName; > 

   .onclick = function ()  setUserName(); >; 

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

   Заключение

   Если вы следовали всем инструкциям в этой статье, в конечном итоге вы должны получить страницу, которая выглядит примерно так (вы также можете посмотреть нашу версию здесь):

   

   Если вы застряли, вы всегда можете сравнить свою работу с нашим готовым примером кода на Github.

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

   В этом модуле

   • Установка базового программного обеспечения
   • Каким должен быть ваш веб-сайт?
   • Работа с файлами
   • Основы HTML
   • Основы CSS
   • Основы JavaScript
   • Публикация вашего веб-сайта
   • Как работает Веб

   Found a content problem with this page?

   • Edit the page on GitHub.
   • Report the content issue.
   • View the source on GitHub.

   This page was last modified on 3 авг. 2023 г. by MDN contributors.

   Your blueprint for a better internet.