Сразу отмечу — я люблю библиотеки jQuery и jQuery UI горячей конструктивной любовью, поскольку они во многих случаях весьма облегчают жизнь веб-разработчика. Однако, в последнее время появилась целая армия молодых дарований, которые не просто злоупотребляют этой библиотекой, а целенаправленно погружаются в пучину игнорирования его прародителя — чистого javascript.
Речь идет о юношах, которые монтируют целый каскад анимированных меню, дропдаунов, попапов и слайдеров из jQuery на сайт только потому, что «это круто» и «я не знаю, как по другому, в видеоуроке так было». При этом вся эта кухня навешена настолько неграмотно, что в итоге страничка прилично подтормаживает, а консоль пестрит угрожающими сообщениями об ошибках. Встречал я парней, которые писали код исключительно интуитивно, то есть копипастя куски кода из разных примеров и вставляя их на свой сайт, методом тыка и такой-то матери пытались его оживить, совершенно при этом не понимая базовых основ программирования. У некоторых даже получался какой-то результат.
Очевидно, что злоупотребление фреймворками и их бездумное использование приводит к глубокому непрофессионализму, поэтому данной статьей я хочу познакомить начинающих любителей фреймворочного псевдопрограммирования с классическим стилем написания лаконичных и функциональных программ на javascript.
Очень надеюсь, что пример кода ниже добавит начинающим веб-разработчикам понимание процесса правильного написания кода и повысит интерес к настоящему программированию.
Поскольку кроме своей основной работы веб-программистом я еще и преподаю по выходным введение в программирование для детей в небольшом учебном центре, то в качестве темы для одного из уроков я решил взять создание простейшего слайдера для сайта, который перелистывает картинки влево-вправо с помощью кнопок и по тайм-ауту.
Работа эта имела следующие учебные цели:
Пример в работе можно посмотреть здесь
Работа была успешно выполнена с группой школьников в возрасте 11-14 лет. Код был предоставлен им сразу (поскольку молодежь почему-то крайне медленно бьет тексты на клавиатуре, совершая массу синтаксических ошибок), с подробными комментариями принципа его действия. Было также предложено самостоятельно поменять размер и оформление элементов слайдера, создать массив своих картинок для отображения, а также посмотреть, что будет, если имя файла картинки в массиве заменить на http-ссылку картинки и объяснить увиденное.
Речь идет о юношах, которые монтируют целый каскад анимированных меню, дропдаунов, попапов и слайдеров из jQuery на сайт только потому, что «это круто» и «я не знаю, как по другому, в видеоуроке так было». При этом вся эта кухня навешена настолько неграмотно, что в итоге страничка прилично подтормаживает, а консоль пестрит угрожающими сообщениями об ошибках. Встречал я парней, которые писали код исключительно интуитивно, то есть копипастя куски кода из разных примеров и вставляя их на свой сайт, методом тыка и такой-то матери пытались его оживить, совершенно при этом не понимая базовых основ программирования. У некоторых даже получался какой-то результат.
Очевидно, что злоупотребление фреймворками и их бездумное использование приводит к глубокому непрофессионализму, поэтому данной статьей я хочу познакомить начинающих любителей фреймворочного псевдопрограммирования с классическим стилем написания лаконичных и функциональных программ на javascript.
Очень надеюсь, что пример кода ниже добавит начинающим веб-разработчикам понимание процесса правильного написания кода и повысит интерес к настоящему программированию.
Поскольку кроме своей основной работы веб-программистом я еще и преподаю по выходным введение в программирование для детей в небольшом учебном центре, то в качестве темы для одного из уроков я решил взять создание простейшего слайдера для сайта, который перелистывает картинки влево-вправо с помощью кнопок и по тайм-ауту.
Работа эта имела следующие учебные цели:
- показать детям принцип построения объекта;
- изучить на примере работу индексного массива;
- познакомить в первом приближении с указателем this;
- показать пример работы с функцией setInterval().
Полный код примера
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Урок 6. Пример объектно-ориентированного подхода.</title>
<meta charset="utf-8">
</head>
<style>
#main {
position:relative;
margin: 100px auto;
padding: 5px;
width: 660px;
height:360px;
background-color: silver;
border: 5px solid grey;
border-radius:15px;
}
#scr {
margin:20px auto;
width: 600px;
height: 320px;
margin-top:20px;
background-color: white;
background-size:cover;
border: 2px solid black;
border-radius:10px;
}
button {
position: absolute;
top: 150px;
width: 25px;
height: 70px;
font: 12pt arial,tahoma,sans-serif;
text-align: center;
}
.left {
left:5px;
}
.right {
right:5px;
}
</style>
<script>
var slider = {
slides:['ch01.jpg','ch02.jpg','ch03.jpg','ch04.jpg','ch05.jpg'],
frame:0, // текущий кадр для отбражения - индекс картинки из массива
set: function(image) { // установка нужного фона слайдеру
document.getElementById("scr").style.backgroundImage = "url("+image+")";
},
init: function() { // запуск слайдера с картинкой с нулевым индексом
this.set(this.slides[this.frame]);
},
left: function() { // крутим на один кадр влево
this.frame--;
if(this.frame < 0) this.frame = this.slides.length-1;
this.set(this.slides[this.frame]);
},
right: function() { // крутим на один кадр вправо
this.frame++;
if(this.frame == this.slides.length) this.frame = 0;
this.set(this.slides[this.frame]);
}
};
window.onload = function() { // запуск слайдера после загрузки документа
slider.init();
setInterval(function() { // ставим пятисекундный интервал для перелистывания картинок
slider.right();
},5000);
};
</script>
<body>
<div id="main">
<button class="left" onclick="slider.left();"><</button>
<div id="scr"></div>
<button class="right" onclick="slider.right();">></button>
</div>
</body>
</html>
Пример в работе можно посмотреть здесь
Работа была успешно выполнена с группой школьников в возрасте 11-14 лет. Код был предоставлен им сразу (поскольку молодежь почему-то крайне медленно бьет тексты на клавиатуре, совершая массу синтаксических ошибок), с подробными комментариями принципа его действия. Было также предложено самостоятельно поменять размер и оформление элементов слайдера, создать массив своих картинок для отображения, а также посмотреть, что будет, если имя файла картинки в массиве заменить на http-ссылку картинки и объяснить увиденное.