Web Мастерская»Блог

Сообщество Web Мастеров. Тут собрано всё, чтобы написать свой первый сайт, запустить его в Интернет и поддерживать его в течении всей его работы.

Как в JS / jQuery сделать неизменную переменную?

В стандартной JavaScript и jQuery нет понятия «константной» переменной, как в языках программирования, таких как Java или C++. Однако есть несколько способов, которые помогут достичь аналогичного эффекта:

Способ 1: Использовать ключевое слово const


Синтаксис ES6 (ECMAScript 2015) ввёл ключевое слово const, которое позволяет объявлять переменные, которые не могут быть повторно определены:
const MY_CONSTANT = 'This is a constant';
console.log(MY_CONSTANT); // This is a constant

MY_CONSTANT = 'New Value'; // Будет ошибка: Assignment to constant variable.

Способ 2: Использовать IIFE (Immediately Invoked Function Expression)


Если нужно объявить постоянную переменную в локальном контексте, можно использовать немедленно вызываемую анонимную функцию:
(function () {
    var CONSTANT_VALUE = 'Some Constant Value';
    console.log(CONSTANT_VALUE); // Some Constant Value
})();

// Попытка доступа извне невозможна:
console.log(CONSTANT_VALUE); // ReferenceError: CONSTANT_VALUE
...

Как проверить событие: "window.onload"

Для проверки события: window.onload можно использовать: document.readyState:
if (document.readyState == 'complete') {
	// Код JS
};
...

Как соединить два массива в один в JavaScript

Для соединения двух массивов будем использовать метод concat(), чьё предназначение: Вернуть новый массив, состоящий из массива, котором он был вызван, соединённого с другими массивом.

Допустим у нас есть два массива:
const first  = [1, 2, 3];
const second = [4, 5, 6];

Делаем так:
const common = first.concat(second);

Теперь common содержит в себе массив, состоящий из двух массивов:
[1, 2, 3, 4, 5, 6]
...

Cannot read properties of undefined (reading 'querySelector')

Ошибка: Cannot read properties of undefined (reading 'querySelector') говорит о том, что метод: querySelector пытается обратиться к элементу, которого не существует.

Возможные решения:
  • Убедитесь, что элемент, к которому обращаетсь, существует, на самом деле.
  • Расположите JavaScript в нижнюю часть Вашего документа.
...

Карусель фотографий

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

jQuery:
var carouselID = 1, change = 8000;

function carouselStart() {
	if ($('div[data-carousel="carousel"]').length < 1) {
		return false;
	};

	$('div[data-carousel="carousel"]').each(function() {
		$(this).removeAttr('data-carousel').attr('id', 'carousel_' + carouselID);
		carousel('#carousel_' + carouselID);
		carouselID++;
	});
};

$(() => {
	carouselStart();
	window.setInterval(carouselStart, 3000);
});

function carousel(carouselID) {
	var $slr, $sls, interval, $selectors, $btns, currentIndex, nextIndex;
	var cycle = index => {
		var $currentSlide, $nextSlide, $currentSelector, $nextSelector;
		nextIndex        = index !== undefined ? index : nextIndex;
		$currentSlide    =
...