Что можно написать на javascript

JAVASCRIPT

JavaScript Вступление

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

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

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

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

* * *

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

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

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

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

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

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

В скриптах вирусов НЕТ.

Точно на 100%! Всё писал сам.

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

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

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

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

* * *

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

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

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

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

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

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

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

Это отличный инструмент для обработки больших объёмов информации. Зачастую нас интересует не всё что есть, а лишь определённая часть её.

Основы языка 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.

СМОТРЕТЬ

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

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

Фотогалерея

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

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

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

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


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


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

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

Подробное, пошаговое описание. СМОТРЕТЬ

* * *

Заключение

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

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

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

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

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

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

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

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

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

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

* * *

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

ВВЕРХ

Первая программа на JavaScript

Последнее обновление: 1.11.2015

Создадим первую программу на javascript. Для начала определим для нашего приложения какой-нибудь каталог. Например, назовем его app. В этой папке создадим файл под названием index.html. То есть данный файл будет представлять веб-страницу.

Откроем этот файл в текстовом редакторе, например, в Notepad++, и определим в файле следующий код:

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″ /> <title>JavaScript</title> </head> <body> <h2>Первая программа на JavaScript</h2> <script> alert(‘Привет мир!’); </script> </body> </html>

Здесь мы определяем стандартные элементы html. В элементе определяется кодировка utf-8 и заголовок (элемент ). В элементе определяется тело веб-страницы, состоящее из заголовочного элемента и элемента

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

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

Так, даже сейчас вы можете встретить на некоторых веб-страницах такое определение элемента script:

<script type=»text/javascript»>

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

Используемый нами код javascript содержит одно выражение:

alert(‘Привет мир!’);

Код javascript может содержать множество инструкций и каждая инструкция завершается точкой с запятой.

JavaScript Примеры

Наша инструкция вызывает метод alert(), который отображает сообщение со строкой ‘Привет мир!’.

При работе в текстовом редакторе и использовании кириллических символов нам надо учитывать кодировку. На нашей веб-странице мы использовали кодировку utf-8. И также надо задать эту кодировку для веб-страницы и в текстовом редакторе:

В меню кодировок нам надо выбрать пункт «Преобразовать в UTF-8 без BOM». Далее мы будем использовать кодировку utf-8, поэтому желательно сразу устанавливать кодировку в текстовом редакторе.

Теперь, когда веб-страница готова, откроем ее в веб-браузере:

И веб-браузер отобразит сообщение, которые мы передали в метод alert в коде javascript.

НазадСодержаниеВперед

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

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

Для того чтобы начать изучения языка JavaScript, нужно обязательно освоить две более простые технологии:

  1. HTML — язык разметки гипертекста, именно на нём пишут код сайтов.

    30 сайтов-примеров отличного использования JavaScript

    Это очень простой язык.

  2. CSS — каскадные таблицы стилей, технология управления внешним видом HTML-документа дающая расширенные возможности по установке цветов, шрифтов, размеров блоков, величин и стилей границ блоков html-страницы.

Если хотите начать осваивать JavaScript, сначала пройдите HTML и самоучитель CSS, без этих знаний изучать JavaScript нет смысла.

Кратко про JavaScript

  1. JavaScript создан специально для улучшения HTML страниц.
  2. JavaScript — это язык скриптов или язык сценариев.
  3. Языки сценариев — это упрощённые языки программирования, создаваемые для работы в определённых средах. Например в таких офисных программах, как Word и Exel есть встроенные языки сценариев.
  4. Код JavaScript можно прописать прямо в HTML-код страницы.
  5. Писать сценарии JavaScript можно в простом блакноте, а работают они в окне браузера.
  6. Каждый человек может использовать язык JavaScript свободно, без покупки лицензии.

Для чего именно используют JavaScript?

  1. Использование JavaScript делает документы HTML динамическими. Прокручивающиеся слайды из нескольких картинок или динамический текст — это результат работы JavaScript.
  2. Проверка данных, введённых пользователей в форму, до её отправки на сервер — это работа JavaScript.
  3. Открытие новых окон без участия пользователя — это делается используя JavaScript.
  4. Изменение содержимого окна браузера, в зависимости от действий пользователя — это тоже работа JavaScript.
  5. Многие другие эффекты.

Java и JavaScript — это одно и то же?

Java и JavaScript — это разные языки программирования.

Язык Java только по названию похож на JavaScript.

Java гораздо более сложный язык программирования. Java находится в той же категории, что и языки C или C++.

Добавить комментарий

Закрыть меню