Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Перейти на сайт->

Бесплатный Курс "Практика HTML5 и CSS3"

Освойте бесплатно пошаговый видеокурс

по основам адаптивной верстки

на HTML5 и CSS3 с полного нуля.

Начать->

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

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

Верстайте на заказ и получайте деньги.

Получить в подарок->

Бесплатный тренинг "PHP для Создания Сайтов: Введение"

Что нужно знать для создания PHP-сайтов?

Ответ здесь. Только самое важное и полезное для начинающего веб-разработчика.

Узнайте, как создавать качественные сайты на PHP всего за 2 часа и 27 минут!

Записаться бесплатно->

Бесплатный курс "Сайт-Визитка За 15 уроков"

Создайте свой сайт за 3 часа и 30 минут.

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

Вам останется лишь наполнить его нужной информацией и изменить дизайн (по желанию).

Получить в подарок->

Бесплатный курс "Основы HTML и CSS"

Изучите основы HTML и CSS менее чем за 4 часа.

После просмотра данного видеокурса Вы перестанете с ужасом смотреть на HTML-код и будете понимать, как он работает.

Вы сможете создать свои первые HTML-страницы и придать им нужный вид с помощью CSS.

Получить в подарок->

Бесплатный курс "Сайт на WordPress"

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

Получить в подарок->

Бесплатный курс "Основы работы с JavaScript"

Хотите изучить JavaScript, но не знаете, как подступиться?

После прохождения видеокурса Вы освоите базовые моменты работы с JavaScript.

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

Получить в подарок->

Воспламенитель Кода: Сайт-Визитка на CodeIgniter

Курс предназначен для тех, кто знает основы HTML и CSS.

Изучив его, Вы сможете разрабатывать гибкие и функциональные Сайты-Визитки с панелью администратора.

Все, что нужно для разработки Сайта-Визитки: от шаблона и до переноса на хостинг.

Подробнее->

JavaScript и jQuery с нуля

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

Изучив его, Вы сможете создавать более красивые и функциональные сайты.

104 видеоурока: от основ JavaScript до готовых решений на jQuery.

Подробнее->

Повелитель PHP: кратчайший путь к мастерству без толстых учебников.

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

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

Подробнее->

*Наведите курсор мыши для приостановки прокрутки.


JavaScript без jQuery: 10 советов

jQuery – отличная библиотека! Она пришла к нам в те времена, когда браузер IE6 был браузером номер один. В те времена было много сложностей и препятствий при работе с браузерами, что делало работу более чем утомительной. В такой ситуации библиотека jQuery была отличным инструментом чтобы добиться кроссбраузерности сайта.

С тех пор браузеры ушли далеко вперёд, что определённо развязывает нам руки при написании кода. Мы можем комфортно использовать все преимущества предоставляемые ES5, а так же в нашем арсенале есть наикрутейший HTML5 APIs, который значительно упрощает работу с DOM.

Разработчики сейчас находятся в ситуации, когда они могут выбирать, использовать ли им библиотеку jQuery, или же они могут вполне обойтись и без неё, не потеряв при этом в функциональности и производительности.

Не поймите меня неправильно – jQuery по прежнему остаётся отличной библиотекой, и в большинстве случаев вам действительно нужно будет использовать её. Тем не менее, для каких-то простых и маленьких вещей, вроде простой страницы с ограниченным JavaScript-взаимодействием, расширения для браузеров или мобильных сайтов, вы можете использовать чистый JS.

В этой статье будут описаны 10 советов, которые помогут вам в ваших стремлениях.

1. Ожидание готовности документа (Document Ready)

Правило номер 1: когда вы пишете код на jQuery, возьмите себе в привычку оборачивать его в $(document).ready(). Так вы всегда будете уверены что ваш документ и его DOM-структура полностью готовы для дальнейших манипуляций.

Без jQuery, вместо $(document).ready() можем использовать document.addEventListener('DOMContentLoaded'). Вот как это выглядит:

JS

// Создаём обработчик события DOMContentLoaded готовности всего
// документа и вызываем анонимную функцию.
// Затем вы можете обернуть весь ваш код в этой функции, заключив
// его в фигурные скобки. Как только загрузка страницы завершится,
// этот код сработает.

document.addEventListener('DOMContentLoaded', function () {

    // Приветствие нашего гавайского человечка срабатывает сразу же после загрузки страницы

    console.log('Aloha');
});

2. Выборка элементов

Раньше для выборки элементов мы могли полагаться лишь на id , class и имена тегов и jQuery для нас с вами был чем-то вроде спасателя, так как позволял осуществлять сложные выборки по селекторам CSS. С тех пор браузеры поймали эту фишку и ввели два важнейших API-метода - querySelector и querySelectorAll:

JS


// Мы можем использовать метод document.querySelector
// чтобы получить самый первый элемент, который в точности
// удовлетворяет указанным нами условиям
// Аргумент является по сути строкой, содержащей один
// или более CSS-селекторов

var lochNess = document.querySelector(".monsters");

console.log("It's from Scotland - " + lochNess.textContent);

// Мы также имеем возможность выбрать все элементы определённого
// типа или класса используя document.querySelectorAll
// Результатом будет возвращённый список узлов документа, которые
// соответствуют заданными нами параметрам

var scary = document.querySelectorAll(".monsters");

console.log("Hide and seek champions: ");

for (var i = 0; i  < scary.length; i++) {

    console.log(scary[i].innerHTML);

}

HTML


<ul>
    <li class="monsters">Nessy</li>
    <li class="monsters">Big foot</li>
    <li class="monsters">La chupacabra</li>
</ul>

3. Добавление и удаление отслеживания событий

Отслеживание событий – это фундаментальная вещь при создании любых веб-приложений. Раньше существовало два основных лагеря, которые подходили к вопросу отслеживания событий по-разному: это IE и все остальные. Однако сегодня мы просто используем addEventListener:

JS


var btn = document.querySelectorAll("button"),
list = document.querySelector("ul");

// Мы вызываем метод addEventListener по отношению
// к нашей цели (в данном случае это кнопка)
// Отслеживание событий запустится как только будет
// осуществлён клик по кнопке

btn[0].addEventListener("click", function () {

    // Когда клик по кнопке был осуществлён, мы хотим сделать 
    // доступным увеличение нашего списка
    // Для этого мы добавим отслеживание события hover
    // по списку.
    // Как только курсор будет наведён на список, будет вызвана
    // функция увеличения enlarge

    list.addEventListener("mouseover", enlarge);
});

// Для отключения зума, мы можем просто использовать 
// removeEventListener для удаления отслеживания события

btn[1].addEventListener("click", function () {

// Удаление отслеживания события не работает на
// анонимных функциях. Поэтому используйте именованные
// функции

    list.removeEventListener("mouseover", enlarge);
});

// Давайте создадим нашу увеличивающую функцию enlarge

var enlarge = function () {

    // Добавляем класс увеличения к ненумерованному списку

    list.classList.add("zoomed");

    // Когда курсор выходит за рамки списка, возвращаем 
    // нормальный размер, удаляя класс

    list.addEventListener("mouseout", function () {

        list.classList.remove("zoomed")

    });

};

// Теперь мы хотим добавить цвета именам, по кликая по ним

// Когда событие клика обнаружено на одном из элементов 
// списка, меняем его цвет на зелёный
// Мы можем добавлять отслеживание событий ко всему 
// родительскому объекту
// Т.е. нам не нужно добавлять отслеживание событий к
// каждому тегу <li>

list.addEventListener("click", function (e) {

    // Появление цвета у конкретного элемента списка
    // только после клика по нему

    e.target.classList.add('green');

});

HTML


    <button>Enable zoom</button>
    <button>Disable zoom</button>
    <br><br>

    Click on any of the names to color them green

    <ul>
        <li>Chewbacca</li>
        <li>Han Solo</li>
        <li>Luke</li>
        <li>Boba fett</li>
    </ul>

  

CSS


.green {
    color: green;
}

.zoomed {
    cursor: pointer;
    font-size: 23px;
}

4. Управление классами и атрибутами

Раньше управление классами и атрибутами элементов без jQuery было довольно неудобно. Однако всё изменилось с появлением свойства classList. И если вам нужно поуправлять атрибутами, то всё что вам нужно - это задать атрибут setAttribute

JS


var btn = document.querySelectorAll("button"),
div = document.querySelector("#myDiv");

btn[0].addEventListener("click", function () {

    // Получаем любой атрибут. Всё очень просто
    console.log(div.id);
});

// Element.classList хранит все классы элемента в форме DOMTokenList

var classes = div.classList;

btn[1].addEventListener("click", function () {

    console.log(classes);

});

btn[2].addEventListener("click", function () {

    // Поддерживается добавление и удаление классов
    classes.add("red");

});

btn[3].addEventListener("click", function () {

    // Вы так же можете выключать и включать классы с 
    //помощью toggle
    classes.toggle("hidden");

});

HTML


    <div id='myDiv' class="square"></div>
    <button>Display id</button>
    <button>Display classes</button>
    <button>Color red</button>
    <button>Toggle visibility</button>

CSS


.square {
width: 100px;
height: 100px;
margin-bottom: 20px;
border: 1px solid grey;
border-radius: 5px;
}

.hidden {
    visibility: hidden;
}

.red {
    background-color: red;
}

5. Получение и задание контента элемента.

Для этого в jQuery есть удобные методы text() и html(). Но вы так же можете использовать методы textContent и innerHTML эти методы уже достаточно давно существуют на чистом JS.

JS


var myText = document.querySelector("#myParagraph"),
btn = document.querySelectorAll("button");

// Мы запросто можем получить текст содержащийся в узле,
// а также текст всех его потомков

var myContent = myText.textContent;

console.log("textContent:  " + myContent);

// Когда используем метод textContent применительно к
// текстовой составляющей элемента, то он удаляет старый контент и
// заменяет его новым

btn[0].addEventListener('click', function () {
    
    myText.textContent = " Koalas are the best animals ";
    
});

// Когда нам нужно получить весь HTML-код узла, включая
// теги, мы можем использовать innerHTML

var myHtml = myText.innerHTML;

console.log("innerHTML:  " + myHtml);

// Чтобы изменить html, просто подключите новый контент
// Конечно же, мы не ограничены добавлением только лишь текста

btn[1].addEventListener('click', function () {
    
    myText.innerHTML = "<button> Penguins are the best animals </button>";
    
});

HTML


<p id="myParagraph"><strong> Which are the best animals? </strong></p>

<button>Koalas</button>
<button>Penguins</button>

6. Вставка и удаление элементов

Несмотря на то, что на jQuery это делается несколько проще, добавление или удаление DOM-элементов не является непосильной задачей для JavaScript. Вот как это делается на JS:

JS


var lunch = document.querySelector("#lunch");

// Во вкладке "Ланч" идёт описание нашего сегодняшнего ланча
// Давайте добавим туда чутка картошки фри

var addFries = function () {

// Сначала мы должны создать наш элемент и задать
// его содержимое (контент)

    var fries = document.createElement("div");
    fries.innerHTML = '≶li>≶h4> Fries ≶/h4>≶/li>';

    // После чего мы можем использовать appendChild>
    // для вставки. После чего наша картошка фри появится в списке
    // нашего ланча

    lunch.appendChild(fries);
};

// Теперь нам нужно добавить сыра до и после котлетки в нашем бургере.

var addCheese = function () {

    var beef = document.querySelector("#Beef"),

    topSlice = document.createElement("li"),
    bottomSlice = document.createElement("li");

    bottomSlice.innerHTML = topSlice.innerHTML = 'Cheese';

    // Вставляем верхний кусочек:
    // Берём родительский элемент котлетки (это сендвич), и 
    // юзаем на него insertBefore
    // Первым аргументом в методе insertBefore идёт то что мы
    // собираемся добавить
    // Вторым аргументом идет узел, перед которым нужно добавить новый элемент

    beef.parentNode.insertBefore(topSlice, beef);

    // Нижний кусочек:
    // Здесь мы немножко сфокусничаем!
    // Подключим следующий ближайший элемент в качестве второго аргумента 
    // метода insertBefore, таким образом мы вставим то что нам нужно,
    // там где мы этого хотим

    beef.parentNode.insertBefore(bottomSlice, beef.nextSibling);
};

var removePickles = function () {

// Наконец, мы получили возможность избавиться от маринованных огурчиков.
// И в этом опять-таки нам помог javascript!

var pickles = document.querySelector("#pickles");

if (pickles) {
    pickles.parentNode.removeChild(pickles);
}

};

// Вкусняшка!

var btn = document.querySelectorAll("button");
btn[0].addEventListener('click', addFries);
btn[1].addEventListener('click', addCheese);
btn[2].addEventListener('click', removePickles);

  

HTML


<button>Add fries to lunch</button>
<button>Add cheese to sandwich</button>
<button>Remove pickles</button>

<h3>My Lunch</h3>

    <ul id="lunch">
        <li><h4>My sandwich</h4></li>
        <li>Bread</li>
        <li id="pickles">Pickles</li>
        <li id="Beef">Beef</li>
        <li>Mayo</li>
        <li>Bread</li>
    </ul>

7. Проход по дереву элементов структуры DOM

Настоящие JS-джедаи знают, как много всего бывает спрятано в DOM. В сравнении с jQuery, обычное API DOM ограничено в функциональности при выборке родительских а также братских/сестринских элементов. Так или иначе, в вашем кармане есть множество различных способов, чтобы сверху донизу пройтись по DOM-дереву.

JS


var snakes = document.querySelector('#snakes'),
birds = document.querySelector('#birds');

snakes.addEventListener('click', function (e) {

// Для получения доступа к родителю конкретного дочернего
// элемента в древе DOM используется метод parentNode

var parent = e.target.parentNode;

console.log("Parent: " + parent.id);

// С другой стороны, вызов метода children позволяет
// получить все дочерние элементы выбранного объекта

console.log("Children: ");
var children = e.target.children;

// Этот кусок кода вернёт HTMLCollection (вид массива),
// так что мы можем получить доступ к каждому дочернему элементу
// объекта, если пройдёмся по массиву циклом

    for (var i = 0; i < children.length; i++) {

        console.log(children[i].textContent);

    }
});

birds.addEventListener('click', function (e) {

// Получаем ближайший братский элемент

var previous = e.target.previousElementSibling;

if (previous) {
    console.log("Previous sibling: " + previous.textContent);

}

var next = e.target.nextElementSibling;

if (next) {
    console.log("Next sibling: " + next.textContent);

}

// Так или иначе, чтобы получить все братские элементы в
// одном узле - это более сложная задача. Нам нужно взять
// каждый родительский элемент каждого ребёнка и затем исключить
// из него оригинальный элемент.  Делается это с помощью фильтра и
// вызова функции, которая проверяет каждый дочерний элемент один за одним.

console.log("All siblings: ");

Array.prototype.filter.call(e.target.parentNode.children, function (child) {
    if (child !== e.target) {
        console.log(child.textContent);
        }
    });

});

HTML


Click on the objects to see their parent and children elements
<div id="snakes">
        Snakes

    <ul id="venomous">
        Venomous
            <li>Cobra</li>
            <li>Rattlesnake</li>
    </ul>

    <ul id="non-venomous">
        Non venomous
            <li>Python</li>
            <li>Anaconda</li>
    </ul>

</div>

Click on any of the birds to see its siblings

<div>
    Birds
    <ul id="birds">
        <li>Flamingo</li>
        <li>Seagull</li>
        <li>Raven</li>
        <li>Dodo</li>
    </ul>
</div>

CSS


div {
    color: white;
    background-color: #93d0ea;
    font-family: sans-serif;
    width: 180px;
    text-align: center;
    padding: 10px;
    margin: 5px;
}

  

8. Обработка массивов

Некоторые из служебных методов, которые обеспечивает jQuery, теперь доступны с появлением ES5-стандартов. Для множественных ассоциативных массивов мы можем использовать forEach и map вместо их jQuery-аналогов each() и map(). Вот только будьте внимательны, есть между ними определённые отличия в аргументах и в возвращаемом по умолчанию значении this.

JS


var ninjaTurtles = ["Donatello", "Leonardo", "Michelangelo", "Raphael"];

// Цикл ForEach автоматически проходит по всему массиву

ninjaTurtles.forEach(function (entry) {
        console.log(entry);
});

// Метод map вызывает функцию на каждый элемент
// массива и создаёт новый массив с результатами

var lovesPizza = ninjaTurtles.map(function (entry) {

    return entry.concat(" loves pizza!");

});

console.log(lovesPizza);

9. Анимация

Благодаря jQuery, вы фактически можете анимировать всё, что угодно и как угодно, это поистине мощный инструмент! В случае когда вам нужно создать сложную анимацию для вашего проекта, без jQuery вам просто не обойтись.

Однако, благодаря чудесам современных CSS3-свойств, мы можем без проблем создать свою простейшую анимацию либо использовать специальные CSS-библиотеки как например Animate.css, позволяющую создавать и запускать анимации, просто добавляя или удаляя классы к тем или иным элементам страницы.

JS


var btn = document.querySelectorAll("button"),
circle = document.querySelector("#circle");

// Сначала нам нужно добавить класс для анимации нашего объекта
// чтобы библиотека смогла распознать его

circle.classList.add('animated');

// Мы пройдёмся циклом по всем нашим кнопкам и добавим отслеживание
// событий к каждой из них

for (var i = 0; i < btn.length; i++) {

    // Чтобы определить каждую анонимную функцию мы будем
    // использовать переменную i

          (function (i) {

              btn[i].addEventListener('click', function () {

                  // Чтобы начать анимацию мы должны добавить определённый
                  // класс объекту
                  // В нашем случае мы храним имена классов в атрибуте data-animation в каждой кнопке

                  var animation = btn[i].getAttribute('data-animation');

                  circle.classList.add(animation);

                  // Чтобы заставить всё это работать больше одного раза 
                  // нам нужно будет удалять класс после того, как анимация
                  // будет закончена

                  window.setTimeout(function () {

                      circle.classList.remove(animation);

                  }, 1000);

              });

          }(i));
      }

HTML


<button data-animation="bounce">Bounce</button>
<button data-animation="pulse">Pulse</button>
<button data-animation="fadeInLeftBig">Fade in</button>
<button data-animation="fadeOutRightBig">Fade out</button>
<button data-animation="flip">Flip</button>
<div id="circle"></div>

CSS

body {
    text-align: center;
}

#circle {
    border-radius: 50%;
    margin: 50px auto;
    width: 50px;
    height: 50px;
    background-color: #93d0ea;
}

10. AJAX

AJAX - это одна из тех технологий, которая раньше приводила к кроссбраузерному беспорядку. Слава богам, что теперь мы можем использовать один и тот же код где бы то ни было.

Но не всё так гладко и цветочно, как хотелось бы, AJAX-запросы написанные с XMLHttpRequest всё ещё остаются довольно громоздкими, поэтому лучше бы их оставить на совесть библиотек.

Но! Вам не нужно подключать всю jQuery-библиотеку только ради AJAX. Вы можете использовать одну из доступных лёгких библиотек. Вот как можно писать AJAX-запросы, используя маленькую библиотеку запросов

JS


// Простейший пример регистрирует тело нашей url
// страницы в консоль

// Можно сделать это вручную с помощью GET-запросов,
// но это несколько утомительно

var request = new XMLHttpRequest();
request.open('GET', 'http://tutorialzine.com/misc/files/my_url.html', true);

request.onload = function (e) {
    if (request.readyState === 4) {

        // Проверяем успешность GET-запроса
        if (request.status === 200) {
            console.log(request.responseText);
        } else {
            console.error(request.statusText);
            }
        }
    };

    // Ловим ошибки

    request.onerror = function (e) {
        console.error(request.statusText);
    };

    request.send(null);

    // Используем небольшую библиотеку, такую как Reqwest, что в значительной степени облегчит вам работу

    reqwest({
        url: 'http://tutorialzine.com/misc/files/my_url.html',
        method: 'get',
        error: function (err) {
        },
        success: function (resp) {
            console.log(resp);
        }
    });

Итог

Если вы стремитесь создавать быстрозагружающиеся на любых устройствах страницы и приложения, удобные для пользователей, то минималистичный чистый код без каких либо дополнительных тяжеловесных библиотек - это ваш выбор.

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

Однако существует некоторое количество рекомендаций и методов, о которых мы говорили сегодня и о которых стоит знать. В некоторых случаях они действительно будут полезным и помогут действительно сэкономить определённое количество трафика. Попробуйте в следующий раз писать на чистом JS, возможно вам больше и не понадобится ничего другого!

Материал подготовил Денис Малышок специально для сайта CodeHarmony.ru

P.S. Присмотритесь к премиум-урокам по различным аспектам сайтостроения, включая JavaScript, jQuery и Ajax, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить практические навыки веб-программирования:

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!


Смотрите также:

PHP: Получение информации об объекте или классе, методах, свойствах и наследовании

PHP: Получение информации об объекте или классе, методах, свойствах и наследовании

CodeIgniter: жив или мертв?

CodeIgniter: жив или мертв?

Функции обратного вызова, анонимные функции и механизм замыканий

Функции обратного вызова, анонимные функции и механизм замыканий

Применение функции к каждому элементу массива

Применение функции к каждому элементу массива

Слияние массивов. Преобразование массива в строку

Слияние массивов. Преобразование массива в строку

Деструктор и копирование объектов с помощью метода __clone()

Деструктор и копирование объектов с помощью метода __clone()

Эволюция веб-разработчика или Почему фреймворк - это хорошо?

Эволюция веб-разработчика или Почему фреймворк - это хорошо?

Магические методы в PHP или методы-перехватчики (сеттеры, геттеры и др.)

Магические методы в PHP или методы-перехватчики (сеттеры, геттеры и др.)

PHP: Удаление элементов массива

PHP: Удаление элементов массива

Ключевое слово final (завершенные классы и методы в PHP)

Ключевое слово final (завершенные классы и методы в PHP)

50 классных сервисов, программ и сайтов для веб-разработчиков

50 классных сервисов, программ и сайтов для веб-разработчиков

Наверх