JavaScript известен как самый популярный язык в мире: более 70% разработчиков используют его в разработке программного обеспечения. Если вы собираетесь потратить время и энергию на изучение нового языка программирования или начать свою карьеру в сфере IT, вам нужно убедиться, что вы выбираете полезный и востребованный язык программирования среди множества других языков. JavaScript в этом смысле - лучший.
Этот обзор предназначен для начинающих разработчиков, которые хотят улучшить свои навыки JavaScript и его понимание. Статья содержит пояснения, примеры кода, основные и важные операторы, функции, методы, свойства и общий обзор основных принципов JavaScript.
Что такое JavaScript
JavaScript - это язык программирования, обеспечивающий динамическое поведение на веб-сайте. Язык имеет API-интерфейсы, которые работают с текстом, данными и объектной моделью документа (DOM). Он был разработан в 1995 году и представляет собой высокоуровневый мультипарадигменный язык сценариев, который поддерживает функциональные, императивные и событийно-ориентированные стили программирования.
JavaScript может открывать всплывающие окна, отправлять и принимать запросы с других ресурсов, манипулировать элементами страницы, подгружать контент, выполнять анимацию, управлять воспроизведением мультимедиа и т.д.
Среди популярных веб-сайтов, использующих JavaScript: Google, Facebook, Youtube, Instagram и многие другие. Это делает его самым используемым языком в истории Интернета. Как следствие - очень многому нужно будет научиться, и, поскольку, сразу невозможно освоить все концепции языка, изучение должно быть постепенным, что делает эту статью очень важной для вашего роста как разработчика JavaScript.
Основы JavaScript
Рассмотрим самые основные концепции языка, с которыми необходимо быть знакомыми.
Подключение скрипта в документе
Чтобы подключить JS на HTML-странице, код скрипта необходимо заключить в следующий тег:
<script type="text/javascript">
<!-- Код скрипта -->
</script>
Подключение внешнего файла JavaScript
Вы можете создать отдельный файл JavaScript и подключить его в своем файле HTML. Так делать полезно, потому что на вашей странице может быть много скриптов и их наличие в HTML-файле сделает его ужасным и неуместным.
Если ваш файл со скриптами называется script.js, то его можно подключить следующим образом:
<script src="script.js"></script>
Комментирование кода
Комментарии в коде необходимы, потому что они помогают вам и другим разработчикам лучше его понять для последующей работы с ним и его отладки.
Есть разные способы добавления комментариев к коду JavaScript. Они могут быть:
- Однострочными (указывается // перед комментарием в одну строку)
// Однострочный комментарий в JS
let name = 'Иван';
- Многострочными (оборачиваются символами /* и */)
/*
Многострочный комментарий в JS
Удобен для длинного описания кода
*/
let surname = 'Иванов';
Базовые понятия и сущности в JavaScript
Под сущностями в JS подразумевается то, из чего преимущественно будет состоять ваш код.
Переменные
Переменные в JavaScript используются для хранения информации. Это уникальный идентификатор, указывающий на то, что при обращении к нему мы получим необходимые нам данные. Переменные можно использовать для выполнения различных операций в коде JavaScript.
Существует 3 распространенных способа объявления переменных в JavaScript:
- var - это наиболее часто используемый способ вызвать переменную и присвоить ей значение. Однако из-за возможности повторного объявления (var можно легко переобъявить и переопределить в коде) код может быть крайне нестабильным и подверженным ошибкам, что требует более внимательного его написания. В 2015 году был принят новый стандарт для JS и ввиду его новых возможностей хорошей практикой считается не использовать var в коде.
- let - такая переменная не может быть повторно объявлена, что снижает количество потенциальных ошибок. Однако ей можно присвоить новое значение.
- const - переменная, обладающая строгими правилами. Ее нельзя использовать до того, как она появится в коде, она не может быть переобъявлена или переназначена, т. е. информация, которую хранят в const, остается неизменной на протяжении всего жизненного цикла вашего кода.
var x = 2;
var x = 3; // переобъявили переменную
x = 4; // переназначили переменную
let y = 10;
y = 12; // можем переназначить, но не можем переобъявить
const z = 35; // не можем переназначать и переобъявлять
Типы данных
Переменные в JavaScript могут хранить информацию различных типов. Знак = используется для присвоения значений переменным. Рассмотрим основные типы данных в языке:
- Числа (Numbers) - это числовые значения в JavaScript, которые могут быть целыми, дробными, положительными, отрицательными и бесконечными.
let x = 10; // 10 - числовой тип данных
- Строки (Strings) - это комбинация нескольких символов, представляющих в совокупности текст или строку. Строчное значение должно быть в кавычках.
let name = 'Иван';
- Булевый тип (Boolean) - значение переменной может быть либо верным (true), либо ложным (false). Используется обычно для условий в коде, либо для преобразований типов.
let a = true;
let b = false;
- null и undefined - два похожих между собой типа, которые говорят о неизвестности значения переменной. null обозначает "ничего" или "пустоту" и присваивается переменной вручную. undefined обозначает "значение не присвоено" и будет по-умолчанию у переменной, которой не задали значение.
let x; // сейчас значение x = undefined
x = 10; // теперь значение x = 10, а тип данных числовой
x = null; // тип данных переменной x стал null
- Массив (Array) - это набор различных типов данных, заключенных в квадратные скобки и разделенных между собой запятыми.
let names = ['Иван', 'Петр', 'Олег', 'Николай'];
let apple = ['Яблоко', true, 10];
- Объект (Object) - контейнер, состоящий из свойств и их значений, объединенных фигурными скобками и разделенных между собой запятыми.
let friend = {
name: 'Иван',
age: 25,
hobby: ['футбол', 'чтение', 'рисование']
};
Функции
Функции в JavaScript предназначены для получения данных, их обработки и вцелом совершения каких-либо манипуляций на основании предоставленной внутри функции и/или переданной ей информации и вызываются с помощью определенного синтаксиса:
// Обозначили функцию с именем hello
function hello() {
alert('Привет!');
// В теле функции указали, что результатом ее работы будет сообщение "Привет!" в модальном окне страницы
};
hello(); // Вызвали функцию
Методы
Методы в JavaScript предназначены для выполнения функций (встроенных или самописных) над объектом и вызываются с помощью добавления к объекту точки, имени метода и круглых скобок.
let object = {
name: 'Иван',
hello: function () {
alert('Привет, ' + this.name);
}
};
object.hello(); // Вызвали метод hello для объекта object
Библиотеки
Это встроенные в JavaScript дополнительные возможности выполнять определенные манипуляции с данными с применением готовых методов.
Math.random(); // Библиотека Math, имеющая свой метод random
Что еще есть в JavaScript
Далее бегло пробежимся по возможностям и функциям, существующим в языке, которые могут стать маленькой шпаргалочкой для начинающих разработчиков.
Операторы в JavaScript
Операторы в JavaScript используются для присвоения значений, сравнения значений, выполнения арифметических вычислений и многого другого и выражаются в виде набора определенных символов.
Существуют следующие виды операторов:
- Арифметические операторы - используются для совершения математических действий.
+ Сложение
- Вычитание
* Умножение
/ Деление
(....) Оператор группировки
% Модуль
++ Увеличение числа на 1
-- Уменьшение числа 1
- Операторы сравнения
== Значения равны
=== Значения и их типы равны
!= Не равны
!== Не равны либо значения, либо их типы
> Больше
< Меньше
>= Больше или равно
<= Меньше или равно
? Тернарный оператор
- Логические операторы
&& и
|| или
! не
- Побитовые операторы
& оператор И
| оператор ИЛИ
~ НЕ
^ НИ
<< Левый сдвиг
>> Правый сдвиг
>>> Нулевое заполнение правым сдвигом
Условные операторы
Это отдельный и более глобальный вид операторов, которые используются для выполнения задач и команд в коде. Они указывают на то, какой код будет отрабатывать в зависимости от указанных условий. Условные операторы являются важным аспектом в языке JavaScript и программировании вцелом.
if ( условие ) {
// код, который будет выполнен
// при выполнении условия
} else {
// код, который будет выполнен
// при невыполнении условия
}
Циклы
Циклы похожи на условные операторы, т.к. их принцип действия основан на выполнении команд в зависимости от условия, однако основное отличие состоит в том, что циклы позволяют отрабатывать необходимый код столько раз, сколько вам нужно и с разными значениями. Существуют различные способы создания циклов в JavaScript:
- Цикл while - пока будет выполняться условие, код внутри цикла будет отрабатывать
while ( условие ) {
// код, отрабатывающий при выполнении условия
// в коде должно обновляться условие
}
- Цикл for - условие и его обновление задаются в самом начале цикла
for ( переменная; условие, содержащее переменную; изменение переменной по завершению цикла ) {
// код, отрабатывающий при выполнении условия
}
- Цикл do while - похож на цикл while, но разница в том, что вначале отрабатывается код (т.е. он минимум раз точно выполнится), а потом, если условие выполняется, запускается снова
do {
// код, отрабатывающий в теле цикла
// в коде должно обновляться условие
} while ( условие )
Массивы
Как уже упоминалось, массивы - это формы объектов, которые используются для группировки наборов элементов или, простыми словами, - это набор данных. Пример массива:
let names = ['Иван', 'Петр', 'Олег'];
Массивам присущи специальные методы, используемые для выполнения определенных операций с содержащимися в них данными. Наиболее часто используемые:
Метод | Описание |
concat() | используется для объединения нескольких массивов в один. |
length() | указывает количество элементов, содержащихся в массиве. |
indexOf( элемент ) | возвращает позицию указанного элемента в массиве; если элемент повторяется - то вернет позицию первого. |
lastIndexOf( элемент ) | возвращает позицию указанного элемента в массиве; если элемент повторяется - то вернет позицию последнего. |
join( разделитель ) | объединяет в строку все элементы массива и проставляет между ними разделитель. |
toString() | преобразует элементы массива в строку с разделителем запятой. |
shift() | удаляет первый элемент массива. |
pop() | удаляет последний элемент массива. |
unshift( элемент ) | добавляет новый элемент в начало массива. |
push( элемент ) | добавляет новый элемент в конец массива. |
sort() | упорядочивает элементы элемента в алфавитном порядке. |
reverse() | меняет порядок элементов массива наоборот (последний становится первым, предпоследний - вторым и т.д.). |
splice( позиция, количество, элементы ) | добавляет/удаляет элементы с указанием их позиции и количества. |
slice( позиция, количество ) | создает новый массив, содержащий указанные элементы исходного массива. |
Пример использования метода push():
let names = ['Иван', 'Петр', 'Олег'];
names.push('Игорь');
console.log(names); // => ['Иван', 'Петр', 'Олег', 'Игорь']
Функции
Функции в JavaScript, можно определить как фрагменты кода, объединенные между собой и предназначенные для выполнения определенной задачи. Базовый синтаксис функции в JavaScript:
function functionName (parameterOne, parameterTwo, …parameterN) {
// Тело функции
}
Блок функции кода начинается с ключевого слова function, за которым следует имя функции и параметры функции, определенные в круглых скобках. За ними следует тело функции в фигурных скобках, где прописывается код.
Популярные встроенные функции, используемые для отображения данных:
Функция | Описание |
alert( данные ) | создает в браузере диалоговое окно с данными (преимущественно текстом). |
prompt( данные ) | создает в браузере диалоговое окно с данными (преимущественно текстом), в котором пользователь вводит еще свои данные. |
console.log( данные ) | выводит данные в консоли браузера; очень важная функция для разработчиков, поскольку она часто используется для отладки кода. |
document.write( данные ) | используется для записи данных непосредственно в код HTML (обычно это кусок кода). |
Полезные глобальные функции:
Функция | Описание |
parseFloat( строка ) | преобразует строку в число с плавающей запятой. |
parseInt( строка ) | преобразует строку в целое число. |
encodeURI( url ) | кодирует универсальный идентификатор ресурса (URI) согласно стандарту UTF-8. |
decodeURI( url ) | декодирует уже закодированный URI. |
isNaN( данные ) | определяет, является ли переданные ей данные числом NaN. |
Number( данные ) | преобразует данные в число. |
Пример использования функции parseInt():
let string = '3 Толстяка';
parseInt(string); // => 3
Область видимости
Область видимости определяется как доступность переменных, т.е. она описывает, какой раздел вашего кода может получить доступ и использовать те или иные переменные. В JavaScript существует следующие области видимости:
- Глобальная область видимости. Она относится к любой переменной, которая была объявлена вне всяческого блока кода (паре фигурных скобок) или функции. Доступ к глобальной области можно получить из любой точки скрипта. Пример глобальной переменной:
let hello = 'Привет!';
console.log(hello); // => 'Привет!'
function greet() {
console.log(hello); // => 'Привет!'
};
greet();
- Локальная область видимости. Сюда уже входят переменные, объявленные внутри функционального блока. Они доступны только внутри этой функции и не могут использоваться где-либо вне. Пример локальной переменной:
function greet() {
let hello = 'Привет!';
console.log(hello); // => 'Привет!'
};
greet();
console.log(hello); // В консоли выдаст ошибку
- Блочная область видимости. Если переменные внутри блока кода, ограниченного фигурными скобками, объявлены с помощью ключевых слов let или const, то к ним нельзя получить доступ снаружи и они обладают блочной областью видимости, т.е. доступны только в пределах этого блока. В отношении var блочная область видимости не действует. Пример блочной области:
if (1 > 0) {
let hello = 'Привет!';
var bye = 'Пока!';
console.log(hello); // => 'Привет!'
console.log(bye); // => 'Пока!'
}
console.log(hello); // В консоли выдаст ошибку
console.log(bye); // => 'Пока!'
Поднятие (Хоистинг)
Это методология JavaScript, которая перемещает функции, переменные и классы в верхнюю часть их области видимости перед тем, как скрипт начинает построчно выполняться. Это значит, что их можно использовать в коде раньше, чем они были объявлены. Однако это делать стоит с особой осторожностью во избежание непредвиденных ошибок в программе.
В JavaScript доступны два типа хоистинга:
- Поднятие функций - предоставляет возможность вызывать или использовать функцию в коде перед ее определением.
greet();
function greet() {
console.log('Привет!'); // => 'Привет!'
};
- Поднятие переменных - позволяет использовать переменную до того, как она будет определена. Однако следует отметить, что JavaScript поднимает только объявление переменной, а не инициализацию. Для var и let/const поведения будут разные, что еще раз подчеркивает, что хорошая практика - использовать переменную уже после объявления.
console.log(a); // => undefined
var a;
console.log(a); // => undefined;
a = 10;
console.log(a); // => 10;
console.log(b); // Выдаст ошибку о недоступности использования
let b;
b = 20;
Строки
Строки представляют собой комбинацию символов, которые используются для выполнения некоторых задач или просто служат в качестве текста. Строки снабжены множеством методов, позволяющих выполнять различные манипуляции над ними. Некоторые из этих методов:
Метод | Описание |
toLowercase() | выполняет преобразование символов строки в нижний регистр. |
toUppercase() | выполняет преобразование символов строки в верхний регистр. |
charAt( индекс ) | возвращает определенный символ по заданному индексу строки. |
charCodeAt( индекс ) | возвращает Unicode символ по заданному индексу. |
concat( строка ) | объединяет несколько строк в одну. |
match( шаблон ) | ищет совпадение строки с предоставленным шаблоном в виде регулярного выражения. |
replace( поиск, замена ) | выполняет поиск и замену заданного текста в строке. |
search( текст ) | возвращает индекс указанного текста внутри строки. |
indexOf( текст, индекс ) | возвращает индекс первого появления текста, начиная с указанного. |
lastIndexOf( текст ) | возвращает индекс последнего появления указанного текста внутри строки. |
substr( индекс, длина ) | извлекает часть строки, начиная с указанного индекса и заданной длиной. |
slice( индекс, индекс ) | извлекает часть строки, начиная и заканчивая указанными индексами. |
split( разделитель ) | выполняет преобразование строки в массив строк, между которыми был указанный разделитель. |
Пример использования метода concat():
let hello = 'Привет ';
let world = 'Мир';
let helloWorld = hello.concat(world); // => 'Привет Мир'
Объекты браузера
Использование объектов браузера и их свойств - одна из самых полезных возможностей JavaScript. С помощью них можно как получать важные данные для сайта, так и управлять его поведением.
Список часто используемых свойств браузера:
Свойство | Описание |
history | предоставляет историю объекта Window. |
innerHeight | отображает внутреннюю высоту объекта окна. |
innerWidth | отображает внутреннюю ширину объекта окна. |
pageXOffset | отображает количество пикселей, на которые прокручена страница по горизонтали. |
pageYOffset | отображает количество пикселей, на которые прокручена страница по вертикали. |
document | возвращает объект html-документа. |
location | возвращает объект с данными об адресе страницы. |
name | устанавливает или возвращает имя окна. |
screen | возвращает объект с данными об экране пользователя. |
Пример использования свойства innerHeight:
window.innerHeight; // Отобразит высоту окна пользователя (800 например)
Наиболее распространенные функции браузера:
Функция | Описание |
setInterval( функция, промежуток ) | вызывает функцию через равные промежутки времени. |
setTimeout( функция, промежуток ) | вызывает одноразово функцию через заданный промежуток времени. |
clearInterval( интервал ) | отменяет интервальное выполнение функции, установленное методом setInterval(). |
clearTimeout( интервал ) | отменяет выполнение функции, установленное методом setTimeout(). |
window.open( параметры ) | открывает окно в браузере с заданными параметрами. |
window.print() | открывает окно для распечатки страницы. |
window.stop() | отменяет открытие окна. |
Пример использования метода setTimeout():
setTimeout(function(){
console.log('Прошло 3 секунды');
}, 3000);
// В консоли отобразится сообщение через 3000 мс, т.е. через 3 секунды
Обработка ошибок
В процессе выполнения кода возникают различные виды ошибок. В JavaScript существует шесть типов ошибок:
Ошибка | Описание |
EvalError | возникает, когда произошла ошибка в методе eval(). |
RangeError | указывает, находится ли число «вне диапазона». |
ReferenceError | указывает на то, что в коде есть неправильная ссылка. |
SyntaxError | указывает на неправильный синтаксис в коде. |
TypeError | указывает на возникновение ошибки, связанной с типом данных. |
URIError | указывает на возникновение ошибки в функции encodeURI(). |
Объектная модель документа (DOM)
Объектная модель документа описывает структуру кода веб-страницы. Существует несколько способов создания и изменения HTML-элементов, которые в JavaScript называются DOM-узлами.
Наиболее распространенные свойства DOM-узлов:
Свойство | Описание |
attributes | получает текущий список всех характеристик, связанных с элементом. |
baseURI | возвращает абсолютный базовый URL-адрес элемента. |
childNodes | возвращает список всех дочерних узлов элемента. |
firstChild | возвращает первый дочерний узел элемента. |
lastChild | возвращает последний дочерний узел элемента. |
nodeName | возвращает имя узла. |
nodeType | возвращает тип узла. |
nodeValue | устанавливает или возвращает значение узла. |
parentNode | возвращает родительский узел элемента. |
textContent | устанавливает или возвращает содержимое узла и его потомков. |
Пример использования свойства nodeName:
let app = document.getElementById('app'); // Обращаемся к узлу с id='app'
console.log(app.nodeName); // Получим имя узла 'DIV'
Популярные методы для манипулирования DOM-узлами:
Метод | Описание |
appendChild() | добавляет новый дочерний узел к элементу в качестве последнего. |
removeChild() | удаляет дочерний узел из элемента. |
replaceChild() | заменяет дочерний узел в элементе. |
normalize() | объединяет соседние узлы в элементе. |
isEqualNode() | определяет, равны ли два узла. |
isSameNode() | определяет, принадлежат ли два элемента одному и тому же узлу. |
Пример использования метода appendChild():
let newDiv = document.createElement('div'); // Создаем новый узел 'DIV'
let app = document.getElementById('app'); // Обращаемся к узлу с id='app'
app.appendChild(newDiv); // В элементе с id='app' появится пустой div
Комментарии (0)