Сообщений в теме: 14

[Morion]

Здравствуйте, форумчане! 

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

 

У меня накопилось их достаточное количество, но для начала хочу рассказать об одном очень простом и удобном способе создания галерей фотографий, рисунков, и т.д.. Это - создать у себя на сайте "Просмотрщик изображений"

 

 

 

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

 

Ну, и кроме того - там же есть ссылки и на другие примеры галерей, слайдеров, и прочего. Как ни назови, суть одна - всё это просмотрщики изображений. Этот же мне особенно понравился своей простотой.  

 

На этом, на сегодня всё. Хорошего времени суток!

[Morion]

Сегодня есть время рассказать ещё об одном интересном примере изучения JavaScript. 

Это программирование календарей для сайта. Может быть, кому-то это будет интересно. 

 

Недавно добавил на свой сайт новую страницу в раздел JavaScript о том, как сделать календарь для своего сайта. Точнее - не то, чтобы новую, а просто вывел "в люди"  то, что хранится у меня на локальном сервере в качестве справочной информации. 

 

Конечно, сейчас, практически, любой поисковик даёт такую возможность (подключить календарь к своему сайту), но это всё - использование сторонних сервисов. 

У себя же на этой новой странице подробно, в деталях объясняю, как сделать свой собственный, хороший автоматический календарь, и как настроить его дизайн. Страницу так и назвал: "Календарь". 

 

Не знаю, конечно, насколько это нужно - иметь календарь на своём сайте? Разве что тем, кто занимается проведением тренингов, распространяет билеты куда-либо, организует путешествия, и так далее. 

Однако, это же тема изучения JavaScript, а вот как раз изучать как там и что, заниматься им, было очень интересно.

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

 

На этом, на сегодня всё. Успехов в изучении JavaScript!

 

[Morion]

Сегодня ещё появилось время написать об одной интересной возможности использования JavaScript. Точнее - его библиотеки - jQuery.

Сделал на своём сайте новую страницу для раздела jQuery, на который показываю, и подробно объясняю, как создать довольно интересный эффект постепенного появления текста на экране монитора и, как им легко можно управлять. 

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

Короче, действующий, наглядный пример здесь: "Постепенное появление текста". 

 

 

 

Проверял этот эффект появления текста на всех своих электронных устройствах. Результат хороший. Компьютер, планшет и ноутбук показывают, как прописано. А вот смартфон не пожелал показывать постепенно. НО!

Оказалось, что более современные его "коллеги"-смартфоны всё отлично понимают. 

 

У меня версия О.С. смартфона "Android 4.2.2".

А вчера мы были на дне рождении у друзей, так я собрал у них у всех смартфоны и проверил. Всё О.К!

Оказывается, у них версии О.С. старше. Типа: "Android 7". 

 

На этом, на сегодня пока всё. Доброго времени суток!  

 

 

 

[Morion]

Для тех, кто интересуется, и хочет изучить технологию JavaScript на хорошем уровне, добавил на свой сайт полезную информацию. 

Сделал и загрузил на него небольшую, 5-ти страничную  "стартовую" электронную книгу в формате PDF. 

По ссылкам с её страниц удобно переходить ко всем урокам самого популярного в сети ресурса, посвящённого изучению этой технологии. И кроме того, по ссылкам с последней, 5-ой страницы сделанного пособия, желающие смогут абсолютно бесплатно смотреть, и скачать себе  самый лучший, по моему мнению, полный обучающий видео-курс "JavaScript и jQuery". Лучшего видео-курса я в интернете не встречал. Подробности в этом пособии. Оно здесь: "Энциклопедия JavaScript"

 

[Morion]

Здравствуйте, форумчане! 

Прежде всего - хочется поздравить Вас с наступающим Новым Годом! 

 

А теперь напишу немного об изучении JavaScript, и как раз по новогодней тематике. Как обычно, в свободное от выполнения заказа время, повторял некоторые разделы этого замечательного языка программирования, и нашёл одну очень интересную возможность, о которой как-то и не вспоминал в повседневных хлопотах. Это создание анимированных страниц сайтов с помощью JavaScript. 

Сами понимаете, что в преддверии Нового Года пройти мимо такой интересной возможности не смог, а в результате - запустил у себя на сайте в соответствующем разделе ещё одну страничку: "Снег на сайте"

 

На ней показываю, и подробно объясняю создание и настройку анимированных веб-страниц с помощью JavaScript-кода. Сделал для неё и соответствующий коллаж в фотошоп. Успехов Вам в Новом Году!   

Сообщение отредактировал Morion: 22 Декабрь 2017 - 14:25

[Morion]

Доброго времени суток, форумчане! 

Люблю, как и большинство, наверное, праздничные дни. Можно спокойно заниматься своими делами, чем, собственно, и занимаюсь.

А дела интересные. Особенно для тех, кто хочет получше изучить JavaScript. 

 

В предыдущем (до ёлки и снега на сайте) посту я писал об электронной "стартовой" книге, которую сделал для удобства изучения этого языка программирования.

Вот эту книгу (1-ую из энциклопедии) сейчас и штудирую (по ссылкам из "стартовой").

В результате - перестал игнорировать "тернарный оператор JavaScript", который, честно говоря, как-то недолюбливал раньше.   Думал: "Зачем какая-то альтернатива, когда есть конструкция "if-else". Чего же ещё надо?! ... ..."  

А этот самый "тернарный оператор" оказался полезной и, главное, очень удобной "штукой".  

 

Ну а в результате - у меня на сайте появился ещё один небольшой 2-ух страничный раздел, где подробно объясняю принципы, показываю наглядно, и даю алгоритмы работы с такими операторами. Самое интересное, что из них, тернарных операторов, очень просто можно собирать любой длинны "логические цепочки". 

Признаюсь, на радостях, что наконец-то хорошо разобрался, и "возлюбил" упомянутый тернарный оператор JavaScript, та-а-а-кой длинны цепочку соорудил, что у меня тестовая веб-страница на "Полигоне" чересчур "любопытной" получилась. Всё чего-то спрашивала и спрашивала ... ... ... .  Даже самому надоело отвечать.

 

Но это в прошлом. А сейчас я её "любопытство" усмирил, и она стала вести себя вполне прилично.

Кому интересно, можете "пообщаться" с ней здесь: "Тернарные операторы" 

 

А я, пока есть свободное время, буду дальше повторять JavaScript, и изучать разные тонкости этого интереснейшего языка программирования. 

Вот и, чтобы ничего не отвлекало от этого праздничного занятия, повесил у себя на сайте в "Контактах" такую заставку. Уж очень мне большой "храпящий" смайлик понравился.

 

 

На этом пока всё. Интересных Вам праздников, "отзывчивого" JavaScript, и хорошего настроения, форумчане!

 

 

[Morion]

Генератор цветных текстов. 

Доброго времени суток, форумчане! 

Появилась возможность, и решил написать в этой теме изучения JavaScript ещё об одном интересном способе использования этого языка программирования. 

 

Это создание генераторов необычно оформленных текстов для сайта. 
Узнал о существовании подобных генераторов во время одной из своих плановых переподготовок, занимаясь по дополнительным урокам видео-курса "JavaScript + jQuery". 

Занимался им для закрепления навыков в использовании JavaScript, изучая не только теорию, но и его практическое применение. 
В результате - загрузил на свой сайт новый и, надеюсь, интересный раздел. 

Не могу сказать, что он уж такой прям чересчур полезный.   Но занимался им с большим интересом!

 

Этот новый раздел, фактически, он-лайн мини-сервис по созданию необычных, разноцветных букв и слов. Позволяет очень просто написать, и сгенерировать себе для сайта оригинально оформленные тексты. 

Делал этот генератор с помощью JavaScript + HTML. Подробно описал его создание и использование. 
Кому интересно, новый раздел здесь - "Генератор цветных текстов"

 

 

В конце поста хочу лишь напомнить, что практическое использование такого генератора вряд ли представляет интерес, но вот для изучения JavaScript и тренировок по нему - самое то!

На этом пока в этой теме всё! Творческих успехов обучающимся!

 

[Morion]

Рисование в HTML.

Доброго времени суток, форумчане. 

Хочу ещё одну заметку в этой теме написать. Причём здесь "рисование в HTML" и JavaScript? 

А вот причём. 

Разбирался недавно с тэгами, появившимися в HTML 5. Тестировал их. В результате - у меня на сайте появились ещё две тесно связанных страницы, одна из которых как раз по изучению JavaScript. 

На главной показываю, и подробно объясняю, как можно рисовать на веб-страницах только лишь с помощью HTML. Нет! Конечно, не шедевры изобразительного искусства  , но ведь и "инструмент" необычный. 

А на вспомогательной уже тестирую JavaScript. 
Кому интересно, новый раздел здесь - "Рисование в HTML"

 

Успехов, изучающим этот интереснейший язык программирования!

[Morion]

Программное рисование в HTML и JavaScript. 

Здравствуйте, форумчане!

Давно я уже не заходил на форум, но по вполне уважительной причине. Исправлял "содеянное" на своём сайте. 

В середине апреля опубликовал на нём страничку о рисовании на сайтах БЕЗ каких-либо редакторов. И вот только вчера полностью закончил. Полностью(!) переделал эту страницу. Теперь это не одинокая страничка, а действующий и вполне полноценный 7-ми страничный он-лайн справочник основ программного рисования на страницах веб-сайта БЕЗ использования каких-либо программ, кроме обычного блокнота. 

Адрес вообще-то прежний. Но раз уж эта ветка о JavaScript, даю ссылку на раздел сделанного справочника именно о нём: "Рисование в JavaScript" 

 

 

Кстати! В примерах с векторными рисунками в формате svg, кроме всего прочего сделал и прямую активную ссылку на ресурс, где таких изображений видимо-невидимо. По разным тематикам. 

 

На этом пока всё. Успехов!

 

[Morion]

Переливающийся фон.

Доброго времени суток, форумчане! Появилась ещё одна интересная "штуковина", выполненная с использованием JavaScript. Это фон таблицы или блока, автоматически меняющего свой цвет. 

 

Такой эффект вполне можно использовать для выделения каких-то важных объявлений, реклам и т.д. на своём сайте. Единственное, что мне не очень понравилось, - пришлось писать белым цветом. Иначе, если написать чёрным или каким-то цветным текстом, он иногда становится невидимым (из-за смены фона). Зато в остальном - очень любопытный способ. Кого интересуют подробности, они здесь: "Переливающийся фон". 

 

На сегодня в этой теме всё. Успехов в изучении JavaScript!

[Morion]

Анимация JPG-рисунков. 

Доброго времени суток, форумчане! Меня всегда интересовала возможность заставить двигаться рисунки на страницах сайта. С файлами рисунков в формате GIF всё ясно. Фотошоп в помощь. 

А вот как то же самое сделать с JPG-файлами, не "ломая" их расширение, т.е. с реальными изображениями в формате JPG и с таким же расширением?

Стал разбираться. Думал, может какие программы есть, чтобы "вшить" анимацию в файл JPG. Но ... ... ... нет!  Пересмотрел "кучу" программ, но все они позволяют либо слайд-шоу сделать, либо вообще маленький фильмик, а хотелось простейшую анимацию в JPG-рисунке сделать. 

Пришлось обратиться к "его величеству" JavaScript.  И он не подвёл! 

 

Конечно, это тоже НЕ анимация, но всё же очень-очень похоже. По крайней мере - внешне.

 

Сделал и добавил на свой сайт в раздел "JavaScript" новую страницу с подобным названием. Ведь, пользователи в своём большинстве не знают разницы между анимацией и слайд-шоу. Да им это, вообще-то, и не нужно знать. Изменяется рисунок, с ним что-то происходит, и ладно. 

Иногда, правда, спрашивают: "Почему вдруг анимацию, исправно работавшую на таком-то сайте, не удаётся скачать? Она перестаёт работать, а вместо анимации сохраняется один единственный неподвижный рисунок?!".

 

Но это пользователи, а любой веб-мастер, разумеется, должен чётко понимать, что(?) и чем(?) является, и как(?) это нужно скачивать, чтобы всё работало. Вот как раз об этом, с простым примером, я и рассказал на новой странице своего сайта. Кого интересует, страница здесь: "Анимация JPG-рисунков"

Постепенно буду туда добавлять, и там появятся другие интересные примеры.

 

На сегодня в этой теме всё. Успехов в изучении JavaScript!

 

[Morion]

Движущиеся рисунки.
Здравствуйте, форумчане! Продолжил заниматься изучением возможностей JavaScript для создания движущихся объектов на своём сайте. Возможностей столько, что "глаза разбегаются"!

 

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

 

 

Собственно, писать-то особо больше нечего. На скриншоте написано. Правда, на самом сайте новая страница выглядит несколько иначе. "Мяч" на своём месте расположен, а не перед машинками. Это я скриншот немного переделал, чтоб изображение было покороче. 

 

Кого интересуют подробности о создании и настройке таких эффектов, они здесь: "Движущиеся рисунки". 

 

На сегодня в теме "Изучение JavaScript" всё. Пойду разбираться с ещё более интересными кодами, с помощью которых можно делать вполне практические эффекты движения. Нередко встречаю их использование на разных сайтах. 

 

Успехов всем в освоении этого интереснейшего языка - JavaScript!

 

[Morion]

JavaScript Dynamics. 

Здравствуйте, форумчане! На этот раз хочу рассказать ещё об одной интересной возможности создания движущихся объектов с помощью JavaScript. 

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

 

Стало интересно, как это делается. Порылся на "приисках" интернета, и вот чего "нарыл". 

Оказывается, существует некая библиотека JavaScript для создания подобных эффектов. Её написал один программист из Нью-Йорка. 

 

Скачал, разобрался, и добавил к своему сайту ещё один 7-ми страничный раздел, где все эти эффекты можно посмотреть, проверить и скачать, при желании. Адрес: "JavaScript Dynamics"  НО! ... ... ...

 

Прежде, чем скачивать, дочитайте "стартовую" страницу этого раздела до конца, т.к. на ней дал и основы её настройки, и свой отзыв об этой библиотеке, и результаты её проверки на разных электронных устройствах, а также показал, как можно делать подобные эффекты всего-то пятью строчками js-кода. Без "одевания штанов через голову".

 

Впрочем, не буду повторяться. Обо всём рассказал, и всё показал в упомянутом разделе. На этом на сегодня всё.

Успехов в изучении JavaScript!

[Morion]

Анимация цифр. 

Доброго времени суток, форумчане! 

Закончил и загрузил на свой сайт новую страницу в раздел "JavaScript".

Она посвящена анимации цифр, которую показываю на 2-ух примерах, и подробно объясняю, как она была сделана. 

Кого интересует тема простого программирования, страница здесь - "Анимация цифр" 

 

 

 

Занятно было разбираться в этом интересном и простом способе, и пробовать разные варианты анимации. Самое хорошее то, что способ действительно очень простой, т.е. не нужно jQuery подключать. Честно говоря, люблю простые решения.   

На сегодня в теме изучении JavaScript пока всё. 

 

Успехов!

[Morion]

Анимация букв. 

Доброго времени суток, форумчане! 

Последнее время занимался повторением и изучением разных способов анимации текста. Простых, т.е. без использования JavaScript. Однако, без очень интересного примера мигающих букв текста, сделанного именно с помощью этого языка программирования, было бы как-то не особо здорово.

С помощью JavaScript можно заставить любые буквы текста мигать разными цветами. Устроить что-то вроде "бегущих огоньков" у себя на сайте. Кого интересует, пример и его описание здесь: "Анимация букв".

 

 

Конечно, показанный способ не совсем простой. Кода всё же довольно много, но пример уж очень занятный, да и реализуется он без подключения дополнительных библиотек jQuery. Весь код в теле одной страницы. 

 

Ну, а где его применить, думаю, и так ясно. Можно выделять что-то особо важное или интересное на своих веб-страницах. Тем более, что цвета мигающих букв настраиваются элементарно. 

 

На сегодня в данной теме пока всё. Успехов в  изучения JavaScript!