JavaScript временами кажется запутанным и откровенно странным, но с его помощью можно сделать много замечательных вещей.
Разработчики, изучающие JS, обычно ограничиваются решением задачек по программированию и классическими веб-проектами вроде сайта-портфолио или онлайн-магазина. Но зачем же на этом останавливаться?
Забудьте на минутку о скучных упражнениях и включите свое воображение. На JavaScript можно сделать очень много всего. Давайте немного развлечемся!
101 Hello Word
Программы типа «Hello Word» годятся не только для начинающих. Проверьте, насколько вы креативны! Попробуйте придумать несколько разных способов написать на JavaScript программу, которая выводила бы на экран эти всем известные слова. Если не найдете свое решение в этом GitHub-репозитории, не стесняйтесь поделиться им с другими!
Создание 3D-объектов
Чтобы взяться за 3D-рендеринг в JavaScript, не так уж много надо. Достаточно иметь базовое понимание языка и познакомиться с библиотекой Three.js.
Простой Проект На JavaScript Для Новичков
Все новички начинают с рисования 3D-куба или сферы, но, освоив азы, вы сможете создавать по-настоящему потрясающие вещи.
Библиотека Three.js также часто используется в VR и AR-проектах, так что кто знает, куда вас заведет такой проект.
Космические захватчики (Space Invaders)
YouTube-канал Coding Train — настоящий монстр в том, что касается необычных JavaScript-челленджей и проектов. Если вы уже имеете кое-какой опыт, я бы посоветовала попробовать самостоятельно придумать свою версию игры «Space Invaders» и затем сравнить результаты.
А новички могут просто следовать этому замечательному туториалу. Создавая игру, они узнают много новых интересных вещей о JavaScript и основах геймдева.
Вот общий обзор фракталов и фрактальных деревьев — чтобы было, от чего отталкиваться. А если вам нужна дополнительная помощь, обратитесь к этому руководству.
Множество Мандельброта
Раз уж зашла речь о фракталах, вот мой второй фаворит — множество Мандельброта. Если вам вдруг любопытно, третий фаворит — множество Жюлиа.
Попробуйте сперва поискать информацию о фракталах и самостоятельно реализовать собственную версию. Если что-то не сработает, вот набор полезных руководств.
Игра «Жизнь» Конвея
В 1970-х математик Джон Конвей придумал игру «Жизнь». Это не то чтобы прямо настоящая игра. Это скорее захватывающая математическая симуляция, которую довольно легко реализовать на любом языке программирования, в том числе на JavaScript.
Симулятор брутфорс-хакинга
Это скорее задача по фронтенду, но здесь есть своя доля интересных проблем, которые нужно решить.
Куайн
Куайн (Quine) — программа, выдающая на выходе точную копию своего исходного текста. Написание такой программы может поначалу показаться простой задачей, но при желании вы можете ее усложнить. Попробуйте сперва придумать собственное решение, не заглядывая в чужие!
Простой мини-проект на JavaScript
Имитация природных явлений
На Khan Academy в бесплатном курсе по программированию есть целый юнит, посвященный продвинутому JS и имитациям природы. Посмотрите сперва их видео, а затем выполните задания. Если вы новичок, вам может понадобиться посмотреть и несколько предыдущих юнитов, а то и весь курс.
Музыка и Tone.js
Проект, в котором сочетается создание музыки и программирование на JavaScript, может быть очень интересным. Создание музыки вообще имеет больше общего с написанием кода, чем можно подумать.
При работе над таким проектом вам пригодится библиотека Tone.js. Она довольно понятная и работать с ней просто.
AI с TensorFlow.js
Когда думаешь о машинном обучении или искусственном интеллекте, JavaScript — не первый язык, который приходит в голову. Тем не менее, с помощью библиотеки TensorFlow.js можно создать что-то по-настоящему крутое.
Симуляция физики
Замечательное руководство по созданию веб-симуляций с использованием HTML5 и JavaScript. Доступно в PDF и веб-версии.
Вирус
И, наконец, последняя задача — создание вируса на JavaScript. Конечно, это должно быть не что-то страшное, а чистое озорство. Но даже нестрашный вирус будет интересным проектом. Пример на GitHub.
Источник: techrocks.ru
Скрипты и примеры JavaScript. Все самое интересное и полезное в ДжаваСкрипт
Страшные сны Java Script. Честно предупреждаю, что тут есть и ПРИКОЛЫ! Не воспринимайте все близко к сердцу.
[ ! ] может временно нарушить работу браузера;
[ Р ] есть платная версия.
Скрипт полученя среднего или основного цвета картинки – Легко вычисляет основной цвет изображения(средний цвет) или градиент из двух цветов. Использует JavaScript и простое создание Canvas в нем.
Скрипт открытия рекламы за текущим окном через PopUnder – Открывает рекламу в новом окне за просматриваемой страницей. И да, это довольно бесящий всех формат, за который могут быть санкции поисковых систем.
Скрипт поделиться в соцсетях – Позволяет поделиться ссылкой на страницу сайта и ее заголовком в социальных сетях. Вообще не использует картинок и какого-то стороннего кода!
Скрипт слайдера картинок на простом ДжаваСкрипт и CSS – Самостоятельно вычисляет ширину картинки и пролистывает к следующей.
Скрипт защиты от скликивания рекламы на сайте (фрода, кликфрода) – Проверяем возможность установки куки у пользователя и убираем рекламу для тех посетителей, кто уже кликал по ней. Можно использовать как чистый ДжаваСкрипт, так и JavaScript + PHP.
Скрипт проверки пользователя без капчи (no captcha) – Проверяет поведение пользователя перед отправкой формы без использования капчи и выставляет ему оценку 1-5. Проверка происходит по наличию куки, движению мыши и вводу текста. Скрипт подходит для мобильных устройств.
Скрипт для изменения мета-тега viewport по клику – Ссылка для перехода с мобильной версии на полную с сохранинием результата и без перезагрузки страницы. Только JavaScript без PHP.
Скрипт случайного градиентного фона на CSS 3 – Выдает случайный градиентный фон из 4 цветов при каждой перезагрузке страницы. Цвета RGBA. Если сделать настроить прозрачность, можно получать очень симпатичные рандомные фоны.
Самый простой скрипт соцзамка — социального замка – Позволяет скрыть контент (текст, видео и т.п.) до определенного действия на странице — лайка в соцсети или подписки.
Адаптивное меню на JavaScript и CSS — из любого блока или ячейки таблицы – Небольшой ДжаваСкрипт для адаптивных сайтов, позволяющий сделать адаптивное меню с анимацией из любого блока или ячейки таблицы. Ну и стили для плавающей кнопки меню. Есть версия на Jquery.
Скрипт отслеживания клика по ифрейму (iframe), рекламе Яндекс Директ и Гугл Адснс – Этот Javascript умеет отслеживать клики (нажатия) на любой ифрейм. Например, на рекламу Яндекс Директа или Гугл Адсенса. При этом он очень простой и короткий.
Модальное окно с предложением подписаться на группу в соцсети – Скрипт при первом посещении предлагает посетителю сайта подписаться в группу любой соцсети. При закрытии, окно не появляется еще 30 дней, а при подписке — 365.
Р ] – Скрипт автоматической подписки посетителя сайта в группу ВКонтакте, Одноклассники, Фейсбук, Мейл.ру, Ютуб + автоматические лайки и БОНУС! Позволит получить целевых подписчиков в группы без ограничений на инвайтинг. Я делал все сам. Внутри есть примеры скриптов для всех соцсетей, а также — варианты для кликов по рекламе и партнерским ссылкам.
—>
Муха. Летает по всей странице – Улучшаем поведенческие факторы, привлекаем внимание к рекламе! За мухой можно не только гоняться по всей странице, но и заставить ее облетать меню, рекламу или какие-то другие места на странице. Муху можно поймать, кликнув на нее (и даже добавить какое-то действие на нажатие). Здесь представлен самый простой пример на абсолютном рандоме.
Модальное окно при уходе с сайта – Минимально простой скрипт, чтобы оставить пользователя на сайте, собрать информацию, телефон, адрес почты или позвонить ему и проконсультировать. Работает только для заинтересовавшихся сайтом клиентов.
Параллакс (parallax) для фона – Это эффект, когда фоновая картинка движется медленнее текста при прокрутке. Так как я не очень люблю громоздкий jQuery, а эффект движущегося фона мне очень понравился, было решено сделать все на обычном Javascript. Как оказалось, все очень просто. Да и двигать можно не только фон.
Летающие по сайту картинки – Довольно забавный скрипт для шуток 1 апреля. Он заставляет все картинки на сайте покачиваться или даже летать (в зависимости от настроек).
Оповещение при блокировке рекламы – Данный скрипт выводит сообщение (или другой баннер) при блокировке рекламы на сайте. Например, если рекламу блокирует Адблок или Касперский.
Сортировка строк или списка – Скрипт может сортировать строки или список по возрастанию числа. В данном примере это делается при загрузке страницы, но можно производить сортировку и по нажатию на ссылку.
Изменение шрифта – Скрипт изменяет тип (гарнитуру) размер и цвет шрифта по нажатию на ссылку. В данном случае используется несколько примеров, но можно добавить любые другие цвета, шрифты и размеры.
Отправка формы по двойному Enter – Старый скрипт, про который я совсем забыл. Отправляет сообщение после двух нажатий кнопки Энтер (ввода). Этот вариант просто чситает количество переносов в тексте.
Печатающийся по буквам текст (как на печатной машинке) – Скрипт выводит по одному символу (букве) текста за нужный промежуток времени. Получаем эффект «печатной машинки». Выводить можно что угодно (включая оформление). При отключенном Джава Скрипте все тоже показывается корректно.
Кроссбраузерное выделение внешних ссылок на основе CSS – Показывает рядом со внешними ссылками сайта специальную иконку или любую картинку. Очень удобно для новых и постоянных пользователей сайта.
Универсальное добавление в избранное – Большинство программ позволяют добавить в избранное только в ИЕ (Интернет Эксплорер). Тут же представлен кроссбраузерный вариант добавления в закладки. Работает в Хроме, Фаерфоксе, ИЕ, Опере и Сафари.
Смена фона от времени суток – Простенький скрипт для смены дня и ночи на сайте. Как ни странно, это может очень хорошо смотреться.
Защита текста от копирования! – Универсальная защита текста от копирования посредством всех возможностей HTML, CSS и JavaScript. Не уродует текст, позволяя ему нормально интедсироваться. Ничего лучшего в интернете вы не найдете. Ну, разве что решите еще превратить текст в картинки букв.
Плавная прокрутка в Javascript – Автоматическая плавная прокрутка страницы вниз или вверх (до упора или на определенную высоту). Думаю, будет очень полезно многим.
Javascript поиск на странице – Отличный Java Script поиск на странице (в тексте страницы или любого блога). Может работать как автоматически, подсвечивая заданный текст, так и по запросу пользователя.
Наглядный ввод HTML – Один из самых полезных Джаваскриптов. Моментально показывает введенное пользователем в форму (например, чата) и с уже готовым форматированием. Так любой сможет моментально понять, как будет выглядеть текст после ввода.
Море и глубина – Автоматически постоянно прокручивает страницу вверх, вниз или вбок. Может использоваться для прокрутки чата или объявлений.
Прикол с 1000 окон [ ! ] – Классическое открытие большого количества окон в прогрессии. Теперь практически нигде не работает (если самому не разрешить).
Тест на. БЛОНДИНИСТОСТЬ 🙂 [ ! ] – Узнайте, не являетесь ли вы блондинкой в интернете! Небольшой тестик никогда не помешает. Возможно. 🙂
Проверка зрения – Старый фокус в ИЕ с окном. Думаю, не лучшая реализация, но вышло забавно. В других браузерах может не работать.
Вопрос о зарплате – Небольшой интерактивный опрос про заработную плату. А вы хотели бы зарабатывать больше?
Кнопка БАБЛО. [ ! ] – Та самая кнопка БАБЛО, о которой многие так и грезят. Не останавливаемся, нажимаем, зарабатываем деньги!
1000 000$ – Один миллион за. Вот такая древняя шутка на JavaScript.
«I LOVE YOU и 1000 000 роз!» [ ! ] – Рекурсия в Джаваскрипт. Скрипт вызывает сам себя и выводит повторяющийся текст.
СЛОЖНЫЙ ДЛЯ ЧТЕНИЯ ТЕКСТ – Шутка над старым трешевым текстом брата. Не все удалось, реализовать, к сожалению. Я очень многое в тексте сократил, но смысл от этого не потерялся. Почти.
НЕО – Один из самых первых скриптов на сайте. Использовался для приветствия посетителя в первый раз.
Источник: dikij.com
JavaScript скрипты
Понимание принципов работы конструкции if-else и ее основных функций в JavaScript.
Применение операторов больше, меньше и равно в языке JavaScript.
Изучение и примеры операторов равенства и неравенства, используемых в языке JavaScript.
Как сравнить такие типы данных, как строки и числа в JavaScript?
Файловый менеджер для tinyMCE 4, CKEditor и CLEditor
Многофункциональный файловый менеджер «Responsive FileManager» для WYSIWYG редакторов tinyMCE 4, CKEditor и CLEditor. Можно также установить как автономный или кросс-доменный файловый менеджер. Использует адаптивный дизайн.