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

CoderStudio, 18.03.2023 11:50
1. JavaScript Начало работы

Что такое JavaScript?

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

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

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

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

  1. Внутренний
    Для добавления 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>
2 Теперь нам нужно просто добавить путь к js-файлу в 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

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

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

const pi = 3.14

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

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

  1. JavaScripts резервирует некоторые слова, такие как let, var, const, function и т.д., поэтому при объявлении переменной убедитесь, что вы не используете зарезервированные ключевые слова.
  2. Сохраняйте первую букву в строчном алфавите.
  3. Не используйте число в качестве первого символа имени переменной.
  4. Не используйте специальные символы в качестве первого символа переменной.
  5. Обратите внимание, что переменные чувствительны к регистру. Учет регистра означает, что переменная со строчными буквами будет считаться отличной от переменной с прописными буквами.
    Поэтому "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") означает особый вид числового значения, которое встречается, когда результат арифметической операции не может быть выражен в виде числа.

Пример

Пример
  • Строковый тип: Этот тип представляет текстовые данные.
Пример

Непримитивные типы данных

  1. Объект: Этот тип используется для хранения пар ключ-значение, где значения могут быть любого типа данных.
Пример

2. Объект массива: Этот тип данных помогает хранить коллекцию различных значений разных типов данных.

2 Объект массива Этот тип данных помогает хранить коллекцию различных значений разных

Есть еще много интересного о JavaScript. Если вам интересно, вот список ресурсов;

1. https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript .

2. https://www.freecodecamp.org/news/what-is-javascript

3. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures

Спасибо за чтение!

Продолжайте учиться и развиваться!