Обучение PHP за 2 недели!
Кросспост рассылки
Приветствую всех любителей саморазвития и самообучения.
Вчера я выложил отзыв об обучающем курсе «PHP за 2 недели» от Школы программирования
Это просто замечательный сайт, который я недавно открыл для себя. Я прошёл уже курс по программированию на PHP и собираюсь пройти тренинг Веб-Гуру. Первый урок кстати уже был.
В общем, почитайте (если конечно интересно) моё мнение об этом курсе. Буду рад видеть ваши комментарии.
Удачи в разработке!
Обучающий курс по JavaScript на видео: детальный отзыв
Кросспост рассылки.
Приветствую.
Как и обещал ранее, отзыв о видео курсе по JavaScript опубликован. Он получился большим (чуть более 12 тысяч знаков) и детальным. Всё разложено по полочкам, все косточки перемыты, всё, о чём хотелось сказать, сказано.
Предлагаю вам краткий отзыв.
Начинал изучение я очень скептично, однако поменял мнение. Потому что действительно курс стоящий. Очень классно, что его автором является профессионал в своей сфере, а не инфобизнесмен, который ещё вчера не знал, что такое Javascript.
Курс оформлен отлично. Хорошие видео и звук, приятный, интуитивно понятный интерфейс, чёткий голос автора, лаконичная и доступная подача материала — всё это не может не радовать. Стоит отметить большое количество практических примеров, а также полезные дополнительные материалы.
К минусам могу отнести отсутствие текстовой версии и конспекта, а также не рассмотренную тему регулярных выражений. И конечно хотелось бы увидеть в курсе материалы по AJAX.
В общем, курс стоящий. Даёт основные знания о языке программирования Javascript, умение писать несложные скрипты и анализировать чужой код, понимать структуру HTML документа, уметь оформлять, отлаживать и поддерживать код. Говорю, как веб разработчик с опытом.
Теперь вам решать, заказывать курс или нет. Я своё мнение высказал.
Развёрнутый отзыв на моём блоге: Отзыв о курсе «Javascript. Больше, чем просто сайт» Дениса Хомича
Напоминаю также об интернет-тренинге «Инструменты интернет для традиционного бизнеса», который пройдёт 25-27 мая. Если вы хотите использовать Интернет для продвижения своих услуг и товаров, обязательно записывайтесь.
Делаем меню с использованием вкладок с помощью javascript
Рисовал не так давно сайт для Черниговского автосалона и невольно озадачился парочкой интересных решений на основе javascript. Об одном из них пойдёт речь в этой заметке. Другое имеет полное право быть выделено как отдельный пост, так как решает свои специфические задачи. Позволим же ему воспользоваться этим правом в полной мере.
Итак, пойдёт разговор сегодня о такой красивости, как вкладки или табы. А точнее о меню на их основе. Цель – написать наипростейший код, выполняющий полностью поставленные перед ним задачи. Конечно, скрипт обязан быть максимально кратким и надёжным. Там, где можно написать 1 строку не стоит городить десяток, что довольно часто можно наблюдать даже на сайтах, сделанных «крутыми» сайтостроительными конторами. И естественно, понимать его обязаны все более менее вменяемые браузеры.
Поехали. Вначале мной было подсмотрено решение для вкладок у ForSimple (мне оно показалось наиболее простым), а также изучено пару решений от Мастера Gordi. Были также изрядно истоптаны тропинки поисковиков по нужным запросам, однако ничего интерессного найти не удалось.
Смысл нашего скриптика в том, чтобы при запуске функции нужные вкладки выделялись (остальные при этом должны быть невыделены), а также пользователю показывается нужный слой с подменюшкой (остальные в это время обязаны быть скрыты). Выделить/снять выделение и скрыть/показать элемент просто. Это делается путём назначения стилей CSS и функции javascript getElementById.
С помощью простейшей конструкции мы можем выполнить нашу задачу.
document.getElementById('tab1').className='sel';
document.getElementById('cont1').style.display='block';
//выделяем нужный таб и показываем нужный слой
document.getElementById('tab2').className='nonsel';
document.getElementById(‘cont2’).style.display='none';
…
…
//снимаем выделение с остальных табов, а слои скрываем
}
В принципе этого скрипта уже достаточно для выполнения нашей задачи. Он будет нормально работать, причём в любом браузере. Смотрим рабочий пример на 4 вкладки. Единственные его минусы - размер и громоздкость. Ведь если вкладок довольно много, величина скрипта становится значительной. При четырёх табах каждая вкладка описывается с помощью восьми строк. Естественно, такое положение вещей не могло устроить меня, так как одним из моих принципов в вёрстке и разработке является минимализм. И я пошёл дальше.
Порывшись ешё немного в Гугле, удалось написать упрощённый вариант скрипта. Его главное отличие от предыдущего – наличие цикла. Обязательное правило: вкладкам и слоям должны быть выданы соотвествующие айдишники. То есть, первый таб – tab1, первый слой – cont1, и так далее.
for(i=1;i<=4;i++) {
document.getElementById('tab'+i).className='nonsel';
document.getElementById('cont'+i).style.display='none';
}
//снимаем выделение со всех табов, все слои скрываем
document.getElementById('tab1').className='sel';
document.getElementById('cont1').style.display='block';
//выделяем нужный таб и показываем нужный слой
}
Итого получилось четыре короткие функции (по количеству вкладок). Уже неплохо. Оптимизация налицо, ведь удалось в 2 раза уменьшить количество строк. Смотрим следующий рабочий пример. Однако это ещё не идеал.
Конечно, сократить функцию уже врядли получится. Зато можно сократить количество функций. В идеале нужно делать все операции с помощью одной небольшой функции, а их пока целых четыре. Далее всё очень просто. Нужно всего лишь задаться вопросом, что является исходными данными для скрипта и можем ли мы их передавать динамически. А вводной служит всего лишь одна цифра – айдишник (таба и слоя), и передавать его мы не только можем, но и обязаны, если не хотим расписывать энное количество лишних строк скрипта.
Получаем на выходе простейшее решение:
for(i=1;i<=4;i++) {
document.getElementById('tab'+i).className='nonsel';
document.getElementById('cont'+i).style.display='none'
}
//снимаем выделение со всех табов, все слои скрываем
document.getElementById('tab'+n).className='sel';
document.getElementById('cont'+n).style.display='block';
//выделяем нужный таб и показываем нужный слой
}
Последний рабочий пример можно лицезреть по линку.
Итого: имеем универсальное простое решение для реализации сложной динамической менюшки с использованием вкладок. Причём работает оно в любом браузере (естественно, при включённом javascript).
Кстати, хотел бы заметить, что активировать скрипт можно как угодно (по клику или наведению). Мне нравится больше вариант с onmouseover. Ведь в результате получаем меню, которое реагирует на наведение курсора, однако в ссылке вкладки всё равно стоит линк. Так, даже при выключенном жаваскрипте пользователь сможет перейти по ссылке меню.
--------------------
Денис Чекалов продолжает пополнять свой список блогов, авторы которых активно меняются постовыми.
А вы знаете как поднять ТИЦ / Pr сайта, увеличить посещаемость сайта?
Хотите научится продвигать сайт? SEO блог начинающего вам поможет.
