Что такое JavaСценарий? Введение с примером "Hello World".

Что такое JavaСценарий?

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

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

На протяжении большей части своей жизни JavaСкриптовый язык описывался как язык сценариев для клиентской стороны, поскольку он работал только внутри браузера. Сейчас это описание неполное. С момента появления Node.js в 2009 году этот же язык использовался в веб-серверах, утилитах командной строки, настольных и мобильных приложениях. Более точное описание сегодня звучит так: JavaСкриптовый язык — это язык общего назначения, необычайно широко распространенный в браузерах.

К характеристикам, определяющим данный язык, относятся:

• Динамически типизированный: Переменная может содержать число сейчас и строку чуть позже, поэтому проверка типов выполняется во время работы программы.
• Интерпретировано и составлено в режиме реального времени: Такие движки, как V8 в Chrome и Node.js, компилируют часто выполняемый код в машинный код для повышения скорости.
• Многопарадигмальный подход: Поддерживаются императивный, функциональный и объектно-ориентированный стили программирования.
• Управляемый событиями: Код реагирует на щелчки мыши, нажатия клавиш, таймеры и ответы сети, а не выполняется сверху вниз и останавливается.ping.
• Однопоточный режим с циклом обработки событий: Медленно выполняющиеся операции, такие как сетевые вызовы, ставятся в очередь, а не зависают на странице.

История JavaСценарий

Брендан Эйх создал JavaВ 1995 году я работал в компании Netscape Communications над созданием первого рабочего прототипа, который занял около десяти дней. Внутри компании проект назывался [название проекта]. Кофе моккоОна была выпущена в бета-версии Netscape Navigator 2.0 как LiveScript в сентябре 1995 года и был переименован. JavaСценарий в декабре 1995 года в рамках маркетингового соглашения между Netscape и Sun Microsystems, компанией, владевшей... Java в то время.

Именно это переименование является единственной причиной, по которой многие новички до сих пор считают, что... JavaСкрипт представляет собой облегченную версию JavaЭти два языка не связаны между собой ни по дизайну, ни по принадлежности разработчикам, ни по среде выполнения. Компания Netscape представила язык в Ecma International в 1996 году, а первое издание стандарта ECMA-262 было опубликовано в июне 1997 года. В таблице ниже перечислены наиболее важные этапы, которые следует учитывать при чтении старого кода.

Из-за ежегодного цикла выпуска релизов код, написанный до 2015 года, заметно отличается от современного кода. В более старых руководствах используется... var везде, в то время как текущий код предпочитает let и const когда объявление переменных в JavaСценарий.

Что такое JavaДля чего использовался этот скрипт?

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

Игры, визуализация данных, расширения для браузеров и небольшие аппаратные проекты — всё это также зависит от него. Для начинающего практическое следствие простое: усилия, затраченные на синтаксис, теперь напрямую переносятся на работу с серверами, мобильными приложениями и автоматизацию тестирования в будущем. Если вы хотите увидеть применение языка к реальным задачам, пройдите ряд курсов. практический JavaПримеры кода скрипта как только освоятся основы.

Как запустить JavaСценарий?

JavaСкрипт не выполняется самостоятельно. Для его работы необходима среда выполнения, содержащая... JavaСценарий двигательChrome и Edge используют V8. Firefox использует SpiderMonkey, а Safari использует JavaScriptCore. Когда браузер загружает HTML-страницу и обнаруживает скрипт, он передает этот скрипт своему движку, который анализирует, компилирует и запускает его.

Вторая среда разработки — Node.js, которая встраивает тот же движок V8 за пределы браузера. Именно так один и тот же язык программирования работает на сервере или в терминале. Практическое преимущество заключается в следующем: JavaСценарий - это то, что Все современные браузеры его поддерживают. on Windows, Linux и macOSТаким образом, вам редко приходится беспокоиться о том, какой браузер использует посетитель. Это действительно улучшение по сравнению с VBScript, который работал только в Internet Explorer. Windows и теперь он устарел, как и сам Internet Explorer.

Инструменты, которые вам нужны

Для написания кода вам понадобится текстовый редактор, а для просмотра результата — браузер. Notepad++, Visual Studio Code, Sublime TextПодойдет любой удобный для вас редактор, хотя редактор с подсветкой синтаксиса и сопоставлением скобок значительно упростит отладку. Подойдет любой современный браузер: Google Chrome, Firefox, Microsoft Edgeили Safari. Помимо этих двух компонентов, ничего дополнительно покупать или устанавливать не нужно.

Просто JavaСкриптовая программа

Если вы продолжаете JavaСкрипт должен находиться внутри самого HTML-документа, весь код должен располагаться между открывающими тегами. <script> тег и заключение </script> Тег. Именно так браузер отличает ваш код от окружающей разметки. На более старых страницах также устанавливался тег. type атрибут, записанный как <script type="text/javascript">, что было необходимо, когда существовали конкурирующие языки программирования для клиентской стороны, такие как VBScript. Современные страницы его опускают, потому что HTML5 обрабатывает text/javascript по умолчанию. Две приведенные ниже версии функционально идентичны и обе остаются действительными.

Пример Hello World

Традиционный первый вариант программы отображает сообщение. Поместите следующую разметку в файл с именем hello.html и откройте его в браузере.

<html>
<head>
	<title>My First JavaScript code!!!</title>
	<script type="text/javascript">
		alert("Hello World!");
	</script>
</head>
<body>
</body>
</html>

Выход:

A browser dialog box opens containing the text:

Hello World!

Примечание: type="text/javascript" В HTML5 это не обязательно. Следующий код работает точно так же.

<html>
<head>
	<title>My First JavaScript code!!!</title>
	<script>
		alert("Hello World!");
	</script>
</head>
<body>
</body>
</html>

Выход:

A browser dialog box opens containing the text:

Hello World!

Когда страница разрастается более чем на несколько строк, скрипт следует вынести в отдельный файл. .js Этот файл обеспечивает читаемость разметки и позволяет браузеру кэшировать код. Различия подробно описаны в этом сравнении. внутренний и внешний JavaСценарий.

Как написать и запустить свой первый скрипт

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

1. Консоль браузера. Это самый быстрый вариант, не требующий никаких файлов. Откройте любую веб-страницу, нажмите F12 (или Ctrl+)Shift+I на Windows и Linux, Cmd+Option+I macOS) и выберите Консоли Вкладка. Введите строку, нажмите Enter, и результат появится немедленно. Это идеальное место для проверки отдельного выражения или для проверки того, что возвращает функция.

// Type each line into the browser console and press Enter
console.log(2 + 2);
console.log("Guru" + 99);
console.log(Math.max(4, 12, 7));
console.log(typeof "hello");

Выход:

4
Guru99
12
string

Обратите внимание на вторую строку. Добавление числа 99 к строке "Guru" выдает строку "Guru99 дюймов, а не ошибка, потому что JavaСкрипт автоматически преобразует число в текст. Такое поведение удобно, но в то же время является классическим источником ошибок у начинающих программистов.

2. HTML-файл. Это пример "Hello World", показанный выше. Используйте его всякий раз, когда код должен взаимодействовать с самой страницей, например, для чтения значения формы или изменения элемента.

3. Запуск Node.js из терминала. Установите Node.js, сохраните код в файле с... .js расширение, затем запустить node first-script.jsНичего не отображается, поэтому console.log становится вашим каналом вывода. Это тот путь, который следует выбрать, если вы хотите попрактиковаться в использовании возможностей чистого языка без использования HTML.

// first-script.js
const language = "JavaScript";
const createdBy = "Brendan Eich";
const releaseYear = 1995;

console.log(language + " was created by " + createdBy + " in " + releaseYear + ".");

const usedFor = ["Interactive web pages", "Server apps with Node.js", "Mobile apps"];

usedFor.forEach(function (item, index) {
  console.log(index + 1 + ". " + item);
});

Выход:

JavaScript was created by Brendan Eich in 1995.
1. Interactive web pages
2. Server apps with Node.js
3. Mobile apps

В этом коротком скрипте уже используются три принципа, с которыми вы будете постоянно сталкиваться: константы, объявленные с помощью const, массив содержит список значений и функцию обратного вызова, переданную в forEachПереписывая тот же цикл с помощью for Упражнение на формулировку полезно после того, как вы изучили материал. петли в JavaСценарий.

JavaСценарий против Java

Эти названия — самая большая случайность в истории программирования, и путаницу, которую они вызывают, стоит прояснить на раннем этапе. JavaВ 1995 году компания Script была переименована из LiveScript исключительно в маркетинговых целях, в тот момент, когда Java Это была самая обсуждаемая технология в интернете. Два языка были разработаны разными людьми, в разных компаниях, для решения разных задач.

Единственное реальное сходство заключается в том, что оба языка заимствуют синтаксис фигурных скобок из языка C. Изучение одного языка не означает изучение другого, хотя общий синтаксис делает второй язык немного проще для чтения. Если строго придерживаться определенного стиля,ping обращается к вам, TypeScript добавляет статический типографский слой поверх JavaСкрипт во время компиляции в обычный код JavaСценарий, а различия изложены в этом документе. TypeScript и JavaСравнение скриптов.

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

Часто задаваемые вопросы (FAQ)