Loftschool школа онлайн обучения IT профессиям
Профессии
  • Веб-разработчик
  • 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 для начинающих
          • Python: машинное обучение
        Профессия Дизайнер со скидкой
        -20%
        До конца акции:
        14
        23
        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 в браузере. Чтобы увидеть результат кода, введённого внутри тега