Статьи Языки программирования Базы данных Системы контроля версий Javascript фреймворки Бэкэнд фреймворки Пакетные менеджеры

1. JavaScript Начало работы

CoderStudio, 18.03.2023 11:50

Что такое JavaScript?

JavaScript (JS) - это язык программирования, который помогает в создании динамических веб-страниц, он помогает в реализации сложных веб-функций на ваших веб-страницах, например, обновление пользовательского интерфейса веб-страницы, выполнение некоторых действий, таких как отправка HTTP-запросов на сервер, когда пользователь нажимает на кнопку и многое другое.

JavaScript также используется на стороне сервера, например, для создания API HTTP-запросов, чтения данных из базы данных и многого другого.

Как добавить JavaScript на веб-страницу?

Существует 2 способа добавить JavaScript на вашу HTML-страницу.

Внутренний
Для добавления JavaScript в ваш HTML-файл вы можете использовать тег <script>.
Пример:

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title>JS Basics</title>
</head>
<body>
    <h1>
        Js Code 
    </h1>
    <script>
        console.info('My First JS Code');
    </script>
</body>
</html>

Существует 2 способа добавить JavaScript на вашу HTML-страницу

Примечание: console.info('<ваш текст>') помогает распечатать вывод.

Консоль в браузере Инструменты разработчика - это инструмент, предоставляемый браузерами, с помощью которого можно просматривать результаты выполнения кода JavaScript, а также запускать код JavaScript.

2. Внешний

Это включает в себя два шага;

1. Создайте внешний файл JavaScript. Файлы JavaScript создаются с помощью расширения ".js". Подобно тому, как текстовый файл имеет расширение ".txt" в конце, а видеофайл - расширение ".mp4".

Пример;

2. Теперь нам нужно просто добавить путь к js-файлу в HTML-файл.

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title>JS Basics</title>
</head>
<body>
    <h1>
        Js Code 
    </h1>
    <script src = "index.js" ></script>
</body>
</html>

Как работает JavaScript?

Прежде чем понять это, давайте разберемся, что такое среда выполнения (Runtime Environment).

Среда выполнения

Среда выполнения - это среда, в которой код может успешно выполняться. Эта среда предоставляет необходимые библиотеки и т.д. для успешного выполнения кода.

JS Engine

Движок JavaScript - это программа, которая считывает код JavaScript, преобразует его в машинный код (коды, понятные машине для передачи смысла) и, наконец, запускает машинный код.

Комбинация движка JS вместе с некоторыми дополнительными библиотеками и утилитами создает среду выполнения.

Основные браузеры имеют JS-движки, которые выполняют код JavaScript.

Google Chrome -> V8

Safari -> JavaScriptCore

Firefox -> SpiderMonkey

Как сохранить данные/информацию в коде JavaScript для последующего использования?

Допустим, вы хотите сложить два числа на вашей веб-странице, а затем сохранить сумму где-то в памяти, чтобы потом использовать ее в коде. Значит, чтобы получить доступ/прочитать сохраненное значение (сумму) в коде, нам понадобится ссылка, верно? Потому что мы не можем все время вводить постоянные значения (3,34 и т.д.).

Поэтому мы создаем именованный контейнер, в котором мы можем хранить наши значения и использовать их позже в коде. Мы называем их "переменными".

Переменная - это контейнер, в котором хранится значение, которое мы можем использовать в нашем коде.

Объявление переменной

Создание переменной называется объявлением переменной.

Пример:

let number1; 
let number2; 
let sum;

Здесь мы создаем две переменные number1 и number2.

Инициализация переменной

Теперь мы можем поместить некоторые значения в эти переменные. Это называется инициализацией переменной.

Пример;

number1 = 28;
number2 = 30;
sum = number1 + number2;

Вы можете объявить и инициализировать переменную одновременно, как показано здесь;

let number3  = 35;

Обновление переменной

Вы можете просто обновить переменную, поместив в нее новое значение.

number1 = 32;

Какие существуют различные способы объявления переменной? let, var и const

let: используется, когда вы хотите использовать переменную, которая может быть обновлена позже в коде.

let number4 = 5;

2. const: используется при использовании переменной, значение которой никогда не должно меняться в дальнейшем в коде. Если вы объявляете const, вам необходимо сразу же ее инициализировать.

const pi = 3.14

3. var: Похож на let, но let является новым и рекомендуемым способом.

Как называть переменные

JavaScripts резервирует некоторые слова, такие как let, var, const, function и т.д., поэтому при объявлении переменной убедитесь, что вы не используете зарезервированные ключевые слова.
Сохраняйте первую букву в строчном алфавите.
Не используйте число в качестве первого символа имени переменной.
Не используйте специальные символы в качестве первого символа переменной.
Обратите внимание, что переменные чувствительны к регистру. Учет регистра означает, что переменная со строчными буквами будет считаться отличной от переменной с прописными буквами.
Поэтому "myage" будет отличаться от "myAge".

Типы данных в JavaScript

Примитивные типы

Все примитивные типы - это самые базовые типы и простые типы значений, которые можно хранить в переменной. Эти типы неизменяемы, то есть вы не можете изменить их исходное значение.

Тип Null: "null" означает, что переменная вообще ни на что не указывает.
Создать переменную типа "null", которая ни на что не указывает, можно следующим образом;

let num1;
num1 = null;

Неопределенный тип: "undefined" означает, что созданная переменная не содержит значения.
Когда вы объявляете переменную, но не инициализируете ее, переменной автоматически присваивается значение "undefined".

Все примитивные типы - это самые базовые типы и простые типы значений которые можно

Булевы типы: Булевы типы определяют два типа значений: "true" и "false".
Тип Number: Тип Number предназначен для чисел, таких как значения 4,5,-16, 16.5 и т.д.

Примечание: typeof используется для проверки типа переменной.

NaN ("Not a Number") означает особый вид числового значения, которое встречается, когда результат арифметической операции не может быть выражен в виде числа.

Пример