Урок 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 и как ими пользоваться.