Урок 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, который необходимо выполнить, мы поместим внутри тега