Ежедневный обучающий проект, который научит вас работать с JavaScript.
Добро пожаловать на мой 30-дневный день Javascript Day 1. Посмотрите здесь, в верхней части каждой статьи, обновления и ссылки на ресурсы, предыдущие и следующие статьи по мере их выхода и многое другое!
Примечание. Я буду следовать стандартам JavaScript ES6 так часто, как только смогу. Я вырос на ES5; но это опыт обучения для всех нас!
Введение
Прелесть JavaScript заключается в том, что вам не нужно иметь много технологий, чтобы начать. JavaScript поддерживается всеми браузерами, к которым у вас есть доступ. Существует множество библиотек и фреймворков, которые вы можете изучить, но без основ простого старого ванильного Javascript (JS) вы не сможете далеко продвинуться.
Не поймите меня неправильно, библиотеки великолепны, они значительно ускоряют время разработки, но если вы будете бегать, не «научившись ходить», вы будете много спотыкаться. С учетом сказанного, цель этой серии — подготовить вас к разработке JavaScript начального уровня за 30 дней!
Настройка, часть 1 — файл
Чтобы начать работу с JavaScript, вам понадобится одна из двух вещей. Файл, оканчивающийся на «.js», или файл HTML (оканчивающийся на .html). Эти файлы легко создать в Windows, перейдя в папку, в которой вы хотите сохранить эти файлы, и щелкнув пустое место, в этом контекстном меню перейдите к новому, а затем к текстовому файлу.
Знаю, знаю. Текстовый файл? Вы можете переименовать файл, добавив в конце .js или .html, и это будет работать нормально!
Я решил использовать файл index.html, чтобы мы могли опираться на него в будущих частях серии.
Настройка, часть 2 — редактор
Еще один очень полезный инструмент, который вам следует приобрести и с которым следует ознакомиться, — это редактор. Есть несколько видов, которые подходят для разных нужд. Мой любимый редактор — Visual Studio Code. Код Visual Studio доступен для Windows, Mac и Linux.
Редактор, как следует из его названия, предназначен для редактирования только что созданного файла! Давайте продолжим и откроем этого плохого парня в Visual Studio Code. Вас встретит большой старый пустой файл, который не очень захватывающий или красивый; но мы доберемся!
Ваш код Bit First JavaScript
Внутри этого красивого файла, который мы открыли, давайте напечатаем следующее:
<script>
//hello world
alert('hello world');
</script>
Если вы откроете html-файл, который мы создали ранее, вы должны увидеть что-то вроде этого!
Поздравляем! Вы только что написали свою первую строку(и) кода!! Но в целом все не так уж и круто. У вас просто есть сообщение, которое появляется при открытии страницы. (совет для профессионалов: нажмите F5, чтобы обновить страницу и увидеть ее снова!)
Итак, я обещал, что этот урок будет о переменных, так что давайте приступим к этому!
Переменная — это ссылка на некоторый бит данных, который вам нужно отслеживать. Это может быть число (100), строка («это строка»), объект (мы рассмотрим это позже, не волнуйтесь) и многое другое! А пока давайте не будем усложнять и изменим наше изящное предупреждающее сообщение, чтобы использовать переменную.
Замените существующий код следующим:
<script>
let message = 'hello from the variables!';
alert(message);
</script>
Еще раз вам будет представлено аккуратное сообщение на экране, которое показывает, какие данные были в нашей переменной под названием «сообщение». Мы объявили переменную с ключевым словом let. Это говорит браузеру оставить немного памяти доступной для нашей переменной с именем message и сохранить там строку «привет из переменных!». Мы заканчиваем нашу строку кода символом «;», это говорит компилятору JavaScript, что мы закончили с этой строкой и все готово. Наконец, мы снова вызываем изящную функцию alert() с переданной в нее нашей переменной. Вы ничего не знаете о функциях, если только начинаете (или, может быть, знаете), но они тоже появятся.
Let vs Const vs Var
Объявления Var имеют глобальную область действия или область действия функции, в то время как let и const имеют область действия блока. Переменные Var можно обновлять и повторно объявлять в пределах своей области видимости. Пусть переменные можно обновлять, но нельзя повторно объявлять; константные переменные не могут быть ни обновлены, ни повторно объявлены.
Let и const были введены в ES6 и IMO немного безопаснее, чем объявлять все как var.
Давайте посмотрим на это в действии! Идите вперед и обновите свой код до этого:
let name = 'my name'; let age = 30; let job = 'developer'; let job = 'programmer'; alert(name); alert(age); alert(job);
Сохраните это и откройте/обновите html-файл в браузере. Если вы откроете инструменты разработчика, нажав F12 и перейдя на вкладку консоли, вы увидите красную ошибку.
Используя переменные let, вы не можете объявить одну и ту же переменную дважды в одной и той же области видимости.
Теперь попробуйте то же самое, но объявите свои переменные с помощью var вместо let. Вы не только не получите ошибку, но ваша работа будет программистом, а не разработчиком.
Последний, но тем не менее важный! Давайте посмотрим на переменную const в действии.
let name = 'my name'; let age = 30; let job = 'developer'; let job = 'programmer'; alert(name); alert(age); alert(job); const car = 'Honda'; alert(car); car = 'Mazda';
Это также должно вызвать ошибку. Вы не можете переопределить или обновить значение константы. Он всегда будет постоянным!
Это краткое введение в переменные в День 1 из 30 Days of JavaScript! Я надеюсь, что вы получили удовольствие и узнали кое-что по пути. Оставайтесь с нами в течение дня 2 и далее.
