Зачем учить javascript и где он пригодится

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsCascading DropdownDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

Выбор элементов

Одна из самых важных областей применения функциональности jQuery — это выбор элементов DOM. В качестве примера ниже показано, как осуществить выбор нечетных элементов img:

Чтобы выбрать элементы, вы просто передаете селектор функции $(). Библиотека jQuery поддерживает все множество CSS-селекторов, а также некоторые дополнительные селекторы, которые обеспечивают удобные возможности детализированного управления процессом выбора элементов. В данном примере используется псевдоселектор :odd, который выбирает нечетные элементы, соответствующие основной части селектора (в данном случае это селектор img, который выбирает все элементы <img>).

В случае использования селектора :odd отсчет элементов начинается с нуля, т.е. первый элемент является четным. Поначалу это может сбивать вас с толку. Наиболее полезные селекторы jQuery перечислены в таблице ниже:

Я назвал эти селекторы наиболее полезными, поскольку они определяют функциональность, обеспечить которую с помощью селекторов CSS было бы нелегко.

В jQuery определены также селекторы, позволяющие выбирать элементы в соответствии с их типом:

<select>
    <option>Option<option/>
</select>

Стили слайдера

Для стилизации слайдера, добавим чучуть правил в файл стилей.

/* Задаем сброс обтекания */
.clear {
	margin-top: -1px;
	height: 1px;
	clear:both;
	zoom: 1;
}		
/* Slider */
.slider {
	/* Ширина контейнера */
	width: 900px;
	/* Внешние тступы сверху и снизу */
	margin: 50px auto;
	/* Внутренние отступы для ссылок navy */
	padding: 0 30px;
	/* Позиционирование */
	position: relative;
}
/* Двойной клик по кнопкам вперед/назад вызывает выделение всех элементов слайдера,
поэтому предотвращаем это */
.slider::-moz-selection { background: transparent; color: #fff; text-shadow: none; }
.slider::selection { background: transparent; color: #fff; text-shadow: none; }

.slide-list {
	position: relative;
	margin: 0;
	padding: 0;
	/* Скроем то что выходит за границы */
	overflow: hidden;
}
.slide-wrap {
	position: relative;
	left: 0px;
	top: 0;
	/* максимально возможная ширина обертки слайдера */
	width: 10000000px;
}
.slide-item {
	/* Ширина слайда */
	width: 280px;
	/* Внутренние отступы */
	padding: 10px;
	/* Обтекание */
	float: left;
}
.slide-title {
	/* Шрифт */
	font: bold 16px monospace;
	/* Указываем, что элемент блочный */
	display: block;
}

И еще не маловажные стили для кнопок навигации вперед/назад и старт/пауза

/* навигация вперед/назад */
.navy {
	/* абсолютное позиционирование */
	position: absolute;
	top: 0;
	z-index: 1;
	height: 100%;
	/* ширина элементов */
	width: 30px;
	cursor: pointer;
}
.prev-slide {
	left: 0;
	background: #dbdbdb url(bg/left-arrow.png) 11px 40% no-repeat;
}
.next-slide {
	right: 0;
	background: #dbdbdb url(bg/right-arrow.png) 13px 40% no-repeat;
}
.navy.disable {
	background: #dbdbdb;
}
/* навигация старт/пауза */
.auto {
	width: 7px;
	height: 11px;
	cursor: pointer;
	margin: 10px auto;
}
.play {
	background: url(bg/play.png) center no-repeat;
}
.pause {
	background: url(bg/pause.png) center no-repeat;
}

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

More

Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyCenter Button in DIVTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarShow/Force ScrollbarDevice LookContenteditable BorderPlaceholder ColorText Selection ColorBullet ColorVertical LineDividersAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsJS String LengthJS ExponentiationJS Default ParametersGet Current URLGet Current Screen SizeGet Iframe Elements

Как работает JavaScript

Любое действие пользователя на странице порождает событие. Программирование на JavaScript — это обработка событий. Вот как выглядит обычный сценарий:

Пользователь что-то сделал на странице↓В браузере сработало событие↓Запустился JavaScript-код, который назначен на событие↓JavaScript изменил что-то на странице.

Программист пишет обработчик только для тех событий, на которые стоит реагировать:

Пользователь кликнул мышью↓Сработало событие onclick↓Запустилась функция changePhoto↓В галерее сменилось фото

Пользователь нажал клавишу↓Сработало событие onkeydown↓Программист не назначил обработчик события↓Ничего не произошло

Не все события — это реакция на действие пользователя. Например, «приветственные» окна сайт показывает после события onload. Оно само срабатывает после полной загрузки страницы

Объект Slider

Для хранения информации и действий слайдера мы будем использовать объект. Самая важная концепция слайдера — индекс. Нам нужно знать индекс любого заданного изображения в любое время. Индекс позволяет управлять выводом нужного изображения при генерации события.

Ниже приводятся список всех свойств и методов объекта и их краткое описание:

• imgs: селектор для всех изображений;
• imgCount: количество выбранных изображений;
• navNext: кнопка «следующий»;
• navPrev: кнопка «предыдущий»;
• bullets: селектор всех кнопок навигации;
• thumbs: селектор всех миниатюр навигации;
• captions: селектор всех названий;
• getCurrentIndex(): получаем индекс текущего изображения в любое время;
• go(index): переход к изображению с заданным индексом;
• next(): переход к следующему изображению;
• prev(): переход к предыдущему изображению;
• init(): устанавливаем высоту и ширину слайдшоу и вычисляем размеры динамических элементов.

/* Объект Slider
-----------------------------------------------*/
var Slider = function(){ 

this.imgs = wrapper.find('div.image');
this.imgCount = (this.imgs.length) - 1; // Индекс соответствия
this.navPrev = wrapper.find('a.prev');
this.navNext = wrapper.find('a.next');
this.bullets = container.find('.nav a');
this.thumbs = container.find('.nav img.thumb');
this.captions = this.imgs.find('p'); 

this.getCurrentIndex = function(){ // Индекс
	return this.imgs.filter('.current').index();
}; 

this.go = function(index){ // Смена изображений 
	this.imgs
		.removeClass('current')
		.fadeOut(opt.fadeSpeed)
		.eq(index)
		.fadeIn(opt.fadeSpeed)
		.addClass('current');
	this.bullets
		.removeClass('current')
		.eq(index)
		.addClass('current');
	this.thumbs
		.removeClass('current')
		.eq(index)
		.addClass('current');
}; 

this.next = function(){
	var index = this.getCurrentIndex();
	if (index < this.imgCount) {
		this.go(index + 1); // Переходим к следующему
	} else {
		this.go(0); // Если последнее - то переходим к первому
	}
}; 

this.prev = function(){
	var index = this.getCurrentIndex();
	if (index > 0) {
		this.go(index - 1); // Переходим к предыдущему
	} else {
		this.go(this.imgCount); // Если первое, то переходим к последнему
	}
};	 

this.init = function(){ // Init
	wrapper
		.width(opt.width)
		.height(opt.height); /* Устанавливаем высоту и ширину */

	this.imgs.hide().first().addClass('current').show(); /* Устанавливаем текущее изображение */
	this.bullets.first().addClass('current');
	this.thumbs.first().addClass('current');

	// Размеры для миниатюр и названий
	var padding = wrapper.css('padding-left').replace('px', '');
	var captionsPadding = this.captions.css('padding-left').replace('px', '');
	nav.width(opt.width);
	if (opt.thumbs === true) { // Миниатюры
		var thumbBorder = this.thumbs.css('border-left-width').replace('px', '');
		var thumbMargin = this.thumbs.css('margin-right').replace('px', '');
		var thumbMaxWidth = opt.width/opt.row;
		this.thumbs.width( (thumbMaxWidth - (thumbMargin * 2)) - (thumbBorder * 2) );
	}
	this.captions // Названия
		.width(opt.width - (captionsPadding * 2) + 'px')
		.css('margin-bottom', padding + 'px');
	this.navNext.css('margin-right', padding + 'px');
    }; 

};

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

var slider = new Slider();
slider.init();

UX and Accessibility

Before using a slideshow, please think carefully about its role on your page. Let’s look at how a slideshow can ruin the user experience and accessibility of your site if you’re not careful.

The slideshow can hide critical content

If something is a priority on your site, it shouldn’t be hidden in a slideshow. You can’t depend on people to see a given slide under ideal circumstances, let alone when accessibility concerns come into play.

According to research at the University of Notre Dame, only 1.07% of people clicked on a feature in a slideshow, and out of that already small fraction of people, 3% or fewer clicked on any individual slide besides the first one. This example shows how it can be dangerous to depend on a slideshow for critical content.

The user can get confused about the main purpose of the site

This is especially a problem with big homepage slideshows. If you can’t decide what to show the user, how can you expect the user to decide what to do? (Tweet This)

Your site should have a clear and obvious path to whatever the user needs to do, and if the slideshow gets in the way of that, it might be time to revisit the page’s strategy.

WiderFunnel, a conversion optimization firm, tested the effectiveness of slideshows and came to the following conclusion:

It’s worth reading the detailed write-up of their results if you get a chance.

В сторону: jQuery-плагины — просто такСкопировать ссылку

Я:

Ответ:

Я недавно работал над проектом и узнал о fitText.js. Я решил включить его в свой код, но потом заметил, что для него требуется jQuery.

Хм-м. Зачем?

Этот проект использует следующие методы jQuery:

1. (над производительностью никто особенно не задумывался)

Собственно, вот код проекта:

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

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

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

используется для установки значений, так что тут всего лишь нужно задать стили:

прикрепляет обработчик события (если вы хотите поддержку в IE8, то нужно еще включить ):

На самом деле, я бы пошел еще дальше и хранил бы функции ресайза в массиве, и во время операции изменения размера проходил бы по массиву, исполняя все эти функции.

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

Моя тирада скоро закончится: еще меня убивает, когда я вижу полифил, которому требуется jQuery — но я признаю и контраргумент: чрезвычайная распространенность jQuery, наверное, может оправдать то, что столько проектов пишется с зависимостью от нее.

Step 5: Play, Pause and Stop the slideshow

The final touch is to add three buttons which will play, pause and stop the slideshow. This will involve creating a function which will accept the mode as a parameter and assign it to a variable. Inside the startSlideshow() function the value of this variable will be checked using else if loops and accordingly the action will happen. To make things more professional the pause and stop buttons will be disabled when the page loads, after pressing the play button the other two buttons will be enabled and the play button will be greyed out. Clicking the Pause button will enable and change the value of Play button to Resume. Clicking Stop will set the value of the Resume button to play, enable it and disable itself and the Pause button. The final code is here

<html>
<head>
<title>Simple Javascript Slideshow</title>
<script type="text/javascript">
var i = 0, imgsrc = new Array(), preload = new Array();
imgsrc="photos/photo1.jpg";
imgsrc="photos/photo2.jpg";
imgsrc="photos/photo3.jpg";
imgsrc="photos/photo4.jpg";
imgsrc="photos/photo5.jpg";
imgsrc="photos/photo6.jpg";
for (var j=0;j<imgsrc.length;j++)
{
preload = new Image;
preload.src = imgsrc;
}
function mode(param)
{
smode=param;
}
function startSlideshow()
{
if(smode=="play")
{
document.getElementById("play").disabled="disabled";
document.getElementById("pause").disabled="";
document.getElementById("stop").disabled="";
document.getElementById("slideshow").src=imgsrc;
i++;
setTimeout("startSlideshow()",1000);
}
else if(smode=="pause")
{
document.getElementById("pause").disabled="disabled";
document.getElementById("play").disabled="";
document.getElementById("play").value="Resume";
}
else if(smode=="stop")
{
document.getElementById("play").disabled="";
document.getElementById("play").value="Play";
document.getElementById("pause").disabled="disabled";
document.getElementById("stop").disabled="disabled";
document.getElementById("slideshow").src=imgsrc;
i=0;
}
if(i==imgsrc.length)
{
i=0;
}
}
</script>
</head>
<body>
<img id="slideshow" src="photos/photo1.jpg" />
<br />
<input id="play" type="button" value="Play" onclick="mode('play');startSlideshow();" />
<input id="pause" type="button" value="Pause" disabled="disabled" onclick="mode('pause');startSlideshow();" />
<input id="stop" type="button" value="Stop" disabled="disabled" onclick="mode('stop');startSlideshow();" />
</body>
</html>

See a demo of this Simple Javascript Slideshow. Download the Javascript Slideshow

Создаем слайд-шоу на JavaScript для сайта: djshuric — LiveJournal

Приступаем к реализации.

Шаг 1. Для начала нам понадобятся рисунки, которые будут включены в слайд-шоу. В примере мы будем использовать три рисунка. Подготавливаем изображения, одинаковые по размеру в формате GIF. Названия могут быть любые, мы назовем по порядку slide1, slide2, slide3. Если у Вас есть интересные рисунки разных размеров, Вы легко можете подогнать под одну величину в программе Photoshop или ACDSee.

Шаг 2. Далее нам необходимо выполнить предварительную загрузку рисунков. Так как мы используем JavaScript, и хотим, чтобы рисунки отображались без задержек, то прежде, чем отобразить рисунки, необходимо загрузить их в кэш.

<head><script type=»text/javascript»><!—var image1=new Image()image1.src=»/slide1.gif»var image2=new Image()image2.src=»/slide2.gif»var image3=new Image()image3.src=»/slide3.gif»//—> </script> </head>

Мы создали три экземпляра объекта Image (slide1.gif, slide2.gif и slide3.gif — наши изображения), каждый из которых ссылается на рисунок, составляющий слайд-шоу. Таким образом, рисунки загружаются в кэш и становятся доступными для отображения в любое время

Обратите внимание, что весь код включен в область

Шаг 3. Добавим HTML код для отображения первого рисунка из слайд-шоу.

<body><img src=»/slide1.gif» name=»slide» width=450 height=281></body>

Обратите внимание, что мы задали значение атрибуту «name» нашего рисунка. Таким образом, с помощью JavaScript мы сможем манипулировать рисунком (slide1.gif — название первого нашего рисунка, width=400 height=281 — размеры рисунков)

Шаг 4. Теперь напишем JavaScript скрипт, который будет обращаться к объекту Image и периодически изменять значение его атрибута «src», создавая, таким, образом, слайд-шоу. Код скрипта:

<script type=»text/javascript»><!—var step=1function slideit(){if (!document.images)returndocument.images.slide.src=eval(«image»+step+».src»)if (step<3)step++elsestep=1setTimeout(«slideit()»,2500)}slideit()//—> </script>

Основная строка в этом скрипте следующая: document.images.slide.src=eval(«image»+step+».src»)В левой части строки мы получаем доступ к атрибуту «src» объекта Image, который мы назвали «slide». В правой части строки мы динамически устанавливаем путь к новому источнику рисунка, таким образом изменяя рисунок. Три возможных источника:

image1.src image2.src image3.src 

Шаг 5. 

Соберем теперь весь код в одно целое. Таким образом, мы создали простое слайд-шоу на JavaScript

Обратите внимание, результат из Шага 2 мы вставляем между тегами . Шаг 3 и Шаг 4 сливаем воедино и вставляем между тегами , в то место сайта, где должно отображаться слайд-шоу

<html><head><script type=»text/javascript»><!—var image1=new Image()image1.src=»/slide1.gif»var image2=new Image()image2.src=»/slide2″var image3=new Image()image3.src=»/slide3.gif»//—></script></head><body><img src=»/slide1.gif» name=»slide» /><script><!—var step=1function slideit(){if (!document.images)returndocument.images.slide.src=eval(«image»+step+».src»)if (step<3)step++elsestep=1setTimeout(«slideit()»,2500)}slideit()//—> </script> </body> </html>

jQuery-анимации против CSS-анимаций и JavaScript-анимацийСкопировать ссылку

На самом деле это никакое не соревнование. CSS выигрывает. Анимации, для которых используется CSS, вычисляются на видеокарте. В анимациях на JavaScript добавляется еще один уровень расчетов — просто потому, что там есть JavaScript.

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

Джейк Арчибальд подготовил отличные слайды, которые показывают проблему — не сделает анимацию плавной, и достаточно скоро начнет пропускать кадры:

Кроме того, CSS-анимации проходят через тот же таймер, что и  — его мы и хотим использовать.

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

А вот если вы просто сделаете , анимация CSS-класса выполнит плавный переход положения левой точки элемента. И если вы точно знаете, что это только значение слева, можно использовать аппаратное ускорение, выполнив с .

Ну а как же, слышу я ваш крик, как же вызов функции после окончания анимации? Это тоже можно. Хотя синтаксис немножко противный:

Обратите внимание, что в строчная…

Пара милых людей в Твиттере показали мне своего рода полифил для jQuery, который дополняет функцию в том случае, если в браузере доступны CSS-анимации.

Еще есть отдельный плагин Transit, который дает вам возможность писать CSS-анимации на JavaScript. Приятный момент для меня — поддержка чейнинга. Но так он работает только с CSS-анимациями, для этого требуется IE10 или выше.

Отсюда у меня возникает вопрос: почему этот плагин в обязательном порядке требует jQuery?

Вывод:

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

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

Также рекомендую:

• Основы работы с SVG на JavaScript
• Javascript пинг понг создаём игру с использованием canvas
• Canvas HTML. Основы создания фигур на javascript
• Как сделать простой слайдер на чистом JavaScript