Основы JavaScript
В этом уроке мы рассмотрим базовые понятия о некоторых основах JavaScript. Сегодня мы уделим внимание разным типам данных JavaScript, определению функций, увидим, что такое массивы и объекты, познакомимся с операторами в JavaScript, условием if/else
, а также с циклами for
и while
.
В JavaScript вы можете иметь разные типы значений. Существуют такие типы данных: числа, строки, логические значения (boolean
), объекты, неопределенные и нулевые (NULL
):
Однострочные комментарии пишутся с использованием двух косых черт (//
), весь оставшийся текст в этой строке считается комментарием и не проходит синтаксический анализ. Многострочные комментарии обозначаются с помощью /*
(в начале) и */
(в конце комментария).
Числа
В JavaScript все числа представлены в виде значений с плавающей точкой. При определении числовой переменной не заключайте ее в кавычки.
// Примечание: ВСЕГДА используйте 'var' для объявления переменной: var boxWidth = 50; var boxHeight = 250; var areaOfBox = boxWidth * boxHeight; // = 12500
Строки
Любая заданная вами строка воспринимается буквально, JavaScript не будет ее обрабатывать. Строка представляет собой последовательность символов Unicode и должна быть заключена в соответствующую пару одинарных или двойных кавычек.
var firstPart = 'Привет'; var secondPart = 'Мир!'; var greetingText = firstPart + ', ' + secondPart; // Привет, Мир! // Знак + используется как оператор объединения строк // (также используется для сложения чисел)
Булев тип (логические значения)
Булевы типы полезны, когда вы хотите проверить условие – посмотреть, соответствует ли оно заданным критериям. Есть только два возможных логических значения: true
(истина) и false
(ложь). Любое сравнение, которое использует логические операторы, приведет к Булеву типу.
10 === (7 + 3); // = true (истина) //Вы можете назначить логические значения переменным: var yourAge = true; // Вы можете проверить это следующим образом: if (yourAge) { // выполняется код, когда условие истинно }
Оператор ‘===
‘, который указан выше, является оператором сравнения, о нем мы поговорим чуть позже.
Функции
Функция – это специализированный объект (Object):
// Использование оператора function для создания новой функции: function firstFunction(arg1, arg2) { // Здесь код функции } // Если вы опустите имя функции, тогда создается «анонимная функция»: function(arg1, arg2) { // Здесь код функции } // Запуск функции – это просто обращение к ней, а в скобках ее аргументы: firstFunction(); // функция без аргументов firstFunction('foo', 'bar'); // функция с аргументами // Вы также можете запустить функцию без присваивания ее переменной: (function(){ // Это пример анонимной функции, которая вызывает сама себя })();
Массивы
Массив также является специализированным объектом и может содержать любое количество значений данных. Чтобы получить доступ к значениям данных в массиве, вы должны использовать число, называемое «индексом» элемента, который вы пытаетесь получить:
// 2 разных способа объявления нового массива: // 1. буквальный (используя квадратные скобки): var fruit = ['яблоко', 'лимон', 'банан']; // 2. используя конструктор Array: var fruit = new Array('яблоко', 'лимон', 'банан'); // получаем данные массива fruit[0]; // доступ к 1-му элементу массива (яблоко) fruit[1]; // доступ к 2-му элементу массива (лимон) fruit[2]; // доступ к 3-му элементу массива (банан)
Объекты
Объект – это коллекция именованных значений (пары ключ – значение
(key – value)). Объекты похожи на массив, с той лишь разницей, что вы можете указать имя для каждого значения данных.
// 2 разных способа объявления нового Объекта: // 1. буквально (используя фигурные скобки): var profile = { name: 'Иван', age: 35, job: 'фрилансер' }; // 2. используя конструктор Object: var profile = new Object(); profile.name = 'Иван'; profile.age = 35; profile.job = 'фрилансер';
Условие If/Else
Одна из наиболее распространенных конструкций в JavaScript – это оператор IF/ELSE
. Это выглядит примерно так:
var legalAge = 18; var yourAge = 25; if ( yourAge >= legalAge ) { // Мы можем использовать «оповещение» (alert), чтобы уведомить пользователя: alert('Вы уже совершеннолетний'); } else { alert('Вы еще несовершеннолетний'); }
Операторы JavaScript:
Мы не будем перечислять все операторы JavaScript, а рассмотрим только самые популярные в использовании. Ниже приведены несколько примеров, которые дадут вам представление об их использовании:
// сложение / вычитание / умножение / деление var matematika = 3 + 5 + 7 - 10 * 100 / 2; // равенство if ( 10 == (15 - 5 ) { /* что-то делать */ } // == проверка на равенство // неравенство if ( 10 != (15 - 5 ) { /* что-то делать */ } // != проверка на неравенство // операторы строгого равенства (рекомендуется использовать эти): 2 === 2 // вместо 2 == 2 2 !== 3 // вместо 2 != 3 // присваивание: var kolichestvoFruktov = 15; kolichestvoFruktov -= 2; // То же, что и "kolichestvoFruktov = kolichestvoFruktov - 2" kolichestvoFruktov += 2; // То же, что и "kolichestvoFruktov = kolichestvoFruktov + 2"
Цикл
Циклы полезны, когда вам нужно просмотреть все элементы в массиве или все элементы объекта. Наиболее распространенный способ выполнения цикла в JavaScript – использование оператора FOR
или WHILE
.
var markiAvto = ['Alfa Romeo','Bentley','BMW','Bugatti','Mercedes-Benz']; // Цикл WHILE var counter = 0; var lengthOfArray = markiAvto.length; while (counter < lengthOfArray) { alert(markiAvto[counter]); counter++; // То же, что и += 1; } // Цикл FOR // (переменная i обозначает "iterator" (итератор) – вы можете назвать ее как угодно) for (var i = 0, length = markiAvto.length; i < length; i++) { alert(markiAvto[i]); }
Циклы FOR
более популярны для циклического перемещения по массивам.