Профессии
  • Веб-разработчик
  • Frontend разработчик
  • Backend разработчик
  • Full Stack разработчик
  • Интернет-маркетолог
  • Android-разработчик
  • UX/UI Дизайнер
Интенсивы
          • Основы вёрстки
          • Веб для начинающих
          • JavaScript
          • Vue.js
          • React.js
          • Node.js
          • PHP
          • Контекстная реклама
          • SMM
          • SEO для всех
          • Android: базовый
          • Android: продвинутый
          • UX/UI-дизайн: базовый
          • UX/UI-дизайн: PRO
          • Python: машинное обучение
        Видеокурсы
        • Как войти в IT
        • Ember.js
        • Верстка - быстрый старт
        • WordPress
        • Figma и Sketch
        • Все видеокурсы
          • Веб-разработчик
          • Frontend разработчик
          • Backend разработчик
          • Full Stack разработчик
          • Интернет-маркетолог
          • Android-разработчик
          • UX/UI Дизайнер
                • Основы вёрстки
                • Веб для начинающих
                • JavaScript
                • Vue.js
                • React.js
                • Node.js
                • PHP
                • Контекстная реклама
                • SMM
                • SEO для всех
                • Android: базовый
                • Android: продвинутый
                • UX/UI-дизайн: базовый
                • UX/UI-дизайн: PRO
                • Python: машинное обучение
                • Все записи блога
                • Истории выпускников LoftSchool
                • Полезные советы
                • Книги
                • Инструменты
                • Команда LoftSchool
                • Информация о курсах
                • Статьи
              • Видеокурсы
              • Главная
              • Блог
              • Статьи
              • Урок 1. Основы JavaScript. Введение в JS. Типы данных.

              Полезный блог

              Статьи
              Опубликовано 03.12.2020 17:19
              Урок 1. Основы JavaScript. Введение в JS. Типы данных.

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

              В этом уроке расскажем, что такое JavaScript, почему HTML и CSS не достаточно и разберём матчасть –  типы данных и переменные. 

              Зачем нужен JavaScript

              HTML5 и CSS отвечают за структурную и визуальную часть сайта, но не за его интерактивность.

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

              Это как комната, в которой полно электроприборов, но нет электричества. Выглядит отлично и получится даже понажимать на кнопки! Но работать ничего не будет :)

              Чтобы при нажатии на элемент происходило нужное действие необходим JavaScript.

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

              Коротко о языках программирования

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

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

              1. Разработчик составляет алгоритм с помощью понятных для себя конструкций – создает код на языке программирования.

              2. Код переводится в машинный язык, понятный устройству.

              3. Устройство считывает алгоритм и выполняет его.

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

              Существует множество высокоуровневых языков программирования. Вот одни из самых популярных: 

              — C++;

              — Java;

              — Python;

              — PHP;

              — JavaScript.

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

              Типы данных в JavaScript

              Мы уже говорили о том, что память компьютера нужна для хранения данных. Какие именно данные мы имеем ввиду? Язык JavaScript поддерживает несколько типов данных:

              Number (числа) – целые и вещественные числа.

              String (строки) – символьные строки, заключённые в одинарные или двойные кавычки. Например, 'привет' или "привет".

              Boolean (буль) – логический тип, который при введении логических выражений принимает только два значения: true (истина) и false (ложь). Например, 10==10 (10 равно 10) – это true, а 10==11 (10 равно 11) – это false.

              Object (объект) – тип данных, хранящий свойства и методы.

              Undefined – тип данных, у которых значение не определено.

              Null – тип данных с «пустыми» значениями.

              Переменные 

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

              Давайте создадим первую переменную с именем name и значением 'Сергей'. 

              Делается это с помощью ключевого слова let:

              let name = 'Сергей';

              При выполнении этого кода интерпретатор языка JavaScript выделит в оперативной памяти несколько ячеек, достаточных для хранения значения 'Сергей' и сохранит туда данные. Далее к этим данным мы обращаемся, указывая имя переменной – name. 

              Например, выведем значение переменной в консоль. Это делается с помощью конструкции console.log(имя_переменной):

              console.log(name);

              В консоли увидим результат:

              "Сергей"

              Как работать с JS в браузере

              1. Создаём файл. Для этого на рабочем столе нажимаем правой кнопкой мыши, выбираем пункт «Создать» → «Текстовый документ»:

              2. Присвойте документу имя, например, index, откройте его и впишите следующий код:

              <!doctype html>
              <html>
              <head>
                  <meta charset=utf-8>
              <body>
              <script>
              </script>
              </body>
              </head>
              </html>

              3. Код JavaScript, который необходимо выполнить, мы поместим внутри тега <script>:

              <!doctype html>
              <html>
              <head>
                  <meta charset=utf-8>
              <body>
              <script>
                 let name = 'Сергей';
                 console.log(name); 
              </script>
              </body>
              </head>
              </html>

              4. Далее необходимо сохранить файл в нужном расширении и дать ему имя. Для этого мы выбираем пункт «Файл» в верхнем левом углу документа, а далее пункт «Сохранить как...»:

              5. В появившемся окне в строке «Имя файла» необходимо после имени указать нужное расширение для браузера .html. Вот так:

              6. Нажмите на кнопку «Сохранить». На рабочем столе появится файл index в нужном расширении с иконкой вашего браузера. Мы пользуемся Google Chrome, поэтому у нас это выглядит так:

              7. Откройте созданную страницу index в браузере. Чтобы увидеть результат кода, введённого внутри тега <script>, необходимо открыть Инструменты разработчика на странице. В Google Chrome мы нажимаем на три точки в правом верхнем углу, затем выбираем пункт «Дополнительные инструменты», а в нём «Инструменты разработчика»:

              8. Откроется дополнительное окно внутри страницы. И в нём мы выбираем вкладку Console, где и выводится результат:

              Как работать с JS в редакторе кода

              1. Скачиваем редактор кода, например, Sublime Text. Для этого заходим на сайт https://www.sublimetext.com/, нажимаем на кнопку «DOWNLOAD FOR WINDOWS». После скачивания устанавливаем редактор на компьютер. 

              2. Открываем Sublime Text и создаём новый файл: в верхнем левом углу выбираем пункт File, а затем New File. Вводим код JS:

              let name = 'Сергей';
              console.log(name);

              3. Сохраняем файл: File → Save. В появившемся окне вводим имя файла и расширение JavaScript – .js. Вот так: index.js. Нажимаем кнопку «Сохранить».

              4. Настраиваем консоль. Для этого в верхнем меню выбираем пункт Tools → Build System и в списке нажимаем на нужный язык – JavaScript:

              Если языка JavaScript в списке нет, его необходимо создать. Для этого снова зайдите в пункт Tools → Build System и выберите самый последний вариант из списка – New Build System. Внутри редактора откроется дополнительное окно. В него необходимо вставить код:

              // Sublime Text - Build System for Javascript
              {
              	"cmd": ["node", "$file"],
              	"selector": "source.js"
              }
              

              После этого сохраняем файл: File → Save. Присваиваем имя JavaScript.sublime-build. Нажимаем кнопку «Сохранить». Расположение файла и тип не меняем! После этого текущий файл можно закрыть. Теперь в списке Build System появился язык JavaScript.

              5. Выведем результат кода в консоль. Для этого снова выбираем пункт Tools, а далее Build. Консоль откроется внизу окна. Результат:

              Сергей
              [Finished in 1.6s]

              Теперь вы можете работать с кодом в браузере или внутри редактора кода и сразу видеть результат. А в следующем уроке вы узнаете, какие условные операторы существуют в JavaScript и как ими пользоваться.

              Поделись публикацией

              Категории

              • Все записи блога
                • Трудоустройство
                  • Истории выпускников LoftSchool
                  • Полезные советы
                • Полезные ссылки
                  • Книги
                  • Инструменты
                • Новости школы
                  • Команда LoftSchool
                  • Информация о курсах
                • Статьи
                  • © 2012 - 2022 LOFT

                    Школа онлайн образования

                  • © 2012 - 2022 LOFT

                    Школа онлайн образования

                    • +7 (800) 600 09 54
                    • +7 (812) 339 22 01
                    • info@loftschool.com
                  • Полезная рассылка

                    Подпишись, чтобы быть в курсе наших новостей, акций и скидок.

                  • Полезное
                    • Карта курсов
                    • Работодателям
                    • Партнерская программа
                    • Вакансии
                    • Подарочные сертификаты
                    • Вебинары
                    • Блог
                    • FAQ
                  • Информация
                    • Публичная оферта портала
                    • Политика конфиденциальности
                    Безопасная передача данных