Здравствуйте, любители JavaScript,
Это первая статья из серии статей о JavaScript для начинающих. Она будет посвящена непосредственно сути вопроса, без лишней нервотрепки и побочной информации. Если у вас возникнут трудности с пониманием чего-либо, обращайтесь сразу же.
Сегодняшняя статья будет посвящена основам и фундаментальным принципам JavaScript.
1 — Начните использовать JavaScript:
- Убедитесь, что у вас есть редактор кода, например, VScode (Visual Studio Code).
- Создайте папку на рабочем столе и назовите ее (js-basics), затем внутри папки создайте два файла:
Первый файл: назовите его (index.html) и внутри него введите восклицательный знак ‘!’ и нажмите Enter. Это создаст базовый HTML-файл. Конечно, теперь мы можем использовать JavaScript, добавляя теги внутри тела. Однако, чтобы убедиться, что мы учитываем разделение проблем, нам нужно добавить атрибут «src» к открывающему тегу script и ввести «index.js» для ссылки на наш JS-файл, который мы создадим, затем сохраните файл.
Второй файл: Назовите его (index.js), мы можем начать со вставки следующего кода: console.log(Hello World); затем сохраните ваш файл.
- Чтобы увидеть результат, перейдите в браузер и откройте файл index.html. Щелкните правой кнопкой мыши в любом месте страницы и выберите inspect, чтобы открыть Developer Tools, выберите console и там вы найдете вывод вашего кода.
- Вы можете обнаружить, что люди предпочитают называть свой JS-файл «main.js» или «app.js», но мы для простоты назвали его index.js.
2- Переменные:
- Мы используем их как коробки для хранения данных, и каждая коробка имеет метку. Коробка — это переменная. Имя переменной — это метка, которую мы помещаем на коробку и которая указывает на то, что находится внутри. Значение переменной — это данные, которые мы храним внутри коробки.
- Мы создаем переменную, написав следующий код —> let firstName = ‘Mostafa’;
- Слово let — это код, который мы пишем прямо перед именем переменной, после имени переменной мы пишем ‘=’, а затем значение нашей переменной, за которым следует знак ‘;’.
- Знак ‘;’ в программировании в целом означает -конец утверждения-, если его пропустить или забыть, ваш код не будет работать.
- Мы также можем создать две разные переменные в одном операторе, добавив ‘,’ после значения первой переменной, как показано ниже.
let firstName = "Mostafa" ,
lastName = "Said";
- Мы можем вернуть значение переменной в браузер, записав обе переменные в консоль, разделив их символами ‘,’.
console.log(firstName, lastName);
- Вы можете присваивать переменной различные типы данных, такие как (строка, число, булево, неопределенное и null).
3 — Константы:
- Переменные очень гибкие, их значения могут быть легко изменены позже, если мы присвоим им другое значение. Мы используем константы, когда хотим иметь поле с данными, которые мы не сможем изменить позже. Мы можем добавлять и удалять константы, но мы не можем изменить значение константы, если она уже была объявлена однажды.
- Например, если мы зададим процентную ставку 0,3 в константе, мы не сможем изменить ее значение на 0,5 позже в нашем коде.
- Константы удобно использовать при работе с объектами и массивами, потому что они представляют собой ссылку на объект, а не сами данные. Это означает, что когда вы лучше освоите JS, вы сможете изменять данные внутри объектов и массивов Const, и вам не нужно будет менять ссылку. (Со временем это станет понятнее)
4- Объекты:
- Объект — это пара ключ-значение, и он точно такой же, как объект в реальной жизни. Если вы подумаете о человеке, то у него есть имя, возраст, увлечения, адрес и т.д.
- Объект собирает связанные свойства внутри объекта. Если у нас есть переменные, определяющие значение имени, возраста и адреса. Мы можем собрать эти переменные в объект person.
- Вы можете создать объект, написав «let», затем имя объекта, за которым следует знак «=» и «{ }».
5 — Массивы:
- Мы используем массивы для представления списка элементов. Например, список цветов или список товаров, которые выбрал клиент.
- Таким образом, массивы — это способ сохранить несколько значений в одном месте, и таким образом мы можем иметь переменную со значением массива, включающего несколько значений.
6 — Функции:
- Теперь вам нужно сосредоточиться, потому что функции являются одним из фундаментальных строительных блоков JavaScript.
- Функция — это набор операторов, которые выполняют задачу или вычисляют значение.
- Мы можем представить себе, что вы пытаетесь поприветствовать пользователя, используя его имя и фамилию. Невозможно сделать это вручную и написать имя каждого пользователя, вам нужна какая-то функция, которая будет вызываться каждый раз, когда пользователь заходит на ваш сайт, чтобы поприветствовать его.
- Причина, по которой мы пишем функции, заключается в том, что мы не хотим повторять один и тот же набор правил каждый раз, когда хотим выполнить определенное действие.
- Мы можем создать функцию, написав «function», за которым следует имя функции, а затем «()» для передачи параметров, за которым следует «{}».
- Итак, давайте создадим функцию с именем ‘greet’ и скажем ей, чтобы она ожидала от нас FirstName и LastName в качестве параметров, и всякий раз, когда мы вызываем эту функцию и передаем параметры, она возвращает нам в консоли настроенное приветствие.
- Таким образом, теперь, вызывая эту функцию в любое время и передавая нужные нам параметры, она будет выполнять действия по объединению этих слов и записывать их в консоль.
На этом мы заканчиваем эту статью, но в скором времени ожидайте еще одну, в которой мы расскажем больше о типах функций, приведем несколько примеров и упражнений. Если у вас есть какие-либо отзывы или мнения, пожалуйста, дайте мне знать. Если у вас есть вопросы, напишите их в комментариях или свяжитесь со мной 🙂