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

[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!

 

 

[Morion]

Управляемая анимация. 

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

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

 

 

 

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

 

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

 

Кого интересует такая возможность, реализованная с помощью JavaScript, найдёт её здесь: "Управляемая анимация". 

 

Кстати сказать, очень рад, что нашёл в своих "архивах" подобную тему, т.к. пока разбирался, пришлось тщательнее "поковыряться" в, вроде бы, уже изученном. Разобрался, как JavaScript получает данные из внешнего текста, т.е. БЕЗ прописывания этого текста внутрь тела скрипта. 

И ещё узнал о ранее мне неизвестной цветовой модели rgba.  До сих пор имел дело всегда только с rgb.

Ну ... ... ...   лишний раз убедился в справедливости пословицы: "повторение - мать учения".   

 

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

Сообщение отредактировал Morion: 03 Март 2020 - 19:55

[Morion]

Меню для сайта.

А если быть точнее, - скрытое меню сайта. Такое позволит создать простой JavaScript-код спойлера из обычного многоуровневого меню, сделанного с помощью HTML+CSS. 

 

 

Вот из этих образцов горизонтального и вертикального меню, что видно на скриншоте, очень просто сделать скрытое меню, спрятав его под символом "Гамбургер" (как его именуют веб-мастера), т.е. 3-ёх продольных полосок. 

 

Меню открывается/закрывается кликом по этим самым полоскам. Удобно!

 

Как раз из вертикального меню, которое видно вторым на скриншоте, я и сделал третий пример, т.е. "скрытое меню". Правда, его не видно на скриншоте. Оно же скрытое ... ... .

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

 

Кого интересует этот способ использования JavaScript для создания меню, все подробности найдут здесь: "Скрытое меню сайта". 

 

И кстати! 

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

 

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