Управление HTML5 с помошью JS, новые возможности для веб-дизайна
HTML5 - это новый стандарт, который является финальным т. е. последним. В дальнейшем будет просто HTML. HTML5 - это, прежде всего, новые интерактивные возможности, которые раньше требовали знания JavaScript на уверенном среднем уровне. Сейчас все стало просто.
Первым делом мы решили продемонстрировать всем новые атрибуты, такие как email, url, number, date, required. Для лучшего понимания примеры были выложены в интернет, и по рукам пошел IPhone и планшет.
Код:
Email: <input type="email"> <br>
Адрес: <input type="url"> <br>
Числа: <input type="number"> <br>
Дата: <input type="date"> <br>
При вводе нужных полей появлялась клавиатура подстроена под тип поле, например при нажатии на e-mail появлялись кнопки такие как: «@»,».com» и т. д., а для поля даты IPhone выстроил вообще свое поле, при чем все работало не только под Safari, но и под Chrome.
Следующий атрибут был contenteditable позволяющий редактировать текст на лету:
<p contenteditable onblur="save()">Это текст. Редактируй меня</p>
<script>
function save () {
alert("Сохранено!")
}
</script>
А вот такую форму браузер не хотел отправлять:
<form>
<input type="email"required>
<input type="submit" value="OK">
</form>
До тех пор пока не будет заполнено поле и введен корректный e-mail.
Атрибут list дает возможность делать свои выпадающие списки:
<input list="list">
<datalist id="list">
<option value="Артем">
<option value="Влад">
<option value="Вова">
<option value="Даша">
<option value="Настя">
</datalist>
Для примера было показано насколько просто стало делать интерактивные вещи улучшающие UI:
<details>Показать все что скрыто</details> <!-- HTML5 →
<!-- Native JavaScript -->
<p>Подробнее</p>
<div style="display:none">Показать все что скрыто</div>
<script>
document.getElementsByTagName('p')[0].onclick = function(e){
document.getElementsByTagName('div')[0].style.display == "none" ?
document.getElementsByTagName('div')[0].style.display = "block" :
document.getElementsByTagName('div')[0].style.display = "none"
}
</script>
Также был подготовлен пример работы с локальным хранилищем без ограничения по размеру, который часто используется для расширений (в основном Chrome):
<input type="text">
<div></div>
<script>
window.onload = function(){
document.getElementsByTagName('div')[0].innerHTML = localStorage.getItem('seminar')
}
document.getElementsByTagName('input')[0].onkeyup = function(e){
if(e.keyCode != 13) return;
localStorage.setItem("seminar", this.value);
document.getElementsByTagName('div')[0].innerHTML = localStorage.getItem('seminar')
}
</script>
Следующим примером HTML5 был HistoryAPI. Здесь мы попробовали изменить URL страницы и записать новый в историю без перезагрузки ее, для отображения того что страница на самом деле не будет перегружена после загрузки через 2.5 сек. будет выведен текст который останется при изменении URL и истории.
<button onclick="h()">Изменить</button> <br>
<div></div>
<script>
window.onload = function(){
setTimeout(function(){
document.querySelector("div").innerHTML = "Текст"
},2500)
}
function h(){
history.pushState(null, null, "/seminar!!!");
}
</script>
Так же были показаны примеры общения доменов между собой:
Client:
<input type="text">
<button onclick="send()">Кнопка</button>
<script>
function send(){
var el = document.getElementsByTagName('input')[0]
window.postMessage(el.value, "http://subdomen.domen.com");
}
</script>
Recipient:
<div id="msg"></div>
<script>
function listener(event) {
document.getElementById("msg").innerHTML = "получено: " + event.data;
}
if (window.addEventListener){
window.addEventListener("message", listener, false);
} else {
window.attachEvent("onmessage", listener);
}
</script>
Ну и напоследок был показан пример использования тега audio на реальном проекте, суть была в том что бы проиграть звук сигнала автомобиля в тот момент когда он поворачивается к пользователю лицом:
<audio id="car_bibi" src="/js/soundcar.mp3" type="audio/mpeg"></audio>
<script>
/* Логика */
document.getElementById('car_bibi').play()
</script>
Комментарий (0)