Javascript коды для сайта

Содержание

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

Код JavaScript может быть написан либо непосредственно в самом HTML-документе, либо в отдельном файле.

Для записи JavaScript-кода в HTML-документе используется тег

В следующем примере код JavaScript написан непосредственно в самом HTML-документе. При загрузке страницы данный код сработает и вызовет всплывающее сообщение:

Запуск скрипта

В предыдущем примере скрипт запустился во время загрузки HTML-документа. Но что делать если вы не хотите, чтобы скрипт запускался автоматически? Вы легко можете сделать так, чтобы запуск скрипта осуществлялся только в том случае, если пользователь делает что-то на странице (например, перемещает курсор мыши или кликае ссылку).
Эти действия называются внутренними событиями (события, для краткости). Есть множество предопределенных внутренних событий, которые осуществляют запуск скрипта. Вы можете использовать обработчики событий, чтобы сообщить браузеру, какое событие должно вызвать тот или иной сценарий. События определяются как атрибуты внутри HTML-тега.
Допустим, вы хотите, чтобы появлялось сообщение после того, когда пользователь нажимает кнопку. Вы можете использовать обработчик событий onclick() для выполнения действий. В следующем примере будет отображено окно предупреждения JavaScript, содержащее сообщение:

Читайте также:  Hdmi кабель для наушников

Подключение внешнего скрипта

Если предполагается использовать один и тот же сценарий на многих веб-страницах, удобно разместить его в отдельном файле и затем сослаться на этот файл. Это целесообразно сделать даже в том случае, если код будет использован только на одной странице. Например, если сценарий слишком большой и громоздкий, то выделение его в отдельный файл облегчает восприятие и отладку кода веб-страницы.
JavaScript-код можно записать в отдельном файле с расширением .js , после чего подключать его к HTML-документу примерно так, как мы делали это с CSS-файлами.
Файл с расширением .js является обычными текстовым файлом, как и другие уже известные нам файлы с расширениями: .css и .html .
Создадим файл script.js и сохраним в нем небольшую функцию, созданную с помощью Javascript:

Для подключения JS-файлов также используется тег

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

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

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

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

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

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

Читайте также:  Текст синего экрана смерти

1. Максимальная высота или ширина в наборе элементов

Очень полезный скрипт для выравнивания высоты или ширины колонок.

Вариант для высоты:

Использование:

Чтобы использовать скрипт для ширины нужно заменить все включения height и Height на width и Width соответственно.

Демонстрация использования кода

2. Эффективная проверка дат

Инструментарий JavaScript для работы с датами очень прост и не достаточен для форматирования дат. Хотя существует множество библиотек которые существенно облегчают обработку дат, часто нужно просто проверять дату в строке. Для такого случая отлично подходит следующий скрипт. Он позволяет проверить дату с любым разделителем и годом, указанным 4-мя цифрами.

Использование:

Следующая строка вернет false, так как в ноябре 30 дней:

Демонстрация использования кода

3. Устанавливаем соответствие между шириной экрана и точками излома для адаптивного дизайна

Быстрый способ связать медиа запросы CSS и код JavaScript.

Использование:

Демонстрация показывает взаимодействие с медиа запросами CSS. Если нажать на прямоугольник, то будет выведено сообщение о типе устройства с текущей шириной экрана. Медиа запросы изменяют цвет прямоугольника, а скрипт формирует правильное сообщение. Очень простой пример с огромным потенциалом.

Демонстрация использования кода

4. Выделение текста

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

Также можно отменить выделение текста.

Использование:

Демонстрация использования кода

5. Анимированные текстовые эффекты

Простые, но достаточно привлекательные визуальные эффекты для анимации свойств текста. А если их использовать в сочетании с переходами CSS3, то они станут еще более интересными. Данный скрипт приводится в виде плагина jQuery (чтобы было легче использовать):

Использование:

Создаем класс CSS для выделения текста и применяем плагин для элемента с текстом, например, к параграфу:

Демонстрация использования кода

6. Проявление элементов одного за другим

Плагин jQuery для проявления элементов одного за другим.

Читайте также:  Зачем нужна переадресация вызова

Использование:

Демонстрация использования кода

7. Подсчет нажатий кнопки мыши

Иногда требуется подсчитать, сколько раз пользователь нажал на элемент. Обычно для решения задачи создают счетчик в виде глобальной переменной, но jQuery помогает избавиться от засорения глобального пространства имен с помощью использования data() для хранения значения.

Демонстрация использования кода

8. Встраивание видео Youtube из ссылки

Полезный скрипт для встраивания видео Youtube из ссылки с использованием параметров. Код работает почти на всех форматах ссылки Youtube, так как используется специальное регулярное выражение. Также скрипт фиксирует проблему "super z-index", которая проявляется при встраивании видео Youtube.

Использование:

Значения для параметров описаны в документации Youtube API

Демонстрация использования кода

9. Уменьшаем размер текста

Данный скрипт похож на функцию excerpt в WordPress. Он обрезает текст по количеству слов и добавляет специальный элемент для указания сокращения текста. Работает с текстом, в котором имеются другие встроенные теги (например, такие как strong или em или ссылки).

Демонстрация использования кода

10. Создаем динамическое меню

Создаем любое меню динамически. Простой скрипт с большим потенциалом.

Использование:

Демонстрация использования кода

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.onextrapixel.com/2012/10/04/10-useful-and-time-saving-javascript-snippets/
Перевел: Сергей Фастунов
Урок создан: 7 Октября 2012
Просмотров: 80802
Правила перепечатки

5 последних уроков рубрики "jQuery"

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

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

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.