Скрипти в HTML5

408

Від автора: справа в тому, що нова версія мови розмітки принесла з собою багато нових можливостей, деякі з них частково можуть замінити собою скрипти. Давайте розглянемо кілька таких прикладів, як скрипти в html5 замінюються новими можливостями.

Я одразу хотів би сказати, що зазвичай під скриптами розуміють в сайтобудуванні те, що написано на мові javascript. Зокрема, з допомогою бібліотеки jQuery створюється дуже багато скриптів. Вони і далі будуть продовжувати утворюватися, але все ж html5 приніс деякі нововведення.

Валідація форм

Форму html, безсумнівно, можна зробити дуже красивою і функціональною, але раніше в цій мові не існувало можливості для її перевірки. Така фішка була б дуже до речі, тому що без цього доводиться вдаватися до допомоги того ж javascript.

Що ж, в html5 стан справ істотно змінилося, з’явилося відразу кілька нових атрибутів, завдяки яким стала можлива валідація форми, причому відразу на стороні користувача, без необхідності передавати дані серверу.

Мені здається, це величезний плюс такої валідації. У чому ж вона полягає?

Нові поля для введення. Наприклад, input type = “email”. В це поле ви не зможете вписати що завгодно, насправді. Браузер перевірить, чи є у введеному значенні значок @. Якщо ні, відправка форми просто не буде здійснена.

Атрибут required. Варто сказати, що це порожній атрибут і його варто писати тільки тих полях, які обов’язкові для заповнення. Наприклад, на своєму сайті ви робите форму для реєстрації, і поле логіну потрібно зробити обов’язковим. Відповідно, дописуємо йому у параметри – required, і тепер браузер не пропустить людини далі до тих пір, поки він не заповнить відповідне поле.

Атрибут pattern. Мабуть, сама потужна можливість. За допомогою цього атрибута ви можете задати список символів, які допустимо вводити в поле. Наприклад, якщо у вас є поле для введення телефону, непогано було б заборонити вводити в нього будь-які літери, а тільки цифри і знак +(можливо). Завдяки pattern це можна реалізувати.

Згортання, розгортання інформації

Раніше подібні трюки можливо було зробити тільки скриптом, сьогодні ж з’явилася можливість робити це на чистому HTML. Зокрема, у ньому з’явився тег details, його вміст ви можете вставити будь-які елементи. При цьому їх не буде видно на сторінці, але там буде напис, клікнувши по якій наше вміст все ж з’явиться.

Звичайно, поки по функціональності це сильно поступається того, що можна було б зробити на скриптах. Зокрема, поява буде відбуватися різко, а не плавно. Але ж все одно, з’явилася така можливість!

Елемент Canvas

Canvas – це, можна сказати, окрема технологія, яка теж з’явилася в html5. Це парний тег, в якому можна на мові JavaScript створювати малюнки та анімацію. Насправді на canvas сьогодні вже створюють навіть ігри. Можливо, вони складуть серйозну конкуренцію програм на Flash.

Малювання в Canvas потрібно вивчати окремо, я вже бачив багато хороших ігор, створених за рахунок html5 і цього елемента.

Скрипти в HTML5

Рис. 1. Такі зображення можна малювати в canvas.

Вставка медіа на веб-сторінку

Адже це теж, насправді, в якійсь мірі заміна скриптам. Такі теги, як audio і video дозволяють вставляти медіафайли на сторінку без всяких заморочок, а умільці вже створили купу своїх плеєрів. Для створення цього потрібні лише технології html5, css3 і jquery.

Скрипти в HTML5

Рис. 2. Плеєри, створені без Flash.

Відповідно, відпала й необхідність встановлення Flash Player для тих випадків, коли ви дивитеся відео в плеєрі від HTML5.

Як бачите, нову версію html вже не можна назвати просто мовою розмітки, в ньому з’явилися деякі функції, які виходять за рамки цього призначення. Тепер би для нього більше підійшло визначення — “мова впровадження різних елементів на веб-сторінку”.

У цій статті ми розглянули кілька нововведень, які відрізняють html5 від більш старих версій, причому це корінні зміни. Не всі з вищеописаного (це я про валідації форм) добре підтримується, але вже сьогодні можна пробувати, можна щось впроваджувати, а підтримка нового стандарту з часом ставатиме все краще, тому рано чи пізно всі ці можливості будуть використовуватися при розробці сайтів.