Скрипты в HTML5

Скрипты в HTML5

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

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

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

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

Что ж, в html5 положение дел существенно изменилось, появилось сразу несколько новых атрибутов, благодаря которым стала возможна валидация формы, причем сразу на стороне пользователя, без необходимости передавать данные серверу.

Мне кажется, это огромный плюс такой валидации. В чем же она заключается?

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

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

Атрибут pattern. Пожалуй, самая мощная возможность. С помощью этого атрибута вы можете задать список символов, которые допустимо вводить в поле. Например, если у вас есть поле для ввода телефона, неплохо было бы запретить вводить в него любые буквы, а только цифры и знак +(возможно). Благодаря pattern это можно реализовать.

Сворачивание, разворачивание информации

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

Конечно, пока по функциональности это сильно уступает тому, что можно было бы сделать на скриптах. В частности, появление будет происходить резко, а не плавно. Но ведь все равно, появилась же такая возможность!

Элемент Canvas

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

Рисование в Canvas нужно изучать отдельно, я уже видел много хороших игр, созданных за счет html5 и этого элемента.

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

Вставка медиа на веб-страницу

Это ведь тоже, на самом деле, в какой-то мере замена скриптам. Такие теги, как audio и video позволяют вставлять медиафайлы на страницу без всяких заморочек, а умельцы уже создали кучу своих аудиоплееров. Для создания оного нужны лишь технологии html 5, css3 и jquery.

Рис. 2. Плееры, созданные без Flash.

Соответственно, отпала и необходимость установки Flash Player для тех случаев, когда вы смотрите видео в плеере от HTML5.

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree