JAVASCRIPT

JavaScript Вступление

Освоив базовые технологии создания сайтов, конечно же захотелось идти дальше. Жизнь не стоит на месте. Сейчас редкие сайты обходятся без современных технологий: JavaScript + jQuery и более поздней jQuery UI.

Изучал их, как всегда дистанционно, по ШИКАРНЕЙШЕМУ(!), а по другому и не скажешь, обучающему видеокурсу с одноимённым названием.

Даже я, привыкший к отличному методу обучения этого автора, был ошеломлён количеством и качеством уроков! Лишь только по теме JavaScript на диске записано 60 уроков и ещё столько же домашних заданий.
Об авторе рассказал на страницах "ССЫЛКИ" (в новом окне), где я сделал достаточно прямых переходов на его ресурс.
Советую зайти, и посмотреть. Найдёте там очень много интересного материала по разным темам программирования.

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

* * *

JavaScript - строгий язык программирования. Малейшая ошибка в синтаксисе не даст скрипту выполняться. Кроме внимательности, для изучения этого языка уверенные знания HTML и CSS - НЕОБХОДИМОСТЬ!  Иначе - никак!

И, хоть это уже необязательно, но мне очень помогло в изучении то, что предварительно хорошо освоил основы языка PHP. У обоих практически одинаковая логика и синтаксис. Поэтому, разбираться с новым языком было "в разы" легче.

JavaScript - это именно та технология, которая позволяет создавать АВТОМАТИЧЕСКИЕ сайты, т.е. общающиеся с посетителями БЕЗ Вашего участия.

Вы программируете сценарий, следуя которому, Ваш сайт будет выполнять те или иные действия.

Покажу, разумеется, далеко не все методы, освоенные в этом замечательном видео-курсе. Их слишком много. Покажу лишь несколько наиболее "ярких" примеров использования языка программирования.

В скриптах вирусов НЕТ. Точно на 100%! Всё писал сам.

ИТОГИ ОБУЧЕНИЯ

Общего НАВИГАТОРА на предлагаемых страницах не будет. Вернуться сюда, на страницу выбора, сможете по синей стрелке "НАЗАД". Кликнув по логотипу, попадёте на главную страницу сайта.

Для наглядности то, что будет выведено на экран с помощью скрипта, буду выделять серым фоном. Где это нужно, разумеется.

Практическое использование полученных при обучении навыков, желающие могут смотреть сразу:

* * *

Модальные окна

"Модальным" окно называется потому, что на него нужно обязательно отреагировать: кликнуть по каким-либо кнопкам на нём, а иначе оно не закроется.
Содержит какое-либо сообщение со страницы сайта, либо опрос, ну или ещё что-нибудь. Вывод модальных окон - наверное одни из самых главных способов программы общаться с посетителями сайта. СМОТРЕТЬ
**Кстати! Попробуйте сначала НЕ РАЗРЕШИТЬ использование скриптов. Программа напишет Вам "своё мнение об этом".

Создание и работа с массивами

Решил не показывать уроки по созданию и работе с обычными переменными. Их очень много, а потом ... ... ... - это слишком просто.
Массивы - такие же переменные, только содержат в себе ещё переменные. Вот и вся разница. Но умение создавать их и работать с ними имеет гораздо больший практический смысл. Почему? Смотрите сами. СМОТРЕТЬ

Тернарные операторы

Большой, сдвоенный раздел, где показываю на "живых" примерах, и подробно объясняю принципы работы с условными тернарными операциями в JavaScript.
Это очень популярная тема в программировании. Сайт общается с посетителями, задаёт вопросы и выводит результаты. СМОТРЕТЬ

Регулярные выражения

Это отличный инструмент для обработки больших объёмов информации. Зачастую нас интересует не всё что есть, а лишь определённая часть её. Вот тут-то и помогут нам регулярные выражения, существующие в JavaScript.
Используя их, можно "соорудить" конструкции, в которых укажем, что нас интересует. Ну а скрипт послушно отберёт только то, что ему прописано. СМОТРЕТЬ
  Кстати! Там же найдёте подробное пособие и шпаргалку по составлению регулярных выражений.

Генерация случайного числа

Относится к встроенным в сам JavaScript математическим функциям. Это методы объекта Math (Математика).
Такие методы постоянно применяются на сайтах, использующих пароли, пин-коды, ключи активации и прочее, и т.д. и т.п.. СМОТРЕТЬ

Слайдер цифр

Аналогично. Возможно сделать такой, благодаря встроенной в JavaScript функции parseInt(), преобразующей переменную в целое число. Это, наверное, самый простой слайдер, выводящий в отведённое поле цифры от "0" до "100". СМОТРЕТЬ

Функции

Функции - это уже целые сценарии, ну или мини-программы, написанные с помощью языка программирования JavaScript.
Честно говоря, функции - одна из самых моих любимых возможностей в использовании скриптов. Интересно. Можно придумывать множество сюжетов. А ещё, они здорово похожи на "action" в "Фотошоп". Написал один раз и запускай где угодно, и сколько угодно раз. СМОТРЕТЬ

Очистка "холста"

Интересный пример использования JavaScript и его простой функции для рисования на "холсте" на сайте, и его очистки от нарисованного. СМОТРЕТЬ

Сценарии на JavaScript

На предлагаемой странице прописал сценарий: "Знакомство с посетителем сайта" на языке JavaScript.
Там уже использовал не только функции, но и вывод массива в цикле, что также часто применяется для написания скриптов.
А вообще, сценарии - отличный способ автоматизировать свой сайт. СМОТРЕТЬ

Сценарий "лотерея"

На этой странице создал сценарий: "Лотерея", с помощью условного оператора case, а точнее, целой конструкции switch - case.
В модальное окно нужно ввести одну из цифр: от "1" до "5", и программа тут же выведет результат розыгрыша. СМОТРЕТЬ

Даты и время в JavaScript

Очень интересная и полезная тема: как можно с помощью языка программирования выводить даты и время на страницах своего сайта. СМОТРЕТЬ

Индикаторы

Без применения JavaScript, создать полноценный, действующий индикатор для сайта не получится! СМОТРЕТЬ

PHP и JavaScript

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

Недаром! Такая технология везде и постоянно применяется профессиональными программистами.
Её изучение сделало возможным перейти на новый уровень, и использовать JavaScript практически. СМОТРЕТЬ

Практическое использование JavaScript

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

Назвал его "Личная страничка". Это сайт-визитка со своим собственным, уникальным дизайном. СМОТРЕТЬ

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

То же самое. Благодаря встроенным в JavaScript математическим функциям, удалось спрограммировать довольно интересный и полезный генератор разноцветных букв и слов для сайта. Фактически, это целый он-лайн мини-сервис.
Создание подобного генератора также вполне можно отнести к практическому использованию этого языка программирования. СМОТРЕТЬ

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

И в этом разделе практически использовал JavaScript для создания интересного эффекта переливающегося фона на сайте.
Сделал, показал пример, объяснил, как его можно настроить. СМОТРЕТЬ

Часы для сайта

Здесь спрограммировал простейшие часы для сайта. Сделал их отдельным элементом, с подключением внешних файлов и в "корпусе".
Крупно показывают ДАТУ: число, месяц и год; ВРЕМЯ: часы, минуты, секунды. Всё работает в реальном времени - без перезагрузки страницы.

Кроме того, написал и разместил там очень простой, но полезный скрипт, позволяющий автоматически изменять текущую дату года. СМОТРЕТЬ

Календарь для сайта

В этом разделе показываю пример практического использования JavaScript, и подробно объясняю, как сделать хороший автоматический календарь для сайта.
Детально рассказал весь процесс его создания и настройку дизайна. СМОТРЕТЬ

Анимация на JavaScript

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

▼

Снег на сайте

Показал, и подробно объяснил практический пример использования JavaScript для создания интересного эффекта падающего снега на сайте. СМОТРЕТЬ

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

Сначала показал пример такой "анимации" с помощью JavaScript, а потом объяснил, чем на самом деле она является. СМОТРЕТЬ

Движущиеся рисунки

Показываю несколько интересных примеров, и рассказываю, как с помощью JavaScript сделать рисунки движущимися. Разбираю основные параметры использованных скриптов. СМОТРЕТЬ

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

Даю два примера простой цифровой анимации, и подробно объясняю, как создаются анимированные цифры на сайте. СМОТРЕТЬ

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

Интересный пример красивой текстовой анимации мигающих букв, и описание использованного javascript-кода примера. СМОТРЕТЬ

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

Много примеров и подробное описание способа создания и настройки управляющего элемента анимации. СМОТРЕТЬ

JavaScript Dynamics

Это самостоятельный 7-ми страничный раздел, посвящённый анимации, в котором объясняю что такое "Dynamics", для чего предназначен, как с ним работать, и показываю примеры его практического применения. СМОТРЕТЬ

Просмотрщик изображений

Отличная возможность практического использования JavaScript для создания быстрых и лёгких просмотрщиков изображений на сайте. СМОТРЕТЬ

Спойлеры

Показываю несколько видов интересных, простых спойлеров, позволяющих легко экономить громадное количество места на сайте. СМОТРЕТЬ

Скрытое меню сайта

Пример практического использования спойлера для создания функционального и удобного меню для сайта. СМОТРЕТЬ

Слайд-шоу на JavaScript

Результат написания простого слайдера для сайта с помощью создания массива, как нового объекта, и работы с ним. СМОТРЕТЬ

Парольный вход

Способ организации на сайте входа по паролю, используя изученные функции и методы JavaScript. СМОТРЕТЬ

Поиск на сайте

Самый лёгкий, базовый способ создания быстрого поиска нужной информации на сайте с помощью JavaScript. СМОТРЕТЬ

Фотогалерея

Здесь показал простой способ создания на сайте галереи рисунков и фотографий с использованием базовой технологи интернета, и всего одной(!) строчки JavaScript.

Интересный метод, позволяющий легко перемещать и "перебирать" рисунки на экране монитора. СМОТРЕТЬ

Форма подписки для лендинга

Используя ту же самую, одну единственную(!) строчку кода JavaScript, можно спрограммировать удобную форму подписки для сайта-лендинга. Пример лендинга можете посмотреть и опробовать здесь. СМОТРЕТЬ

Решил "под занавес" добавить сюда ссылку на ещё одну страницу. Вообще, она уже больше относится к jQuery (и "живёт" в том каталоге), но ... ... . Думаю, такая и здесь будет к месту.
Prim.* Кстати, и дизайн учебного сайта будет уже совершенно другой.

Проверка корректного ввода е-мейл

Сочетание методов обычного JavaScript и его библиотеки jQuery даёт интересную возможность проверять корректность заполнения полей формы, с их выделением рамками разного цвета, и блокировать от повторной отправки сообщения, заказа, и т.д.. Подробное, пошаговое описание. СМОТРЕТЬ

* * *

Заключение

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

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

Второе.  Большое количество кода. Очень!!!
Для одного из примеров: "Часы для сайта", чтоб код был читаемым, с комментариями, использовал 34 строчки блокнота.

Третье.  Низкая кроссбраузерность. Скажем, для того же примера (с часами) пришлось, чтоб цифры отображались посередине всеми браузерами, прописать это напрямую в HTML-коде страницы. Вот такие "цветочки" ... ... .

Четвёртое.  БЕЗОПАСНОСТЬ! Очень веская причина! Так, при попытке зайти на сайт, использующий скрипты, мой браузер "Internet Explorer 8" всё время предупреждает вот таким сообщением.

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

Посетителя такое сообщение легко может отпугнуть. Вполне обоснованные опасения!

Сам, хорошо зная, что можно сделать с помощью скриптов, всегда осторожно отношусь к таким ресурсам, и сначала проверяю их антивирусами.

- А кроме того! -

Пятое.  Теперь появились гораздо более удобные технологии - jQuery и jQuery UI. Собственно, jQuery - это не какая-то новая технология, а всё тот же JavaScript, только улучшенный, модифицированный с помощью библиотек jQuery.

* * *

Впрочем, это уже другая история, и другой большой раздел моего "Портфолио", который так и назвал: JQUERY (прямой переход).

ВВЕРХ