Добрейший вечер. Сегодня вполне такой хороший день. За окном дождь. Погорить хочется о нашумевшем HTML5. И говорить хочется много и обширно, поэтому в один пост все пихать будет неуместно, по-этому я запущу серию постов посвященных HTML5 и на примерах мы разберем его основные особенности. И чтобы это не осталось только на словах, сегодня мы начнем.
Итак, новая версия HTML включает в себя CSS, HTML и JavaScript API. И начнем мы именно с JS API и его двух нововведений: web-хранилище и новые селекторы.
Новые селекторы. Все знают о явоскриптовых селекторах getElementById() и getElementsByName(). Но всегда не хватало селектора getElementsByClass, который вводился искусственно, написанием реализовывающей его функции. Вполне вероятно что мольбы были услышаны и в JS API включен новый селектор, который можно использовать так:
Code
var elements = document.getElementsByClassName('myClass'); elements[0].focus();
И очень интересная вещица -это функции поиска DOM узла по CSS-селектору. Это методы querySelector() и querySelectorAll(). Отличия у них только в количестве возвращаемых аргументов(querySelector() ищет до первого совпадения, а второй все). Поиск выполняется очень быстро, так как его алгоритм аналогичен тому как браузер ищет классы при просмотре CSS.
Небольшой примерчик(при наведении на квадрат он меняет цвет).
Code
if (document.querySelector){ var shitdiv=document.querySelector('#someshit'); shitdiv.onmouseover=function(){ document.querySelector('#someshit').style.background="yellow"; } shitdiv.onmouseout=function(){ document.querySelector('#someshit').style.background="blue" } }
Новые селекторы HTML5 поддерживаются браузерами Мозилла 3.1+, Опера 10+, IE8+, Сафара 3.1+. Тоесть ими вполне можно орудовать и в наше время если очень важна скорость поиска.
Web хранилище. Как по мне просто шикарнейшее нововедение, ведь проблема с хранением информации на клиенте была всегда. Хранилище представляет собой объект в котором храняться пары имя(ключ)-значение. Добавление нового элемента выполняеться функцией setItem(ключ, значение). Посмотреть значение определенного ключа можно с помощью функции getItem(ключ). Теперь небольшое демо котрое показывает работу web-хранилища. Сохранив данные и перезагрузив страницу вы снова можете их получить. Даже перезапустив браузер. Поддержка на Мазилле 3.1+, Опера 10+(другие не проверял). Можно сохранять данные с textearea а также очистить память. Сохраненные данные при перезагрузки страницы остаются в поле ввода текста, а програмным путем мы определяем сколько секунд назад были сохранены данные(путем запоминания времени сохранения).
Code
var data_area=document.getElementById('data_s'); var log_span=document.getElementById('log_s'); if (window.localStorage.getItem('some_key_1')) { data_area.value = window.localStorage.getItem('some_key_1'); } log(false);
document.getElementById('save_s').onclick=function() { window.localStorage.setItem('some_key_1', data_area.value); window.localStorage.setItem('some_key_2', (new Date()).getTime()); log(true); }
Ух, ничего себе! Всегда думал, что HTML5 - это просто более усовершенствованный xHTML, а тут я честно говоря почти ничего и не понял... Есть у вас ссылка на хороший учебник или статьи, или даже книгу? Как считаете, стоит его уже начинать учить и применять?
к сожаление учебника я не нашел.(да и откуда, html5 еще не стандартизирован, все сводиться к таким статьям) сам собираю информацию по частям. а код приходиться писать по своему чтобы понятней было. я соглашусь, что надо было бы к коду больше объяснений, в следующий раз обязательно сделаю, просто сейчас завал на работе))) это только цветочки между прочим, дальше- круче))
если есть вопросы задавайте, по возможности объясню.
нет. использую shitdiv=document.querySelector('#someshit'); если ты про то что поиск по айди, то это тоже немного не так. он ищет по CSS правилу. тоесть можно усложнить поиск во много раз но добиться отличной скорости поиска. его основное назначение НЕ в краткости, а в СКОРОСТИ поиска узла.
Добрейший вечер. Сегодня вполне такой хороший день. За окном дождь. Погорить хочется о нашумевшем HTML5. И говорить хочется много и обширно, поэтому в один пост все пихать будет неуместно, по-этому я запущу серию постов посвященных HTML5 и на примерах мы разберем его основные особенности. И чтобы это не осталось только на словах, сегодня мы начнем.