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

JavaScript — это высокоуровневый динамический язык программирования, позволяющий сделать веб-страницы интерактивными. JavaScript является частью спецификации языка ECMAScript и используется в: Angular, Ember, React и Node.js и это лишь несколько примеров.

Файлы JavaScript используют расширение файла .js.

Комментарии

Комментарии используются для объяснения того, что делает ваш код, или для предотвращения выполнения кода. Всегда рекомендуется добавлять комментарии к вашему коду, чтобы помочь вам вспомнить, что вы сделали, или помочь объяснить другим разработчикам, как работает ваш код.

Ниже приведены примеры комментариев, которые можно использовать в коде:

// A single line comment for a variable
var quantity = 6;
var additem = 2;    
/*
A multi-line comment
over multiple lines
to describe the code below
*/
var total = quantity + additem;

Добавление комментариев перед строкой кода предотвратит ее выполнение.

Переменные

Данные или информация, которые необходимо временно сохранить в JavaScript, могут использовать переменную. Прежде чем переменную можно будет использовать, ее необходимо объявить (создать). Чтобы объявить переменную, мы используем ключевое слово var, за которым следует имя переменной.

В примере кода ниже объявляется переменная с именем quantity.

var quantity;

После объявления переменной ей можно присвоить значение. Пока переменная не имеет значения, говорят, что она не определена. Значение переменной присваивается с помощью оператора присваивания (=).

Теперь переменной будет присвоено значение.

var quantity = 6;

Наша первая переменная создана. Теперь мы добавим еще две переменные, чтобы выполнить простой расчет.

var quantity = 6;
var additem = 2;
var total = quantity + additem;

Позиция, в которой объявлена ​​переменная в скрипте, называется областью.

Строки представляют собой текстовые значения и заключаются в одинарные или двойные кавычки. Если число написано внутри кавычек, оно будет рассматриваться как текстовая строка. Числа пишутся без кавычек, как показано в следующем примере:

var pi = 3.14;
var largeNumber = 1028;
var firstName = "Dan";
var occupation = 'Web Developer';

Множество

Массив похож на переменную, но может содержать несколько значений одновременно и должен использоваться при работе со списком или набором связанных значений. При создании массива метод литерала массива предпочтительнее метода конструктора массива. Вам не нужно указывать, сколько значений будет содержать массив, и содержащиеся значения не обязательно должны быть одного и того же типа данных.

Я создам простой массив для хранения списка цветов.

var colour = ['red', 'white', 'blue'];

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

Например, если вы хотите получить доступ к цвету синий измассива, имя массива указывается вместе с порядковым номером значения, которое вы хотите получить. В этом примере номер индекса равен два.

var colour = ['red', 'white', 'blue'];
colour[2];

У каждого массива есть свойство length, которое подсчитывает количество значений в массиве. В приведенном ниже примере свойство вернет длину три, так как массив содержит три значения цвета.

var colour = ['red', 'white', 'blue'];
colour.length;

Значения в массиве также можно отсортировать в правильном порядке с помощью метода sort.

var colour = ['red', 'white', 'blue'];
colour.sort();

Теперь у меня есть цвет желтый, который я хочу добавить в свой массив. Чтобы добавить новый цвет, я могу просто использовать метод push.

var colour = ['red', 'white', 'blue'];
colour.push('yellow');

Функции

Функция — это блок кода, созданный для выполнения определенной задачи и выполняемый при вызове (вызове). Функции объявляются (создаются) с использованием ключевого слова function, за которым следует имя функции. Имя функции часто называют идентификатором. Операторы или группа операторов, выполняющих задачу, помещаются в блок кода функции.

Функции позволяют написать код один раз и использовать его несколько раз.

function myFunc() {
    // This is a code block
}
myFunc();    // Call the function

Иногда функция нуждается в определенной информации для выполнения своей задачи. Для этого мы используем параметры и аргументы. Когда функция объявляется, ей задаются параметры. Они действуют как переменные и помещаются в круглые скобки (фигурные скобки), которые следуют за именем функции.

function getArea(parameter) {
}
getArea(argument);

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

Вот пример функции для вычисления площади фигуры с использованием параметров и аргументов.

function getArea(width, height) {
    return width * height;
}
getArea(3, 5);

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

function getArea(width, height) {
    return width * height;
}
var shapeWidth = 3;
var shapeHeight = 5;
getArea(shapeWidth, shapeHeight);

Функции могут возвращать информацию коду, вызвавшему их, с помощью оператора/ключевого слова return. Когда используется return, интерпретатор покидает функцию и возвращается к оператору, вызвавшему функцию.

Мы можем использовать функции для возврата более одного значения, используя массив. В приведенном ниже примере кода вычисляются как площадь, так и объем фигуры. Площадь фигуры хранится в переменной с именем площадь, а объем сохраняется в переменной с именем объем. Затем обе переменные помещаются в массив с именем sizes, который возвращается коду, вызвавшему функцию, что позволяет использовать значения.

function calculateSize(width, height, depth) {
    var area = width * height;
    var volume = width * height * depth;
    var sizes = [area, volume];
    return sizes;
}
// Array index is 0, so area will be calculated
var getArea = calculateSize(3, 2, 5)[0];
// Array index is 1, so volume will be calculated
var getVolume = calculateSize(3, 2, 5)[1];

Как применить JavaScript к HTML-страницам

Чтобы завершить это введение в JavaScript, я создам простую веб-страницу HTML, которая будет использовать JavaScript для отображения контента на странице.

Начните с создания простой веб-страницы HTML с именем index.html со следующим кодом:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>JavaScript example</title>
</head>
<body>
<div id="shape-area"></div>
<div id="shape-volume"></div>
<script src="shape.js"></script>
</body>
</html>

После завершения откройте новый файл с именем shape.js, гдебудет размещен код JavaScript ниже:

function calculateSize(width, height, depth) {
    var area = width * height;
    var volume = width * height * depth;
    var sizes = [area, volume];
    return sizes;
}
// Array index is 0, so area will be calculated
var getArea = calculateSize(3, 2, 5)[0];
// Array index is 1, so volume will be calculated
var getVolume = calculateSize(3, 2, 5)[1];
// Output the area and volume to the HTML web page
document.getElementById("shape-area").innerHTML = getArea;
document.getElementById("shape-volume").innerHTML = getVolume;

В случае успеха вы должны увидеть числа 6 и 30, отображаемые на веб-странице HTML с указанием области и объема. значения из функции JavaScript.