Loftschool школа онлайн обучения IT профессиям
Профессии
  • Веб-разработчик
  • Frontend с нуля
  • Frontend разработчик
  • Backend разработчик
  • Full Stack разработчик
  • UX/UI Дизайнер
  • Интернет-маркетолог
  • Android-разработчик
Курсы
            • Веб-тестирование
            • Основы вёрстки
            • Веб для начинающих
            • JavaScript
            • Vue.js
            • React.js
            • Node.js
            • PHP
            • UX/UI-дизайн: базовый
            • UX/UI-дизайн: PRO
            • Основы Python
            • Python: машинное обучение
            • Product Management
            • Контекстная реклама
            • SMM
            • SEO для всех
            • Android: базовый
            • Android: продвинутый

          Скидка на все

          курсы и профессии

          -46%

          ВЕСЬ

          ИЮНЬ

          До конца акции:
          25
          Дней
          06
          Часов
          53
          Минут
          • Главная
          • Блог
          • Статьи
          • Урок 1. Основы JavaScript. Введение в JS. Типы данных.
          Полезный блог
          Опубликовано 03.12.2020 14: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, откройте его и впишите следующий код:

          
          
          
              
          
          
          
          
          

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

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

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

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

          7. Откройте созданную страницу index в браузере. Чтобы увидеть результат кода, введённого внутри тега