Здравствуйте. Я рад приветствовать Вас на курсе JavaScript Essential. Этот курс рассчитан на начинающих веб-разработчиков. Для того, чтобы успешно освоить материал этого курса Вам достаточно знать основы HTML-верстки и CSS. На сегодняшнем уроке мы разберем с Вами, кратко рассмотрим с Вами историю языка JavaScript, рассмотрим какие есть инструменты, для того чтобы создавать свои сценарии, посмотрим какие задачи часто решаются с использованием javascript-a и разберем такие темы как переменные, типы данных, операторы, и рассмотрим несколько простых функций позволяющих отображать информацию пользователю, отображать ее либо через вывод данных в разметку непосредственно страницы, на которой выполняется javascript, либо отображение данных через диалоговые модальные окна.

JavaScript это прототипно-ориентированный язык программирования. Скриптовый язык программирования. Прототипно-ориентированный подход в разработке с javascript-ом мы будем разбирать с Вами на следующем курсе. На этом курсе мы затронем немного объекты, поэтому оставим разбор что такое прототипы и прототипно-ориентированный подход, это мы рассмотрим на следующем курсе. Язык JavaScript это скриптовый язык программирования, то есть он используется для написания сценариев, скриптов. Если, например, взять язык Java, язык С#, эти языки позволяют Вам разработать приложения с нуля, то есть делать готовое приложение, которое будет запускается на компьютере конечного пользователя. Если Вы разрабатываете приложение на JavaScript-е, то самостоятельно это приложение работать не сможет, потому что на javascript-е Вы создаете скрипт предназначений для другой программы. В большинстве случаев, скрипт на javascript-е предназначен для браузера. Когда мы заходим на какую-то страницу, при скачивании разметки данной страницы, также мы скачиваем javascript, сценарий который разрабатывали для этой страницы. Эти сценарии начинают выполнятся браузером, который загрузил все это на сторону клиента. Поэтому JavaScript это скриптовый язык программирования, его используют, чаще всего, в различных веб- приложениях, для того чтобы добавить динамику к обычной разметки. Очень часто начинающие разработчики говорят, что они пишут на Java, подразумевая разработку сценариев на javascript-е. Это говорить неправильно, потому что Java и JavaScript это два абсолютно разных языка программирования. Java – это язык, который разработан компанией Sun Microsystems, предназначен язык для решения достаточно сложных задач, он используется для написания серверных приложений, настольных приложений, а JavaScript это язык который разрабатывался компанией Netscape и его задача это добавлять динамику, в первую очередь добавлять динамику в HTML разметку HTML-страницы. Поэтому не путайте Java и JavaScrtipt, это два разных языка. Если Вы работали с языками С++, Java, C#, то Вы увидите, что в JavaScript-е есть очень много похожих конструкций. Синтаксически очень сильно эти языки похожи. Здесь вы можете встретить одинаковый конструкции, во всех этих языках программирования. Поэтому, если у вас есть опыт работи с Java и С#, то вам будет на много проще освоить то что есть в JavaScript-e.

Автором языка JavaScript является Брендан Айк. Мы не будем сейчас разбирать всю историю разработки и создания языка JavaScript, есть очень много сплетен, касательно того как, когда и кем и зачем разрабатывался этот язык. Я вам рекомендую вам посетить известный всем вам ресурс Википедию. Введите в поиске JavaScript, вы найдете, наткнетесь на эту статью на русском языке, можете найти англоязычный вариант, в этой статье описано история, все авторы, которые участвовали в разработке, JavaScript-а, описаны версии языка, некоторые синтаксические особенности. Выделите время и почитайте о JavaScript на Википедии, для того, чтобы мы сейчас не тратили время, как и с какими проблемами и особенностями работы разрабатывался этот язык программирования. Единственно, мы разберем несколько таких важных моментов. Началась разработка языка JavaScript в 1995 году компанией Netscape Navigator как отдельный язык, предназначенный для добавления сценариев, добавления какой-нибудь динамики в статические страницы, которые загружались в Netscape Navigator. Изначально, когда разрабатывался этот язык программирования, его хотели назвать "Mocha" или "LiveScript", но перед самим выходом языка, маркетологи решили, что неплохо было бы назвать язык JavaScript, потому что на то время Java был очень популярным языком программирования и соответственно название JavaScript могло дать больший толчок в развитие нового скриптового языка программирования, поэтому язык назвали JavaScript. Сам же автор языка Брендон Айк в данный момент работает в компании Mozilla foundation, работает как сто, то есть технический директор компании, которая известна разработкой ранее Netscape Navigator, ну а теперь браузером Mozilla.

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

Вот, мы сейчас разберем с вами инструменты для разработчиков в браузере Chrome и посмотрим, как эти инструменты помогают нам понимать работу, работоспособность, работу страниц. То есть что выполняется на странице. Если мы сейчас нажмем F12 в запущенном браузере, к стати в большинстве браузерах клавиша F12 запускает development tool. Если мы нажмем F12 в хроме, то увидим, что у нас есть специальная панель, где описываются различные инструменты, которые могут пригодится при разработке сайта. Вот мы сейчас на этой панельке переключимся на вкладку Network. Эта вкладка нужна для того чтобы отслеживать какие запросы делает браузер на сервер и какие ответы от сервера будут получены браузером. Если мы сейчас обновим текущую страницу, то мы увидим все запросы, которые были сделаны браузером и увидим все ответы. Вот видите, браузер сделал запрос к сайту edu.cbsystematics.com. И вот мы видим тело запроса, мы не будем сейчас разбирать, что означают все эти данные, это называется заголовки, heade-ры. Если вам интересна именно эта часть, то рекомендую посетить курсы, посвященные разработке ASP.Net, там это детально все разбирается. Мы видим, что браузер сделал запрос, и в ответ, смотрите Respond, который был получен сервером, в ответ сервера браузер получил HTML-разметку, кучу текста. Далее, в HTML разметке, если мы присмотримся, есть несколько элементов скрипт. Я думаю Вы все знакомы с самой разметкой, вы знаете, что означает head вот в теге, в head у нас находятся метаданные, которые описывают какие ресурсы нужны данной страницы чтобы продолжить выполняться, чтобы корректно отображаться пользователю. И вот мы видим, что 9 строчка, у нас используется ресурс Jquery, потом ресурс searchru.js и как бы дальше есть несколько CSS стилей, JavaScript, то есть различные файлы, которые необходимы, чтобы эта страница работала, то есть скрипты, ниже на странице мы можем увидеть картинки, очень много различных ресурсов и получается что после того, как браузер скачал основную HTML разметку, браузер начинает скачивать JavaScript файл, вот видите, первый JavaScript файл, вот его код JavaScript сценария, не пугайтесь, что вот код здесь немного странный и очень нечитабельный, это специальная версия JavaScript файла, которая минимизированная, для того, чтобы, лучше, быстрее, скачиваться, передаваться по сети, для того, чтобы она была более оптимизированная для передачи на сторону клиента. Вот и получается, что когда браузер скачивает вот этот вот сценарий, он локально этот сценарий начинает выполнять. Для чего этот сценарий может пригодится локально? Когда JavaScript буде загружен на этой странице, JavaScript может, вот например на главной странице у нас есть вот такой control-rotator, показывающий различные услуги наши, вот если мы наводим мишкой на различные кнопочки, у нас здесь меняется изображение, ну вот получается с помощью JavaScript мы можем добавить динамику на страницу , и вот например с помощью таймер , видите, кнопочка оранжевая, она перепрыгивает на новые tile, показывает новые баннеры, вот с помощью JavaScript мы можем организовать вот такое динамическое поведение, реакцию на поведение мишки, реакция на нажатие мишки по картинке, реакцию на наше бездействие, если мы ничего не делаем, начинается вращаться какой-то счетчик, который передвигает вот этот активный элемент. То есть JavaScript, его задача добавить динамику на страницу. Например, задача JavaScript часто заключается в валидации каких-либо данных на стороне клиента, вот допустим я могу зайти на страницу регистрации и не заполняя форму, нажать на кнопку зарегистрироваться, и вместо того, чтобы зарегистрировать пустого пользователя, страница берет и выдает нам сообщение, что мы забили заполнить какие-то обязательные поля, вот JavaScript сейчас на этой странице, который был загружен когда мы обращались к адресу Register.aspx, JavaScript который пришел со стороны сервера, он проверил информацию, которую мы вводили в форму, если где-то у нас присутствует ошибка, вместо того чтобы отправлять на сервер ошибочные данные, JavaScript вывел нам сообщение от том что где-то есть ошибка, мы ошибки эти все исправим, и нажмем еще раз на кнопку зарегистрироваться, то тогда на сервер уже уйдут правильные данные, и сервер может внести их в базу данных и может выполнить какую-то операцию, связанную с обработкой той информации, которую мы внесли. И вот мы увидели с вами что такое клиентский JavaScript. То есть это ресурс, который загружается со стороны сервера на клиент и браузерным интерпретатором, который встроен в браузер, JavaScript на клиенте выполняется. И решает много важных задач, связанных с пользовательским интерфейсом.

Вот некоторые задачи, которые решает JavaScript: создание визуальных эффектов, вот на главной странице вы видели ротатор, вы видели, как меняются тайлы, JavaScript у нас производилась анимация, в нас переключались картинки. Также вы часто встречаете на сайтах какие-то всплывающие окна, анимации перехода между страницами, вот, скорее всего это реализовано через JavaScript. Выполнение не сложных вычислений. Так как JavaScript загружается на строну клиента и мы не знаем какая мощность будет на стороне клиента, какой компьютер будет выполнять браузер и наш JavaScript, то соответственно мы не должны делать с помощью JavaScript каких-то сложных операций, ну и в принципе это невозможно в веду самих особенностей языка, поэтому очень часто с помощью JavaScript мы на клиенте делаем какие-то вычисление, например, я думаю вы встречали на различных сайтах калькуляторы, специальные там, например, кредитные калькуляторы, подобные какие-то инструменты которые есть на странице, вот эти инструменты скорее всего не обращаются к серверу и локально делают все вычисления. Локальные вычисление мы можем делать с помощью JavaScript. Проверка данных введенных пользователем. Третий пункт. Это то что мы видели с вами на нашем сайте, форма регистрации отказывала нас регистрировать, если мы не заполняли ее, вот стандартный пример использования JavaScript, манипуляция данными введенными пользователями в форму, ну это по сути тоже самое, мы можем не только проверять, валидировать данные, а также можем и что-то изменять, изменять те значение, которые пользователь вводил. Поиск. С помощью JavaScript мы можем организовать поиск каких-либо значений на текущей странице, которая была загружена браузером. Сохранение данных в cookies. Эту тему мы тоже с вами разберем, а пока мы пропустим этот пункт. Второй подпункт "Динамическое изменение содержимого страницы". Есть такое понятие как DHTML. Это, по сути, комбинация статического HTML, CSS и JavaScript. Вот с помощью DHTML мы можем создавать какие-то эффективные, красивые сайты, в которых у нас есть анимация, есть какое-то интересное взаимодействие с пользователем. По сути первые пункты, которые были перечислены в блоке пользовательский интерфейс, все вот эти возможности, все эти задачи, которые мы решаем с помощью JavaScript, если все их собрать в одно целое, мы получим DHTML, то есть, динамическую страницу, с помощью JavaScript мы можем делать страницы динамическими, это будет называться DHTML. И третий пункт "Прямое взаимодействие с сервером без перезагрузки всей страницы". Я думаю вы часто замечали, вот, например, у многих есть почтовые аккаунты на @gmail, @hotmail, на @mail.ru, например, и когда вы заходите на свою страницу с почтового ящика, у вас вкладочка inbox, допустим, у ней нет никаких писем, но находятся на этой странице, вы через какое-то время вы увидите, что появляется какое-нибудь сообщение возле папки inbox, вы увидите, что у вас появилось одно, два письма новых, но при этом вы не перезагружаете страницу. То есть, бывают такие страницы, которые самостоятельно, без вашего вмешательства могут слать запрос на сервер, от сервера получать информацию, и делать частичное какое-то обновление, то есть, не полностью перезагружаться, а обновлять какой-то отдельный маленький кусочек. Вот такой подход в разработке страниц, с частичным обновлением, называется AJAX Asynchronous JavaScript And XML. На этому курсе мы не будем разбирать AJAX, AJAX рассматривается в следующем курсе Advanced. Но эта технология полностью базируется на JavaScript, без JavaScript сделать AJAX сайт у нас не получится. Вот это роль клиентского JavaScript. Мы, разобрав этот слайд, я думаю теперь вы понимаете какие основные задачи могут быть решены с помощью JavaScript и для чего он вообще нужен.

Ну и маленький пример того, как будет выглядеть клиентский JavaScript. Я думаю, для вас знакомый блок кода. В левой части слайда, обычная HTML разметка и в этой HTML разметке есть элемент скрипт, в котором выполняется цикл, циклы мы будем с вами разбирать дальше, в следующих уроках, но я думаю, что для большинства, код который мы здесь с вами видим, он является знакомым, во всех языках программирования циклы выглядят одинаково. В этом JavaScript вот тут немножко по-другому синтаксически организуется цикл, и получается, что если браузер скачает вот такой вот кусочек HTML кода, в теле страницы, в котором отобразится вот такое сообщение. В h1 выведется вот такой заголовок, вот он "клиентский JavaScript", а вот ниже цифры 1, 2, 3, 4, 5, вот они выполнились благодаря тому, что выполнился вот этот цикл. Теперь давайте посмотрим какие инструменты необходимы для того, чтобы разрабатывать сценарий на JavaScript. Есть очень много различных текстовых редакторов. По сути, для того чтобы разрабатывать на JavaScript вам нужен браузер и как минимум блокнот, но разрабатывать в блокноте очень неудобно, поэтому рекомендую установить какое-то более продвинутое программное обеспечение для работы с кодом. Мы на этом курсе будем пользоваться таким инструментом как Visual Studio. Я думаю вы можете остановить свое видео и переписать вот этот адрес, либо просто в поиске ввести Visual Studio Express. По этому адресу, если зайдете, вы увидите сайт Майкрософта, где находятся все версии Visual Studio, программного продукта для написания кода. И вот на страничке, вкладка, посвященная Express версии, это бесплатная версия. Вам нужно скачать Visual Studio Express, не важно какую версию, можете взять 2012, сейчас появилась 2013, можете взять предыдущие версии, в принципе нам достаточно минимального набора, который предоставляется Visual Studio, на этой странице вы можете выбрать язык, на котором хотите себе студию, вы можете даже выбрать русский язык, но я все таки рекомендую английский язык, потому что у меня будет английская версия студии и очень часто заходя на какие-то форумы, рассматривая туториалы и уроки, вы будете встречать названия англоязычных пунктов меню, английский будете видеть интерфейс, поэтому чтобы не мучится и не переводить все на русский, если у вас локально стоит русская студия, лучше установить английскую версию студии, рекомендую именно пользоваться английской версией студии. Вы можете установить ее либо через веб-инсталлер, нажав на эту ссылку, либо скачав полный образ студии и установить ее как-бы офлайн. Единственное, студию нужно будет зарегистрировать, она бесплатная, регистрация нужна для того чтобы продолжить использование студии после 30-ти дневного триала, то есть если вы 30 дней пользуетесь нормально, то после 30 дней вам нужно будет зарегистрироваться на сайте Майкрософта, и вы сможете бесплатно пользоваться вот этой версией Visual Stuudio. Кроме Visual Studio есть очень много и других редакторов, есть WEBMAtrix, есть WebStorm, есть Submailtext. Я очень часто пользуюсь таким редактором как Notepad++, вы можете зайти тоже, это бесплатный редактор, который по сути является простым редактором текста, но в нем есть много различных функций подсветки синтаксиса, отображение подсказок, много различной удобной функциональности, поэтому себе кроме Visusal Studio установите себе и Notpad++. Многие разработчики пользуются только Notpad++ или Submailtext, не пользуясь Visual Studio, это ваше личное предпочтение, примеры, которые вместе скачиваются с этим уроком это обычные текстовые файлики, поэтому, где бы их будете открывать, это уже не имеет никакого значения. Допустим, в Visual Studio, ее преимущества в том, что она показывает очень много подсказок, когда вы разрабатываете приложение, там друге редакторы, они являются просто текстовыми редакторами, и не выводят вам сообщений, не выводят вам подсказку по текущему контексту и не подсказывают, какие вы можете использовать именно функции, переменные и так далее, поэтому я рекомендую установить именно Visual Studio.

Ну и давайте сейчас посмотрим, что вы будете видеть, когда установить Visual Studio, какие вам нужно нажимать пункты меню, для того, чтобы открыть наши примеры и начать с ними работать.

Когда вы запустите Visual Studio, Вам нужно нажать пункт меню File - Open - web-site и в появившемся окошке вам нужно будет найти папку с примерами, которые вы скачали с видео сайта, и с позиционироваться либо на урок, папку с уроком, либо на папку Samples, которая находится внутри папке "Урок 1". Если мы сейчас выберем Урок 1 и нажмем "Open", Visual Studio откроет специальное окно, загрузит в это окно контент из папки 1, мы увидим, что в этом окне, Solution Explorer, у нас отображается папка Samples, где находятся все наши примеры, которые сейчас привидеться разобрать, и несколько *.xps файлов, в которых находится различная полезная информация, дополнительна, которую вы будете обрабатывать во время самостоятельной роботы над этим уроком. Если ми откроем в проводнике этот урок, то увидим, что у нас в этом уроке есть, что мы в solution explorer просматривали, то же самое у нас доступно в проводнике Windows. Папка Samples со всеми примерами внутри. И вот эти *.xps файлики, которые здесь находятся. Получается, что вы будете работать с вот этими исходными файлами из-под Visual Studio, и что вы будете открывать каждый вот этот документ в Notepad++ или в другом текстовом редакторе, разницы никакой нету, в любом случае вы будете редактировать ту информацию, которая находится внутри HTML документа. Дома, дополнительно, когда вы будете самостоятельно работать над данным уроком, обязательно открывайте *.xps, не презентацию, потому что презентацию мы открывали в начале урока, открывайте всегда файл с описанием к уроку, в этому описании вы найдете много полезных ссылок, вы найдете домашнее задание, рекомендации, касательно самостоятельной роботы, поэтому этот файл обязательно просматривать для того чтобы более эффективно обучить, освоить материал, который мы разбираем на уроке. Ну и теперь мы с вами готовы перейти к вашим примерам, готовы начать разбирать как происходит написание сценариев, как мы создаем сценарии, а теперь открываем первую папку 01_Introduction, в этой папке у нас будут основные возможности JavaScript, мы разберем как JavaScript можно внедрять в документ, как мы можем начать разрабатывать на языке JavaScript. Есть несколько способов подключение кода к HTML разметке, один из способов, это использование тега skript, видите на 16 строчке мы открываем тег "skript", а на строке 22 мы этот тег закрываем. Все что находится между двумя этими блоками кода, это будет сценарий текущего документа. Когда браузер скачает этот HTML документ, он начнет его выполнять линейно, JavaScript интерпретируется построчно. Когда мы дойдем до 16 строчке, браузер начнет построчно выполнять вот этот вот код и выполнять инструкции, которые в этом скрипте у нас заложены. Когда мы определяем текст "skript" желательно для HTML версии 4.0, 4.1 использовать атрибут type. В данном примере, видите, что HTML-документ не определена его версия, у нас нету Docktype вначале. Если мы сейчас скажем, что DOCKTYPE HTML, то есть укажем, что Docktype этого документа 5 версия, то это будет означать, что в теге "skript" не обязательно устанавливать атрибут "type". У большинстве современных примерах вы будете встречать вот такую вот запись, когда тег "skript" не содержит в себе атрибут "type", но наличие атрибута "type" не является ошибкой, поэтому мы можем его оставить. Далее мы видим, что у нас на 18 строчке у нас выполняется первая инструкция описана этим сценарием, когда браузер скачает этот документ и начнет интерпретировать 18 строчку, он выполнит операцию "alert", это функция, которая встроена в сам браузер, когда вы вызываете эту функцию и передаете ее в кавычках значение, вот это значение, оно будет отображено пользователю в модальном, диалоговом окне. Когда мы нажмем на кнопочку в диалоговом окне и окно свернется, и у нас продолжится выполнения сценария, и выполнится 20 строчка, мы выполним вот такую инструкцию, Document.write и в параметры этой функции, в двойных кавычках, передадим значение "Hello world again".

Document, что означает этот блок кода, document, это объект, который по сути дает нам доступ к текущем документу, который в данный момент загружен браузером. Когда мы обращаемся к вот этому документу document, мы можем вызвать определенный набор методов, обратится к определенным свойствам этого документа для того чтобы поменять состояние документа, добавить дополнительные какие-то элементы в тел документа. Вот если вы пользуетесь Visual Studio, одной из преимуществ Visual Studio заключается в том, что если вы после какой-либо конструкции ставите точку, Visual Studio показывает вам специальную подсказку, которая называется intelliSense, вот в этой подсказки вы видите у нас есть ряд конструкций, к которым мы можем обращаться, ряд различных членов объекта document. Вот, например, есть, если вы видите синие квадратики, это свойства. То есть, например, свойство padding, то есть это тело документа, часть где находится HTML разметка, мы можем ссылаться на padding. И свойство bgcolor, это фон документа, то есть эти синенькие квадратики — это значения, которые есть в объекте. К объектом мы немножко дальше подойдем, детальней это будем разбирать. Вот если посмотреть на фиолетовые квадратики, вот если я напишу букву «w» еще раз, если вы видите фиолетовый куб, это действие, которое умеет делать объект. Вот допустим, мы можем попросить документ написать определенную строчку текста, то есть вывести дополнительный контент в тело документа. Вот получается на 20 строке мы берем и пишем document.write, то есть в тело документа записываем строчку «Hello world again». Именно вот в этой части документа, в теге head у нас будет добавлено сообщение «Hello world again». Когда мы этот документа загрузим, браузер вначале выведет нам alert, а после alert уже в документ запишет сообщение. Пока не расстраивайтесь если у вас не до конца получается понять, что такое document, что такое объект, это отдельная тема, мы будем более детально разбирать, что собой представляет объект. В этом примере нам нужно понять, что добавление в сценарии к документу происходит с помощью тега скрипт, который вы можете поместить в любую часть страницы. В нашем примере сейчас скрипт находится в head. Но часто вы будете встречать и в самом body, в теле документа. То есть скрипт можно поместить где угодно. Ну и теперь давайте запустим этот пример, для того, чтобы запустить пример в Visual Studio, вам нужно, вот есть панелька специальная на которой вы можете, во-первых, выбрать браузер, в котором будет происходить запуск, то есть все браузеры, которые установлены на локальную машину вашу, они будут появляться в этом списке, вы можете сказать в каком браузере вы в данный момент хотите запустить свой сайт. Для того, чтобы если у вас браузер уже какой-то выбранный, если вы чаще всего одним и тем же браузером пользуетесь, вы можете нажать комбинацию клавиш Ctrl + F5 или просто F5 и это приведет к тому, что у вас запустится сайт и запустится браузер и в этом браузер вы увидите свой запущенный сайт. Мы сейчас просто нажмем по этой кнопочки, Visual Studio покажет нам специальное окно в котором спрашивается о том, нужна ли нам сей информация по отладке этого приложения, это окно нам нужно проигнорировать, потому что связано с разработкой С# кода, если б не на JavaScript сейчас писали, а на ASP.NET, то есть создавали сайт, в котором есть и HTML и JavaScript и CSS и дополнительно еще логика на серверной стороне написана C# кодом, тогда нам нужно было на этом окошке остановится и разобраться в его настройках. Пока мы нажмем просто запустить без отладки, нажмем на ОК и видите, у нас открылся браузер, в браузере у нас открылась вкладка, которую страницу мы сейчас с вами разбирали. Видите, в этой вкладочке у нас загрузился контент, в котором отображается диалоговое окошко, то есть это диалоговое окно, вот оно появилось у нас из=ща инструкции на 18 строчке. То есть alert, вот вызывает такое окошко. На протяжении всего курса мы будем пользоваться alert, для того чтобы отображать какие-то данные, которые были рассчитаны, то есть значение, которые были вычислены нашим JavaScript. Сейчас, вот на этой 18 строке у нас остановил интерпретатор скрипта, то есть код не выполняется до тех пор, пока мы не нажмем на кнопочку ОК и спрячем это окошко. Если нажимаю на кнопку ОК, видите у нас продолжается выполнение JavaScript и в тело документа вводится то сообщение, которое в document.write мы записали. alert, то есть это отобразить окно всплывающее, это внедрить дополнительный какой-то контент в тело документа. Это был первый пример, в котором мы посмотрели, как можно внедрить JavaScript код в документ.

Второй пример, давайте посмотрим, как мы можем использовать комментарии в своем коде. Я думаю многие из вас слышали о комментариях, знаете их назначение. Комментарии, как и в других языках программирования нужны для того чтобы объяснить ту или иную строчку кода, для того чтобы объяснить для чего вы решили использовать определенный алгоритм, то есть сделать какую-то дополнительную подсказку для себя и для других разработчиков, которые будут читать ваш код. Комментарии у нас есть HTML, которые непосредственно в разметке определяются и есть комментарии в JavaScript коде. Если вы встречаете вот такой блок кода, то есть знак меньше, восклицательный знак, две черточки и две черточки, знак больше. Все что находится между двумя этими строчками кода, это будет у нас считаться HTML комментарием. То есть это то, что будет отправлено на строну клиента, оно будет у нас хранится в HTML разметке, но не будет визуализироваться самим браузером. Если вы собираетесь ставить комментарии в JavaScript коде, то тогда вам нужно использовать вот такой вот синтаксис. Если вы хотите сделать так, чтобы строка была комментарием, перед строкой ставите два слеша. Два слеша означает, что следующая строчка текста не должна интерпретироваться, она должна рассматриваться как просто текст-подсказка. Если вам нужно несколько строчек кода закомментировать, то вы можете использовать многострочный комментарий, для этого вы ставите слеш + звездочка, там, где хотите начать комментировать текст, и звездочка + слеш, там, где вы хотите закончить блок, закрыть блок комментариев. Вот два способа которыми мы можем пользоваться для того чтобы оставить комментарий. Давайте сейчас запустим этот пример. Я нажму Ctrl +F5, у меня откроется браузер, вот в браузере опять отобразился Hello world, в тело документа ничего не вывелось, потому что наш сценарий ничего не отображал в документе. И сейчас мы возьмем и попробуем открыть исходный код этого документа. Если мы кликнем правой кнопкой по браузеру и выберем пункт View page source, то у нас откроется окно, сейчас я его сделаю меньше. У нас откроется окно, и мы увидим, что в это окне есть все то, что мы писали у себя в коде, как-бы своей страницы, то есть комментарии – они все видны пользователям. И в JavaScript комментарии и комментарии в html разметке они как бы в открытом виде, а отправляются серверу браузеру, поэтому как бы в комментариях, все что находится в комментариях, это будет текст доступен пользователю, пользователь сможет его прочитать. Вот пример, который показал, что такое комментарий, как их можно создавать. Очень часть комментарии мы будем использовать для того чтобы избавится от какого-то, как бы, отдельной строчки кода, проверить как будет работать код если эта строчка будет отсутствовать. Мы можем, например, мы не хотим сейчас отображать alert, мы хотим его убрать. Мы можем просто удалить вот эту строку, для того чтобы попробовать как будет работать наш сценарий, когда alert нету, но вместо этого мы можем просто закомментировать эту строку чтобы позже розкоментировать эту строку и вернуть сценарий в исходное положение. То есть вот, я закомментировал строку №9, если я сейчас нажму на Ctrl + F5, откроется браузер, видите, уже никаких alert у нас не отображается потому что мы поставили комментарий на 9 строке. Убираем комментарий, к стати, вы можете не нажимать постоянно на Ctrl + F5, вы можете нажать на ctrl + S, сохранить документ, видите, вот вкладочка, когда мы вносим какие-то изменения в Visual Studio, Visual Studio нам подсказывает, что вкладка еще не сохранена, выводя здесь вот такую звездочку. Если мы нажимам сохранить, видите, звездочка исчезает, эта страница у нас уже считается сохраненной. Теперь мы можем взять открыть браузер и просто обновить страницу. После обновления у нас с сервера скачивается новый Html и JavaScript код, уже роскомментированная строчка, видите alert у нас отображается теперь. В нашем сейчас примере и клиент, и сервер это один компьютер, то есть один компьютер на котором запущен браузер, и компьютер на котором не работает Visual Studio, это одновременно и клиентская сторона, и серверная сторона. Теперь давайте вернемся к нашей презентации, рассмотрим несколько слайдов и перейдем к следующим примерам в котором показываете работу с переменной.

Слайд №7. Слайд лексическая структура. Лексическая структура языка программирования это несколько элементарных правил, набор правил, которых мы должны придерживается, когда разрабатываем код с использованием языка. Какие есть правила для языка JavaScript. Первое. Язык JavaScript это чувствительный к регистру. То есть, когда вы в своем сценарии определяете какие-либо идентификаторы, название переменных, названия функций, то есть что-то именуете, вы должны учитывать регистр. Например, если вы напишете alert с маленькой буквы или alert с большой буквы – это будут две разные функции, поэтому нужно всегда учитывать регистр при наименовании. Второе правило. Каждая законченная инструкция должна заканчиваться точкой с запятой либо началом новой строки. Это не очень хороший подход использовать начало новой строки как символ завершения инструкции. Лучше каждую завершенную команду заканчивать точкой с запятой приучите себя это делать. И в JavaScript игнорируются пробелы и табуляция. Если вы, например, вызовите функцию alert и между alert и первой фигурной скобкой, которая определяет параметры, которые передаются в эту функцию, напишете один, два или десять примеров, это никак не повлияет на выполнение сценария. То есть все пробелы и табуляция, они все игнорируются, удаляются перед тем, как сценарий будет выполнятся. Это вот как бы такие базовые правила оформление кода в JavaScript. Со всеми правилами, рекомендациями и оформлению, мы будем потихоньку сталкиваться во всех примерах этого курса в каждом уроке.

В JavaScript есть несколько зарезервированных слов, которые мы не можем использовать в качестве имен своих переменных, функций и так далее. Эти ключевые слова имеют какое-то определенное значение в JavaScript, и мы будем с вами многие из этих слов использовать в следующих примерах. Если вы работали с языками программирования С++, С#, то большинство из этих ключевых слов вам будут знакомы. В JavaScript ихнее назначение по сути такое же, как и в других языках. Например, ключевое слово if используется для того чтобы создать условие, а ключевое слово do, для того чтобы сделать цикл, цикл for, например. То есть все назначение ключевые слов оно у нас приблизительно такое же, как и в C#, единственное, во многих языках нет такого ключевого слова как instanceof. В языке JavaScript это слово присутствует. Также есть ряд ключевых слов. Которые зарезервированные, но еще не используются в самом языке, которые зарезервированные для будущих версий. Вот вы видите перечень этих ключевых слов, но мы их использовать не будем так как они никакого смысла не несут пока что в сценариях. Поэтому если вы создаете переменную, вы можете, например, назвать переменную именем abstract. Но лучше этого не делать, потому что в будущем, возможно abstract станет ключевым словом, которое будет использоваться JavaScript, ваш сценарий начнет по-другому интерпретироваться, если в нем переменная или какие-либо идентификаторы будут иметь вот такой вот вид. Поэтому лучше не используйте в качестве идентификаторов, то есть названий, вот такие вот слова, которые перечислены на этом слайде.

Ну и сейчас мы с вами переходим к части урока, в которой мы разберем что такое переменная, как переменная используется, какие основные правила создания и работы переменных. Переменная это область в памяти, которая будет использоваться для хранения некоторого значения. В этом курсе мы не будем детально разбирать как организовывается память, как именно хранятся значения в оперативной памяти, когда ваш скрипт выполняется. Если вы хотите изучить вот именно такие основы, базу, если хотите знать, как работает память, как работают приложения, если вы хотите там знать двоичный код, математику знать вот именно больше таких базовых принципов выполнения любого программного кода, рекомендую вам посмотреть курс C# Starter, в нем очень детально рассматриваются такие вот именно такие азы и тонкости хранения памяти. В этом уроке мы с вами переменные будем понимать просто как контейнер, в котором сохраняется некоторое значение, мы не будем углубляться в детальное хранение. Если вы разрабатываете определенный сценарий, скорей всего в этом сценарии вам нужно будем манипулировать какими-то данными, вам нужно будем хранить, например, имя, фамилию пользователя, который сейчас на странице, там, например, хранить количество ошибок, которое пользователь допустил при редактировании формы, вам возможно какие-то значение нужно будет сохранить на протяжении выполнения всего сценария. Вот когда вам нужно в своем коде хранить какую-то информацию, вы можете создать переменную, то есть выделить для некоторой информации область памяти и в этой области памяти сохранить нужное вам значение. В языке JavaScript создание переменных очень простое, потому что язык JavaScript это типизированный динамический язык. Многие языки программирования являются строго типизированными, это означает, что когда вы создаете переменную, вам нужно обязательно определить тип этой переменной. Сказать, что эта переменная будет целочисленная, то есть хранить в себе целочисленные значения, или строковая, или вещественная. Сказать, что вы собираетесь хранить в этой переменной, для того чтобы ваше приложение правильно использовалось областью памяти, в которую вы будете записывать непосредственно значение. Когда вы работаете с JavaScript, вам достаточно просто определить, написать ключевое слово var, которое говорит то том, что вы создаете переменную, все знаете, есть такое английское слово valuable, вот, это сокращение от слова переменная. Вы написали ключевое слово var, после которого установили идентификатор, установили имя переменной и вот этого достаточно чтобы создать переменную. В JavaScript интерпретатор самостоятельно поймет какого типа данных должна быть вот эта переменная. Толи она будет строковой, толи целочисленный, толи вещественной, толи каким-то сложным объектом, это за вас решит сам интерпретатор. Когда мы создаем переменную, мы можем ее сразу же инициализировать. В нашем случае после имени переменная, мы пишем знак равно, но знак правильно читать как «присвоить». То есть мы сейчас вот этой созданной переменной присваиваем значение десять. Вот это выражение, вот просто значение, которое находится у вас в коде называется литерал. То есть это чистые данные, которые вы определили в своем сценарии. Получается мы здесь создали переменную с именем name и присвоили этой переменной значение десять. И дальше, ниже, по ходу выполнения этого сценария, мы сможем обращаться к переменной name и видеть то значение, которое в этой переменной там находится. Мы можем это значение менять, манипулировать данными, которые находятся в этой переменной, дальше в примерах мы будем часто встречать переменные, мы с вами разберем все тонкости работы с переменными. Сейчас нам нужно заполнить, что JavaScript это динамический, типизированный язык, поэтому создание переменной здесь просто заключается в использовании одного ключевого слова. Естественно, по типам данных, вы должны знать, мы сейчас с вами разберем какие бывают типы данных, создавая переменные, вы в любом случае будете создавать переменную какого-то типа данных просто вы как разработчик, не обязательно должны вникать в то, какой сейчас тип данных будет создаваться. В большинстве случаев вам нужно знать какой тип данных был создан, но сейчас для нас это пока не важно. Давайте мы перейдем в студию и посмотрим на пример, который показывает, как создаются переменные.

Открываем пример №3. В этом примере вы видите, что на 13 строчке мы создаем переменную с именем «а», присваиваем этой переменной значение 10. На строке 14 и 15 мы создаем еще две переменные «b» и «d». Эти переменные у нас остаются без значений. Мы их просто определили, они в нашем сценарии присутствуют, но пока данных у этих переменных нету. То есть тип данных этих переменных пока не известен. Дальше строке 17, на 17 строке мы берем переменную «b» и этой переменной присваиваем новое значение, значение «Some string», на 14 эта переменная была без значения. На строке 17 мы переменной присвоили значение «Some string», и сейчас тип этой переменной undefined, то есть не определен, а на строке 17 тип этой переменной превратился в строковой. Когда вы в коде встречаете литерал, то есть значения, взятые в двойные или одинарные кавычки, это означает, что вы создаете строку, которую будет видеть пользователь, который используется для отображения. Вот значит первый блок скрипта показал, как мы создаем переменные. Мы увидели, что переменную можно сразу же инициализировать, как на 13 строчке, мы видели, что переменную можно просто создать, не присваивая ей значения, а присвоить значение позже. Дальше мы с вами посмотрим на все типы данных, которые бывают в JavaScript, но единственное, JavaScript не поддерживает создания переменных с явным указанием типа. Вот, например, на 16 строчке у нас есть комментарий. Если мы уберем этот комментарий и попробуем создать переменную, явно определив ее тип данных, это не приведет ни к чему хорошему. Видите, Visual Studio уже подсказывает нам, что у нас есть здесь ошибка, букву «с» у нас подчеркивает красным, красной черточкой, говоря, что у нас есть какой-то ошибочная инструкция, вот получается, что в JavaScript запрещается создать переменную явно определив ихний тип. Дальше, строка 22. Создавать переменные можно без ключевого слова var, такое тоже возможно, но это очень плохая практика. Если вы создаете переменную как на 22 строке и присвоить 22. По сути здесь тоже создаете ключевое слово var, создаете переменную, которая будет хранить в себе значение 22, но есть отличие достаточно большое, если вы создаете переменную, без использования ключевого слова var, то вы создаете глобальную переменную. Когда вы пишите ключевое слово var, вы создаете переменную локальную. На уроке 24 мы с вами будем изучать функции. Вот не этом уроке вы для себя четко поймете разницу между локальными и глобальными переменными. Пока я рекомендую, чтобы вы при создании переменных всегда пользовались ключевым словом var, потому что таким образом вы сможете избавится от многих ошибок, которые возникают, когда вы не контролируете количество глобальных переменных, создаете глобальные переменные. То есть на 22 строчке мы тоже создаем переменную «i», сейчас в этом примере, так как он очень простой, у нас нету разницы, что мы определяем переменную таким образом, что образом, которые показан на 22 строчке, в любом случае у нас появляется переменная. На 13 строке появилась переменная «а», а на 22 строке переменная «i». Переменная «i» у нас тоже будет целочисленной, «i» мы присвоили значение 22, а на 23 строке мы эту переменную отобразили в диалоговом окошке. 25 строчка, мы создали еще одну переменную «а», то есть создали переменную, которая у нас находилась выше, мы можем определять переменную еще раз, хотя лучше такого не делать, это тоже может привести к неоднозначному выполнению и пониманию своего кода. Но сейчас мы в переменную «а» присвоил переменную «b», получается, что переменную «а», которую мы здесь создали, она у нас новая, она пустая. Этой переменной мы присвоили значение, которое находится в переменно «b», а в переменной «b» сейчас находится значение «Some string». То есть получается, значение с переменной «b», перешло в переменную «а», скопировалось сюда и на 26 строке, когда мы выводим alert значение переменной «а», у нас отображается текст «Some string». Давайте проверим, нажмем CTRL + F5. И вот мы видим, первое 22, это окошко было запущено строкой 23. А вторая операция, 26 строчка, alert(а), вот вывело сообщение «Some string». Но опять таки, JavaScript, так как у вас нету компилятора, нету какого-либо механизма, который может вас проверить, JavaScript очень так щадящее относится к ошибкам, поэтому вы можете не поставить где-нибудь точку с запятой, создать переменную без ключевого слова var, создать переменную, которая где-то уже была определена, то есть, если вы будете невнимательными и если вы будете создавать, разрабатывать код, как бы с такими небольшими погрешностями, то это может потом плохо сказаться на общем качестве вашего сценария. Вы можете начать получать какие-то ошибки и долго в этих ошибках разбираться и не понимать почему код работает не так, как вы ожидали. Поэтому лучше себя всегда держать в каких-то рамках и следить за своими ошибками, лучше везде заканчивать инструкции точкой с запятой, лучше всегда создавать переменные использовать ключевое слово var и следить за тем, чтобы вы не создавали переменные, которые когда-либо уже были определены. То есть здесь лучше использовать не имя «а», а имя, там допустим, «f», которого еще нету, в таком случае у нас точно не будет проблем в нашем сценарии. В этом примере мы посмотрели на то, как мы работаем с переменными, как мы их можем определять. Теперь в следующем примере мы посмотрим, как мы можем их определять, какие есть правила переменных. По сути этот пример, и его же мы смотрим на слайде, давайте мы переключимся на следующий слайд, какие правила создания идентификаторов для переменных. Первое, мы можем называть переменные используя английские буквы, в нижнем, верхнем регистре так же мы можем использовать цифры, какие-то специальные знаки, знаки восклицания, знаки вопросов, черточки, плюсики, это все недопустимо в именах переменных. Так же мы не можем создавать переменные с пробелами. Допустим, это имя переменной корректно. Если мы возьмем вот такое имя, в котором присутствует пробел, такое имя недопустимое. Если вы хотите, вы можете в переменных использовать цифры, например, имя element21 будет правильным именем для переменной. Но 21element, когда цифры находятся вначале имени, это недопустимый способ наименования. Также при создании переменных вы можете использовать такой специальный символ как «$» и нижнее подчеркивание «_». То есть, вот оба эти имени будут корректными, но обычно доллар используется в тех случаях, когда создается какая-это библиотечная функция, то есть когда вы разрабатываете некий Framework, у вас есть какие-то внутренние функции, которые представляются вашим Framework, тогда вы можете назвать свою внутреннею функцию, для внутреннего использования с помощью доллара, то есть дайте ей более странное имя, чтобы обычнее разработчики, обычные пользователи вашего сценария, старались не запускать эту функцию, не использовать ее. Нижнее подчеркивание также означают, что переменная или функция, которую вы создаете, она предназначена для других разработчиков, которые могут ее запустить, лучше ее не запускать, то есть вы ее для себя разрабатывали и в будущих версиях своего сценария, вы ее удалите, поэтому вот такие вот странные имена используются достаточно редко. Рекомендую вам немножко глубже изучить язык JavaScript, рассмотреть все его возможности и тогда вы сможете четко понять разницу именования, когда лучше использовать доллар в имени, когда нижнее подчеркивание. Старайтесь всегда создавать свои имена максимально понятными, чтобы прочитав имя переменной, сразу было понятно для каких целей эта переменная используется. Согласитесь, если вы создадите переменную с именем varAge, со значением 30, то сразу будет понятно, что переменная Age используется для того, чтобы хранить возраст. Всегда давайте осмысленные названия для своих переменных и не придумывайте переменным какие-то технические названия, типа abc1, abc2, это будет очень непонятно и потом, в будущем, при сопровождении кода это будет только усложнять ваш код. И когда вы именуете переменные, еще не плохо придерживаться стиля наименования, вот как раз в Visual Studio у нас есть пример, в котором показаны правила наименования, но этот пример мы можем пропустить, мы только что рассмотрели у себя в коде, пример, когда переменные могут именоваться. Теперь давайте посмотрим на пример №5 в котором показано два подхода в наименовании идентификаторов. Первый подход называется CamelCase. Строка 21. Когда мы создаем переменную, вот видите переменная состоит из двух по сути слов, CamelCase, например, какое мы еще можем имя переменной задать, например, мы можем создать переменную firstName, то есть когда вы используете подход CamelCase, это означает, что первый символ в вашей переменной будет в нижнем регистре, а каждое слово из которого будет состоять ваша переменная, первая буква вашего слева будет определяться в верхнем регистре. Допустим, если мы хотим создать переменную с именем допустим myFirsName, my с нижнего регистра, First, первая буква верхний регистр, Name, второе слово, тоже первая буква в верхнем регистре, этот принцип наименования называется CamelCase. Потому что, по сути похоже на очертания верблюда, то есть появляется горбы верблюда, вот этот стиль наименования называют CamelCase. Второй стиль наименования, который используется в JavaScript, называется PascalCase, это означает, что все слова, из которых состоит идентификатор, каждая первая буква каждого слова пишется в верхнем регистре. PascalCase, вот видите верхний регистр, верхний регистр. Например, если я хочу создать переменную в PascalCase, я пишу myFirstName, это имя будет читаться PascalCase. Когда вы пользуетесь этими стилями наименования, старайтесь CamelCase, этот стиль наименования, использовать для переменных, а PascalCase, чаще используется для функций и конструкторов. Но функции и конструкции — это темы, следующих наших уроков, поэтому ближайших примерах мы часто будем разбирать, видеть именовании в стиле CamelCase. Теперь, когда мы с вами знаем, что такое переменная и как правильно именовать переменные, давайте разберем какие типы данных существуют в JavaScript. Вернемся к презентации, на 12 слайде вы видите список типов, которые используются в сценариях. Первый блок, элементарные типы, в нем вы видите три типа данных, это числа, строки и логические значения. Назначение этих типов я думаю понятно. В числах вы храните цифры, вещественные и целочисленные значения, то есть, если вам нужно хранить так количество допустим, пользователей, список, количество ошибок, которое допущены на форме, или допустим ширину окна, вот вы можете использовать переменную числового типа. Если вам нужно хранить в памяти значение логин пользователя, ошибку, которую нужно вывести на форму, вот тип данных строковой. И последний третий тип логические значения, логический тип данных, или тип bool, если вам нужно сохранить, например, значение «допущена ошибка при заполнении формы» или «не допущена», то есть либо true, либо false, вы можете использовать тип данных boolean. Следующие типы данных, которые есть JavaScript, это null и undefined, если вы создаете переменную и присваиваете ей значение null, это означает, что вы создаете переменную типа null, то есть у типа данных null есть только одно возможное значение, это null. Означает оно, что в переменной, которую вы создали, нету ничего. То есть это отсутствие каких-либо данных. Если вы создаете переменную и вообще ей не присваиваете никаких значений, то тип таких переменной будет undefined, то есть переменная есть, но пока ее тип неизвестен. И вот undefined, это еще одни тип данных у которых существует только одно возможное значение, то есть undefined. Следующие типы данных, которые мы будет детально разбирать в следующих уроках это составные типы и специальные типы. К составным типам относятся объекты и массивы. Объект, это оп сути сущность, в которой есть определенное количество значений и у каждого значения есть имя. Вот, например, объект пользователь, у пользователя есть значение логин, есть возраст, есть e-mail адрес, есть пароль. Вот у объекта есть несколько значений, каждое значение имеет свое имя. Вот это объект в JavaScript. А массив, это по сути то же самое, что и объект, но вместо имени, у каждого значения есть индекс, порядковый номер. Вот допустим массив пользователь, у которого по нулевому индексу хранится логин, по первому индексу хранится пароль, по второму индексу – e-mail, по третьему возраст, вот такая сущность будет из себя представлять массив. И объекты, и массивы в JavaScript очень похожи друг на друга по своей организации в памяти, но с этими темами мы будем сталкиваться с вами на следующих уроках, пока мы с вами не будем особо углубляться в организацию таких вот объектов и работу с этими типами данных. И специальный тип данных – это функция, это тоже следующие наши уроки. Функция – это действие. Например, функция отображение пользователю информации, вывод ему сообщение, или ошибки, или еще каких-то сведений или функция, которая посчитаем среднее арифметическое из нескольких целочисленных значений. Вот это все пример функции. Мы отдельно будем их разбирать. То, что вы видите на этом слайде, это допустимые типы данных в JavaScript сценариях и когда вы используете ключевое слово var, а потом пишете идентификатор, имя этой переменной, которую вы создаете. При создании вот этой переменной, у вас обязательно переменная определит тип данных, который перечислен вот в этом слайде.

Давайте теперь перейдем в Visual Studio и посмотрим, как работают типы данных, как можно создавать переменные используя разные типы данных. Значит в папочке №2. Сейчас закроем все примеры. В папочке №2 у нас есть первый пример Number_type, как мы можем создать переменную числового типа. Если вы хотите создать переменную числового типа, типа number, вы можете использовать один из перечисленных в примере вариантов. 22 строчка, определяем переменную «а», присваиваем значение 10, присваиваем целочисленное значение, соответственно переменная «а», number. 23 строка, определяем переменную «b», присваиваем значение 0,8, так как у нас значение вещественное, мы понимаем, что переменная «b», тоже будет типом number. И строка 24 также мы можем создавать переменные не просто присваивая им значение, а присваивая им результаты некоторых выражений. Переменной «c» мы присваиваем результат сложения «а + b», то есть двух вот этих вот сложений. И в переменную «c» записывается значение 10,8. Переменная «c» тоже будет number. Дальше, когда мы работаем с переменными числового типа, мы можем получать дополнительные значение, которые хранятся в самом типе данных. Когда вы создаете переменную вот, например, «a», «b», «c», все эти переменные представлены специальными как бы сущностями в памяти браузера. И каждая переменная создана специальной функцией-конструктором, у этой функции-конструктора есть много дополнительных значений, которые могу пригодится при разработке ваших сценариях. Например, 28 строчка, мы выводим в документ Number.NaN, и после знака равно выводим значение Number.NaN. Вот number это и есть по сути представление тех типов данных, которые мы создавали на 22, 23,24 строчке, и вот в этом типе данных, мы извлекаем константу, которая там находится, постоянное значение, значение, которое не является цифрой. В следующих примерах, когда мы будем работать с вами с пользовательским кодом, иногда от пользователя мы рассчитываем получить цифру, а пользователь вводит букву. И наш сценарий не может воспользоваться вот теми буквами, который передал нам пользователь, потому что они просто не конвертируются в какое-либо целочисленное значение. Вот когда у нас ситуация, когда у нас значение не превращается в целочисленное, его не возможно превратить в вещественное, вот такое вот такое значение у нас будет читаться Nan, Note a Number. Эта константа нужна нам для того, чтобы проверить, является ли значение числовым или нет, мы его Nan, это значение будем в следующих примерах встречать. Дальше, следующие значение, которое есть в number, это maxValue и minValue, то есть значения, которые определяют максимально допустимое значение, которую можно записать в переменную number, и минимальное допустимое. Вот здесь в комментарии на 8 и 9 строке видите, какой максимум и минимум, который вы можете присвоить переменной типа number и так же у number есть такие константы как POSITIVE_INFINITY и NEGATIVE_INFINITY – специальное значение, которое определяет плюс бесконечность и минус бесконечность. Если вы пишете какие-то алгоритмы, которые связаны с вычислениями, все эти константы могут вам пригодится. Но самое важное с этого примера, если вы хотите создать целочисленную переменную, то достаточно просто присвоить числовой литерал к создаваемой переменной, тем самым вы определите переменную типа number.

Следующий пример, если вы собираете создать переменную строкового типа для того чтобы показать его пользователю и вывести на экран, то вы можете использовать литерал, который взятый в двойные или одинарные кавычки. Вот на 17 строке создается переменная с именем string. Этой переменной присваивается значение Hello, которая взята в двойные кавычки. То есть переменна string1 будет типа string. 18 строчка, делаем тоже самое, но значение world берем в одинарные кавычки. Это тоже будет эквивалентно записи, обе переменные будут строкового типа. 20 строчка. Мы создаем переменную resString и этой переменной присваиваем string1 + string2. Когда мы используем оператор + для двух строковых переменных, этот оператор + у нас называется конкатенацией. То есть мы конкатенируем два строковых значения. Сцепляем строчки, к значениям которые находятся в этой переменной и результат сложения двух строк, конкатенации двух строк, записываем в переменную resString. В переменной string1 находится значение Hello плюс пробел, в string2 – World, то есть в итоге в переменной resString будет находится значение Hello world. Чтобы проверить результат, мы 22-23 строчка, выводим две переменные стрингодин и string2, а потом выводим следующею переменную, точнее третьею переменную resString, в которой находится результат конкатенации. Давайте сейчас проверим первую часть вывода, видите, то что в нас до Agevar вывелось, вот horisontalrool. Видите, значение, 22 строчка, string1, вот оно Hello, вот world, а вот результат конкатенации, Hello world. Далее, строчка 26, мы создаем переменную с именем str, присваиваем ей значение 10. Обратите внимание, эта 10 взята у нас в двойные кавычки, поэтому это уже не целочисленное значение, а строковое значение, а вот строка 27, переменная «а», со значение 1, это у нас значение уже числовое, тип данных number. Теперь посмотрите на 33 строчку. Мы в тело документа выводи str + «а» + перенос на новую строчку. Когда интерпретатор выполняет эту строку. Он переменную «а» автоматически приводит к строковому типу данных. Потому что все, что мы отображаем пользователю, это текст, соответственно, когда мы хотим отобразить в document.write какую-то информацию, любые операторы, какие выполняются внутри метода write, они у нас будут использоваться, выдавать результат в виде и вот мы здесь переменную «а» по сути здесь неявно превращаем в текст, собираем, конкатенируем str + «а» + перенос. В итоге получается str 10, тут один, то есть получается 101 и перенос на новую строку. Давайте мы еще раз запустим браузер и вот проверим, вот у нас 101, вот у нас строка эта вывелась. Дальше давайте посмотрим 38 строчка, мы берем минус «а», выполняем вот такую операцию, теперь у нас что происходит, теперь интерпретатор уже не выполняет операцию привидения к строковому типу. Здесь у нас оператор минус, он рассматривается как значение, операция над вещественными значениями, поэтому интерпретатор берет здесь переменную str, преобразовывает его к целочисленному типу, хотя она до этого была строковая и выполняет операцию вычитания. То есть забирает значение, из 10 у нас вычитается единица, и мы получаем результат девять. Тоже самое касается умножения и деления. Интерпретатор питается значение переменной преобразовать в целочисленное и выполнить соответствующее арифметическое действие, но это не относится к операции сложения. Если мы выполняем операцию сложения, то в таком случае у нас переменная «а» будет конкатенироваться, мы здесь явно делаем операцию конкатенации. Ну и результат вы видите на экране.

Следующий тип данных, это тип данных логический, bool. Если мы создаем переменную, и присваиваем этой переменной значение либо true, либо false, то в таком случае мы определяем переменную как boolean переменную, то есть переменную логического типа, в следующих уроках мы с вами будем разбирать циклические конструкции условия, циклы и другие конструкции, мы увидим, что тип данных bool очень часто в этих конструкция используется. Вот мы создали две переменные, потом 20-21 строчка мы вывели результат на экран, вывели в тело документа. Давайте сейчас проверим как это произойдет у нас, вот мы увидели true - false, 20-21 строчка отобразились результаты. А строка 23-24 мы переменным bool1 и bool2 мы присваиваем новое значение – один и ноль. Очень часто, в некоторых языках программирования значение один воспринимается как bool, как значение true, а значение ноль воспринимается как значение false. То же самое происходит и в языке JavaScript. В некоторых ситуациях, единицу вы будут воспринимать как true, а нолик будете воспринимать false. Так же в этом примере показана особенность языка, когда вы создавая переменную меняете уже при использовании этой переменной, меняете ее тип данных. На 17 строчке, переменная bool1, она у нас типа данных boolean, а на строке 23 переменная bool1 стала типом number, когда мы присвоили новое значение. Вот это то что касается использования логического типа данных. Следующие уроки мы будем детально разбирать эти типы данных.

Следующий №4 пример. Тип данных null. Если вы создаете переменную и хотите сказать, что в этой переменной ничего нету, что она пустая, что в ней нету значений, оно отсутствует, то тогда вы можете переменной присвоить значение null. Это ключевое слово, видите, оно подсвечивается цветом. Это ключевое слово означает, что теперь переменная «а» типа null. То есть в ней ничего нету. На 19 строчке мы alert отображаем эту переменную. Давайте мы посмотрим, что у нас произойдет. Видите, у нас отображается null, то есть в переменной ничего нету, обратите внимание, 20 строчка, на ней мы тоже отображаем alert значение переменной «b», но переменной «b» нигде выше нету, то есть не была определена, не была обвялена. Если вы пользуетесь переменными, которых не существует, которые вы не определяли, это приводи к ошибке и интерпретатор перестает выполнять тот код, который находится ниже. Мы можем даже проверить. Взять и выполнить операцию alert, а вывести просто строковое значение. null отобразился, видите alert(а) не вывелся, потому что на строке 20 произошла ошибка, и строка 21, она уже не выполняется, код не срабатывает. Если мы возьмем эту строчку, перенесем выше, до того, как произошла ошибка в нашем сценарии, то мы увидим, что вначале произошло отображение значения «а», потом значения null. Это по сути доказывает, что JavaScript у нас выполняется линейно, то есть интерпретация у нас происходит построчно, вначале эта строка выполнилась, потом эта, потом эта и здесь у нас произошла ошибка, то есть 21-22 строка больше скрипт дальше не выполняется, потому что произошла ошибка, не дающая возможности продолжить выполнять наш текущий сценарий.

Вот это тип данных null, означающий, что ничего нету. Еще одни из типов, данных похожие на null, это тип данных undefined, который означает, что переменной не было присвоено какой-либо тип данных, то есть переменная пока еще неопределенного типа данных. Мы будем очень часто встречать этот тип данных, особенно когда дойдем до объектов и когда начнем работать с объектами. Если вы создаете переменной значение «a», то по сути вот здесь не явно, сам интерпретатор для переменной присваивает значение «a». То есть, если вы не определяете значение для переменной, то тогда интерпретатор сделает это вместо вас, напишет вот такую вот строчку. Мы написали вот такой вот код, а на самом деле интерпретатор выполнит его как вот такую вот операцию. Поэтому любая переменная, которую вы не инициализируете, становится переменной типа undefined. И вот здесь на 19 строке alert мы увидим значение undefined, а строка 20, переменной «p» нигде не было, поэтому код у нас перестанет выполнятся и 20 строка, она просто не выполнится. Вот такие вот примеры у нас.

И последний пример у нас №6. Покажет, что любые данные, которые вы отображаете пользователю, они в итоге являются обычным текстом, обычным строковым значением. Если вы 7-8 строчку возьмете, на этой строчке мы создаем две переменные, одна переменная у нас типа number, вторая переменная, на 8 строке, типа string. Но когда на 10 и на 11 строчке мы отображаем на экран значение переменных, в результате в браузере мы не видим никаких особых отличий, обе переменные, оба значения просто отображается как текст 10. Поэтому любые данные, которые вы выводите в документ, они в итого все равно превращаются в строковое значение. Вот мы увидели это в этом примере.

Теперь давайте перейдем к третей части урока и посмотрим на методы, которые позволяют отображать пользователю информацию и получать от пользователя ввод. Первый пример покажет особенности работы document.write. Значит у нас есть функция, которая доступна на объекте document. И используется она для того, функция write, для того чтобы в тело документа отображать какую-то информацию. Вот вы видите, что на 19 строке мы создаем переменную целочисленную «a», потом строковую «b», и вещественную ЦЦЦ. Дальше 23 строчка, мы использую document.write, передаем в параметры функции write значение Hello. Это означает, что сразу же после функции тайтла в документе у нас будет выведено сообщение Hello. Потом будет перенос на новую строку. Потом мы отображаем значение переменной «a», «b», и «с». Но обратите внимание, что на 25 строке мы используем не функцию write, которая была раньше, а функцию writeln. То есть вывести линию. Вывели «a». По сути задача этой функции по завершении отображения данных сделать перенос на новую строку. На следующей строке написать «b», на следующей строке написать «с», значение этих переменных, то есть 10, Some String и true. А после этого сделать горизонтально подчеркивание. Еще ниже, выше body, 31 строчка, на 33 строке мы открываем еще один текст cкрипт и в этом теге выводим еще раз значение переменной «a», «b», «с». Тоже используя writeln. То есть получается, что мы рассчитываем, что используя функцию writeln, у нас каждое значение будет выводится на новой строке. Давайте сейчас запустим этот пример и посмотрим результат. Вот то, что у нас отображалось в Head, то есть вот в этой части кода. Вот наше 10, Some String, true. Хоть мы использовали на 25-27 строчке функцию writeln, это не дало никакого результата, потому что, я думаю вы знаете, в HTML когда вы создаете разметку, если вы в разметку добавляете пробелы, табуляцию, перенос на новую строчку, это все у вас видимо только в редакторе. Когда браузер будет визуализировать разметку, он оставляет только один пример и удаляет все лишние переносы. Поэтому в нашем случае, если мы разработали скрипт, который добавляет в разметку некоторый текст, текст у нас форматируется по тем правилам, вот сейчас здесь, на 25 строке было написано, сообщение, а, потом символы перенос на новую строчку /r, /n. Это символы, которые по сути добавляются, когда в редакторе делаете перенос на новую строку. Эти символы добавились здесь преогромно JavaScript, но в HTML разметке они не отображаются. Браузер их просто удаляет. Тоже самое произошло и ниже, если мы сейчас вернемся в браузер, видите, вторая часть тоже в нас в одну строку вывелась, writeln не сработал. Но я думаю многие из вас слышали о теге <pre>. У нас есть тег <p>, параграф, в котором происходит форматирование по всем правилам, удаляется пробелы, табуляция, переносы, а есть тег <pre>, суть работы которого заключается в сохранении того форматирования, которое было заложено разработчиком, то есть если разработчик делал табуляцию, если делал лишние переносы, это все остается в разметке. То есть тег <pre> не форматируется по общим правилам. И вот когда ваш сценарий находится внутри тега <pre>, и если вы будете использовать функцию writeln, то тогда они уже начинают работать. Я сохраняю эту страничку, теперь давайте перезапустим просто. Перезапускаем эту страницу и видите у нас уже идет вывод на несколько строчек, первая строка со значением 10, потом со значением Some String, со значение true. Если мы здесь добавим в теге <pre> какой-нибудь текст, тест, больше табуляции тест, еще больше табуляции тест, если этот текст мы выведем, видите он в таком же формате отобразился у нас на странице. Но если мы <p> берем и меняем на <pre>, кстати обратите внимание на возможности Visual Studio, я меняю открывающий тег, она автоматически меняет закрывающий тег. Вот я <p> удаляю, пишу <div>, видите <div> автоматически закрывается и здесь. Это возможность 2012 студии, в предыдущих версиях такого не было. Вот давайте оставим <p>, и попробуем еще раз запустить, видите сразу же весь формат исчез, потому что браузер теперь убрал лишние пробелы, лишние переносы и превратил это в компактный текст, одним пробелом и без лишних переносов. Вот почему функция writeln не работает, не работает в обычном документе, если вы не используете тег <pre>. Вот вам объяснение. Многие очень сталкиваются с этой проблемой, потому что пытаясь вывести какую-то информацию в документе, видят функцию writeln, пользуются этой функцией, но никакого эффекта не видят, потому что функция write или writeln для многих разработчиков работает одинаково, они не знают в чем их отличие. Вы теперь знаете, что если вы используете writeln, есть смысл эту функцию применять тога, когда у вас отсутствует стандартное форматирование, когда у вас нету удаления пробелов и переносов.

Следующая функция, это функция alert, эту функцию мы уже использовали, поэтому думаю здесь много времени нам потратить на ее уже не придется, мы опять создаем три переменные, как на предыдущем примере и теперь 19 строчка начинаем поочередно отображать данные, которые находятся в нашем сценарии, выводить вначале литерал Hello, а потом выводим значение переменных, которые выше определены. Важно понимать, что, важно чтобы вы понимали, что alert, он блокирует выполнение сценария, видите страницу у нас еще до конца не загрузилась, потому что мы до конца не выполнили всю разметку, не дошли до 29 строки и не загрузили эту страницу полностью, так как на 19 строке у нас появилось модальное окно, то есть нам нужно сейчас что-то сделать, прочитать информацию, нажать на кнопочку ОК и только когда мы нажмем на эту кнопку, модальное окно закроется, эта строчка до конца выполнится, функция alert сделает возврат и мы на 20 строчке выполним новую функцию alert (а) выведем значение переменной «a», то есть выведем 10. Нажимаем на Ок, выведем значение переменной «b», вывели Some String и так далее и только теперь, когда до конца выполнили все функции alert, до конца браузера отрендерил эту страницу видите пропал индикатор загрузки, страница теперь полностью загружена. Вот для себя четко понимать, что вызывая функцию alert, вы блокируете выполнение JavaScript до тех пор, пока пользователь не нажмет на кнопочку и не продолжит выполнять JavaScript.

Теперь следующие диалоговое окошко, это prompt, с помощью диалогового окна prompt, вы можете запрашивать пользователя информацию, то есть спросить у пользователя данные на ввод. Использовать функцию prompt желательно в тестовый целях. Когда вы разрабатываете как бы продакшн-сайт, настоящий коммерческий сайт, то лучше пользовательские данные получать из полей вводов из формочек. prompt использовать только на этапах отладки, когда вы разрабатываете свое приложение вам нужно как можно быстрее получить какую-то входную информацию. Значит, как работает функция prompt, строка 22. Как и alert, мы вызываем эту функцию, и она заблокирует выполнение скрипта вот на этом этапе. Когда вы вызываете эту функцию, вы для функции определяете два параметра. Первый параметр, это то, что будет отображаться в самом диалоговом окошке, то есть в окне будет фраза «Введите какое-либо значение». А в текстбоксе, который будет предназначен для ввода, будет находится текст «сюда». Когда мы введем данные, у нас в этом окошке есть две кнопки – ОК и отмена. Если мы нажмем ОК, то данные, которые мы вводили в текстбокс вместо слова сюда, эти данные запишутся нам в переменную «a», то есть функция prompt, она не только показывает окно, она еще и возвращает результат, который был получен взаимодействий с пользователем. Если же пользователь нажимает отмена, то тогда в переменную «a» будет записано значение null. И вот строка 23 alert мы покажем результат, что же пользователь ввел. Если мы сейчас запустим этот пример, видите, сразу же появилось окошко prompt, текст, который был первым параметром, переданным в функцию. Вот видите «введите какое-либо значение». А вот наш текст в текстбоксе, тогда вот вывелся текст. Я ввожу значение один, нажимаю на ОК. Когда я нажал на ОК, функция prompt закончила свою работу, вернула результат, результат был записан в переменную «a» и дальше мы продолжили выполнятся alert отобразили то значение, которое лежит в переменной «a». Вот наша единичка, еще раз пробуем, обновляем страничку, нажимаем Cancel, видите в нас в переменной «a» находится значение null. То есть мы теперь понимаем, что мы сделали отмену в этом методе. Вот работа функции prompt.

И третья функция, которая позволяет нам создать диалоговое окно, это функция confirm, задача этой функции уточнить у пользователя, спросить хочет он что-то сделать или нет. Когда вы используете функцию confirm, строка 15, вы показываете пользователю окно с определенным сообщением. Вот, например, у нас сообщение «Вы уверены?». Когда пользователь увидит это окно, у него будет выбор, нажать на кнопку ОК и Cancel. Если пользователь нажмет на кнопку ОК, то тогда вот в этой переменной, в переменной confirm, будет находится значение true если пользователь нажмет Cancel, то значение false. Вот prompt, эта функция показывает окно, которое позволяет у пользователя спросить любые данные, целочисленные, вещественные, то есть просто взять клавиатурный ввод, а функция confirm дает нам или true, или false, то есть подтверждает или не подтверждает действие пользователя. И 17 строчка мы выводим результат. Запустим этот пример. Опять у нас блокируется выполнение скрипта, на 15 строчке, до тех пор, пока мы не решим, что мы хотим сделать, подтверждаем или отменяем операцию. Если мы нажимаем Ок, вот видите в тело документа отображается значение true, если мы сейчас обновляем эту страницу, нажимаем отмена, Cancel, вот в тело документа отображается false. Я думаю вы часто встречали сайты, на которых у вас есть, например, удалить на форуме свое сообщение. Вы нажимаете удалить, но перед удалением у вас появляется окошко, согласны удалять или нет. Вот это окошко может быть сделано с помощью функции Confirm. Если вы согласны удалить запись, вы нажимаете ОК и запрос уходит на сервер, на сервере выполняется код и происходит там удаление чего-то там в базе данных, если вы нажимаете на Cancel, у вас JavaScript функция отменяет отправку значения на сервер и на сервере в базе ничего не удаляется. Вот функция Confirm для того, чтобы получить подтверждение от пользователя. Очень часто используется при удалении чего-либо. И простой пример, простой пример калькулятора, в котором мы возьмем от пользователя данные и отобразим пользователю результат арифметических действий с двумя значениями. На строке 7 и 8 мы создали переменную «х» и «у». Видите, что мы в переменную записываем, вместо того, чтобы определить какие-то постоянные значение, присвоить там, например, 10 и 20, мы просим пользователя ввести информацию. Вызываем функцию prompt. Первым параметром указываем, что нужно отображать пользователю в окошке, подсказываем, что нужно ввести значение «х» и в текстбокс записываем нолик, чтобы намекнуть пользователю, что нужно вводить целочисленные значения. И строка 8, делаем тоже самое для переменной «у», подсказываем, что нужно ввести значение для «у» и значение ноль пишем в текстбоксе. Дальше, когда эти обе строчке, 7-8 выполнятся, у нас в переменных «х» и «у» будут данные, результат ввода. Теперь строка 9, мы создаем переменную result и в эту переменную записываем «х» + «у» и результат сложения выводим на 10 строке. Ну давайте сейчас посмотрим, что будет на 10 строчке, что вывелось в самом начале нашего документа. Вот наш первый Prompt, вот нолик, давайте введем сейчас 5, второй Prompt, для «у» значения, давайте введем сюда 2. Теперь, когда мы нажмем на ОК, по идее в result должно вывестись 7, правильно? Вот, 5 +2, получилось 52. Почему это вдруг? Что делает функция Prompt? Функция Prompt просит, чтобы мы ввели с клавиатуры какие-либо данные. Что у нас находится на клавиатуре, кроме цифр у нас еще буквы, символы, нижние подчеркивание, восклицательные знаки и так далее, поэтому функция Prompt возвращает у нас на самом деле не целочисленные значения, а строковое значение, для того, чтобы мы могли работать с любыми значениями, которые находятся на клавиатуре, чтобы мы могли получить от пользователя любой клавиатурный ввод. Вот и получается, что сейчас на 9 строке, когда мы работаем с переменной «х» строковой, и строковой переменной «у», при выполнение операции сложения, у нас получается не сумма, а конкатенация, то есть в result записывается конкатенация строк 5 и строки 2. То есть получается, что в нас результат 52. Если мы хотим сделать так, чтобы у нас получилось именно сложение, чтобы мы видели сумму, нам нужно чтобы два значения, которые были получены от пользователя, переменная «х» и «у» превратить в переменные типа number. Есть много разных способов, которые позволяют нам сделать преобразования типов, мы сейчас свами посмотрим один такой из самых простых в понимании. Есть функция parseInt, если вы вызываете эту функцию, передаете в эту функцию значение, стоковое, то задача функции найти в этом строковом значении целочисленные символы цифр, преобразовать эти цифры в тип данных integer, то есть в integer «х» и в integer «у» будут находится преобразованные строковые значения, то есть тут уже будет хранится значение number. И 18 строчка, когда мы уже integer «х» и integer «у» складываем, мы выполняем операцию сложения, мы уже не конкатенацию делаем как раньше, а сложение, поэтому result у нас значение 7. Вот мы видим нашу 7 во втором варианте. Почему функция называется parseInt, почему не просто парс, почему не convert, почему именно парс. Я думаю вы знаете значение слова парсить, парсинг, когда мы проходимся по тексту и анализируем текст в поисках каких-то значений, то есть разбиваем его на какие-то логические сущности, извлекаем данные, которые нам необходимы в приложении. Если мы сейчас обновим эту страницу и вот inputX введем 10, Hello, а в inputY введем 20, world. Смотрите, что получится. Вначале у нас получилась конкатенация 10 Hello 20 world, а во втором варианте, когда мы выполнили операцию parseInt, у нас получилось 30. То есть функция parseInt, она достаточно интеллектуальная, она нашла десятку, десятку забрала, а вот это значение выбросила, потому что оно не целочисленное. То же самое было со строкой 20, world, 20 было вытащено, а world был отброшен и в результате мы получили именно сложение двух значений целочисленных, которые были найдены в строчках. Но не всегда у функции будет получатся это сделать, например, если мы введем сюда цифры, текст, цифры, еще какое-то значение, то видите, в результате первую строку функция parseInt не смогла проанализировать, parseInt сработает только если цифры идут вначале, поэтому в результате получился None, notANamber. Помните, в предыдущих примерах мы видели, что у типа данных есть такая константа как none, вот эта константа у нас сейчас отобразилась, что в результате сложение непонятно чего с непонятно чем, получился notANaber. Вот такой вот пример.

Теперь мы переходим к четвертой части урока и рассмотрим операторы. Открываем папку операторы, заходим в папочку арифметические операторы и первый пример покажет какие мы можем выполнять основные арифметические действия над значениями в переменных. Мы на 13 строчке создали переменную «a», присвоили значение 9, а потом переменную «b» со значение 5. Сейчас обе эти переменные типа number. Вот на 15 строке переменная с именем result, так как ей мы не присваивали значение, сейчас тип этой переменной undefined, если вы помните предыдущие наши примеры, мы это с вами уже разбирали. Теперь в этом примере мы делаем очень простые операции, мы берем в переменную result вначале записываем «а + b», после чего, с помощью document.write, значение переменной result отображаем в тело документа. Далее мы то же самое делаем, но уже с результатом, который является результатом вычитания значения «b» и с переменной «а». То есть, «а – «b», «а * b», «а / b». Вот выполняем все эти арифметические операции и отображаем результат. Давайте запустимся, вот видите наши «а + b», «а – «b», все значения, все результаты действий, они у нас отобразились. Видите, у нас есть здесь небольшой недочет, здесь отображается минус, потому что здесь у нас неправильно указан символ. Обновим и еще раз обновим здесь страницу, вот «а * b» получилось 45. Вот пример показывающий стандартные арифметические операции, которые доступны в JavaScript.

Следующий пример, второй, покажет, что в JavaScript есть операция, которая дает нам остаток от деления, то есть возвращает остаток от деления. Значит сейчас у нас на строке 14 с помощью функции prompt мы получаем значение переменной «a», а потом для переменной «b» и на 18 строчке в переменную результат мы записываем «а % b», символ процент означает деление по модулю, получается, что в переменной result будет находится остаток от деления «а / b». Вот допустим в переменной «a» у нас будет значение 9, а в переменной «b» будет значение 5. Если 9/5, получится 1,…. . Если мы будем использовать обычное деление, то получим вещественное значение. Давайте сейчас проверим, поставим здесь символ деления, запустим этот пример. Вот 9/5 получится 1,8. Но если мы вместо деление будем использовать процент, то в таком случае, когда мы 9 / 5, получаем остаток, мы получаем 4. То есть, 1, а остаток, который остался, мы вывели. Например, если мы возьмем и 8%2, с остатком, получим ноль. Но если, например, мы 9/2, то в результате остаток у нас будет 1. Вот, например, простой способ, как получить информацию о том, четные или нечетные значения. Вы можете поделить с остатком на 2, то есть %2 сделать, и если результатом у вас будет значение ноль, значит значение четное, которое вы делили. Если 1, значит нечетное. 9%2, получается 1, то есть 9 у нас нечетное. Если 8%2, получается ноль, 8 четное. Вот такая операция доступна у нас не только в JavaScript, это и в других языках программирования присутствует такой оператор.

Следующий пример показывает, как мы можем менять символ, например, сейчас на строке 14 есть значение -8 в переменной «а» и значение 10 в переменной string. На строке 18 мы в переменную result, которую мы прямо же здесь и объявляем, но помните, это не очень хороший подход в создании переменных, лучше написать ключевое слово var, если мы эту переменную впервые с вами используем. А если мы в result запишем «- а», это будет означать, что мы меняем знак, значение «a» на противоположное, здесь было -8, из-за того, что мы написали минус, 8 превратится в обычную восемь, положительную. 19 строчка, мы отобразим результат и увидим, что изначально значение было -8 и первый вывод получаем 8. Ниже, строка 23. Если мы используем, строка 23, оператор, а+ используем, это означает, что мы делаем преобразование. Видим, на 23 строке мы берем переменную «a», в которой находится значение -8 и используем символ +, перед этой переменной. Вот в таком случае у нас уже ничего не происходит, значение переменной «a» как было -8, так и остается -8 и на 24 строке отображается результат -8. Вот мы можем убедится в этом, в браузере у нас отобразился. И также, вот если оператор минус у нас, унарный минус, унарный означает, что он только один, с одним операндом используется, обычно у нас оператор минус, слева от оператора есть операнд и справа есть операнд. Но если мы используем только с одним его операндом, то это будет унарным минусом. Унарный плюс, он у нас никаких преобразований знака не делает, не меняет знак на противоположный, зато унарный плюс делает очень полезную вещь, его можно использовать как синтаксис конвертации, строкового значения в целочисленное. Вот в одном с предыдущих примеров мы посмотрели, как с помощью функции parseInt, можно сделать так, чтобы введенные пользователем строковое значение было целочисленным, но более простой способ, это использование унарного плюса. На строке 15 переменная string, видите она строковая, то есть 10 значение в виде текста записано. Ну на строчке 28, когда мы делаем унарный плюс, потом указываем имя переменной, к этой переменной добавляем значение переменной «a», у нас на 28 строчке изначально, если бы мы просто написали, как в предыдущих примерах, string + «a», получилась бы конкатенация. Вы помните, что если мы используем оператор + и одну из значений, при использовании этого оператора является строковым, не важно, слева будет находится операндом знака плюс или справа, у нас в результате будет конкатенация, если хотя бы одни из операндов строковой. Вот сейчас у нас string строковой, соответственно сейчас у нас в переменную result будет записано значение 10 – 8, это будет выводится текстом, никаких арифметических действий производится не будет, но если мы здесь напишем +, это означает, что этот операнд мы конвертируем в int. Это у нас целочисленное значение, это целочисленное значение, соответственно плюс – это уже операция сложения. 10 + - 8, в результате получаем 2, и отображаем результат. Вот видим, что результат 10-8, получится 2. Вот пример с использование унарного плюса и унарного минуса. Унарный минус меняем знак на противоположный, унарный плюс используется как простой способ конвертации значения в целочисленный тип.

Следующая операция – это инкремент. Операция инкремент существует во многих языка программирования и используется для того, чтобы целочисленные значения увеличить на единицу, целочисленные и вещественные. На строке 18 мы определяем переменную «a» со значением 9. 21 строчка, отображаем переменную на экран и увидим значение 9. На строчке 22 мы используем операцию инкремент. Два символа +, идущих после переменной – это и есть операция инкремент. Инкремент тоже унарный оператор, то есть для того, чтобы нам его использовать, нам всего лишь нужен один операнд. Нужна одна переменная. Операция ++ это тоже, если бы мы написали, а=а+1. То есть мы просто увеличиваем значение переменной на единицу. Единственное, операция инкремент бывает двух видов, бывает постинкримент и приинкримент. То есть префиксный и постфиксный инкремент. Если сейчас на 22 строке мы используем ++ после переменной «a», то это у нас постинкремент, это означает, что фактически, увеличение переменной «a» на единицу происходит уже при выполнение следующей инструкции, вот на 23 строке переменна «a» уже будет равна 10, потому что инкремент мы выполнили на 22 строчки. На строчке 24, мы в document.write выводим «a» увеличенное на единицу, и вот операцию инкремент мы сделали на 24 строчки, но фактически значение у нас увеличится на один только на 25 строке, вот здесь у нас будет одиннадцать, смотрите на комментарий. Ну, можем запустить и убедится. 9 вывелось, потом 10, 10 и только вот 11, который мы здесь инкремент сделали, отобразился у нас на 25 строке. Это у нас операция постинкремент, если вы два знака плюс поставите перед переменной, это будет означать, что операция увеличения у вас будет происходить до того, как произойдет переход на следующею инструкцию. И вот получается, 31 строчка, переменную «a» мы увеличили, до этого значение было 11, на 23 строке уже будет равное 12. Потом строка 23, мы выполнили ++а, получается мы вначале увеличили значение переменной «a», а уже потом выполняем оставшиеся действий и отображаем переменную на экран. Получается, что в документе значение переменной будет у нас равно не 12, а 13. То есть инкремент произойдет уже до того, как переменная выведется. Вот в чем разница двух операторов. То есть в принципе, что вы напишете, что справа что слева, итог одинаковый. Переменная увеличивается на единицу, но вы должны понимать, что в зависимости от того, где символы ++ будут установлены, у вас поменяется момент, когда происходит увеличение вашей переменной, на этой же строке, в этой же инструкции, либо на следующей инструкции, когда вы перейдете на следующую строку. Вот, кроме инкремента, у нас еще есть операция декремента, то же самое, но только уменьшение на единицу. Вот строка 22 и 31, видите это у нас постдекремент, это у нас постдекремент, то есть, когда вначале мы выполним какие-то действия, а потом переменную уменьшим, а здесь мы переменную вначале уменьшим на единицу, потом выполним какие-либо действия. Вот абсолютно такой же пример, поэтому думаю нет смысла его разбирать особо сильно.

И №6 пример из арифметических операций показывающий специальный способ сокращения отдельных математических вычислений. На 17 строке у нас есть переменна «a» со значением 9 и если мы хотим увеличить значение этой переменной на какое-то значение, увеличить, умножить, добавить, отнять какое-то значение, мы можем использовать вот такие операторы: +=, -=, *=. Вот, например, на строке 19 мы написали «a» присвоить равно 3. Это означает, что по сути мы берем значение, которое уже есть в переменной. В переменную «a» уже записываем значение, которое уже есть в переменной, добавляя к нему значение три. То есть это просто сокращенная форма вот такого выражения, когда делаем какие-либо арифметические действия. Вот такой еще есть способ записи, мы его будем очень часто встречать, очень часто использовать, потому что всегда мы стремимся сделать код максимально компактным, максимально простым в понимании, вот это достаточно простое в понимании выражение.

Теперь переходим к следующим примерам, которые показывают операторы равенства, которые есть в JavaScript, начнем мы не совсем с оператора равенства, а с оператором присвоения, мы привыкли с вами встречая знак равно понимать, что переменная «a» равна значению 9. Если в обычном арифметическом выражении встретили символ равно, мы бы думали, что «a» и 9 – они равны. Но если мы работаем с языками программирования, знак равно означает операцию присвоения. Означает, что в переменную «a» мы записываем 9. В операнд, который находится слева мы записываем значение, которое находится справа. Вот мы создали две переменные, присвоили значение 9 и 5, потом 16 строка, создаем переменную result и присваиваем этой переменной сумму «а + b» и потом 18 строчка, эту переменную result отображаем. Значит один знак равно – это оператор присвоения. Но если вы хотите узнать, одинаковые переменные или нет, равные у них значения или отличаются, вам нужно использовать уже другие операторы, оператор равенства. В языке JavaScript есть оператор == - это и есть оператор равенства. Но нужно знать особенность его использования, нужно знать подводные камни, которые могут встретится, когда вы будете использовать этот оператор. Вот на 18 строке и ниже у нас есть ряд переменных, в которых у нас находятся разные значения. Когда мы работаем с оператором равенства, результатом работу этого оператора всегда значения типа bool, то есть либо true, либо false. Либо значения у нас равны, либо не равны. Других вариантов у нас быть не может. И 25 строчка, в переменную «f», которую мы определили немного выше, мы присваиваем значение вот такого вот выражения «а = b». Если значение этих двух переменных одинаковое, то в переменную rez будет записано значение true. Если «a» и «b» разные, то в переменную рез будет значение false. «a» у нас равно единицы. Это обычное целочисленные значение. «b» равно тоже единицы, но эта единица у нас строковая. Если мы сейчас выполним эту операцию и посмотрим на результат, который отображается вот здесь на строчке 26, мы увидим, что «a» и «b» равны. Когда мы используем знак равно, именно ==, у нас происходит сравнение с использованием следующих правил. Вот правило описано 6 строчке, если одно значение null, а другое undefined, значения будут считаться равными, то есть если бы в «a» была undefined, а в «b» была null, то результатом было true, мы бы считали равными. 7 строка. Если одно значение число, а второе строка, то строка преобразовывается в число и производится сравнение, как раз подходит к нашему выражению. «a» у нас число, «b» у нас строка. Если «b» превратить в число, то есть строчку с символом один мы превратим в число, получится единица. Один и один равны, то есть вот это будет равно, здесь втрое правило сработает. Третье правило. Если одно значение true, оно преобразовывается в true, если значение false, оно преобразовывается в ноль. То есть если мы сейчас посмотрим, вот строка 28, «c» и «d», мы сравниваем текст some и som. Тут одной буквы не хватает, соответственно у нас разные значение, то есть результатом rez будет false. Вот 31 строчка, мы сравниваем «a» и значение «i», «a» у нас единица, а «i» у нас значение true. А что у нас гласит третье правило, если значение true, то воспринимается как один, если false, то воспринимается как ноль. Получается сейчас у нас «i» автоматически превращается в целочисленные значение, получается значение один и один равны. Вот результатом третьего сравнения у нас получился значение true. Когда в JavaScript вы используете оператор равенства, это означает, что этот оператор закрывает глаза на типы данных переменных с которыми работает. Он питается привести переменные к некоторому общему типу данных и произвести сравнение вот этих преобразованных значений. То есть оператор равенства он не строгий, он может для разных типов значений может выдать результат, поэтому очень часто оператор равенства заменяют на оператор идентичности, который дает более четкие результаты. В третьем примере мы рассмотрим оператор идентичности. Он заключается в том, именно синтаксически, что мы используем три знака равно. В большинстве языков программирования такого оператора у нас не существует, на языке JavaScript он есть. Какие правила использования этого оператора? Первое, если значения имеют разные типы, они не идентичны и самое первое, что проверяет этот оператор, если значения разные, если типы значений разные, они не могут быть одинаковыми. Второе правило, если значение является числами и имеют одинаковые значения и не являются значением null, они идентичны. Если две строки имею одинаковую длину и содержат одни и те же символы, они идентичны. И две одинаковые логические значения, они идентичны. То есть два true, два false, они одинаковы. Самое важное это первая часть, если значения имею разные типы, они не идентичны. То есть в первую очередь сравниваются типы, а потом уже все остальные проверки происходят. В случае с операторам равно, который мы смотрели в предыдущем примере, он игнорирует типы, он пытается сделать приведения к какому-то общему типу. И вот давайте сейчас посмотрим, что в нас получается в этом примере, вот строка 31, переменная «a» и переменна «b». Переменна «a» это один целочисленные, «b» это один строковое. Результат сравнение с помощью равно даст true, а вот результат сравнения с помощью оператора идентичности даст результат false, давайте запустим и проверим. Видите, «a» равно «b» true, идентично false. Дальше строка 38, «a» равно «f», «a» – единица, «f» у нас тоже единица. То есть эти значения равны и также эти значения идентичны. Еще ниже, 45 строчка, «c» и «d». «с» это у нас some, «d» это у нас som. То есть два одинаковых значения, только эти взяты в двойные кавычки, а эти в одинарные. Но в итоге это две переменные с абсолютно одинаковыми данными. И эти значения у нас являются равными и так же они являются идентичными. Давайте посмотрим в браузер, видите два блока и одни равен единицы, идентичен единицы, и точно так же две строки равны и идентичны. Если посмотреть еще ниже, «f» и «g», «f» это у нас значение один, «g», - это значение true, и кстати вы можете в Visual Studio, если у вас большой листинг кода, в Visual Studio, в правой части есть вот такая специальная иконка, вы можете захватить и разбить текущее окно на два представления. Вот мы можем в первом представлении открыть список своих переменных, а во втором представлении смотреть на код и какие переменные были присвоены значения. Вот видите переменной «f» значение один присвоено, а переменной «g» значение true. Мы с вами уже смотрели в предыдущем примере, что если операция равенства, то значение true преобразовывается в единицу, значение false в ноль. То есть сейчас здесь произошло приведение типов и в результате два значения равны, а здесь у нас значения не идентичны, потому что тут bool, а тут number. Соответственно два разных типа данных, равенство уже происходить не может. Следующий пример, пример в котором мы проверим еще раз операторы равенства и идентичности, в этом примере мы сначала закомментируем строку №22, а потом начнем выполнять. Значит, что делается в примере, 15-16 строчка, у нас спрашиваются два числа, дальше строка 18 мы сравниваем два значения с помощью оператора равно, потом на 23 строчке значение «b» конвертируем в int, строка 25, с помощью оператора идентичности, сравниваем значение «a» и «b». Давайте сейчас запустим этот пример. В «a» мы введем значение три, в «b» введем значение три. И сейчас оператор равно выдаст нам, что значение равны, а вот на строчке 25 оператор идентичности скажет, что значения не идентичны, потому что мы на 23 строке «b» преобразовали в int, а «a» оставили с типом string. То есть два разных типа данных, соответственно результат будет false. Вот видите равенство true, идентичность false. Если мы вводим разные значения – 2 и 3. Оператор равенства не сработал и идентичности тоже не сработал. Если же мы снимаем комментарий на 23 строчке и запускаем еще раз приложение, один и один, эти значения у нас будут равными и идентичными, потому что когда мы теперь проверяем на 25 строчке идентичность, у нас оба значения одного и того же типа данных. Если же мы сюда вводим два и три разных значения, они у нас и не равны, и не идентичны.

И последний пример, у нас есть операторы так же не равенства и не идентичности. Набор переменных, как и в прошлых примерах, ну теперь строка 21, в переменную рез мы записываем результат сравнения «a» не равно «b». В «a» находится единица, в «b» находится единица строковая. Давайте посмотрим какой результат выдаст пример. «a» не равно «b» – false. Почему false? Потому что значения равны, так как это оператор у нас равенства, один знак равно, то есть его противоположность это оператор не равенства, !=. Ну, то есть, если сейчас у нас здесь использовать оператор равно, значения ведь у нас будут одинаковы, соответственно нельзя сказать, что они не одинаковы. Результатом такого логического вывода будет false. Это утверждение не верно. Ну и 22 строчка, мы это увидели с вами, мы увидели false. Если мы берем не идентичность, строка 24, «c» не идентично «c».

«c» – это текст some, «b» – это som, через букву а. То есть две разные строки. Не идентичны. Да, они не идентичны. Они не одинаковые, поэтому у нас выводится здесь результат true. То же самое 27 строка. «a» не идентично «i». «a» – это единица, «i» – это true. Это два разных типа данных, соответственно они не идентичны. И соответственно результат у нас отображается.

Следующие примеры показывают операторы больше-меньше. Значит в следующем первом примере мы рассмотрим оператор больше-меньше, меньше равно и больше равно. Эти операторы тоже в качестве результата возвращают bool значение true или false. Вот это очень важно, то есть у нас возвращается bool тип данных, потому что в следующем уроке, который мы будем разбирать, мы рассмотрим с вами логические конструкции, мы увидим, что тип данных bool, используется как основный тип данных при определении поведения условия, циклов и других конструкций. Поэтому вот эти выражения они в нас возвращают именно значения true, false, потому что эти значения, дальше мы будем применять очень часто в различных конструкциях языка. Строка 7-8, создается переменная «a» со значением 10 и «b» со значением 20. Результат мы будем, как и в предыдущих примерах записывать true - false. И строка 12, «а < b». «a» действительно меньше «b», соответственно результат true. Строка 16, «а > «b», это выражение у нас не истинно, «a» у нас со значением 10, а «b» со значением 20, результат false, выражение не правильное, «а <=» , «а >=», те же самые, ибо проверка точно в таком же формате происходит. «a» у нас меньше равно «b», то есть это выражение истинное, здесь будет true здесь будет в переменной false. Запускаем пример, вот мы видим true - false. На следующем уроке мы с вами эти выражения будем использовать в условных конструкциях. Вы увидите, как они работают на практике. В следующем примере мы закрепляем, то что было в предыдущем и так же закрепляем оператора унарный плюс, который позволяет конвертировать значение быстрым способом. 7-8 строчка, мы создали две переменные, вы посмотрите, как мы получаем от пользователя ввод. С помощью prompt берем значение, а с помощью оператора +, который установили перед prompt, то значение, которое функция возвращает, мы сразу же преобразовываем в number, записываем в переменные, то есть «a» и «b» уже будут целочисленные переменные, мы сможем спокойно с ними выполнять различные арифметические действия. И строка 12 мы проверяем, «a» меньше «b», потом «a» больше «b», то есть то же самое делаем, что и в предыдущем примере, выполняем сравнение двух значений. Давайте запустим. Первое значение один, второе значение у нас будет восемь. Один меньше восьми? Да, меньше. Один больше восьми? Нет, не больше, один меньше равен восьми? Да, меньше равен. Один больше равен восьми? Нет, не равен. То есть мы увидели, как наше приложение проверило два значения и сказало равны эти значение, больше или меньше они. Вот такие вот примеры. Если мы сейчас введем сюда например 2 и 2. Видите, первый вариант у нас не сработали, «a» меньше больше, потому, что значение у нас равное, но зато сработало <=, >= потому что равно у нас учтено в двух этих проверках.

И последний пример из папочки relation покажет, что происходит, когда мы сравниваем две строковые переменные. Когда мы работаем со строковыми переменными мы по сути делаем посимвольное сравнение тех символов, которые находятся в строке и в итоге проверяем какой символ меньше, какой символ больше в соответствии с его целочисленным представлением в таблице символов. Я думаю вы все знаете, что у нас есть различные таблицы символов и по сути для каждого символа, который отображается в приложении, есть соответственное целочисленное значение. Вот, например, символ «А», это будет значение 41, в верхнем регистре. А символ «а» в нижнем регистре, это значение 61. Вот и получается, что если сравнить две переменные, строка 16, мы сравниваем значение А и а. В результате у нас А будет действительно меньше, чем а. Потому что «А» это 41, а «а» это 61. Соответственно в rez будет находится значение true. Это значение мы выведем. Если мы сравниваем две переменные «c» и «d», в которых записаны значение в виде не одного символа, а нескольких символов, то есть целая трока, 21 строчка. «c» < «d». Вот у нас получается идет проверка по символам. В начале мы эти символы сравниваем, потом эти символы сравниваем и так далее. Вот если взять символ age и символ «w». Символ Age находится вначале алфавита, символ w в конце. То есть a меньше, чем w, соответственно здесь у нас будет результат true. Давайте запустим и проверим. Действительно, «А» < «а», вот результат true вывелся. Второе выражение, Hello < world, да, результат true.

И последний пример, logic, это конъюнкция и дизъюнкция. В JavaScript есть такой логический оператор, как и, или. Если вы хотите детально посмотреть насчет логики и машинной математики, вы можете обратится к курсу C# Starter. Там очень подробно рассматриваются эти операторы, рассматривается логика. Если вы забыли логику, которую учили в институте, если вы хотите освежить свои знания, то рекомендую посмотреть отдельный урок, который есть на курсе C# Starter, там все это очень детально расписано. Значить конъюнкция, логическое «и». Значит смотрим, строка 20, мы создаем переменную «а» со значением true. Строка 21, переменную «b» со значением false. Обе переменные у нас логического типа. И 23 строчка. МЫ в переменную рез записываем странное, новое для нас выражение, «а && b». Два знака амперсант, это логическое И. Это операция, которая сравнивает два значения и выдает результат в соответствии с истинностью. Вот посмотрите, какая у нас есть таблица истинности. Если левый операнд у нас будет со значение true и правый операнд со значение true, то в результате мы получим результат true. Если слева false, справа true, результат false. Если true false, или false - false, то в результате будет false. То есть истинна у нас получится только в том случае, если мы сравниваем два значения, в которых находится значение истинна, оба значения true. Вот представьте такая ситуация, вы разрабатываете страницу интернет-магазина, и ваша задача перенаправить пользователя в корзину только в том случае, если у него товар выбран и количество товара указано. То есть товар выбран true, количество единиц указано true. Если оба значения true, вы можете пользователя отправить на страницу корзины, чтобы он совершил свою покупку. Но если товар не выбран и не указано количество товара, то есть false, либо товар выбран, но не указано количество true - false, либо товар не выбран, но количество указано – false - true. Вот во всех остальных ситуациях, вы пользователя не можете отправить на страницу корзина, то есть если у вас в результате сравнение — вот здесь вы проверяете, если товар выбран и если указано количество товара, вот если вот здесь вот в переменной резз находится значение true, вы пользователя дальше перенаправляете, если false – не перенаправляете. Вот не следующем уроке мы как раз будем очень часто использовать вот такие выражения, когда дойдем до условий, условных конструкций, мы будем использовать логическое «И». Ну соответственно логическое «ИЛИ», давайте сейчас запустим этот пример, тут у нас true, тут у нас false, двух этих переменных, то есть результатом будет у нас false. Давайте проверим, что выведется. А и «b» – false. Но если мы поставим здесь значение true. Видите, true и true, получится результата true. В следующем примере, в примере №2 у нас показано логическое ИЛИ. Логическое ИЛИ – это два вертикальных слеша, то есть символов ИЛИ. Строка 20-21, создали две переменные «a» и «b», обе переменные со значением false. И строка 23 проверяем, rez равен «a» или «b», то есть присваиваем в переменную rez результат вот такого логического выражения. И 24 строчка сейчас результатом у нас будет false. Давайте посмотрим, почему будет false, вот таблица истинности для логического ИЛИ. Если у нас слева от знака ИЛИ у нас true, и справа операнд будет равен true, то результатом будет true. Если хотя бы какой-то из операндов у нас true, то результатом всегда будет true. Но если оба операнда у нас false, то результатом у нас будет значение false. И пример. Например, если пользователь не ввел логин, или не ввел пароль, то вывести ему сообщение ошибки, то есть если у нас хотя бы чего-то нету, нету логина, либо нету пароля, тогда в результате у нас значение true и мы выводим сообщение об ошибки, если у нас пароль есть и логин есть, то результат у нас false и мы не выводим сообщение, у нас все нормально. То есть пользователь ввел все необходимые данные. И конъюнкцию, и дизъюнкцию мы будем активно использовать с вами на следующем уроке, когда будем разбирать условные конструкции. И на последок, то что вы самостоятельно должны попробовать сделать, задача вам надо, для закрепления материала, которую мы бы прослушали в этом уроке, видите у вас есть в уроке папочка homework, в которой есть три заготовленных HTML -документа. Если вы откроете файл с именем урока, *.xps файл, то в этом файле у вас кроме резюме текущего урока, основных моментов, на которые вы должны обратить внимание, есть такой пункт, как самостоятельная деятельность учащегося и вот в некоторых заданиях у вас будут встречаться задачи, которые нужно решать в Visual Studio, например, создайте три переменные, х со значением 6, у со значением 15 и z со значением 3. Выполните и отобразите результат следующих трех операций над этими переменными и вот то что вам нужно сделать. Вот вы открываете файлик homework001, определяете переменные, определяете операции, которые у вас здесь потребовали, и отображаете результат в документ. То есть используете конструкции, те функции, которые мы разбирали в ходе этого урока. Вот это то, чем вы можете самостоятельно заняться и вот закрепить материал, который был просмотрен на уроке.

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