Как разработчик, 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.