Логотип Валидатор Валидатор Качество создания сайта

JAVASCRIPT


JavaScript Вступление

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

JavaScript+jQuery

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

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

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

* * *

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

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

JavaScript

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

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

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

Важно! JavaScript - это "клиентский" скрипт, т.е. выполняется он не на сервере, как PHP, а у Вас на компьютере, благодаря браузеру.
Если Вы отключили у себя в браузере интерпретатор javascript, увидеть действие скрипта Вы не сможете!

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

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

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

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

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

* * *

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

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

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

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

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

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

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

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

Функции

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

Сценарии на JavaScript

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

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

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

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

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

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

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

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

PHP и JavaScript

PHP и JavaScript

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

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

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

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

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

Спойлеры

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

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

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

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

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

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

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

Фотогалерея

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

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

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

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


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


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

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

* * *

Заключение

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

Вопрос

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

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

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

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

Предупреждение

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

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

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

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

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

* * *

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

Назад

ВВЕРХ

Все права защищены. Copyright © 2009 - 2017 Коротеев Владимир.

Protected by Copyscape Duplicate Content Check
Яндекс.Метрика
Рейтинг@Mail.ru